I’ve tried it and it is wrking perfectly.
Thank you very much! 
1 Like
Hello!
Unfortunately I cannot use your addon and I spent 4+ hours to fix my error. I fully followed your guide but it still does not work (latest AppDaemon 4 (v0.4.1)
Could you help me please?
Please post the widget definition from your dashboard file and I will have a look.
Thank you!
dash file:
vacuum:
widget_type: vacuum
entity: vacuum.xiaomi_vacuum_cleaner
title: Roborock S50 control panel
layout:
- weather.dark_sky (2x2), sensor_xxx, sensor.temperature_xxx, sensor.temperature_xxx, clock(2x1), sensor.wallpanel_xxx
- light.living_room_light, vacuum(3x2),vacuum_map(2x2)
@tjntomas: Should I post more content from my codebase?
Sorry I forgot to mention that my AppDaemon 4 addon’s log does not contain any bug warning or error.
I have also created a new skin in the custom_css folder and also added the two lines without any success. 
Would you mind commenting out everything but the vacuum widget in the layout section like this to isolate the errors?
layout:
# - weather.dark_sky (2x2), sensor_xxx, sensor.temperature_xxx, sensor.temperature_xxx, clock(2x1), sensor.wallpanel_xxx
# - light.living_room_light, vacuum(3x2),vacuum_map(2x2)
- vacuum(3x2)
I got the following error:
2021-02-07 20:53:13.771822 WARNING AppDaemon: Variable definition not found in CSS Skin variables: $vacuum_title_style
2021-02-07 20:53:13.772550 WARNING AppDaemon: Variable definition not found in CSS Skin variables: $vacuum_widget_style
Just a sidenote: I have Roborock S50 with Valetudo 0.6.1
then you didnt add the variables correctly to the file myskin/variables.yaml
This is my variables.yaml.file contains the following:
# Widget Default Definitions
vacuum_widget_style: $background_style
vacuum_title_style: $style_title
that should be correct.
but if you get that warning, everytime you use skin=myskin, then you probably edit the wrong variables.yaml somehow.
because AD doesnt find them there.
This is my path to the files: \\config\appdaemon\custom_css\myskin
This is my URL: http:///Hello?skin=myskin
sounds fine.
just to make sure i advise to
- restart HA/AD/the device running it
- clear all cache
- clear all files from \config\appdaemon\compiled (but leave the dir structure.)
3 probably isnt possible in hassio cases.
I did it but still got the same error:
2021-02-07 23:25:26.819456 WARNING AppDaemon: Variable definition not found in CSS Skin variables: $vacuum_title_style
2021-02-07 23:25:26.820652 WARNING AppDaemon: Variable definition not found in CSS Skin variables: $vacuum_widget_style
thats only possible if
- you have added the vars wrong (indention perhaps) or
- you edit the wrong files.
some people have more then 1 config area, because of backups, install problems, changes in the past, etc.
AD just doesnt notice the changes you made.
please add the whole variables.yaml so i can see if the error is there.
and please also tell what kind of environment you work in (because you use window style paths)
I have hass.io based system with the latest AppDaemon 4 (0.4.2) - running on RPi 4. (i used smb addon that’s why you saw windows path)
Home Assistant version is 2021.1.5, and the OS version is 5.10.
This is my variables.yaml file:
# Core styles. Reference these wherever possible rather than making custom
# versions of red, green, etc. This will make it easier to quickly change the
# overall pallette of the dashboard just by overriding these variables.
# This file contains the application "defaults".
# IF YOU WANT TO CUSTOMIZE styleS FOR YOUR OWN INSTANCE, DO NOT EDIT THIS FILE.
# ----------------------------------------------------------------------------
# Custom styles instructions
# 1. Create a new directory under custom_css
# 2. copy these files over
# 3. EDIT
# 4. Select the new dir as the "skin" argument of any
# dashboards you want to use it
# ----------------------------------------------------------------------------
#
# Custom head includes - should be a YAML List, e.g.:
#
#head_includes:
# - some include
# - some other include
#
# Text will be included verbatim in the head section of the doc, use for styles,
# javascript or 3rd party css etc. etc.
#
# It is your responsibility to ensure the HTML is correct
#
head_includes:
- <! head tags go here ->
#
# Custom body includes - should be a YAML List, e.g.:
#
#body_includes:
# - some include
# - some other include
#
# Text will be included verbatim in the body section of the doc, use it for JavaScript
#
# It is your responsibility to ensure the HTML is correct
#
body_includes:
- <! body tags go here ->
#
# Styles
#
white: "#fff"
red: "#ff0055"
green: "#aaff00"
blue: "#00aaff"
purple: "#aa00ff"
yellow: "#ffff00"
orange: "#ffaa00"
gray_very_dark: "#333"
gray_dark: "#444"
gray_medium: "#666"
gray_light: "#888"
#Page and widget defaults
background_style: "background-color: #444"
text_style: "color: #fff"
#These are used for icons and indicators
style_inactive: "color: $gray_light"
style_active: "color: $green"
style_active_warn: "color: $red"
style_info: "color: $blue"
style_title: "color: $white"
style_title2: "color: $white"
# Widget Default Definitions
vacuum_widget_style: $background_style
vacuum_title_style: $style_title
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: "color: $white"
sequence_icon_on: fas-square
sequence_icon_off: fas-square
sequence_icon_style_active: $style_active
sequence_icon_style_inactive: $style_inactive
sequence_title_style: $style_title
sequence_title2_style: $style_title2
sequence_widget_style: $background_style
sequence_state_text_style: "color: $white"
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: "color: $white"
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: $background_style
script_state_text_style: "color: $white"
binary_sensor_icon_on: fas-bullseye
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: $background_style
binary_sensor_state_text_style: "color: $white"
icon_title_style: $style_title
icon_title2_style: $style_title2
icon_widget_style: $background_style
icon_state_text_style: "color: $white"
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: $background_style
device_tracker_state_text_style: "color: $white"
person_icon_on: fas-user
person_icon_off: fas-user
person_icon_style_active: $style_active
person_icon_style_inactive: $style_inactive
person_title_style: $style_title
person_title2_style: $style_title2
person_widget_style: $background_style
person_state_text_style: "color: $white"
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: $background_style
input_boolean_state_text_style: "color: $white"
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: $background_style
switch_state_text_style: "color: $white"
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: "color: $white"
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: "color: $white"
clock_date_style: "color: $white"
clock_time_style: "color: $purple"
clock_widget_style: $background_style
weather_main_style: "color: $orange"
weather_unit_style: "color: $orange"
weather_sub_style: "color: $blue"
weather_widget_style: $background_style
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: $background_style
weather_summary_container_style: ""
london_underground_title_style: "color: $white"
london_underground_text_style: "color: $white"
london_underground_state_text_style: "color: $white;"
london_underground_widget_style: $background_style
london_underground_container_style: ""
label_title_style: $style_title
label_title2_style: $style_title2
label_text_style: "color: $white"
label_state_text_style: "color: $white"
label_widget_style: $background_style
label_container_style: ""
sensor_title_style: $style_title
sensor_title2_style: $style_title2
sensor_value_style: "color: $blue; font-size: 250%"
sensor_text_style: "color: $white; font-size: 100%"
sensor_state_text_style: "color: $white; font-size: 100%"
sensor_unit_style: "color: $blue; font-size: 100%"
sensor_widget_style: $background_style
sensor_container_style: ""
alarm_title_style: $style_title
alarm_title2_style: $style_title2
alarm_state_style: "color: $white; font-size: 100%"
alarm_widget_style: $background_style
reload_icon_active: fas-spinner fa-spin
reload_icon_inactive: fas-sync
reload_icon_active_style: "color: $white"
reload_icon_inactive_style: "color: $white"
reload_title_style: $style_title
reload_title2_style: $style_title2
reload_widget_style: $background_style
javascript_icon_active: fas-asterisk
javascript_icon_inactive: fas-asterisk
javascript_icon_active_style: "color: $white"
javascript_icon_inactive_style: "color: $white"
javascript_title_style: $style_title
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: "color: $white"
navigate_icon_inactive_style: "color: $white"
navigate_title_style: $style_title
navigate_title2_style: $style_title2
navigate_widget_style: $background_style
media_player_icon_play: fas-play
media_player_icon_pause: fas-pause
media_player_icon_up: fas-plus
media_player_icon_down: fas-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: $green"
media_player_icon_style_inactive: "color: $gray_light"
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: $gray_light"
media_player_level_down_style: "color: $gray_light"
media_player_widget_style: $background_style
media_player_icon_previous: fas-step-backward
media_player_icon_next: fas-step-forward
media_player_icon_style_previous: "color: $gray_light"
media_player_icon_style_next: "color: $gray_light"
light_icon_on: fas-circle
light_icon_off: far-circle
light_icon_up: fas-plus
light_icon_down: fas-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: "color: $white"
light_level_style: "color: $white"
light_unit_style: "color: $white"
light_level_up_style: "color: $gray_light"
light_level_down_style: "color: $gray_light"
light_widget_style: $background_style
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_title
input_number_slider_style: "-webkit-appearance: none"
input_number_container_style: ""
input_number_widget_style: $background_style
climate_icon_up: fas-plus
climate_icon_down: fas-minus
climate_title_style: $style_title
climate_title2_style: $style_title2
climate_level_style: "color: $blue"
climate_unit_style: "color: $blue"
climate_level_up_style: "color: $gray_light"
climate_level_down_style: "color: $gray_light"
climate_widget_style: $background_style
climate_level2_style: "color: $blue"
climate_unit2_style: "color: $blue"
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: "color: $white"
group_level_style: "color: $white"
group_level_up_style: "color: $gray_light"
group_level_down_style: "color: $gray_light"
group_widget_style: $background_style
group_unit_style: "color: $white"
iframe_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"
iframe_widget_style: $background_style
alarm_title_style: "color: $blue"
alarm_widget_style: $background_style
alarm_title2_style: $style_title2
alarm_state_style: "color: $white;font-size: 100%"
alarm_panel_state_style: "color: $white"
alarm_panel_code_style: "color: $white"
alarm_panel_background_style: "background-color: $gray_dark"
alarm_panel_button_style: "background-color: $gray_medium"
camera_widget_style: $background_style
camera_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"
gauge_widget_style: $background_style
gauge_title_style: $style_title
gauge_title2_style: $style_title2
gauge_low_value_color: "$blue"
gauge_med_value_color: "$blue"
gauge_high_value_color: "$blue"
gauge_value_bgcolor: "$gray_medium"
gauge_text_color: "$blue"
rss_title_style: $style_title
rss_title2_style: $style_title2
rss_text_style: "color: $blue"
rss_widget_style: $background_style
input_select_title_style: $style_title
input_select_title2_style: $style_title2
input_select_widget_style: $background_style
input_select_select_style: "background-color: #999;color:black"
input_select_container_style: ""
input_slider_icon_up: fas-plus
input_slider_icon_down: fas-minus
input_slider_title_style: $style_title
input_slider_title2_style: $style_title2
input_slider_level_style: "color: $blue"
input_slider_unit_style: "color: $blue"
input_slider_level_up_style: "color: $gray_light"
input_slider_level_down_style: "color: $gray_light"
input_slider_widget_style: $background_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: "-webkit-appearance: none"
new_input_number_container_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
light_with_brightness_icon_on: mdi-lightbulb
light_with_brightness_icon_off: mdi-lightbulb
light_with_brightness_title_style: $style_title
light_with_brightness_title2_style: $style_title2
light_with_brightness_slider_style: ""
light_with_brightness_widget_style: $background_style
light_with_brightness_icon_style_active: $style_active
light_with_brightness_icon_style_inactive: $style_inactive
light_with_colorpicker_icon_on: mdi-lightbulb
light_with_colorpicker_icon_off: mdi-lightbulb
light_with_colorpicker_title_style: $style_title
light_with_colorpicker_title2_style: $style_title2
light_with_colorpicker_button_style: ""
light_with_colorpicker_widget_style: $background_style
light_with_colorpicker_icon_style_active: $style_active
light_with_colorpicker_icon_style_inactive: $style_inactive
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
input_text_title_style: $style_title
input_text_title2_style: $style_title2
input_text_text_style: "color: $white; font-size: 100%"
input_text_widget_style: $background_style
input_text_container_style: ""
input_datetime_title_style: $style_title
input_datetime_title2_style: $style_title2
input_datetime_date_style: "color: $white; font-size: 100%"
input_datetime_time_style: "color: $white; font-size: 100%"
input_datetime_widget_style: $background_style
input_datetime_container_style: ""
I found a new weird thing: the \config\appdaemon\compiled\css\myskin directory did not contain the variables.yaml file… I put it manually but still does not work . 
thats not wierd, because it shouldnt contain variables.yaml at all.
everything in the compiled directory are temperary files.
thats why i said that you should delete all files there.
the variables.yaml seems ok.
it might be possible that you use a different user to edit the files with samba, then the user that starts AD. the result would be that AD doesnt recompile because it has no right to view the skin files. and in that case it uses the existing files.
so at least clear all files from ALL subdirectories inside the compiled directory.
I have found the problem but not the solution.
The problem is that the http://xxx.xxx.xxx.xxx:5050/custom_css/dashboard.css gives me HTTP 404 Not found error. What am I doing wrong?
probably because it doesnt exist.
dashboard.css is normally in a skin directory
so normally you should look at: http://xxx.xxx.xxx.xxx:5050/custom_css/your_skin/dashboard.css
but nowadays that isnt neccesary anymore because you can use the web directory for it.
config/web/your.file