Mercurial > code > home > repos > front-door-display

changeset 17:472003015880

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
restyle using css grid
author drewp@bigasterisk.com
date Fri, 07 Jun 2024 21:22:37 -0700
parents 719c8cc4d8b2
children 499996b8224a
files src/FdClock.ts src/FdCountdown.ts src/FdElectricity.ts src/UpcomingEvents.ts src/WeekGuide.ts src/index.html src/main.css src/shared.ts
diffstat 8 files changed, 117 insertions(+), 137 deletions(-) [+]
line wrap: on
line diff
--- a/src/FdClock.ts	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/FdClock.ts	Fri Jun 07 21:22:37 2024 -0700
@@ -13,9 +13,6 @@
   static styles = [
     shared,
     css`
-      :host {
-        display: inline block;
-      }
     `,
   ];
   render() {
--- a/src/FdCountdown.ts	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/FdCountdown.ts	Fri Jun 07 21:22:37 2024 -0700
@@ -16,12 +16,6 @@
       ol {
         list-style: none;
         font-size: 16px;
-        background: #cd66bb2e;
-        padding: 9px;
-        width: fit-content;
-        position: relative;
-        top: -21px;
-        border-radius: 14px;
       }
       span.d {
         opacity: 0.5;
@@ -75,7 +69,7 @@
     });
   }
   render() {
-    return html`<h1 data-text="Coming Soon">Coming Soon</h1>
+    return html`<h1>Coming Soon</h1>
       <ol>
         ${this.evs.map((d) => html`<li>In ${d.inHowLong()}, ${d.title}</li>`)}
       </ol> `;
--- a/src/FdElectricity.ts	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/FdElectricity.ts	Fri Jun 07 21:22:37 2024 -0700
@@ -2,12 +2,11 @@
 import { customElement, property } from "lit/decorators.js";
 import { shared } from "./shared";
 
-
 @customElement("fd-electricity")
 export class FdElectricity extends LitElement {
-    static styles = [
-        shared,
-        css`
+  static styles = [
+    shared,
+    css`
       :host {
         font-size: 14px;
       }
@@ -15,6 +14,10 @@
       :host > table {
         margin-top: 10px;
       }
+      th,
+      td {
+        padding: 0 0;
+      }
       th {
         text-align: left;
       }
@@ -34,37 +37,37 @@
         background: pink;
       }
     `,
+  ];
+  @property() seriesData: Map<string, number> = new Map();
+  constructor() {
+    super();
+    this.load();
+    setInterval(this.load.bind(this), 10 * 1000);
+  }
+  async load() {
+    this.seriesData = new Map();
+    const base = "https://bigasterisk.com/m/vmselect/select/0/prometheus/api/v1/query";
+    const now = Date.now() / 1000 - 10;
+    const seriesUrls = [
+      { url: base + `?query=powermeter_w&time=${now}&step=725ms`, label: "powermeter" },
+      { url: base + `?query=(sum%20by%20%20(s)%20(house_power_w))%20-%20(sum%20by(s)%20(powermeter_w))&time=${now}&step=725ms`, label: "unmetered" },
+      { url: base + `?query=house_power_w&time=${now}&step=725ms`, label: "total" },
     ];
-    @property() seriesData: Map<string, number> = new Map();
-    constructor() {
-        super();
-        this.load();
-        setInterval(this.load.bind(this), 10 * 1000);
+
+    for (const series of seriesUrls) {
+      const response = await fetch(series.url);
+      const data = await response.json();
+      for (let row of data.data.result) {
+        this.seriesData.set(series.label + (row.metric.sensor ? "-" + row.metric.sensor : ""), parseFloat(row.value[1]));
+      }
     }
-    async load() {
-        this.seriesData = new Map();
-        const base = "https://bigasterisk.com/m/vmselect/select/0/prometheus/api/v1/query";
-        const now = Date.now() / 1000 - 10;
-        const seriesUrls = [
-            { url: base + `?query=powermeter_w&time=${now}&step=725ms`, label: "powermeter" },
-            { url: base + `?query=(sum%20by%20%20(s)%20(house_power_w))%20-%20(sum%20by(s)%20(powermeter_w))&time=${now}&step=725ms`, label: "unmetered" },
-            { url: base + `?query=house_power_w&time=${now}&step=725ms`, label: "total" },
-        ];
-
-        for (const series of seriesUrls) {
-            const response = await fetch(series.url);
-            const data = await response.json();
-            for (let row of data.data.result) {
-                this.seriesData.set(series.label + (row.metric.sensor ? "-" + row.metric.sensor : ""), parseFloat(row.value[1]));
-            }
-        }
-        this.update(new Map() as PropertyValues);
-    }
-    render() {
-        const disp = (n: number | undefined) => (n ? `${n.toFixed(1)}` : "");
-        const pxPerWatt = 150 / this.seriesData.get("total")!;
-        const bar = (n: number | undefined) => (n ? html`<div style="width: ${(n * pxPerWatt).toFixed(1)}px"></div>` : "");
-        return html`<h1 data-text="Electricity">Electricity</h1>
+    this.update(new Map() as PropertyValues);
+  }
+  render() {
+    const disp = (n: number | undefined) => (n ? `${n.toFixed(1)}` : "");
+    const pxPerWatt = 150 / this.seriesData.get("total")!;
+    const bar = (n: number | undefined) => (n ? html`<div style="width: ${(n * pxPerWatt).toFixed(1)}px"></div>` : "");
+    return html`<h1 data-text="Electricity">Electricity</h1>
       <table>
         <tr>
           <th>(unmetered)</th>
@@ -107,5 +110,5 @@
           <td class="bar">${bar(this.seriesData.get("total"))}</td>
         </tr>
       </table> `;
-    }
+  }
 }
--- a/src/UpcomingEvents.ts	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/UpcomingEvents.ts	Fri Jun 07 21:22:37 2024 -0700
@@ -13,19 +13,6 @@
   static styles = [
     shared,
     css`
-      ol {
-        list-style-type: circle;
-        font-size: 16px;
-        background: #cd66bb2e;
-        padding: 9px;
-        width: fit-content;
-        position: relative;
-        top: -21px;
-        border-radius: 14px;
-      }
-      span.d {
-        opacity: 0.5;
-      }
     `,
   ];
   @property() evs: DisplayEvent[];
@@ -53,7 +40,7 @@
 
   render() {
     return html`
-      <h1 data-text="Calendar">Calendar</h1>
+      <h1>Calendar</h1>
       <ol>
         ${this.evs.map((d) => html`<li><span class="date">${d.shortDate()}</span> ${d.title}</li>`)}
       </ol>
--- a/src/WeekGuide.ts	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/WeekGuide.ts	Fri Jun 07 21:22:37 2024 -0700
@@ -12,20 +12,16 @@
   static styles = [
     shared,
     css`
-      :host,
-      :host > div {
-        display: inline-block;
-      }
-      .wday > span {
+      span {
         display: inline-block;
         background: #282a36;
-        padding: 5px;
-        border: 3px outset #333;
+        padding: 2px;
+        border: 2px outset #333;
         text-align: center;
         vertical-align: middle;
         border-radius: 10px;
       }
-      .wday > span.today {
+      span.today {
         background: #282a36;
         border-color: #ff79c6;
         color: #ff79c6;
@@ -37,17 +33,13 @@
     const day = format(new Date(), "EEE").toLowerCase();
 
     return html`
-      <div class="wday">
-        <span class="wday-sun ${day == "sun" ? "today" : ""}">Sunday</span>
-        <span class="wday-mon ${day == "mon" ? "today" : ""}">Monday</span>
-        <span class="wday-tue ${day == "tue" ? "today" : ""}">Tuesday</span>
-        <span class="wday-wed ${day == "wed" ? "today" : ""}">Wednesday</span>
-        <span class="wday-thu ${day == "thu" ? "today" : ""}">Thursday</span>
-        <span class="wday-fri ${day == "fri" ? "today" : ""}">Friday</span>
-        <span class="wday-sat ${day == "sat" ? "today" : ""}">Saturday</span>
-      </div>
+      <span class="wday-sun ${day == "sun" ? "today" : ""}">Sunday</span>
+      <span class="wday-mon ${day == "mon" ? "today" : ""}">Monday</span>
+      <span class="wday-tue ${day == "tue" ? "today" : ""}">Tuesday</span>
+      <span class="wday-wed ${day == "wed" ? "today" : ""}">Wednesday</span>
+      <span class="wday-thu ${day == "thu" ? "today" : ""}">Thursday</span>
+      <span class="wday-fri ${day == "fri" ? "today" : ""}">Friday</span>
+      <span class="wday-sat ${day == "sat" ? "today" : ""}">Saturday</span>
     `;
   }
 }
-
-
--- a/src/index.html	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/index.html	Fri Jun 07 21:22:37 2024 -0700
@@ -1,23 +1,29 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <title>front-door-display</title>
-    <meta http-equiv="refresh" content="3600" />
-    <!--auth timeout workaround-->
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" type="text/css" media="screen" href="./main.css" />
-    <script type="module" src="./main.ts"></script>
-  </head>
-  <body>
-    <div><fd-week-guide></fd-week-guide><fd-clock></fd-clock></div>
+
+<head>
+  <meta charset="utf-8" />
+  <title>front-door-display</title>
+  <meta http-equiv="refresh" content="3600" />
+  <!--auth timeout workaround-->
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" type="text/css" media="screen" href="./main.css" />
+  <script type="module" src="./main.ts"></script>
+  <script type="module" src="https://bigasterisk.com/lib/bigast/v2/loginBar.js"></script>
+</head>
+
+<body>
+  <div id="grid">
+    <fd-week-guide></fd-week-guide>
+    <fd-clock></fd-clock>
     <fd-upcoming-events></fd-upcoming-events>
     <fd-countdown></fd-countdown>
     <fd-electricity></fd-electricity>
-    <script type="module" src="https://bigasterisk.com/lib/bigast/v2/loginBar.js"></script>
-    <bigast-loginbar></bigast-loginbar>
-    <script>
-      // try doing a fetch test to see if reload is likely to work, and only then do a reload
-    </script>
-  </body>
-</html>
+  </div>
+  <bigast-loginbar></bigast-loginbar>
+  <script>
+    // try doing a fetch test to see if reload is likely to work, and only then do a reload
+  </script>
+</body>
+
+</html>
\ No newline at end of file
--- a/src/main.css	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/main.css	Fri Jun 07 21:22:37 2024 -0700
@@ -1,41 +1,50 @@
 @import url("https://fonts.googleapis.com/css2?family=Acme&family=Oswald&display=swap");
+
 html,
-body {
+#grid {
   width: 800px;
   height: 480px;
   overflow: hidden;
 }
+
 html {
   background: gray;
 }
+
 body {
   background: black;
   color: #f8f8f2;
   margin: 0;
   font-size: 25px;
   font-family: "Oswald", sans-serif;
-  display: flex;
-  flex-direction: column;
+}
+
+#grid {
+  display: grid;
+  grid-template-rows: 54px 206px 1fr;
+  grid-template-columns: 1.7fr 1fr 80px;
 }
-body > * {
-  /*outline: 1px orange solid;*/
+
+.debug #grid>* {
+  outline: 1px rgb(68, 68, 68) solid;
+}
+
+fd-week-guide {
+  grid-area: 1/1/1/3;
 }
-iframe {
-  background: #8bbe9c;
-  display: inline-block;
-  position: fixed;
-  top: 3em;
-  left: 12em;
-  width: 480px;
-  height: 380px;
+
+fd-clock {
+  grid-area: 1/3/1/3;
 }
+
+fd-upcoming-events {
+  grid-area: 2/1/3/1;
+}
+
 fd-countdown {
-  position: absolute;
-  left: 405px;
-  top: 52px;
+  grid-area: 2/2/2/4
 }
+
 fd-electricity {
-  position: absolute;
-  left: 402px;
-  top: 250px;
-}
+  grid-area: 3/2/3/4;
+}
\ No newline at end of file
--- a/src/shared.ts	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/shared.ts	Fri Jun 07 21:22:37 2024 -0700
@@ -1,34 +1,26 @@
 import { css } from "lit";
 
 export const shared = css`
-  @import url("https://fonts.googleapis.com/css2?family=Acme&family=Oswald&display=swap");
+  :host {
+    display: inline-block;
+  }
 
   h1 {
-    margin: -11px 6px;
+    margin: -4px 0 -16px 0;
     font-family: "Acme", sans-serif !important;
-  }
-  h1 {
-    order: 2;
-    color: #fde9ff;
-    text-shadow: 3px 1px 1px #4af7ff, 2px 2px 1px #165bfb, 4px 2px 1px #4af7ff, 3px 3px 1px #165bfb, 5px 3px 1px #4af7ff, 4px 4px 1px #165bfb,
-      6px 4px 1px #4af7ff, 5px 5px 1px #165bfb, 7px 5px 1px #4af7ff, 6px 6px 1px #165bfb, 8px 6px 1px #4af7ff, 7px 7px 1px #165bfb, 9px 7px 1px #4af7ff;
-  }
-  h1 {
-    display: block;
-    position: relative;
+    font-size:30px;
+    color: #00fbff;
+    text-shadow: 1px 3px 1px #726262;
   }
-  h1:before {
-    content: attr(data-text);
-    position: absolute;
-    text-shadow: 2px 2px 1px #e94aa1, -1px -1px 1px #c736f9, -2px 2px 1px #e94aa1, 1px -1px 1px #f736f9;
-    z-index: 1;
+  ol {
+    list-style: none;
+    font-size: 16px;
+    padding-inline-start: 5px;
   }
-  h1:nth-child(1) {
-    padding-right: 2.25rem;
+  span.d {
+    opacity: 0.5;
   }
-  h1:nth-child(2) {
-    padding-left: 2.25rem;
-  }
+
   span.t {
     color: #50fa7b;
   }