page_id: clock_config image: /local/custom_ui/floorplan/clock_config.svg stylesheet: /local/custom_ui/floorplan/clock.css variables: - name: floorplan.hours - name: floorplan.minutes defaults: hover_over: false more_info: false startup: action: - service: floorplan.variable_set data: variable: floorplan.hours value_template: '${parseInt(entities["sensor.clock_stacey_alarm_time"].state.slice(0, 2)) ? parseInt(entities["sensor.clock_stacey_alarm_time"].state.slice(0, 2)): "00"}' - service: floorplan.variable_set data: variable: floorplan.minutes value_template: '${parseInt(entities["sensor.clock_stacey_alarm_time"].state.slice(3, 5)) ? parseInt(entities["sensor.clock_stacey_alarm_time"].state.slice(3, 5)): "00"}' rules: - element: floorplan.clock_button action: service: floorplan.page_navigate data: page_id: clock - entity: sensor.clock_stacey_alarm_time text_template: '${entity.state ? entity.state.slice(0, 5) : "00:00"}' - entities: - floorplan.hours - floorplan.minutes text_template: '${("0" + entity.state).slice(-2)}' - entity: floorplan.hours element: input_number.alarm_time_hours_up action: service: floorplan.variable_set data: variable: floorplan.hours value_template: '${(parseInt(entity.state) + 1) % 24}' - entity: floorplan.hours element: input_number.alarm_time_hours_down action: service: floorplan.variable_set data: variable: floorplan.hours value_template: '${((parseInt(entity.state) - 1) + 24) % 24}' - entity: floorplan.minutes element: input_number.alarm_time_minutes_up action: service: floorplan.variable_set data: variable: floorplan.minutes value_template: '${((parseInt(entity.state / 5) * 5) + 5) % 60}' - entity: floorplan.minutes element: input_number.alarm_time_minutes_down action: service: floorplan.variable_set data: variable: floorplan.minutes value_template: '${(((parseInt(entity.state / 5) * 5) - 5) + 60) % 60}' - element: floorplan.save_alarm_time_button action: service: mqtt.publish data: '{ "payload": "${(("0" + (parseInt((entities[`floorplan.hours`].state).slice(-2)) + 24) % 24)).slice(-2)}:${("0" + (((parseInt(entities[`floorplan.minutes`].state) / 5) * 5) % 60)).slice(-2)}", "topic": "clock/stacey_alarm_time", "retain": true }' - entity: input_boolean.clock_snooze image_template: '/local/custom_ui/floorplan/buttons/${(entity.state === "on") ? "snooze_on" : "snooze"}.svg' action: service: homeassistant.toggle - entity: input_boolean.school_mode image_template: '/local/custom_ui/floorplan/buttons/${(entity.state === "on") ? "school_on" : "school_off"}.svg' action: service: homeassistant.toggle - entity: media_player.alarm_clock image_template: '/local/custom_ui/floorplan/buttons/${(entity.state === "playing") ? "stop" : "radio_on"}.svg' action: service: '${(entity.state === "playing") ? "media_player.media_stop" : "media_player.play_media"}' data: media_content_id: http://listen.djcmedia.com:80/americascountryhigh media_content_type: audio/mp4 - name: temp_darksky entities: - sensor.pirateweather_temperature text_template: '${entity.state ? Math.ceil(entity.state) + "°": "undefined"}' class_template: 'return "static-temp";' - name: text_states entities: - sensor.pirateweather_minutely_summary text_template: '${entity.state ? entity.state : "undefined"}' class_template: 'return "static-text";' - name: text_font_date entities: - sensor.clock_date - sensor.clock_day hover_over: false more_info: false text_template: '${entity.state ? entity.state : "undefined"}' class_template: 'return "static-text-date";' - name: text_font_time entities: - sensor.clock_time hover_over: false more_info: false text_template: '${entity.state ? entity.state : "undefined"}' class_template: 'return "static-text-time";' - name: Dark Sky Sensors entities: - entity: sensor.pirateweather_minutely_summary element: sensor.pirateweather_minutely_summary_icon image_template: ' var imageName = ""; switch (entity.attributes.entity_picture) { case "/static/images/darksky/weather-sunny.svg": imageName = "sunny-1"; break; case "/static/images/darksky/weather-night.svg": imageName = "night-1"; break; case "/static/images/darksky/weather-partlycloudy.svg": imageName = "partlycloudy-day-1"; break; case "/static/images/darksky/weather-cloudy.svg": imageName = "partlycloudy-night-1"; break; case "/static/images/darksky/weather-cloudy.svg": imageName = "cloudy-day-1"; break; case "/static/images/darksky/weather-pouring.svg": imageName = "thunder"; break; case "/static/images/darksky/weather-snowy.svg": imageName = "snowy-day-1"; break; } return "/local/custom_ui/floorplan/images/weather/" + imageName + ".svg"; ' - name: Camera Images entities: - camera.front_door image_template: '${entity.attributes.entity_picture}'