Jump to content


Photo
- - - - -

100% customizeable browser UI


  • Please log in to reply
21 replies to this topic

#1 Timoh

Timoh

    Dedicated Cocooner

  • Registered
  • PipPipPip
  • 149 posts
  • Location:Montreal, Canada
  • Experience:average
  • Tech:Z-Wave
  • Phone:OBi100/110

Posted 20 April 2012 - 08:42 AM

Hi folks,
I'm not on Premise... Yet ;) But I am pondering it. I'm another low-cost HA product which is serving my needs.

But I am wondering if there is an appetite for a 100% customizeable browser based UI? I gather the current UI layout is determined by the Premise web server. I'm writing a 100% customizeable browser UI for my current setup, 18 month project and counting. I have ton of lessons learned, what I would different, if I hard to do it again. Since I'm pondering a swicth to Premise, I might just do it again, if & when I make the switch and if folks think it's something they would like/worth it.

The concept would be a drag & drop designer with a selection of design components that could be associated to Premise objects for control.

Tim

#2 123

123

    Cocoonut

  • Registered
  • PipPipPipPip
  • 2114 posts
  • Location:Montreal, QC
  • Experience:average
  • Software:Premise
  • Hardware:Elk M1

Posted 20 April 2012 - 09:30 AM

Welcome potential Premise user!

I've followed your journey on the Housebot forum and it certainly has been a 'long strange trip'. Kudos for the tremendous progress you've made! Any knowledge you wish to share with us would be greatly appreciated.

Premise uses its built-in Web server to render user-interfaces. There are two rendering facilities and both are implemented as Modules (VBScript):

AutomationBrowser
This is the preeminent renderer. It automatically converts the objects in Premise Home into a structured user-interface reminiscent of what's found on iOS and Android (a grid of icons). Clicking an icon reveals either more icons or an object's (light, thermostat, etc) user-interface. Each object's appearance is defined as a "Plugin" which consists of a "Selector" and a "ControlsLibrary". There is no graphical designer for Plugin and they must be hand-coded. All this to say that AutomationBrowser is highly structured and very object-oriented. AutomationBrowser requires that the client use Internet Explorer with an ActiveX Plugin called sysconnector. Sysconnector establishes two-way communications. The client "subscribes" to an object via sysconnector and is informed whenever the object's state changes (no polling is involved). So when a light turns on its new status instantly appears in all browsers. The primary disadvantage of AutomationBrowser is it only works with IE, and sysconnector, on Windows.

MiniBrowser
MiniBrowser works with all browsers. It does not use any browser add-ons but lacks bi-directional communications. It was originally designed for PDAs, first-gen smartphones, and Internet appliances so it's appearance is spartan. It converts objects in Premise Home into a user-interface. However, unlike AutomationBrowser, it lacks the sophistication of Plugins so it does not know how to render all of Premise's objects. Everything it knows how to render is coded within its module so it is not modular and extensible (you have to release an entire new version to add support for just one new Premise object). In AutomationBrowser, you can add new Plugins without having to modify AutomationBrowser's code.

So, neither of these renderers has a graphical designer tool. AutomationBrowser has the best architecture but is limited to running on IE/Windows. MiniBrowser runs on anything but has a simplistic architecture that lacks 'object templates', like AutomationBrowser 's Plugins, so it offers nothing for a designer tool.

The meat and potatoes is Premise's web server, it's hierarchical database of objects, and a scripting language. It's a solid foundation for building something new and better.

#3 Timoh

Timoh

    Dedicated Cocooner

  • Registered
  • PipPipPip
  • 149 posts
  • Location:Montreal, Canada
  • Experience:average
  • Tech:Z-Wave
  • Phone:OBi100/110

Posted 20 April 2012 - 01:48 PM

If I understand correctly... Mini-browser is display only? So there are no buttons to push to trigger off actions? Or anything else like that?

Does the Premise webserver have a CGI interface? ie: Can it hand off to PHP, Perl, etc?
Is there a link to a good minibroker capability thread somewhere?

Two things I would never do again, that "seemed like a good idea at the time" on the HB project.
Don't try and bundle everything together.... In HB, I wanted a single dropin plugin. The idea was to make it simple to install without messing around with multiple files. This forced all the webserver processing into C++ instead of handling it with simple more hypertext orientated PHP. A smarter and more extensible way would be just a webserver and seperate php interacting with HB. Folks could have more easily written their own php HB modules, and much of the runonce javascript in the client could have been moved to the server too.
Number two... Don't reinvent the multi-browser wheel... I should have used jquery or another portable library. Now I am stuck doing extra work to ensure it works on most browsers. I'm sure I would have still had some issues to fix to get it working on multiple browsers, but now I have to fix a lot, and not just some.
I might give up on the sliders and rotary to delivered, get the x-platform browser working and call it a day.


If I'm crazy enough to do it all over again for Premise, at least I'll have more control over the deisgner. I'm thinking I could grab a nice opensource html5 wysiwyg editor and shoehorn it into Premise or vice-versa.

Tim

Edited by Timoh, 20 April 2012 - 01:53 PM.


#4 123

123

    Cocoonut

  • Registered
  • PipPipPipPip
  • 2114 posts
  • Location:Montreal, QC
  • Experience:average
  • Software:Premise
  • Hardware:Elk M1

Posted 20 April 2012 - 02:54 PM

MiniBrowser let's you control Premise objects. You can use it to arm/disarm a SecuritySystem, turn on/off/dim a Light, open/close/pulse a Relay, increase/decrease volume of a MediaZone, etc.

What it cannot do is 'push' an object's state-change to the browser. For example, you turn on a light via the browser (rendered by MiniBrowser). The browser indicates the light is on. Someone else in your home turns the light off. Your browser continues to indicate the light is on. You need to refresh the web-page in order to poll the Premise Server and acquire and display the light's new state, namely off.

AutomationBrowser uses sysconnector to establish two-way, real-time communications plus a subscription model. When you display the light in the browser (rendered by AutomationBrowser) sysconnector subscribes to the light. Premise Server monitors subscriptions and pushes any state-changes to the subscribed client. So when that other person in your home turns off the light, Premise Server pushes the state-change to your browser which displays the light as being off. It refreshes only the portion of the web-page displaying the light's status and not the entire page. If you open Builder and view the web-server's Sessions you can see the list of subscriptions. Each Subscription indicates which Premise object it represents.

Minibroker is a COM object whose API exposes Premise's internals including all objects, methods, properties, even the subscription model. Any programming language that can use a COM object can use Minibroker. However, being a COM object, it must be used in a Windows environment (not a good choice for a platform agnostic client). It is useful for creating drivers and new services. For example, imagine a service that provides a WebSocket. Chrome supports HTML5 WebSocket and so does my PlayBook's browser and so will IE10. The WebSocket would replace sysconnector. I'm missing several pieces of the puzzle but I think you get the idea of how Minibroker could be used to build parts of it. Or you probably could forego MiniBrowser and build a native driver using Premise's HSDK in C++.

Using existing libraries is the way to go. I added a few basic widgets to AutomationBrowser and disliked having to build stuff that is readily available elsewhere. A library of widgets is a must along with a graphical designer tool. If we have to hand-code widgets and indicate where they are positioned on the screen using x,y coordinates then we might as well just use AutomationBrowser because that's how it works.

To do this right requires a significant amount of thought and effort. I think the people who have tackled this task in the past realized the enormity of the challenge and ultimately gave up or failed to share their hard work.

I had high hopes for using Command Fusion with Premise. All that's needed is a bi-directional driver to talk Command Fusion's protocol and then use Command Fusion to build beautiful user-interfaces. Unfortunately, CF is far from free.

PS
Regarding your CGI interface/PHP/Perl handoff question, my inclination is to say No but I am not an expert and a wiser person than myself might know more about Premise's web-server. I'm fairly certain you cannot use an alternate web-server unless you created a 'bridge' that allowed it to access Premise's internals.

PPS
If this bridge existed (written with MiniBrowser or as a native driver), Premise's internal web server could be shutdown and all UI rendering would be performed by the external web server using the latest open-source technologies. This is a viable option and would conform to what you learned to be a superior model in your project with Housebot.

Edited by 123, 20 April 2012 - 03:19 PM.


#5 Timoh

Timoh

    Dedicated Cocooner

  • Registered
  • PipPipPip
  • 149 posts
  • Location:Montreal, Canada
  • Experience:average
  • Tech:Z-Wave
  • Phone:OBi100/110

Posted 20 April 2012 - 03:39 PM

I'm sure I'll learn more once I get around to installing it.

I have 2 more questions to make or break an awesome idea brewing in my head....
Do you know what the underlying web server is for Premise? It might not make a difference in what I'm thinking, but would be useful to know.
And how does the client browser know a light has changed? Is it ajax? Servers can't really push anything to browser (html5 websockets not withstanding)... The browser has to pull.

For example, imagine a service that provides a WebSocket. Chrome supports HTML5 WebSocket and so does my PlayBook's browser and so will IE10. The WhebSocket would replace sysconnector. I'm missing several pieces of the puzzle but I think you get the idea of how Minibroker could be used to build parts of it.


That's what my knee jerk reaction was... Minibroker=>html5 web render middle tier=>browser
But... if the Automation browser truly has a protocol, it might be leveraged for client. But if the automation browser is dumb and just does things like "draw new image here" on the screen when things change, then it's not really an option.

Edit:oh wait... ActiveX, protocol could be anything including homegrown.

Tim

Edited by Timoh, 20 April 2012 - 04:04 PM.


#6 123

123

    Cocoonut

  • Registered
  • PipPipPipPip
  • 2114 posts
  • Location:Montreal, QC
  • Experience:average
  • Software:Premise
  • Hardware:Elk M1

Posted 20 April 2012 - 04:39 PM

Premise's web server is unique to Premise and is integrated into its Windows Service (prkernel.exe).

I misspoke when I used the word "push". "Publish" would be more accurate. The client, more precisely the browser's ActiveX plugin called SysConnector, tells the server which objects are of interest to it. Premise publishes the state-changes for these 'subscribed' objects. SysConnector monitors the subscriptions and acts on state-changes. "Acts" means the client triggers server-side code which forces new information to be delivered and displayed in the client (and only in a specific region of the web-page). So, yes, it is all "pull" and the subscription is a means of signalling when it is time to pull.

I've attached an example of a super-simple web-site using SysConnector (NOTE: it is not the entire working example, just the HTML portion). This is not my work but was posted by the original Premise developers (many years ago) to demonstrate the operation of SysConnector. Believe me, it is much more difficult to learn how SysConnector works if you start with the thousands of lines of code in AutomationBrowser!

Here's a snippet of the file, explaining SysConnector's "SubscribeToProperty" method.


|*| "Subscribe to Property" - use to watch for property changes
|*|
|*| SYNTAX:
|*| connector.SubscribeToProperty(obj,prop,method,target,source)
|*| -obj as string (guid or sys path of object)
|*| -prop as string (name of property to subscribe to)
|*| -method as string [guid of object with method]:[name of method] -this method's purpose is to return the html to display when the property changes
|*| -target (always 'this')
|*| -source (always 'this')
|*|
|*| EXAMPLE:
|*| connector.SubscribeToProperty('{4BFA7919-93C9-4627-B90B-4C6C2008C30C}', 'PowerState', '{4BFA7919-93C9-4627-B90B-4C6C2008C30C}:getPowerStatusHTML()', this, this)

In the example above, SySConnector is subscribing to a Premise object whose GUID is that long-winded string. More precisely it is subscribing to state-changes to that object's PowerState property. When the object's PowerState changes state, the object's method called "getPowerStatusHTML()" is invoked. This method will generate HTML code depicting the object's new state.

The following snippet shows how to set the value of an object's property.

|*| "SetValue" - use to set a value of a property
|*|
|*| SYNTAX:
|*| connector.setValue(obj,prop,value)
|*| -obj as string (guid or sys path of object)
|*| -prop as string (name of property)
|*| -value as string (new value of the property)
|*|
|*| EXAMPLE:
|*| connector.SetValue('{4BFA7919-93C9-4627-B90B-4C6C2008C30C}', 'PowerState', 'False')

In the example above, SysConnector's SetValue method sets an object's (defined by the GUID) PowerState property to false.

That represents the basics and here is how it is implemented using HTML:
Subscription:

<span style="background-color:black;" ondataavailable="connector.SubscribeToProperty('{4BFA7919-93C9-4627-B90B-4C6C2008C30C}', 'PowerState', '{4BFA7919-93C9-4627-B90B-4C6C2008C30C}:getPowerStatus()', this, this)"> ... etc ... </span>
Note the use of Internet Explorer's proprietary "on data available" tag in the span element.

SetValue:

<td style="cursor:hand;" bgcolor='gray' onclick="connector.SetValue('{4BFA7919-93C9-4627-B90B-4C6C2008C30C}', 'PowerState', 'False')"><b>TURN OFF</b></td>


That's how SYSConnector allows AutomationBrowser to seemingly "push" state-changes from the server to the client. In fact, the client instructs the server what it is interested in and then, when a state-change occurs, it triggers a server-side script (belonging to the object) to deliver fresh HTML to render the new state. Pretty neat but SYSConnector only runs with IE on Windows.

FWIW, SysConnector's methods are a tiny subset of what is found in MiniBroker.


The attached image is Premise Builder displaying the WebSubscriptions in effect as a result of a single active Session. The Session is servicing a web page rendered by AutomationBrowser.

Attached Files



#7 Timoh

Timoh

    Dedicated Cocooner

  • Registered
  • PipPipPip
  • 149 posts
  • Location:Montreal, Canada
  • Experience:average
  • Tech:Z-Wave
  • Phone:OBi100/110

Posted 22 April 2012 - 08:43 AM

Re: Minibrowser on the other post... wrt mbstate...Send an url and get back some xml....

How widely supported is it in Premise objects?

I'm thinking wrapping it in some javascript could make for something interesting.

Tim

#8 123

123

    Cocoonut

  • Registered
  • PipPipPipPip
  • 2114 posts
  • Location:Montreal, QC
  • Experience:average
  • Software:Premise
  • Hardware:Elk M1

Posted 22 April 2012 - 12:01 PM

Premise's schema includes an object called "Premise Object". Every object, in Premise Home, inherits from Premise Object. That means every object inherits a common set of properties and methods. Name, Display Name, Description, Parent, etc are properties found in all objects including the ability to represent oneself in XML format. MiniBrowser uses an object's capability to represent itself in XML format.

As I mentioned in another post, Premise is fully object-oriented and lets you inherit and extend classes. MiniBrowser extends many (but not all) objects with a new method called mbState(). When you use an URL like this:

Http:// MyPremiseServerIP /sys/home/firstfloor/kitchen/ceilinglight?d??mbState(2)

You are calling mbState which is not a native method of ceilinglight and has been appended to its class definition by MiniBrowser. Invoking mbState with a 2 instructs MiniBrowser to show the object in XML. 0 returns a full HTML page, 1 returns the object's name, and 3 returns nothing. mbState could be modified so that if called with 4 it returns something different.

Edited by 123, 22 April 2012 - 12:07 PM.


#9 w84no1

w84no1

    Dedicated Cocooner

  • Registered
  • PipPipPip
  • 134 posts
  • Location:Central Virginia
  • Experience:average
  • Software:EventGhost, Premise
  • Tech:Z-Wave
  • Audio:AirPlay
  • Video:XBMC
  • CCTV:ip
  • Phone:OBi100/110

Posted 22 April 2012 - 12:49 PM

Premise's schema includes an object called "Premise Object". Every object, in Premise Home, inherits from Premise Object. That means every object inherits a common set of properties and methods. Name, Display Name, Description, Parent, etc are properties found in all objects including the ability to represent oneself in XML format. MiniBrowser uses an object's capability to represent itself in XML format.

As I mentioned in another post, Premise is fully object-oriented and lets you inherit and extend classes. MiniBrowser extends many (but not all) objects with a new method called mbState(). When you use an URL like this:

Http:// MyPremiseServerIP /sys/home/firstfloor/kitchen/ceilinglight?d??mbState(2)

You are calling mbState which is not a native method of ceilinglight and has been appended to its class definition by MiniBrowser. Invoking mbState with a 2 instructs MiniBrowser to show the object in XML. 0 returns a full HTML page, 1 returns the object's name, and 3 returns nothing. mbState could be modified so that if called with 4 it returns something different.


I was thinking about doing that. Adding json as number 4. All I have to do is convert the xml to json and there are a couple of ways to do that. I am still learning the ins and out of Premise as I work on my jQueryMoible UI.

#10 123

123

    Cocoonut

  • Registered
  • PipPipPipPip
  • 2114 posts
  • Location:Montreal, QC
  • Experience:average
  • Software:Premise
  • Hardware:Elk M1

Posted 22 April 2012 - 03:05 PM

I'm interested in learning how you plan to convert XML to json in a Premise Module. I have been unable to find a free COM object to do this nor example code in VBScript. I did find one for Classic ASP but it resorts to using Javascript which is not an option within a Module. I was planning to write my own class to perform the conversion (using a PowerShell example: http://powershelljson.codeplex.com/) but if you know of another way, I'm all ears.

FWIW, there is a COM object that lets you execute PowerShell from VBScript. I tried it from within a Premise Module and it works but is noticeably slow. There are also a few .NET array sorting functions that you can call from VBScript that also work from within modules.

Edited by 123, 22 April 2012 - 03:07 PM.


#11 w84no1

w84no1

    Dedicated Cocooner

  • Registered
  • PipPipPip
  • 134 posts
  • Location:Central Virginia
  • Experience:average
  • Software:EventGhost, Premise
  • Tech:Z-Wave
  • Audio:AirPlay
  • Video:XBMC
  • CCTV:ip
  • Phone:OBi100/110

Posted 22 April 2012 - 07:05 PM

I'm interested in learning how you plan to convert XML to json in a Premise Module. I have been unable to find a free COM object to do this nor example code in VBScript. I did find one for Classic ASP but it resorts to using Javascript which is not an option within a Module. I was planning to write my own class to perform the conversion (using a PowerShell example: http://powershelljson.codeplex.com/) but if you know of another way, I'm all ears.

FWIW, there is a COM object that lets you execute PowerShell from VBScript. I tried it from within a Premise Module and it works but is noticeably slow. There are also a few .NET array sorting functions that you can call from VBScript that also work from within modules.


Darn, I keep forgetting this isn't ASP (My current platform at work :blink: ) It will be faster for me to just use the XML output than figure out how to get a JSON response.

#12 chucklyons

chucklyons

    Dedicated Cocooner

  • Registered
  • PipPipPip
  • 753 posts
  • Software:Premise

Posted 22 April 2012 - 11:14 PM

I'm not sure whether this is the right place for this tip, but here goes...

When you're in builder, a helpful 'feature' is using the display name of an object to put in an image...

For instance, I have a themed panel button in my yard location called 'gate'. In the minibrowser, it will be displayed as the character based hyperlink 'GATE'.

However, go to Globalscript/minibrowserfunctions, scroll down to the bottom and locate the Function gMBRenderMacros, change the '16' to '40'
Now go to your Home object of choice. You can enter in the DISPLAY NAME something like <img src="/plugins/images/gate.gif"> . Now MB will display the image you have requested, which by the way, will be the same as in AB

#13 Timoh

Timoh

    Dedicated Cocooner

  • Registered
  • PipPipPip
  • 149 posts
  • Location:Montreal, Canada
  • Experience:average
  • Tech:Z-Wave
  • Phone:OBi100/110

Posted 23 April 2012 - 08:27 AM

I'm interested in learning how you plan to convert XML to json in a Premise Module. I have been unable to find a free COM object to do this nor example code in VBScript.


vbscript already has XML capabilities with MSXML. For the other piece, JSON, there are vbscipt JSON libraries or you could just roll your own.. ie: assemble the various bits and pieces together into a JSON string.


Is there a really good reference guide anywhere with all the classes and objects available in Premise?

Tim

#14 123

123

    Cocoonut

  • Registered
  • PipPipPipPip
  • 2114 posts
  • Location:Montreal, QC
  • Experience:average
  • Software:Premise
  • Hardware:Elk M1

Posted 23 April 2012 - 09:10 AM

Tim,

Premise Builder's built-in help describes most everything including Premise's classes. A more detailed account of Premise's internal architecture can be found in its HSDK documentation.

If you are aware of a JSON library implemented in VBScript, and that does not fob off the conversions to Javascript, please let me know what it is.

Attached Files


Edited by 123, 23 April 2012 - 09:32 AM.


#15 Timoh

Timoh

    Dedicated Cocooner

  • Registered
  • PipPipPip
  • 149 posts
  • Location:Montreal, Canada
  • Experience:average
  • Tech:Z-Wave
  • Phone:OBi100/110

Posted 23 April 2012 - 10:02 AM

that does not fob off the conversions to Javascript,

What do you mean "fob off the conversions"?

I've never had the need to do JSON in vbscript, but if I did, I would probably start by looking at some of the ASP libraries out there since there is a big overlap with vbscript.

Tim

Edited by Timoh, 23 April 2012 - 11:23 AM.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users