Hadashboard V2 Competition

Thanks. I’ll upload the skin as soon as I fix a few issues. I broke some things after I took the screenshot and need to figure them out.

1 Like

Take your time as long s we will get this skin :wink:

did u fix the issues to share with us :slight_smile: mine looks like this now :slight_smile:

4 Likes

It’s actually a title for an episode of “It’s Always Sunny in Philadelphia”.

Anyway, I love that skin, @AZSupra! Please let us know when it’s released.

LOL, I just realized that - I saw Dumpster Baby and remembered the episode of Family Guy with the cutaway number.

2 Likes

Ok I finally got around to getting this in github: https://github.com/AZSupra/HADashboard-Blur-Theme-Light

I’m not currently using this skin so hopefully what I just uploaded is current and still works :grin:

Note that unfortunately you’re going to have to tweak your dashboard files quite a bit as well because I decided to be crazy and use 1x1 pixels widgets to have complete control of the position and sizing of all the elements like what Rene did here.

Basically since each widget is only a pixel you have to define widgets, empty spaces and spacers with the number of pixels you want that element to be. For example:

layout:
    - empty: 120
    - spacer(20x1), media(120x120)
    - empty: 140

The explanation in Rene’s post is probably a lot better than this one. Anyway have fun and let me know if you run into any issues!

2 Likes

Is there a way to change the color of a widget based on if it is on/off? I see how to change the icon but I would like to change the entire box. I could maybe come up with something using pure css to extend the icon height to fill the box and change z-indexes of the title but this seems like overkill…

edit: did it with the css method. for anyone interested

.title {
  color: rgb(255,255,255);
  z-index: 5;
}
.icon {
  height: 100%;
  top: 0 !important;
}
.icon .fa {
  top: 44%;
  position: absolute;
  left: 30%;
}
2 Likes

So question about the alarm status tile, is there a way to show a different color based on the state of the alarm? If it is not possible at this time I feel like this would be a nice feature to have.

At any rate, here is what I have so far. Now mounted on my wall. Wife loves it.

2 Likes

Same answer to both of you - not yet, but I have a feature on my list to allow different widget styles for different entity states, so this will be possible at some point!

4 Likes

It would also be nice if we could show some sort of forecast info, like a today/tomorrow sort of thing.

Also I find dark sky is incredibly inaccurate for my area so perhaps allowing us to add/remove sensors from the weather widget would be nice.

Also on my to do list.

4 Likes

Can you tell us what theme are you using right now? I’ve tested your theme and unfortunately there is no mobile browser support for backdrop-filter css function which makes your tiles look so elegant. Only safari and desktop Chrome (in experiment features) are able to handle that.

1 Like

can you share the code?

which hardware is it?

how do you get the sign “closed” in the widget “front door”?

My navigate shows only the fa-gear even if I change it in the code. AM I doing something wrong?

load_main_panel:
    widget_type: navigate
    title: Main Panel
    icon: mdi-ceiling-light
    url: /MainPanel
    background_color: "#00f"
    icon_color: green
    icon_size: 200%
    title_color: red
    title_size: 200%

yup, you probably didnt read the docs.

there is no icon, icon_color, icon_size, title_color or title_size as setting.
from the docs:

navigate
A widget to navgigate to a new URL, intended to be used for switching between dashboards

Mandatory Arguments
Optional Arguments:
url - a url to navigate to. Use a full URL including the “http” part.
dashboard - a dashboard to navigate to e.g. MainPanel
title - the title displayed on the tile
args - a list of arguments.
skin - Skin to use with the new screen (for HADash URLs only)
For an arbitary URL, Args can be anything. When specifying a dashboard parameter, args have the following meaning:

timeout - length of time to stay on the new dashboard return - dashboard to return to after the timeout has elapsed.

Both timeout and return must be specified.

If adding arguments use the args variable do not append them to the URL or you may break skinning. Add arguments like this:

some_widget:
    widget_type: navigate
    title: Amazon
    url: http://amazon.com
    args:
      arg1: fred
      arg2: jim
or:

some_widget:
    widget_type: navigate
    title: Sensors
    dashboard: Sensors
    args:
      timeout: 10
      return: Main
Cosmetic Arguments
icon_active
icon_inactive
widget_style
title_style
title2_style
icon_style
1 Like

Thanks, the example app has a wrong code in it

would be helpfull if you say what you think is wrong. i cant see anything wrong.

it has icon and not icon_active, plus all other options that are not valid for widget navigate