Free Fullscreen Kiosk Web Browser – taterboy
October 22nd, 2008 | Filed under: ActionScript 3, Flex, 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.

?View Code MXML
<?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.

?View Code MXML
<?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.

Technorati Tags: , , , , , , , , ,

Other Related Articles:

|

5 Comments »

  1. Hi Tatterboy,

    thank you for providing this information, it ist of great help! I do have a question though. The Shortcut to display the URL bar does not work on Windows. On my Mac it functions fine. Is there a way to reset the URL in a different way? I tried to uninstall HDBrowserhound, but somehow the URL ist saved and I don’t get to access the URL input bar. Can I actually edit the SharedObject? And where is it? Your help is greatelt appreciated.

    Comment by Tom E — July 15, 2009 @ 4:09 am

  2. The shared object is not plain text, but there are a couple .sol editors out there, I normally just delete the shared objects and the address bar will show up again. On the Mac the shared objects are located in the Users preferences folder, on the PC they are located in the Documents and Settings/User/Application Data folder. (I have not verified the location on the PC.) There will be a folder called “HDBrowser” with a couple more folders then the shared object file.

    Comment by taterboy — July 15, 2009 @ 5:08 am

  3. Great, I found the .sol file and deleted it to get the URL bar back. Great work around! And here is my contribution for everybody out there. If you want the Browser to be a true full screen display, without that stupid statusbar at the bottom, add the following to the title of the WindowedApplication.

    showStatusBar=”false”

    So the complete title shoud read:

    Many Thanks!!!

    Comment by Tom E — July 17, 2009 @ 5:03 am

  4. Do you have an update on this project?

    Comment by Impact — November 10, 2009 @ 10:14 am

  5. No update yet, but looking forward to messing with the new gesture classes for touch screens. It is on my list of things to do, but it may be a while. Sorry.

    Comment by taterboy — November 10, 2009 @ 10:19 am

RSS feed for comments on this post. TrackBack URL

Leave a comment