After the most recent flashing of my Tizen developer device, the web browser was no longer launching from the desktop and I had no way to test the mobile web interfaces I've been making for various projects on the Tizen device. However, since Tizen applications are supposed to be created using HTML5, javascript and CSS, I figured it was time to create a stand-alone UI for MuttonChop.

Why not just reflash the device? Good question. Unfortunately, the device is no longer recognized when I run the proprietary flashing software provided by Tizen.

What is a Widget?

For the most part, Tizen html5 applications are W3C Widgets, which is really nothing more than zip file containing HTML, JavaScript, and CSS files. Within the zip file with the application code (the zip file will have the .wgt extension by the way), the W3C specification for a widget calls for an XML file named configuration.xml that will contain information about the widget.

That being said, a widget created for Tizen needs to have a bit of extra data entered into the configuration file or Tizen won't launch the app. (At least that has been my experience).

Just add some configuration

Because the mobile web interface for MuttonChop was already written, there wasn't too much that needed to be done in order to convert the UI into a stand-alone widget. Normally, the UI would be served from the MuttonChop server, but as an independent application, the user will need some way to enter (and store) the host name and port of the MuttonChop server.

Adding a simple configuration form to the app covered the input needs, and a very little bit of JavaScript was need to store the server information locally. The aptly named localStorage JavaScript object was used for storage. The code looks like:

    //get data from the form
    host = $("#config_host").val();
    port = $("#config_port").val();
    //record the data in the local store
    localStorage.setItem("host",host);
    localStorage.setItem("port",port);

localStorage is a nice and simple way to keep trac of small amounts of data on the client side.

After creating the configuration, everything was running fairly smoothly. A few css changes later, and it was time to create a zip file and install the new app on my Tizen device.

The install process goes like this:

1. connect Tizen device to laptop with USB cable
2. put Device into USB developer mode
3. use 'scp' to copy the widget to the device
4. 'ssh' to the device
5. run command to install software

What really bothers me about the process is that I have to connect the device by USB in order to use scp or ssh over a wireless connection. On the bright side, I was able to design, develop, and install an application on the Tizen device without having to use the monstrous Tizen SDK on Ubuntu. Debugging on the Tizen device is still problematic.

On a side note, the application runs just fine in the Firefox OS simulator (which is an extension for Firefox)

KITT : KARR : Cylon

In the UI for this app, there is a place where track information is displayed and quite often the information is wider than the screen. This would normally cause the text to wrap and I found the wrapping to be aesthetically annoying, and a bit of scrolling back and forth was implemented. It looks like the following:

Annoyance

In the previous video, there is a non-usable horizontal slider for the volume. That is how webkit mobile renders an HTML5 range element. On the desktop webkit, the range element works just fine, and on Firefox, the range element is rendered as a numeric text input. It is possible to replace the HTML5 range element with a fancy JavaScript slider, but I prefer to stick to native HTML5 elements and then apply styles as needed. Hopefully, one of the many companies that uses mobile webkit for their browser will implement a working range element, or they will completely disable the range element altogether.

Vallejo

Mariano Guadalupe Vallejo. Did you see that picture on wikipedia? Of all the great pictures of Vallejo, why did they choose the one where he isn't rocking some awesome muttonchops? Obviously there are some anti-sideburn jerks working at wikipedia.

Anyway, I've decided to name my MuttonChop related projects after historic Californians with sideburns.

Head over to gitorious if you want to check out the Vallejo code.

Rock on, and rock out!