Windows Style Live-Tile UI for HomeSeer

[Guest]

Would anybody mind posting full Linux install instructions? I'm really struggling getting this to work on my raspberry pi.

Thanks!

[JimBob]

I'm using a staticimage tile to display a stream from a camera. It works fine apart from the fact that it doesn't display the whole image, it is being cropped. The size of the stream is 704x576. Is there any way to adjust this?

Thanks.

[wposner]

You can scale the image size by adding something like

height="640" width="480"

to the img tag inside the HTML of the staticImage widget. I'd probably look in to duplicating the staticImage widget and calling it cameraWidget or something like that so that you don't affect all instances of where you might be using the staticImage widget.

Test it out and see if it doesn't fix the scaling problem before going down the path of creating a custom widget. The other thing to check is whether your camera will let you specify the image resolution. If so, you can make the adjustment there and not have to change anything in the UI.

[JimBob]

Thanks. Will give it a go this weekend

[JimBob]

Hi,

No luck I'm afraid adding those parameters to the staticimage component. It didn't make any change. I wonder if it's because it's a stream rather than a static image.

The stream has the format:
http://<IP Address>:<port>/axis-cgi/mjpg/video.cgi?camera=2

I can put the camera settings to a lower resolution of 352x288 but it makes it very small.

Thanks anyway. I'll play around some more.

[mminehan]

No luck I'm afraid adding those parameters to the staticimage component. It didn't make any change. I wonder if it's because it's a stream rather than a static image.

Hi JimBob,

I had the exact same issue with my camera feeds and had to create a new element in the css file and a new component. You will need the metro.css file, not the metro.min.css file as you can't edit that.

Open the css file with a decent editor (e.g. notepad++) and search for "tile-large-y" (or maybe "tile-big-y"). It's around the line 17450 section of the css file. Copy the two lines and paste them above or below. Change the word 'large' to something else not already in use, like 'huge'. It should look like this:

.tile-huge-y {
height: 680px;
}

.tile-large-y {
height: 310px;

Copy, paste and rename as above for "tile-large-x". Now you can change the 'height' (y) and 'width' (x) to the number of pixels you want.

Now in the 'components' folder copy and rename the folder containing 'staticimage.html' and 'staticimage.js' and rename the folder and the files to something like 'staticimagehuge.html' and 'staticimagehuge.js'. Make sure the original staticimage.html and .js are still in the components folder. So you will end up with the original components/staticimage folder and files, and the new components/statimagehuge folder and files.

Open the .js file you just created in the new folder and change the self.classInfo line to something like this:

self.classInfo("tile-huge-x tile-huge-y fg-white " + self.defaultColor);

So now you have a new component that references the .css file that you added the additional tile size to.

Now in your html pages (e.g. home.html) you can use 'staticimagehuge' as a tile type. E.g.

<staticimagehuge id="Picture" params="imageName: 'http://xxx.xxx.xxx.xxx:xxx/mjpg/index/video.mjpg', refresh: 10000"></staticimagehuge>

or whatever the link to your camera feed is.

I hope this makes sense. I did this a while ago so the names might not be accurate. Large, huge, big, wide......I may have mixed them up. But once you look at the files you will work it out.

Just remember to hard refresh the page so the .js files are reloaded. Otherwise it will load them from the cache and you won't see any changes.

Marty

[JimBob]

Wow, thanks for such a detail response.
I'll give it a go tonight.

Cheers.

[JimBob]

Ok, all makes sense to me the approach to take.
However, I don't have a metro.css just the metro.min.css.
I have edited this file before, think it was to reduce the space between top menu and top of tiles.
I'll look to do the change to this file instead

[mminehan]

You might have to ask wposner for the .css file. I recall he sent it or me once. I don't think you can edit the .min.css file.

[JimBob]

All done! I have the new component working fine with a different scaling.

It is a bit more fiddly editing the non-minified version but as long as you're careful, it's ok.

I also had to add the new component to the registrations in startup.js. It started coming back to me as I created my own thermostat component last year!

Many thanks for your help mminehan.

[mminehan]

Oh yes...sorry forgot to mention the startup . js file.

Glad you got it working though.

[JimBob]

This package has been working great for me and I guess most people as well, given the infrequent posts.

One issue though that's reared it's head again is the weather icon not populating. Sometimes it stays blank, sometimes I get an "undefined" error popup box and other times it shows the weather ok.

Is anyone else seeing this? I am using the weather script as attached to the first post of this thread.

[ian351c]

I've never had it work "sometimes". It was either all or nothing for me: http://board.homeseer.com/showpost.p...&postcount=950

[JimBob]

Yep, thinking it's timing out connecting to the site or hitting some limit, although I'm hardly hammering it with requests.

[dbvanb]

weather widget error

Fairly new here. Both with homeseer and HSMetro. So not doing very advanced stuff. I use the hometroller zee s2, so the linux version. I am having the same problem with the weather widget. It will load normally one time, then multiple times give me the undefined error, and I was wondering if it had to do with the linux OS on the zee, but couldn't see where that might be. One other question - how do you put a device string into a tile, rather than the status, if possible? I really like the HSMetro interface.