Share your Tablet/Desktop Dashboards

It‘s sidebar-card

https://community.home-assistant.io/t/lovelace-custom-sidebar-card/174348

Simple and clean! Could you share the yaml of this dashboard?

Good time of the day. I really liked your Lovelace theme. Reminds me of the color scheme from the TRON movie. I would like to ask you if you can share the code. I would be very grateful.

Nice Board, could you share your code ?

VG
Boxi

mind sharing the code for one of those 3 (i guess mushroom)-cards at the top?

hi

did you get chance to share your dashboard? what is used for the sidebar assistant?

thanks

Looks cool! How did you do the clock (18:16) which doesn’t look like a card?

Cheers,

Ray

1 Like

Hi, im so sorry for late reply. My focus have been away from HA after completing the dashboard, so I have not really been on this site since. But anyway, if it still is any help:

Pressing “ute”, “stue” or “gang” simply changes the contents of the graph, allowing me to switch between different rooms in the house (these 3 translates to outside, living room and hall), and see the temperature and humidity the last 24 hours. “Værmelding” lets me see the forecast temperature, humidity and wind speed for the next 24 hours.

The helper simply changes its value when switching between rooms (1-8), and I am using that value in a conditional CSS line that changes the box shadow to that blue glow to indicate the active page.
For example:

box-shadow: {{ '0px 0px 10px 5px rgba(10,100,140,1), inset 1px 1px 1px 0px rgba(255,255,255,0.2)' if is_state('input_number.vaermelding_hjelper', '4.0') else 'inset 1px 1px 1px 0px rgba(255,255,255,0.2)' }};

Pressing “gang” sets the helper to 4, and then the blue glow on page button “gang” when I am viewing that page.

Thank you! :slight_smile:
Im sorry for late reply, but I hope i can help anyway:

“selected_scene_light_notification” is used in the same way in my response to Lukeltj. Ii is simply a input number from 1-7 which I am using in a conditional CSS rule, that sets the blue glow around the active scene.

box-shadow: {{ '0px 0px 10px 5px rgba(10,100,140,1), inset 1px 1px 1px 0px rgba(255,255,255,0.2)' if is_state('input_number.valgt_scene_lys_melding', '1.0') else 'inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' }};

“script.ok_og_send_onsket_temp_emilie_hjemme” is again simply increasing a input number by +1 (which I am using to visually represent desired temperature in that room, on the heating page). Then after 0.5s (to give time for several presses/degrees change before acting), it calls for another service called “Send Ønsket Temperatur til Emilie Hjemme”. This uses the number previously set, and calls a climate.set_temperature service, which sends the desired temperature to my ADAX panel ovens:

service: climate.set_temperature
data_template:
  temperature: "{{ states(\"input_number.onsket_temperatur_emile_hjemme\") | float}}"
target:
  entity_id: climate.soverom_emilie

This changes the desired temperature in that room, in that desired heating “scene” (in this case hjemme/home). I have set up 3 heating “scenes”, called (translated:) home, away and night. Changing the desired temperature changes only the desired temperature of the active “scene”.
In addition i have set up an automatic mode, which changes between these “scenes” based on time of day and day of week.
“script.senk_og_send_temp_emilie_natt” will then lower the desired temperature on that specific room by -1, in the scene “natt” (night).

This way i can very easily make adjustments to the automatic heating of the home, without having to go in and rewrite any code or manually adjusting any automations.

I think this is an incredible dashboard. I am a newby in HA, and am playing with creating a dashboard. I however struggle with getting everything on a grid, and with identical size “boxes” as you have in your dashboard. How did you manage to control the size and location of all “buttons”? Can you share some insights on this?

Hi did you can share the script for lys_scene_tv_kos ? thank

Hi Freibiergesicht

Can you please Post the Otter areas of your Dashboard?

Mike

Absolutely, sorry for the late reply. The input number is simply used to “illuminate” the corresponding scene button.

alias: Lys Scene TV kos
sequence:
  - service: scene.turn_on
    target:
      entity_id: scene.tv_kos
    data: {}
  - service: input_number.set_value
    data:
      value: 3
    target:
      entity_id: input_number.valgt_scene_lys_melding
  - delay:
      hours: 0
      minutes: 0
      seconds: 5
      milliseconds: 0
mode: restart
icon: mdi:television

Very impressive work! I’m curious what tablet size you are using?

Also your original post was a year and a half ago now - have you made any major updates/efficiencies with the config in that time, or is it still functioning well for you?

I’m not quite sure if you are referring to my post, but your comment popped up in my notification window so I am going to go ahead and guess you are. :smiley:

I’m using a 10.1" Samsung tablet, with a 3D printed slim mount with integrated slim USB power cable.

I can actually not remember to have done any revisions/updates after commissioning the dashboard, except for two minor updates caused by HA updates and Integration updates:

  • HA changed their button border defaults, which made me have to rework most of my buttons to revert the change. This took me in total maybe 15 minutes.
  • A Deconz update renamed most of my Zigbee units, so I had to do some small revisions due to that. I can’t believe this took me more than an hour.

Other than this, every single HA update have gone smoothly without breaking anything, and everything works as expected. I am actually quite impressed, for a DIY solution such as HA.

1 Like

Ah that’s great! And yes the comment was for you @gasolli …thanks for responding! You did a phenomenal job…I’m completing stealing it and reworking it with my own entities! :grinning:

I was wondering about the tablet size because I have a FireHD10 which has the same 10.1 screen size and resolution, but your configuration file as is gave me too big of a dashboard. I had to lower all the sizes but got it fitting nicely for me now!

I definitely noticed the border change that put white borders around everything so I’ve been manually adding a ‘border: none’ to all the styles.

What theme do you use? I’ve kept it on just “home assistant” as that seemed to match the right default icon light blue colors but wasn’t sure.

Thanks for sharing your file, I’m sure it took a lot of time to get just right. Like I said I’m adopting it for my main tablet now, but still learning a lot as I have to modify things to fit my specific use cases!

Thank you so much, would love to see what you would make with the layout :smiley:

Could the sizing issue of the dashboard be due to the navigation bar? I am hiding all navigation bars on my dashboard, both sidebar and pagebar. If not, are you sure the resolution is the same?

I definitely noticed the border change that put white borders around everything so I’ve been manually adding a ‘border: none’ to all the styles

Yeah, I did the same thing :slight_smile:

As for the themes, I actually have no idea if any themes are in use. Early on in the process I tried with some themes, but I cant remember if they ended up in the final product (or even where to look to find out). I do have two theme packs installed though, “Caule themes pack 1” and “Kibibit”.

Would you like to share the script with me?




Hey, very clean dashboard!

Could you please share the configuration? I’ve tried to recreate the sidebar, but I just don’t get the bottom like you do. Also, how did you do the colours? Is it a theme or also in the config?

Thank you very much.