Posts | Comments

Planet Arduino

Archive for the ‘html5’ Category

Giu
21

LED-Pixel-FrameThere is nothing better than a project that you can put on display for all to see. [Tristan's] most recent project, a Decorative LED Matrix Frame, containing 12×10 big square pixels that can display any color, is really cool.

Having been built around a cheap IKEA photo frame this project is very doable, at least for those of you with a 3D printer. The 3D printer is needed to create the pixel grid, which ends up looking very clean in the final frame. From an electronics perspective, the main components are a set of Adafruit Neopixel LED strips, and an Arduino Uno with an Ethernet shield. The main controller even contains a battery backup for the real time clock (RTC) when the frame is unplugged; a nice touch. Given that the frame is connected to the local network, [Tristan] designed the frame to be controlled by a simple HTML5 interface (code available on GitHub). This allows any locally connected device to control the frame.

Be sure to check out the build details, they are very well done. If you are still not convinced how cool this project is, be sure to check out a video of it in action after the break! It makes us wish that you could play Tetris on this frame. Very nice job [Tristan]!


Filed under: Arduino Hacks, led hacks
Dic
25

Controlling GLCD with Arduino and iPod touch

arduino, html5, ipod touch Commenti disabilitati su Controlling GLCD with Arduino and iPod touch 

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.
Dic
04

Controlling Arduino with iPod touch through WebSocket

arduino, html5, ipod touch Commenti disabilitati su Controlling Arduino with iPod touch through WebSocket 

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.


  • Newsletter

    Sign up for the PlanetArduino Newsletter, which delivers the most popular articles via e-mail to your inbox every week. Just fill in the information below and submit.

  • Like Us on Facebook