You can find all changed files here: https://github.com/tjntomas/HADashboard-widgets/tree/master/debug
ok, so iâm still getting the same errors (cache cleared) however the two lights that I have configured with this widget are showing an icon picture of a home. and displaying title. but the rest of the icons are still blank.
I downloaded The files you shared, and the above is still true.
ok, do you mind posting the .dash file and the whole variables.yaml file? Also, does the two errors say anything else apart from the url?
Of course not:
Variables.yaml:
# 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
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"
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"
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
#swipe_light_title_style: $style_title
#swipe_light_title2_style: $style_title2
#swipe_light_widget_style: $background_style
#swipe_light_level_style: "font-size: 15px;"
#swipe_light_unit_style: "font-size: 10px;"
#swipe_light_button_style: ""
#swipe_light_slider_style: "background: rgba(100,100,100,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"
livingroom.dash:
title: Livingroom
widget_dimensions: [110, 110]
widget_size: [1, 1]
widget_margins: [15, 11]
columns: 8
global_parameters:
use_comma: 1
precision: 1
layout:
- weather(3x3), clock(5x2)
-
- mediaplayerlivingroomtv, mediaplayerlivingroomtvinput, mediaplayerdenon, mediaplayerdenoninput
- lightcorner (2x2), lightcross , lightrgb, lightrecliner, lightsofa, lightprojector, lightdiningroom
- spacer, spacer, lightporch, lightbackdoor, sensorfrontdoor, sensorbackdoor
- reload, climateheating(2x1), load_livingroom, load_kitchen, spacer, fanlivingroom, fanextractor
# temperaturelivingroom, temperaturekitchen, fanlivingroom, fanextractor, temperatureserver
# motionlivingroom, motiondiningroom, motionkitchen, motionutility, motionbathroom, lightporch, lightbackdoor
# lightrgb, lightdiningroom, lightindoor, lightdownstairs, lightaccent, lightkitchenfloor, lightoutdoor
# include: panelnavigation
clock:
widget_type: clock
time_format: 24hr
show_seconds: 1
time_style: "color: orange; font-size: 105pt; font-weight: bold;"
date_style: "font-size: 16pt; font-weight: bold;"
reload:
widget_type: reload
title: Reload
weather:
widget_type: weather
units: "°C"
prefer_icons: 1
main_style: "font-size: 200%; font-weight: bold;"
sub_style: "font-size: 130%; font-weight: bold;"
unit_style: "font-size: 130%;"
show_forecast: 1
forecast_title: Tomorrow
sensors:
icon: sensor.dark_sky_icon
temperature: sensor.dark_sky_temperature
apparent_temperature: sensor.dark_sky_apparent_temperature
humidity: sensor.dark_sky_humidity
precip_probability: sensor.dark_sky_precip_probability
precip_intensity: sensor.dark_sky_precip_intensity
precip_type: sensor.dark_sky_precip
pressure: sensor.dark_sky_pressure
wind_speed: sensor.dark_sky_wind_speed
wind_bearing: sensor.dark_sky_wind_bearing
forecast_icon: sensor.dark_sky_icon_1d
forecast_temperature_min: sensor.dark_sky_overnight_low_apparent_temperature_1d
forecast_temperature_max: sensor.dark_sky_daytime_high_apparent_temperature_1d
forecast_precip_probability: sensor.dark_sky_precip_probability_1d
forecast_precip_type: sensor.dark_sky_precip_1d
load_livingroom:
widget_type: navigate
title: Livingroom
icon_active: mdi-sofa
icon_inactive: mdi-sofa
dashboard: "Livingroom"
load_kitchen:
widget_type: navigate
title: Kitchen
icon_active: mdi-food
icon_inactive: mdi-food
dashboard: "Kitchen"
load_bedroom:
widget_type: navigate
title: Bedroom
icon_active: mdi-sleep
icon_inactive: mdi-sleep
dashboard: "Bedroom"I donât see the widget definition for your swipe_light widgets? Do you have them in s separate file?
sorry, yes i have each of them in thier own file:
lightdiningroom.yaml:
widget_type: swipe_light
title: Diningroom
entity: light.diningroom
icon_on: mdi-lightbulb-on
icon_off: mdi-lightbulb
and lightcorner.yaml:
widget_type: swipe_light
title: Corner
entity: light.corner_lights
icon_on: mdi-lightbulb-on
icon_off: mdi-lightbulbEverything looks fine.
Did you try adding &recompile=1 to the end of the url for your dasboard on the iPad just to make sure the widgets are recompiled?
Anything happens when you try moving the slider or clicking on the small round button top right on the widget?
and try deleting all files in compiled folder in the appdaemon folder?
Click the arrow in front of âSyntax Error Unexpected keywordâ. It should display some more debug info, Same with âReference errorâ.
The syntax error and reference errors show the same as I wrote above. I cleared the compiled folder, and that didnât make a difference. Other than the picture and title being wrong it is also working on android.
Ok, last try for today:
replace the last function in the baseswipe_light.js file with
function GetGradient(r,g,b,i){
return "red"
}
It might be that the iPadâs javascript version does not like newlines in the js code.
Nope. No change. Also the sliders do nothing on the iPads, nor do the buttons.
So i think iâve made a little progress on the debugger, - Sorry i wasnât sure how to use it.
Iâve got the following two errors. I donât think i have any reference to base weather though.
you got a waether widget, so you use baseweather 
just to make sure you are not looking in the wrong direction:
does the dashboard work on the ipad, when you dont use the swipe_light widget, but normal light widgets?
its easier to debug custom widgets with a blank dashboard, containing only the widget you want to try, so you know there are no other problems.
Just created a new dash with just the swipe light in, and it makes no difference if I have a light using the swipe or not, it doesnât load as soon as baseswipe_light is added to custom_widgets.
The error syntax is still the same.
Iâm not a programmer, but it looks like it doesnât like the part above async function colour_wheel_touch, as if I delete out this block (lines 287 - 323 causing the next block to move up), it errors out on that instead.
Going back to your original downloads, I added a semicolon after async on lines
288
326
357
386
This allows the pages to load as expected, the buttons are also working as I would have hoped.
Would it possible to add in the âeffectâ feature somehow?
1 Like
i could add a scrollable pop-up to select effects. Should be easy.