Widget Luồng

The flow template describes something moving through a system, in four generic slots: what comes in (inputs), what buffers it (storage), what is traded with the outside (exchange), and what consumes it (output). Home energy is the obvious case — solar in, battery buffering, grid import and export, house draw — but water, data and money map onto the same four slots.

Fields

Example: home energy

{
  "content": {
    "template": "flow",
    "label": "Power",
    "subtitle": "Solar · grid · home",
    "icon": "point.3.filled.connected.trianglepath.dotted",
    "unit": "W",
    "accent_color": "mint",
    "flow": {
      "inputs": [
        { "name": "Solar", "rate": 3200, "total": 12.4, "icon": "sun.max.fill", "color": "yellow" }
      ],
      "output":   { "name": "Home",    "rate": 1000, "total": 9.8, "icon": "house.fill" },
      "storage":  { "name": "Battery", "rate": 800,  "level": 76,  "icon": "battery.75percent", "color": "green" },
      "exchange": { "name": "Grid",    "rate": -1400, "total": 3.1, "icon": "bolt.fill", "color": "cyan" }
    }
  }
}

Behavior

The sign of rate is what makes the two-way slots readable, and it means different things per slot. On exchange, positive is inbound (importing from the grid) and negative is outbound (exporting to it) — the example above is exporting 1400 W. On storage, positive is filling and negative is draining. Inputs and the output are one-directional, so their rates are plain magnitudes.

Only the slots you send are drawn, so the same template covers a solar array with no battery, a water main with no local source, or a bare consumption meter. storage additionally shows its level as a fill indicator; level on any other slot is ignored. total is the running figure for the day and renders under the rate where the widget family has room.

Wire up slots and flip the signs on the playground to see how each direction renders.