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

  • #31
    This looks really great!. Can users change the light bulb icon with an on/off. And can sreens be resized for use with table top devices like homeseer tabletop touch screen.
    Again looks really great and can't wait for more.
    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


    • #32
      It will resize automatically. I'm waiting on Rich to add the device image path to the JSON response and then it will use whatever you have configured in homeseer.

      Comment


      • #33
        Originally posted by wposner View Post
        then it will use whatever you have configured in homeseer.
        Oh, Nice! This is gonna be great.
        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


        • #34
          UI is still coming along. I've added functionality that allows you to tap the button to toggle through the various modes (ie. On, Off, On Last Level). It waits three seconds before executing. I'm really stuck though, on how to implement dim values. I thought about press and hold, but that forces a user to make the device values go up before they can come back down. So if you're lights are on at 50% at you want them to go to 25%, you'd need to go to 100% and then come back down. I also thought about using the back side of the tile to put up/down buttons, but depending on the size of your touch screen device, that could mean trying to use very small buttons.

          Thoughts or suggestions on how to use the dim feature on dim capable devices?

          Thanks!

          Click image for larger version

Name:	Screen Shot 2015-02-21 at 1.44.28 PM.jpg
Views:	1
Size:	43.9 KB
ID:	1176481

          Comment


          • #35
            Nice work! I'd definitely be interested in your code when it's available. I've created several front ends in html/js with various adapters (json, node, python, etc) for HS and could always do with another thing to play with.

            As for dimming: Disable context menu and have the long-press tile make the tile "flip around" with a small slider for dimming (or up and down arrows)

            Cheers,
            M

            Comment


            • #36
              I'm about ready to release this UI for testing. there is an "hsdevice" that works with dimmers, locks, toggle switches, and virtual devices. I'm hoping to get thermostats done before releasing for testing. There is also a "refresh" , "weather", and "clock" device type that you can declare in your HTML. I'll post some sample HTML on how you use this a little later on.

              Currently tiles let you cycle through their modes by tapping (on, off, last level, dim %). The selected mode will activate after 3 seconds. For devices that have range, once you get to the Dim view, up/down icons appear that allow you to adjust the range value. This methodology works for virtual devices too (Home, Night, Away).

              Since the JSON doesn't currently return device icons, I've set it up so you have to pass your icons paths in the device html. You can also set your own color.

              I don't have HomeSeer controlling any media devices so I can't test that, but if someone sends me the JSON output of getstatus and getcontrol, I can either make sure the my "hsdevice" will work with media types too or create a new "hsmediadevice" type.

              Comment


              • #37
                Can't wait to try this on my wintel tablet!

                Comment


                • #38
                  So I will definitely need to write a new device to handle thermostats. This will take me a little while, since I need to query on the root device ID, and then get all the children devices to build anything useful--at least for Nest thermostats.

                  If someone with a regular z-wave thermostat can let me know if it's a single device in HS or if it has multiple children nodes for the various functions, I'd appreciate it.

                  In the meantime, I will post what I currently have later tonight or tomorrow.

                  Here's some sample HTML on how to configure your UI:

                  Code:
                  <weather class="hstile"   params="zipcode: '89135', color: 'blue'"></weather>
                      <clock class="hstile"></clock>
                      <refresh class="hstile"></refresh>
                      <hsdevice class="hstile"  params="url: 'http://192.168.1.250', ref: 230, color: 'steel', icons: {
                                                        'on': '/images/HomeSeer/status/on.gif', 
                                                        'off': '/images/HomeSeer/status/off.gif'}"></hsdevice>
                  The icon paths are relative to the html dir of your HomeSeer URL. So if you have a custom folder inside the images folder you would just use /images/<my custom folder>/<my image>

                  Right now drag and drop reordering of tiles only works with a mouse. I'm hoping to get it working on touch screens. So if you're implementing for an ipad or android device, for now, just change the order of the html to suite your liking.

                  I'm also trying to get the UI to listen on port 11000 via the ASCII interface so that the UI updates automatically instead of having to use the refresh button. If anyone has any sample code on how to get this working I'd appreciate it. I've been trying WebSockets, but keep getting connection refused errors.

                  Comment


                  • #39
                    The horstmann thermostat I have comprises of a root device, heat setpoint child, current temperature child and battery level child.
                    This controls a thermostat device which itself comprises a root node, hot water child (on/off), boiler child (on/off), and a control mode child (heat)

                    Appreciate the work you're doing

                    Comment


                    • #40
                      I have two Z-Wave Thermostats
                      Attached Files
                      Don

                      Comment


                      • #41
                        Here we go! Round one--version 1.0!

                        As I've said previously, this will only work with locks, switches, dimmers, and virtual devices.

                        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.

                        Once you've updated the html file, point your browser to your hometroller IP address/<folder you created>/index.html

                        HSMetro.zip

                        Comment


                        • #42
                          Wayne:

                          Sweet interface. A couple of questions...

                          Where do I insert the zipcode for the weather tile?

                          Can you walk me through creating a tile?

                          Again, really nice
                          Don

                          Comment


                          • #43
                            Just open the html file inside components/home-page.

                            You'll see this:

                            Code:
                            <weather class="hstile"   params="zipcode: '89135', color: 'blue'"></weather>
                            Just change the zip code value there. There are only a few tiles you can currently create--hsdevice, clock, weather, and refresh. Each type is already in the HTML file. If you don't want a clock, just remove the entire <clock> line. If you need to add more devices, just copy and paste one of the <hsdevice> lines. You can change the icons to be whatever as long as your path is relative the the HomeSeer /html/images folder. Look at the on and off icons as examples of where the images live. You'll definitely need to change your Home, Away, Night icons since those are custom and specific to my setup.

                            Comment


                            • #44
                              Many thanks... Off and running.
                              Don

                              Comment


                              • #45
                                Pretty cool! Even deals with Canadian postal codes for weather.

                                A few observations:
                                1- clicking a tile gets a device from Off to Dim 1%, as opposed to default On value
                                2- The initial display for a device will be "Dim (value)%"; only after a refresh will it replace it with the actual numerical Dim level

                                Note: My installation is Insteon.

                                Comment

                                Working...
                                X