Show Off Your Dashboards!

Just found this. Well done.
How did you do the power meters display? I like the dials and would like to replicate them.

This is my desktop dashboard so far. Based on Smartly and I'm slowly learning CSS.

And the mobile version.

6 Likes

How did you create separate Mobile and Desktop Dashboards ?

You can make as many dashboards as you want. Make one for one specific device and one for another...

Yes they are two separate dashboards setup with similar templates but one is adjusted to fit the mobile screen better.
I don't really use the desktop dashboard, it was just easier to learn on the larger screen.

1 Like


Waiting for the tablet to make a bigger one :grin:

3 Likes

How did you pull in the Windy preview?


You have to go to the windy website and setup API access then add a virtual device with the url.

A few screenshots of my linked dashboard. So far only been working on the shades and all works great.

7 Likes

Latest of our main dashboard...

5 Likes

Take a look at Smartly and Sharptools--both offer more control without coding CSS, etc.

1 Like

Started building a new dash.
Not how I want it to look in the end, but it's getting close.

7 Likes

How did you put those cameras?

Point to your cgi feed of the camera and set refresh for every 1 second

1 Like

hey @diegodelprat I also found those tiles interesting - Although I had read many using backgrounds of a tile it had never registered.
So I took a single tile that already existed in my dashboard (our you can simply add one of your own to a dashboard and clicked the 3 dot menu. Inside the device on the right under Options is: Background Image Link. Stick your URL there from a feed.
image
It pretty much works for all tiles - I haven't reviewed what tile colors, css and overrides do to impact but thats the basics.

image

Theres a lot more to learn when it comes to what the URL looks like - there are many types of streams, and more to cameras than you want to know but if you've already got that part done it's straightforward. I'm using BlueIris to serve all my cameras and allow me motion triggers (using the motion from the camera to cause HE to turn on spotlights for example). As you can see in my example image I also put an overlay image onto the camera (nothing to do with HE) of external data.
Lastly, in the OP I noticed the icon was small and located left edge bottom - I'm certain thats a css thing. I hope I'm not being to rudimentary but I felt it was a good question that others may read someday and a more detailed response would be helpful.

1 Like

I can not put my cameras in HE, I enter the IP that it gives me and it does not open anything, I have been trying for a long time but I abandon it, I used tinycam and if I saw them from the app but I cannot access the address, example: 192.168. 31.606, that would be my device io, my camera is a c200 cap and it has onvif, I don't understand where the problem is

well a little problem there in your example at least - thats an invalid IP address... assuming thats a typo- work it backwards - if you can't get it in a page, try using ODM (onvif device manager) to somehow determine the URL - Camera urls don't always start with HTTP / https - sometimes it's something like :
'rtsp://admin:12345scw@192.168.1.210/unicast/c2/s2/live` - notice the user:passwrd which is commonly admin:admin but try all the combo's of root:root admin:admin admin:password or admin:12345 (a VERY common Chinese default).
Another idea is to download a trial of BlueIris and then let BI autodetect it. It will find something like 4000 camera types now. That will let you build out the string.
Look for the SW that came with the camera. often you can use it to deduce the URL then bypass their software.
Is the camera currently displaying anywhere? Maybe you can pick it off from there?

But just having the IP isn't normally enough. Generally you need to pass the username and password, the protocol (RTSP or HTTP) the Port and the service directory or dedicated url extension as in the example above. I'm spoil as I installed secCams for years and have tons of tools and a deep knowledge of them - just keep pounding at it till you break through!
(PS - you mentioned Onvif - Find and download ODM (OnviF Device Manager and install it. Then add your IP address of the camera and ODM will suss it out and give you access. Then, look on the Live video where you can pick up the string I've highlighted in yellow at the bottom)

If you get this far - most browsers won't let you run an RTSP string in the URL anymore directly. But you can use VideoLan (VLC) and drop that in the Network Stream URL to test.
image

Once you've gotten this far (fingers crossed!) you can then play around - the "channel" value is usually the Main stream and a low-res substream generally. yOU can choose to not overload your dashboard by setting the background image to the substream but have it active so if it's clicked you show the main/HD stream. You can even put the PTZ commands on here too!

2 Likes

Some exciting possibilities with @mbarone 's iFrameAdvanced driver. Did a very quick and dirty virtual iFrame device hosting a small dashboard for thermostat (A/C) control. Obviously not styled the way I want it just yet, I eventually want to include it in my Zone Control dashboard I have posted earlier. Another use will be for the cycling of weather radar images without needing to have them displayed on screen all the time, another project I have been working on. Or even a static menu on the left / bottom / top and other dashboards open in an iFrame...

iFrameAdvanced_AC_Control