Make it possible to show the time bar as a UI elemeny

[pdwonline]

Checklist

• [X] I checked for similar existing requests (both open and closed) before posting.
• [X] My request is generic, other users may benefit from it too.
• [X] I will participate in further discussion about this feature and can test it (if requested) once it's done.

Proposal

I love this component. Most interesting is the easy schedule overview that represents a time bar: very visual! I would love to see that as a UI element that I could include in a lovelance view, without the other options, like this:

Additional info

If I could add a sceduler bar card for a schedule it gives a good overview instead of a list. Optionally, users might change times and or add/remove actions without modifying other options

[Schmu1605]

yes that would be fine

[auriga-mi]

That's actually what I was about to post as feature proposal, the setup with the bar is a really great UI, would love to use the same one as read-only on the dashboard 😄

[u20p17]

+1 exactly what I am looking for :)

[Ga-Re]

+1 would be a nice addition

[jarthod]

Also +1 for me on this one, it would be a great addition (either as an option or different card type).

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days

[pdwonline]

Remove stale label or comment or this will be closed in 7 days

How?

[lublak]

It would definitely be very interesting.

[lublak]

@pdwonline hi I hope it's okay to ask you here. How it's done that you using schema based heating option. Currently I can only change the temperature. You have options: Spaarstand, Comfort and Eco. I think it's more useful. I would love to do it like this!

[pdwonline]

How it's done that you using schema based heating

I simply created a helper select entity and defined temperatures for each setting. In the schema I can select any option available in the helper select entity.

see this

  input_number:
    temperature_low:
      name: Temperatuur Spaarstand
      min: 0
      max: 25
      step: 0.5
      mode: box
      unit_of_measurement: '°C'
      icon: mdi:thermometer-check

    temperature_eco:
      name: Temperatuur Eco
      min: 0
      max: 25
      step: 0.5
      mode: box
      unit_of_measurement: '°C'
      icon: mdi:thermometer-check

    temperature_comfort:
      name: Temperatuur Comfort
      min: 0
      max: 25
      step: 0.5
      mode: box
      unit_of_measurement: '°C'
      icon: mdi:thermometer-check

  input_select:
    thermostatmode_living:
      name: Thermostaatmodus
      icon: mdi:home-thermometer-outline
      options:
        - Eco
        - Comfort
        - Spaarstand
        - Aangepast
        - Uit

[lublak]

@pdwonline thanks for the answer <3 This has already helped me a lot. Now I just have to find out how to change the thermostats when the input_select changes. I think the best solution is an automation:

Edit Done:

[pdwonline]

I think the best solution is an automation:

here you have my automation. I use it as a package, so both helper and automation are there

package_climate_kitchen:
# BASE ID: KITCHEN_CLIMATE_
# PDW 2023-12, V1

# -- COMPONENTS
  climate:
  - platform: generic_thermostat
    name: thermostat_kitchen
    unique_id: KITCHEN_CLIMATE_03
    heater: switch.radiator_kitchen
    target_sensor: sensor.temperature_kitchen
    min_temp: 10
    max_temp: 25
    cold_tolerance: 0.1
    hot_tolerance: 0.5

  input_select:
    thermostatmode_kitchen:
      name: Thermostaatmodus Keuken
      icon: mdi:home-thermometer-outline
      options:
        - Eco
        - Comfort
        - Spaarstand
        - Aangepast
        - Uit

  input_number:
    temperature_kitchen:
      name: Thermostaat Keuken
      min: 0
      max: 25
      step: 0.5
      mode: box
      unit_of_measurement: '°C'
      icon: mdi:home-thermometer-outline

  sensor:
  - unique_id: KITCHEN_CLIMATE_02
    name: temperature_avg_kitchen
    platform: group
    type: mean
    ignore_non_numeric: true
    device_class: temperature
    entities:
      - sensor.temperature_kitchen

  template:
    - unique_id: KITCHEN_CLIMATE_04
      sensor:
      - name: "temperature_req_kitchen"
        icon: mdi:thermometer-plus
        device_class: temperature
        unit_of_measurement: '°C'
        state: >
          {%- set raw_req=(states("input_number.temperature_kitchen") | float(0) - states("sensor.temperature_avg_kitchen") | float(0)) | round(1)-%}
          {%- if raw_req > 0 -%}{{raw_req}}{%- else -%}0{%- endif -%}
      trigger:
      - platform: state
        entity_id: sensor.temperature_avg_kitchen
      - platform: state
        entity_id: input_number.temperature_kitchen

# -- AUTOMATIONS
  automation:
  # -- Thermostat sync kitchen --
  - id: KITCHEN_CLIMATE_05
    alias: Thermostat_sync_kitchen
    description: Sync thermostat kitchen
    mode: parallel
    max: 10

    variables:
      thermostat_modes:
      -  mode: Eco
         temp: '{{ states("input_number.temperature_eco") |float(0) -1 }}'
      -  mode: Comfort 
         temp: '{{ states("input_number.temperature_comfort") |float(0) -1 }}'
      -  mode: Spaarstand 
         temp: '{{ states("input_number.temperature_low") |float(0) -1 }}'
      -  mode: Uit 
         temp: 10
      matched_temp: >-
           {{ thermostat_modes
                | selectattr('mode', 'eq', states('input_select.thermostatmode_kitchen'))
                | map(attribute='temp')
                | list |first |float(0) | default(0) }}
      matched_mode: >-
          {{ thermostat_modes
              | selectattr('temp', 'eq', states('input_number.temperature_kitchen') |float(0) )
              | map(attribute='mode')
              | list |first |default('none') }}

    trigger:
      - platform: state
        entity_id:
          - input_number.temperature_kitchen
        id: temp_kitchen
      - platform: state
        entity_id:
          - input_select.thermostatmode_kitchen

    condition: []
    action:
      - service: logbook.log
        data:
          name: Thermostat Sync
          message: 'Kitchen mode {{states("input_select.thermostatmode_kitchen")}} matched: {{ matched_mode }} (temp {{ matched_temp }})'

      - if:
        # Temperature input
        - condition: trigger
          id: temp_kitchen

        then:
          # turn off below 10
          - if:
            - condition: template
              value_template: '{{ states("input_number.temperature_kitchen") |int(0) < 10 }}'
            then:
            - service: input_number.set_value
              target:
                entity_id: input_number.temperature_kitchen
              data:
                value: '10'

          # set thermostat temp
          - if:
            - condition: template
              value_template: >-
                {{ 
                  states("input_number.temperature_kitchen") |float(0) != state_attr("climate.thermostat_kitchen","temperature") |float(0) 
                }}
            then:
            - service: climate.set_temperature
              data:
                temperature: '{{ states("input_number.temperature_kitchen") |float(0) |round(2) }}'
                hvac_mode: heat
              target:
                entity_id: climate.thermostat_kitchen

          # Try to match and set modus based on temp
          - delay:
              seconds: 0.2

          - if:
            - condition: template
              value_template: '{{ matched_mode != "none"}}'
            then:
            - if:
              - condition: template
                value_template: '{{ matched_mode != states("input_select.thermostatmode_kitchen") }}'
              then:
              - service: input_select.select_option
                target:
                  entity_id: input_select.thermostatmode_kitchen
                data:
                  option: '{{ matched_mode }}'
            else:
              - condition: template
                value_template: >-
                  {{ states('input_select.thermostatmode_kitchen') != "Aangepast" }}
              - service: input_select.select_option
                target:
                  entity_id: input_select.thermostatmode_kitchen
                data:
                  option: 'Aangepast'

        else:
        - delay:
            seconds: 0.2

         # trigger by selection
        - if:
          - condition: template
            value_template: >
              {{ 
                states("input_number.temperature_kitchen") |float(0) != matched_temp |float(0)
              }}
          then:
          - service: input_number.set_value
            target:
              entity_id: input_number.temperature_kitchen
            data:
              value: '{{ matched_temp |float(0) }}'

      - if:
        - condition: template
          value_template: >
            {{ 
              states("input_select.thermostatmode_kitchen") != "Uit" 
              or states("input_number.temperature_kitchen") |float(0) > 10
            }}
        then:
          # Set HVAC mode when Auto
          - service: climate.set_hvac_mode
            target:
              entity_id: climate.thermostat_kitchen
            data:
              hvac_mode: 'heat'
        else:
          # turn if off completely
            - service: climate.set_hvac_mode
              target:
                entity_id: climate.thermostat_kitchen
              data: 
                hvac_mode: 'off'
            - service: switch.turn_off
              target:
                entity_id: switch.radiator_kitchen

the ui looks like this

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days

[lublak]

Bump because stale

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days

[lublak]

Bump because stale

[garyjlo]

+1 I found this custom card because I specifically wanted and searched for a UI element like this. My use case is I want to display the timeline of my electricity rates changes throughout the day. Please add!

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days

[garyjlo]

Bump for freshness

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days

[lublak]

Bump because stale

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days

[garyjlo]

Bump

[zizahomeassistant]

I just wanted to do the same request. That UI feature would be very helpful

[kr0ner]

Maybe this helps someone ...

type: custom:apexcharts-card
graph_span: 1d
span:
  start: day
series:
  - entity: switch.schedule_umwalzpumpe_zeitplan
    data_generator: |-
      return entity.attributes.timeslots.map((timeslot, index) => {
        const parseTime = (timeStr) => {
          const now = new Date();
          const [hours, minutes, seconds] = timeStr.split(":").map(Number);
          return new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), hours, minutes, seconds).getTime();
        };
        const [startTimeStr, endTimeStr] = timeslot.split(" - ");
        const startTime = parseInt(parseTime(startTimeStr));
        const serviceAction = entity.attributes.actions[index].service == "switch.turn_off" ? 0 : 1;
        return [startTime, serviceAction];
      });
  - entity: switch.schedule_bad_heizkorper_zeitplan
    data_generator: |-
      return entity.attributes.timeslots.map((timeslot, index) => {
        const parseTime = (timeStr) => {
          const now = new Date();
          const [hours, minutes, seconds] = timeStr.split(":").map(Number);
          return new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), hours, minutes, seconds).getTime();
        };
        const [startTimeStr, endTimeStr] = timeslot.split(" - ");
        const startTime = parseInt(parseTime(startTimeStr));
        const serviceAction = entity.attributes.actions[index].service == "switch.turn_off" ? 0 : 1;
        return [startTime, serviceAction];
      });
apex_config:
  stroke:
    curve: stepline
  title:
    text: Heizungssteuerung
  yaxis:
    min: 0
    max: 1
    tickAmount: 1
    labels:
      formatter: |
        EVAL:function(value) {
          return value ? "An" : "Aus";
        }

My use-case is to have multiple schedules for e.g. valves of the floor heating to route the warm water, power of the heat pump, flow of water etc. For overview purposes I want to have all schedules shown in one chart. This allows me to see for example when things that should start after another are configured the wrong way and would be triggered at the same time. This only plots the state, but does not allow changes :-/

[lc8DrBean]

+1 please add option to visualize the 'timeline-schedule-bar' used in UI-edit mode also in 'dashboard view mode' (edit/drag/drop option disabled of course) OR: create a separate schedule visualization card (is there any I have not found it yet)