This is a massive upgrade to my earlier project that i posted a couple a days ago
here. The interface using the RoundButtons from Coding4Fun toolkit looks much cleaner and aesthetic. More features like controlling the light intensity, single tap color change, turning off all the LEDs on the shield, reflection of a hardware reset in the phone UI etc. The paragraphs below briefly detail out the two main components.
The Roundbuttons - Created using the RoundButton class from coding4fun toolkit. These buttons have two event handlers registered in the code, one for Hold and other for a Click. Holding a button for a certain duration causes the color selector window to pop up. This window has a Hexagon color picker interface created using the same coding4fun toolkit. Touching and dragging your finger on this picker will update the selected RGB LED color in real-time. Once a color is selected it can be applied to one or more LEDs by clicking on them, this is handled by the Click event handler.
The ColorPicker - The hexagon color picker has a handler registered to it's Color Changed event. The color data received is framed in a transmission packet and sent over the BT interface to the Arduino board in this handler. Adjusting the slider below the color picker adjusts the brightness of the LEDs. The Turn Off button turns off all the LEDs on the shield and also clears the button background color on the UI.
Implementation
All the round buttons used, follow the xaml template shown below. 40 buttons have been created using the same xaml statement. The only difference is the Name field which is unique for each button. The buttons are placed inside a Grid component therefore the (0, 0) grid position corresponds to the upper left LED near the Reset button on the RGB shield. the buttons have been named in a similar pattern. The button inside the (0, 0) grid cell is named a_a, the button in cell (0, 1) as a_b, (1, 0) as b_a and so on. All buttons have the same Click and Hold event handler.
When the application is started it establishes a connetion with the Arduino BT shield, which exposes serial ports to the Arduino. (The shield uses the BT Serial Port Profile) The read / write operations on the arduino are done using the softwareserial library at 9600 baud. On the phone side, DataReader and DataWriter objects are created to read from the Socket (StremSocket class). The socket connects using the ConnectAsync call in the StreamSocket class.
When a button is held for a specific amount of time the Hold Event occurs. This triggers the hold event handler and opens another window that displays the hexagon color picker. The hexagon color picker has a event handler attached to its ColorChanged event. When you touch the color picker and move your finger over it, the ColorChanged handler is continuously called. The OS passes the sender and the Color to the event handler. Inside the event handler, the serial packet to be transmitted to the arduino is built. It has the format as shown below. Hence if i click on button (2, 3) in the grid with full green color selected on the color picker then the packet will be
c_d_0_255_0
As the data is sent as a String the "_" is used as a separator. This command will be parsed on the Arduino. Since the X and Y co-ordinate positions in the command are fixed at offsets 0 and 2 respectively the value can be easily obtained by doing a (int)command[0] - 97. extracting the color values requires a little processing. This value can be then sent to the NeoPixel Library. The intensity adjustment follows a similar format with a smaller packet and a command identifier as 'I'. An alternative method would be to send the numerical values corresponding to the buttons directly. But i could not find any means to figure out which button inside the grid had been clicked without using the Name property....(duh)
When the arduino is reset all LEDs on the phone UI need to be turned off. This is accomplished by sending the string "RESET" from the Arduino to the phone. The phone maintains a journal in an custom LEDManager class about the LEDs that are currently active. When the reset command is received, using the
DependencyObject with the grid as the parent and the
VisualTreeHelper class, a list of all buttons in the parent is created, then iterating over the
List, each button's background color is set the to the OFF color which is black. Similarly when the Turn Off button is clicked on the color picker interface it sends a "OFF" command to the Arduino, turning off all the LEDs and clearing the UI.
Most of the actions are demonstrated in the below video where you can see me messing around with the LEDs.
Some Usage scenarios
1. Arduino Powered Up, Windows phone BT turned ON, Application start
In
this case the serial link is established between the phone and the
arduino hardware and the data packets are exchanged normally between the
two.
2. Arduino Powered Up, Windows Phone BT turned OFF, Application start
In
this case the application will open a message box indicating the the
phone bluetooth connection is turned off. The application UI will be
disabled. Application will have to exit and be restarted once the phone
BT is turned ON
3. Arduino OFF, Whindows phone BT turned ON, Applicatino start
-
Undefined behavior. Application runs without crashing. Re-connect will
not happen even when the board is powered up. The application needs to
be restarted.
Future upgrades include hooking up the shield with Facebook API, group control of LEDs, Gesture controls, using sensor interfaces on the WP8 to manipulate LED colore etc. Now this is one hell of a way to learn Windows Phone Programming....
References:
Bluetooth communication between Arduino and Windows 8.1
Windows Phone API Reference
Where is all the code ? Here is the code running on the Arduino. The Windows Phone code will make this post the longest ever. Therefore i leave it up to you to implement.
