[JS+Editor Module] Separator as timeline

[lsmarsden]

Separator as Timeline

Version: 1.4.0
Creator: lsmarsden

Important

Supported cards:

• separator

Separator as Timeline

Transform any separator into a visual time-aware timeline. This module displays time blocks along the bar using flexible ranges, icons, labels, active indicators, and more. Use it for schedules, quiet hours, cleaning periods, charging windows - anything time-related.

For full documentation including configuration, examples, and more, visit the GitHub repo.

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

separator_as_timeline:
  name: Separator as Timeline
  version: v1.4.0
  creator: lsmarsden
  link: https://github.com/lsmarsden/bubble-card-modules/tree/main/separator_as_timeline
  supported:
    - separator
  description: |-
    <div><h2>Separator as Timeline</h2>
      <p>
        Transform any separator into a visual time-aware timeline.
        This module displays time blocks along the bar using flexible ranges, icons, labels, active indicators, and more.
        Use it for schedules, quiet hours, cleaning periods, charging windows - anything time-related.
      </p>

      <p>
        For full documentation including configuration, examples, and more, visit the <a
              href="https://github.com/lsmarsden/bubble-card-modules/tree/main/modules/separator_as_timeline"
              target="_blank">GitHub repo</a>.
      </p>
    </div>
  code: |-
    ${(() => {
    /**
     * ======== IMPORTED HELPER FUNCTIONS =========
     */

    function processColor(color) {
      let resolvedColor = getState(color);

      if (!resolvedColor) return null;
      if (typeof resolvedColor !== 'string') return null;

      resolvedColor = resolvedColor.trim();
      const validPrefixes = ['#', 'rgb', 'hsl'];

      if (validPrefixes.some((prefix) => resolvedColor.startsWith(prefix))) {
        return resolvedColor;
      }

      return `var(--${resolvedColor}-color)`;
    }

    const resolveConfig = (sources, defaultValue = undefined) => {
        for (const source of sources) {
            const keys = Array.isArray(source.path) ? source.path : source.path.split(".");
            const value = getConfigValue(source.config, keys);

            if (value !== undefined && (!source.condition || source.condition(value, source.config))) {
                const metadata = source.metadata || {};
                if (metadata.deprecated) {
                    console.warn(
                        `[DEPRECATED] Config path "${source.path}" used.` +
                        (metadata.replacedWith ? ` Use "${metadata.replacedWith}" instead.` : "") +
                        (metadata.message ? ` ${metadata.message}` : "")
                    );
                }
                return value;
            }
        }
        return defaultValue;
    }

    function getConfigValue(config, keys) {
        let current = config;
        for (const key of keys) {
            if (current && key in current) {
                current = current[key];
            } else {
                return undefined;
            }
        }
        return current;
    }

    function suffix(str, suffix) {
        str = String(str);
        return str.endsWith(suffix) ? str : str + suffix;
    }

    const getState = (input, fallbackToRaw = true) => {
        if (typeof input !== 'string') return input;

        // Pattern: entity_id[attribute]
        const match = input.match(/^([A-z0-9_.]+)\[([A-z0-9_]+)]$/);

        let entityId, attribute;

        if (match) {
            [, entityId, attribute] = match;
        } else if (hass.states[input]) {
            entityId = input;
        } else {
            // Not a known entity or format — treat as raw value
            return fallbackToRaw ? input : undefined;

        }
        const stateObj = hass.states[entityId];
        if (!stateObj) return fallbackToRaw ? input : undefined;

        return attribute ? stateObj.attributes[attribute] : stateObj.state;
    }

    /**
     * ======== MAIN MODULE CODE =========
     */


        const config = this.config.separator_as_timeline;
        if (!config) return;

        const element = card.querySelector(".bubble-line");
        if (!element) return;

        // 1. ===== Config Defaults =====
        const defaults = {
            show_time_ticks: true,
            show_current_time: true,
            icon_settings: {
                icon_background_color: "var(--bubble-icon-background-color)",
                icon_color: "var(--primary-text-color)",
                icon_outline_color: "var(--card-background-color)",
                icon_size: "18px",
                icon_image_size: "16px",
                highlight_active: true,
                icon_active_color: "var(--primary-color)"
            },
            time_format: {
                global_settings: {
                    use_24_hour: true,
                    append_suffix: false,
                    pad_hours: true,
                    show_minutes: true
                }
            },
            marker_color: "var(--accent-color)",
            rounded_edges: false
        };

        const getConfig = (key) => config[key] ?? defaults[key];

        // 2. ===== Helpers =====
        const timeToPercent = (h, m) => ((h * 60 + m) / 1440) * 100;

        const parseTimeString = (str) => {
            if (!str) return [0, 0];
            try {
                // Handle ISO format: 2025-04-23T10:12:23+00:00
                if (str.includes("T")) {
                    const date = new Date(str);
                    if (!isNaN(date)) {
                        return [date.getHours(), date.getMinutes()];
                    }
                }

                // Handle HH:MM format
                if (str.includes(":")) {
                    const [h, m] = str.split(":").map(Number);
                    return [h || 0, m || 0];
                }

                // Handle numeric time formats (minutes since midnight)
                if (!isNaN(str)) {
                    const totalMinutes = parseInt(str);
                    return [Math.floor(totalMinutes / 60), totalMinutes % 60];
                }

                return [0, 0];
            } catch {
                return [0, 0];
            }
        };

        const getTimeFormatProperty = (overrideSection, property) => resolveConfig([
            {
                config: config?.time_format,
                path: `${overrideSection}.${property}`,
                condition: (value, cfg) => cfg[overrideSection]?.override === true,
            }, {
                config: config?.time_format?.global_settings,
                path: property
            }, {
                config: config?.time_format,
                path: property,
                metadata: {deprecated: true, replacedWith: `time_format.global_settings.${property}`}
            }
        ], defaults.time_format.global_settings[property]);

        const formatTime = (h, m, section) => {

            const use_24_hour = getTimeFormatProperty(section, "use_24_hour");
            const append_suffix = getTimeFormatProperty(section, "append_suffix");
            const pad_hours = getTimeFormatProperty(section, "pad_hours");
            const show_minutes = getTimeFormatProperty(section, "show_minutes");

            let hour = h;
            const suffix = hour >= 12 ? "PM" : "AM";

            if (!use_24_hour) {
                hour = hour % 12;
                if (hour === 0) hour = 12;
            }

            let hourStr = pad_hours ? pad(hour) : hour;

            return `${hourStr}${show_minutes ? ":" + pad(m) : ""}${append_suffix ? suffix : ""}`;
        };

        // 3. ===== Init wrapper =====
        let wrapper = element.closest(".bubble-line-wrapper");
        if (!wrapper) {
            wrapper = document.createElement("div");
            wrapper.className = "bubble-line-wrapper";
            wrapper.style.height = getComputedStyle(element).height;
            element.classList.add("wrapped");
            element.parentNode.insertBefore(wrapper, element);
            wrapper.appendChild(element);
        }

        // Tooltip init (only one)
        let tooltip = wrapper.querySelector(".timeline-tooltip");
        if (!tooltip) {
            tooltip = document.createElement("div");
            tooltip.className = "timeline-tooltip";
            wrapper.appendChild(tooltip);
        }

        const showTooltip = (el) => {
            tooltip.innerText = el.dataset.tooltip;
            tooltip.style.opacity = "1";
        };

        const hideTooltip = () => {
            tooltip.style.opacity = "0";
        };

        // Clear old segments
        wrapper
            .querySelectorAll(".timeline-segment, .timeline-icon")
            .forEach((e) => e.remove());

        // 4. ===== Render Segments =====
        const ranges = Array.isArray(config.ranges)
            ? config.ranges
            : Object.values(config.ranges || {});
        const now = new Date();
        const currentPct = timeToPercent(now.getHours(), now.getMinutes());
        const pad = (n) => String(n).padStart(2, "0");
        for (const r of ranges) {
            const group = `group-${r.label?.replace(/\s+/g, "-")}`;

            // Get start time (from entity if provided, otherwise from direct value)
            let startTimeValue;
            if (r.start_entity) {
                //TODO - replace with a single start field.
                // this will be a breaking change, so we need to
                // implement auto-migration first
                startTimeValue = getState(`${r.start_entity}${r.start_attribute ? '[${r.start_attribute}]' : ''}`, false);
            } else {
                startTimeValue = r.start;
            }

            // Get end time (from entity if provided, otherwise from direct value)
            let endTimeValue;
            if (r.end_entity) {
                endTimeValue = getState(`${r.end_entity}${r.end_attribute ? '[${r.end_attribute}]' : ''}`, false);
            } else {
                endTimeValue = r.end;
            }

            const [startH, startM] = parseTimeString(startTimeValue);
            const [endH, endM] = parseTimeString(endTimeValue);

            const startPct = timeToPercent(startH, startM);
            const endPct = timeToPercent(endH, endM);

            // Handle wrap-around time ranges (e.g. 22:00–06:00)
            const segments =
                startPct < endPct
                    ? [{left: startPct, width: endPct - startPct}]
                    : [
                        {left: startPct, width: 100 - startPct},
                        {left: 0, width: endPct},
                    ];

            let isActive = false;

            segments.forEach(({left, width}) => {
                const seg = document.createElement("div");
                seg.className = `timeline-segment ${group}`;
                seg.style.left = `${left}%`;
                seg.style.width = `${width}%`;
                seg.style.background = processColor(r.color) || "var(--primary-color)";
                seg.dataset.tooltip = `${r.label ? r.label + ": " : ""}${formatTime(startH, startM, "tooltip")} → ${formatTime(endH, endM, "tooltip")}`;
                if (r.source_entities) {
                    seg.dataset.tooltip += `\nSources: ${r.source_entities}`;
                }

                const isRounded = getConfig("rounded_edges");
                if (isRounded) {
                    const leftEdge = Math.round(left) === 0;
                    const rightEdge = Math.round(left + width) === 100;

                    seg.style.borderTopLeftRadius = leftEdge ? "0" : "4px";
                    seg.style.borderBottomLeftRadius = leftEdge ? "0" : "4px";
                    seg.style.borderTopRightRadius = rightEdge ? "0" : "4px";
                    seg.style.borderBottomRightRadius = rightEdge ? "0" : "4px";
                } else {
                    seg.style.borderRadius = "0";
                }
                wrapper.appendChild(seg);

                seg.addEventListener("mouseenter", () => {
                    wrapper
                        .querySelectorAll(`.${group}`)
                        .forEach((e) => e.classList.add("highlighted"));
                    showTooltip(seg);
                });
                seg.addEventListener("mouseleave", () => {
                    wrapper
                        .querySelectorAll(`.${group}`)
                        .forEach((e) => e.classList.remove("highlighted"));
                    hideTooltip();
                });

                if (currentPct >= left && currentPct <= left + width) {
                    isActive = true;
                }

                const getIconConfig = (key) => resolveConfig([
                        // check override first, then deprecated override, then default, then deprecated default
                        {config: r.icon_settings, path: key},
                        {config: r, path: key, metadata: {deprecated: true, replacedWith: `icon_settings.${key}`}},
                        {config: config.icon_settings, path: key},
                        {config: config, path: key, metadata: {deprecated: true, replacedWith: `icon_settings.${key}`}},
                    ],
                    defaults.icon_settings[key]
                );


                if (r.icon) {
                    const iconEl = document.createElement("ha-icon");

                    iconEl.setAttribute("icon", r.icon);
                    iconEl.className = `timeline-icon ${group}`;
                    iconEl.style.left = `${left + width / 2}%`;
                    iconEl.style.color = processColor(getIconConfig("icon_color"));
                    iconEl.style.border = `1px solid ${processColor(getIconConfig("icon_outline_color"))}`;
                    iconEl.style.background = processColor(getIconConfig("icon_background_color"));
                    // TODO invalid values cause this to blow up, so we need it to default if icon size is not a px
                    // value
                    iconEl.style.setProperty("--icon-size", suffix(getIconConfig("icon_size"), "px"));
                    iconEl.style.setProperty("--mdc-icon-size", suffix(getIconConfig("icon_image_size"), "px"));

                    wrapper.style.setProperty(
                        `--icon-${group}-active-color`,
                        `${processColor(getIconConfig("icon_active_color"))}`,
                    );


                    wrapper.appendChild(iconEl);

                    iconEl.addEventListener("mouseenter", () => {
                        wrapper
                            .querySelectorAll(`.${group}`)
                            .forEach((e) => e.classList.add("highlighted"));
                        showTooltip(seg);
                    });
                    iconEl.addEventListener("mouseleave", () => {
                        wrapper
                            .querySelectorAll(`.${group}`)
                            .forEach((e) => e.classList.remove("highlighted"));
                        hideTooltip();
                    });
                }
            });

            // Apply glow to icons if active
            if (getConfig("highlight_active") && isActive) {
                wrapper.querySelectorAll(`.timeline-icon.${group}`).forEach((e) => {
                    e.style.filter = `drop-shadow(0 0 5px var(--icon-${group}-active-color))`;
                });
            } else {
                wrapper.querySelectorAll(`.timeline-icon.${group}`).forEach((e) => {
                    e.style.filter = "";
                });
            }
        }

        // 5. ===== Time Ticks =====
        if (
            getConfig("show_time_ticks") &&
            !wrapper.querySelector(".timeline-tick")
        ) {
            [0, 6, 12, 18, 24].forEach((h) => {
                const tick = document.createElement("div");
                tick.className = "timeline-tick";
                tick.style.left = `${(h / 24) * 100}%`;
                tick.innerText = `${formatTime(h % 24, 0, "timeline")}`;
                wrapper.appendChild(tick);
            });
        }

        // 6. ===== Current Time Marker =====
        if (getConfig("show_current_time")) {
            let marker = wrapper.querySelector(".timeline-marker");
            if (!marker) {
                marker = document.createElement("div");
                marker.className = "timeline-marker";
                wrapper.appendChild(marker);
            }
            wrapper.style.setProperty("--timeline-marker-left", `${currentPct}%`);
            wrapper.style.setProperty(
                "--marker-color",
                processColor(getConfig("marker_color")),
            );
        }
    })()}

    .bubble-line {
        width: 100%;
        container-type: size;
    }

    .bubble-name {
        overflow: visible !important;
    }

    .bubble-line-wrapper {
        position: relative;
        background-color: var(--bubble-line-background-color, #444);
        margin: 0 12px;
        width: 100cqw;
    }

    .timeline-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    .timeline-segment {
        position: absolute;
        height: 100%;
        background: linear-gradient(to right, var(--accent-color), var(--primary-color));
        opacity: 0.6;
        transition: opacity 0.2s ease;
        cursor: pointer;
        top: 0;
    }

    .timeline-icon {
        pointer-events: auto;
        width: var(--icon-size, 18px);
        height: var(--icon-size, 18px);
        border-radius: 50%;
        background: var(--card-background-color);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        position: absolute;
        transform: translateX(-50%);
        top: -26px;
        transition: filter 0.3s ease;
        border: 1px solid var(--icon-border-color, var(--primary-color))
    }

    .timeline-icon.active {
        filter: drop-shadow(0 0 5px var(--icon-active-color));
    }

    .highlighted {
        filter: brightness(1.15);
        box-shadow: 0 0 8px white;
        opacity: 1;
        z-index: 1;
    }

    .timeline-tooltip {
        position: absolute;
        top: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary-background-color);
        color: var(--primary-text-color);
        padding: 2px 6px;
        font-size: 11px;
        border-radius: 4px;
        white-space: nowrap;
        box-shadow: 0 0 4px white;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 3 !important;
    }

    .timeline-tick {
        position: absolute;
        bottom: -18px;
        transform: translateX(-50%);
        font-size: 10px;
        font-weight: bold;
        color: var(--secondary-text-color);
        pointer-events: none;
    }

    .timeline-tick::before {
        content: "";
        position: absolute;
        bottom: 90%;
        left: 50%;
        transform: translateX(-50%);
        height: 6px;
        width: 1px;
        background-color: var(--secondary-text-color);
        opacity: 0.6;
    }

    .timeline-marker {
        position: absolute;
        top: -8px;
        left: calc(var(--timeline-marker-left) - 6px);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid var(--marker-color, var(--primary-color));
    }
  editor:
    - type: expandable
      title: Important Update!
      icon: mdi:information-variant-circle-outline
      schema:
        - type: constant
          label: Dynamic Entity Resolution (DER)
          value: >-
            If you see ✨ in an input field, then it supports DER. This allows entry of an entity, attribute, or regular
            value. Just enter the entity name. For attributes, use the format ENTITY[ATTRIBUTE], e.g.,
            sensor.my_phone[battery_level].
    - type: expandable
      title: Timeline Settings
      icon: mdi:timeline-text
      schema:
        - name: show_time_ticks
          label: Show time ticks on the timeline.
          default: true
          selector:
            boolean: null
        - name: rounded_edges
          label: Round edges of segments. Midnight edges will stay flat for display.
          default: false
          selector:
            boolean: null
        - name: show_current_time
          label: Show current time marker on the timeline.
          default: true
          selector:
            boolean: null
        - name: marker_color
          label: ✨ Color of the current time marker.
          selector:
            ui_color: null
    - type: expandable
      title: Time Format
      icon: mdi:clock
      name: time_format
      schema:
        - type: grid
          name: global_settings
          schema:
            - name: use_24_hour
              label: Use 24-hour time
              default: true
              selector:
                boolean: null
            - name: append_suffix
              label: Show AM/PM
              default: false
              selector:
                boolean: null
            - name: pad_hours
              label: Pad hours (5:00/05:00)
              default: true
              selector:
                boolean: null
            - name: show_minutes
              label: Show minutes (5PM/5:00PM)
              default: true
              selector:
                boolean: null
        - type: expandable
          title: Timeline Override (Optional)
          icon: mdi:clock
          name: timeline
          schema:
            - name: override
              label: Apply below options to timeline.
              default: false
              selector:
                boolean: null
            - type: grid
              schema:
                - name: use_24_hour
                  label: Use 24-hour time
                  default: true
                  selector:
                    boolean: null
                - name: append_suffix
                  label: Show AM/PM
                  default: false
                  selector:
                    boolean: null
                - name: pad_hours
                  label: Pad hours (5:00/05:00)
                  default: true
                  selector:
                    boolean: null
                - name: show_minutes
                  label: Show minutes (5PM/5:00PM)
                  default: true
                  selector:
                    boolean: null
        - type: expandable
          title: Tooltip Override (Optional)
          icon: mdi:clock
          name: tooltip
          schema:
            - name: override
              label: Apply below options to tooltip.
              default: false
              selector:
                boolean: null
            - type: grid
              schema:
                - name: use_24_hour
                  label: Use 24-hour time
                  default: true
                  selector:
                    boolean: null
                - name: append_suffix
                  label: Show AM/PM
                  default: false
                  selector:
                    boolean: null
                - name: pad_hours
                  label: Pad hours (5:00/05:00)
                  default: true
                  selector:
                    boolean: null
                - name: show_minutes
                  label: Show minutes (5PM/5:00PM)
                  default: true
                  selector:
                    boolean: null
    - type: expandable
      title: Global Icon Settings
      icon: mdi:palette
      name: icon_settings
      schema:
        - name: icon_size
          label: Icon total size in pixels. Overridable per icon.
          selector:
            number:
              min: 1
              step: 1
              unit_of_measurement: px
        - name: icon_image_size
          label: Icon image size in pixels. Max value is current icon_size. Overridable per icon.
          selector:
            number:
              min: 1
              step: 1
              unit_of_measurement: px
        - name: icon_color
          label: ✨ Icon color. Overridable per icon.
          selector:
            ui_color: null
        - name: icon_background_color
          label: ✨ Icon background color. Overridable per icon.
          selector:
            ui_color: null
        - name: icon_outline_color
          label: ✨ Icon outline color. Overridable per icon.
          selector:
            ui_color: null
        - name: highlight_active
          title: Highlight active period
          label: Highlight the current active period.
          default: true
          selector:
            boolean: null
        - name: icon_active_color
          label: ✨ Icon active period color. Overridable per icon.
          selector:
            ui_color: null
    - type: expandable
      title: Time Ranges - define additional in YAML
      icon: mdi:chart-gantt
      name: ranges
      schema:
        - type: expandable
          title: Time Range 1
          name: '0'
          schema:
            - name: start_entity
              label: Start Time Entity
              description: Entity whose state will be used as the start time (e.g. sensor.sun_next_dawn)
              selector:
                entity: null
            - name: start_attribute
              label: Start Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: start
              label: Fixed start time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: end_entity
              label: End Time Entity
              description: Entity whose state will be used as the end time
              selector:
                entity: null
            - name: end_attribute
              label: End Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: end
              label: Fixed end time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: label
              label: Label
              selector:
                text: null
            - name: color
              label: ✨ Timeline color
              selector:
                ui_color: null
            - name: icon
              label: Icon
              selector:
                icon: null
            - type: expandable
              title: Icon settings
              icon: mdi:palette
              name: icon_settings
              schema:
                - name: icon_size
                  label: Icon total size in pixels.
                  selector:
                    number:
                      min: 1
                      step: 1
                      unit_of_measurement: px
                - name: icon_image_size
                  label: Icon image size in pixels. Max value is current icon_size.
                  selector:
                    number:
                      min: 1
                      step: 1
                      unit_of_measurement: px
                - name: icon_color
                  label: ✨ Icon color.
                  selector:
                    ui_color: null
                - name: icon_background_color
                  label: ✨ Icon background color.
                  selector:
                    ui_color: null
                - name: icon_outline_color
                  label: ✨ Icon outline color.
                  selector:
                    ui_color: null
                - name: icon_active_color
                  label: ✨ Icon active period color.
                  selector:
                    ui_color: null
            - name: source_entities
              label: Source entities (for tooltip)
              description: Optional information to show in tooltip
              selector:
                text: null
        - type: expandable
          title: Time Range 2
          name: '1'
          schema:
            - name: start_entity
              label: Start Time Entity
              description: Entity whose state will be used as the start time (e.g. sensor.sun_next_dawn)
              selector:
                entity: null
            - name: start_attribute
              label: Start Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: start
              label: Fixed start time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: end_entity
              label: End Time Entity
              description: Entity whose state will be used as the end time
              selector:
                entity: null
            - name: end_attribute
              label: End Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: end
              label: Fixed end time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: label
              label: Label
              selector:
                text: null
            - name: color
              label: ✨ Timeline color
              selector:
                ui_color: null
            - name: icon
              label: Icon
              selector:
                icon: null
            - type: expandable
              title: Icon settings
              icon: mdi:palette
              name: icon_settings
              schema:
                - name: icon_size
                  label: Icon total size in pixels.
                  selector:
                    number:
                      min: 1
                      step: 1
                      unit_of_measurement: px
                - name: icon_image_size
                  label: Icon image size in pixels. Max value is current icon_size.
                  selector:
                    number:
                      min: 1
                      step: 1
                      unit_of_measurement: px
                - name: icon_color
                  label: ✨ Icon color.
                  selector:
                    ui_color: null
                - name: icon_background_color
                  label: ✨ Icon background color.
                  selector:
                    ui_color: null
                - name: icon_outline_color
                  label: ✨ Icon outline color.
                  selector:
                    ui_color: null
                - name: icon_active_color
                  label: ✨Icon active period color.
                  selector:
                    ui_color: null
            - name: source_entities
              label: Source entities (for tooltip)
              description: Optional information to show in tooltip
              selector:
                text: null
        - type: expandable
          title: Time Range 3
          name: '2'
          schema:
            - name: start_entity
              label: Start Time Entity
              description: Entity whose state will be used as the start time (e.g. sensor.sun_next_dawn)
              selector:
                entity: null
            - name: start_attribute
              label: Start Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: start
              label: Fixed start time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: end_entity
              label: End Time Entity
              description: Entity whose state will be used as the end time
              selector:
                entity: null
            - name: end_attribute
              label: End Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: end
              label: Fixed end time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: label
              label: Label
              selector:
                text: null
            - name: color
              label: ✨ Timeline color
              selector:
                ui_color: null
            - name: icon
              label: Icon
              selector:
                icon: null
            - type: expandable
              title: Icon settings
              icon: mdi:palette
              name: icon_settings
              schema:
                - name: icon_size
                  label: Icon total size in pixels. Default 18px.
                  selector:
                    number:
                      min: 1
                      step: 1
                      unit_of_measurement: px
                - name: icon_image_size
                  label: Icon image size in pixels. Max is icon_size. Default 16px.
                  selector:
                    number:
                      min: 1
                      step: 1
                      unit_of_measurement: px
                - name: icon_color
                  label: ✨ Icon color.
                  selector:
                    ui_color: null
                - name: icon_background_color
                  label: ✨ Icon background color.
                  selector:
                    ui_color: null
                - name: icon_outline_color
                  label: ✨ Icon outline color.
                  selector:
                    ui_color: null
                - name: icon_active_color
                  label: ✨ Icon active period color.
                  selector:
                    ui_color: null
            - name: source_entities
              label: Source entities (for tooltip)
              description: Optional information to show in tooltip
              selector:
                text: null

---

Screenshot:

[Jaw818]

Awesome work! I added a little something to it to allow the use of sensor states. I wanted to use my sensor.sun_next_dawn and sensor.sun_next_dusk as inputs, and also some of my calendar event start and end times! With this, you can enter the entity you would like to use, and it will accept it as long as it displays the state in some sort of recognized time, including ISO, simple and numeric.

Code

supported:
    - separator

description: |
    <div style="font-size: 15px; line-height: 1.5;">
      <strong style="font-size: 16px;">Separator as Timeline</strong><br><br>
    
      Transform any separator into a visual time-aware timeline.  
      This module displays time blocks along the bar using flexible ranges, icons, labels, active indicators, and more.  
      Use it for schedules, quiet hours, cleaning periods, charging windows — or anything time-related.
      <br><br>
    
      <strong>Features:</strong>
      <ul style="margin-top: 6px; margin-bottom: 6px; padding-left: 20px;">
        <li>Multiple time ranges with <code>start</code>/<code>end</code> time or entity</li>
        <li>Wraparound time support (e.g. <code>22:00 → 06:00</code>)</li>
        <li>Per-range labels and icons (with highlight when active)</li>
        <li>Grouped ranges share highlighting and tooltips by label</li>
        <li>Dynamic entity or attribute-based times (including <code>sensor</code>/<code>time</code>)</li>
        <li>Tooltip on hover with range label and time</li>
        <li>Optional tick marks at standard intervals (0:00, 6:00, etc.)</li>
        <li>Current time marker with color customization</li>
        <li>Rounded or flat segment edges (with logic for midnight cutoffs)</li>
        <li>Global or per-range styling for icon color, background, outline, glow</li>
        <li>Supports ISO 8601 timestamps and optional local timezone conversion</li>
      </ul>
    
      <strong>Configuration Options:</strong>
      <ul style="margin-top: 6px; margin-bottom: 6px; padding-left: 20px;">
        <li><code>show_time_ticks</code> – Show tick marks under the timeline</li>
        <li><code>show_current_time</code> – Show current time marker</li>
        <li><code>marker_color</code> – Color of current time marker</li>
        <li><code>highlight_active</code> – Highlight icon when time is active</li>
        <li><code>rounded_edges</code> – Enable rounded ends (except at midnight)</li>
        <li><code>convert_to_local</code> – Convert ISO timestamps to local time</li>
        <li><code>icon_color</code>, <code>icon_background_color</code>, <code>icon_outline_color</code>, <code>icon_active_color</code> – Style per range or globally</li>
      </ul>
    
      <strong>Examples</strong>
    
      <details>
        <summary><strong>Using entities or static times</strong></summary>
        <p>Mix entity-based and static times with individual labels/icons.</p>
        <pre style="padding:10px;border-radius:6px;">
    type: custom:bubble-card
    card_type: separator
    modules:
      - default
      - separator_as_timeline
    separator_as_timeline:
      show_time_ticks: true
      show_current_time: true
      highlight_active: true
      marker_color: blue
      ranges:
        "0":
          start_entity: time.bedtime_start
          end_entity: time.bedtime_end
          label: Bedtime
          color: indigo
          icon: mdi:bed
        "1":
          start: "08:00"
          end: "09:00"
          label: Breakfast
          color: orange
          icon: mdi:coffee
    name: Day Schedule
    icon: mdi:calendar-clock
    grid_options:
      columns: full
        </pre>
      </details>
    
      <details>
        <summary><strong>Full Timestamp with Timezone Conversion</strong></summary>
        <pre style="padding:10px;border-radius:6px;">
    type: custom:bubble-card
    card_type: separator
    modules:
      - default
      - separator_as_timeline
    separator_as_timeline:
      convert_to_local: true
      show_current_time: true
      marker_color: red
      ranges:
        "0":
          start: "2025-04-26T02:00:00+00:00"
          end: "2025-04-26T04:30:00+00:00"
          label: Remote Job
          color: blue
          icon: mdi:laptop
    name: Remote Work
    icon: mdi:cloud
        </pre>
      </details>
    
      <details>
        <summary><strong>Global Icon Styling with Overrides</strong></summary>
        <pre style="padding:10px;border-radius:6px;">
    type: custom:bubble-card
    card_type: separator
    modules:
      - default
      - separator_as_timeline
    separator_as_timeline:
      icon_color: grey
      icon_background_color: transparent
      icon_outline_color: teal
      icon_active_color: yellow
      show_time_ticks: true
      highlight_active: true
      ranges:
        "0":
          start: "12:00"
          end: "13:00"
          label: Lunch
          color: green
          icon: mdi:silverware
        "1":
          start: "17:00"
          end: "17:30"
          label: Gym
          color: red
          icon: mdi:weight-lifter
          icon_color: red
          icon_background_color: black
    name: Daily Activities
    icon: mdi:timeline-check-outline
        </pre>
      </details>
    
      <details>
        <summary><strong>Grouped Segments with Shared Label</strong></summary>
        <p>Hover highlights all segments with the same <code>label</code>, regardless of icon or color.</p>
        <pre style="padding:10px;border-radius:6px;">
    type: custom:bubble-card
    card_type: separator
    modules:
      - default
      - separator_as_timeline
    separator_as_timeline:
      highlight_active: true
      marker_color: "#333333"
      show_current_time: true
      show_time_ticks: true
      rounded_edges: true
      ranges:
        "0":
          start: "09:00"
          end: "09:30"
          label: Travel
          color: teal
          icon: mdi:bike
        "1":
          start: "17:00"
          end: "17:45"
          label: Travel
          color: orange
          icon: mdi:train
          icon_color: red
    name: Travel Blocks
    icon: mdi:map-clock-outline
        </pre>
      </details>
    
      <details>
        <summary><strong>Minimal Styling with Flat Edges</strong></summary>
        <pre style="padding:10px;border-radius:6px;">
    type: custom:bubble-card
    card_type: separator
    modules:
      - default
      - separator_as_timeline
    separator_as_timeline:
      show_time_ticks: false
      show_current_time: false
      rounded_edges: false
      ranges:
        "0":
          start: "01:00"
          end: "03:00"
          label: Task
          color: red
        "1":
          start: "10:30"
          end: "12:00"
          label: Task
          color: green
    name: Flat Layout
    icon: mdi:timeline
        </pre>
      </details>
    </div>
    <br><br>
    <code-block><pre>
    separator_as_timeline: 
        # Your configuration here
    </pre></code-block>

  ```
     code: |
    .bubble-line {
      width: 100%;
      container-type: size;
    }
    
    .bubble-name {
      overflow: visible !important;
    }
    
    .bubble-line-wrapper {
        position: relative;
        background-color: var(--bubble-line-background-color, #444);
        margin: 0 12px;
        width: 100cqw;
      }
      .timeline-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }
      .timeline-segment {
        position: absolute;
        height: 100%;
        background: linear-gradient(to right, var(--accent-color), var(--primary-color));
        opacity: 0.6;
        transition: opacity 0.2s ease;
        cursor: pointer;
        top: 0px;
      }
    
      .timeline-icon {
        pointer-events: auto;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--card-background-color);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        position: absolute;
        transform: translateX(-50%);
        top: -26px;
        transition: filter 0.3s ease;
        border: 1px solid var(--icon-border-color, var(--primary-color))
      }
    
      .timeline-icon.active {
        filter: drop-shadow(0 0 5px var(--icon-active-color));
      }
    
      .highlighted {
        filter: brightness(1.15);
        box-shadow: 0 0 8px white;
        opacity: 1;
        z-index: 1;
      }
    
    .timeline-tooltip {
        position: absolute;
        top: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary-background-color);
        color: var(--primary-text-color);
        padding: 2px 6px;
        font-size: 11px;
        border-radius: 4px;
        white-space: nowrap;
        box-shadow: 0 0px 4px white;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 3 !important;
    }
    
    .timeline-tick {
      position: absolute;
      bottom: -18px;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: bold;
      color: var(--secondary-text-color);
      pointer-events: none;
    }
    
    .timeline-tick::before {
      content: "";
      position: absolute;
      bottom: 90%;
      left: 50%;
      transform: translateX(-50%);
      height: 6px;
      width: 1px;
      background-color: var(--secondary-text-color);
      opacity: 0.6;
    }
    
    .timeline-marker {
      position: absolute;
      top: -8px;
      left: calc(var(--timeline-marker-left) - 6px);
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid var(--marker-color, var(--primary-color));
    }
    
    
     ${(() => {
    
      const config = this.config.separator_as_timeline;
      if (!config) return;
    
      const element = card.querySelector('.bubble-line');
      if (!element) return;
      
      // 1. ===== Config Defaults =====
      const defaults = {
        show_time_ticks: true,
        show_current_time: true,
        icon_color: 'var(--primary-text-color)',
        icon_outline_color: 'var(--card-background-color)',
        icon_background_color: 'var(--bubble-icon-background-color)',
        marker_color: 'var(--accent-color)',
        icon_active_color: 'var(--primary-color)',
        highlight_active: true,
        rounded_edges: false
      };
    
      const getConfig = (key) => config[key] ?? defaults[key];
    
      // 2. ===== Helpers =====
      const processColor = (color) => {
        if (!color) return null;
        if (['#', 'rgb', 'hsl'].some(prefix => color.startsWith(prefix))) {
          return color;
        }
        return `var(--${color}-color)`;
      };
      const timeToPercent = (h, m) => ((h * 60 + m) / 1440) * 100;
    
      const parseTimeString = (str) => {
        if (!str) return [0, 0];
        try {
          // Handle ISO format: 2025-04-23T10:12:23+00:00
          if (str.includes("T")) {
            const date = new Date(str);
            if (!isNaN(date)) {
              return [date.getHours(), date.getMinutes()];
            }
          }
          
          // Handle HH:MM format
          if (str.includes(":")) {
            const [h, m] = str.split(":").map(Number);
            return [h || 0, m || 0];
          }
          
          // Handle numeric time formats (minutes since midnight)
          if (!isNaN(str)) {
            const totalMinutes = parseInt(str);
            return [Math.floor(totalMinutes / 60), totalMinutes % 60];
          }
          
          return [0, 0];
        } catch {
          return [0, 0];
        }
      };
    
      const getState = (entityId, attribute) => {
        if (!entityId || !hass.states[entityId]) {
          return undefined;
        }
        const statesObj = hass.states[entityId];
        return attribute ? statesObj.attributes[attribute] : statesObj.state;
      };
    
      // 3. ===== Init wrapper =====
      let wrapper = element.closest('.bubble-line-wrapper');
      if (!wrapper) {
        wrapper = document.createElement('div');
        wrapper.className = 'bubble-line-wrapper';
        wrapper.style.height = getComputedStyle(element).height;
        element.classList.add('wrapped');
        element.parentNode.insertBefore(wrapper, element);
        wrapper.appendChild(element);
      }
    
      // Tooltip init (only one)
      let tooltip = wrapper.querySelector('.timeline-tooltip');
      if (!tooltip) {
        tooltip = document.createElement('div');
        tooltip.className = 'timeline-tooltip';
        wrapper.appendChild(tooltip);
      }
    
      const showTooltip = (el) => {
        tooltip.innerText = el.dataset.tooltip;
        tooltip.style.opacity = '1';
      };
    
      const hideTooltip = () => {
        tooltip.style.opacity = '0';
      };
    
      // Clear old segments
      wrapper.querySelectorAll('.timeline-segment, .timeline-icon').forEach(e => e.remove());
    
      // 4. ===== Render Segments =====
      const ranges = Array.isArray(config.ranges)
        ? config.ranges
        : Object.values(config.ranges || {});
      const now = new Date();
      const currentPct = timeToPercent(now.getHours(), now.getMinutes());
      const pad = (n) => String(n).padStart(2, '0');
    
      for (const r of ranges) {
    
        const group = `group-${r.label?.replace(/\s+/g, '-')}`;
        
        // Get start time (from entity if provided, otherwise from direct value)
        let startTimeValue;
        if (r.start_entity) {
          startTimeValue = getState(r.start_entity, r.start_attribute);
        } else {
          startTimeValue = r.start;
        }
        
        // Get end time (from entity if provided, otherwise from direct value)
        let endTimeValue;
        if (r.end_entity) {
          endTimeValue = getState(r.end_entity, r.end_attribute);
        } else {
          endTimeValue = r.end;
        }
    
        const [startH, startM] = parseTimeString(startTimeValue);
        const [endH, endM] = parseTimeString(endTimeValue);
        
        const startPct = timeToPercent(startH, startM);
        const endPct = timeToPercent(endH, endM);
    
        // Handle wrap-around time ranges (e.g. 22:00–06:00)
        const segments = startPct < endPct
          ? [{ left: startPct, width: endPct - startPct }]
          : [
              { left: startPct, width: 100 - startPct },
              { left: 0, width: endPct }
            ];
    
        let isActive = false;
    
        segments.forEach(({ left, width }) => {
          const seg = document.createElement('div');
          seg.className = `timeline-segment ${group}`;
          seg.style.left = `${left}%`;
          seg.style.width = `${width}%`;
          seg.style.background = processColor(r.color) || 'var(--primary-color)';
          seg.dataset.tooltip = `${r.label || ''}:  ${pad(startH)}:${pad(startM)} → ${pad(endH)}:${pad(endM)}`;
          if (r.source_entities) {
            seg.dataset.tooltip += `\nSources: ${r.source_entities}`;
          }
          
          const isRounded = getConfig("rounded_edges");
          if (isRounded) {
            const leftEdge = Math.round(left) === 0;
            const rightEdge = Math.round(left + width) === 100;
          
            seg.style.borderTopLeftRadius = leftEdge ? "0" : "4px";
            seg.style.borderBottomLeftRadius = leftEdge ? "0" : "4px";
            seg.style.borderTopRightRadius = rightEdge ? "0" : "4px";
            seg.style.borderBottomRightRadius = rightEdge ? "0" : "4px";
          } else {
            seg.style.borderRadius = "0";
          }
          wrapper.appendChild(seg);
    
          seg.addEventListener('mouseenter', () => {
            wrapper.querySelectorAll(`.${group}`).forEach(e => e.classList.add('highlighted'));
            showTooltip(seg);
          });
          seg.addEventListener('mouseleave', () => {
            wrapper.querySelectorAll(`.${group}`).forEach(e => e.classList.remove('highlighted'));
            hideTooltip();
          });
    
          if (currentPct >= left && currentPct <= left + width) {
            isActive = true;
          }
    
          if (r.icon) {
            const iconEl = document.createElement('ha-icon');
            iconEl.setAttribute('icon', r.icon);
            iconEl.className = `timeline-icon ${group}`;
            iconEl.style.left = `${left + width / 2}%`;
            iconEl.style.color = processColor(r.icon_color || getConfig('icon_color'));
            iconEl.style.border = `1px solid ${processColor(r.icon_outline_color || getConfig('icon_outline_color'))}`;
            iconEl.style.background = processColor(r.icon_background_color || getConfig('icon_background_color'));
            wrapper.style.setProperty(`--icon-${group}-active-color`, `${processColor(r.icon_active_color || getConfig('icon_active_color'))}`);
    
            wrapper.appendChild(iconEl);
    
            iconEl.addEventListener('mouseenter', () => {
              wrapper.querySelectorAll(`.${group}`).forEach(e => e.classList.add('highlighted'));
              showTooltip(seg);
            });
            iconEl.addEventListener('mouseleave', () => {
              wrapper.querySelectorAll(`.${group}`).forEach(e => e.classList.remove('highlighted'));
              hideTooltip();
            });
          }
        });
        
        // Apply glow to icons if active
        if (getConfig("highlight_active") && isActive) {
          wrapper.querySelectorAll(`.timeline-icon.${group}`).forEach(e => {e.style.filter = `drop-shadow(0 0 5px var(--icon-${group}-active-color))`;});
        } else {
          wrapper.querySelectorAll(`.timeline-icon.${group}`).forEach(e => {e.style.filter = '';});
        }
      }
    
      // 5. ===== Time Ticks =====
      if (getConfig("show_time_ticks") && !wrapper.querySelector('.timeline-tick')) {
        [0, 6, 12, 18, 24].forEach(h => {
          const tick = document.createElement('div');
          tick.className = 'timeline-tick';
          tick.style.left = `${(h / 24) * 100}%`;
          tick.innerText = `${pad(h % 24)}:00`;
          wrapper.appendChild(tick);
        });
      }
    
      // 6. ===== Current Time Marker =====
      if (getConfig("show_current_time")) {
        let marker = wrapper.querySelector('.timeline-marker');
        if (!marker) {
          marker = document.createElement('div');
          marker.className = 'timeline-marker';
          wrapper.appendChild(marker);
        }
        wrapper.style.setProperty('--timeline-marker-left', `${currentPct}%`);
        wrapper.style.setProperty('--marker-color', processColor(getConfig('marker_color')));
    
      }
    
    })()}
    
  
  editor:
    - type: expandable
      title: Timeline settings
      icon: mdi:timeline-text
      schema:
        - name: show_time_ticks
          label: Show time ticks on the timeline.
          default: true
          selector:
            boolean: null
        - name: rounded_edges
          label: Round edges of segments. Midnight edges will stay flat for display.
          default: false
          selector:
            boolean: null
        - name: show_current_time
          label: Show current time marker on the timeline.
          default: true
          selector:
            boolean: null
        - name: marker_color
          label: Color of the current time marker.
          selector:
            ui_color: null
    - type: expandable
      title: Global icon color settings
      icon: mdi:palette
      schema:
        - name: icon_color
          label: Icon color. Overridable per icon.
          selector:
            ui_color: null
        - name: icon_background_color
          label: Icon background color. Overridable per icon.
          selector:
            ui_color: null
        - name: icon_outline_color
          label: Icon outline color. Overridable per icon.
          selector:
            ui_color: null
        - name: highlight_active
          title: Highlight active period
          label: Highlight the current active period.
          default: true
          selector:
            boolean: null
        - name: icon_active_color
          label: Icon active period color. Overridable per icon.
          selector:
            ui_color: null
    - type: expandable
      title: Time Ranges - define additional in YAML
      icon: mdi:chart-gantt
      name: ranges
      schema:
        - type: expandable
          title: Time Range 1
          name: '0'
          schema:
            - name: start_entity
              label: Start Time Entity
              description: Entity whose state will be used as the start time (e.g. sensor.sun_next_dawn)
              selector:
                entity: null
            - name: start_attribute
              label: Start Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: start
              label: Fixed start time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: end_entity
              label: End Time Entity
              description: Entity whose state will be used as the end time
              selector:
                entity: null
            - name: end_attribute
              label: End Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: end
              label: Fixed end time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: label
              label: Label
              selector:
                text: null
            - name: color
              label: Timeline color
              selector:
                ui_color: null
            - name: icon
              label: Icon
              selector:
                icon: null
            - name: icon_color
              label: Icon color
              selector:
                ui_color: null
            - name: icon_background_color
              label: Icon background color
              selector:
                ui_color: null
            - name: icon_outline_color
              label: Icon outline color
              selector:
                ui_color: null
            - name: icon_active_color
              label: Icon active color
              selector:
                ui_color: null
            - name: source_entities
              label: Source entities (for tooltip)
              description: Optional information to show in tooltip
              selector:
                text: null
        - type: expandable
          title: Time Range 2
          name: '1'
          schema:
            - name: start_entity
              label: Start Time Entity
              description: Entity whose state will be used as the start time (e.g. sensor.sun_next_dawn)
              selector:
                entity: null
            - name: start_attribute
              label: Start Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: start
              label: Fixed start time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: end_entity
              label: End Time Entity
              description: Entity whose state will be used as the end time
              selector:
                entity: null
            - name: end_attribute
              label: End Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: end
              label: Fixed end time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: label
              label: Label
              selector:
                text: null
            - name: color
              label: Timeline color
              selector:
                ui_color: null
            - name: icon
              label: Icon
              selector:
                icon: null
            - name: icon_color
              label: Icon color
              selector:
                ui_color: null
            - name: icon_background_color
              label: Icon background color
              selector:
                ui_color: null
            - name: icon_outline_color
              label: Icon outline color
              selector:
                ui_color: null
            - name: icon_active_color
              label: Icon active color
              selector:
                ui_color: null
            - name: source_entities
              label: Source entities (for tooltip)
              description: Optional information to show in tooltip
              selector:
                text: null
        - type: expandable
          title: Time Range 3
          name: '2'
          schema:
            - name: start_entity
              label: Start Time Entity
              description: Entity whose state will be used as the start time (e.g. sensor.sun_next_dawn)
              selector:
                entity: null
            - name: start_attribute
              label: Start Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: start
              label: Fixed start time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: end_entity
              label: End Time Entity
              description: Entity whose state will be used as the end time
              selector:
                entity: null
            - name: end_attribute
              label: End Time Attribute (optional)
              description: Attribute to use instead of state
              selector:
                attribute: {}
            - name: end
              label: Fixed end time (ignored if entity is set)
              selector:
                time:
                  no_second: true
            - name: label
              label: Label
              selector:
                text: null
            - name: color
              label: Timeline color
              selector:
                ui_color: null
            - name: icon
              label: Icon
              selector:
                icon: null
            - name: icon_color
              label: Icon color
              selector:
                ui_color: null
            - name: icon_background_color
              label: Icon background color
              selector:
                ui_color: null
            - name: icon_outline_color
              label: Icon outline color
              selector:
                ui_color: null
            - name: icon_active_color
              label: Icon active color
              selector:
                ui_color: null
            - name: source_entities
              label: Source entities (for tooltip)
              description: Optional information to show in tooltip
              selector:
                text: null

[lsmarsden]

Nice - thanks for giving your update! I like your idea, and the editor changes make things look a bit nicer and organised too. I've included your changes in a new v1.1 version.

For anyone else coming across this - feel free to include and add changes. I will try my best to pull these in to this module so that everyone can access improvements through the module store! If we could one day get modules updateable via repos and PRs, that would be a dream.

[Jaw818]

No worries! I can't take credit for the organization though, I run all of my code through Claude AI first. It catches and fixes errors before I even test it, it also cleans it up and makes it nice and pretty :)

[JulienDeveaux]

@Jaw818 How did you get the calendar events start / end times for the day ?
I only see the next event in my entity attributes

[Clooos]

Hi! There is an indentation error in your module, this was not the case in v1.0.

Can you check that? Because it is not working in the module store anymore, it requests a manual install.

Edit: You can then hit the refresh button at the top of the editor to check if it's working again 🙂

Edit 2: Did you fully created it in the module editor? If yes, how was the experience?

Edit 3: Even if it's made with AI, I'm glad to see one more advanced module! Nice work!

[lsmarsden]

Hi - thanks, I'm not sure where the indentation issues came from. I just reinstalled it myself via the module store and that seems to all work now.

I used a mix of using the module editor and VSCode in Home Assistant. To initially create the module I used the module editor, and it's pretty good when creating something small. However, when any part started to get large, I was only able to see just a few lines of code at a time in the Description, Code, and Editor sections. My screen is relatively small (13 inch) so I found it easier to save the module, export it as YAML and start to build it out a bit further after that. Maybe if each of those sections were expandable like the Supported Cards section and resizable that might help a bit.

I did struggle a bit with updating the module to v1.1 😆 It was a bit difficult to take the edits from @Jaw818 and then check them and merge them in. I ended up just comparing the entire YAMLs and merging, then re-importing the module. That's probably where the indentation went wrong.

I don't really have any ideas on how to improve this process right now though - unless we can somehow move to modules imported via repos and pull requests 😉

[Clooos]

That would be sexy indeed, but you can still create and maintain a repo for a module, then just adding its full YAML to a discussion here, with a link for that repo.

And you can enlarge the editor by clicking on the title of the editor panel (Bubble Card configuration, in english).

[gandhiarpit]

Nice module. Any way to display 12hr format in the tooltip? I have all digital clocks in the house set to 12hr format as that's what everyone is used to. I like to keep the same format of this on the dashboard.

[lsmarsden]

Hey, great suggestion! I've made a few changes and you should now be able to customise the time formatting for both the timeline and the tooltip (individually or globally). You should be able to download v1.2.1 in the module store now! I've moved the main module into a GitHub repo where I'll be building a few more modules - here's where you can find the information for the module now: https://github.com/lsmarsden/bubble-card-modules/tree/main/modules/separator_as_timeline#example-yaml

And here's an example of customising the time (12-hour format in the timeline with AM/PM, 24-hour in the tooltip):

[gandhiarpit]

Thanks for quick workaround. This works nicely and easy to customize.

[lsmarsden]

Small update to v1.3.0:

• Added icon_size and icon_image_size options to configure icon total size and icon image size. These can be configured in any icon_settings block. Icon-level settings will override the global icon settings.

The default total icon size is 18px, and the default icon image size is 16px.

There have been deprecations to some fields (schema remodelling). Details are here under v1.3.0.

Old schema settings are still valid to allow backwards compatibility but will be removed in a future release. Making changes to values via the editor will add the new schema fields instead. These new schema fields will take priority over any existing deprecated fields.

Currently testing something to allow auto-migration of deprecated fields to their newer counterparts (if present).

[AkshayRao27]

So I'm trying to get the separator to have 24 segments, one for each hour, with the colour corresponding to that hour's electricity pricing.

The colours are defined inside a sensor:

And I can call them like this:

This is kind of what I am hoping to get it to look like:

Electricity pricing changes daily which means that each hour's "pricing rank" and therefore its colour will also change daily. So I need the colours to be "dynamic". The general bubble card CSS Styles clued me in on the syntax:


(The values for Current, Rank, Rank_Alpha, and Rank_Pastel change hourly - they depend on the rank of the current hour's price among the prices for all other hours today, while Highest and Lowest update daily and depend on the actual price and not rank)

But now I'm not sure why the dynamic colours aren't being evaluated properly here. I get 24 little chunks, each with a gradient from yellow to blue:

Am I making some stupid syntax mistake somwehere?

Here's the code:

type: custom:bubble-card
card_type: separator
name: Energy
icon: mdi:lightning-bolt
sub_button: []
card_layout: large
modules:
  - separator_as_timeline
separator_as_timeline:
  ranges:
    "0":
      start: "00:00:00"
      end: "01:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_00"]}
    "1":
      start: "01:00:00"
      end: "02:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_01"]}
    "2":
      start: "02:00:00"
      end: "03:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_02"]}
    "3":
      start: "03:00:00"
      end: "04:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_03"]}
    "4":
      start: "04:00:00"
      end: "05:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_04"]}
    "5":
      start: "05:00:00"
      end: "06:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_05"]}
    "6":
      start: "06:00:00"
      end: "07:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_06"]}
    "7":
      start: "07:00:00"
      end: "08:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_07"]}
    "8":
      start: "08:00:00"
      end: "09:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_08"]}
    "9":
      start: "09:00:00"
      end: "10:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_09"]}
    "10":
      start: "10:00:00"
      end: "11:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_10"]}
    "11":
      start: "11:00:00"
      end: "12:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_11"]}
    "12":
      start: "12:00:00"
      end: "13:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_12"]}
    "13":
      start: "13:00:00"
      end: "14:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_13"]}
    "14":
      start: "14:00:00"
      end: "15:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_14"]}
    "15":
      start: "15:00:00"
      end: "16:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_15"]}
    "16":
      start: "16:00:00"
      end: "17:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_16"]}
    "17":
      start: "17:00:00"
      end: "18:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_17"]}
    "18":
      start: "18:00:00"
      end: "19:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_18"]}
    "19":
      start: "19:00:00"
      end: "20:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_19"]}
    "20":
      start: "20:00:00"
      end: "21:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_20"]}
    "21":
      start: "21:00:00"
      end: "22:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_21"]}
    "22":
      start: "22:00:00"
      end: "23:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_22"]}
    "23":
      start: "23:00:00"
      end: "00:00:00"
      color: >-
        ${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_23"]}

I tried a different approach too:
I created a sensor with the entire ranges block in its attributes:

and calling it like so:

type: custom:bubble-card
card_type: separator
name: Energy
icon: mdi:lightning-bolt
sub_button: []
card_layout: large
modules:
  - separator_as_timeline
separator_as_timeline:
  ranges: ${hass.states['sensor.electricity_price_colours_by_hour_state'].attributes.ranges}

But when I save & go back into the YAML Editor, the card completely borks the variable ranges xD

[lsmarsden]

Hey @AkshayRao27, I took a quick look at this.

From my understanding, your code

${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_15"]}

works when you update the styles because these are implicitly added into the JavaScript code behind the scenes when you add them via the editor. In this code, it interprets and uses the hass variables and its features, so you can pull through entities and their values through this. I actually didn't know you could use it like this in styles!

I think the way it works in the styling css has tricked you - the YAML doesn't use 'templating' here, so it doesn't just replace what you put in ${here} with text, it actually injects the entire YAML into a JavaScript object and then gives this to a function so that it can access the YAML values (exactly as they were typed) and do things with them.

In this module, the value you input into color is parsed in this function:

    function processColor(color) {
      if (!color) return null;
      if (["#", "rgb", "hsl"].some((prefix) => color.startsWith(prefix))) {
        return color;
      }
      return `var(--${color}-color)`;
    }

The linear gradients are appearing because that is the default styling in the .timeline-segment css:

.timeline-segment {
    ...
    background: linear-gradient(to right, var(--accent-color), var(--primary-color));
    ...
}

Meaning your code isn't coming back with a valid colour as far as the processor is concerned. The value of your range.color is passed directly into processColor() so it's trying to evaluate it literally as a string, instead of parsing it directly. So, it ends up returning var(--${hass.states['sensor.electricity_price_colours_by_hour'].attributes["hour_15"]}-color) which is not a defined colour variable, so it uses the default linear gradient.

Overall this raises an interesting point of being able to see if we can evaluate these sections directly. I think it would be quite good if modules could automatically work with this (maybe they can somehow and I haven't set up the module correctly to allow for this).
Also I will consider updating the default styling to something else, although it's a pretty unique colour setup so it makes it easy to tell when a colour doesn't resolve properly (as long as you know that's what causes it).

In the meantime, I will look at adding in the ability to pass an entity into the color field. If we find a state for it, we can use that to try and resolve a colour.

If I can extend this to something general, a defined structure for putting any state/attribute in a YAML field would allow something like this to be used everywhere. Something like entity[attribute] might work.

I think that could work for you, then you would be able to do something like:

ranges:
  - start: "00:00:00"
     end: "01:00:00"
     color: sensor.electricity_price_colours_by_hour[hour_00]
  - start: "01:00:00"
     end: "02:00:00"
     color: sensor.electricity_price_colours_by_hour[hour_01]

Let me know if that would suit what you're trying to do. I'd need to come up with some syntax that is intuitive, so I can make it a convention that people can easily start to adopt within my modules.

Regarding the ranges looking crazy - I think this is a limitation with how the editor converts to YAML. Ideally I would like ranges (and other objects in modules) to be an unlimited list, where you could do something like:

ranges:
  - start: "00:00:00"
     end: "01:00:00"
     color: blue
  - start: "01:00:00"
     end: "02:00:00"
     color: red

This currently works if you define it in YAML, but once you make a change via the editor it automatically resets to a numbered object structure. The editor also doesn't support a generic 'Add another' button which would allow adding to the list automatically. That's why this module and others typically define a small fixed list in the editor. Any extras need to be added in YAML.

[AkshayRao27]

I think that could work for you, then you would be able to do something like:

ranges:
 - start: "00:00:00"
   end: "01:00:00"
   color: sensor.electricity_price_colours_by_hour[hour_00]
- start: "01:00:00"
   end: "02:00:00"
   color: sensor.electricity_price_colours_by_hour[hour_01]```

Thanks so much for looking into this.

Yes, being able to tell the module that the required data is located in either entity-type + entity name or in entity-type + entity name + entity attribute would be perfect.

[lsmarsden]

Good news @AkshayRao27 - I've managed to get this working. If you update to v1.4.0 you can now do exactly that. There is now the magic of AI Dynamic Entity Resolution. You'll see this at the top of the editor:

And then any fields that you can use this (currently all the colour inputs) will have the ✨ icon, for example:

Let me know if you have any issues!

[lsmarsden]

Updated to v1.4.0!

Added AI Dynamic Entity Resolution (DER)

To use DER, look for any input field that contains ✨ in the editor label. This means you can now use:

• Simple values e.g. red
• Entities e.g. input_text.my_favourite_color or sensor.sun_next_dawn
• Attributes using format entity[attribute], such as sensor.my_phone[battery_level]

Example editor with DER support: