How to Make (Almost) Anything
Project 13 - Programming
Title: Interface and Application Programming
Design: Sensor Interface with Javascript
JavaScript
Description
JavaScript and HTML DOM
The Document Objecet Model (DOM) is the tree structure model that describes the relationship of all nodes in HTML document. DOM becomes the interface between HTML and JavaScript.
HTML DOM Visualizer
I come across an amazing DOM visualization by Marcel Salathe. Unfortunately his website is not accessible at the moment. In the image below, each color represents different node type as the following:
- blue: link: <a>
- red: table: <table>
- green: div: <div>
- violet: image: <img>
- yellow: form: <form>
- orange: paragraph: <p>
- blak: html: <html>
- gray: all others: <*>
- source: http://www.aharef.info/static/htmlgraph/
- author: Marcel Salathe
- library: processing, traer physics, htmlparser
- examples on flickr
HTML DOM with D3.js
Required Library
D3.js can be directly linked to your html document by inserting the following snippet in header:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
Node.js
Tomer has put together a great tutorial on how to use node.js to connect serial port to the web server. It's a great approach to broadcast local sensing data to the web.
For this week's project, I've decided to learn javascript and node.js based on Tomer's tutorial.
Canvas Tag
For the input data, I used my capacitive sensor. For the output, I used the reading from the sensor and pluged it to the html's canvas object to draw dynamic circles. Circles radius, position, and color are connected to the reading from the sensor.
