german/houseplan-card
1
0
Fork 0
mirror of https://github.com/Matysh/houseplan-card synced 2026-07-31 16:38:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

The puck is the base badge, round and 20% smaller

Browse Source 
Owner's wording: «иконка похожа на иконку базы, только круглая и чуть
меньше» — same plate colors and shadow as a regular device badge
(var(--hp-bg)/--hp-line/--hp-txt), circle, 0.8 of the device size. The
smoke now compares the puck against a NEUTRAL badge computed-style for
plate parity — the robot's own base is yellow while cleaning and would
never match.
This commit is contained in:
Matysh
2026-07-31 09:43:56 +03:00
parent 0142d37bec
commit f5c56d2f8e
5 changed files with 49 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
custom_components/houseplan/frontend/houseplan-card.js
+10 -5
View File
@@ -1239,12 +1239,17 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
/* live vacuum: a round puck, no badge plate, soft pulse (docs/VACUUM.md) */
.vacpuck {
position: absolute;
width: var(--dev-size);
height: var(--dev-size);
/* the base badge, but round and 20% smaller — the owner's wording:
«иконка похожа на иконку базы, только круглая и чуть меньше» */
--puck-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.8);
width: var(--puck-size);
height: var(--puck-size);
border-radius: 50%;
transform: translate(-50%, -50%);
background: color-mix(in srgb, var(--hp-accent) 20%, transparent);
border: 1.5px solid var(--hp-accent);
background: var(--hp-bg);
border: 1px solid var(--hp-line);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
color: var(--hp-txt);
display: flex;
align-items: center;
justify-content: center;
@@ -1257,7 +1262,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
}
.vacpuck.jump { transition: none; }
.vacpuck.stale { opacity: 0.45; animation: none; }
.vacpuck ha-icon { --mdc-icon-size: calc(var(--dev-size) * 0.6); color: var(--hp-accent); }
.vacpuck ha-icon { --mdc-icon-size: calc(var(--puck-size) * 0.68); color: var(--hp-txt); }
.vacwedge {
position: absolute;
inset: 0;
demo/smoke_vacuum.mjs
+9
View File
@@ -32,6 +32,14 @@ const out = await page.evaluate(async () => {
let puck = sr().querySelector('.vacpuck');
o.puckAppears = !!puck;
o.puckRound = puck && getComputedStyle(puck).borderRadius === '50%';
// owner 2026-07-31: the base badge, but round and 20% smaller — same plate
// vs a NEUTRAL badge: the robot's own base is yellow while cleaning
const devEl = sr().querySelector('.dev:not(.on)');
const pcs = getComputedStyle(puck), dcs = getComputedStyle(devEl);
o.puckPlateMatchesDev = pcs.backgroundColor === dcs.backgroundColor
&& pcs.borderTopColor === dcs.borderTopColor;
o.puck80pct = Math.abs(puck.getBoundingClientRect().width
- devEl.getBoundingClientRect().width * 0.8) < 2;
o.puckHasWedge = !!sr().querySelector('.vacwedge');
o.baseStaysDuringCleaning = !!sr().querySelector('.dev');
@@ -116,6 +124,7 @@ const out = await page.evaluate(async () => {
checkAll(out, {
dockedNoPuck: true, baseMarkerThere: true, puckAppears: true, puckRound: true,
puckPlateMatchesDev: true, puck80pct: true,
puckHasWedge: true, baseStaysDuringCleaning: true, trailDrawn: true,
trailScaledByMatrix: true, wedgeRotated: true, trailToggleOff: true,
puckGoneWhenDocked: true, trailLingers: true, hiddenNoPuck: true,
demo/srv/assets/houseplan-card.js
+10 -5
View File
@@ -1239,12 +1239,17 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
/* live vacuum: a round puck, no badge plate, soft pulse (docs/VACUUM.md) */
.vacpuck {
position: absolute;
width: var(--dev-size);
height: var(--dev-size);
/* the base badge, but round and 20% smaller — the owner's wording:
«иконка похожа на иконку базы, только круглая и чуть меньше» */
--puck-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.8);
width: var(--puck-size);
height: var(--puck-size);
border-radius: 50%;
transform: translate(-50%, -50%);
background: color-mix(in srgb, var(--hp-accent) 20%, transparent);
border: 1.5px solid var(--hp-accent);
background: var(--hp-bg);
border: 1px solid var(--hp-line);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
color: var(--hp-txt);
display: flex;
align-items: center;
justify-content: center;
@@ -1257,7 +1262,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
}
.vacpuck.jump { transition: none; }
.vacpuck.stale { opacity: 0.45; animation: none; }
.vacpuck ha-icon { --mdc-icon-size: calc(var(--dev-size) * 0.6); color: var(--hp-accent); }
.vacpuck ha-icon { --mdc-icon-size: calc(var(--puck-size) * 0.68); color: var(--hp-txt); }
.vacwedge {
position: absolute;
inset: 0;
dist/houseplan-card.js
Vendored
+10 -5
View File
@@ -1239,12 +1239,17 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
/* live vacuum: a round puck, no badge plate, soft pulse (docs/VACUUM.md) */
.vacpuck {
position: absolute;
width: var(--dev-size);
height: var(--dev-size);
/* the base badge, but round and 20% smaller — the owner's wording:
«иконка похожа на иконку базы, только круглая и чуть меньше» */
--puck-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.8);
width: var(--puck-size);
height: var(--puck-size);
border-radius: 50%;
transform: translate(-50%, -50%);
background: color-mix(in srgb, var(--hp-accent) 20%, transparent);
border: 1.5px solid var(--hp-accent);
background: var(--hp-bg);
border: 1px solid var(--hp-line);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
color: var(--hp-txt);
display: flex;
align-items: center;
justify-content: center;
@@ -1257,7 +1262,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
}
.vacpuck.jump { transition: none; }
.vacpuck.stale { opacity: 0.45; animation: none; }
.vacpuck ha-icon { --mdc-icon-size: calc(var(--dev-size) * 0.6); color: var(--hp-accent); }
.vacpuck ha-icon { --mdc-icon-size: calc(var(--puck-size) * 0.68); color: var(--hp-txt); }
.vacwedge {
position: absolute;
inset: 0;
src/styles.ts
+10 -5
View File
@@ -1236,12 +1236,17 @@ export const cardStyles = css`
/* live vacuum: a round puck, no badge plate, soft pulse (docs/VACUUM.md) */
.vacpuck {
position: absolute;
width: var(--dev-size);
height: var(--dev-size);
/* the base badge, but round and 20% smaller — the owner's wording:
«иконка похожа на иконку базы, только круглая и чуть меньше» */
--puck-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.8);
width: var(--puck-size);
height: var(--puck-size);
border-radius: 50%;
transform: translate(-50%, -50%);
background: color-mix(in srgb, var(--hp-accent) 20%, transparent);
border: 1.5px solid var(--hp-accent);
background: var(--hp-bg);
border: 1px solid var(--hp-line);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
color: var(--hp-txt);
display: flex;
align-items: center;
justify-content: center;
@@ -1254,7 +1259,7 @@ export const cardStyles = css`
}
.vacpuck.jump { transition: none; }
.vacpuck.stale { opacity: 0.45; animation: none; }
.vacpuck ha-icon { --mdc-icon-size: calc(var(--dev-size) * 0.6); color: var(--hp-accent); }
.vacpuck ha-icon { --mdc-icon-size: calc(var(--puck-size) * 0.68); color: var(--hp-txt); }
.vacwedge {
position: absolute;
inset: 0;