C
chucklyons
Guest
File Submitter: chucklyons
File Submitted: 28 Mar 2019
File Category: Premise
Author: chucklyons
Contact: chucklyons
Not Your Mother’s Automation Browser
It seems like I’ve been working on this new version of the MiniBrowser for years. Mainly because I have! Sorry, the ‘Download’ file are just pictures – but I wanted to get some feedback before I upload a version…
Many changes in this version:
User Interface - The UI is comprised of HTML5, CSS3, js, jQuery and vbscript. With the use of jQuery, some extensions, CSS’ “Flex”, and media queries, I was able to do it without the JQM ‘smarts’. (which really caused me some headache!). For the ‘advanced’ version, all of the style data is in a .css file.
Top Level View - The top level view (“Home Page”) is based on “Isotope” (https://isotope.metafizzy.co). Isotope allows objects to be filtered on different attributes. For Premise, I used the primary libraries (Lighting, Keypads, HVAC, Security, Safety, AV, and Appliances). I also included Sensors and Rooms. You will see the library information on the lower left side of the tile; location information is on the lower right side. The Minibrowser classes have been extended to include nearly all of the Premise classes (some AV things still in work; haven’t attacked Sprinklers yet). There is still work to do on cleaning up the ‘panel’ objects, such as security panels, thermostats, etc. I could make the ‘tiles’ the same size, but it takes up a lot of real estate for limited information objects, like sensors. Feedback appreciated!
Images - All .gif and .png images have been replaced using svgs converted to fonts (http://icomoon.io/app) Extremely small, and very fast loading! This version does not use ANY of the original Premise images.
Status Information - From all views, realtime status information is included for each object; MediaZone tiles show ‘NowPlaying’ information, Groups and Volume level. Security objects, Sensors, Refrigerators and Aquariums(!) blink red when in an abnormal” state via CSS keyframes. Thermostat info is also available from the top level. ( Yes, I used the dreaded polling for this). Maybe someone can replace it. I have had a lot of objects active on the top level view and have yet to see any performance hits.
Filtered Views - Filtering on one of the icons, “hides” all of the objects that don’t meet the filtering criteria. Very fast and provides a very fast look at the state of your home from whatever view you would like. You can move from the rooms views to sensor views to lights views, in realtime without any page refresh. (take a look at their website to see it in realtime). It also removes the old navigation requirement of drilling down to view lower level objects.
Drilldown is still available for most objects. However, I have removed drilldown for:
[indent=1.2]Lights – the lights can be turned off/on from the top level object view or from a room view. Currently, this is just on/off functionality; I think I have the javascript for a ‘press and hold’ for dimming working. Dimming will also be from the top level.[/indent]
[indent=1.2]Sensors – Current sensor information is displayed on each sensor’s tile. As sensor data is more informational than interactive, it really didn’t seem necessary to provide drill down.[/indent]
[indent=1.2]I’ll probably include AV objects into the top level view in the future.[/indent]
New functionality:
Scenes - All scenes created/located in the scene folder can be accessed via the toolbar icon. A slide-out panel reveals your current scenes which are activated by selecting the desired ‘button’.
Groups - Group functionality is available from each MediaZone. The implementation is a bit different than the original AB. A slide-out panel is accessed via the toolbar icon. Once the panel is open, you get a view of the Group Status for all MediaZones. To “Add” a MediaZone to your current group, you “Include” them. To “Join” another Group, you select the “Join” ‘button’. From your current MediaZone, you can “Include” another MediaZone into your current Group. You may also “Dissolve” or “Leave” your current Group. Yes, using that dreaded polling, Group Status changes are reflected in the panel.
Music - You can drill down into the your media as in the existing MB and AB approach, or you can select your view via Albums (for Sam, the record company guy!), Artists, or Tracks.( I have work to do on Tracks – it’s simply too slow to be released.). Playing via browser is still available.
Now Playing – The Artist, Album, and Track information is displayed in each MediaZone, as in the previous version. The information is updated as the Content is changed. The Transport ‘buttons’ are all Fonts, no images; The play/pause buttons have been combined.
Time events - For objects without a time property, each has been extended to include a time property. This includes Lights, Appliances, and some Security and Sensor objects. This information is then displayed on each object’s tile.
Well, I think that is about it. Still more work to do, but generally the functionality is all working. I have some UI cleanup to do, redo the panels for thermostats, etc. (not a big deal), clean-up and make my code consistent (both CSS and classes), and I’ll probably put out a couple different colors... Then I’ll put it out for real…In the meantime, I thought I’d show you were I am going – helpful feedback is welcome…
Click here to download this file
