Lesson 1 - Create a Button on Your Apple Watch

 

Written by Robin Ha

Works on iOS
You can find this lesson and more in the Arduino IDE (File -> Examples -> Andee). If you are unable to find them, you will need to install the Andee Library for Arduino IDE.

Apple Watch is the latest wearable technology by Apple that works with the almighty iPhone. Wouldn't be nice if you can control your hardware projects with your Apple Watch too?

In this Lesson you will learn to blink your LED with your AppleWatch

AppleWatch 1 1.png AppleWatch 1 2.png

Contents

Requirement

  • Apple Watch with paired iPhone
  • Annikken Andee for iOS with Firmware 2.0 and above
  • Arduino
  • 1 LED
  • Annikken Andee App V3.0 and above
  • Annikken Andee Library F19


What does the Program do

  1. Create a Button on iPhone
  2. Click on this button to create the UI on the Apple Watch. The UI on Watch is consist of 1 Button
  3. Click on the Button on the Apple Watch to Toggle the LED

Top of the Code

#include <SPI.h>
#include <Andee.h>

// Apple Watch UI
AndeeHelper WatchTitle; // This will be used to set the Title on the Watch UI
AndeeHelper WatchBack;  // This will be used to set the behavioir of the watch "Back button"
AndeeHelper WatchButton1; // This will be used to set the attribute and behavior the Button on the Watch UI

// iPhone UI
AndeeHelper EnableWatch; // Press this button on iPhone to create the Apple Watch UI

bool WatchButtonState; // Watch Button State (on or off)

int state; // Program State
// state == 0  -> Wait for User Button Press on Phone
// state == 1  -> Create UI on Apple Watch

setup()

void setup()
{
  state = 0;
  spamupdate = true;
  Andee.begin();  // Setup communication between Annikken Andee and Arduino
  Andee.clear();  // Clear the screen of any previous displays
  setup_AndeeWatch(); // Setup the UI on the Watch
  setup_AndeePhone(); // Setup the UI on the iPhone
  pinMode(13, OUTPUT); // control the LED
}

setup_AndeeWatch()

void setup_AndeeWatch()
{
  WatchButtonState = false;
  
  
  // This Andee Helper is for the Watch Title
  // do not set your own arbitrary Id value 
  WatchTitle.setId(WATCH_TITLE); 
  WatchTitle.setType(WATCH); // For Watch UI
  WatchTitle.setWatchTitle("Single Button"); // Change the Title text to "Single Button"


  // This Andee Helper is for the Back Button
  // do not set your own arbitrary Id value
  // Not being used in this Lesson
  WatchBack.setId(WATCH_BUTTON0);
  WatchBack.setType(WATCH);
  
  // This Andee Helper is for the Button
  // do not set your own arbitrary Id value
  WatchButton1.setId(WATCH_BUTTON1);
  WatchButton1.setType(WATCH);

  // Set the Button Text as "Turn On" and Color to AARRGGBB "FF7959FF"
  WatchButton1.setWatchTitle("Turn ON");
  WatchButton1.setWatchTitleColor("FF7959FF");
}

setup_AndeePhone()

void setup_AndeePhone()
{
  // Setup the UI On the iOS device
  // Do not setId from (44 - 49)
  // use 0 - 43
  EnableWatch.setId(10);
  EnableWatch.setType(BUTTON_IN);
  EnableWatch.setLocation(0, 0, FULL);
  EnableWatch.setTitle("Enable Watch");
}

loop()

Select the Template Screen you want on the Watch using Andee.changeScreen(WATCH_1BUTTON_A);

Button Template Type A

WatchTemplateButtonTypeA.png


Button Template Type B

WatchTemplateButtonTypeB.png

  • 1 Button UI
    • WATCH_1BUTTON_A
    • WATCH_1BUTTON_B
  • 2 Button UI
    • WATCH_2BUTTON_A
    • WATCH_2BUTTON_B
  • 3 Button UI
    • WATCH_3BUTTON_A
    • WATCH_3BUTTON_B
  • 4 Button UI
    • WATCH_4BUTTON_A
    • WATCH_4BUTTON_B
  • Game Pad UI
    • WATCH_GAMEPAD

---

After you have selected the Template you want, configure the Title and Buttons using the Andee Helper you have initialised earlier.

There are 3 to 6 Important UI objects in each Watch UI Template. You can configure the attributes of these UI Objects by calling setId(???) and setType(WATCH) to link each UI object to your Andee Helper. Refer to the list of perimeters below for setId().

[[File:AppleWatch_2.png]200px|]

[[File:AppleWatch_1.png]200px|]

  • Perimeters for setId()
    • TITLE - WATCH_TITLE
    • Button0/Back - WATCH_BUTTON0
    • Button1 - WATCH_BUTTON1
    • Button2 - WATCH_BUTTON2
    • Button3 - WATCH_BUTTON3
    • Button4 - WATCH_BUTTON4


void loop()
{

  if (state == 0) {
    // Program State == 0
    // Create a Button on the PHONE
    // UI on the Apple watch will only be create when this button is pressed
    if (EnableWatch.isPressed() == true) {
      EnableWatch.ack();
      state = 1; // Change Program State to 1
      spamupdate = true;
    }
    EnableWatch.update();
  }

  else if (state == 1) {
    // Program State == 0
    // Apple Watch UI
    if (spamupdate == true) {
      // Create the Watch UI
      // This segment of codes will only be called once
      
      spamupdate = false;// Set to false so that this segment of codes will not be called again
      setup_AndeeWatch();
      
      Andee.hideScreen();// Hide the previous Watch UI Screen if Any
      delay(100);
      
      Andee.changeScreen(WATCH_1BUTTON_A); 
      delay(100);
      WatchTitle.update(); //Set the Title Text
      WatchBack.update();  //Set the Back Button (Not in use)
      WatchButton1.update(); //Set the Button 1 Text and Color
      delay(100);
      Andee.showScreen(); // Show the UI on your Apple Watch

    }

    if (WatchButton1.isPressed() == true) {// Button on Watch is Pressed
      WatchButton1.ack();
      WatchButtonState = !WatchButtonState; // Toggle State

      if (WatchButtonState == true) {
        WatchButton1.setWatchTitle("Turn OFF");
        WatchButton1.setWatchTitleColor("FFFF0000");
        digitalWrite(13, HIGH);// Turn On LED
      }
      else if (WatchButtonState == false) {
        WatchButton1.setWatchTitle("Turn ON");
        WatchButton1.setWatchTitleColor("FF7959FF");
        digitalWrite(13, LOW);//Turn OFf LED
      }
      WatchButton1.update(); // Button1 Text and Color Change

    }
  }
  delay(250);
}
comments powered by Disqus