I found a way to do the room detection using BT. I created a new thread so I don't take this one off the tracks.
New version:
First, that's pretty sweet. Nice job on this. I feel like it adds a bit of professionalism to it.
Regarding the colored tiles, instead of changing the tile's backgroud color, how about keeping the background transparent, and only changing the icon color to dictate the state of the device?
That’s a good idea. I’ll jack with it and see how it looks. Thanks.
1 Like
I love this! Is it strictly Roku?
It's an IFTTT applet. Any updates to my Alexa list sends the entire list embedded in a Webhook to a Hubitat variable. Then I made Rule Machine rule to format it a bit so it's a little easier to look at/read. (Basically just replacing each comma with a comma/space.) The dashboard tile is just displaying the variable.
1 Like
It's done in Node Red with a combination of Roku's HTTP Requests and Harmony's Node Red integration. It doesn't do anything in Node Red that can't be done in HE directly. I believe you can send HTTP requests in RM.
If you try something like this, DO NOT create 25 virtual Button devices. You create ONE Virtual Button device with 25 buttons.
3 Likes
Never thought of that. It would have certainly shortened my devices list.
2 Likes
I originally got about 10 buttons in (so 10 additional virtual button devices) before I realized and went back. I think that virtual Button device is up to 26 buttons.
1 Like
33 buttons for two dashboards.....ugh!
Not sure. I haven't needed to do that.
Not sure either. I use Webcore or RM to control mine.
Where did you find the room icons you used - kitchen, dining room, etc? They're pretty nice.
Brand new with Hubitat - After about 3 hours just messing around without all my devices and not even getting into CSS yet (next on my list).
6 Likes
@bezerkus , welcome! Simple, functional and beautiful. Nice job.
1 Like
If you haven't found it already, you might want to look here when you come to look at CSS....
In a shameless, belated self-promotion I will add:
6 Likes
Here is my first attempt at doing a whole home dashboard, it took a lot of work with a large grid (8x54), 95 tiles (a bunch overlapping), and a lot of custom CSS.
For each of the rooms, the header links to the full dashboard for that room and has a toggle for enable/disable motion lighting for the room, if motion is active in the room and if the room is occupied. The wireless phone chargers show my phones current battery percentage in the top left corner. The camera images show if motion is currently active, the snapshot from the last event and the timestamp of the last event.
Some of the biggest challenges were:
- Getting the AQI - I ended up modifying the driver to report AQI as carbon dioxide and using that tile with a custom unit
- Getting the camera images to use the full container and center the image
- Lining up the battery indicators and styling the full battery container and colors
I'm pretty happy with the result.
Here is the unstyled one for reference.
3 Likes
How did you get battery tile color to change according to its value?
1 Like
@amithalp The tiles already change color by default if you are ok with the standard green, red and default tile color for 40-26%. But I wanted the 40-26% to be yellow and all of the colors I use are from the Material color pallete so I wanted the batteries to match. That part is easy
.battery-100, .battery-99, .battery-98, .battery-97, .battery-96, .battery-95, .battery-94, .battery-93, .battery-92, .battery-91, .battery-90, .battery-89, .battery-88, .battery-87, .battery-86, .battery-85, .battery-84, .battery-83, .battery-82, .battery-81, .battery-80, .battery-79, .battery-78, .battery-77, .battery-76, .battery-75, .battery-74, .battery-73, .battery-72, .battery-71, .battery-70, .battery-69, .battery-68, .battery-67, .battery-66, .battery-65, .battery-64, .battery-63, .battery-62, .battery-61, .battery-60, .battery-59, .battery-58, .battery-57, .battery-56, .battery-55, .battery-54, .battery-53, .battery-52, .battery-51, .battery-50 {
background-color: #4CAF50;
}
.battery-49, .battery-48, .battery-47, .battery-46, .battery-45, .battery-44, .battery-43, .battery-42, .battery-41, .battery-40, .battery-39, .battery-38, .battery-37, .battery-36, .battery-35, .battery-34, .battery-33, .battery-32, .battery-31, .battery-30, .battery-29, .battery-28, .battery-27, .battery-26 {
background-color: #FBC02D;
}
.battery-25, .battery-24, .battery-23, .battery-22, .battery-21, .battery-20, .battery-19, .battery-18, .battery-17, .battery-16, .battery-15, .battery-14, .battery-13, .battery-12, .battery-11, .battery-10, .battery-9, .battery-8, .battery-7, .battery-6, .battery-5, .battery-4, .battery-3, .battery-2, .battery-1 {
background-color: #F44336;
}
.battery-0 {
background-color: #7B1FA2;
}
But the width of .tile-content is calc(100%-8) and has a 4px padding, so the background doesn't cover the whole tile. For that I had to adjust .tile-contents and .tile-primary for all tiles (you can do it just for batteries with .tile.battery .tile-contents if you want) .
.tile-contents {
width: 100%;
height: 100%;
padding: 0;
}
.tile-primary {
width: 100%;
height: 100%;
padding: 4px 4px 12px 4px;
}
I stuck with the default battery percentages for now, but may adjust them later. I had to go with a dark yellow, almost orange, to make the white text readable, unfortunately there isn't a CSS parent selector or anything so it's not possible to change the title color for the battery tiles within a battery percentage range.
1 Like
