Web

Using Node.js as a web server

Evan Boldt — Mon, 04 Aug 2014 23:59:45 +0000

Using Node.js as a web server

Topics

Evan Boldt Mon, 08/04/2014 - 18:59

Introduction

Node.js is JavaScript that can be run outside of a browser. It is often used to make a fast server for dynamic content.

Probably one of the biggest advantages to Node.js, aside from being one of the fastest and easiest to learn server environments, is that JavaScript is the lanugage used on browsers, allowing you to program both the server and client in the same language.

Example

First, download and install node.js

Then, start the example by usign the command:

nodejs server.js

This example starts by sending a static HTML form when you visit http://localhost:8080/. It looks like the image below:

Clicking the submit button on the form sends a get request to http://localhost:8080/submit. It looks like the image below.

The interesting part of this script is the (url_parts.pathname == '/submit') condition. This is where the dynamic page generation happens. It starts by just regurgitating the information it was sent in the form. Note that the variable names of the url_parts.query.varname match up to the "name" attribute in each of the form elements. One of the most powerful features of node.js is that the program remains running between requests, unlike PHP. As a result, we can store variables which can retain their values as long as the process stays running. Storing any really important information this way is a bad idea, since a crash or shutdown would cause the data to disappear. A database can be used, such as MySQL. However, probably the most popular database for node.js servers is MongoDB, which uses JSON encoded data.

This form would also work by POST, if the form method were changed from GET to POST.

var http = require('http'); // these lines are somewhat similar to #include in C++
var util = require('util'); // except that the left hand side is an object/variable
var url = require('url');
var fs = require('fs');

// provide a "database"
messages = []

var server = http.createServer(function (req,res){
	 // parse the URL
	var url_parts = url.parse(req.url,true);

	// functions to serve static files
	function sendHTML(filepath) {
		// read the file asyncronously
		fs.readFile(filepath,function(error,contents){ 
			// once the file is loaded, this function runs
	    	console.log('Serving the html ' + filepath);
	    	res.end(contents); // end the request and send the file
	    });
	}
	function sendCSS(filepath) {
		// once the file is loaded, this function runs
		fs.readFile(filepath,function(error,contents){ 
	    	console.log('Serving the css ' + filepath);
	    	res.end(contents); // end the request and send the file
	    });
	}

	// serve the index page from a static file
	if( url_parts.pathname == '/' ) {
		sendHTML('./form.html');
	}
	// serve the CSS page from a static file
	else if ( url_parts.pathname == '/style.css') {
		sendCSS('./style.css')
	}
	// generate a dynamic page
	else if ( url_parts.pathname == '/submit' ) {
		var html = '<html><body>'; // begin the minimal html structure
		html += "<h2>Query received</h2>";
		html += "Name: " + url_parts.query.name;
		html += '<br />';
		html += "Email: " + url_parts.query.email;
		html += '<br />';
		html += "Message: " + url_parts.query.message;
		html += '<br />';

		html += '<h2>Previous Messages</h2>';
		messages.push(url_parts.query.message)

		// loop through the old messages
		for(m in messages) {
			html += messages[m];
			html += '<br />';
		}

		html += '</body></html>'; // end the minimal html structure

		res.end(html); // end the request and send the response HTML
	}
	// if the url was not recognized, 404
	else {
		res.writeHead(404) // put a header for not found
		// print the page and end the request
		res.end("<h1>404 - Path not recognized</h1>"); 
	}
 });

server.listen(8080);
util.log('Server listenning at localhost:8080');

Attachments

nodejsExample.zip1.72 KB

Disqus

JavaScript and jQuery Introduction

Evan Boldt — Tue, 26 Mar 2013 05:29:51 +0000

JavaScript and jQuery Introduction

Topics

Introduction

Programming

Web

Evan Boldt Tue, 03/26/2013 - 00:29

Introduction

JavaScript is an actual programming language that is interpreted and run by your browser. It makes a webpage interactive and dynamic instead of just a rigid page that doesn't change once it's loaded. You can use it to send and recieve bits of information without having to load another page. It allows you to drag and drop elements, or react to clicks and hovers. You can even use it to make an in-browser game.

It is syntactically similar to Java. It requires semi-colons at the end of each statement. However, it does not have rigid data types. Any variable can store data of any type - sort of like python. In fact, a variable can even store a function or actually contain nothing (undefined).

jQuery

Many of the ways you would routinely use JavaScript are made drastically easier by using the jQuery library. jQuery provides a simplified interface for finding elements in a webpage, easy methods for modifying styles and appending content, simple functions for doing making fluid transition animations, and a reliable way to send and recieve data like JSON to a server asyncronously.

Setting Up jQuery

the jQuery .js file simply needs to be included in the pages scripts. This can be done really easily by using Google's hosted libraries. One of the advanatages to using Google's hosted libraries is that the file may already be cached in the user's browser.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Using the JavaScript Console

The JavaScript console is extremely useful. In Chrome, it can be revealed by going to Options > Tools > Developer Tools > Console (the furthest tab to the right). This provides an interactive console. You can type a line of JavaScript, and you can read any errors or the output of any console.log() command in the JavaScript ran up until this point.

Searching for Elements

Elements in a webpage can be searched for extremely easily with jQuery. The the string used in the search is practically identical to the specifiers in CSS. ID's are specified with a # sign, classes are preceeded by a ., you can search for a specific drilldown by seperating specifiers by spaces, and seperate searches can be done simulteneously be using a comma.

results = $("#main .gallery img"); // gets img tags in gallery classes in main ID

Modifying Elements

To replace the contents of an element, you can use either the html or text method, where text will strip tags. Both the html and text methods can return the current contents of an element if the function is called without any parameters.

var titleText = $("#main h2.title").text() //gets the text in the heading tag
$("#main h2.title").text("New Title!");    //replaces the text in the heading tag

To add to the current contents at the end. Note that there is also a prepend method that adds to the beginning.

$("#main").append('<div class="new">New Stuff</div>');

Styles

Style information can be set and retrieved similar to the contents of an element. Select the element then use the css jQuery method to either retrieve or set the style by calling .css() with only the attribute or by calling it with both the attribute name and a value. It can also be called with a dictionary as an argument, with key value pairs corresponding to the css attribute names and values.

$("#comments .new").css("color", "#C00"); //adds to elements' style="" attribute

Another way to change the style of an element would be to simply toggle a class on the element, then defining the CSS in a stylesheet. jQuery provides a lot of methods for this, like checking whether an element has a class (hasClass), adding a class (addClass), switching back and forth whether an element has a class (toggleClass), and removing a class (removeClass).

Other style information can be easily retrieved and set in jQuery, like heights, widths, margins, positions on page, and scoll positions.

Animation

Styling can be easily animated with jQuery effects, which is possibly one of its most useful features.

Some animations are predefined all having to do with hiding and revealing elements, like: hide(), .slideDown(), slideUp(), fadeIn, fadeOut

$(".oops").hide()

Alternately, an animation can be completely customized with very little code by using the animate method. Many css values can be animated except colors, which requires jQuery UI. The first argument to animate is a dictionary of attributes and values for the styles, and the second argument is the duration of the animation in milliseconds.

$("#main").animate({ width: "50%" }, 1000 );

Events

Events are what make JavaScript truly interactive. They allow your script to react to changes.

Essentially, events are simply functions that are called whenever something happens. For example, if you want to make a webpage do something in response to a click, you simply say attach a function to an elements click event.

function reactionToEvent() {
   $(this).text("CHANGED!"); //change calling elements text
}

$("#mybutton").click(reactionToEvent);

Which is the same thing as:

$("#mybutton").click(function() {
   $(this).text("CHANGED!"); //change calling elements text
});

There are all kinds of events available. One of the most common ones used in jQuery is to delay actions until the document is loaded by using: $(document).ready(handler)

Here are some of the other most common ones:
click, mousedown, mouseup - React to button presses
hover - Reacts to the mouse entering or leaving an element
keydown, keypress - Reacts to keyboard button presses like hotkeys.
change - Reacts to form elements being altered like inputs, select boxes, and radio buttons

There are many more events available than that, but they may require the use of the jQuery bind method.

Sending and Receiving JSON

JSON is an awesome tool for sending structured data to and from a server. You can retain the data types of any JavaScript variable, like a dictionary that has arrays that have all kinds of different data types. It turns the data types into a structured and linear string, which is a process called serializing. For example, a CSV is a sort of a way of serializing a two dimensional array.

var stuff = {
   numbers: [0,1,3,6],
   on: True,
   comment: "Hello"
};

function successResponse(responseData) {
   console.log(responseData); // dumps the data to browser's console
}
function failResponse() {
   console.log("There was an error");
}

// send the stuff in JSON by POST to localhost and run the above function when done
$.ajax({
    type: "POST",
    url: 'localhost',
    dataType: 'json',
    data: stuff,
    success: successResponse
}).fail(failResponse);

Disqus

CSS Introduction

Evan Boldt — Sun, 24 Mar 2013 02:56:09 +0000

CSS Introduction

Topics

Evan Boldt Sat, 03/23/2013 - 21:56

Introduction

htmlTagName, #idname, .classname {
   stylename: stylevalue;
   color: black;
   font-size: 12px;
   background-color: #ddd;
}

CSS stands for Cascading Style Sheet. In HTML, you use it to apply a certain look to specific elements in the page. CSS makes it easy to give every page on your website a unified appearance. The format is extremely straightforward, but to be effective you need to know how to specify which element you want styled, find current styling information in a webpage, and you must be aware of all of the styles that can be applied to an element. The general form of a style in a CSS file is like the example shown to the right.

Specifiers

Specifiers tell the browser which elements to apply the style to.

tags like <body>, <p>, <div>, and <span> are specified with just the text
an ID in html is declared in the element like <div id="rightSidebar">, and specified in CSS like #rightSidebar
a class in html is declared in the element like <div class="gallery">, and specified in CSS like .gallery

Specifiers may be chained in special ways to select more elements or narrow in on an element

Multiple specifiers can use the same style by seperating the specifiers with comments

#sidebar, .gallery {...} applies the style within the brackets to both the sidebar ID and gallery class.

You can drill down to an class by seperating specifiers with a space

#sidebar h3 {...} applies the style within the brackets to only h3 elements within the sidebar element

Styling

Color

There are several ways to pick a color. The numerical methods all are in the order of "red, green, blue", with low numbers being darker and higher numbers being lighter.

CSS Color Examples
Name	3 digit hex	6 digit hex	RGB	RGB+Alpha Transparency
black	#000	#000000	rgb(0,0,0)	rgba(0,0,0,1.0)
white	#FFF	#FFFFFF	rgb(255,255,255)	rgba(255,255,255,1.0)
red	#F00	#FF0000	rgb(255,0,0)	rgba(255,0,0,1.0)
green	#0F0	#00FF00	rgb(0,255,0)	rgba(255,0,0,1.0)
blue	#00F	#0000FF	rgb(0,0,255)	rgba(0,0,0,1.0)
grey	innaccurate	#808080	rgb(129,129,129)	rgba(129,129,129,1.0)
transparent	N/P	N/P	N/P	rgba(0,0,0,0)
N/P	N/P	N/P	N/P	rgba(0,0,0,0.5)

Styles List

Here are some sample styles applied to a div tag with the text "demo" inside of it.

Style Name	Description	Sample Usage	Sample Result
color	The color of the font	color: #090;	DEMO TEXT
font-size	The size of the font, usually in px or em	font-size: 14px;	DEMO TEXT
font-style	Italicizes text	font-style: italics;	DEMO TEXT
font-weight	Controls the "boldness" of text	font-weight: bold;	DEMO TEXT
text-decoration	Underline, or overline, and strikethrough to text	text-decoration: underline;	DEMO TEXT
text-align	The horizontal positioning of text	text-align: center;	DEMO TEXT
vertical-align	The vertical positioning of text	vertical-align: middle;	DEMO TEXT
font-family	Name of font. Use web-safe fonts!	font-family: Serif;	DEMO TEXT
line-height	Spaces text lines. 2em is 'double spaced'	line-height: 2em;	DEMO TEXT
height width	Controls the height/width of block elements	width: 40px;	DEMO TEXT
background-color	The background color of the box	background-color: #fff;	DEMO TEXT
background	Takes all background related styles Can do color, image, image position, repeats	background: #fff url() no-repeat right 50%;	DEMO TEXT
border	A line around the box	border: 1px solid #090;	DEMO TEXT
border-radius	Rounds the edges of the box	border-radius: 8px;	DEMO TEXT
margin	Adds spacing to the outside of the box	margin: 5px;	DEMO TEXT
padding	Adds spacing to the inside of the box	padding: 5px;	DEMO TEXT
float	Pushes to side and surroundings wrap around it	float: right;	DEMO TEXT
display	inline: on same line as text like a span or img block: use width and obey margins like div inline-block: inline but can width and margin none: not shown at all	display:inline;	DEMO TEXT
position	static: the normal way of position absolute: put at coordinates on screen relative: like absolute, but zero'd at static fixed: like absolute, but moves with scrolls note: nonstatic needs top, left, right, or bottom	position: relative; left: 10px;	DEMO TEXT
z-index	Larger values are higher when overlapping	z-index: 10;
text-shadow	adds a drop shadow to text. multiples by comma text-shadow: right down size color	text-shadow: -1px 0 0 #fff;	DEMO TEXT
box-shadow	Adds drop shadow to the box. Similar parameters to text-shadow Shadows can be inset (inside the box).	box-shadow: inset 0 0 2px #fff, 0 0 4px #000;	DEMO TEXT

Other Style Information

As a general rule, you can use a shorthand to differentiate the different directions of a style either in the order or top, right, bottom, left or in the order top+bottom and left+right. It follows a clockwise rule, and saves a lot of typing particularly on the margin and padding styles. For example:

Direction Notations
Seperated	4 direction shorthand	2 direction Shorthand
padding-top: 8px; padding-right: 5px; padding-bottom: 8px; padding-left: 5px;	padding: 8px 5px 8px 5px;	padding: 8px 5px;

Gradients can be made with this very simple generator.

The safe choices for fonts are really limited. With modern browsers, you can attach font files to pages. This process is made extremely easy with the Google Web Font API.

Development

As a general rule, you will want to have a local instance of the website you are developing for. If not, you can always test the css in-browser in chrome easily through menu > tools > developer tools. The magnifying glass in the bottom left will let you select an element visually on the screen. Then, the information on what styles are active and overridden is in the right column, and the tag's place in html is shown in the left. You can actually double click on just about anything in there and modify the contents of the page or the style information.

Disqus

3D SVG Graph

Evan Boldt — Sat, 16 Mar 2013 01:19:09 +0000

3D SVG Graph

Topics

Programming

Web

GUI

Evan Boldt Fri, 03/15/2013 - 20:19

Introduction

An SVG is a type of graphic that is defined by shapes and math instead of discrete pixels. So, it is scales nicely, but can't make photo-realistic images. An (currently) SVG is two dimensional. That does not mean, though, that we cannot represent 3D information in this 2D space. After all, it is shown in 2D anyway. To accomplish this, we will build our own 3D rotation matrices, and a 3D to 2D projection matrix. The 3D points can be multiplied by both of these matrices to make it appear 3D, albeit somewhat flat due to the orthographic projection.

Interactive Graph Demo

This SVG grapher was made so that a user easily visualize and control the end manipulator of a robotic arm in 3D through a web browser. It may be viewed on this page on the NIU College of Engineering and Engeering Technology website, but the arm is usually left off for safety.

Hold left click and drag to move point.
Hold middle click and drag to rotate.

Usage

Although the implementation starts to get somewhat complicated, the usage is actually somewhat straightforward. Get the attached javascript file, and make an html file that contains this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="3dgraph.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="352" id="3d-graph" style="height: 320px; width:342px; margin: 0 auto; padding: 5px;" >
    <!-- neg axis -->
    <line x1="100" y1="250" x2="400" y2="250" id="neg-axis-x" style="stroke:rgba(250,200,200,0.5);stroke-width:2"/>
    <line x1="100" y1="250" x2="100" y2="0"   id="neg-axis-y" style="stroke:rgba(200,250,200,0.5);stroke-width:2"/>
    <line x1="100" y1="250" x2="0" y2="400"   id="neg-axis-z" style="stroke:rgba(200,200,250,0.5);stroke-width:2"/>
    <!-- axis -->
    <line x1="100" y1="250" x2="400" y2="250" id="axis-x" style="stroke:rgb(200,0,0);stroke-width:2"/>
    <line x1="100" y1="250" x2="100" y2="0"   id="axis-y" style="stroke:rgb(0,200,0);stroke-width:2"/>
    <line x1="100" y1="250" x2="0" y2="400"   id="axis-z" style="stroke:rgb(0,0,200);stroke-width:2"/>
</svg>

Interfacing

The coordinates of the point above are stored in the variables tx, ty, and tz. If you just wish to read it, just read the variables. If you modify them, you have to update the display with mainDot.changePoint()

A point is simply a vector. A dot is the point plus the graphical representation. A line is two points and a graphical connection between them.

How it Works

This implementation uses the jQuery library, which is much less useful than usual since jQuery can only create HTML DOM objects and not SVG DOM objects as required in this usage. It is still useful for it's event bindings and some search features.

There is a point class with an x, y, and z. Points are used to in the graphical classes Dot and Line, where line has two points for a start and an end. Points are multiplied by rotation and projection matrices to turn their 3 dimensions into 2 dimensions. The rotation matrix angles are modified by mouse movement during a click event. When the rotation matrix is changed, the points must be multiplied with the new matrix and the result must be updated on the SVG.

In this specific usage, there were 7 points used for the axes. A zero point and points at the maximum and minimum (positive and negative) for each direction. There is a dot at the point you want to visualize in the 3D space, as well as 3 guide lines to help with perspective. The guide lines are entirely necessary. It would also be possible to plot a curved line by using many Line classes or even making your own class that uses the SVG path tag to generate a smooth curve. Another possible feature might be to put a Dot class at a point on the lone closest to the mouse and showing the x,y, and z coordinates.

Disqus

HTML Introduction

Evan Boldt — Thu, 28 Feb 2013 16:54:41 +0000

HTML Introduction

Topics

Evan Boldt Thu, 02/28/2013 - 10:54

Introduction

HTML is the language that your browser reads when it shows you a webpage. It is a variant of XML. It makes the actual content that you see, but also can contain visual styling information (typically in the form of an external CSS file) and also can have an in-browser (client-side) programming language called JavaScript.

Bare Minimum Example

<!DOCTYPE html>
<html>
  <head>
    <title>Minimal</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Tag Structure

Tags are put on either end of something to describe the content between the tags. Since HTML is visual, think of a tag as a box drawn around whatever is inside of it. The outermost tags are <HTML>, <HEAD>, and <BODY>. The <HTML> tag simply says that the contents are HTML. It is the very outermost box on the screen. The <HEAD> tag is invisible. It summarizes the contents (like title and keywords) and also lists files the page needs like stylesheets and scripts - both of which can alternatively be embedded into the actual HTML file if desired instead of being a seperate file. The <BODY> tag is where the actual content that you see on in the browser window goes. It can contain images, text, and other containers.

Basic Tags

<p> - Paragraph

Paragraph tags are useful for providing that spatial seperation between paragraphs. To make a new line, use the self-closing <br /> tag. However, a paragraph is not a line break. the distance between the paragraphs is often a ratio of the line height, like 0.5 lines or 1.5 lines. In print, paragraphs also are indented - a style that can be modified with the text-indent CSS property. So, separating paragraphs by using a separate set of tags more flexible than using some number of line breaks.

<img /> - Image

The image tag is self-closing, which is why it requires the trailing slash. The URL of the image goes in the "href" attribute, and the alternative text if the image cannot be loaded goes in the "alt" attribute.

<img src="http://imgs.xkcd.com/comics/interblag.png" height="432" width="400"
 alt="An XKCD comic about blog names" />

<strong> - Bold

The strong tag makes text bold. Also, the <b> tag can be used, but it is considered outdated for some reason. Example:

<p> ... to <strong>boldly</strong> go where no man has gone before!</p>

<em> - Italics

The emphasis tag makes text italicized. The <i> tag can be used to make italics, but is also weirldy obsolete. Example:

<p><em>Emphasize</em> makes italics for some reason</p>

Lists

Lists are occasionally used in the body of text for readability, but in websites they are more commonly used for hierarchical (multi-level) navigation. As a general rule, lists should be incomplete sentences and not end with a period. At the very least, the sentence completeness should be consistent throughout the list.

<li> - List item

To make a single list element, wrap some text with <li> tags. This element must be within a list container. The type of container will decide whether there should be bullet points or numbers in front of the list item.

<ul> - Unordered list container

An unordered list element contains list items that have no particular order. This is the most common type of list. The default style applies a different kind of bullet point for each tier of the unordered list.

<ol> - Ordered list container

An ordered list element contains list items that must be in a particular order. it is primarily used for procedural lists that describe a chronological process (a step by step) or it can be used for rankings (a top 10).

The starting number can be chosen by the start attribute ex: <ol start="10">

Example Result

Follow This Tutorial
- Discover that it is easy
- Tell your friends
???
Profit

Example Code

<ol>
<li>Follow Tutorial
  <ul>
    <li>Discover it is easy</li>
    <li>Tell friends</li>
  </ul>
</li>
<li>???</li>
<li>Profit</li>
</ol>

Tables

The easiest way to learn to make a table is by example, but first here is a quick description of all the table related tags:

<table> - the container for the whole table
<thead> - the top area of the table (for categories)
<th> - a table heading cell
<tbody> - the main area
<tr> - a table row
<td> - a table cell
<tfoot> - the bottom area (for totals)
<caption> - a caption or title for the table

Example Result

Example Data Table
Sample ID	X	Y
1	5000	100
2	6000	200
Average	5500	150

Example Code

<table>
  <thead>
    <tr>
      <th>Sample ID</th><th>X</th><th>Y</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>5000</td><td>100</td>
    </tr>
    <tr>
      <td>2</td><td>6000</td><td>200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td>Average</td><td>5500</td><td>150</td></tr>
  </tfoot>
  <caption>Example Data Table</caption>
</table>

Selectors

Selectors are a way to identify an element in the page. They do nothing in a pure HTML page, but are almost necessary if you want to use CSS or JavaScript along with the page.

Identifier (unique)

An id attribute must be unique - the only one on the page with that name. They are particularly useful for JavaScript, since the browser provides a way to easily find an element given an ID, but finding a class is slower and harder.

IDs are prefixed by a # (pound) when used in CSS.

The identifier is specified with the id attribute. For example: <img src="/logo.png" id="logo" /> assigns the image the #logo identifier. It should not have spaces or hyphens.

Class (categorical)

A class can be either unique or assigned to multiple elements on the page.

classes are prefixed by a . (period) when used in css.

The class is specified with the class attribute. Multiple classes can be specified in a single class attribute by using spaces. A class may have a hyphen. For example: <p class="comment new">Hello</p> is a paragraph that is both in the .comment class and .new class.

Invisible Tags

It is often extremely useful to organize portions of the page using invisible style-less tags, then define a style specific for the ID or class. In reality, any tag can be made to behave like any other tag by overriding enough styles, but that would be wasteful and difficult to develop.

<div> - Division Block

Div tags are blocks by default. This means that they take up all of the available width and push anything after it to below. They are easier to space between other blocks. Many times these are used to section areas of the page like headings, sidebars, footers, and pages.

<span> - Text

Span tags are inline by default. So, they only take up the space they need and can be used inline with text. For example, <strong>, <em>, <a>, and <img /> are all inline by default. These are mostly useful for highlighting sections of text.

Disqus

Python Web UI with Tornado

Evan Boldt — Fri, 08 Feb 2013 18:10:44 +0000

Python Web UI with Tornado

Topics

Evan Boldt Fri, 02/08/2013 - 12:10

Introduction

So, you want a GUI for your robot. Sure, you could make a nice GUI in Python with Tkinter, but there are some really good reasons to try it as a website instead:

A web GUI can be accessed from almost any location
A well-designed web GUI can be used on almost any device like a tablet or a phone
HTML, CSS, and Javascript are well documented, powerful, and very flexible
HTML can be easily made to look very nice

There are some drawbacks to implementing your GUI as a website though:

It is only able to start communication one-way (browser to server, server responds)

Great for buttons and other input
Requres continuous polling or a commet to get data to be pushed to the browser

It adds another "layer" of complexity to your code

Several different languages (C++ on Arduino, Python Server, and HTML+CSS+Javascript in browser)
The server has to relay information from the browser to the robot

Installing Python Tornado

I used the Tornado web server for my projects. It is better than just using CGI, since the environment is always loaded while the server is running instead of loading it every time a request is made. CGI would be problematic then, since serial.begin would be run every time a request was made, which simply wouldn't work since the Arduino would also restart all the time.

On Ubuntu, the installation is as easy as:

sudo apt-get install python-tornado python-serial

Using Tornado with the Serial Library

So one of the challenges with this is that reading serial input in python is usually blocking, so the webserver becomes unresponsive to browsers' requests while waiting for serial input.

#! /usr/bin/python2.7
import os
import json
import tornado.ioloop
import tornado.web
from serial import *


tornadoPort = 8888
cwd = os.getcwd() # used by static file server


# Make a Serial object
serialPort = '/dev/ttyACM0'
serialBaud = 9600
ser = Serial( serialPort, serialBaud, timeout=0, writeTimeout=0 )



# gets serial input in a non-blocking way
serialPending = ''
def checkSerial():
    try:
        s = ser.read( ser.inWaiting() )
    except:
        print("Error reading from %s " % serialPort )
        return
    
    if len(s):
        serialPending += s
        paseSerial()
    

#called whenever there is new input to check
serialHistory = ''
mostRecentLine = ''
def parseSerial():
    split = serialPending.split("\r\n")
    if len( split ) > 1:
        for line in split[0:-1]:
            print( line )
            
            #do some stuff with the line, if necessary
            #example:
            mostRecentLine = line
            # in this example, status will show the most recent line

            serialHistory += line

        pending = split[-1]


# send the index file
class IndexHandler(tornado.web.RequestHandler):
    def get(self, url = '/'):
        self.render('index.html')
    def post(self, url ='/'):
        self.render('index.html')


# handle commands sent from the web browser
class CommandHandler(tornado.web.RequestHandler):
    #both GET and POST requests have the same responses
    def get(self, url = '/'):
        print "get"
        self.handleRequest()
        
    def post(self, url = '/'):
        print 'post'
        self.handleRequest()
    
    # handle both GET and POST requests with the same function
    def handleRequest( self ):
        # is op to decide what kind of command is being sent
        op = self.get_argument('op',None)
        
        #received a "checkup" operation command from the browser:
        if op == "checkup":
            #make a dictionary
            status = {"server": True, "mostRecentSerial": mostRecentLine }
            #turn it to JSON and send it to the browser
            self.write( json.dumps(status) )
        
        #operation was not one of the ones that we know how to handle
        else:
            print op
            print self.request
            raise tornado.web.HTTPError(404, "Missing argument 'op' or not recognized")


# adds event handlers for commands and file requests
application = tornado.web.Application([
    #all commands are sent to http://*:port/com
    #each command is differentiated by the "op" (operation) JSON parameter
    (r"/(com.*)", CommandHandler ),
    (r"/", IndexHandler),
    (r"/(index\.html)", tornado.web.StaticFileHandler,{"path": cwd}),
    (r"/(.*\.png)", tornado.web.StaticFileHandler,{"path": cwd }),
    (r"/(.*\.jpg)", tornado.web.StaticFileHandler,{"path": cwd }),
    (r"/(.*\.js)", tornado.web.StaticFileHandler,{"path": cwd }),
    (r"/(.*\.css)", tornado.web.StaticFileHandler,{"path": cwd }),
])


if __name__ == "__main__":
    
    #tell tornado to run checkSerial every 10ms
    serial_loop = tornado.ioloop.PeriodicCallback(checkSerial, 10)
    serial_loop.start()
    
    #start tornado
    application.listen(tornadoPort)
    print("Starting server on port number %i..." % tornadoPort )
    print("Open at http://127.0.0.1:%i/index.html" % tornadoPort )
    tornado.ioloop.IOLoop.instance().start()

Setting up the Browser

To make it easy to send requests to the server, it's really a good idea to use jquery, and the easiest way to use jquery is to use the Google API for it. To add jquery to the webpage, just add this script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

So to start, we'll just have a simple webpage that has a div. When the div is clicked, jquery will ask the status of the tornado webserver.

<!DOCTYPE html>
<html>
<head>
<title>Python Tornado Test Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
function serverResponded( data ) {
    /* 
    log the event data, so you can see what's going on.
    Shows up in the console on your browser. (Chrome: Tools > Developer Tools > Console)
    */
    console.log( data );
    
    // check the server status, and report it on the screen
    if ( data.server === true ) {
        $('#status .value').html("OK");
    }
    else {
        $('#status .value').html("NOT OK");
    }
    
    // add the last serial to the div on the screen
    $('#serial .value').html( data.mostRecentSerial );
}

$(document).ready( function() {
    /* handle the click event on the clickme */
    $('#clickme').click( function() {
        params = { op: "checkup" };
        $.getJSON( 'http://localhost:8888/com' , params, serverResponded );
    });
});
</script>
</head>
<body>
    <div id="clickme" style="cursor: pointer;">CLICK ME</div>
    
    <div id="status">
        Server Status: <span class="value">?</span>
    </div>
    
    <div id="serial">
        Last Serial Input: <span class="value"></span>
    </div>
</body>

Disqus

Web

Using Node.js as a web server

Introduction

Example

JavaScript and jQuery Introduction

Introduction

jQuery

Setting Up jQuery

Using the JavaScript Console

Searching for Elements

Modifying Elements

Contents

Styles

Animation

Events

Sending and Receiving JSON

CSS Introduction

Introduction

Specifiers

Styling

Color

Styles List

Other Style Information

Development

3D SVG Graph

Introduction

Interactive Graph Demo

Usage

Interfacing

How it Works

HTML Introduction

Introduction

Bare Minimum Example

Tag Structure

Basic Tags

<p> - Paragraph

<img /> - Image

<strong> - Bold

<em> - Italics

Lists

<li> - List item

<ul> - Unordered list container

<ol> - Ordered list container

Example Result

Example Code

Tables

Example Result

Example Code

Selectors

Identifier (unique)

Class (categorical)

Invisible Tags

<div> - Division Block

<span> - Text

Python Web UI with Tornado

Introduction

Installing Python Tornado

Using Tornado with the Serial Library

Setting up the Browser