Sample Web Page Installation

 

Installing and using the included user interfaces available for myServer.

 Allonis has provided two sample user interfaces so that you can both test the configuration of your myServer installation, as well as learn from the techniques used to be then migrated to your custom user interface.  Of course, you can also directly use the included samples as a robust home automation user interface.  New as of 8/2017 is the Software Update Subscription Service.  By being a member of this service, you also have availability to the Modern.Phone and Modern.Tablets user interfaces.

This provides for very quick "out of the box" capability and "a fully customized experience" option to Allonis customers and dealers.

 

 

How to Install the Sample User Interfaces on myServer5

 

  • Install and launch the myServer application
  • Run the myInstaller application on the myServer PC
  • Select both xxxx.sample user interface installers
  • Download and run the installers.  This will create "myUI.Phones.Sample" and "myUI.Tablets.Sample" to the myServer\HTML directory
  • Recommended is to create a new directory: myServer\HTML_Sample and COPY the two "xxx.Sample" directories there.
  • Edit the name of the two sample directories:  myServer\HTML\myUI.Phones and myUI.Tablets.  You should not have any xxx.Sample web apps in your HTML directory (to keep things organized).
  • Go to a browser and enter your domain:  eg: http://192.168.0.2/myUI.Phones/index.html   you should now be viewing the included sample scenes
  • You can copy the "myUI.Phones" into your own custom directory ("myHome") and then modify the myHome scenes in the myServer\HTML directory using myDesigner to learn how to customize the UI.  Keep the copies in the Samples directory untouched and don't modify the "myUI.Phones" directory so you have a baseline to look at.
  • Check for updates on the included files in myInstaller.  As Allonis creates new capabilities, we update the included Samples
  • Create "myServer\HTML_Old" and put old versions of user interfaces in there so you have an archive.

Directory structure when the above is implemented:

myServer\HTML_Sample\myUI.Phones.Sample (and myUI.Tablets.Sample)

myServer\HTML\myUI.Phones  (this is the file you test new capabilies, but you don't modify this file - you simply replace the entire directory with each Allonis Sample update)

myServer\HTML\myHome (this is your custom UI that you build, that is what you use on a daily basis)

myServer\HTML_Old (your manually maintained backup of old web projects you have worked on in the past, including backups of your current HTML web pages. We use the date the backup was made for version organization:  "myUI.Phone.09252016")

 IMPORTANT:

In each web app directory, there are the "images" and "sounds" directories.  It is good to copy the latest versions of these directories from the latest samples into your custom UI directories to ensure that your customer web apps are up to date with myDesigner, myServer capabilities.  By simply copying, you will be adding what's new, without overriding what you may have added in your custom webapp, unless you reused the same filename for your custom file (not recommended).

For the css and javascript directories:  

Open myDesigner and open your custom web directory eg: "myHome".  Click the "Refresh Support Files" button.  This will upgrade the files in "myHome" to the latest.  This will NOT update the custom.js file where your settings are.  You can make a backup of your custom.js, replace the same file in the javascript file and then manually re-edit the file with your customizations (in myDesigner or a good Text editor (like TextPad).  Most advanced users only need to configure a couple of items:  TARGET_WIDTH and TARGET_HEIGHT to match their project.

ENABLE_SECURITY, and ENABLE_APP_SCALING variables are the new in myServer that are likely missing from your original MLServer4 custom.js file and should be added from the samples directory.

Modern.Phone and Modern.Tablets.sample Features 

Here are some features of the new UI.


Sidebar

1. Sidebar images rotate with the changing of weather conditions. Currently there are two options for images, the default set and one called “Sunsets”. The Sunset images can be found in the myServer\Images\Weather\Sunsets subfolder once you install weather. Copy the images from the Sunsets folder to the Weather folder to activate them.

2. To get to weather click on the top of the side bar where the weather conditions are located.

3. To get to Movies, TV and Music you must select the viewing or listening location first. Then select an option from either the Watch or Listen dropdown. Once you go to your choice you do have to go back home to select a different option. Your current selection is shown in the lower right of each page. Just click on it to bring up the selection overlay.

Dashboard

1. The climate control on the dashboard provides viewing of current temperature in specific locations. If the Cool or Heat is on you can bump up or lower the temp. You will know which mode it is in by the colored dots on the arrow buttons.

2. Lighting displays how many lights are currently on in the house as well as outside. In order to see the number of the outside lights you must set the zone to outside in family manager for those lights. In order to use the “all off” buttons you must create a macro named lighting.allinsideoff and lighting.alloutsideoff.

3. The Security status area shows whether the system is ready to arm. If there are zones that are not ready you can click to see which ones are violated. You can also view which zones are bypassed.

Lighting

Currently the lighting page is set up to see a floor plan of your house. In the lower left is an option to see lighting in List View. If you do not have floor plans then you can change the Navigator to go to List View. If you are interested in having floor plans created we provide that service. Just inquire and we will give you an estimate.

Overlays

To be consistent overlays come up in the same location for just about everything. In Movies and Music you will see the words Browse Movies or Browse Music. When the overlay appears the text will change to a Close Movies or Music. The goal was to make it as simple and clear as possible.

Some notes about particular scenes:

Lighting:  How to get the light counts and zone counts working on the dashboard - Look in Family Manager / Lighting. The logic in play there is any light that has a zone assigned to the value "Outside" is what gets included in the outside lights count. Also the light must be of model switch or dimmer. Each lighting device should be assigned to a room too.

Every time a light of type dimmer or switch changes value then depending on its state the and location, the inside or outside light count indicator is adjusted.  If the load is in a zone called "outside" then the outside counter is in play otherwise it is an inside light.

Climate: 

There must be a default thermostat selected or the UI won't populate. With an unknown thermostat there is nothing to draw or display.

If not, add the following to the startup command on the index.html page:

If|IsEqual##{{climate_activetstat_{{clientname}}}}####SetVariable|climate_activetstat_{{clientname}}~<< YOUR TSAT DEVICE ID>>##

 

myUI.Phone and myUI.Tablets.sample Features

WebClient name:  The included samples support the ability to set the WebClient name.  By default, when a browser connects to myServer from the Intranet (local network), it's clientname is "w19216801" or whatever it's IP address is.  This isn't a completely intuitive name.  When you load in a browser the sample app, click the "ALLONIS" logo at the bottom of the main menu.  You will see "clientname" field.  Type a name that has no periods.  The clientname will always be set to lowercase.  The clientname is saved to the devices "local storage".  You can clear this by going to the browser's clear cache and stored data.  Even if the device is rebooted, this data is stored on the device until you manually clear it.  Establishing a webclient name is important, because when a device is connected through the Internet, myServer sees the IP address as the router's IP address, no matter the personal device that is connected.  So, make sure you create a device specific webclient name.

Main Menu:  Provides quick access to the key available systems.  This list is configured by opening the "Overlay_MainMenu.html" file in myDesigner.

Sub Menu:  Additional menu choices for a sub topic like "Media".  Media choices are configured in the "Overlay_MenuMedia.html" file in myDesigner.

Floorplan:  Example of a custom floorplan view.  This requires a moderate amount of custom graphical work, object placement and definition in myDesigner.  The included sample supports multiple floor levels as an example.  Configured in "Floorplan-Main" and "Floorplan-Upper" html files in myDesigner.  Allonis can be contracted to develop custom floorplan views for both graphs and programming.  We would need ideally a CAD file, or even a scan of a spec home brouchure with the general floor plan.

Irrigation:  An example user interface of a sophisticated control system for lawn irrigation.  Includes ability to schedule when watering occurs and for manual control (useful for winterizing the system, or to shut off a zone so the car doesn't get wet).

Lighting: House Lighting example uses a dropdown list that shows all lighting devices defined in the Lighting Family.  This allows for immediatly available control user interface once a new lighting device is added with no programming required.  So, it's easy to add a new lighting device...no matter if it's Z-Wave, Zigbee, X10, UPB, or a custom Vantage Control lighting system.  All will appear in the same list so the end user just wants to turn the light On and doesn't care about what technology is being used. (One App for all devices!).

Pool Lighting:  These are example scenes that demonstrate highly custom control over RGB lights.  The examples support an audio source that is analyzed by myServer.  The RGB lighting devices defined then "dance" with the beat and spectrum intensity of the music.  A "Color Organ".  Very cool stuff.

Security:  Provided is a sample keyboard where you can arm / disarm your supported security system.  You can also bypass and monitor zones.  No need anymore for ugly security keypads next to the main doors.  Replace them with in Wall tablets that run myServer!

Shades: Example UI for control over blinds and shades.  Includes ability to set preset positions and groups.

Zone and Source Control:  Programmed into the sample scenes are examples of how to set a Zone, and then set the Source to play to that Zone.  You will notice that the list of possible sources is filtered (grey) by the sources that are not applicable to that Zone.

Control button:  On the bottom left, once a zone and source is set, you can easily control the zone's volume and associate a Power On / Off command (in Zone Builder).  On some sources, you can also click the Equalizer button that slides out a graphical EQ to tailer the sound to the music or zone.

Mode:  On the bottom right, you can select which overall Mode the house should be set.  Examples would be:  Daytime, Nighttime, Weekend, Vacation, Party.  Configuring the Mode actions are done in "State Variables" in myServer.  They work in conjunction with "Scheduled Tasks"

Scheduled Tasks:  In the Main Menu, you will see a selection for "Scheduled Tasks".  This is a very powerful feature that allows a homeowner, who may not be technically inclined, to configure their system to do powerful automation.  

  1. Simply select "Create a new scheduled task".  
  2. Type an intuitive name and a broader Description.  
  3. Select what device you would like to control (like "Lighting Devices").  
  4. Select which room the device controls.  You will then see a filtered list of devices in that room.  Select the one that applies.  
  5. You can edit the Task Item that is created.  
  6. Select the desired action like "Off" and then Save.  
  7. You can then go to Step 2 to set which months or days this event should occur.  Set when the event should occur.  
  8. Finally, select under which Mode the event should fire.  Like "All House Modes".
  9. You can optionally setup to receive an email, or a SMS message to your mobile device.

What other automation system provides this simple way to do complicated capability - without having to call the installation Dealer?

Intercom:  You will see the telephone button in the top left.  If you are using myUI Android app, clicking this button opens the Intercom address book to select which device to call and establish a video / audio intercom session.  This will not work on iOS devices until Allonis develops myUI for iOS (on our radar).

Voice Recognition:  On the top right you will see a microphone button.  When used with myUI Android app, this opens a microphone session to the Voice Recognition service.  This will not work on an iOS device today (no myUI app available yet).