var isPrerendering = false;

function handleVisibilityChange(evt) {
if (!isPrerendering) return;
countView();
isPrerendering = false;
}

function countView(){
document.write('<img src="http://PIWIK WEBHOST/piwik/
   piwik.php?idsite=[ID OF NORMAL SITE]&rec=1" />');
}

/*
* We can count the view right now if the document isn't being prerendered.
* Browsers that don't support the API will return undefined for
* webkitVisibilityState.
*/
if (document.webkitVisibilityState != "prerender") {
countView();
} else {
//We'll need to count the pageview later
isPrerendering = true;
document.write('<img src="http://PIWIK WEBHOST/piwik/
   piwik.php?idsite=[ID OF PRERENDER TRACKING SITE]&rec=1" />');
document.addEventListener("webkitvisibilitychange", 
   handleVisibilityChange, false);
}

Summary of Operation

1. It checks the field on the MySQL server at litten.com that represents the state of the lamp once per second.
2. It sends an X10 command through the X10 PC interface to the lamp, setting it to that state.

fig. I

MySQL Database

Create new mySQL db

Add a table

Add new restricted users

ON/ OFF Button

<iframe id="frame1" src="http://litten.com/switch.php"  height="50"
width="100" frameborder="0" scrolling="no"></iframe>

<?php
$db_host = 'localhost';
$db_user = 'x10user';
$db_pwd = 'mypassword';
$database = 'x10';
$table = 'x10state';

if (!mysql_connect($db_host, $db_user, $db_pwd))
die("Can't connect to database");

if (!mysql_select_db($database))
die("Can't select database");

$result = mysql_query("SELECT * FROM {$table}
 WHERE device = 'lamp'");
if (!$result) {
die("failed");
}

$row = mysql_fetch_row($result);
$state = $row[1];

$lampstate = "OFF";
if ($state == 1) {
$lampstate = "ON";
}
?>

<form method=POST action="http://litten.com/changestate.php">
<input type="submit" name="switch"
 value= "<?php echo $lampstate ?>">
</form>
 

<?php
$db_host = 'localhost';
$db_user = 'x10user';
$db_pwd = 'mypassword';
$database = 'x10';
$table = 'x10state';

if (!mysql_connect($db_host, $db_user, $db_pwd))
die("Can't connect to database");

if (!mysql_select_db($database))
die("Can't select database");

$result1 = mysql_query("SELECT * FROM {$table}
 WHERE device = 'lamp'");
if (!$result1) {
die("failed");
}

$row = mysql_fetch_row($result1);
$state = $row[1];

$onoff = 1;
if ($state == 1) {
$onoff = 0;
}

$result2 = mysql_query("UPDATE {$table}
 SET state = {$onoff} WHERE device = 'lamp'");
if (!$result2) {
die("failed2");
}

$lampstate = "ON";
if ($state == 1) {
$lampstate = "OFF";
}
?>

<form method=POST action="http://litten.com/changestate.php">
<input type="submit" name="switch"
 value= "<?php echo $lampstate ?>">
</form>
 

Video Streaming

Web Server on Home PC

X10 PC Interface via a PHP page

• A lamp. I am using a nice Himalayan Salt lamp from Amazon.com.
• An X10 3-pin Appliance Module (AM466). To plug the lamp into. Then it is plugged into an outlet.
• An ActiveHome Professional Computer Interface (CM15A). That is plugged into an outlet and attached to your PC via USB cable.
• The ActiveHome Scripting SDK
• A copy of msvcp71.dll and msvcr71.dll (be careful, this site tries to trick you to click on ads)

<META HTTP-EQUIV=Refresh CONTENT='1; URL=refresher.php'>
<?php
$db_host = 'litten.com';
$db_user = 'x10user';
$db_pwd = 'mypassword';
$database = 'x10';
$table = 'x10state';

if (!mysql_connect($db_host, $db_user, $db_pwd))
die("Can't connect to database");

if (!mysql_select_db($database))
die("Can't select database");

$result = mysql_query("SELECT * FROM {$table} WHERE device = 'lamp'");
if (!$result) {
die("failed");
}
$row = mysql_fetch_row($result);
$state = $row[1];
echo $state;

$cmd = 'on';
if ($state == 0){
$cmd = 'off';
}

$cmdstring = "A1 ".$cmd;
echo $cmdstring;
exec("ahcmd.exe sendplc $cmdstring");
?>

exec("ahcmd.exe sendplc $cmdstring");

\lib\armeabi\libCore.so

Ahh, the Adobe AIR runtime kind of runs beside the Dalvik virtual machine rather than completely inside of it.

The libCore.so file is a shared object file using JNI. Java Native Interface(JNI) http://en.wikipedia.org/wiki/JNI code written in C or C++ allows you to access platform specific features and ‘touch the metal’ with your code.

Android provides the Android NDK so you can use native code.
http://developer.android.com/sdk/ndk/index.html

Some words of wisdom from the Android developer page

The NDK will not benefit most applications. As a developer, you need 
to balance its benefits against its drawbacks; notably, using native 
code does not result in an automatic performance increase, but 
always increases application complexity. In general, you should 
only use native code if it is essential to your application, not just 
because you prefer to program in C/C++.

I wanted to try compiling and running some native code on my phone (Android 2.2) so that I have that tool in my toolbox when I need it. I found a great example at Qualcomm.
https://ar.qualcomm.com/qdevnet/sdk

The sample application that comes with the SDK allows you to detect and track image targets in 3D using your phone’s camera and then it puts a floating teapot (http://www.sjbaker.org/wiki/index.php?title=The_History_of_The_Teapot) over your target. The NDK is required to compile the native C++ code which uses OpenGL ES http://en.wikipedia.org/wiki/OpenGL_ES. It has step by step instructions that will show you how to build the native C++ source files with the NDK package of the Android SDK and then use Eclipse to build the Java sources and create the APK package that can be deployed to the phone.

This is very much like the augmented reality on the new Nintendo 3DS
http://www.siliconera.com/2011/03/04/lose-your-nintendo-3ds-ar-cards-just-print-out-new-ones/

If you are having a hard time with the NDK, try the sample that comes with it in \samples\hello-jni along with the tutorial at http://www.pocketmagic.net/?p=1332 for a very basic example that will help you understand the proper procedure.

I have some broken antique clocks around the house so I made image targets out of their faces and now have a teapot floating in front of them. Next time I get a little break in the action, I’ll change that teapot to a semi-transparent digital clock so my clocks will no longer be broken provided, I run the program on my phone and point the camera at the clocks

The NDK combined with current hardware capabilities certainly seem to be enough to make sophisticated and engaging toolkits and engines for game developers and artists.

Anyway, enjoy playing with the code as that is how you learn.

AIR stands for Adobe Integrated Runtime and was originally for

...building rich Internet applications using Adobe Flash, Adobe Flex,
Adobe Dreamweaver (HTML or Ajax), AIR SDK, that can be run as 
desktop applications.

But now seems to be headed toward becoming an easy way to quickly develop powerful applications for smartphones, TV’s, car dashboards, tablets, big computers, tiny computers and everything in between.
http://www.adobe.com/products/air/

Setting up your development environment

1. Get Flash CS5 (you can get a 30 day free trial at http://www.adobe.com/downloads)

2. Install Flash extension for AIR http://labs.adobe.com/technologies/flashpro_extensionforair/

3. Install AIR SDK http://www.adobe.com/products/air/

4. Install Android SDK http://developer.android.com/sdk/index.html

Step by step video instructions

Setting up your development environment with Flash CS5 and AIR for Android
http://www.gotoandlearn.com/play.php?id=123

More instructions for setting up.

Getting started with Adobe AIR for Android
http://www.adobe.com/newsletters/edge/august2010/articles/article1/index.html

Some AIR for Android examples

Build a GPS Speedometer
http://mobile.tutsplus.com/tutorials/android/build-a-gps-speedometer-getting-into-air-for-android/

AIR for Android MazeFM Application
http://www.flashandmath.com/mobile/mazefm/index.html

Air for Android: Geolocation
http://www.unitedmindset.com/jonbcampos/2010/08/30/air-for-android-geolocation/

Simple camera application with Flash CS5 and AIR for Android
http://www.gotoandlearn.com/play.php?id=124

Publishing AIR for Android Applications to the App Store
http://www.gotoandlearn.com/play.php?id=131

The .apk file that is created for AIR for Android has the .swf file in the assets folder and an application.xml file in the assets/META-INF/AIR folder which works with the main AndroidManifest.xml file to set the programs application properties and how it should start (run the swf file).

Now it’s easy to move your Flash apps and games to the mobile market. Enjoy.

The specification for CSS Multi-column Layout has 10 properties for CSS Multiple Columns.
They are pretty self explanatory except for maybe ‘rule’ which in this context means a vertical divider between the columns that behaves like a CSS border.

column-width
column-count
columns (This is shorthand that can set either or both ‘width’ and ‘count’)
column-gap
column-rule
column-rule-width
column-rule-style
column-rule-color
column-fill (Balances columns height)

column-span (Allows for titles or headings to span across multiple or all columns)

Browser Support

Let’s look at the current implementations (as of August, 2010)

Mozilla (Firefox 3.6)
10 standard properties are supported plus an extra one created by Mozilla
-moz-column-height

-moz-column-width
-moz-column-count
-moz-columns
-moz-column-gap
-moz-column-rule
-moz-column-rule-width
-moz-column-rule-style
-moz-column-rule-color
-moz-column-fill
-moz-column-span

Webkit (Chrome 6, Safari 5)
10 standard properties are supported
-webkit-column-width
-webkit-column-count
-webkit-columns
-webkit-column-gap
-webkit-column-rule
-webkit-column-rule-width
-webkit-column-rule-style
-webkit-column-rule-color
-webkit-column-fill
-webkit-column-span

Opera
Not Supported

IE
Not Supported

Webkit and Mozilla Render differently

To further complicate the use of CSS3 multiple columns, even simple examples are rendered differently by Webkit and Mozilla.

If you set both column-width and column-count, visitors with a Webkit browser see a very different result than visitors with a Mozilla browser.
For example, here are images of the following code in Firefox 3.6 and Chrome 6

-moz-column-count: 3;
-moz-column-width: 45px;
-webkit-column-count: 3;
-webkit-column-width: 45px;

While Chrome limits the column width to what it is set at (45px) Firefox limits the column width based on the column number. If you allow Firefox to automatically set the column number, it will then limit the column width to what it is set at (45px).

It may be quite awhile before the average webmaster uses CSS3 multiple columns.

Some sites for further reading.
W3C Specification http://www.w3.org/TR/css3-multicol/
Demo page with source code. http://www.quirksmode.org/css/multicolumn.html
Mozilla Dev Page https://developer.mozilla.org/en/CSS3_Columns]]> http://html5.litten.com/css3-series-multiple-columns/feed/ 1 http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/ http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/#comments Wed, 04 Aug 2010 19:57:19 +0000 James Litten http://html5.litten.com/?p=614 In this post we will create a simple pie chart that is easy to feed data to.

This example is coded for readability and not for optimized operation. All you need is a text editor like notepad and an HTML5 friendly browser (I’m using Firefox 3.6).

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">

var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
var myData = [10,30,20,60,40];

function getTotal(){
var myTotal = 0;
for (var j = 0; j < myData.length; j++) {
myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
}
return myTotal;
}

function plotData() {
var canvas;
var ctx;
var lastend = 0;
var myTotal = getTotal();

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < myData.length; i++) {
ctx.fillStyle = myColor[i];
ctx.beginPath();
ctx.moveTo(200,150);
ctx.arc(200,150,150,lastend,lastend+
  (Math.PI*2*(myData[i]/myTotal)),false);
ctx.lineTo(200,150);
ctx.fill();
lastend += Math.PI*2*(myData[i]/myTotal);
}
}

plotData();

</script>
</section>
</body>
</html>

You can copy this code and paste it into a new file called something like simplepie.html and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the pie chart.

Here is our canvas in action...

Since the arc() method of the 2d canvas context is based on paths, this is real easy to code.

arc(x, y, radius, startAngle, endAngle, anticlockwise)

This method takes five parameters: x and y are the coordinates of the circle's center. Radius is self explanatory. The startAngle and endAngle parameters define the start and end points of the arc in radians. The starting and closing angle are measured from the x axis. The anticlockwise parameter is a Boolean value which when true draws the arc anticlockwise, otherwise in a clockwise direction.
Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: var radians = (Math.PI/180)*degrees.
https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes#Arcs

for (var i = 0; i < myData.length; i++) {

var myData = [10,30,20,60,40];

function getTotal(){
  var myTotal = 0;  
  for (var j = 0; j < myData.length; j++) {
    myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
  }
  return myTotal;
}      

ctx.arc(200,150,150,lastend,lastend+
       (Math.PI*2*(myData[i]/myTotal)),false);

ctx.arc(200,150,150,lastend,lastend+
       (Math.PI*2*(myData[i]/myTotal)),false);

lastend += Math.PI*2*(myData[i]/myTotal);

    ctx.beginPath();
    ctx.moveTo(200,150);

    ctx.arc(200,150,150,lastend,lastend+
       (Math.PI*2*(myData[i]/myTotal)),false);

    ctx.lineTo(200,150);
    ctx.fill(); 

Since we use an array of color values to make sure that all the pie slices are easy to see,

    var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"]; 

In our next post, we'll look at making our pie fancy with labels and maybe a few animations.

This is post 4 of a multipart series of posts.

Graphing Data in the HTML5 Canvas Element Part I

Graphing Data in the HTML5 Canvas Element Part II

Graphing Data in the HTML5 Canvas Element Part III

Seeing the need for storing more key-value pair data on the web client than can currently be stored in a cookie, all major web browsers quickly adopted support for a storage object that can hold up to 5MB of data that persists until the web client’s cache is cleared or the storage object is programatically cleared, or in the case of sessionStorage, the browser window (tab) is closed. This quick and relatively consistent adoption by web browsers is a rare treat for web developers.

There are two flavors of the storage object that we will be looking at.

sessionStorage object

The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. it is not available when a file is run locally.

Data stored in the sessionStorage object is accessible only from the page that initially stored the data.

localStorage object

Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser’s cache.

Data stored in the localStorage object is accessible only from the domain that initially stored the data.

Both localStorage and sessionStorage objects have the same interface, differing only in how the data stored by them persists and who can access the data.

setItem( key, value)
sessionStorage.setItem("name", "Sam")
localStorage.setItem("name", "Sam")

or the property using an expando
sessionStorage.name("Sam")
localStorage.name("Sam")

getItem(key)
name = sessionStorage.getItem("name")
name = localStorage.getItem("name")

or the property using an expando
name = sessionStorage.name
name = localStorage.name

removeItem(key)
name = sessionStorage.removeItem("name")
name = localStorage.removeItem("name")

sessionStorage.clear
localStorage.clear

for (var i=0, len = sessionStorage.length; i  <  len; i++){
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
} 

Storage Event

The storage event is fired on the window object whenever something changes in storage. For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area.

The storage event has the following attributes

• key the named key that was added, removed, or modified
• oldValue the previous value (now overwritten), or null if a new item was added
• newValue any the new value, or null if an item was removed
• url the page which called a method that triggered this change
• storageArea represents the Storage object that was affected.

Some online DEMOs

HTML5 Demos: Storage
Web Storage Example

Browser Compatibility (as of August, 2010)

Internet Explorer 8
Firefox 3.5 
Safari 4
Google Chrome 5
Opera 10.50

Only Opera supports the Storage event's attributes but I've verified that the storage event can be triggered on Chrome 5 and Firefox 3.6 though, the attributes for the event are all set to undefined.

Further Reading

Professional JavaScript for Web Developers Chapter Chapter 19 section on DOM Storage

Introducing HTML5 Chapter 6

Here is a demo with complete source code where I chained together a bunch of CSS transitions using the transitionend event to trigger the transitions sequentially.

DEMO CSS transitions in Firefox 4 beta 2

The demo requires Firefox 4 beta 2

I found that the transitionend event was triggered more often then I expected and had to remove listeners for the event when I was done with them or they sometimes triggered again. I need to learn more about what triggers them.

Have fun with the code as that is the best way to learn.

The reasons why you would want to layer multiple canvases on top of each other are many but they all have a common root. There is a requirement in the W3C definition of the 2d context…

There is only one CanvasRenderingContext2D object per canvas, so calling the getContext() method with the 2d argument a second time must return the same object.
http://dev.w3.org/html5/2dcontext/#conformance-requirements

Having just one 2d context means that you have to keep track of everything on the context even if you only want to change part of the canvas.

An example of using layers is animation. When I was a child, I loved making animated cartoons and I learned that if I painted them on clear plastic sheets I could stack the sheets and only redraw the parts that moved. I could make an elaborate background and use it over and over instead of redrawing it for every frame. The same principle applies here to our canvases.

In this example, our three canvases have transparent areas that allow you to see what is on the canvas beneath each.

First, let’s look at our three canvases separately and then we’ll stack them on top of each other.

function draw1() {
  ctx1.clearRect(0, 0, WIDTH, HEIGHT);
  ctx1.fillStyle = "#FAF7F8";
  ctx1.beginPath();
  ctx1.rect(0,0,WIDTH,HEIGHT);
  ctx1.closePath();
  ctx1.fill();
  ctx1.fillStyle = "#444444";
  ctx1.beginPath();
  ctx1.arc(x, y, 10, 0, Math.PI*2, true);
  ctx1.closePath();
  ctx1.fill();

  if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy > HEIGHT || y + dy < 0)
    dy = -dy;

  x += dx;
  y += dy;
}

function draw2() {
  ctx2.clearRect(0, 0, WIDTH, HEIGHT);
  ctx2.drawImage(city, 0, 0); 
}

function draw3() {
  ctx3.clearRect(0, 0, WIDTH, HEIGHT);
  ctx3.fillStyle = "#444444";
  ctx3.save();
  ctx3.translate(200,200);
  ctx3.rotate(x/20); 
  ctx3.fillRect(-15, -15, 30, 30);  
  ctx3.restore();
}

Now to stack them

We use CSS to set all the canvases to an absolute position of (0,0) inside our parent DIV tag.

    position:absolute;
    left:0px;
    top:0px;

We also use CSS to set the z-index of our canvases. The z-index property specifies the stack order of an element. Items with lower z-index values go behind items with higher z-index values.

Bottom layer
    canvas id="layer1" 
    style="z-index: 1;
    
Middle layer    
    canvas id="layer2" 
    style="z-index: 2;

Top Layer    
    canvas id="layer3" 
    style="z-index: 3;      

DEMO Here's our finished canvas with full source code.

Now it doesn't matter that a canvas can only have one 2d context because we can just make multiple canvases and stack them.

If you have a question that you do not want published as a public comment, then use my contact page.

Have fun with the code as that is the easiest way to learn.

To modify our canvas in order to make it work in IE we need to …

Sounds like a lot but it really isn’t.

Here’s the DEMO page that should work in all current browsers including IE. The full source code for the page is listed below the canvas.

Use ExplorerCanvas to make IE’s VML act like a canvas like object

In our <head> we add a conditional reference to Google’s Explorer Canvas javascript framework so that it loads if the visitor is using IE.

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

The file excanvas.js can be downloaded from here…

Use jQuery to manage our events and make them compatible with IE

The jQuery framework does a great job of handling events across browsers. It is the main reason that I have used jQuery in my own projects. You do not even have to download it as it is hosted by Google at.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
So simply adding a reference to it in your <head> is enough to use it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.2/jquery.min.js"></script>

If you want to have it on your server, you can download it from here.
http://jquery.com/

Setting our event listener is a little different but we still use the same functions that we wrote in the original post How to Drag and Drop on an HTML5 Canvas.

 $("canvas").mousedown(function myDown(e){
 var position = $("canvas").position();
 if (e.clientX < x + 15 + position.left && e.clientX > x - 15 + 
  position.left && e.clientY < y + 15 + position.top && 
  e.clientY > y -15 + position.top){
    x = e.clientX;
    y = e.clientY;
    dragok = true;
    $("canvas").mousemove(function myMove(e){
       if (dragok){
        x = e.clientX - position.left;
        y = e.clientY - position.top;
       }
});
 }
}); 
 $("canvas").mouseup(function myUp(e){
  dragok = false;
  $("canvas").mousemove(null);
}); 

Notice that we removed our traditional event listeners and wrapped the functions our events trigger with the jQuery event listeners

$("canvas").mousedown()
$("canvas").mouseup()
$("canvas").mousemove()

These are shorthand versions of the jQuery bind method. The longhand looks like this.

$("canvas").bind(mousemove, mymove())

The shorthand versions work fine and are easier to read.

Use jQuery to calculate our canvas’ offsets

Sometimes I feel as though offsets are the bane of my existence. jQuery makes them consistent across browsers with the position method.
The position method returns an object containing the position of the top-left corner of the element relative to the top-left corner of the first positioned parent of the element.
In our myDown(e) function we get our canvas’ offsets with regard to their parent.

var position = $("canvas").position();

Now we can use position.left and position.top as our offsets in calculating where our mouse is on the canvas.

       if (dragok){
        x = e.clientX - position.left;
        y = e.clientY - position.top;
       }

Move our call to init() to the body.onload event

That’s all we have left to do.

<body onload = "init();">

This makes sure that init() isn’t called until the <canvas> is properly loaded in ExplorerCanvas.

That’s it. Here is the full source code of our modified canvas as well as a DEMO.

If you have a question that you do not want published as a public comment, then use my contact page.