Welcome to the myContent App for use with myServer

myContent allows you to manage your Movie, Music, Recipe, Drinks, Wine, Art, Photos content from a full Windows application for ease of use.  You can install the App on the myServer PC or on a Remote PC for ease of use.

You will find the myContent app in the myInstaller App

Commercial movie DVDs and Blu-rays have copy protections, software like AnyDVD would be required to make backups.  Please note that depending on your local laws, making backup copies of commercial DVDs and Blu-rays may not be allowed.  (AnyDVD has been renamed to RedFox.)

 System Requirements

  • myServer version 5. or later on same or separate PC
  • Microsoft Windows (Vista, 7, 8, 10)
  • PC with persistent Internet connection (optional - to update coverart and lyrics)

Installation

  1. Download and run the App from myInstaller on the primary myServer PC.  You can also install on a workstation PC, but start on the primary myServer PC for simplicity.
  2. Open the myContent by clicking the icon on the desktop
  3. myContent communicates on port 6789 as a server (myServer is the client in this connection). This port is not configurable. Ensure that your PC firewall has this port open for outgoing messages. Your firewall may ask if it's OK to allow communications the first time myContent is started.



Setting up a Movie Library

  1. Within the myContent App, click on the Movie Browser tab.
  2. If you have used a competing movie management system you can Import Movies, here you can optionally bring in a movie library from a competing movie playback system.  Typically you would do this once, and then use Add Movies after the initial import from the 3rd party movie players.  After you have imported, continue to Step 3:
  3. If you are not importing your library from a competing system (most users) Click on Add Movies. Select Scan Network Folders.
  4. Configure your shared network path for where your movies are located like "\\SERVER\Videos"
  5. Click on "Auto Import Selected Media"
  6. Most libraries you should have "Use Folder Name as Movie Title" checked.  This is where your library is setup: "\\SERVER\Videos\Avatar\Avatar.mkv"  The auto import will see the name "Avatar" and will look up the metadata and coverart using this as it's search parameter.
  7. Click on Scan for New Media
  8. Your movies will be brought in and a displayed in the New Media section.  Click the Select All checkbox.  Deselect any movies you don't want to be looked up or added.  Click the down arrow button to start the lookup.  Depending on how many movies you have and your Internet connection, this process can take a while.
  9. Click on Movie Settings to edit your Auto Rip selections.
  10. Select Add Movie.  Here you can have myContent look in a folder for new or deleted movies.  Note that you can also select Auto Import.  This feature will automatically look up the movie by folder name, and automatically import the closest match including coverart and movie meta-data.  You can later review and manually edit or re-import if the Auto function didn't bring in the correct movie.  For most movies, the Auto Import does a great job.


Next Step:  Let's setup myMovies now that you have a database of movies to play!  Click HERE

Setting up Remote Media Players

  1. Select Media tab.
  2. If setting up a Arcsoft TMT as a Remote media player, install Arcsoft TMT on the Remote PC that is running myAVAgent. Note that Arcsoft TMT player is no longer supported by Arcsoft. Recommended is to use Media Player Classic instead.
  3. Optionally click on the Media Player Classic Tab. If setting up Media Player Classic, install that on the myAVAgent PC. You can also install the Media Player Black Edition.
  4. Browse to locate the mpc-hc.exe player.
  5. Open Media Player Classic app and go to "Options / Player / Web interface". Turn on networking on port 13579. You may also allow this port through the firewall of the myAVAgent PC.
  6. Optionally click on the Netflix / Amazon Tab.
  7. If you want to setup Netflix or Amazon movies, you must ensure that Internet Explorer (or Edge) are installed on the myAVAgent PC. Using IE, try playing a movie from Netflix or Amazon to ensure your PC will play a movie by going to their web site directly and logging in.
  8. Optionally click on the PowerDVD Tab.
  9. If setting up PowerDVD Player, install that on the myAVAgent PC.
  10. Browse to locate the PowerDVD player on the PowerDVD tab.
  11. Optionally click on the VLC Tab.
  12. If setting up VLC Player, install that on the myAVAgent PC.
  13. Browse to locate the VLC player on the VLC tab.
  14. myAVAgent is setup to network to VLC on port 6905 via VLC startup options. You may also allow this port through the firewall of the myAVAgent PC.
  15. Optionally click on the Zoom Player Tab.
  16. If setting up Zoom Player, install that on the myAVAgent PC.
  17. Browse to locate the Zoom Player on the Zoom Player tab.
  18. myAVAgent is setup to network to Zoom Player on port 4769 via VLC startup options. Open Zoom Player and enable this port in "Advanced Options / System". You may also allow this port through the firewall of the myAVAgent PC.



myAVAgent enables the ability to automate ripping of a movie on the Remote PC. Allonis LLC does not provide any ripping utilities but does simplify launching and automating the ripping app.

Setting up ISO / Archiving Support

  1. Select ISO / Archiving Support tab.
  2. To have myAVAgent facilitate automatically mount ISO ripped movies for playback, download and install Virtual CloneDrive
  3. .
  4. Browse to locate the VCD on the ISO / Archiving tab.
  5. Select which virtual drive letter is assigned from within VCD.
  6. Set the launch delay. Experiment on how long it takes your Remote PC to launch the VCD app.
  7. To have myAVAgent facilitate automating media archiving, install either AnyDVD HD or DVDFab.
  8. Browse to locate the Archiver to setup the full path.
  9. Select your archiving options
  10. Choose to archive to files (recommended) or to archive to ISO files.
  11. Check myMovie App in myServer and make sure the "Monitor" checkbox is unchecked for all your network folders.
  12. Install the AVDriver in myServer.
  13. Go into myServer's Family Manager and create new AVDriver devices that point to each PC where ripping will be done.
  14. Restart myAVAgent. You can now place a DVD into the optical drive of the Remote PC and it will be ripped to your content folder and be added to the myMovie database.


Next:  For Ultimate / Trial installation, install myMovies.  Click HERE

Checking existing Sessions

  1. Select the Sessions tab.
  2. View which audio apps are currently connected to myAVAgent
  3. You may need to start an audio session by selecting the Remote player from a myServer client for the sessions to populate.



myDesigner is Allonis's application that helps the integrator or the DIY user design their own user interface web pages, without needing to be a web developer. myDesigner connects to the myServer engine and to the myServer SQL 2014 Server back end database.


System Requirements

  • Microsoft Windows 10, 8, Windows 7, Vista with all the current service packs and security updates. (32 or 64 bit versions. 64 bit recommended). Windows 2008 Server or newer is supported. XP cannot be used.  .NET 4.5 must also be installed.
  • modern dual-core processor
  • 2GB main memory. (4GB or more recommended)
  • 100GB free disk space
  • myServer version 5.0.0.1 or later running on same or a second PC that is networked to the myDesigner PC

The ideal PC for using our software is a Core i5 processor with 8GB of memory with a SATA III hard drive running Windows 10 Home or Pro 64 bit. SSD drives are recommended.

Installation

  1. Step 1: Install myServer and ensure it is started.
  2. Step 2: Temporarily disable any anti-virus software. Once these products are installed it will be safe to re-enable your virus software. The installer modifies firewall permissions to allow the components to network properly.
  3. Step 3: Install myInstaller on the PC you want to run myDesigner on, by following the instructions HERE
  4. Step 4: Select myDesigner from myInstaller app and download. Once finished, click the Install button.
  5. Step 5: Check the installed desktop icon. If it has a "shield" graphic on it, you are good to go, if not, Windows 10 and 8 Users must now take one additional step. Right-click on the "I" icon that was created on the desktop to change the properties of the icon. Go to the compatibility section and make sure you check off the box that says "Run this program as an Administrator"
  6. Step 6: The myServer installer will open the appropriate ports on the SQL server to allow a remote PC running myDesigner to connect to it. Here are the details of the firewall configuration: Microsoft SQL connectivity instructions
  7. Step 7: Once myInstaller starts up, it will attempt by default to connect to the myServer installation on the same PC. If you are running myDesigner on a second PC, you need to change the connectivity settings. SQL Server entry: "yourSERVERname\myServerSQL, 1433" File Share: "\\yourSERVERname\myServer\" WebServer URL: "http://yourSERVERname:80/" Modify the port number to be same as what you are running myServer's web server on. Port 80 is the default. Click Save button.
  8. Step 8: Click the SAVE button and Connect. myDesigner should now be running and your list of web apps should be listed on the left side.
  9. Step 9: Follow the myDesigner instructions on how to design user interfaces for myServer. Click HERE. Recommended is to explore the included sample web apps, copy them, and modify until you become proficient to build your own from scratch.

Tips:

Issue a Quick Command from myServer like: webcmd|w1921681109~ShowDimensions this will display on the target device it's screen resolution that can help in the design of the webpages.  Yeah, that 1921681109 is the devices network IP address...

 

To view Fonts:

The Font Awesome icons can be viewed here. The Material Icons can be viewed here. And the legacy icons are here.

 
myUI is Allonis's "App".  It is software installed directly on the phone or tablet device.  Within it, runs a controlled, full screen browser that displays webpages served by myServer.
 
Running myUI app has several advantages over running the myServer HTML user interface in a browser.
  • Runs full screen
  • Enables myServer to monitor and control Android Device hardware (microphone, speaker volume, GPS, etc)
  • Manages Web UI sessions so multiple launches won't create multiple sessions that ultimately hurt performance.

 myUI is essential to enable several myServer features:

  • Voice Recognition
  • Geo Boundry Events
  • Intercom
Download the App from myInstaller.
Install it once downloaded.  This will add the myUI.apk to the myServer PC's desktop (or the PC you launched myInstaller from).
 
 
Sideloading an android App (installing an app that isn't downloaded from Google Play Store):
 
 
  1. You should see myUI.apk on your myServer PC's desktop.
  2. Plug in your Android Tablet into the USB port of myServer PC.  You may have to select "Connect as Media Device" on your tablet for your tablet to show in your Windows file explorer.
  3. On Tablet (or Phone), click "Settings", the "Security", then ensure "Unknown Sources" is checked.
  4. Your Tablet will show itself in myServer PC as a new storage drive (let's call it drive "M") in File Explorer
  5. Drag the myUI.apk file from the desktop to the "Android" folder in Drive M.  (Note if "Drive M" is on the device storage area or on an SD card that may be plugged in)
  6. You can disconnect the tablet from myServer PC's USB port.
  7. On the Tablet, launch "My Files" app.  Look in the "Device Storage" folder.
  8. Find the "Android" file folder.
  9. You will see the myUI.apk file in there.
  10. Click on myUI.apk and open it.
  11. Accept all installation questions (security, do you want to install, etc).
 
You should now see the myUI application on the tablet.  Let's configure the App:
 
  1. Ensure your Tablet is on the WiFi network that has connectivity to the myServer PC.
  2. Launch the myUI App on the Tablet.
  3. On launch, the app should say "GET STARTED".  Click it.
  4. Then click "DISCOVERY"
  5. Wait up to a minute for the myServer PC path to appear.  Under that, click on the Application link.
  6. You should see multiple HTML App names.  These come from /myserver/HTML folder.
  7. Select the App name that is closest to the tablet device ("myUI.Tablets 1024x768 App" as example)
  8. Click "NEXT"
  9. You can change the clientname here.  (Note, this should match your settings for "Web Client" in myAgent radio settings if you have already set this up - optional).  Client names MUST start with a letter. You may use any combination of the letters A..Z and numbers 0.9 to define the client name. You CANNOT include spaces or punctuation marks!
  10. Default is to enable Voice Recognition (requires optional license on myServer) and Enable Geo Location (optional on myServer)
  11. Click "Save and Launch App"
  12. Discovery is responsible for finding the server and defining what app gets associated with the device. Once those settings have been configured then the next time the app is launched the app uses those settings to grab the app and run it. The app then launches in a 4 step process.
    1. Grabs the styles.css from the apps css folder,
    2. Grabs the scripts.js from the apps js folder
    3. Grabs the custom.js from the apps js folder and if all that was successful
    4. Load the index.html file from the apps root folder. all this comes from the local myServer.
  13. You should now see the chosen HTML app running full screen on the Android device.  You may need to provide your login name and password if myServer is setup for signon.
  14. Your Android device should ask permission for the App to use your location.  Approve this and the Android panel should disappear. If you reset config of the app (see below) or upgrade the App, you will need to approve again.
  15. You may notice an Android bar at the top of the screen.  Slide it down, process the request (security or other) and slide it back up.  The myUI app should now be full screen.
  16. To Reconfigure the app, when on the myServer network: Click on the Menu and then click on "Allonis".   At the bottom right, click on "Reset Config".  The app will relaunch and initiate Discovery again.  If you are NOT on the myServer network, then Clear all Data from the myUI.apk app (Settings / Applications / Application Manager / myUI / Storage / Clear Data), and relaunch it (note, the above instructions are for Android 6.0.1 OS.  If your OS is different, you will need to find your devices location for these functions).

NOTE:  Discovery will only work if your myServer network DNS name is set with the server's IP address.  This will be addressed in a myServer update coming soon.

myServer regularily sends a UDP broadcast out on port 1900.  myUI, when on same network hears that request.  This provides the information for myUI to request from myServer the full connection and list of web apps that exist via a TCP request to myServer.  Your network must be configured to allow these communications for Discovery to work.  If UDP is not enabled on the network, you must do a manual configuration to have myUI "find" myServer to complete the rest of installation configuration.

 

The new client commands (as of 8/21/2017) are:

DimScreen|0..100 or WebCmd|{{clientname}}~DimScreen|0 to 100

ScreenSaver|On,Off or WebCmd|{{clientname}}~ScreenSaver|On or Off

Locking the app in Landscape or Portrait is done during the configuration of the App.

 

Developer USB Debugging - how to turn on (Android OS only)

Navigate to Settings > About Phone > scroll to the bottom > tap Build number seven (7) times. You'll get a short pop-up in the lower area of your display saying that you're now a developer. 2. Go back and now access the Developer options menu, check 'USB debugging' and click OK on the prompt.

Plug your Android device into your myServer PC's USB connection.  You might get a prompt on both the PC and on the Android device.  You want to allow USB Debugging.

Here is more info and pics: https://www.howtogeek.com/129728/how-to-access-the-developer-options-menu-and-enable-usb-debugging-on-android-4.2/

About

Allonis myDesigner

myDesigner allows you to build Web Applications that will run full screen on any supported device. You get all the benefits of a "native" application with the added ability of a rich design environment.

Used in conjunction with myServer, the Allonis myDesigner is used to create stunning automation interfaces on any desktop browser, Android or Apple tablet and phone. All modern mobile devices are supported. This myDesigner supports the following features:

  • Design scenes for any modern Android table and phone
  • Design scenes for all Apple iOS devices
  • Simple Drag and Drop scene builder
  • Live preview while designing
  • Context sensitive object editing. Only see the properties that apply to the object being edited
  • Manage multiple projects across multiple devices

System Requirements

  • Microsoft Windows PC. (32 or 64 bit versions.)
  • modern dual-core processor
  • 2GB main memory. (4GB or more recommended)
  • 1GB free disk space
  • myServer version 4.x
  • Suitable target device for testing
  • myServer Network settings with correct IP Address and User Web Server Enabled.

Please make sure to check the settings on your myServer and make sure that you have set the DNS name to the IP Address of your myServer PC. Also make sure you have the User Web server enabled. See the following image.

myServer Connectivity 

Installation

  • Step 1: Make sure you are logged into the PC as a member of the local "Administrators" group
  • Step 2: Turn OFF User Access Control (UAC)
  • Step 3: Download the Allonis myDesigner from the Allonis myInstaller application
  • Step 4: Install the myDesigner
  • Step 5: Optionally, install the sample background images collection from the Allonis myInstaller.  These will be in the "myUI.Phones.Samples" and "myUI.Tablets.Samples" downloadable example apps.

Server Connections

myDesigner Connectivity

Every time you launch the myDesigner it will automatically connect itself to the local myServer instance. If you are running the myDesigner from the myServer PC it should automatically connect. If you are running from a remote PC then you will be presented with the connection settings dialog. There are 3 critical bits of information the myDesigner needs to function properly.

  • The location of the myServer SQL Server. Make sure to follow the example naming conventions when entering this path. You always want to use the name of your myServer PC followed by the string \AllonisSQL. If your myServer PC was named SERVER then your SQL Server entry would look like SERVER\myServerSQL, 1433.  The 1433 is the port that SQL Server is normally on.  Note: SQL Server must not be configured as "dynamic port".  Must be "Static port" on 1433.  This is not normally an issue unless it was modified post SQL Server installation.  Port 1433 must be open on all antivirus and firewalls between the myDesigner PC and the myServer PC.
  • The location of the myServer file share. During the install of myServer a file share is automatically created called V4myServer. It resolves to the physical path where myServer is installed. Either C:\Program Files\Allonis\myServer for 32 bit systems or C:\Program Files (x86)\Allonis\myServer for 64 bit systems. As in the above example you want to follow the onscreen sample. For a PC called HomeControl the path would look like \\SERVER\myServer\. If you manually created your own file share make sure this path resolves to the root of the myServer folder. All web pages are based off the HTML folder inside the myServer folder.
  • The base URL for the myServer web server. This is the most important setting. The myDesigner needs to know how to build the URL for your test pages. You construct this entry just like any URL in a web browser. For the HomeControl PC the entry would look like http://SERVER:6245/. If you modified your myServer user web server to use a port other than the default port 6245 then you need to make sure that you specify that port here. So, if you myServer user web server port was changed to 82 then you would enter http://SERVER:82/

You can check these settings at any time by clicking on the Settings button from the main application menu bar. 

 

The web apps are, by design, not user scalable. They are designed to automatically scale to fit the screen of the device they are running on. If the scaled scenes are too small then you would have to redo them to fit the scaling that is appropriate for the phone.

Special Fonts

The myDesigner includes several special web fonts that are useful for control icons and other special characters.

If you want to inject an icon into a label you can insert code that looks like

Code: Select all

<i class='fa icon-material-touch-app'></i>

substituting icon-material-touch-app with the name of the icon you want to inject. For button objects just pick the icon from the dropdown.

You can install the latest Material fonts into the project\css\fonts folder. Then you'll have to edit the font-icons.css file adding in the new icons that are missing.

The following images depict the keyboard mappings for the fonts.

Pictos Font

Designer Pictos


Transports Font

Designer Transports


Font Awesome

FA Icons

Creating A New Project

To get started the first thing you want to do is create a new project. Click on the "New Project" button from the main menu. You will be presented with the Project Name and Properties dialogs. Fill out the forms with the appropriate settings for your application. 

Designer NewProjectName

Enter the name of the folder where you want your new project to live. This will become a sub-folder of the HTML folder on your myServer PC. When you click the OK button there will be a slight pause as the myDesigner copies the files from the sample project into the new project folder.

myDesigner ProjectProperties

  • Project Name: A distinctive name for your project
  • Description: (Optional) Text that helps describe this project
  • Target Device: Select the device that you will be designing for. This will define the base geometry, width and height) for the scenes you will be designing. If your device is not in the list please let us know and simply select the "Custom" option and then manually enter the height and width of your device in pixels.
  • Default Background Color: This is the background color that all your scenes will start with.
  • Background Image: If you would rather have a colorful background image as your default then click on the ... button and browse for the image you would like to use. Or simply drag and drop your image onto the image placeholder on the dialog.

Press Save to create your new project.

A new folder will have been created on the server with the name you specified. It will also be contain several sub-folders called css, images and javascript. Do not rename these folders and also do not delete or rename any of the files in the css and javascript sub-folders unless they are ones that you created. The myDesigner requires these folders and core files.

 

 myDesigner Home

Creating A New Scene

Now you are ready to start creating scenes. Highlight the active project on the Project Files tree view and click on the "New Scene" button of main menu bar. Enter the name of your new scene file (All scene files must have the extension .html or .htm!). You'll be presented with the new blank canvas.

You are now ready to start adding objects to the scene. Click on the "Insertable Objects" button on the main menu bar to expose the objects collection.

myDesigner SceneProperties 

Scene Properties

Once the scene is open you can click on the scene properties button on the scene toolbar to display the scene properties dialog. From this dialog you can specify a new background color or image for the scene that overrides the default values. You can also define up to 5 additional overlay scenes to be included with this scene. Overlays are useful when you want to implement popup objects and other advanced scene designs.

This is where you can specify any myServer commands that should be executed when the scene loads.

myDesigner SceneProperties 

Scene Objects

Designing scenes all revolves around dragging and dropping objects from the collection of insertable objects onto the scene being edited. Once an object is on the scene it is just a matter of right-clicking on it to define the object parameters. The collection of objects will continually be enhanced as the product evolves. The initial release will provides these eight objects for building the scenes.

Designer Inserts 

Adding and Editing Objects

To add an object to the scene it is as simple as dragging the image of the object you want to add from the collection of insertable objects onto the scene. The object will be added to the scene close to where the mouse pointer was when you released the button. Once an object is on the scene you can click and drag it anywhere you like. A single click on the object will highlight it and make it eligible for editing. You can click on multiple objects to select a group and then you can use the cursor keys to fine tune their positions on the scene.

To edit the properties of an object make sure you only have one object highlighted and then right-click on the object and select the "Object Properties" option from the context menu. Every object has its own unique properties associated with it. They will be described in the following sections. 

The Panel Object

A Panel object is meant to be used as a background element on your scenes. You have full control over color and alpha (opacity) along with styling options like size, position and corner radii.

Designer Panel 

The Text Object

Text objects are meant to be used as labels or multi-line blocks of text. You have full control over the look and feel of the text displayed. Feel free to embed server variables on the text line. Add the server variables using the standard {{variable_name}} convention.

Designer Text 

The Image Object

Image objects are used to display the images created via myServer or your own custom images. Drag new images onto the placeholder on the properties dialog or browse for them. If the image is generated by myServer set the path to the image using the appropriate server variable names.

Designer Image 

The Button Object

The Button will be the object you use the most. You have complete control over styling and label formatting. Additionally you can specify the local or myServer command to be executed when the button is pressed. The Button object also supports an additional "State" variable that can be used to control the look of the button based on the value of the state variable.

Designer Button 

The Vertical Slider Object

Vertical Sliders are useful for controlling volume and dimming lights. The can be used anywhere incremental control of a device is required. Full control over styling is provided. You only need to specify the name of the server variable that tracks the range (0..100) and the myServer command to be executed when the volume slider is released.

Designer VertSlider 

The Progress Bar Object

Progress bars track progress or simply can be used to track the level of a light. You make the choice. Style the bar to your liking.

Designer ProgBar 

The Toggle Switch Object

Toggle buttons make great switches for turning lights off and on. You get to specify the label text and the server commands to be executed in the off and on state.

Designer Toggle 

The Gauge Object

The Gauge offers a different way to track and display the value of a server variable. Create you own gauge dials and needles or use the ones provided. Style the labels and the set the server variable to track. Setting Auto Range will allow the Gauge to automatically adjust the min and max values should the value exceed the defines min and max.

Designer Gauge 

Guidlines

1) Never look or be concerned with what lives in the \SampleProject folder that gets installed with the myDesigner software. That's for the myDesigner to use and nothing (no one) else.

2) All active projects MUST live in the myServer\HTML folder. No exceptions.

3) To make HTML happy project folder names will have all spaces removed from them when the project is created.

4) Same goes for scene files.

5) To get started on a new project install the appropriate sample project from the available sample apps via myInstaller. Currently they will create \HTML\myUI.Phones.samples and myUI.Tablets.samples folders.

6) Once you have installed the base project immediately copy the entire folder to a new folder (like HTML\Samples). In the HTML directory, rename the sample to be HTML\myUI.Phones and myUI.Tablets.  This will. This will become to primary working project folder.  If you download Allonis's updates, they will install next to your working folder so your customizations won't be lost.

7) You should next verify that you can access http://<your myServer ip address>/<your new project folder>/index.html from all the devices that you will be using.

8) If the Index.html page does not load or does not refresh then stop right there because there is something wrong that needs to be fixed. Most likely cause is that the myServer setting for DNS name has not been set to the IP address of the PC.

9) If you've got this far then it is time to look at the scenes in myDesigner. Make sure myDesigner sees your new project and the sample project in the project tree on the left side of the window.

10) Try editing the index.html file. (Note: that there is a 2 second delay when opening a scene and being able to edit the scene. This is done to allow the page to get fully loaded in the embedded browser. If you click too soon the page will still be "live" and it will execute the command associated with the button you pressed)

11) At this point in time you should be good to go with doing your own designs.


>>> how do you lock down a scene once complete to prevent accidental editing?

The only place a scene can be edited is inside the myDesigner itself. Opening the scene in any browser outside of the myDesigner will never allow editing. If you ever see this happen I really need to know about it.


>>> I am as well confused on your directory structure and the updated samples.

Every project will create the following folder structure CODE: SELECT ALL --\MyProjectName-.

  |--\CSS        <<<< Folder for css styles (Styles.css is the important file here)
  |--\Images     <<<< Folder for all the images used in the project
  |--\JavaScript <<<< Folder for the JavaScript support files (Scripts.js is the important file here)
  |--Index.html  <<<< Home starting page. Every project starts here on this page.
  '--ml.project  <<<< This file is used by the myDesigner to know about the target device


>>>> After an update, do you then need to copy the sample back into a project? Yes and No. When a new release of the sample projects are released they will contain 1) bug fixes or enhancements to the existing scenes and 2) new scenes supporting additional modules. You should install the updated sample and open it in a browser (Get used to using Google Chrome as your default browser. Internet Explorer does not work and we will never add support for it.) and review the update. If there is something new in the sample project that you can use then you should copy the HTML files from the sample into your working project. Knowing what files to copy is easy as all the files will all start with the name of the module. So copy Movies*.html, Music*.html, SatRadio*.html, etc. from the sample folders into the new. Then to be safe copy the CSS, Images and Javascript folders from the sample into your project. Overwriting the existing files.

You will also find a button on the myDesigner main menu bar labeled "Refresh Support Files". Pressing this button will copy the latest versions of the styles and scripts into your projects CSS, Images and JavaScript folder. So it accomplishes the same feat it just doesn't touch any of the html files.

 

Advanced:

How to make an Overlay appear

First make sure the overlays that are in play are getting loaded when the scene loads. Look at the overlays tab in the scene properties. Then you can use the local client commands Show|overlayname, Hide|overlayname and Toggle|overlayname. Where overlay name is the CaSe Sensitive name of the overlay minus the .html bits.

If you need to manipulate the overlays from a server command then the commands look like

WebCmd|{{clientname}}~Show|overlayname
WebCmd|{{clientname}}~Hide|overlayname
WebCmd|{{clientname}}~Toggle|overlayname

 

Back Button:

WebCmd|{{clientname}}~BackScene

Launching Chrome full screen and with size parameters:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk --incognito "1028,786" --app="http://192.168.1.210/myui.tablets/index.html"

You can also use:   --window-position=x,y 

Determine your devices actual resolution:

The app will try to make everything fit given the defined target aspect ratio. Check the TARGET_WIDTH and TARGET_HEIGHT values that have been defined for the app in the Custom.js file. Then should match the actual pixels available on the device.

To find out the real number of pixels available on the device use the client command

WebCmd|{{clientname}}~ShowDimensions.

Where {{clientname}} is the client name of the Kindle being tested. You'll see an Alert box pop up on the device showing the active width and height dimensions in pixels. Are they really 1280x800 and 1024x600? 

Once you know the real numbers then you can tackle the aspect ratio issue. For example, the smaller Kindle has an aspect ratio of 1.7 while the larger one has an aspect ratio of 1.6. App scaling will only work well when all devices share the same aspect ratio. To get the app to scale correctly on both devices you would have to design the app on the smaller Kindle using either 1024x640 or 960x600 as the Target Width and Target Height. 

Dynamically updating images

To update images by specifying the file names by having a myServer variable called {{myimage}} with a value of someimage.png. For the image object, If you specifiy the filename as images/{{myimage}}, this will not refresh the screen if {{myimage}} changed value.

However, if you have {{myimage}} have a value of images/someimage.png, and for the image object you specify the filename as {{myimage}}, then a screen refresh will occur when {{myimage}} changes.

(thanx Roman for providing this tip on the forum)

Clientname Addressing

The client device names do default to the devices IP address prefixed with a w. like w1921681145. You can define custom client names as well (recommended). You can find example code on the "About page" in the sample HTML UIs provided.  Clientnames must be unique, and start with a letter.  The name must be lowercase and not contain any punctuation or spaces.

 

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).

More Articles ...