Windows Style Live-Tile UI for HomeSeer

[wposner]

Ok..was able to get to it today. If you open the html and find this section:

<div id="status_bar" style="position:absolute;width:220px;height:25px;top:3px;left:3px">
                <table width="100%;table-layout: fixed;">
                    <tr>
                        <td style="width: 25%;">
                            <!--ko with: device -->
                            <span style='font-size:10pt' data-bind="text: statusLabel" />
                            <!-- /ko -->
                        </td>
                        <td style="width: 25%;">
                            <span style='font-size:10pt' data-bind="text: valveStatus" />
                            <img src='img/valve.png' style='height:14px;width:14px' data-bind="visible: valveIsVisible" />
                        </td>
                        <td style="width: 25%;">
                            <span style='font-size:10pt' data-bind="text: batteryStatus" />
                            <img src='img/battery.png' style='height:14px;width:14px' data-bind="visible: batteryIsVisible" />
                        </td>
                        <td data-bind="visible: humidityIsVisible" style="width: 25%;">
                            <span style="font-size:10pt" data-bind="text: humidity() " />
                            <span class="mif-water" />
                        </td>
                    </tr>
                    <tr colspan="4" data-bind="visible: locationIsVisible"  >
                        <td>
                         <!--ko with: device -->
                        <span class="uppercase" style="font-size:10pt" data-bind="text: location" />
                        <!-- /ko -->
                        </td>    
                    </tr>                    
                </table>
            </div>

You should be able to add a new <td> section that binds to mode. Something like this:

<span style="font-size:10pt" data-bind="text: mode() " />

Let me know how that works for you.

[Simonk]

No border between two static images

I'm using a couple of static images, one below the other but there is no gap between them as you can see in the attached image.

Am I doing something wrong ? Or can I get a gap between them?

<div class="tile-group triple">
        <span class="tile-group-title">Location</span>
        <div class="tile-container">
             <staticimage id="598" params="imageName: '/PHLocation/Maps/597.png', refresh: 10000"></staticimage>
             <staticimage id="622" params="imageName: '/PHLocation/Maps/621.png', refresh: 10000"></staticimage>
        </div>
    </div>

Thanks
Simon

[mminehan]

You should be able to add a new <td> section that binds to mode. Something like this:

<span style="font-size:10pt" data-bind="text: mode() " />

Let me know how that works for you.

Thanks.....that worked a treat! Now I just have to go through all my devices and change the status icons to fit with sputnik' style guide.

M

[mminehan]

Nice !
Was it much work to use sputnik's style guide ?

Yea...quite a bit. I had to make changes to the components (both html and js) and I'm in the process or renaming my devices and changing the status icons. 936 devices........arrgghhh. But I'm using a script that allows me change the graphic pairs. So I don't have to edit every single pair for every device.

There are a few things I would like to change but they are low priority:
1) Different navbars that can change. e.g. one based on room and another on device type/system.
2) Having the selected room or system highlighted on the navbar. It only works with 'Home' for me at the moment. I don't know if I broke it or it was lost with one of the recent updates.
3) Having the tile background change based on a value range. E.g. when energy consumption is high I would like the tile to change to red.

All these things will take time. And I am not trained in JS or HTML. I'm just figuring it out based on wposner's excellent coding and comments in the files.

M

[wposner]

I'm using a couple of static images, one below the other but there is no gap between them as you can see in the attached image.

Am I doing something wrong ? Or can I get a gap between them?

<div class="tile-group triple">
        <span class="tile-group-title">Location</span>
        <div class="tile-container">
             <staticimage id="598" params="imageName: '/PHLocation/Maps/597.png', refresh: 10000"></staticimage>
             <staticimage id="622" params="imageName: '/PHLocation/Maps/621.png', refresh: 10000"></staticimage>
        </div>
    </div>

Thanks
Simon

Edit the staticimage.html file and add a padding parameter

<img data-role="fitImage" style="padding: 5px" data-format='square' data-bind='attr:{src: image}' />

That should take care of it for you.

[Simonk]

Edit the staticimage.html file and add a padding parameter

<img data-role="fitImage" style="padding: 5px" data-format='square' data-bind='attr:{src: image}' />

That should take care of it for you.

That makes it look better but is it possible to keep the top of each image in line with the tile to it's left? So the top image is inline with the top tile to it's left and the second image is inline with the third tile down? Hopeully the image attached will help explain it!

  <img data-role="fitImage" style="padding: 10px; background-color: #1D1D1D" data-format='square' data-bind='attr:{src: image}' />

[kriz83]

Yea...quite a bit. I had to make changes to the components (both html and js) and I'm in the process or renaming my devices and changing the status icons. 936 devices........arrgghhh. But I'm using a script that allows me change the graphic pairs. So I don't have to edit every single pair for every device.

Would you mind sharing it ?
I love the idea of the tiles, but the version provided doesn't really look 'polished', while yours does :-)

[wposner]

That makes it look better but is it possible to keep the top of each image in line with the tile to it's left? So the top image is inline with the top tile to it's left and the second image is inline with the third tile down? Hopeully the image attached will help explain it!

  <img data-role="fitImage" style="padding: 10px; background-color: #1D1D1D" data-format='square' data-bind='attr:{src: image}' />

Try just setting the padding at the bottom using padding-bottom

[Simonk]

Try just setting the padding at the bottom using padding-bottom

I should have said that I'd already tried padding at just the bottom but nothing appears between the two images.

<div class="tile bg-steel fg-white" data-role="tile" data-bind='attr: {"class": classInfo}'>
    <div class="tile-content" data-bind='attr: {"id": id}'>
      <img data-role="fitImage" style="padding-bottom: 10px" data-format='square' data-bind='attr:{src: image}' />
    </div>
</div>

[wposner]

You can also try to put the padding at the upper div level where the class=tile.

[Simonk]

You can also try to put the padding at the upper div level where the class=tile.

I've just tried putting the padding-bottom at all three div levels but bottom doesn't show anything.

Not to worry, it's not a bit thing just me being pedantic!

[mminehan]

Would you mind sharing it ?
I love the idea of the tiles, but the version provided doesn't really look 'polished', while yours does :-)

I wouldn't say mine is polished. It's just minor changes in tile colors and font colors. Most of the work is actually the Homeseer status icons!! You have to have the right colored icon in the status pairs and match that to a change in background of the tile, and then also the font color. So for me it's light grey (#909090) colored icons on a bg-grayDark tile, that then changes to a white icon on what ever colored tile, and a white font (fg-white). So both the status icon color (from HS) and the tile color and font (from the Metro UI) have to change at the same time.

I can post my files if you want. But to be honest they are a little messy as I am not trained in js or html. It's been mostly pattern recognition and cut and pasting. So someone skilled might look at my modifications and think 'what was he doing, there's a much easier way to do that'. And the other problem will be when Wposner posts a new version. All the changes will be over written. So backups are vital.

Wpsoner has done a great job in keeping things very separate (pages, components etc). So it makes it not too difficult to customize.

I have even created new 'components' which made things easier and allowed me to roll back any changes that didn't work (see a new the new thread in this subforum).

Oh...and having a good editor like Notepad++ make things much easier.

Marty

[wposner]

I wouldn't say mine is polished. It's just minor changes in tile colors and font colors. Most of the work is actually the Homeseer status icons!! You have to have the right colored icon in the status pairs and match that to a change in background of the tile, and then also the font color. So for me it's light grey (#909090) colored icons on a bg-grayDark tile, that then changes to a white icon on what ever colored tile, and a white font (fg-white). So both the status icon color (from HS) and the tile color and font (from the Metro UI) have to change at the same time.

I can post my files if you want. But to be honest they are a little messy as I am not trained in js or html. It's been mostly pattern recognition and cut and pasting. So someone skilled might look at my modifications and think 'what was he doing, there's a much easier way to do that'. And the other problem will be when Wposner posts a new version. All the changes will be over written. So backups are vital.

Wpsoner has done a great job in keeping things very separate (pages, components etc). So it makes it not too difficult to customize.

I have even created new 'components' which made things easier and allowed me to roll back any changes that didn't work (see a new the new thread in this subforum).

Oh...and having a good editor like Notepad++ make things much easier.

Marty

In one of the early builds of HSMetro I didn't have the ability to pull the device status icon from HS3 so I had a parameter in the HTML where you had to specify your own set of images. Obviously, this wasn't ideal since it made the HTML more complicated and increased the size of the build. Once Richard opened up the status icon via the JSON API it really streamlined things. But the majority of the work was generalizing the tiles enough that a minimal amount could be used for the majority of the devices.

So the hard part is done. The only tile that's missing is a media tile and I'm not really sure I want to go down that road. There are just too many use cases for a media tile to make everyone happy.

Anyway, as Marty states, you really only have to change your status icons in HS3 and tweak the CSS to suit your liking to give you a look you're happy with. I'm pretty sure any styles you put in the HTML override the values in the CSS, but if you'd like the non-minified version I can post it. You'll just have to update your files to not reference the min version of the CSS.

[mminehan]

If you'd like the non-minified version I can post it. You'll just have to update your files to not reference the min version of the CSS.

That would be very useful as the minified versions are very difficult to read and edit. I did make a few minor size tweaks. But I have no way recalling the changes (i.e. can't put comments in minified version to remind myself).

Thanks, M.

[wposner]

Here you go! Extract and rename.txt to .css

metro.txt.zip