Install Instructions:
This UI will work with locks, switches, dimmers, and virtual devices, and most thermostats.
Minimum version of HS version 3.0.0.190 required.
***Please read the Install Instructions.txt document included in the .zip file***
To install, create a folder (call it hsmetro for example) inside HomeSeer/html and extract the contents of the zip file.
Navigate to components/home-page and edit the HTML to include as many devices as you want. You can use the HTML that is in place as a reference. You'll need to grab the RefID from within HomeSeer of each device you're adding. Valid devices are:
<hsdevice>
<clock>
<weather>
<hststatusdevice>
<hstextstatusdevice>
<hsthermostat>
<staticimage>
<webpage>
<refresh>
<hsevent>
<hsnavidevice>
To add a new device from homeseer to a room page, just copy and paste one of the hsdevices and update the "ref" parameter.
Some examples are as follows:
For the <staticimage> widget the imageName param should be the name of the image you want to display relative to the HomeSeer HTML folder
REQUIRED--Edit "require.config.js" in the /app folder and set your HomeSeer URL, proxyIP and proxyPort values. Also, this is where you enable/disable visible tabs on the nav bar.
If you install the proxy on your HomeSeer Server, the proxyIP will be the same as the IP for the url parameter. The port value you specify here must match the port value you set when, or if, you configure the proxy as a windows service. If configuring your proxy to run as a service and have issues getting it to run, change the user from "Local Service" to your local admin user and that should take care of any problems you may be experiencing.
If you've added a new page and/or tile and are having issues with it appearing or correctly displaying data, try clearing your browser cache. There are numerous posts in this thread that indicate a cache clear has corrected most problems experienced after correctly modifying any HSMetro files.
****If updating, DO NOT overwrite your pages directory or you will have to re-add all your devices*****.
The Nav Bar has 19 predefined rooms. You can enable/disable rooms in require.config.js by setting the room to either true or false. Each room has a corresponding folder in the "pages" subfolder. For every room type you will be using, edit the corresponding html file. This file must begin with the following:
. Then simply create your sections and add devices, similar to how home.html is set up.
If you don't like the way the room name appears on the nav bar, edit the nav-bar.html file in the components folder and change only the text that appears between ">" and "<". For example,
you would ONLY change "Master Bedroom" to your desired text. DO NOT edit "#master_br"! DO NOT rename files or folders in the pages subfolder.
Once you've added devices to your various html files, point your browser to your hometroller IP address/<folder you created>/index.html
Here's a photo of what the UI looks like :
**Ver 2.9.1-2
--fixed incorrect library paths
**Ver 2.9.1-1
--Refactored code in require.config.js, router.js, startup.js, and nav-bar.js. Nav bar tab generation is now dynamic based on whether you specify "true" to display a tab or "false" to hide it in require.config.js.
--Changed page references to a numeric scheme to avoid confusion for people who are organizing by rooms. URLs will now show numeric values when you hover over a tab label.
--Included instructions in require.config.js for adding a brand new custom page.
--Fixed bug where refresh icon was not visible on the refresh tile widget
**Ver 2.8.3.-8
--Fixed <staticimage> widget to allow for external images. Just specify the url to whatever image you want to display in the "imagePath" parameter.
**Ver 2.8.3-7
--Fixed issue that would cause some widgets not to refresh due to improper comparison of whole number instead of using decimal
--Resized <staticimage> widget to be significantly larger
--Minor tweaks to the .css file to improve spacing between the nav bar and the tiles.
**Ver 2.8.3-5
--CSS updates to improve layout on mobile devices and smaller tablet screens
--Minor thermostat fix for heat/radiator controllers.
**Ver 2.8.3-2
--There has been a slight modification to all .js files in the pages subfolders to prepare for future features. Please be sure to use the included .js files in this build.
--Normalized location text to be uppercase in all widgets (affects .html files in the components folder)
--Removed the need to modify nav-bar.html. You now can enable/disable tabs AND relabel them in require.config.js (require.config.js, nav-bar.html and nav-bar.js files all affected)
--Added location1 back to thermostat. You can hide it by adding the following param to your widget: locationIsVisible: false
**Ver 2.8.2-5
--Fixed Nav Bar sizing issue that caused it to overlap the group labels
--Added new <hsnavidevice> widget. Same functionality as an <hsdevice> widget, but the same size as a thermostat tile with forward and backward navigation features for devices with a lot of states.
--Minor UI refinements.
**Ver 2.7.3-8
--New Nav Bar!!! Enable the rooms you need in require.config.js. If you don't like the room names, simply rename in nav-bar.html but do not make any changes to the actual HTML code.
--All pages are now in the "pages" subfolder. The home-page folder has also been moved from "components" to "pages"
--Fixes for non-mode thermostats and Hue lightbulbs
--Tiles now gradually transition between colors.
**Ver 2.5.1-3
--Continued UI enhancements. Thermostats now are wide rectangular, use color to reflect mode, and will glow a slightly brighter shade when active.
--<webpage> widget now has a "delay" parameter that you can use to set your own value for how long it takes between a click or touch until the selected webpage loads.
**Ver 2.1.1-6
--<hsdevice> will now change it's color to orange if the garage door is open
**Ver 2.1.1-5
--Removed legacy reference to old MetroJs.css file
--Fixed improper case reference for weather library
**Ver 2.1.1-4
All New Layout!!! You can now create groups of tiles! Please look at the included home.html file for examples on how to achieve this. You will need to update your home.html file so that it works with this new version.
--Added "timeout" parameter to <hsevent> widget. If you specify a timeout value, the tile will display a spinner icon become disabled for the specified amount of time. Timeout value must be set in milliseconds. Useful for executing events that take time to complete, ie. turning on a TV activity.
**Ver 1.9.4-5
--Added missing library that would cause UI to stop working
**Ver 1.9.4-4
--New <hstextstatusdevice> widget emphasizes the text value as large and centered on the tile--useful for temperature, luminance, or anything else that you prefer to view numerical or text info as the primary source of info
--Removed the need to specify icons in your home.html file. HSMetro now uses the associated status images from HS.
--Multiple enhancements to the <hsthermostat> widget. Tile will now turn blue when your system is cooling and turn orange when your system is heating.
**ver 1.7.2-4
Fixes icons so that the new contemporary HS3 icons fit appropriately
Files affected: hsdevice.html, hsevent.html, hsstatusdevice.html
**Ver 1.7.2-3
Fixed issue with hsevent tile preventing it from loading
**Ver 1.7.2-2
Massive rewrites. Nearly all files have been affected. Please backup your home.html, install this package and then replace home.html with your backup.
--Thermostats will broadcast an hourglass icon to all instances of the UI that you have running when a command is issued to change mode or setpoint. This functionality was primarily introduced for systems that are not always listening and that queue commands. Once the thermostat "wakes up" and processes it's pending queue, the hourglass will go away.
--Thermostat will display battery status if available
--Thermostat will display valve status if available
--hsstatusdevice now listens for proxy broadcast. If refresh interval is specified, it will refresh at set interval, but also listen for proxy broadcasts.
**Ver 1.0.7-1
Files affected: hsthermostat.js, require.config.js, startup.js, hsstatusdevice.js
New files: hsevent.js, hsevent.html, hseventcontroller.js
--Thermostats now listen for proxy broadcasts. The refresh parameter is no longer used.
--Added "pending" icon for thermostats to indicate setpoint adjustment has not yet been processed by system
--Added <hsevent> widget. See example in "home.html" for usage. Valid parameters are: color, group, event, width, and icon.
--Some code optimization
**Ver 1.0.6-3
Files affected: hsthermostat.js
--Fixed issue which prevented Celsius based thermostats from being able to increase/decrease setpoint.
**Ver 1.0.6-2
Files affected: hsthermostat.js
--Fixed issue which prevented being able to decrease Celsius thermostat setpoints
--Fixed issue which caused F/C to disappear after setting thermostat setpoint
**Ver 1.0.6-1
--Added "unit" param to <weather> widget which accepts "F" or "C" for displaying weather in fahrenheit or celsius.
--Fixed issue with clock that prevented the date from automatically updating
--Fixed issue with thermostat widget which prevented some thermostats from being able to raise/lower setpoint. You can now raiser/lower setpoint and the widget will send single command to HS three seconds after you finish interacting with the widget, setting the thermostat to the specified temp. Previously, the widget would try to issue a command for every increase/decrease in setpoint value.
**Ver 1.0.5-4
--Removed "Loading" message that was appearing on some screens
**Ver 1.0.5-3
--Fixed refresh issue for <staticimage> widget
--Fixed issue where setting height and width parameters in <staticimage> widget had no effect.
**Ver 1.0.5-1
--Added <webpage> widget. This widget lets you configure a collection of webpages that you can navigate to from within the UI. Tap to cycle through the collection. After 3 seconds, the selected page will load. Look in home.html for example on how to use it. Use your browser back button to return to HSMetro.
--Fixed refresh issue in <staticimage> widget. Set the refresh rate (in milliseconds) to correspond to the refresh rate of the image you're loading.
**Ver 1.0.4-9
--Removed the need to specify URL, Proxy IP and Port for every device. Edit require.config.js in the /app folder to add those values
--Added <staticimage> widget. You can use this widget to display images from any folder within your HS html folder. Good for IP Cams and any other dynamically created image that you want to display.
--Added the ability to specify custom refresh values for <weather><hsstatusdevice> and <staticimage>widgets. Use param "refresh: 30000". Value is in miliseconds.
--Removed the "?" icon as the default icon. If the tile can't match a status it will not display any icon.
**Ver 1.0.3.2
--Addresses issues with thermostat device
**Ver 1.0.3.1
--Fixed issue with package.json file which was preventing "node install" from working correctly
**Ver 1.0.3
--Weather: you can now use "location" instead of "zipcode" as a valid parameter and specify Orlando, FL, or London, England or any other valid location
--New Widgets: <hsstatusdevice> and <hsthermostat>.
*The <hsstatusdevice> widget is non-interactive. Use it for devices that you only need info about like motion or door sensors.
*The <hsthermostat> widget takes the root refID value. It figures out all it's children and then builds it's functionality per the HomeSeer API for thermostats
--Toggle Switches have been reduced in width to make room for more devices
--Added "location1" to widgets
--Dimmer switches now toggle in the following order: Off-->On Last Level-->On-->Dim
--Weather has an auto-refresh of 1 hour. You can change the refresh rate by editing the annotated line in the weather.js file
--<hsstatusdevice> has an auto-refresh of 5 minutes. You can change the refresh rate by editing the annotated line in the hsstatusdevice.js file
--Numerous other fixes and enhancements
**Ver 1.0.2 (tested on HS 3.0.0.153)
-Fixed Dim Values displaying 0 when light is on
-Fixed Issue where tile might not change back to correct color when in default state
-Added support for ASCII Interface--Real-Time updates from HomeSeer to the tiles!!!
**Ver 1.0.0.1
Fixed--Dim now shows the correct dim value as you ramp up/down your dimmable device.
HSMetro 2.9.1-2.zip
jquery.simpleWeather.min.txt
This UI will work with locks, switches, dimmers, and virtual devices, and most thermostats.
Minimum version of HS version 3.0.0.190 required.
***Please read the Install Instructions.txt document included in the .zip file***
To install, create a folder (call it hsmetro for example) inside HomeSeer/html and extract the contents of the zip file.
Navigate to components/home-page and edit the HTML to include as many devices as you want. You can use the HTML that is in place as a reference. You'll need to grab the RefID from within HomeSeer of each device you're adding. Valid devices are:
<hsdevice>
<clock>
<weather>
<hststatusdevice>
<hstextstatusdevice>
<hsthermostat>
<staticimage>
<webpage>
<refresh>
<hsevent>
<hsnavidevice>
To add a new device from homeseer to a room page, just copy and paste one of the hsdevices and update the "ref" parameter.
Some examples are as follows:
Code:
<hsdevice id="stair_light" params="ref: 220, color: 'bg-steel'"></hsdevice>
Code:
<webpage params="sites: [{ site: 'Google', url: 'www.google.com'}, {site: 'Yahoo', url: 'www.yahoo.com'}]"></webpage>
Code:
<staticimage id="camera2" params="imageName: '/netcam/CurrentImage.jpg', refresh: 10000"></staticimage>
Code:
<hsevent id="lights off" params="group: 'Auto Lights Off', event: 'All Off', timeout: 5000, color: 'bg-gray', icon: '/images/HomeSeer/status/on.gif'"></hsevent>
Code:
<hstextstatusdevice id="sensorTemp" params="ref: 477, color: 'bg-gray'"></hstextstatusdevice>
REQUIRED--Edit "require.config.js" in the /app folder and set your HomeSeer URL, proxyIP and proxyPort values. Also, this is where you enable/disable visible tabs on the nav bar.
If you install the proxy on your HomeSeer Server, the proxyIP will be the same as the IP for the url parameter. The port value you specify here must match the port value you set when, or if, you configure the proxy as a windows service. If configuring your proxy to run as a service and have issues getting it to run, change the user from "Local Service" to your local admin user and that should take care of any problems you may be experiencing.
If you've added a new page and/or tile and are having issues with it appearing or correctly displaying data, try clearing your browser cache. There are numerous posts in this thread that indicate a cache clear has corrected most problems experienced after correctly modifying any HSMetro files.
****If updating, DO NOT overwrite your pages directory or you will have to re-add all your devices*****.
The Nav Bar has 19 predefined rooms. You can enable/disable rooms in require.config.js by setting the room to either true or false. Each room has a corresponding folder in the "pages" subfolder. For every room type you will be using, edit the corresponding html file. This file must begin with the following:
Code:
<div class="tile-area tile-area-scheme-dark fg-white">
If you don't like the way the room name appears on the nav bar, edit the nav-bar.html file in the components folder and change only the text that appears between ">" and "<". For example,
Code:
<a href="#master_br">Master Bedroom</a>
Once you've added devices to your various html files, point your browser to your hometroller IP address/<folder you created>/index.html
Here's a photo of what the UI looks like :
**Ver 2.9.1-2
--fixed incorrect library paths
**Ver 2.9.1-1
--Refactored code in require.config.js, router.js, startup.js, and nav-bar.js. Nav bar tab generation is now dynamic based on whether you specify "true" to display a tab or "false" to hide it in require.config.js.
--Changed page references to a numeric scheme to avoid confusion for people who are organizing by rooms. URLs will now show numeric values when you hover over a tab label.
--Included instructions in require.config.js for adding a brand new custom page.
--Fixed bug where refresh icon was not visible on the refresh tile widget
**Ver 2.8.3.-8
--Fixed <staticimage> widget to allow for external images. Just specify the url to whatever image you want to display in the "imagePath" parameter.
**Ver 2.8.3-7
--Fixed issue that would cause some widgets not to refresh due to improper comparison of whole number instead of using decimal
--Resized <staticimage> widget to be significantly larger
--Minor tweaks to the .css file to improve spacing between the nav bar and the tiles.
**Ver 2.8.3-5
--CSS updates to improve layout on mobile devices and smaller tablet screens
--Minor thermostat fix for heat/radiator controllers.
**Ver 2.8.3-2
--There has been a slight modification to all .js files in the pages subfolders to prepare for future features. Please be sure to use the included .js files in this build.
--Normalized location text to be uppercase in all widgets (affects .html files in the components folder)
--Removed the need to modify nav-bar.html. You now can enable/disable tabs AND relabel them in require.config.js (require.config.js, nav-bar.html and nav-bar.js files all affected)
--Added location1 back to thermostat. You can hide it by adding the following param to your widget: locationIsVisible: false
**Ver 2.8.2-5
--Fixed Nav Bar sizing issue that caused it to overlap the group labels
--Added new <hsnavidevice> widget. Same functionality as an <hsdevice> widget, but the same size as a thermostat tile with forward and backward navigation features for devices with a lot of states.
--Minor UI refinements.
**Ver 2.7.3-8
--New Nav Bar!!! Enable the rooms you need in require.config.js. If you don't like the room names, simply rename in nav-bar.html but do not make any changes to the actual HTML code.
--All pages are now in the "pages" subfolder. The home-page folder has also been moved from "components" to "pages"
--Fixes for non-mode thermostats and Hue lightbulbs
--Tiles now gradually transition between colors.
**Ver 2.5.1-3
--Continued UI enhancements. Thermostats now are wide rectangular, use color to reflect mode, and will glow a slightly brighter shade when active.
--<webpage> widget now has a "delay" parameter that you can use to set your own value for how long it takes between a click or touch until the selected webpage loads.
**Ver 2.1.1-6
--<hsdevice> will now change it's color to orange if the garage door is open
**Ver 2.1.1-5
--Removed legacy reference to old MetroJs.css file
--Fixed improper case reference for weather library
**Ver 2.1.1-4
All New Layout!!! You can now create groups of tiles! Please look at the included home.html file for examples on how to achieve this. You will need to update your home.html file so that it works with this new version.
--Added "timeout" parameter to <hsevent> widget. If you specify a timeout value, the tile will display a spinner icon become disabled for the specified amount of time. Timeout value must be set in milliseconds. Useful for executing events that take time to complete, ie. turning on a TV activity.
**Ver 1.9.4-5
--Added missing library that would cause UI to stop working
**Ver 1.9.4-4
--New <hstextstatusdevice> widget emphasizes the text value as large and centered on the tile--useful for temperature, luminance, or anything else that you prefer to view numerical or text info as the primary source of info
--Removed the need to specify icons in your home.html file. HSMetro now uses the associated status images from HS.
--Multiple enhancements to the <hsthermostat> widget. Tile will now turn blue when your system is cooling and turn orange when your system is heating.
**ver 1.7.2-4
Fixes icons so that the new contemporary HS3 icons fit appropriately
Files affected: hsdevice.html, hsevent.html, hsstatusdevice.html
**Ver 1.7.2-3
Fixed issue with hsevent tile preventing it from loading
**Ver 1.7.2-2
Massive rewrites. Nearly all files have been affected. Please backup your home.html, install this package and then replace home.html with your backup.
--Thermostats will broadcast an hourglass icon to all instances of the UI that you have running when a command is issued to change mode or setpoint. This functionality was primarily introduced for systems that are not always listening and that queue commands. Once the thermostat "wakes up" and processes it's pending queue, the hourglass will go away.
--Thermostat will display battery status if available
--Thermostat will display valve status if available
--hsstatusdevice now listens for proxy broadcast. If refresh interval is specified, it will refresh at set interval, but also listen for proxy broadcasts.
**Ver 1.0.7-1
Files affected: hsthermostat.js, require.config.js, startup.js, hsstatusdevice.js
New files: hsevent.js, hsevent.html, hseventcontroller.js
--Thermostats now listen for proxy broadcasts. The refresh parameter is no longer used.
--Added "pending" icon for thermostats to indicate setpoint adjustment has not yet been processed by system
--Added <hsevent> widget. See example in "home.html" for usage. Valid parameters are: color, group, event, width, and icon.
--Some code optimization
**Ver 1.0.6-3
Files affected: hsthermostat.js
--Fixed issue which prevented Celsius based thermostats from being able to increase/decrease setpoint.
**Ver 1.0.6-2
Files affected: hsthermostat.js
--Fixed issue which prevented being able to decrease Celsius thermostat setpoints
--Fixed issue which caused F/C to disappear after setting thermostat setpoint
**Ver 1.0.6-1
--Added "unit" param to <weather> widget which accepts "F" or "C" for displaying weather in fahrenheit or celsius.
--Fixed issue with clock that prevented the date from automatically updating
--Fixed issue with thermostat widget which prevented some thermostats from being able to raise/lower setpoint. You can now raiser/lower setpoint and the widget will send single command to HS three seconds after you finish interacting with the widget, setting the thermostat to the specified temp. Previously, the widget would try to issue a command for every increase/decrease in setpoint value.
**Ver 1.0.5-4
--Removed "Loading" message that was appearing on some screens
**Ver 1.0.5-3
--Fixed refresh issue for <staticimage> widget
--Fixed issue where setting height and width parameters in <staticimage> widget had no effect.
**Ver 1.0.5-1
--Added <webpage> widget. This widget lets you configure a collection of webpages that you can navigate to from within the UI. Tap to cycle through the collection. After 3 seconds, the selected page will load. Look in home.html for example on how to use it. Use your browser back button to return to HSMetro.
--Fixed refresh issue in <staticimage> widget. Set the refresh rate (in milliseconds) to correspond to the refresh rate of the image you're loading.
**Ver 1.0.4-9
--Removed the need to specify URL, Proxy IP and Port for every device. Edit require.config.js in the /app folder to add those values
--Added <staticimage> widget. You can use this widget to display images from any folder within your HS html folder. Good for IP Cams and any other dynamically created image that you want to display.
--Added the ability to specify custom refresh values for <weather><hsstatusdevice> and <staticimage>widgets. Use param "refresh: 30000". Value is in miliseconds.
--Removed the "?" icon as the default icon. If the tile can't match a status it will not display any icon.
**Ver 1.0.3.2
--Addresses issues with thermostat device
**Ver 1.0.3.1
--Fixed issue with package.json file which was preventing "node install" from working correctly
**Ver 1.0.3
--Weather: you can now use "location" instead of "zipcode" as a valid parameter and specify Orlando, FL, or London, England or any other valid location
--New Widgets: <hsstatusdevice> and <hsthermostat>.
*The <hsstatusdevice> widget is non-interactive. Use it for devices that you only need info about like motion or door sensors.
*The <hsthermostat> widget takes the root refID value. It figures out all it's children and then builds it's functionality per the HomeSeer API for thermostats
--Toggle Switches have been reduced in width to make room for more devices
--Added "location1" to widgets
--Dimmer switches now toggle in the following order: Off-->On Last Level-->On-->Dim
--Weather has an auto-refresh of 1 hour. You can change the refresh rate by editing the annotated line in the weather.js file
--<hsstatusdevice> has an auto-refresh of 5 minutes. You can change the refresh rate by editing the annotated line in the hsstatusdevice.js file
--Numerous other fixes and enhancements
**Ver 1.0.2 (tested on HS 3.0.0.153)
-Fixed Dim Values displaying 0 when light is on
-Fixed Issue where tile might not change back to correct color when in default state
-Added support for ASCII Interface--Real-Time updates from HomeSeer to the tiles!!!
**Ver 1.0.0.1
Fixed--Dim now shows the correct dim value as you ramp up/down your dimmable device.
HSMetro 2.9.1-2.zip
jquery.simpleWeather.min.txt
Comment