UI4 UI5 Migration

Revision as of 16:36, 22 September 2011

Our newest Ui5 does some things differently than Ui4. This page explains the changes in Ui5 that may not be obvious to Ui4 users.

Single user interface

With UI4 there were several different user interfaces, such as the dashboard, the wizard, the cp.mios.com portal, etc. To view the current status of a device you went to the dashboard. To view the history of a device you went to cp.mios.com. Now there's just one UI and everything is one place. As always some of the features are handled locally by Vera, and others are handled by a server. But rather than having to check 2 UI's, they are all together. If you are viewing a popup or a tab that requires features handled by the server, such as a history of your notifications, you will see that you are prompted to login with your mios.com username when you try to choose those tabs or features. Also, if you do login to mios.com, but do not yet have a Vera, you will be notified of this when you select features that are handled by Vera locally, such as controlling devices.

Scenes

Scenes have been changes substantially. In Ui4 there were up to 4 different ways to specify "turn on light #3". On the dashboard there were on and off buttons, and in the wizard similar buttons. When adding light #3 to a scene, on and off were pull-downs. And you had the option of adding it both as a 'normal' scene and as an 'advanced' scene, and as part of a delay (ie turn off light #3 and 30 seconds later turn it on).

With Ui5 the goal is to make sure that the same action is always done exactly the same way. So if you want to turn on light #3 in the dashboard, you click the 'on' button for the light. If you're creating a scene and want it to turn on light #3, you still see the same control like on the dashboard and still click 'on' the same way.

So now when you create or edit a scene you'll see that you essentially get your dashboard. Devices that are grayed out are not involved in the scene (ie unchanged). Click one of the controls in the device to add it to the scene. Clicking 'on', like you would on the dashboard, means turn the light on. The delays are handled now by a the "Add commands to be run X seconds after the scene". So if previously in UI4 you had light #3 turn on and turn off after 30 seconds, and light #4 turn on and turn off after 45 seconds, then when you migrate to UI5 you'll have a pull-down that has "Immediate" which shows light #3 and #4 on, and also a "after 30 seconds" which has light #3 off, and also an "after 45 seconds" which has light #4 off. You can now add as many delays as you want, like, immediately do nothing to light #3, turn it on after 30 seconds, dim it to 50% after 60 seconds, and turn it off after 5 minutes.

Also in UI4 you had 'advanced' command (on the advanced tab) vs. 'normal' commands (on the command tab). And it was impossible to see all your commands in one place. In Ui5 there's no longer the concept of normal vs. advanced commands. There is still an Advanced tab, but this is only an advanced "view" of the same commands. The same commands are shown on the devices tabs as on the advanced tab. The advanced tab just presents it in a table view with all the commands in the scene. Whereas the devices tab let's you build a scene more like a macro recorder, by just clicking on the devices the same way you would on the dashboard.

Timers

They are now called "Schedules", but they work exactly the same way. It's a tab in the scene editor.

Events

They are now called "Triggers", but they work exactly the same way. It's a tab in the scene editor.

Developer changes

eventList

The eventList in the D_...json is now normalized. The format from UI4 was a mistake all along, treating arrays as objects. So this:

   "eventList": {
       "event_1": {
           "label": "Incoming call from",
           "serviceId": "urn:upnp-ap15e-com:serviceId:FCM1",
           "norepeat": "0",
           "argumentList": {
               "argument_1": {
                   "dataType": "string",
                   "name": "CallSource",
                   "comparisson": "=",
                   "prefix": "Phone number",
                   "suffix": ""
               }
           }
       },
       "event_2": {
           "label": "Outgoing call to",
           "serviceId": "urn:upnp-ap15e-com:serviceId:FCM1",
           "norepeat": "0",
           "argumentList": {
               "argument_1": {
                   "dataType": "string",
                   "name": "CallDestination",
                   "comparisson": "=",
                   "prefix": "Phone number",
                   "suffix": ""
               }
           }
       }
   },

now needs to be like this, where eventList and argumentList are now arrays containing an element id that has the id, rather than putting the id in the tag name (i.e. event_1 becomes "id": 1):

   "eventList": [
       {
           "id": 1,
           "label": "Incoming call from",
           "serviceId": "urn:upnp-ap15e-com:serviceId:FCM1",
           "norepeat": "0",
           "argumentList": [
               {
                   "id": 1,
                   "dataType": "string",
                   "name": "CallSource",
                   "comparisson": "=",
                   "prefix": "Phone number",
                   "suffix": ""
               }
           ]
       },
       {
           "id": 2,
           "label": "Outgoing call to",
           "serviceId": "urn:upnp-ap15e-com:serviceId:FCM1",
           "norepeat": "0",
           "argumentList": [
               {
                   "id": 1,
                   "dataType": "string",
                   "name": "CallDestination",
                   "comparisson": "=",
                   "prefix": "Phone number",
                   "suffix": ""
               }
           ]
       }
   ],

sceneList

The sceneList tag is gone. The commands available for scenes are the same commands that can be given to a device from the dashboard controls. So if we have a device with 4 buttons in the Control Panel, but only 2 of them on the dashboard, only these 2 can be used in the scene.

New Tags

In root

• ui5_onDashboard*: If this tag is present and has the value "1" the device will be pinned on the dashboard at creation.
• ui5_inScene*: If this tag is present and has the value "1", the device will be shown in the scene editor.
• ui5_x, ui5_y: These represent the device box dimensions, ui5_x and ui5_y being the width and the height respectively. 1x = 80 pixels, 1y = 25 pixels. These are used to tell the UI how much space you need to draw all the controls (excluding the header and the icon). A button has x = 1 and y = 1, an horizontal slider has x = 2 and y = 1 and a vertical slider has x = 0.5 and y = 2.

* These tags are mandatory. They don't have a default value so if they're missing, the behavior is unknown.

In ControlGroup

All the controls are placed in ControlGroups, which in turn are placed in SceneGroups.

• isSingle: Since controls cannot be grouped in drop-down lists anymore, this tag has a different role in UI5. When isSingle is "1", the buttons in the ControlGroup will be treated like checkboxes, and not as parts of a set of buttons, like radio buttons. So if isSingle is "1", all the buttons in the ControlGroup can be active at once, and when isSingle is "0" only one button can be active at any time.
• ui5_scenegroup: This tells the UI in which SceneGroup this ControlGroup will be placed.

ui5_SceneGroup

ui5_SceneGroup is an array which contains the definition for all the control groups (clusters).

   "ui5_SceneGroup": [
       {
           "id": "1",
           "isSingle": "1",
           "ui5_top": "0",
           "ui5_left": "0",
           "ui5_x": "2",
           "ui5_y": "1"
       }
   ]

ui5_image_src

Used in image_player controls for specifying the image file to be used for the skin.

New Control Types

image_player

This is a skinnable button. It has the same tags as a button plus the ui5_image_src tag for specifying the image used for the skin.

e.g. Here is the Up button from the camera:

   {
       "ControlType": "image_player",
       "Label": {
           "lang_tag": "cmd_up",
           "text": "Up" 
       },
       "Display": {
           "Top": 49,
           "Left": 466,
           "Width": 75,
           "Height": 20 
       },
       "Command": {
           "Service": "urn:micasaverde-com:serviceId:PanTiltZoom1",
           "Action": "MoveUp",
           "Parameters": [
               
           ] 
       },
       "ui5_image_src": "images/player/image_control_up.png"
   },