Share your HADashboard setups

My dashboard:

1 Like

hi could you please share your yaml code for your dash that is a nice clean dashboard thankyou

This is jast a modified Obsydian skin, all credits to the author.
The variables.yaml:

white: "#fff"
red: "#ff0055"
green: "#aaff00"
blue: "#00aaff"
purple: "#aa00ff"
yellow: "#FAA916"
cyan: "#00BFFF"

gray_dark: "#444"
gray_medium: "#666"
gray_light: "#888"

#Page and widget defaults
text_style: "color: #fff"

#These are used for icons and indicators
style_inactive: "color: $white"
style_active: "color: $cyan"
style_active_warn: "color: $yellow"
style_info: "color: $cyan"
style_title: "color: $white"
style_title2: "color: $white"

# Alternate widget styles
# stripped is a transparent mod that removes the texture, border and drop shadows
# no_texture removes the texture and replaces it with a black background 
stripped: "background-image: none; background-color: rgba(0,0,0,0.6); border-style: solid; border-width: 2px; border-color: dodgerblue; box-shadow: none !important"
no_texture: "background: black; background-image: none; color: black; border-style: inset"

# Widget Default Definitions

scene_icon_on: fas-square
scene_icon_off: fas-square
scene_icon_style_active: $style_active
scene_icon_style_inactive: $style_inactive
scene_title_style: $style_title
scene_title2_style: $style_title2
scene_widget_style: $background_style
scene_state_text_style: $style_info

mode_icon_on: fas-arrows-alt
mode_icon_off: fas-arrows-alt
mode_icon_style_active: $style_active
mode_icon_style_inactive: $style_inactive
mode_title_style: $style_title
mode_title2_style: $style_title2
mode_widget_style: $background_style
mode_state_text_style: $style_info

script_icon_on: fas-th-large
script_icon_off: fas-th-large
script_icon_style_active: $style_active
script_icon_style_inactive: $style_inactive
script_title_style: $style_title
script_title2_style: $style_title2
script_widget_style: $stripped
script_state_text_style: $style_info

binary_sensor_icon_on: fas-bullseye as-spin
binary_sensor_icon_off: fas-minus
binary_sensor_icon_style_active: $style_active_warn
binary_sensor_icon_style_inactive: $style_inactive
binary_sensor_title_style: $style_title
binary_sensor_title2_style: $style_title2
binary_sensor_widget_style: $stripped
binary_sensor_state_text_style: $style_info

icon_title_style: $style_title
icon_title2_style: $style_title2
icon_widget_style: $stripped
icon_state_text_style: $style_info

device_tracker_icon_on: fas-user
device_tracker_icon_off: fas-user
device_tracker_icon_style_active: $style_active
device_tracker_icon_style_inactive: $style_inactive
device_tracker_title_style: $style_title
device_tracker_title2_style: $style_title2
device_tracker_widget_style: $stripped
device_tracker_state_text_style: $style_info

input_boolean_icon_on: fas-sliders-h
input_boolean_icon_off: fas-sliders-h
input_boolean_icon_style_active: $style_active
input_boolean_icon_style_inactive: $style_inactive
input_boolean_title_style: $style_title
input_boolean_title2_style: $style_title2
input_boolean_widget_style: $stripped
input_boolean_state_text_style: $style_info

switch_icon_on: fas-circle
switch_icon_off: far-circle
switch_icon_style_active: $style_active
switch_icon_style_inactive: $style_inactive
switch_title_style: $style_title
switch_title2_style: $style_title2
switch_widget_style: $stripped
switch_state_text_style: $style_info

lock_icon_on: fas-unlock-alt
lock_icon_off: fas-lock
lock_icon_style_active: $style_active_warn
lock_icon_style_inactive: $style_inactive
lock_title_style: $style_title
lock_title2_style: $style_title2
lock_widget_style: $background_style
lock_state_text_style: $style_info

cover_icon_on: fas-arrows-alt-v
cover_icon_off: fas-arrows-alt-v
cover_icon_style_active: $style_active_warn
cover_icon_style_inactive: $style_inactive
cover_title_style: $style_title
cover_title2_style: $style_title2
cover_widget_style: $background_style
cover_state_text_style: $style_info

clock_date_style: "color: $white; font-size: 150%"
clock_time_style: "color: $cyan"
clock_widget_style: $stripped


weather_main_style: "color: $cyan; font-size: 75%"
weather_unit_style: "color: $cyan; font-size: 200%"
weather_sub_style: "color: $white; font-size: 100%"
weather_widget_style: $stripped

weather_summary_title_style: $style_title
weather_summary_text_style: "font-family: Climacons-Font; font-size: 100px"
weather_summary_state_text_style: "color: $white"
weather_summary_widget_style: $stripped
weather_summary_container_style: ""

london_underground_title_style: "color: $white; font-size: 150%"
london_underground_text_style: "color: $white; font-size: 200%"
london_underground_state_text_style: "color: $white; font-size: 150%"
london_underground_widget_style: $background_style
london_underground_container_style: ""

label_title_style: $style_title
label_title2_style: $style_title2
label_text_style: $style_info
label_widget_style: $stripped
label_state_text_style: $style_info
label_container_style: ""

sensor_title_style: $style_title
sensor_title2_style: $style_title2
sensor_value_style: "color: $cyan; font-size: 200%"
sensor_text_style: "color: $cyan; font-size: 100%"
sensor_state_text_style: "color: $cyan; font-size: 100%"
sensor_unit_style: "color: $cyan; font-size: 170%"
sensor_widget_style: $stripped
sensor_container_style: ""

reload_icon_active: fas-spinner fa-spin
reload_icon_inactive: mdi-sync
reload_icon_active_style: $style_active
reload_icon_inactive_style: "color: $cyan"
reload_title_style: "color: $white"
reload_title2_style: $style_title2
reload_widget_style: $stripped

javascript_icon_active: fas-asterisk
javascript_icon_inactive: fas-asterisk
javascript_icon_active_style: $style_active
javascript_icon_inactive_style: "color: $white"
javascript_title_style: "color: $white"
javascript_title2_style: $style_title2
javascript_widget_style: $background_style

navigate_icon_active: fas-spinner fa-spin
navigate_icon_inactive: fas-cog
navigate_icon_active_style: $style_active
navigate_icon_inactive_style: $style_active
navigate_title_style: $style_title
navigate_title2_style: $style_title2
navigate_widget_style: $stripped

media_player_icon_play: mdi-play
media_player_icon_pause: mdi-pause
media_player_icon_stop: fas-stop
media_player_icon_up: mdi-volume-plus
media_player_icon_down: mdi-volume-minus
media_player_title_style: $style_title
media_player_media_title_style: $style_title2
media_player_album_style: $style_title2
media_player_artist_style: $style_title2
media_player_icon_style_active: "color: $cyan"
media_player_icon_style_inactive: "color: $white"
media_player_state_text_style: "color: $white"
media_player_units_style: "color: $white"
media_player_level_style: "color: $white"
media_player_level_up_style: "color: $white"
media_player_level_down_style: "color: $white"
media_player_widget_style: $stripped
media_player_icon_previous: mdi-skip-backward
media_player_icon_next: mdi-skip-forward
media_player_icon_style_previous: "color: $cyan"
media_player_icon_style_next: "color: $cyan"

light_icon_on: fas-circle
light_icon_off: fas-circle
light_icon_up: mdi-plus
light_icon_down: mdi-minus
light_title_style: $style_title
light_title2_style: $style_title2
light_icon_style_active: $style_active
light_icon_style_inactive: $style_inactive
light_state_text_style: $style_info
light_level_style: $style_inactive
light_level_up_style: $style_inactive
light_level_down_style: $style_inactive
light_widget_style: $stripped
light_unit_style:  $style_inactive

input_number_title_style: $style_title
input_number_title2_style: $style_title2
input_number_minvalue_style: $style_title
input_number_maxvalue_style: $style_title
input_number_value_style: $style_title2
input_number_slider_style: "background: rgba(0,191,255,0.5)" 
input_number_cbutton_style: ""
input_number_widget_style: $stripped

climate_icon_up: fas-plus
climate_icon_down: fas-minus
climate_title_style: $style_title
climate_title2_style: $style_title2
climate_level_style: "color: $cyan; font-size: 300%"
climate_unit_style: "color: $cyan; font-size: 95%"
climate_level_up_style: $style_inactive
climate_level_down_style: $style_inactive
climate_widget_style: $background_style
climate_state_text_style: $white
climate_level2_style: "color: $cyan; font-size: 95%"
climate_unit2_style: "color: $cyan; font-size: 65%"

group_icon_on: fas-circle
group_icon_off: far-circle
group_icon_up: fas-plus
group_icon_down: fas-minus
group_title_style: $style_title
group_title2_style: $style_title2
group_icon_style_active: $style_active
group_icon_style_inactive: $style_inactive
group_state_text_style: $style_info
group_level_style: "$style_inactive"
group_level_up_style: "$style_inactive"
group_level_down_style: "$style_inactive"
group_widget_style: $background_style
group_unit_style: "$style_inactive"

iframe_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"
iframe_widget_style: $stripped

alarm_title_style: $style_title
alarm_widget_style: $stripped
alarm_title2_style: $style_title2
alarm_state_style: "color: $cyan;font-size: 100%"
alarm_panel_state_style: "color: $cyan"
alarm_panel_code_style: "color: $cyan"
alarm_panel_background_style: "background-color: rgba(0,0,30,1)"
alarm_panel_button_style: "color: $cyan; background-color: rgba(0,0,50,1)"

camera_widget_style: $background_style
camera_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"

gauge_widget_style: $stripped
gauge_title_style: $style_title
gauge_title2_style: $style_title2
gauge_low_value_color: "$cyan"
gauge_med_value_color: "$cyan"
gauge_high_value_color: "$cyan"
gauge_value_bgcolor: "$gray_medium"
gauge_text_color: "$cyan"

rss_title_style: $style_title
rss_title2_style: $style_title2
rss_text_style: "color: $cyan"
rss_widget_style: $background_style

input_select_title_style: $style_title
input_select_title2_style: $style_title2
input_select_widget_style: $stripped
input_select_select_style: "background-color:rgba(100,100,100,0.5);color:dodgerblue;"
input_select_container_style: ""

input_slider_icon_up: mdi-plus
input_slider_icon_down: mdi-minus
input_slider_title_style: $style_title
input_slider_title2_style: $style_title2
input_slider_unit_style: $style_info
input_slider_level_style: $style_info
input_slider_level_up_style: $style_inactive
input_slider_level_down_style: $style_inactive
input_slider_widget_style: $stripped
input_slider_value_style: ""

new_input_number_title_style: $style_title
new_input_number_title2_style: $style_title2
new_input_number_minvalue_style: $style_title
new_input_number_maxvalue_style: $style_title
new_input_number_value_style: $style_title
new_input_number_slider_style: "background: rgba(0,191,255,0.5)" 
new_input_number_button_style: ""
new_input_number_widget_style: $background_style

vertical_input_number_title_style: $style_title
vertical_input_number_title2_style: $style_title2
vertical_input_number_minvalue_style: $style_title
vertical_input_number_maxvalue_style: $style_title
vertical_input_number_value_style: $style_title
vertical_input_number_slider_style: ""
vertical_input_number_container_style: ""
vertical_input_number_widget_style: $background_style

radial_widget_style: "background: none"

thermo_widget_style: "background: none"

heater_icon_on: fas-fire
heater_icon_off: fas-fire
heater_title_style: $style_title
heater_title2_style: $style_title2
heater_slider_style: ""
heater_widget_style: $background_style
heater_icon_style_active: $style_active
heater_icon_style_inactive: $style_inactive

wunderground_main_style: "color: $orange"
wunderground_unit_style: "color: $orange"
wunderground_sub_style: "color: $blue"
wunderground_widget_style: $background_style

vacuum_title_style: $style_title
vacuum_title2_style: $style_title2
vacuum_widget_style: $stripped #"background-color: rgba(0,191,255,.4); border-style: solid; border-width: 2px; border-color: dodgerblue; box-shadow: none !important"
vacuum_state_text_style: $style_title2

swipe_light_title_style: $style_title
swipe_light_title2_style: $style_title2
swipe_light_widget_style: $stripped
swipe_light_level_style: "font-size: 15px;"
swipe_light_unit_style: "font-size: 10px;"
swipe_light_button_style: ""
swipe_light_slider_style: "background: rgba(0,191,255,0.5)"
swipe_light_icon_on: mdi-lightbulb
swipe_light_icon_off: mdi-lightbulb
swipe_light_icon_style_active: "font-size: 250%!important; $style_active"
swipe_light_icon_style_inactive: "font-size: 250%!important; $style_inactive"

media_select_title_style: $style_title
media_select_title2_style: $style_title2
media_select_widget_style: $stripped
media_select_select_style: "background-color:rgba(100,100,100,0.5);color:dodgerblue;"
media_select_container_style: ""

media_with_volume_icon_style_active: $style_active
media_with_volume_icon_style_inactive: $style_inactive
media_with_volume_title_style: $style_title
media_with_volume_style: $style_title2
media_with_volume_widget_style: $stripped
media_with_volume_state_text_style: $style_info
media_with_volume_slider_style: "background: rgba(0,191,255,0.5)"
1 Like

Hi Rene, where did you get temperature icons level? in your settings in the above post? I do like but I’m unable to find out. Thanks

Using Full Kiosk Browser app on a tablet and created a new lovelace view for it.
Here are some screenshots:

and some popup cards:

Btw, i am keeping my tablet in portrait mode because it fitted better my ideas (using also 2 columns custom layout)

Here is my setup:

2 Likes

What is the code of the switches? Awesome!!!

Hi, i wasn’t able to create them only from css or cards, so i used a picture background for them, here is the code + the pics if someone wants them…they were inspired from the guy who is working to create a HA remote, cheers to him :slight_smile:

## Start of LoveTouch
type: "custom:swipe-card"
cards:
  - type: "custom:vertical-stack-in-card"
    title: Lights
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: switch.floor
            name: Floor
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/light-off.gif
              "on": /local/img/light-on.gif

          - type: picture-entity
            entity: switch.bar
            name: Bar
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/light-off.gif
              "on": /local/img/light-on.gif

          - type: picture-entity
            entity: switch.table
            name: Table
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/light-off.gif
              "on": /local/img/light-on.gif

        ##secondline
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: switch.couch
            name: Couch
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/light-off.gif
              "on": /local/img/light-on.gif

          - type: picture-entity
            entity: switch.moss
            name: Moss
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/light-off.gif
              "on": /local/img/light-on.gif

          - type: picture-entity
            entity: group.living_lights
            name: Living
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/light-off.gif
              "on": /local/img/light-on.gif

        ##third line
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: switch.door
            name: Door
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/light-off.gif
              "on": /local/img/light-on.gif

          - type: picture-entity
            entity: switch.dressing
            name: Dressing
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/light-off.gif
              "on": /local/img/light-on.gif

          - type: picture-entity
            entity: switch.bath
            name: Bathroom
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/light-off.gif
              "on": /local/img/light-on.gif

  - type: custom:vertical-stack-in-card
    title: Media devices
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: media_player.philips_tv
            name: Living TV
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/media_player-off.gif
              "idle": /local/img/media_player-on.gif
              "on": /local/img/media_player-on.gif

          - type: picture-entity
            entity: media_player.kitchen_tv
            name: Kitchen TV
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/media_player-off.gif
              "idle": /local/img/media_player-on.gif
              "on": /local/img/media_player-on.gif

          - type: picture-entity
            entity: media_player.bedroom_tv
            name: BedroomTV
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/media_player-off.gif
              "idle": /local/img/media_player-on.gif
              "on": /local/img/media_player-on.gif

      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: group.all_tvs
            name: All TVs
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/media_player-off.gif
              "idle": /local/img/media_player-on.gif
              "on": /local/img/media_player-on.gif

          - type: picture-entity
            entity: media_player.samsung_soundbar
            name: Soundbar
            tap_action:
              action: none
            hold_action:
              action: toggle
            show_state: false
            state_image:
              "off": /local/img/music-off.gif
              "on": /local/img/music-on.gif


          - type: picture-entity
            entity: media_player.robotelu_2
            name: Echo
            tap_action:
              action: more-info
            show_state: false
            state_image:
              "off": /local/img/music-off.gif
              "standby": /local/img/music-off.gif
              "on": /local/img/music-on.gif

##end of LoveTouch

and pictures used are:
light-off light-on media_player-off media_player-on music-off music-on

Enjoy :slight_smile:

:+1: Thank you very much! :grinning:

i think you want the gauge widget. (but in case i am wrong then you can also checkout temperature and radial)

@an20dei this topic is about HAdashboard, not about lovelace.

Hi Rene thanks. It was GAUGE! Many thnaks

@ReneTode I’ve some issues with alarm panel. It pops up directly to put in the code but it’s wrongly scaled and I can’t close it …any idea ?

probably something to do with a skin.

What dashboard are you using? looks awesome!

Hadashboard with iframe and custom css

Way out of my league, looks awesome tho!

Not really… i also am not a genious :slight_smile: Try and error and HOURS of work :stuck_out_tongue:

I am actually trying out some of the mobile apps. The ONLY app I am really convinced of is HomeHabit. Unfortunately this project is not really known here in this community I fear:

Here some screens (it’s shared from the forum of the app :slight_smile: Just to push those project a bit here.):

hmm project rotini was started ages ago and those who signed up at first sometimes needed to wait for a long time before there was any response.

for android apps i think that ariela has way better changes, because the guy building that is almost daily on it and that project is growing fast.

I completely agree…I also tested it ages ago but since then there were a lot of improvement and features. As I’m fan of design I chose those

But you are right the project is realllllyyy slowly and not really active bit see:

Looks awesome I think … I just use this app for mobile use and it really looks pretty cool to me