Planet Arduino

I bought Graphics LCD (KS0107). So I tried to control this GLCD with iPod touch/Safari through WebSocket.


For controlling GLCD, I used Arduino and KS0108 library. Firstly I wrote the Arduino code that Arduino receives a drawing data from serial port and draws a picture on GLCD.



A drawing data is sequences of lines constructed of start and end point. For example, if there is a drawing data: "10,10:20,20;20,20:30,10;", this data means that the first line connects (10,10) and (20,20) and the second line connects (20,20) and (30,10).

Secondly I wrote the WebSocket Server in Python/Tornado. This server receives a drawing data from iPod touch/Safari through WebSocket connection and sends the data to Arduino thought Serial port. I used pySerial for Serial communication.



Finally I wrote a web page for drawing a picture and sending a drawing data. This page uses Canvas and WebSocket and is written in HTML5. This page can be loaded and used on iOS Safari or Google Chrome.



On iOS Safari, the pen is my finger or touch pen. On Google Chrome, the pen is mouse cursor. For reducing the size of data, I thin out points of pen's motion.

I used it and made expository movie.



I wanted to draw some amusing picture but I don't have a talent for painting.

Thanks.

I bought Graphics LCD (KS0107). So I tried to control this GLCD with iPod touch/Safari through WebSocket.


For controlling GLCD, I used Arduino and KS0108 library. Firstly I wrote the Arduino code that Arduino receives a drawing data from serial port and draws a picture on GLCD.



A drawing data is sequences of lines constructed of start and end point. For example, if there is a drawing data: "10,10:20,20;20,20:30,10;", this data means that the first line connects (10,10) and (20,20) and the second line connects (20,20) and (30,10).

Secondly I wrote the WebSocket Server in Python/Tornado. This server receives a drawing data from iPod touch/Safari through WebSocket connection and sends the data to Arduino thought Serial port. I used pySerial for Serial communication.



Finally I wrote a web page for drawing a picture and sending a drawing data. This page uses Canvas and WebSocket and is written in HTML5. This page can be loaded and used on iOS Safari or Google Chrome.



On iOS Safari, the pen is my finger or touch pen. On Google Chrome, the pen is mouse cursor. For reducing the size of data, I thin out points of pen's motion.

I used it and made expository movie.



I wanted to draw some amusing picture but I don't have a talent for painting.

Thanks.

I wanted Arduino to send messages to my iPod touch at need. In a case like this, Apple Push Notification Service is suited.

So, I developed Arduino library for posting messages to im.kayac.com.

Actually I wanted to develop an Arduino library for Notifo. But Ethernet library of Arduino doesn't support HTTPS connection. It is nice that im.kayac.com supports HTTP connection and multiple authorization.



With this library, I can recieve any messages immediately in iPod touch or Jabber client from Arduino. Too long (> 200 characters) or non-ascii message is not supported, but this limitation can be changed by editing "Imkayaccom.h".

I think that this library is used in interactive system between people and environment like rooms embedded sensors.

If you can't use this library for any reason, you can use following code in your Arduino code.



Thanks.

I wanted Arduino to send messages to my iPod touch at need. In a case like this, Apple Push Notification Service is suited.

So, I developed Arduino library for posting messages to im.kayac.com.

Actually I wanted to develop an Arduino library for Notifo. But Ethernet library of Arduino doesn't support HTTPS connection. It is nice that im.kayac.com supports HTTP connection and multiple authorization.



With this library, I can recieve any messages immediately in iPod touch or Jabber client from Arduino. Too long (> 200 characters) or non-ascii message is not supported, but this limitation can be changed by editing "Imkayaccom.h".

I think that this library is used in interactive system between people and environment like rooms embedded sensors.

If you can't use this library for any reason, you can use following code in your Arduino code.



Thanks.

In my previous entry, I made an application with DeviceMotion Event and WebSocket in iPod touch.

WebSocket server is written in Python/Tornado. So WebSocket message should be able to be relayed to other softwares or devices.

I try to control Arduino device with iPod touch through WebSocket.

Design

Flowing data among iPod touch, WebSocket server and Arduino is written in JSON.

There is a ball in a web page displayed in iPod touch/Safari. The ball moves with DeviceMotion Event by the tilt of iPod touch. The color of a ball is selected by form between red and green.

The web page sends a data including color and location of ball to a WebSocket server. The WebSocket server relays the data to Arduino through TCP socket connection.

If Arduino carrying the Ethernet Shield and Matrix LED gets a ball data from WebSocket Server, Arduino displays the information of the ball with Matrix LED. For controlling 2 colors Matrix LED, MAX7219 x 2 is used.

Implementation

WebSocket server written in Tornado is referenced with "http://192.168.254.23:8888" and "ws://192.168.254.23:8888/ball".



This WebSocket server needs to be run on PC in advance.

If this WebSocket server receives a JSON data, it sends to Arduino as TCP packet. Arduino has "192.168.254.100:9999" as IP-address:Listening-Port.

In the code for Arduino, I use Ethernet library, Matrix library and aJson library.

The data from WebSocket server includes color and location of a ball. The color of ball is used for the color of LED. The location of ball is 0 ~ 300 (X-axis) and 0 ~ 336 (Y-axis). Because Matrix LED has 8x8 LED, I use map(), that is a built-in function for Arduino, for handling location of ball and LED.





The web page is written in HTML5 because I use WebSocket and DeviceMotion Event. This web page reads the situation of iPod touch, updates the location of a ball and sends the information as JSON data to WebSocket server every 1 sec.

This page needs to be deployed in the same directory as WebSocket server.

Playing

$ ls
balls_canvas.html   balls_websocket.py
$ python balls_websocket.py
(waiting as Web/WebSocket server)

The web page is displayed in Safari of iPod touch. If I tilt iPod touch or change the color of a ball, the ball in the web page moves or changes the color. In the back, the web page sends JSON data as the information of the ball to the WebSocket server and the WebSocket server sends the data to Arduino. The situation of Matrix LED controlled by Arduino is determined by reference to the JSON data.



Thanks.

In my previous entry, I made an application with DeviceMotion Event and WebSocket in iPod touch.

WebSocket server is written in Python/Tornado. So WebSocket message should be able to be relayed to other softwares or devices.

I try to control Arduino device with iPod touch through WebSocket.

Design

Flowing data among iPod touch, WebSocket server and Arduino is written in JSON.

There is a ball in a web page displayed in iPod touch/Safari. The ball moves with DeviceMotion Event by the tilt of iPod touch. The color of a ball is selected by form between red and green.

The web page sends a data including color and location of ball to a WebSocket server. The WebSocket server relays the data to Arduino through TCP socket connection.

If Arduino carrying the Ethernet Shield and Matrix LED gets a ball data from WebSocket Server, Arduino displays the information of the ball with Matrix LED. For controlling 2 colors Matrix LED, MAX7219 x 2 is used.

Implementation

WebSocket server written in Tornado is referenced with "http://192.168.254.23:8888" and "ws://192.168.254.23:8888/ball".



This WebSocket server needs to be run on PC in advance.

If this WebSocket server receives a JSON data, it sends to Arduino as TCP packet. Arduino has "192.168.254.100:9999" as IP-address:Listening-Port.

In the code for Arduino, I use Ethernet library, Matrix library and aJson library.

The data from WebSocket server includes color and location of a ball. The color of ball is used for the color of LED. The location of ball is 0 ~ 300 (X-axis) and 0 ~ 336 (Y-axis). Because Matrix LED has 8x8 LED, I use map(), that is a built-in function for Arduino, for handling location of ball and LED.





The web page is written in HTML5 because I use WebSocket and DeviceMotion Event. This web page reads the situation of iPod touch, updates the location of a ball and sends the information as JSON data to WebSocket server every 1 sec.

This page needs to be deployed in the same directory as WebSocket server.

Playing

$ ls
balls_canvas.html   balls_websocket.py
$ python balls_websocket.py
(waiting as Web/WebSocket server)

The web page is displayed in Safari of iPod touch. If I tilt iPod touch or change the color of a ball, the ball in the web page moves or changes the color. In the back, the web page sends JSON data as the information of the ball to the WebSocket server and the WebSocket server sends the data to Arduino. The situation of Matrix LED controlled by Arduino is determined by reference to the JSON data.



Thanks.