Unknown Kadath

X10 Lamp Control Over The Internet With Live Streaming Video Example

Posted on May 13th, 2011 by James Litten

In this project, we are trying to find the simplest way to allow public access to X10 home automation devices while maintaining a secure environment that does not allow anything damaging to happen. The video and button below are live and in my home. This post will describe how this is done. Read more on “X10 Lamp Control Over The Internet With Live Streaming Video Example” »

Learning to Use Android NDK With a Neat Augmented Reality Example

Posted on March 7th, 2011 by James Litten

I’ve been moving some Flash SWF files over to AIR for Android and while looking into how best to optimize ActionScript code for AIR for Android, I got sidetracked. After reading about the obvious optimizations for memory and CPU resources, I decided to take a look at the AIR .apk file that is installed on my Android phone. I found that the magic was happening in

\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++.
http://developer.android.com/sdk/ndk/overview.html

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 🙂

Clock Face

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.

Developing With Flash CS5 for Adobe AIR on Android

Posted on February 22nd, 2011 by James Litten

Now that Adobe AIR is available for Android 2.2, it is easy to move your Flash games to Android’s app store and also to add functionality that takes advantage of things like the camera and GPS.

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.

CSS3 Series: Multiple Columns

Posted on August 21st, 2010 by James Litten

Even though this wonderful feature has been around for five years, it has yet to be implemented consistently across the major browsers. Hopefully, this will change soon.
If you know a reason why this is so, please leave a comment. Thanks.

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

Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts

Posted on August 4th, 2010 by James Litten

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.

Read more on “Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts” »

HTML5 Web Storage, Using localStorage and sessionStorage Objects

Posted on August 3rd, 2010 by James Litten

Web storage started as part of the HTML5 spec for storing key-value pair data in web clients. It now has its own spec. There are other plans for storing databases that are structured and can be queried using SQL which are handled in a separate spec .

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.

IMPORTANT: Do not store sensitive data in web storage. When I do penetration testing, locally stored data is one of the first things that I look at.


IMPORTANT: All data in web storage is stored as strings. If you want to store an object, you should use JSON and call stringify() on it before storing it and parse() on it after retrieving it.


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.

The setItem method

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

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

The getItem method

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

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

The removeItem method

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

The property using an expando required an extra ‘delete’ keyword and is no longer in the spec.


The clear method

The clear() method causes the list associated with the object to be emptied of all key/value pairs

sessionStorage.clear
localStorage.clear

The key and length properties

Key and length are useful for looping through all of the key value pairs, especially if you don’t know what they all are.

Key is an index of the key values ( key(0), key(1), key(2) …) Length is the number of keys.
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


Playing With CSS Transitions On Firefox 4 Beta 2

Posted on July 29th, 2010 by James Litten

I saw the recent announcement by Paul Rouget that Firefox 4 beta 2 has support for CSS transitions and I thought it would be fun to play with it.

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.

Using Multiple HTML5 Canvases as Layers

Posted on July 26th, 2010 by James Litten

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

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.

Read more on “Using Multiple HTML5 Canvases as Layers” »

IE Compatible Canvas Drag and Drop With jQuery and ExCanvas

Posted on July 20th, 2010 by James Litten

This post is about making drag and drop work on a canvas in Internet Explorer versions 6, 7 and 8 . The details of how to drag and drop on the canvas can be found in this previous post. How to Drag and Drop on an HTML5 Canvas

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

  • Use ExplorerCanvas to make IE’s VML act like a canvas like object
  • Use jQuery to manage our events and make them compatible with IE
  • Use jQuery to calculate our canvas’ offsets
  • Move our call to init() to the body.onload event

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.

Read more on “IE Compatible Canvas Drag and Drop With jQuery and ExCanvas” »

Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas

Posted on July 16th, 2010 by James Litten

In this example we will look at slicing images with the drawImage() method of a 2d canvas context. We’ll use two images that are larger than the canvas to create a parallax scrolling effect that is common in 2d games and also another image as a spritemap consisting of three sprites to show how to slice out and draw individual sprites.

I made this example as simple as possible to keep from cluttering up the key concepts of slicing and drawing pieces of images on the canvas. It only moves in one direction by pressing the right arrow key on your keyboard.

Read more on “Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas” »