Premise jQuery Mobile MiniBrowser UI - Preview

Motorola Premise

w84no1

Active Member
I have started creating a jQuery Mobile UI for MB. I have the toolbar rendering and I am working on getting the locations working next. Here is a sneak peak.
 

Attachments

  • jq-minibrowser.GIF
    jq-minibrowser.GIF
    97.3 KB · Views: 171
Hi w84no1,
What are you using as a design tool? Anything specific? And what's the plan to tie it back in to Premise? ie: Get/Send updates?
Tim
 
I am using jquerymobile, not a design tool. It is running using MB, so I hope to use ajax and the MB Remote Control Interface.

...

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
 
I have the light powerstate and brightness working. I am going through each class that MB supports.
 

Attachments

  • Capture1.JPG
    Capture1.JPG
    24.3 KB · Views: 115
  • Capture.JPG
    Capture.JPG
    16.2 KB · Views: 138
  • Capture2.JPG
    Capture2.JPG
    21 KB · Views: 99
Very nice work, w84no1! Clean and efficient!

I look forward to trying the finished product.
 
I love the looks of the interface! Were you able to get two way status feedback to work with this?

Yes I have it working. It makes an ajax call to check the state every second at the moment. Still playing around with the timing.

And thanks to 123, I was able to add a setvalue function so that the slider can set the brightness.

To test I have AB open in IE and my UI open in Chrome, I make a change in one and wait for the update in the other, seems to work pretty good.
 
You have implemented my dream! :pray:

I am to be the first beta user!

Looking for a job? ^_^
 
I am slowly moving along.

Classes completed:
  • Lights
  • Fans
  • Appliances
  • relayDevices
Classes remaining:
  • MediaZones
  • Thermostats
  • SecuritySystems
  • Keypads
  • Buttons
  • CustomPanelButtons
  • All Sensors
 
This is some VERY nice work. An interface like this would really aide in getting other users to check out Premise.
 
w8no1,

MiniBrowser's current implementation of a MediaZone is limited to Music. However, if you're not already aware, a MediaZone is far more than that. I encourage you to experiment with a MediaZone and observe the results in AutomationBrowser. A MediaZone encompasses all Audio Visual gear including TV, DVD players, Receivers, AV switchers, CD players, Satellite and Cable boxes, etc. Whatever you include in a MediaZone, AutomationBrowser will render a suitable UI for it. In a perfect world, MiniBrowser should behave the same way. However, you can spend weeks laying out the UI for all the AV gear supported by a MediaZone. I suggest you limit yourself to Music now but consider how your code may have to be structured to handle the extra gear in a future release.

If you add a TV to a MediaZone you will need to bind the TV object to a TV Device (driver) before AutomationBrowser bothers to render it. Where do you get a TV driver? Just use the Class Wizard to construct the framework of a TV driver. It guides you through the process of specifying the type of device, it's inputs and outputs, and then cranks out a Module-based driver.
 
w8no1,

MiniBrowser's current implementation of a MediaZone is limited to Music. However, if you're not already aware, a MediaZone is far more than that. I encourage you to experiment with a MediaZone and observe the results in AutomationBrowser. A MediaZone encompasses all Audio Visual gear including TV, DVD players, Receivers, AV switchers, CD players, Satellite and Cable boxes, etc. Whatever you include in a MediaZone, AutomationBrowser will render a suitable UI for it. In a perfect world, MiniBrowser should behave the same way. However, you can spend weeks laying out the UI for all the AV gear supported by a MediaZone. I suggest you limit yourself to Music now but consider how your code may have to be structured to handle the extra gear in a future release.

If you add a TV to a MediaZone you will need to bind the TV object to a TV Device (driver) before AutomationBrowser bothers to render it. Where do you get a TV driver? Just use the Class Wizard to construct the framework of a TV driver. It guides you through the process of specifying the type of device, it's inputs and outputs, and then cranks out a Module-based driver.

Cool, I was wondering how I would render stuff that I didn't really have. Can I use the same method for the thermostat?
 
Back
Top