Show Off Your Dashboards!

@TechMedX

What I mean is I would title in the tile to function as link instead of having to create a separate dashboard link tile. It will save space and improve UX.

If you are trying to get multiple Dashboard links on one tile it looks like you can do it via @bptworld Tile Master 2. I am still figuring it out and getting "Null" instead of the link, but it is possible.

Feel free to jump on over the TM thread so we can get that figured out for you!

1 Like

Not a full dashboard to show off, yet, but a neat 'trick' I learned and want to share. Some of you may know this, but for those that don't here goes.

Tile stacking - using multiple overlapping tiles to give the impression of a single more useful tile.

The tile on the left is somewhat obvious it is 7 tiles stacked 1 lock 1 contact for each door plus an oversized background tile with a group title.

The right side has 2 sets tiles each having a switch and a color bulb tile. This is great for easy on/of plus color control from "one tile"

How To - Tiles are stacked by HE depending on the order they appear in the JSON. Tiles on top are created 1st and tiles that come after are placed on top. If you want a tile to be on top c/p it's JSON tile entry below that of the way you want to be "on top" of. Notice below I put tile 55 below 56. That change will make 55 be displayed second, and sit "on top" of 56.

This can also by achieved by removing the tiles that are "behind" other tiles and then adding then back into your dash. This will create a new tile at the bottom of the list and bringing it "to the front"

Thanks to @spelcheck for smartly to build on, and helping me figure this stacking thing out.

5 Likes

Updated 2 of my dashes using the smartly "quarter height/half width" modified settings. The link has details, plus before/after of these dashes

Main Dash

Lighting Dash


Last 2 are still in progress in not worthy of posting, yet.

Please know that this 'mod' of smartly is not 'officially supported'. See this post for details.

PS. @Angus_M be gentle, some of the spelling mistakes are intentional due to space limitations (you can still poke fun). Any that aren't I'll just say are. I still say HE needs to allow browser spell check!

2 Likes

Finished wireframes, next step visual design, hopefully more to show soon. When I started the project I had a lot of devices outstanding that I didn't think I'd be able to get into Hubitat, that number is quickly dwindling. With some of those remaining likely to start working soon too!

Still outstanding:


17 Likes

Looking good!

1 Like

Nice work. I love the layout and nice clean look. Well done indeed! I'm making steady progress with mine too. Now I'm adding pages for music control, photos (for slideshow), etc. I'm still waiting for the 3D views from the architect then I will integrate all the devices I've set up (lights, AC, leak, contacts, motion etc). I'm loving the flexibility of using good old html/css/javascript instead of being locked down to a formal grid dashboard approach.

1 Like

This is really cool.

1 Like

What did you use to make the floorplans?

I'm working on making the built-in Dashboard app re-size well. I went ahead an left the tile width and height blank so they resize.

Here's what it looks like going from my tablet viewport (using Web Developer tools in Firefox):

compared to my native desktop viewport:

The icons and fonts don't scale, and I think it looks terrible on a big screen.

Here's what happens after some CSS sizing things based on vh and vw--first the tablet:

and now the desktop monitor:

Much better, I think!

Here's the custom CSS I added to get that:

.vue-slider {
  height: 2vh !important;
  margin-top: -0.75vh !important;
  margin-bottom: -0.75vh !important;
}

.vue-slider-dot {
  width: 3.5vh !important;
  height: 3.5vh !important;
}

.tile-title {
  font-size: 1vw !important;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.tile-contents > .tile-primary {
  font-size: 1.2vw !important;
}

.tile-contents > .tile-primary > .material-icons {
  font-size: 6.5vh !important;
}

.tile-contents > .tile-primary > div {
  font-size: 1.5vh !important;
}

.tile-contents > .tile-primary > div > .material-icons {
  font-size: 6.5vh !important;
}

.date-clock > .tile-contents .tile-primary {
  font-size: 2vw !important;
}

.date-clock > .tile-contents .tile-primary > div {
  font-size: 2.5vw !important;
}

.tile-contents > .tile-tertiary {
  font-size: 1.5vh !important;
}

I used percentage of viewport height (vh) for fonts I wanted to be a specific height, typically short labels. Some I wanted to not break into 2 lines, like the tile titles, so I based it on viewport width (vw).

In general, the tiles are approximately square for a 16:9 display. It would still be ugly moving from landscape to portrait, because I haven't yet figured out how to make tiles have a width/height dependent on the same viewport dimension (e.g. width = 10vw; height = 10vw;). That should be possible, though, just need to spend more time inspecting the elements.

@codahq I had a architectural drawing from our recent-ish remodel, that I used as a tracing image and I drew it in Figma.com, a web based vector drawing tool (its free)

I like how you've associated controls relevant to the camera views

For webcams, I can now go one better :laughing:

I just finished integrating a tinyCam webserver (running on an Android phone) into the new dashboard I'm developing, along with some new icons (note one of the motion sensor is triggered)....

This is a live video feed, so the little camera image updates in (kinda almost) real time, which is very cool. And here is the same grab with the light on and the AC running (the .png image rotates round and around while the AC is on).

tinyCam is really awesome now that it supports my Arlo cameras directly. Supports motion, face/person/pet detection etc but didn't set that up yet. Loving it! :smiley:

Now I'm trying to get it to pop up a larger window onclick to the div, but seems tricky to do :crazy_face:

4 Likes

How did you get the feed, i played with running it as a Web server but could never work out how to connect to the feeds though tinycam

When you've set up the webserver you will get a page come up like this. Click on the API link. It has good examples for cameras, resolution etc.

The url of this page is from the tinyCam menu where you select the webserver to be "on".

I'm assuming this will work without the Arlo cloud. Hope so. Will have to test it!

You can do this in HA by using an image with a picture glance card or use a live camera feed from Blue Iris. You can also add entity states to the bottom of the card which update automatically. In the example below my front door camera is reporting motion detection, audio detection, door contact sensor, deadbolt status, camera connectivity and porch light status.

The motion detection is using DeepStack AI so it only detects people.

1 Like

Bah humbug. Who cares about HA on this forum. Hubitat rules :smile:

I'm using HE, HA and Homekit. With multiple systems it covers all the bases.

1 Like

Yeah, but mine is in a circle so it's way cooler :crazy_face:

(sorry quite drunk, it is late here...)

8 Likes