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)
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 
## 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 LoveTouchand pictures used are:
Enjoy
Thank you very much! 
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 Try and error and HOURS of work 
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 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