From 1ed34aa44879296eef34bb0509e8b96533217f15 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Sun, 18 Oct 2026 15:14:06 +0200 Subject: feat(details): the wind compass takes the big value's place card.standard() accepts a function as spec.big and calls it with the big slot's right edge, top and size, so a card can put a graphic where the big number goes. details draws its compass there, 1.2x the slot, and the band under the rows is gone: the card drops to 4.25 rows and sky moves up to take the space. Co-Authored-By: Claude Opus 5.5 --- dashboard.lua | 4 ++-- .../2026-10-18-mirage-weather-cards-design.md | 2 +- lib/card.lua | 13 +++++++---- widgets/details.lua | 25 +++++++++++++--------- 4 files changed, 27 insertions(+), 17 deletions(-) diff --git a/dashboard.lua b/dashboard.lua index ec2c464..d29479f 100644 --- a/dashboard.lua +++ b/dashboard.lua @@ -32,8 +32,8 @@ local layout = { -- The forecast set, in the right side the quickshell moves left open. { widget = 'hourly', col = 10, row = 1, w = 7, h = 3 }, { widget = 'week', col = 10, row = 4, w = 3.5, h = 5.5 }, - { widget = 'details', col = 13.5, row = 4, w = 3.5, h = 4.5 }, - { widget = 'sky', col = 13.5, row = 8.5, w = 3.5, h = 4.5 }, + { widget = 'details', col = 13.5, row = 4, w = 3.5, h = 4.25 }, + { widget = 'sky', col = 13.5, row = 8.25, w = 3.5, h = 4.75 }, } -- ========================================================================== diff --git a/docs/superpowers/specs/2026-10-18-mirage-weather-cards-design.md b/docs/superpowers/specs/2026-10-18-mirage-weather-cards-design.md index cfa344e..3b4ae18 100644 --- a/docs/superpowers/specs/2026-10-18-mirage-weather-cards-design.md +++ b/docs/superpowers/specs/2026-10-18-mirage-weather-cards-design.md @@ -51,7 +51,7 @@ only what DESIGN.md calls a card's variable band. | `now` | condition glyph at big-value size, standing in for the title | current temperature, `body` | feels like, high / low, rain chance, last update | none | | `hourly` | glyph + "Next 24h" | next hour's temperature, `body` | none | temperature curve over 24 hours; every 3rd hour labelled with glyph and temperature; rain-chance bars under the curve in `value`, half alpha, with a minimum height so a low chance still shows | | `week` | glyph + "Week" | none (band carries the value) | one per day: day name, glyph, min, range bar, max | the range bar in each row, positioned on the week's overall min..max scale | -| `details` | glyph + "Details" | none | wind (speed + compass point), humidity, UV, AQI | a small wind compass with a needle at the wind direction | +| `details` | glyph + "Details" | a small wind compass, arrow pointing where the wind goes | wind (speed + compass point), humidity, UV, AQI | none | | `sky` | glyph + "Sky" | moon-phase glyph, `heading` | sunrise, sunset, day length, moon illumination % | the daylight arc, moved from today's `widgets/weather.lua` | ### Colour thresholds diff --git a/lib/card.lua b/lib/card.lua index 34c1c0b..4163aae 100644 --- a/lib/card.lua +++ b/lib/card.lua @@ -322,7 +322,8 @@ end -- -- spec.icon, spec.title the title run, as M.title draws it; no title draws -- the icon alone at the big value's size --- spec.big the big value; nil drops it (a band carries the value) +-- spec.big the big value; nil drops it (a band carries the value); +-- a function(cr, right, top, size) draws a graphic there -- spec.big_color defaults to colors.body -- spec.big_font defaults to FONT_HEAVY; FONT_MONO for a glyph -- spec.rows { {label, value, color}, ... }, color defaults to colors.value @@ -334,12 +335,14 @@ end function M.standard(cr, inner, colors, spec) local LABEL_F, BIG_F, ROW_F = 0.30, 1.0, 0.32 local rows = spec.rows or {} - local big = spec.big and tostring(spec.big) + local big = spec.big + local graphic = type(big) == 'function' + if big and not graphic then big = tostring(big) end local big_font = spec.big_font or M.FONT_HEAVY -- No title: the icon stands in for it at the big value's size (DESIGN.md). local head = { spec.title and { M.title_str(spec.icon, spec.title), M.FONT_MONO, LABEL_F } or { spec.icon, M.FONT_MONO, BIG_F } } - if big then head[2] = { big, big_font, BIG_F } end + if big and not graphic then head[2] = { big, big_font, BIG_F } end local groups = { head } for _, r in ipairs(rows) do groups[#groups + 1] = { { r[1], M.FONT_MONO, ROW_F }, @@ -352,7 +355,9 @@ function M.standard(cr, inner, colors, spec) M.fit_unit(cr, inner.w * 0.96, groups, 100)), 10, 72) local label_size, row_size = S * LABEL_F, S * ROW_F - if big then + if graphic then + big(cr, inner.x + inner.w, inner.y, S * BIG_F) + elseif big then M.font(cr, big_font, S * BIG_F, false) M.rgba(cr, spec.big_color or colors.body) M.text_right(cr, inner.x + inner.w, inner.y + S * BIG_F, big) diff --git a/widgets/details.lua b/widgets/details.lua index 45f2f3d..36ce016 100644 --- a/widgets/details.lua +++ b/widgets/details.lua @@ -1,4 +1,5 @@ --- Details: wind, humidity, UV and air quality, over a wind compass. +-- Details: wind, humidity, UV and air quality, with a wind compass as the +-- big value. -- -- Adapted from the Conky-Mirage theme's details tiles by alexsson-xexpanderx -- (see lib/weather.lua). UV and AQI are the measured quantities here, so they @@ -10,17 +11,18 @@ local weather = require 'lib.weather' local M = {} -local function draw_compass(cr, x, y, w, h, colors, deg, S) - local r = math.min(w, h) / 2 - S * 0.1 - if r < 24 then return end - local cx, cy = x + w / 2, y + h / 2 +-- The compass fills the big value's slot: `size` square, its right edge at +-- `right`, its top at `top`. +local function draw_compass(cr, right, top, size, colors, deg) + local r = size / 2 + local cx, cy = right - r, top + r card.rgba(cr, colors.rule, 0.8) cairo_set_line_width(cr, 1) cairo_new_path(cr) cairo_arc(cr, cx, cy, r, 0, math.pi * 2) cairo_stroke(cr) - local size = math.min(r * 0.2, S * 0.32) + local size = r * 0.28 card.font(cr, card.FONT_MONO, size, false) card.rgba(cr, colors.label) for i, p in ipairs({ 'N', 'E', 'S', 'W' }) do @@ -32,7 +34,7 @@ local function draw_compass(cr, x, y, w, h, colors, deg, S) if type(deg) ~= 'number' then return end -- Open-Meteo gives where the wind comes FROM; the needle points where it goes. local a = math.rad(deg + 180) - local tip = r - size * 2 + local tip = r - size * 1.6 local sa, ca = math.sin(a), math.cos(a) -- A filled arrowhead at the tip, so the needle reads one way only. The shaft -- stops at the head's base: a stroke run to the apex would blunt it. @@ -74,10 +76,13 @@ function M.draw(cr, rect, colors) colors[weather.uv_role(uv)] }, { 'AIR (EAQI)', weather.num(aqi), colors[weather.aqi_role(aqi)] }, } - local y, S = card.standard(cr, inner, colors, { - icon = card.ICON.details, title = 'DETAILS', rows = rows, share = 0.8, + card.standard(cr, inner, colors, { + icon = card.ICON.details, title = 'DETAILS', rows = rows, + big = function(cr, right, top, size) + -- 1.2x the slot: the first row starts lower than the big text ends. + draw_compass(cr, right, top, size * 1.2, colors, c.wind_deg) + end, }) - draw_compass(cr, inner.x, y, inner.w, inner.y + inner.h - y, colors, c.wind_deg, S) end return M -- cgit v1.2.3