1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Weather chip — reference renderer</title>
<style>
:root{
--panel:#100f0f; --ground:#151311; --cream:#f3e7c5; --steel:#969385;
--gold:#e2a038; --gold-hi:#ffbe54; --amber-edge:#7d5c16;
--mono:"BerkeleyMono Nerd Font","Berkeley Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--cream);font-family:var(--mono);padding:32px 4vw 80px}
h1{color:var(--cream);font-size:19px;margin-bottom:6px}
p{color:var(--steel);font-size:12.5px;max-width:820px;line-height:1.6;margin-bottom:8px}
code{color:var(--gold-hi)}
.row{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;margin-top:26px}
figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
figcaption{color:var(--steel);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
/* the chip */
.wx-chip{display:inline-flex;align-items:center;gap:8px;background:#080808;border-radius:8px;
padding:6px 11px;box-shadow:inset 0 2px 8px #000, 0 0 0 1px #33290f}
.wx-chip .temp{color:#e9e9e9;font-size:17px}
.wx-chip .sep{width:1px;align-self:stretch;background:#33290f;margin:2px 0}
.wx-chip .spd{color:var(--gold);font-size:13px}
.wx-chip svg{display:block}
</style>
</head>
<body>
<h1>Weather chip — reference renderer</h1>
<p>The chosen bar form, wired to the <code>weather</code> CLI contract. Each chip below is built by <code>renderChip(reading)</code> from a contract object (the JSON <code>weather --json</code> prints). This is the reference for the port into the Dupre kit's <code>svg.el</code>: condition glyph, temperature, then the wind slot — which collapses to the gust glyph + speed when <code>windy</code>, or the direction vane + speed when calm. Constant width either way.</p>
<p>To drive it live: <code>weather --json | (feed into renderChip)</code>. The samples here are static so the condition and calm/windy mapping is visible at a glance.</p>
<!-- the custom glyph set, inlined (same as weather-glyphs.svg) -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<symbol id="wx-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.3" fill="currentColor"/><g stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="12" y1="1.5" x2="12" y2="4.6"/><line x1="12" y1="19.4" x2="12" y2="22.5"/><line x1="1.5" y1="12" x2="4.6" y2="12"/><line x1="19.4" y1="12" x2="22.5" y2="12"/><line x1="4.6" y1="4.6" x2="6.8" y2="6.8"/><line x1="17.2" y1="17.2" x2="19.4" y2="19.4"/><line x1="4.6" y1="19.4" x2="6.8" y2="17.2"/><line x1="17.2" y1="6.8" x2="19.4" y2="4.6"/></g></symbol>
<symbol id="wx-partly" viewBox="0 0 24 24"><circle cx="8.5" cy="8" r="3.2" fill="currentColor"/><g stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="8.5" y1="1.5" x2="8.5" y2="3.4"/><line x1="1.7" y1="8" x2="3.6" y2="8"/><line x1="3.7" y1="3.2" x2="5" y2="4.5"/><line x1="13.3" y1="3.2" x2="12" y2="4.5"/></g><g fill="currentColor"><circle cx="12" cy="15" r="3.6"/><circle cx="16.5" cy="13" r="4.4"/><circle cx="20" cy="15.6" r="3.1"/><rect x="11" y="15" width="10" height="4" rx="2"/></g></symbol>
<symbol id="wx-cloud" viewBox="0 0 24 24"><g fill="currentColor"><circle cx="7.5" cy="13" r="4"/><circle cx="12.5" cy="10.5" r="5.2"/><circle cx="17" cy="13.5" r="3.6"/><rect x="6.5" y="13" width="11.5" height="4.2" rx="2.1"/></g></symbol>
<symbol id="wx-rain" viewBox="0 0 24 24"><g fill="currentColor"><circle cx="7.5" cy="9" r="3.6"/><circle cx="12.5" cy="7" r="4.6"/><circle cx="16.5" cy="9.6" r="3.1"/><rect x="6.5" y="9" width="10.5" height="3.8" rx="1.9"/></g><g stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="8" y1="15.5" x2="6.6" y2="19.5"/><line x1="12" y1="15.5" x2="10.6" y2="19.5"/><line x1="16" y1="15.5" x2="14.6" y2="19.5"/></g></symbol>
<symbol id="wx-storm" viewBox="0 0 24 24"><g fill="currentColor"><circle cx="7.5" cy="9" r="3.6"/><circle cx="12.5" cy="7" r="4.6"/><circle cx="16.5" cy="9.6" r="3.1"/><rect x="6.5" y="9" width="10.5" height="3.8" rx="1.9"/></g><path d="M12.5 14 L9 19.5 h3 L10.5 23.5 L15.5 17.5 h-3 L14 14 Z" fill="currentColor"/></symbol>
<symbol id="wx-snow" viewBox="0 0 24 24"><g fill="currentColor"><circle cx="7.5" cy="9" r="3.6"/><circle cx="12.5" cy="7" r="4.6"/><circle cx="16.5" cy="9.6" r="3.1"/><rect x="6.5" y="9" width="10.5" height="3.8" rx="1.9"/></g><g stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><g transform="translate(9,17.5)"><line x1="-2" y1="0" x2="2" y2="0"/><line x1="0" y1="-2" x2="0" y2="2"/><line x1="-1.4" y1="-1.4" x2="1.4" y2="1.4"/><line x1="-1.4" y1="1.4" x2="1.4" y2="-1.4"/></g><g transform="translate(15,18.5)"><line x1="-2" y1="0" x2="2" y2="0"/><line x1="0" y1="-2" x2="0" y2="2"/><line x1="-1.4" y1="-1.4" x2="1.4" y2="1.4"/><line x1="-1.4" y1="1.4" x2="1.4" y2="-1.4"/></g></g></symbol>
<symbol id="wx-fog" viewBox="0 0 24 24"><g stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><line x1="3" y1="7" x2="21" y2="7"/><line x1="5" y1="11.5" x2="19" y2="11.5"/><line x1="3" y1="16" x2="18" y2="16"/><line x1="7" y1="20.5" x2="21" y2="20.5"/></g></symbol>
<symbol id="wx-wind" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M2.5 8 H13.5 a2.6 2.6 0 1 0 -2.55 -3.1"/><path d="M2.5 12.5 H18 a2.9 2.9 0 1 1 -2.85 3.45"/><path d="M2.5 17 H10.5 a2.3 2.3 0 1 1 -2.25 2.75"/></g></symbol>
<symbol id="wx-vane" viewBox="0 0 24 24"><path d="M12 2.4 L15.6 9 L12.9 9 L12.9 21 L11.1 21 L11.1 9 L8.4 9 Z" fill="currentColor" stroke="currentColor" stroke-width=".8" stroke-linejoin="round"/></symbol>
</defs></svg>
<div class="row" id="chips"></div>
<script>
// condition -> glyph id. Only "clear" differs from its name (historically the sun).
const GLYPH = {clear:"wx-sun", partly:"wx-partly", cloud:"wx-cloud",
fog:"wx-fog", rain:"wx-rain", snow:"wx-snow", storm:"wx-storm"};
// The whole render: contract object in, chip element out. This is the logic to
// port to svg.el -- glyph, temp, then wind slot (gust glyph when windy, else the
// vane rotated by wind_deg). Same footprint either way.
function renderChip(r){
const chip = document.createElement("div");
chip.className = "wx-chip";
const cond = GLYPH[r.condition] || "wx-cloud";
chip.innerHTML =
`<svg width="24" height="24" style="color:var(--gold-hi)"><use href="#${cond}"/></svg>` +
`<span class="temp">${r.temp_f}°</span>` +
`<span class="sep"></span>` +
(r.windy
? `<svg width="20" height="20" style="color:var(--gold-hi)"><use href="#wx-wind"/></svg>`
: `<svg width="18" height="18" style="color:var(--gold-hi);transform:rotate(${r.wind_deg}deg);transform-origin:center"><use href="#wx-vane"/></svg>`) +
`<span class="spd">${r.wind_mph}</span>`;
if (r.stale) chip.style.opacity = ".55";
return chip;
}
// Sample readings covering the condition set + the calm/windy collapse + stale.
const SAMPLES = [
[{temp_f:94, condition:"clear", windy:false, wind_mph:9, wind_deg:335}, "clear · calm"],
[{temp_f:78, condition:"clear", windy:true, wind_mph:22, wind_deg:293}, "clear · windy"],
[{temp_f:61, condition:"rain", windy:false, wind_mph:7, wind_deg:120}, "rain"],
[{temp_f:58, condition:"storm", windy:true, wind_mph:31, wind_deg:200}, "storm · windy"],
[{temp_f:34, condition:"snow", windy:false, wind_mph:5, wind_deg:20}, "snow"],
[{temp_f:66, condition:"partly", windy:false, wind_mph:11, wind_deg:250}, "partly"],
[{temp_f:55, condition:"fog", windy:false, wind_mph:3, wind_deg:70}, "fog"],
[{temp_f:88, condition:"clear", windy:false, wind_mph:9, wind_deg:335, stale:true}, "stale (dimmed)"],
];
const host = document.getElementById("chips");
for (const [reading, label] of SAMPLES){
const fig = document.createElement("figure");
fig.appendChild(renderChip(reading));
const cap = document.createElement("figcaption");
cap.textContent = label;
fig.appendChild(cap);
host.appendChild(fig);
}
</script>
</body>
</html>
|
