Announcement

Collapse
No announcement yet.

Windows Style Live-Tile UI for HomeSeer

Collapse
This is a sticky topic.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Windows Style Live-Tile UI for HomeSeer

    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:

    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>
    For the <staticimage> widget the imageName param should be the name of the image you want to display relative to the HomeSeer HTML folder
    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">
    . 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,
    Code:
    <a href="#master_br">Master Bedroom</a>
    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 :
    Click image for larger version

Name:	Screen Shot 2015-07-12 at 6.24.37 PM.jpg
Views:	1
Size:	36.0 KB
ID:	1208064

    **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
    Last edited by wposner; March 22, 2016, 12:36 PM.

    #2
    Very interesting and sounds promising - I have written a handful of plugins with varying degrees of success but I wonder in your case what exactly you need one to do, if you are trying to get information out of HS about devices HS knows about then a plugin is not going to get any more special access than a script/webpage for controlling and querying devices (say for example via the device enumerator). If you wanted something running in a timer though I could see where it would help...

    Comment


      #3
      Wposner,

      Sounds like a great project. (Un)fortunately, I dropped HSTouch and developped on another platform.

      Originally posted by wposner View Post
      ... Plus I'm still hoping that Rich can tweak the JSON to only return the response after the command has executed. Otherwise, I need to execute a series of "getstatus" until I get back the device status I'm expecting based on the command issued ...
      ++++++++ 1

      Comment


        #4
        awesome! This sounds exactly like what I was hoping for when json was added. a separate modern user environment that can leverage the back end power of HS3.

        Comment


          #5
          wposner,
          have you had the opportunity to email Rich? He may be able to help in some way with this project too. This looks like a very promising project.

          Originally posted by claude View Post
          Wposner,
          Sounds like a great project. (Un)fortunately, I dropped HSTouch and developped on another platform.
          ++++++++ 1
          Claude, just curious what other platform are you using.
          Tom
          baby steps...starting again with HS3
          HS3Pro: Z-NET & 80 Z wave Devices,
          HSTouch: 4 Joggler (Android Kitkat), 2 iPhone, 3 iPads
          Whole House Audio: 5 SqueezePlay Jogglers w Bose Speakers
          In The Works: 10 Cameras Geovision, new Adecmo/Envisalink Alarm, Arduinos
          System: XP on Fanless Mini-ITX w/ SSD

          Comment


            #6
            I actually spoke with Rich about this at CES. I've been emailing him regarding modifying the JSON response to only send after confirmation of the z-wave event. I'm not sure how involved Rich would like to be in this project. I did leave the option open for him.

            Comment


              #7
              Originally posted by TomTom View Post
              wposner,
              have you had the opportunity to email Rich? He may be able to help in some way with this project too. This looks like a very promising project.


              Claude, just curious what other platform are you using.
              DemoPad

              Comment


                #8
                Originally posted by wposner View Post
                I actually spoke with Rich about this at CES. I've been emailing him regarding modifying the JSON response to only send after confirmation of the z-wave event. I'm not sure how involved Rich would like to be in this project. I did leave the option open for him.
                Unless things have changed over the years, Rich is the president (owner) of HomeSeer

                Comment


                  #9
                  Originally posted by claude View Post
                  Unless things have changed over the years, Rich is the president (owner) of HomeSeer
                  Yep. I know that. I have his business card sitting on my desk. I also have quite a few emails back and forth with him discussing the JSON functionality.

                  Comment


                    #10
                    So is there a JSON friendly control application that would be close to plug and play with hs3?

                    Comment


                      #11
                      Originally posted by kideon View Post
                      So is there a JSON friendly control application that would be close to plug and play with hs3?
                      That's the intent after I finish this UI. But right now, no there is no.

                      Comment


                        #12
                        Hi Everyone....

                        Making progress. Just wanted to show you all a rough sample of where I'm currently at. I'll be tweaking the CSS as I go along and really hoping Rich will return the device image URL in the JSON return string so that I can use those images.

                        What you're looking at below are two single widgets--my switch widget and the weather widget. Each switch widget has a unique ID which equals the Ref ID from HomeSeer. That ID gets passed in to the widget to create multiple instances. The tiles are also drag and drop enabled so you can move them around however you like.

                        Click image for larger version

Name:	Screen Shot 2015-01-25 at 8.58.35 PM.jpg
Views:	1
Size:	27.5 KB
ID:	1176132

                        Comment


                          #13
                          Wow, VERY NICE. I can finally see the need for a large touch screen with this project. I like the widget idea and the ability to move the tiles around.
                          Tom
                          baby steps...starting again with HS3
                          HS3Pro: Z-NET & 80 Z wave Devices,
                          HSTouch: 4 Joggler (Android Kitkat), 2 iPhone, 3 iPads
                          Whole House Audio: 5 SqueezePlay Jogglers w Bose Speakers
                          In The Works: 10 Cameras Geovision, new Adecmo/Envisalink Alarm, Arduinos
                          System: XP on Fanless Mini-ITX w/ SSD

                          Comment


                            #14
                            I'll be following this.
                            I'm planning to make a small app for Windows 8 and 10, and now as JSON is implemented, it's easier.

                            However, I see that you write about Z-wave equipment. Not all HS-users use Z-wave, but as long as you think in terms of CAPI it shouldn't matter.
                            HSPro 3.0.0.458, Z-NET with Z-wave plugin 3.0.1.190, RFXCOM + 2x RFXtrx433E, HSTouch, Squeezebox plugin, iTach IP/WF2IR & GC-100-6 with UltraGCIR, BLDenon, NetcamStudio, Jon00s Webpage builder, Harmony Hub plugin, SCSIP (with FreePBX), Arduino plugin, IFTTT, Pushalot plugin, Device History plugin.
                            Running on Windows 10 (64) virtualized
                            on ESXi (Fujitsu Primergy TX150 S8).
                            WinSeer (for Win10) - TextSeer - FitbitSeer - HSPI_MoskusSample

                            Are you Norwegian (or Scandinavian) and getting started with HomeSeer? Read the "HomeSeer School"!

                            Comment


                              #15
                              Originally posted by Moskus View Post
                              However, I see that you write about Z-wave equipment. Not all HS-users use Z-wave, but as long as you think in terms of CAPI it shouldn't matter.
                              +1
                              stefxx

                              Comment

                              Working...
                              X