FLASH :: FLEX :: ILLUSTRATION :: ANIMATION
Free Fullscreen Kiosk Web Browser – taterboy
October 22nd, 2008 | Filed under: Tips
Building a Fullscreen Kiosk Web Browser using Flex and AIR.
There are a number a fullscreen web browsers/plugins out there, but not all of them are free. We have used a couple different ones over the years for kiosks that need Web Browsing capability or to display an HTML based kiosk application. Next time I can just build one, all I need is a few lines of code and a touchscreen monitor.
I am impressed with AIR’s webkit (HTML Component), it is light and loads pages pretty fast. Here is an example of building a serious utility with very few lines of code. The core fullscreen browser takes only 4 lines of code in Flex 3.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init();">
<mx:Script>
<![CDATA[
private function init():void{
//center window
nativeWindow.x = (Capabilities.screenResolutionX - nativeWindow.width) / 2;
nativeWindow.y = (Capabilities.screenResolutionY - nativeWindow.height) / 2;
//fullscreen
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
]]>
</mx:Script>
<mx:HTML id="browser" location="http://www.taterboy.com/blog/" width="100%" height="100%" />
</mx:WindowedApplication> |
The version of the browser below incorporates more code for the following features.
Hidden Address bar that can be opened and closed using Command + u on a Mac or Ctrl + u on PC.
URLs are saved in a SharedObject so it only needs to be configured once. This allows the kiosk to restart and automatically load the home page.
There are many more features left (like onscreen keyboard, bookmarks, and a url filter) to be added but here is the code to date.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init();">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
private var currURL:String;
private var so:SharedObject;
private var comKey:Boolean;
private var uKey:Boolean;
private function init():void{
//center window
nativeWindow.x = (Capabilities.screenResolutionX - nativeWindow.width) / 2;
nativeWindow.y = (Capabilities.screenResolutionY - nativeWindow.height) / 2;
//fullscreen
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyHandler);
stage.addEventListener(KeyboardEvent.KEY_UP,keyHandler);
//resizeBkg();
// pulling SharedObject to check for previous URL
so = SharedObject.getLocal("HDBrowser","/");
// If previous URL is valid, set browser location and close URL input bar.
if(so.data.url){
currURL = so.data.url;
browser.location = currURL;
navURL.visible = false;
}
}
private function resizeBkg():void{
}
//navigate browser to URL and save SharedObject
private function gotoURL():void{
currURL = urlTxt.text;
so.data.url = currURL;
browser.location = currURL;
navURL.visible = false;
}
// evavluate Command/Control, U, Enter keys: Open/Close URL input bar or call gotoURL().
private function keyHandler(ev:KeyboardEvent):void{
//trace(ev.keyCode);
var stat:Boolean;
if(ev.type == "keyUp"){
stat = false;
ev.keyCode == 15? comKey = uKey = stat:null;
ev.keyCode == 85? uKey = stat:null;
}
else{
stat = true;
ev.keyCode == 15? comKey = stat:null;
ev.keyCode == 85? uKey = stat:null;
}
if(comKey && uKey){
navURL.visible ? navURL.visible = false: navURL.visible = true;
}
if(ev.keyCode == 13 && navURL.visible){
gotoURL();
}
}
]]>
</mx:Script>
<mx:HTML id="browser" width="100%" height="100%" />
<mx:HBox id="navURL" width="100%" height="30" backgroundAlpha="1" backgroundColor="0x323232" paddingLeft="10" paddingTop="5">
<mx:TextInput id="urlTxt" width="95%" />
<mx:Button id="urlBtn" label="GO" click="gotoURL();"/>
</mx:HBox>
</mx:WindowedApplication> |
To install and run the HDBrowser Hound AIR app use the installer badge below.
Related Posts:
|
No Comments »
No comments yet.
RSS feed for comments on this post. TrackBack URL
Leave a comment
