Smooth animations on Android

SiteKiosk for Android offers secured browsing preventing any misuse that could mess up your tablet configuration. But it's not only browsing that you can secure with SiteKiosk, also self service applications like for example menus, info terminals or customer surveys can be (and should be ;) run with SiteKiosk. An additonal advantage: you can use the powerful SiteKiosk Object Model to have even more control as normally possible with HTML pages. As I mentioned in an earlier post you can have access to local files via the sk:// protocol for example. We are adding more and more useful functionality to the Object Model in the future, so watch out for new versions. You can also post a comment here stating what you'd like to have us added to the SK Object Model.

Speaking of self service applications we realized early in our development process that android tablets are capable of many things, but still not comparable to desktop computers. Especially the browser component is a difficult story, since on one hand it supports many HTML5 features already (which is fantastic), but on the other hand still has some problems concerning completeness and performance of these new features. So you have to be a bit careful if you program web applications targeting android devices.

One example would be animations. Ever since JavaScript was introduced to the browser world, it has been used to program animations for web pages. Still it is widely used for that purpose on many pages and doing it quite well at least on desktop computers. Concerning Android, doing animations (like transitions) in JavaScript is not the best thing to do (even for desktop computer, but goes unnoticed most of the time). Say you want to create a sliding animation of a particular div containg some content that need to be exchanged when the user pressed a "next" button. You could use JavaScript's setInterval() and periodically update the div's left parameter. Unfortunately this results in poor results since the animation can be jerky on many Android tablets. A better way to do it is using CSS transforms and transitions. These will be hardware-accelerated even on Android tablets and therefore a lot smoother than JavaScript animations. 

An example would be:

<div style="-webkit-transform: translate(-600px, 0px); width=600px">Your content.</div>

This moves the div 600 pixel to the left relative to its normal position. Nice, but still no animation, right? Here you go:

<div style="-webkit-transition-duration: 500ms; -webkit-transform: translate(-600px, 0px); width=600px">Your content.</div>

Adding the "-webkit-transform-duration" will result in transition animations every time you change the "-webkit-transform" value. Obviously the transition will take 500 ms in this case. So Adding these two style properties results in a sliding animation moving the div from right to left by 600 pixels. There are a bunch of other transforms you can use for transitions like rotation, scaling and skewing. You could also use transitions for normal CSS style properties like "margin-left", but these might not be hardware-accelerated, so be aware.

Manipulation these style properties in JavaScript is not a big deal, but can be a bit cumbersome. My adivce is to use the free Move.js which makes adding these transitions dynamically very easy.

 

Customizing the Portal Startpage

Of all designs/start pages that come equipped with SiteKiosk, the start page called "Portal Startpage" is one of the most popular ones. The major reason for that certainly is, that it covers a very common use case: the user can choose from a list of topics to proceed to a detail page that shows the relevant information. SiteKiosk users can already configure which links are to be shown, in which order and the corresponding icons as well as a suitable color scheme, background image  and several other options in the configuration program. For many cases this is already all that is needed, but sometimes you might need more control over the layout or visual appearance of the page.

All you need to know to get more control is how to open a file in an editor (for example Notepad), edit some text in it and save it.

The example I want to show here is how to set a solid background color instead of the default gradient background image. The file you need to change in order to accomplish this is located here C:\Program Files\SiteKiosk\Skins\Public\Startpages\Portal (depending on your system or the installation path you've chosen, it can be in a slightly different location) and it's called Start.html.

Before you proceed, as always, I recommend to first make a backup of the files you edit. To do that, select the file in the  Windows Explorer, choose "copy" from the context menu, right click on an empty area and choose "paste" (shortcut for that is CTRL + c for copy and CTRL + v paste).

Now open "Start.html" in a text editor, you can for example use Notepad ++ which is more comfortable or Notepad that comes with Windows. Search the line that starts with the following text and delete the complete line:

<img id="id_Background" ...

You can save the file now and run SiteKiosk to check the result. Notice that if you try to save the file directly under Windows Vista or Windows 7, it won't let you, because the file is located in a sub folder of your program files directory where you need more rights to write a file than the you have in the text editor. To work around this, you can copy the file to a different folder, make the changes and copy back to the original folder. Or you can start the text editor with administrator rights by right-clicking the program and choosing Run as Administrator from the context menu. 

In SiteKiosk you should see the portal startpage with a white background. This is the standard color if nothing else it specified, so if you like white, you are already done. If your page is about nature you might prefer green, then a little bit more has to be done.

Search for the line which starts with: <body, this is the tag that contains all content of this page . Inside this line, find style="..." (the style attribute) which defines the appearance of the page-body. Here you can add the color that should be used for the page-background. An example that sets the background color to green would be:

<body onselectstart="return false;" onload="Init();" style="margin: 0px;background-color: green">

Try not to change anything else from this line, just add background-color: green to the style attribute. This is because the code of this page could change in the next version of SiteKiosk.  Which values can you set for the background color? You can specify color names like above, check for example this page for a list of them: http://www.w3schools.com/html/html_colornames.asp. You can also specify color codes in RGB format, starting with a # (explained for example here http://www.w3schools.com/html/html_colors.asp). 

So now you can change the background color of the Portal Startpage. What else can be done? Everything that can be done in HTML/CSS/JavaScript and with the help of the SiteKiosk object model even more (for example accessing payment devices, browser windows, etc.). Check this blog for more examples in the future.