@homebridge-plugins/homebridge-printer 0.0.0-stage → 1.0.1-beta.0

package/lib/homebridge-ui/public/dashboard.js

@@ -0,0 +1,421 @@
+/* Printer dashboard – served by the plugin at http://<homebridge>:8587/ */
+;(function (global) {
+  'use strict'
+
+  const REASONS = {
+    'media-empty': 'Out of paper',
+    'media-needed': 'Load paper',
+    'media-jam': 'Paper jam',
+    'door-open': 'A door is open',
+    'cover-open': 'Cover is open',
+    'input-tray-missing': 'Paper tray missing',
+    'output-tray-missing': 'Output tray missing',
+    'marker-supply-empty': 'Cartridge empty',
+    'marker-supply-low': 'Ink low',
+    'toner-empty': 'Toner empty',
+    'toner-low': 'Toner low',
+    'paused': 'Paused',
+    'offline': 'Printer reports offline',
+    'other': 'Needs attention',
+  }
+
+  function el(tag, cls, text) {
+    const n = document.createElement(tag)
+    if (cls) {
+      n.className = cls
+    }
+    if (text !== undefined && text !== null) {
+      n.textContent = text
+    }
+    return n
+  }
+
+  function reasonText(r) {
+    const base = String(r).replace(/-(?:error|warning|report)$/, '')
+    return (
+      REASONS[base]
+      || base.replace(/-/g, ' ').replace(/^\w/, (c) => {
+        return c.toUpperCase()
+      })
+    )
+  }
+
+  function fmtTime(iso) {
+    if (!iso) {
+      return '—'
+    }
+    const d = new Date(iso)
+    return `${d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })} ${d.toLocaleDateString([], {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })}`
+  }
+
+  // Normalise HP's pure RGB marker colours into friendlier ink tones (like HP Smart does)
+  const INK = {
+    '#00FFFF': '#2d9fd8',
+    '#FF00FF': '#d6337e',
+    '#FFFF00': '#f7cf3b',
+    '#000000': '#1d1d22',
+  }
+  function inkColour(c) {
+    return INK[c] || c
+  }
+
+  function isLow(m, threshold) {
+    if (m.level === null || m.level === undefined) {
+      return false
+    }
+    const t = m.low !== null && m.low > 0
+      ? Math.max(m.low, threshold)
+      : threshold
+    return m.level <= t
+  }
+
+  function renderInk(markers, threshold) {
+    const wrap = el('div', 'hp-inks')
+    markers.forEach((m) => {
+      const colours = (m.colors && m.colors.length
+        ? m.colors
+        : ['#8a8a96']).map(inkColour)
+      const low = isLow(m, threshold)
+      const unknown = m.level === null || m.level === undefined
+      const col = el('div', 'hp-ink')
+      col.title = `${m.name}: ${unknown
+        ? (m.someRemaining ? 'some ink remaining' : 'level unknown')
+        : `${m.level}%`}`
+
+      const tube = el('div', `hp-tube${low ? ' is-low' : ''}${unknown ? ' is-unknown' : ''}`)
+      tube.setAttribute('role', 'meter')
+      tube.setAttribute('aria-label', m.name)
+      tube.setAttribute('aria-valuemin', '0')
+      tube.setAttribute('aria-valuemax', '100')
+      if (!unknown) {
+        tube.setAttribute('aria-valuenow', String(m.level))
+      }
+
+      const level = unknown
+        ? (m.someRemaining ? 50 : 0)
+        : m.level
+      colours.forEach((c) => {
+        const stripe = el('div', 'hp-stripe')
+        const fill = el('div', 'hp-fill')
+        fill.style.setProperty('--ink', c)
+        fill.style.height = `${level}%`
+        stripe.appendChild(fill)
+        tube.appendChild(stripe)
+      })
+      col.appendChild(tube)
+
+      const dots = el('div', `hp-dots hp-dots-${Math.min(colours.length, 3)}`)
+      colours.slice(0, 3).forEach((c) => {
+        const d = el('span', 'hp-dot')
+        d.style.background = c
+        dots.appendChild(d)
+      })
+      col.appendChild(dots)
+      col.appendChild(el('div', `hp-pct${low ? ' is-low' : ''}`, unknown
+        ? '?'
+        : `${m.level}%`))
+      wrap.appendChild(col)
+    })
+    return wrap
+  }
+
+  const PRINTER_SVG
+    = '<svg viewBox="0 0 520 300" class="hp-printer-svg" aria-hidden="true">'
+      + '<defs>'
+      + '<linearGradient id="hpBody" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="var(--body-hi)"/><stop offset="1" stop-color="var(--body-lo)"/></linearGradient>'
+      + '<linearGradient id="hpLid" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="var(--body-hi)"/><stop offset="1" stop-color="var(--body-mid)"/></linearGradient>'
+      + '<clipPath id="hpSlot"><rect x="150" y="196" width="230" height="120"/></clipPath>'
+      + '</defs>'
+      + '<ellipse cx="262" cy="282" rx="230" ry="12" fill="var(--shadow)"/>'
+    // paper sticking out of the top feeder
+      + '<rect x="170" y="38" width="190" height="22" rx="2" fill="var(--paper)" stroke="var(--line)"/>'
+    // main body
+      + '<path d="M42 92 Q42 74 60 72 L470 72 Q488 74 488 92 L494 250 Q494 268 476 268 L54 268 Q36 268 36 250 Z" fill="url(#hpBody)" stroke="var(--line)"/>'
+    // accent band on the left edge (blue-grey like the DeskJet in the reference)
+      + '<path d="M42 92 Q42 74 60 72 L120 72 L110 128 L40 128 Z" fill="var(--accent-band)"/>'
+      + '<path d="M470 72 Q488 74 488 92 L490 128 L430 128 L420 72 Z" fill="var(--accent-band)"/>'
+    // scanner lid
+      + '<path d="M100 56 Q100 46 112 46 L420 46 Q432 46 432 56 L436 122 Q436 130 426 130 L106 130 Q96 130 96 122 Z" fill="url(#hpLid)" stroke="var(--line)"/>'
+      + '<ellipse cx="300" cy="74" rx="22" ry="5" fill="var(--logo)"/>'
+    // control panel
+      + '<rect x="56" y="96" width="34" height="58" rx="5" fill="var(--panel)" transform="skewX(-6)"/>'
+      + '<circle cx="64" cy="108" r="3" class="hp-led"/>'
+      + '<rect x="62" y="118" width="14" height="10" rx="1.5" fill="var(--panel-screen)"/>'
+    // label plate
+      + '<rect x="58" y="176" width="66" height="14" rx="3" fill="var(--plate)" stroke="var(--line)"/>'
+    // output opening
+      + '<path d="M152 150 L378 150 Q390 150 390 162 L390 238 L140 238 L140 162 Q140 150 152 150 Z" fill="var(--opening)" stroke="var(--line)"/>'
+      + '<rect x="152" y="190" width="226" height="14" rx="3" fill="var(--slot)"/>'
+      + '<rect x="248" y="146" width="34" height="8" rx="2" fill="var(--body-mid)" stroke="var(--line)"/>'
+      + '<g fill="var(--rollers)"><rect x="170" y="194" width="30" height="6" rx="1"/><rect x="222" y="194" width="30" height="6" rx="1"/><rect x="278" y="194" width="30" height="6" rx="1"/><rect x="330" y="194" width="30" height="6" rx="1"/></g>'
+    // paper coming out (animated while printing)
+      + '<g clip-path="url(#hpSlot)"><g class="hp-sheet"><rect x="176" y="190" width="178" height="70" fill="var(--paper)" stroke="var(--line)"/>'
+      + '<g stroke="var(--ink-lines)" stroke-width="3" stroke-linecap="round"><line x1="192" y1="206" x2="300" y2="206"/><line x1="192" y1="218" x2="330" y2="218"/><line x1="192" y1="230" x2="280" y2="230"/></g></g></g>'
+    // output tray
+      + '<path d="M126 238 L404 238 L412 258 L118 258 Z" fill="var(--tray)" stroke="var(--line)"/>'
+      + '<rect x="230" y="242" width="70" height="5" rx="2.5" fill="var(--body-mid)"/>'
+      + '</svg>'
+
+  function statusInfo(p) {
+    if (!p.online || p.status === 'offline' || p.status === 'unknown') {
+      return {
+        cls: 'is-offline',
+        title: p.status === 'unknown'
+          ? 'Connecting…'
+          : 'Not connected.',
+        sub:
+          p.status === 'unknown'
+            ? 'Waiting for the first response from the printer'
+            : 'Check the printer is on and connected to the network',
+      }
+    }
+    const issues = (p.reasons || []).filter((r) => {
+      return /-(?:error|warning)$/.test(r) || r === 'media-empty' || r === 'media-jam' || r === 'door-open'
+    })
+    if (p.printing === true || (p.printing === undefined && p.status === 'processing')) {
+      return {
+        cls: 'is-printing',
+        title: 'Printing…',
+        sub: p.queuedJobs > 1
+          ? `${p.queuedJobs} jobs in the queue`
+          : 'Your document is on its way',
+      }
+    }
+    if (
+      p.status === 'stopped'
+      || issues.some((r) => {
+        return r.endsWith('-error')
+      })
+    ) {
+      return {
+        cls: 'is-error',
+        title: issues.length
+          ? reasonText(issues[0])
+          : 'Printer stopped',
+        sub: p.message || 'Check the printer',
+      }
+    }
+    if (issues.length) {
+      return {
+        cls: 'is-warn',
+        title: reasonText(issues[0]),
+        sub: issues.length > 1
+          ? `and ${issues.length - 1} more`
+          : 'Printer needs attention',
+      }
+    }
+    return { cls: 'is-ready', title: 'Ready', sub: 'Idle and waiting for jobs' }
+  }
+
+  const ICONS = {
+    'is-printing':
+      '<svg viewBox="0 0 24 24"><path d="M7 3h10v5H7z" fill="none" stroke="currentColor" stroke-width="1.7"/><rect x="3" y="8" width="18" height="9" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M7 14h10v7H7z" fill="none" stroke="currentColor" stroke-width="1.7"/></svg>',
+    'is-ready':
+      '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M8 12.5l2.6 2.6L16 9.7" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    'is-offline':
+      '<svg viewBox="0 0 24 24"><rect x="3" y="8" width="13" height="9" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M6 3h7v5H6zM6 14h7v6H6z" fill="none" stroke="currentColor" stroke-width="1.7"/><circle cx="18" cy="17" r="4.5" fill="currentColor"/><path d="M16.8 15.8a1.3 1.3 0 1 1 1.8 1.2c-.4.2-.6.5-.6.9M18 19.6v.1" fill="none" stroke="var(--pill-bg)" stroke-width="1.2" stroke-linecap="round"/></svg>',
+    'is-warn':
+      '<svg viewBox="0 0 24 24"><path d="M12 3l10 18H2z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M12 10v5M12 17.6v.1" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>',
+    'is-error':
+      '<svg viewBox="0 0 24 24"><path d="M12 3l10 18H2z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M12 10v5M12 17.6v.1" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>',
+  }
+
+  function renderPrinter(p, threshold) {
+    const s = statusInfo(p)
+    const sec = el('section', `hp-card ${s.cls}`)
+
+    const left = el('div', 'hp-left')
+    left.appendChild(el('h1', 'hp-name', p.name))
+    if (p.model) {
+      left.appendChild(el('div', 'hp-model', p.model.replace(/^HP\s+/i, '')))
+    }
+
+    if (p.markers && p.markers.length) {
+      const box = el('div', 'hp-supplies')
+      box.appendChild(renderInk(p.markers, p.lowThreshold ?? threshold))
+      box.appendChild(el('div', 'hp-meta', 'Estimated supply levels'))
+      box.appendChild(el('div', 'hp-meta', `Last updated ${fmtTime(p.lastSeen || p.lastUpdated)}`))
+      const low = p.markers.filter((m) => {
+        return isLow(m, p.lowThreshold ?? threshold)
+      })
+      if (low.length) {
+        box.appendChild(
+          el(
+            'div',
+            'hp-warn',
+            `${
+              low.length === 1
+                ? `${low[0].name} is`
+                : `${low
+                  .map((m) => {
+                    return m.name
+                  })
+                  .join(' and ')} are`
+            } running low`,
+          ),
+        )
+      }
+      left.appendChild(box)
+    } else {
+      const empty = el('div', 'hp-supplies hp-supplies-empty')
+      empty.appendChild(
+        el(
+          'div',
+          'hp-meta',
+          p.online ? 'This printer did not report supply levels' : 'Supply levels appear once the printer is reachable',
+        ),
+      )
+      empty.appendChild(el('div', 'hp-meta', `Last updated ${fmtTime(p.lastUpdated)}`))
+      left.appendChild(empty)
+    }
+
+    if (p.energy) {
+      const e = p.energy
+      const kwh = e.kWh < 10
+        ? e.kWh.toFixed(2)
+        : e.kWh.toFixed(1)
+      const energy = el('div', 'hp-energy')
+      energy.title = 'Worked out from the printer\'s state (printing, ready, sleep, off) and the wattages in Settings'
+      energy.appendChild(el('strong', null, `≈ ${Math.round(e.watts * 10) / 10} W`))
+      energy.appendChild(
+        el(
+          'span',
+          null,
+          ` now · ${kwh} kWh since ${new Date(e.since).toLocaleDateString([], { day: 'numeric', month: 'short' })}`,
+        ),
+      )
+      left.appendChild(energy)
+    }
+
+    const pill = el('div', 'hp-pill')
+    pill.setAttribute('role', 'status')
+    const icon = el('span', 'hp-pill-icon')
+    icon.innerHTML = ICONS[s.cls]
+    const txt = el('span', 'hp-pill-text')
+    txt.appendChild(el('strong', null, s.title))
+    txt.appendChild(el('span', null, ` ${s.sub}`))
+    pill.appendChild(icon)
+    pill.appendChild(txt)
+    left.appendChild(pill)
+
+    const right = el('div', 'hp-right')
+    right.innerHTML = PRINTER_SVG
+
+    sec.appendChild(left)
+    sec.appendChild(right)
+    return sec
+  }
+
+  function render(root, data) {
+    const printers = (data && data.printers) || []
+    root.innerHTML = ''
+    if (!printers.length) {
+      const e = el('section', 'hp-card hp-empty')
+      e.appendChild(el('h1', 'hp-name', 'No printers yet'))
+      e.appendChild(el('div', 'hp-meta', 'Add a printer in the plugin settings and restart Homebridge.'))
+      root.appendChild(e)
+      return
+    }
+    printers.forEach((p) => {
+      root.appendChild(renderPrinter(p, 10))
+    })
+  }
+
+  /**
+   * source: { load(): Promise<status>, subscribe?(cb): void }
+   */
+  function mount(root, source) {
+    root.classList.add('hp-dashboard')
+    root.innerHTML = '<div class="hp-loading">Loading printers…</div>'
+    let lastSig = null
+    const draw = function (d) {
+      // Only rebuild when something visible changed, so animations don't restart every poll
+      const sig = JSON.stringify(
+        ((d && d.printers) || []).map((p) => {
+          return [
+            p.name,
+            p.model,
+            p.online,
+            p.status,
+            p.printing,
+            p.energy && [
+              p.energy.watts,
+              p.energy.kWh.toFixed(2),
+            ],
+            p.reasons,
+            p.queuedJobs,
+            p.markers,
+            p.message,
+            fmtTime(p.lastSeen || p.lastUpdated),
+          ]
+        }),
+      )
+      if (sig === lastSig) {
+        return
+      }
+      lastSig = sig
+      render(root, d)
+    }
+    const fail = function (err) {
+      root.innerHTML = ''
+      const e = el('section', 'hp-card hp-empty')
+      e.appendChild(el('h1', 'hp-name', 'Dashboard unavailable'))
+      e.appendChild(el('div', 'hp-meta', (err && err.message) || String(err)))
+      root.appendChild(e)
+    }
+    source.load().then(draw, fail)
+    if (source.subscribe) {
+      source.subscribe(draw, fail)
+    }
+  }
+
+  /** Data source for the standalone page: Server-Sent Events, falling back to polling. */
+  function httpSource(base) {
+    base = base || ''
+    return {
+      load() {
+        return fetch(`${base}/api/status`, { cache: 'no-store' }).then((r) => {
+          if (!r.ok) {
+            throw new Error(`HTTP ${r.status}`)
+          }
+          return r.json()
+        })
+      },
+      subscribe(cb) {
+        const self = this
+        const poll = function () {
+          setInterval(() => {
+            self.load().then(cb, () => {})
+          }, 5000)
+        }
+        if (!global.EventSource) {
+          return poll()
+        }
+        const es = new EventSource(`${base}/api/events`)
+        let opened = false
+        es.onopen = function () {
+          opened = true
+        }
+        es.onmessage = function (e) {
+          try {
+            cb(JSON.parse(e.data))
+          } catch (_) {
+            /* ignore */
+          }
+        }
+        es.onerror = function () {
+          if (!opened) {
+            es.close()
+            poll()
+          }
+        }
+      },
+    }
+  }
+
+  global.HPDashboard = { mount, render, httpSource }
+})(window)

package/lib/homebridge-ui/public/index.html

@@ -0,0 +1,20 @@
+<link rel="stylesheet" href="dashboard.css">
+<link rel="stylesheet" href="settings.css">
+
+<div id="hp-ui">
+  <div id="hp-dash"></div>
+
+  <div class="hp-tools">
+    <div class="hp-tools-row">
+      <button type="button" class="btn btn-primary" id="hp-find">Find printers on my network</button>
+      <a id="hp-full" class="btn btn-outline-secondary" target="_blank" rel="noopener" style="display:none">Open full-screen dashboard</a>
+    </div>
+    <div id="hp-found"></div>
+    <div id="hp-tests"></div>
+  </div>
+
+  <p class="hp-hint text-muted small" id="hp-hint">Enter your printer's IP address or .local name below, click <strong>Save</strong>, then restart Homebridge.</p>
+</div>
+
+<script src="dashboard.js"></script>
+<script src="settings.js"></script>

package/lib/homebridge-ui/public/settings.css

@@ -0,0 +1,30 @@
+/* Printer page in the Homebridge UI – uses the Bootstrap 5 styles the Homebridge UI injects */
+#hp-ui { padding-bottom: 6px; }
+#hp-dash { margin-bottom: 14px; }
+#hp-dash .hp-card { padding: 22px 26px; }
+#hp-dash .hp-name { font-size: clamp(28px, 5vw, 44px); }
+#hp-dash .hp-model { font-size: clamp(15px, 2vw, 21px); margin-bottom: 16px; }
+#hp-dash .hp-printer-svg { max-width: 460px; }
+.hp-tools { margin-bottom: 8px; }
+.hp-tools-row { display: flex; flex-wrap: wrap; gap: 8px; }
+#hp-found { margin-top: 10px; }
+.hp-found-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 10px 12px; margin-bottom: 8px;
+  border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 8px;
+}
+#hp-tests { margin-top: 12px; }
+.hp-test-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 2px; flex-wrap: wrap; }
+.hp-test-label { overflow-wrap: anywhere; }
+.hp-test-result { font-size: 14px; min-height: 2px; padding-bottom: 6px; }
+.hp-test-result.is-good { color: var(--bs-success, #198754); }
+.hp-test-result.is-bad { color: var(--bs-danger, #dc3545); }
+.hp-test-result.is-busy { color: var(--bs-secondary-color, #6c757d); }
+.hp-hint { margin: 10px 0 0; }
+
+/* Readable in the Homebridge UI's dark mode, whatever theme is active */
+body.dark-mode #hp-ui { color: #e8e8ef; }
+body.dark-mode #hp-ui .text-muted { color: #a8a8b8 !important; }
+body.dark-mode #hp-ui .btn-outline-secondary { color: #d6d6e0; border-color: #8a8a9a; }
+body.dark-mode #hp-ui .btn-outline-secondary:hover { color: #111; background: #d6d6e0; }
+body.dark-mode .hp-found-row { border-color: #4a4a58; }