UI4 UI5 Migration

Revision as of 14:16, 5 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 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.

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": ""
               }
           ]
       }
   ],

New Tags

ui5_x, ui5_y

When in root, these tags represent the device box dimensions. 1x = 100 pixels, 1y = 24 pixels. When in ControlGroup, these represent the control's position in the box.

ui5_onDashboard

If the value is "1" the device is pinned on the dashboard at creation.

ui5_inScene

If the value is "1" the device is displayed in the scene creation wizard.

ui5_sceneGroup

A scene group is similar to a control group, but it's used in the scene creation wizard.

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. Example:

   {
       "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"
   },