hazymorning/origami_weather

An AI can draw your own home in the same style and build the layout around it. Use the most capable model you have access to, it needs to understand photos, draw clean SVGs and work through this whole README.

Give it:

1. This README as a reference. Download README.md from the repo.
2. A few photos of your home, ideally one from the front and one from a corner, so the shape is clear.
3. The YAML of a card with the Home layout. Pick the layout in the visual editor, then open the code editor and copy it.
4. image-assets.js from the repo. Its last entry, DEMO_HOME, is the demo house, so the AI can match the style.
5. Optionally, the light entities of your rooms, so a room can light up when its light is on.

Then paste this and fill in the brackets:

I'm using the Origami Weather card for Home Assistant and want to turn its Home layout into my own home. Attached are the card's README (the full reference for every option), my card YAML with the Home layout, image-assets.js (DEMO_HOME at the end is the demo house) and photos of my home.

1. Draw my home as an SVG in the style of DEMO_HOME: isometric, flat matte colors, no outlines, soft ground shadow, transparent background, square viewBox with the house centered. Recognizable, but simplified.
2. Make two versions, one for light mode and one for dark mode, for `image` and `image_dark` on the container. Both are loaded as normal image files, so they can't read the card's CSS variables or classes the way DEMO_HOME does.
3. Rebuild the card YAML around it. Put each room's temperature on that room as free-positioned buttons inside the image container, with offsets in %, so they stay in place when the card resizes. Use my sensors instead of the weather entity:
   [sensor.living_room_temperature: living room]
   [...]
4. Optional: make a room light up when its light is on, for example with a lit window overlay as an icon element (`icon_path`) that only shows through `visibility`. Keep the windows dark in both base images then.
   [light.living_room: living room]
   [...]

Read the whole README before you start and really use what's in it: containers, free positioning, all element types, visibility, thresholds, the gradient layer and the `css` option. Almost anything is possible. For `css`, the card sets --origami-sun-x, --origami-sun-y, --origami-sun-shadow and --origami-sun-light, and #card-root has scheme-light/scheme-dark and weather-<condition> classes.

Give me the SVG files, where they go (/config/www/, used as /local/...) and the complete card YAML.

Once it works, play around with the card settings to find a look you like. The Home layout turns off the sun, the clouds and the other effects, and switching some of them back on or trying a different background can change the whole feel. Pretty much anything in this README can go into it, so let the AI try things.

Containers are the top-level layout blocks. Each one holds a list of buttons and controls how they're arranged. Stack a few containers to build up the card.

They flow vertically by default. Set content_direction: row at the card level for horizontal, or use custom_width on individual containers.

button_containers:
  - padding: 0 4px
    buttons:
      - entity: weather.home
        text_size: 30px
  - background: true
    gap: 8px
    buttons:
      - entity: sensor.humidity
      - entity: sensor.wind_speed

A container can show an image with image, as wide as the container. Its buttons sit on top of it, and with free positioning you can put each one exactly where it belongs, like room temperatures on a floor plan. image_dark swaps in a different image while the card is in dark mode, and image: demo-home-image gives you the house from the Home layout.

button_containers:
  - image: /local/floorplan.png
    custom_width: 60%
    buttons:
      - entity: sensor.living_room_temperature
        position: custom
        position_x: 30%
        position_y: 40%

Containers can also hold other HA cards instead of buttons using custom_cards:

button_containers:
  - custom_cards:
      - type: custom:mini-graph-card
        entities:
          - sensor.temperature

Each embedded card takes custom_width and custom_height if it needs a size of its own.

Buttons are the items inside a container. Each one is tied to an entity and shows live data from it: a sensor value, a weather attribute, a forecast entry, or just an icon.

They can be styled individually or inherit defaults from their container. They support ring gauges, background images, conditional visibility, free positioning, tap actions, and scrolling text.

buttons:
  - entity: sensor.outside_temperature
    elements:
      - type: icon
        icon: mdi:thermometer
      - type: text

Conditional visibility. A button can show up only when certain conditions are met, using the same visibility conditions HA uses everywhere else:

buttons:
  - entity: sensor.wind_gust
    visibility:
      - condition: numeric_state
        entity: sensor.wind_gust
        above: 40

State, numeric state, screen size, user, and and/or/not conditions are supported. A numeric_state condition can read an attribute instead of the state, or a forecast entry with forecast: daily or hourly plus forecast_offset. If you list several conditions, all of them have to pass. Visibility also works at the container level.

Free positioning. Any button can be taken out of the normal flow and placed freely inside its container:

buttons:
  - entity: sensor.outside_temperature
    position: custom
    position_anchor: top-right
    position_x: 20px
    position_y: 10px
    background: true

Containers can be placed freely on the card the same way. Offsets and sizes inside free-positioned containers can use container query units (cqw, cqh, cqmin), which are relative to the card instead of the screen. That way the whole arrangement scales along with the card.

Everything inside a button is an element. A button holds a flat elements list, and the order of that list is the order things are drawn in. There are three types: text, icon and bar. You can use as many of each as you want and mix them freely, so a bar can sit between two texts, or an icon can sit after the value instead of before it.

buttons:
  - entity: weather.home
    forecast: daily
    elements:
      - type: text
        text: "Today: "
        size: 12px
      - type: text
        attribute: templow
        format: " –"
        weight: "700"
      - type: text
        attribute: temperature
        weight: "700"

That gives you something like "Today: 8 – 14°" inside a single button.

If you leave elements out completely, the button shows one text element with the entity state.

All three types take margin and padding, which is the usual way to nudge one element around without touching the rest of the button.

Text elements take entity, attribute, text (a fixed string), format (glued to the end of the value, usually a unit), precision (decimal places), size, weight, color, overflow and fancy_unit. A text element without entity, attribute or text falls back to the button's own entity and attribute. Note that weight also sets the opacity: light weights are drawn faded, heavy ones fully opaque. That is why a weight: 300 label looks softer than the value next to it. A text with its own color is not faded.

Icon elements take icon, icon_path, icon_size, icon_padding, icon_background, icon_background_color, color and color_thresholds. Leave icon empty and the entity's own icon is used. Set icon: weather for the animated icon that matches the current weather.

Bar elements are horizontal gauges. They take bar_min, bar_max, bar_height, bar_color, bar_threshold_mode and bar_thresholds. A bar uses the button's own value, unless you set a different one with bar_values.

buttons:
  - entity: sensor.humidity
    elements:
      - type: icon
        icon: mdi:water-percent
      - type: text
        format: "%"
      - type: bar
        bar_max: 100
        bar_height: 5px

Set forecast to daily or hourly on a button to show forecast data. Use forecast_offset to pick the entry: 0 is today/now, 1 is tomorrow/next hour, and so on. A text element with attribute: datetime prints the matching label (day name or time). With icon: weather on an icon element, the icon matches the forecasted condition.

buttons:
  - entity: weather.home
    forecast: hourly
    forecast_offset: 3
    elements:
      - type: icon
        icon: weather
      - type: text
        attribute: temperature
        format: "°"

There are two gauge shapes. A ring wraps around the whole button and is set on the button itself with type: ring. A bar is an element you can add in the elements list with type: bar. Both fill based on a value inside a min/max range, and everything below works the same for both, only the ring_ or bar_ prefix changes.

buttons:
  - entity: sensor.humidity
    type: ring
    ring_min: 0
    ring_max: 100
    ring_width: 4px
    ring_color: "#03a9f4"
    elements:
      - type: text

Color thresholds change the gauge color as the value rises. solid fills the whole gauge with the matched color, segments draws each range as its own section, and gradient blends between the colors.

ring_threshold_mode: gradient
ring_thresholds:
  - value: 0
    color: "#4caf50"
  - value: 60
    color: "#ff9800"
  - value: 80
    color: "#f44336"

A gauge can also show more than one value. Add entries to bar_values or ring_values and it becomes a comparison: the fill follows the first value, and every value gets its own marker. Each entry takes entity, attribute, marker_size, marker_color, marker_icon and marker_icon_color.

elements:
  - type: bar
    bar_min: -10
    bar_max: 40
    bar_height: 10px
    bar_values:
      - attribute: temperature
        marker_icon: mdi:thermometer
      - entity: sensor.outside_temperature
        marker_color: "#03a9f4"

With one value there is no marker, bar_marker: true adds it. The marker matches the bar height, so a thin bar means a small icon, unless you set bar_marker_size to make it stick out on both sides. bar_fill: false drops the fill and leaves only the markers, and a marker_size of 0 on a single value hides its marker, which is handy when a value should only drive the fill.

bar_range_from and bar_range_to draw a highlighted band on the track, which is useful for marking the range you actually care about.

A ring doesn't have to be a full circle. ring_start rotates where it begins, in degrees clockwise from the top, and ring_arc sets how far it goes, so ring_start: 240 with ring_arc: 240 gives you an open arc with the gap at the bottom.

ring_needle: true turns the markers into needles that point from the center, like a compass or a clock hand. A value can also be a fixed number with value instead of reading an entity, which is handy for a mark that never moves. The compass in the Home layout is built like that.

Values don't have to be numbers either. Times work too, both a plain 06:32 and a full timestamp, and the gauge then wraps around a 24 hour clock. The numeric gauge options like ring_min, bar_max or ring_range_from can be an entity ID instead of a fixed number, so the ends of a gauge can follow something like today's sunrise and sunset. The Arc layout is built exactly like that.

Any button or icon element can also use color_thresholds to tint itself based on a value, with no gauge involved. An icon reads its own entity or attribute if it has one, otherwise the button's value. The value doesn't have to be a number here, a state like on or home works too.

The card comes with animated weather icons. Turn them on with icon: weather on an icon element.

To use your own, point at a folder of SVGs with icon_path. Name the files after the weather conditions (sunny.svg, rainy.svg, etc., using the standard HA condition names). You can set icon_path once at the card level so every icon: weather element uses it.

Set icon_path on a single element and it applies to whatever that element's icon says, not just to weather, so it doubles as a way to pull in one-off custom graphics. The card appends .svg unless the name already has a file extension.

# Per element
elements:
  - type: icon
    icon: weather
    icon_path: /local/weather-icons/

# Or card level
icon_path: /local/weather-icons/

The card renders a sun during the day and a moon at night, positioned within the background. The moon shows the current phase, which the card works out on its own.

The old sun_moon_enabled is converted to the two separate toggles automatically and a leftover moon_phase_entity is simply ignored, so existing configs keep working.

Every entry in a button's elements list needs a type, which is text, icon or bar.

Text (type: text)

Icon (type: icon)

Bar (type: bar)

Gauge value (an entry in bar_values or ring_values)

Set on the button, not on an element. Needs type: ring. Entries in ring_values take the same options as the gauge values under Elements.

The old gauge_entity and gauge_attribute are converted to a ring_values entry automatically, so existing configs keep working.

The background itself

Layers drawn on top

These run on top of whichever background you picked, including images and none.

The sun and moon sit in this group too. Their options live under Card · Sun & Moon.

Treatments over the whole thing

edge_fade and card_frame also change how the background meets the dashboard. Both are under Card · Color & frame.