Premise [download] Module: MiniBrowser - supports mulitple user-interfaces

File Name: Module: MiniBrowser - supports mulitple user-interfaces
File Submitter: 123
File Submitted: 14 Jan 2010
File Updated: 05 Apr 2012
File Category: Premise
Author: 123
Contact: PM me
Version: 2.1

VERSION 2.1 ---------------------------------------------------------------------------------------------------------------------------------

Version 2.1 offers the following enhancements:

• Supports SecuritySystem, SecurityZone, Keypad, and Button objects.
• Enhanced support for objects than inherit from Appliance.
• gMBRenderToolBar() includes two example of how to customize the first line of MiniBrowser's toolbar.
• gClockTime() can display the time two ways.
• For developers: The Status feature has been redesigned and is now extensible. If a custom class has an mbRenderStatus function, the Status feature will use it to display the custom class's current status.

Th SecuritySystem object works as follows:

• The entered passcode is obfuscated (i.e. typed digits are displayed as dots).
• You must enter a minimum of 4 digits for a passcode.
• If SecuritySystem is bound to an ELK M1 device, and QuickArm is enabled, you can arm Away and Stay without entering a passcode.
• If you are not using QuickArm, after entering a valid passcode you may either:
  • Press Stay, Off, or Exit.
  • Press Enter followed by Stay, Off, or Exit (the way it works in AutomationBrowser).
• If you choose to press the Enter key, your passcode is submitted to Premise Server and you have ten seconds to press Stay, Off, or Exit. After ten seconds, your passcode is automatically erased.

Installation instructions for version 2.1 are the same as for version 2.0.


VERSION 2.0 ---------------------------------------------------------------------------------------------------------------------------------

Introduction
This is a revised version of Premise's original MiniBrowser that is able to display different user-interfaces using a single Module. It offers many new features and is designed to replace the old MiniBrowser, xBrowser, and iPhone modules. MiniBrowser offers three user-interfaces:

1. PPC - For PocketPCs.
   
   
   http://localhost/ppc
2. XB - For any device even old Internet Appliances (no CSS; uses simple HTML tags)
   
   
   http://localhost/xb
3. IP - For iPhones.
   
   
   http://localhost/ip

New Features

1. Status
   
   
   A single page that displays the status of all lights, fans, appliances, thermostats, and temperature sensors in a Premise Home. Click the listed object and its associated controls will be displayed.
2. Thermostat
   
   
   The Thermostat interface has been completely redesigned and it now displays the same amount of detail as found in AutomationBrowser (i.e. Fan Status, HVAC status, indoor/outdoor temperature, etc). It also displays Fahrenheit and Celsius automatically based on the Web Session's settings. In Fahrenheit, setpoints are adjusted in 1 degree increments whereas in Celsius it is 0.5 degree increments.
3. MediaZone
   
   
   The MediaZone interface now features compact media controls, track information, normal-play/random mode, and a revised appearance for all Media items. Album art is now correctly displayed in old browsers. You can now navigate backwards through the list of media objects; clicking "Up" now moves up one level as opposed to returning to the root.
4. Additional Home Objects
   
   
   Displays the status of Temperature, Humidity, Light, and Door sensors.
5. Timed Refresh
   
   
   Web pages can be periodically refreshed; you can specify the length of the refresh interval. JavaScript is used to perform the refresh since even old browsers (like Voyager on a 3COM Audrey) support JavaScript. NOTE: If you plan to use a 3COM Audrey, you must change one line of code in "gMBRenderHeaderEx()".
6. Streamlined Code
   
   
   Over 1000 lines of code have been revised in order to improve performance and maintainability.

Installation


MiniBrowser relies on resources created by the AutomationBrowser module. Ensure AutomationBrowser is installed!

Make a backup of your existing Premise configuration.
In Builder's main menu, select "File > Backup to Client ..." and proceed to create a backup.

Install iPhone images.
Download and extract the contents of the "iPhone Icons.zip" file.
Copy the contents of the iP folder to "Crogram FilesPremiseSYSwebImagesiP".

Delete MiniBrowser and its derivatives.
Using Builder, click Modules in the Shortcut Bar.
Navigate to Modules > MiniBrowser and delete it.
Navigate to Modules > xBrowser and delete it.
Navigate to Modules > iPhone and delete it.

Delete existing Web Redirects created for MiniBrowser and its derivatives.
Using Builder, click WebServer in the Shortcut Bar.
Navigate to WebServer > Sites > Default Web Site > Roots.
Delete ppc, xb, xbimage, iPhone, iPhoneImage.
Navigate to WebServer > Sites > Secure Web Site > Roots and repeat the same deletions.

Restart the "Premise SYS Server" service.
In Windows Control Panel, navigate to Administrative Tools > Services
Scroll the list of services and find "Premise SYS Server". Restart it.

Import MiniBrowser.
Download and extract the contents of the "MiniBrowser_V2.zip" file.
Using Builder's main menu, select File > Import and select "MiniBrowser_V2.xdo".
In the Explorer window, locate the MiniBrowser module (at the bottom of the treelist) and drag 'n drop it just below the AutomationBrowser module.

Restart the "Premise SYS Server" service (again).

Confirm the new WebRedirects are present.
Using Builder, click WebServer in the Shortcut bar.
Navigate to WebServer > Sites > Default Web Site > Roots.
Confirm that it now contains ppc, xb, and ip.

Testing
Using a web browser, navigate to http://YourPremiseServerName/xb
Note: If your Premise Server is using port 86, as opposed to port 80, the URL will look like this: http://YourPremiseServerName:86/xb

Quirks

You cannot successfully display two separate user-interfaces on the same PC. For example, start ppc in one browser and then xb in another browser window. Return to the ppc session and click a link. It will now look like the xb user-interface and not ppc.

Firefox and Chrome (and Voyager on the 3COM Audrey) work well with MiniBrowser; however, Internet Explorer (7 and 8) does experience a problem. Each unique link you click appears as a new WebRequest in WebServer > Sites > Default Web Sites > Requests. IE generates many concurrent WebRequests and the Web Server will only handle ten concurrent requests for each session. What this means is that after clicking several links, IE will wait forever for a page that is never returned (i.e. it'll hang). The only remedy is to close the browser window and start again with a new browser window (i.e. start a fresh Web Session) or use another browser.

Notes
Images
By default, MiniBrowser uses the stock Class images found in .SYSwebPluginsImages. However, a custom user-interface, like iP, can use a completely separate folder containing customized images. However, the image names must not be altered! In order to have one codebase, that can display multiple user-interfaces, image names must remain the same for all user-interfaces. The appearance of each image can be different, but its name must remain unchanged. MiniBrowser allows you to specify two sources of images:

1. ClassImages
   
   
   These are the images that represent Locations (rooms, buildings,e tc) and objects (appliances, lights, etc).
   Default path is: "/Images/ClassImages" (i.e. Crogram FilesPremiseSYSwebImagesClassImages)
   Example: Modules > MiniBrowser > Templates > iPhoneRootObj > UIClassImages is /images/ip/
2. IconImages
   
   
   These are the images that represent buttons and other controls (power on/off, volume up/down, etc).
   Default path is: "/Plugins/Images" (i.e. Crogram FilesPremiseSYSwebPluginsImages)
   Example: Modules > MiniBrowser > Templates > iPhoneRootObj > UIIconImages is /images/ip

/



The iP folder contains Class and Icon images for the iP interface (iPhone). These images were modified by Chuck Lyons for use with iPhones. However, several of the file names had been altered and I have restored them to their original form. For example, "iPhone_SoundUp.gif" has been restored to "VolumeUp.gif".

Customization
Appearance
The basic appearance of a user-interface is defined by "UI" (User-Interface) properties. For example, to alter the appearance of the xb interface, navigate to:
Modules > MiniBrowser > Templates > xBrowserRootObj
Here you'll find properties that control the number of columns, the font color of the text and title, background color, location of image files, location of a custom CSS file, etc.

Simple vs. Advanced
There is a property called "UIAdvanced" and it is set to false for all current user-interfaces. This property's purpose is to indicate that the user-interface does not use deprecated HTML tags like TABLE, FONT, CENTER, etc (they may deprecated but they are understood by all browsers) but employs Cascading Style Sheets (CSS) and possibly AJAX to render its user-interface (and makes it incompatible with browsers found on ancient Internet Appliances). At the moment, there is no user-interface that has been designed to operate in "Advanced Mode".

New Root Object
If you want to create a new user-interface, you'll need to create a new Root object in the Template folder. I don't know how to create one from within Builder. Here's the process and it is not for the faint of heart. You need to backup your configuration, export the MiniBrowser module as an XDO file, delete the MiniBrowser module, open the XDO with a text-editor, find the Templates section, copy and paste an existing Root object (i.e. like the ppc root object), change the new object's Name, replace the new object's ID using a new unique GUID (use: www.guidgen.com), save the XDO and then re-import it.
Here's what the ppc root object looks like in the MiniBrowser XDO:
<Object ID="{38DDEFB2-4FFC-4100-AAE1-067F0484895F}" Name="PocketPCRootObj" Class="sys://Schema/Modules/MiniBrowser/Classes/MiniBrowserRoot" DisplayName="Pocket PC Browser" Description="For Pocket PCs." UIName="ppc" UIWidth="240px" UIAdvanced="0" UIToolbarBackgroundColor="#006CC740" UIBackgroundColor="#006CC740" />
Enable "DefaultSite" and "SecureSite" if you wish to have both non-secure and secure access (HTTPS) to the new web site.

Remote Control Interface
You can have a remote program control Premise objects using simple URLs. For example, assume you have a light called WallSconce whose location is: /home/apartment/foyer.

To turn it ON, use:
http://PremiseServer/sys/home/apartment/fo...once?d??mbOn(1)
To turn it OFF, use:
http://PremiseServer/sys/home/apartment/fo...nce?d??mbOff(1)
To toggle it, use:
http://PremiseServer/sys/home/apartment/fo...?d??mbToggle(1)
To brighten it by 10% use:
http://PremiseServer/sys/home/apartment/fo...once?d??mbUp(1)
To dim it by 10% use:
http://PremiseServer/sys/home/apartment/fo...ce?d??mbDown(1)
To determine its current operating state use:
http://PremiseServer/sys/home/apartment/fo...e?d??mbState(1)
To increase the setpoint temperature of a thermostat by 1 degree (Fahrenheit), you'd use:
http://PremiseServer/sys/home/apartment/ha...stat?d??mbUp(1)

You're probably asking, what's with the "(1)" at the end of the command? The number indicates the reply format.

0 = User-Interface mode
This is reserved for use by MiniBrowser to display a user-interface.
1 = HTML mode
HTML mode simply returns the object's name in order to provide a basic visual confirmation that the message was received.
2 = XML mode
XML looks like this:
<premise version="1.0">
<Object ID="{3536D217-DF2F-476E-91DF-A3B9E8D627B5}" Name="WallSconce" Class="sys://Schema/Device/Lighting/Sconce" PowerState="-1" Brightness="0.33" PresetDim="0.31" />
</premise>
The XML response is useful for a remote application because it provides greater detail and can be easily parsed. Browsers will not normally display this response.
3 = Quiet mode
This mode simply returns an empty string and nothing will be seen in the browser.

XML mode does not always return information in a palatable format! Requesting the state of a MediaZone will not reveal anything 'human readable' (i.e. you'll get a pile of GUIDs).

Click here to download this file

If you have an existing Module that is "xBrowser-enabled" and you now wish to make it "MiniBrowser-enabled", simply rename the following functions in your Module:

xbRenderPage ---> mbRenderPage
g_xbRenderHeader ---> gMBRenderHeader
g_xbRenderFooter ---> gMBRenderFooter
g_xbGetAnchor ---> gMBGetAnchor

123, you rat !!!! :lol: I've been waiting. And waiting. And now you release, what looks and sounds to be a great module, while I'm at Work!!!

Can't wait to get home and try it. After the wife goes to bed. Well, maybe....

Sounds great! Good job!

Ooooo.. My wife is gone for a week. Lots of play time :lol:

I can't guarantee "hours of fun" but there's enough for "an evening of mild amusement". I'm just happy to get this beast out the door ... honestly, if I knew I'd be revising over a thousand lines of code ... :lol:

I'm especially pleased with the new Status page. It uses a recursive function, to traverse all locations in Premise Home, and displays the current state of all major Home objects (temperature, lighting levels, power state, etc). It took me awhile to get that right! I like it so much that I'm thinking of adding it to the AutomationBrowser.

I don't have an iPhone so I'm not 100% certain that all aspects of the "iP" interface will look right. I suspect the new MediaZone controls might be too wide for the iPhone in portrait mode. BTW, I placed the iPhone Icons in a separate file. I'm hoping Chuck will refine the few icons I added and supply additional icons in the future.

Currently, the Toolbar shows the Location plus abbreviated data and time. It also has code that displays the interior and exterior temperatures but you won't see this unless you have the same sensor objects as in my Premise Home (highly unlikely). To customize it for your needs, just go to:
Modules > MiniBrowser > Globalscripts > MiniBrowserFunctions > gMBRenderToolbar()
and modify the stuff between the "on error" statements.

A few more images showing the Home and MediaZone pages. They won't win any design awards but there's value in the fact that no effort is needed to generate them ... just load MiniBrowser and point your browser at the proper URL.

Very nice! Thanks for the screen shots! If my guys knew I might be a UI guy, I'd never live it down!

I'm really excited about the album display and the whole media thang, actually!!

Maybe a full report tomorrow

Very nice, thanks 123.

thank you!

123. Quick! Before I have to get back to the Friday Night social festivities!!!

Very Nice. My shaky finger deleted my iPhone module. Install went fine. I have some customizing to do; some source to look at. So far, so good. Nice job!!!

I'll be putting up some changes in the future...

Excellent!!!!

Thank you! Please let me know if you discover any bugs.

I know of two quirks:

This one was in the old MiniBrowser and I never found a way of fixing it. The Media controls behave inconsistently when you navigate away from a song's folder. If you Pause a song, navigate away, you can still un-Pause it. If you Stop it, navigate away, you cannot restart it. If you want to tackle this one here's a hint: The key lies in what happens when you navigate away using the "Up" link (i.e. "mbGoUp" function). It checks the current Media ("mbSelectedMedia")and will set it to "nothing" if it is not playing.

I suspect no one else is using a 3COM Audrey with Premise, but if you are, be advised that the Auto-Refresh feature does not work perfectly. The Audrey's JavaScript interpreter is flawed. The refresh function requires the current page's URL, and Audrey's JavaScript engine loses the last character of the URL. The URL for all pages is it's GUID and Audrey loses the GUID's terminating "}" character. A special case is the Home page, where it'll lose the terminating "e". I added more JavaScript code to detect and correct this behaviour and then discovered another problem. The Audrey will automatically refresh a page once and then fail to refresh it again. I don't know why because the refreshed page contains the same content and should restart the "setTimeout" command. Such an ornery little gadget!

I finally got around to installing this, I don't know if I did something wrong or not but the iphone browser isn't scaled right on my Ipod touch.
The icons are so small I can barely make them out, I installed chucks Iphone browser before and it always displayed the icons at the proper size.
I tried the xb and ppc browsers on my laptop and the improvements or the original minibrowser are very nice, thanks.

Waynedb said:

... the iphone browser isn't scaled right on my Ipod touch. The icons are so small I can barely make them out, I installed chucks Iphone browser before and it always displayed the icons at the proper size...

Click to expand...

That's odd; I don't know what would cause that to happen.

I compared the rendering code in MiniBrowser with Chuck's iPhone module and it is virtually identical. The button's rendered size is determined by its actual dimensions ... the rendering code does not impose a specific size.

OOPS!
One thing I overlooked to include in the MiniBrowser package is the "iPhone.css" file that Chuck's iPhone module included. The "iPhoneRootObj" object does refer to this CSS file! Perhaps there's something in the CSS that governs the size of the buttons. Check for its presence in c:\program files\premise\sys\web. If it is missing, download the one attached to this post.

I have that file in the proper folder, I tried the one you posted also but i am still having the same problem.
It must be something to do with my setup seeing that no one else mentioned a problem with the new minibrowser, the iphone
browser scales just fine on my laptop using both firefox and IE7.

One of these days when I have more time I will blow away the Premise install and start from scratch, thanks for the help.

I dont have access to the line of code, but if you have the original iPhone module, there is a line with 'viewport something or ruther' in it. I added that in the minibrowserfunctions(?) under the first line after the head (I think)...anyway i'll put it up later - it fixes the rpoblem....