Compare commits
4
Commits
0eed35289c
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
 cacto
|
0b1c894190 | ||
|
cacto
|
5674917f95 | ||
|
cacto
|
da0f941d79 | ||
|
cacto
|
073577e8d9 |
@@ -43,10 +43,60 @@ func (s *Server) routes() {
|
||||
|
||||
s.mux.HandleFunc("GET /api/snapshot", s.handleSnapshot)
|
||||
s.mux.HandleFunc("GET /api/events", s.handleEvents)
|
||||
s.mux.HandleFunc("POST /api/devices", s.handleAddDevice)
|
||||
s.mux.HandleFunc("DELETE /api/devices/{slot}", s.handleRemoveDevice)
|
||||
s.mux.HandleFunc("POST /api/devices/{slot}/identity", s.handleSetIdentity)
|
||||
s.mux.HandleFunc("POST /api/devices/{slot}/telemetry", s.handlePublishTelemetry)
|
||||
}
|
||||
|
||||
// handleAddDevice creates a new standalone sensor (input) or actuator
|
||||
// (output) device — a separate MQTT device_id, not another sensor_type or
|
||||
// a manual override tacked onto an existing device. Mirrors how you'd
|
||||
// actually add a second physical device to the platform (a new Device row
|
||||
// with its own external_id).
|
||||
func (s *Server) handleAddDevice(w http.ResponseWriter, r *http.Request) {
|
||||
var req struct {
|
||||
Kind string `json:"kind"` // "sensor" | "actuator"
|
||||
SignalName string `json:"signal_name"`
|
||||
ExternalID string `json:"external_id"`
|
||||
ZoneID string `json:"zone_id"`
|
||||
Pin string `json:"pin"`
|
||||
Discrete bool `json:"discrete"`
|
||||
SupportsLevel bool `json:"supports_level"`
|
||||
}
|
||||
if err := json.NewDecoder(r.Body).Decode(&req); err != nil || req.ExternalID == "" || req.ZoneID == "" {
|
||||
http.Error(w, "external_id and zone_id are required", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
var slot string
|
||||
switch req.Kind {
|
||||
case "sensor":
|
||||
if req.SignalName == "" {
|
||||
http.Error(w, "signal_name is required for a sensor device", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
slot = s.store.AddSensorDevice(req.SignalName, req.ExternalID, req.ZoneID, req.Pin, req.Discrete)
|
||||
case "actuator":
|
||||
slot = s.store.AddActuatorDevice(req.ExternalID, req.ZoneID, req.Pin, req.SupportsLevel)
|
||||
default:
|
||||
http.Error(w, `kind must be "sensor" or "actuator"`, http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
writeJSON(w, http.StatusCreated, s.store.Snapshot())
|
||||
s.logger.Info("extra device added", "slot", slot, "kind", req.Kind, "device_id", req.ExternalID)
|
||||
}
|
||||
|
||||
func (s *Server) handleRemoveDevice(w http.ResponseWriter, r *http.Request) {
|
||||
slot := r.PathValue("slot")
|
||||
if !s.store.RemoveDevice(slot) {
|
||||
http.Error(w, "unknown or non-removable slot", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
writeJSON(w, http.StatusOK, s.store.Snapshot())
|
||||
}
|
||||
|
||||
func (s *Server) handleSnapshot(w http.ResponseWriter, r *http.Request) {
|
||||
writeJSON(w, http.StatusOK, s.store.Snapshot())
|
||||
}
|
||||
|
||||
@@ -16,6 +16,11 @@
|
||||
--accent-dim: #1f6b45;
|
||||
--warn: #e8b339;
|
||||
--pump: #3aa0e8;
|
||||
--wire-sensor: #33d17a;
|
||||
--wire-fan: #5b7ba8;
|
||||
--wire-light: #e8b339;
|
||||
--wire-pump: #3aa0e8;
|
||||
--wire-ext: #7a8ba8;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
@@ -26,7 +31,7 @@
|
||||
padding: 24px;
|
||||
}
|
||||
h1 { font-size: 1.3rem; font-weight: 600; margin: 0 0 4px; }
|
||||
.subtitle { color: var(--muted); margin: 0 0 24px; font-size: 0.9rem; }
|
||||
.subtitle { color: var(--muted); margin: 0 0 24px; font-size: 0.9rem; max-width: 680px; }
|
||||
.conn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
font-size: 0.8rem; color: var(--muted); margin-bottom: 20px;
|
||||
@@ -36,10 +41,19 @@
|
||||
.conn.offline .dot { background: #d95555; }
|
||||
|
||||
.board-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
|
||||
.board { width: 100%; max-width: 520px; }
|
||||
.board rect.case { fill: var(--panel); stroke: var(--border); stroke-width: 2; }
|
||||
.board { width: 100%; max-width: 720px; }
|
||||
.pin { fill: #cbd5e1; }
|
||||
.pin-label { font-size: 10px; fill: var(--muted); }
|
||||
.wire { fill: none; stroke-width: 2; opacity: 0.85; }
|
||||
.peripheral-label { font-size: 12px; fill: var(--text); font-weight: 600; text-anchor: middle; }
|
||||
.peripheral-sub { font-size: 9px; fill: var(--muted); text-anchor: middle; }
|
||||
|
||||
.fan-blades { transform-origin: center; transition: opacity .2s; }
|
||||
/* The blade ellipses are laid out so their geometric centroid is the
|
||||
group's local (0,0) — but CSS "transform-origin: center" for SVG uses
|
||||
the bounding box center, which isn't the same point (the ellipses'
|
||||
144x28-ish extents aren't symmetric around 0,0), so it wobbled around
|
||||
an off-center point instead of spinning cleanly. Pin it to 0 0. */
|
||||
.fan-blades { transform-origin: 0px 0px; transition: opacity .2s; }
|
||||
.fan-blades.on { animation: spin 0.9s linear infinite; }
|
||||
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||||
|
||||
@@ -53,9 +67,9 @@
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 1080px;
|
||||
max-width: 1160px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.card {
|
||||
@@ -63,16 +77,21 @@
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
transition: box-shadow .3s, border-color .3s;
|
||||
}
|
||||
.card.flash { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(51,209,122,0.25); }
|
||||
.card.add-device-card { border-style: dashed; }
|
||||
.card h2 {
|
||||
font-size: 0.95rem; margin: 0 0 12px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
||||
}
|
||||
.card h2 .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.badge {
|
||||
font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
|
||||
background: var(--panel-2); color: var(--muted); font-weight: 500;
|
||||
background: var(--panel-2); color: var(--muted); font-weight: 500; flex-shrink: 0;
|
||||
}
|
||||
.badge.on { background: var(--accent-dim); color: var(--accent); }
|
||||
.badge.extra { background: #2a2440; color: #b39ddb; }
|
||||
|
||||
label { display: block; font-size: 0.78rem; color: var(--muted); margin: 10px 0 4px; }
|
||||
input[type=text], input[type=number] {
|
||||
@@ -81,7 +100,7 @@
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
input[type=range] { width: 100%; }
|
||||
.row { display: flex; gap: 10px; }
|
||||
.row { display: flex; gap: 10px; align-items: flex-end; }
|
||||
.row > div { flex: 1; }
|
||||
|
||||
button {
|
||||
@@ -90,34 +109,108 @@
|
||||
font-weight: 600; font-size: 0.85rem; cursor: pointer;
|
||||
}
|
||||
button.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
|
||||
button.danger { background: transparent; color: #e08a8a; border: 1px solid #4a2c2c; }
|
||||
button:active { transform: translateY(1px); }
|
||||
|
||||
.status-line { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 8px; }
|
||||
.status-line span:last-child { color: var(--text); font-weight: 600; }
|
||||
.value { color: var(--text); font-weight: 600; }
|
||||
.hint { color: var(--muted); font-size: 0.78rem; margin-top: 10px; }
|
||||
|
||||
.signal-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 8px; padding: 6px 0; font-size: 0.85rem;
|
||||
}
|
||||
.signal-row .name { color: var(--muted); }
|
||||
.signal-row input[type=range] { flex: 1; }
|
||||
.signal-row .val { width: 44px; text-align: right; font-weight: 600; }
|
||||
.toggle {
|
||||
width: 40px; height: 22px; border-radius: 999px; background: var(--panel-2);
|
||||
border: 1px solid var(--border); position: relative; cursor: pointer; flex-shrink: 0;
|
||||
}
|
||||
.toggle.on { background: var(--accent-dim); border-color: var(--accent); }
|
||||
.toggle .knob {
|
||||
position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
|
||||
background: var(--muted); transition: left .15s, background .15s;
|
||||
}
|
||||
.toggle.on .knob { left: 20px; background: var(--accent); }
|
||||
|
||||
select {
|
||||
width: 100%; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border);
|
||||
background: var(--panel-2); color: var(--text); font-size: 0.85rem;
|
||||
}
|
||||
.field-row { display: flex; gap: 8px; }
|
||||
.field-row > div { flex: 1; }
|
||||
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.85rem; }
|
||||
.checkbox-row input { width: auto; margin: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>ESP32 Emulator</h1>
|
||||
<p class="subtitle">Виртуальный контроллер гроубокса — датчик + вентилятор + свет + помпа, говорит по тому же MQTT-протоколу, что и настоящее устройство.</p>
|
||||
<p class="subtitle">Виртуальный ESP32-контроллер гроубокса. Слева — какой пин к чему подключён. Показания задаёте и публикуете сами (входные сигналы → в автоматику); питание/уровень актуаторов меняются САМИ, когда платформа реально присылает команду (выход из автоматики → сюда). Дополнительные сигналы — это отдельные устройства (свой external_id), а не довесок к существующим.</p>
|
||||
<div id="conn" class="conn offline"><span class="dot"></span><span id="conn-label">подключение…</span></div>
|
||||
|
||||
<div class="board-wrap">
|
||||
<svg class="board" viewBox="0 0 400 220" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="case" x="10" y="10" width="380" height="200" rx="14"/>
|
||||
<svg class="board" viewBox="-120 0 940 480" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- ESP32 devkit board -->
|
||||
<g transform="translate(255,20)">
|
||||
<rect x="0" y="0" width="190" height="300" rx="8" fill="#1a4d2e" stroke="#0d2e1b" stroke-width="2"/>
|
||||
<rect x="55" y="30" width="80" height="80" rx="4" fill="#4a4a4a" stroke="#2a2a2a" stroke-width="1.5"/>
|
||||
<text x="95" y="65" text-anchor="middle" font-size="11" fill="#ddd" font-weight="700">ESP32</text>
|
||||
<text x="95" y="80" text-anchor="middle" font-size="8" fill="#aaa">WROOM-32</text>
|
||||
<rect x="75" y="270" width="40" height="22" rx="2" fill="#c0c0c0" stroke="#888" stroke-width="1"/>
|
||||
<text x="95" y="285" text-anchor="middle" font-size="7" fill="#333">USB</text>
|
||||
<circle cx="20" cy="130" r="6" fill="#333" stroke="#666"/>
|
||||
<text x="20" y="145" text-anchor="middle" font-size="7" fill="#888">EN</text>
|
||||
<circle cx="170" cy="130" r="6" fill="#333" stroke="#666"/>
|
||||
<text x="170" y="145" text-anchor="middle" font-size="7" fill="#888">BOOT</text>
|
||||
|
||||
<!-- sensor -->
|
||||
<g transform="translate(60,60)">
|
||||
<circle r="30" fill="#233348" stroke="#37527a" stroke-width="2"/>
|
||||
<text id="sensor-temp" x="0" y="-2" text-anchor="middle" font-size="13" fill="#e6edf5" font-weight="600">24°C</text>
|
||||
<text id="sensor-humidity" x="0" y="14" text-anchor="middle" font-size="10" fill="#8ea0b8">55%</text>
|
||||
<!-- left pin header -->
|
||||
<g id="pin-sensor"><circle class="pin" cx="0" cy="150" r="3.5"/></g>
|
||||
<!-- right pin headers -->
|
||||
<g id="pin-fan"><circle class="pin" cx="190" cy="130" r="3.5"/></g>
|
||||
<g id="pin-light"><circle class="pin" cx="190" cy="170" r="3.5"/></g>
|
||||
<g id="pin-pump"><circle class="pin" cx="190" cy="210" r="3.5"/></g>
|
||||
<!-- expansion header (I2C/GPIO for extra devices, not one fixed pin) -->
|
||||
<g id="pin-ext"><circle class="pin" cx="95" cy="300" r="3.5"/></g>
|
||||
|
||||
<!-- assignable extra pins (see PIN_CATALOG in <script>) -->
|
||||
<g class="pin" fill="#8a8a8a" id="assignable-pins">
|
||||
<circle cx="0" cy="20" r="2.5"/><circle cx="0" cy="45" r="2.5"/><circle cx="0" cy="70" r="2.5"/>
|
||||
<circle cx="0" cy="95" r="2.5"/><circle cx="0" cy="120" r="2.5"/><circle cx="0" cy="175" r="2.5"/>
|
||||
<circle cx="0" cy="200" r="2.5"/><circle cx="0" cy="225" r="2.5"/><circle cx="0" cy="250" r="2.5"/>
|
||||
<circle cx="190" cy="20" r="2.5"/><circle cx="190" cy="45" r="2.5"/><circle cx="190" cy="70" r="2.5"/>
|
||||
<circle cx="190" cy="95" r="2.5"/><circle cx="190" cy="150" r="2.5"/><circle cx="190" cy="190" r="2.5"/>
|
||||
<circle cx="190" cy="230" r="2.5"/>
|
||||
</g>
|
||||
<text x="60" y="115" text-anchor="middle" font-size="11" fill="#8ea0b8">датчик</text>
|
||||
<!-- purely decorative, not in PIN_CATALOG -->
|
||||
<g fill="#8a8a8a">
|
||||
<circle cx="190" cy="250" r="2.5"/><circle cx="190" cy="270" r="2.5"/>
|
||||
</g>
|
||||
<text class="pin-label" x="8" y="153">GPIO4</text>
|
||||
<text class="pin-label" x="150" y="127">GPIO16</text>
|
||||
<text class="pin-label" x="150" y="167">GPIO17</text>
|
||||
<text class="pin-label" x="150" y="207">GPIO18</text>
|
||||
<text class="pin-label" x="60" y="298" text-anchor="end">EXT</text>
|
||||
</g>
|
||||
<!-- labels + wires for extra devices pinned to a real GPIO — filled in by renderPinnedDevices() -->
|
||||
<g id="pinned-devices"></g>
|
||||
|
||||
<!-- fan -->
|
||||
<g transform="translate(160,60)">
|
||||
<circle r="30" fill="#233348" stroke="#37527a" stroke-width="2"/>
|
||||
<!-- sensor (left) -->
|
||||
<path class="wire" d="M 255,170 C 180,170 140,60 90,60" stroke="var(--wire-sensor)"/>
|
||||
<g transform="translate(70,60)">
|
||||
<circle r="34" fill="#233348" stroke="var(--wire-sensor)" stroke-width="2"/>
|
||||
<text id="board-sensor-primary" x="0" y="-2" text-anchor="middle" font-size="14" fill="#e6edf5" font-weight="700">24°C</text>
|
||||
<text id="board-sensor-secondary" x="0" y="14" text-anchor="middle" font-size="10" fill="#8ea0b8">55%</text>
|
||||
</g>
|
||||
<text class="peripheral-label" x="70" y="118">Датчик</text>
|
||||
<text class="peripheral-sub" x="70" y="130">GPIO4 · input</text>
|
||||
|
||||
<!-- fan (top right) -->
|
||||
<path class="wire" d="M 445,150 C 520,150 550,80 600,70" stroke="var(--wire-fan)"/>
|
||||
<g transform="translate(615,68)">
|
||||
<circle r="30" fill="#233348" stroke="var(--wire-fan)" stroke-width="2"/>
|
||||
<g id="fan-blades" class="fan-blades">
|
||||
<ellipse cx="0" cy="-12" rx="6" ry="14" fill="#5b7ba8"/>
|
||||
<ellipse cx="12" cy="6" rx="6" ry="14" fill="#5b7ba8" transform="rotate(120 12 6)"/>
|
||||
@@ -125,93 +218,340 @@
|
||||
<circle r="4" fill="#e6edf5"/>
|
||||
</g>
|
||||
</g>
|
||||
<text x="160" y="115" text-anchor="middle" font-size="11" fill="#8ea0b8">вентилятор</text>
|
||||
<text class="peripheral-label" x="615" y="118">Вентилятор</text>
|
||||
<text class="peripheral-sub" x="615" y="130">GPIO16 · relay</text>
|
||||
|
||||
<!-- light -->
|
||||
<g transform="translate(260,60)">
|
||||
<!-- light (mid right) -->
|
||||
<path class="wire" d="M 445,190 C 520,190 560,178 600,178" stroke="var(--wire-light)"/>
|
||||
<g transform="translate(615,178)">
|
||||
<circle id="bulb-glow" class="bulb-glow" r="26" fill="#e8b339" opacity="0"/>
|
||||
<circle id="bulb-body" class="bulb-body" r="16" fill="#233348" stroke="#37527a" stroke-width="2"/>
|
||||
<circle id="bulb-body" class="bulb-body" r="16" fill="#233348" stroke="var(--wire-light)" stroke-width="2"/>
|
||||
</g>
|
||||
<text x="260" y="115" text-anchor="middle" font-size="11" fill="#8ea0b8">свет</text>
|
||||
<text class="peripheral-label" x="615" y="220">Свет</text>
|
||||
<text class="peripheral-sub" x="615" y="232">GPIO17 · relay</text>
|
||||
|
||||
<!-- pump -->
|
||||
<g transform="translate(340,60)">
|
||||
<circle id="pump-ring" class="pump-ring" r="26" fill="none" stroke="#3aa0e8" stroke-width="3" opacity="0"/>
|
||||
<circle r="16" fill="#233348" stroke="#37527a" stroke-width="2"/>
|
||||
<path d="M0,-8 C6,-2 6,6 0,8 C-6,6 -6,-2 0,-8 Z" fill="#3aa0e8"/>
|
||||
<!-- pump (bottom right) -->
|
||||
<path class="wire" d="M 445,230 C 520,230 550,285 600,290" stroke="var(--wire-pump)"/>
|
||||
<g transform="translate(615,292)">
|
||||
<circle id="pump-ring" class="pump-ring" r="26" fill="none" stroke="var(--wire-pump)" stroke-width="3" opacity="0"/>
|
||||
<circle r="16" fill="#233348" stroke="var(--wire-pump)" stroke-width="2"/>
|
||||
<path d="M0,-8 C6,-2 6,6 0,8 C-6,6 -6,-2 0,-8 Z" fill="var(--wire-pump)"/>
|
||||
</g>
|
||||
<text x="340" y="115" text-anchor="middle" font-size="11" fill="#8ea0b8">помпа</text>
|
||||
<text class="peripheral-label" x="615" y="332">Помпа</text>
|
||||
<text class="peripheral-sub" x="500" y="332">GPIO18 · relay</text>
|
||||
|
||||
<!-- extra devices attach here, below the fixed board — see renderExtensionDevices() -->
|
||||
<path class="wire" id="ext-trunk" d="M 350,320 L 350,360" stroke="var(--wire-ext)" stroke-dasharray="4 3"/>
|
||||
<text x="350" y="378" text-anchor="middle" font-size="9" fill="var(--wire-ext)">доп. устройства (EXT)</text>
|
||||
<g id="extension-devices"></g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="grid" id="cards"></div>
|
||||
|
||||
<script>
|
||||
const SLOTS = {
|
||||
sensor: { label: 'Датчик температуры/влажности', kind: 'sensor' },
|
||||
fan: { label: 'Вентилятор', kind: 'actuator' },
|
||||
light: { label: 'Свет', kind: 'actuator' },
|
||||
pump: { label: 'Помпа', kind: 'actuator' },
|
||||
// Presets give known signal names a friendly slider range/unit; anything
|
||||
// else is just min 0 / max 100 unless the user picked "discrete".
|
||||
const SIGNAL_PRESETS = {
|
||||
temperature: { min: -10, max: 50, step: 0.5, unit: '°C' },
|
||||
humidity: { min: 0, max: 100, step: 1, unit: '%' },
|
||||
};
|
||||
|
||||
let latest = {};
|
||||
const CORE_LABELS = { sensor: 'Датчик', fan: 'Вентилятор', light: 'Свет', pump: 'Помпа' };
|
||||
|
||||
function cardHTML(slot) {
|
||||
const meta = SLOTS[slot];
|
||||
const idPrefix = slot;
|
||||
let body = `
|
||||
<label>external_id</label>
|
||||
<input type="text" id="${idPrefix}-external-id">
|
||||
<label>zone_id</label>
|
||||
<input type="text" id="${idPrefix}-zone-id">
|
||||
<button class="secondary" onclick="saveIdentity('${slot}')">Сохранить идентификатор</button>
|
||||
`;
|
||||
// Assignable GPIO pins for extra devices — deliberately not the full ESP32
|
||||
// pinout, just enough to be realistic: which pins can only be read
|
||||
// (34/35/36/39 are input-only on a real ESP32, no output driver), which
|
||||
// support analog (ADC) input, and which are plain digital GPIO. Absolute
|
||||
// board coordinates = the ESP32 rect's own translate(255,20) + local x/y,
|
||||
// matching the four core pins' wire-start points (255 for the left edge,
|
||||
// 445 for the right edge).
|
||||
const PIN_CATALOG = [
|
||||
{ pin: 'GPIO32', x: 255, y: 40, analogIn: true, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO33', x: 255, y: 65, analogIn: true, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO25', x: 255, y: 90, analogIn: true, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO26', x: 255, y: 115, analogIn: true, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO27', x: 255, y: 140, analogIn: true, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO13', x: 255, y: 195, analogIn: true, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO14', x: 255, y: 220, analogIn: true, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO5', x: 255, y: 245, analogIn: false, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO19', x: 255, y: 270, analogIn: false, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO21', x: 445, y: 40, analogIn: false, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO22', x: 445, y: 65, analogIn: false, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO23', x: 445, y: 90, analogIn: false, digitalIn: true, digitalOut: true },
|
||||
{ pin: 'GPIO34', x: 445, y: 115, analogIn: true, digitalIn: true, digitalOut: false },
|
||||
{ pin: 'GPIO35', x: 445, y: 170, analogIn: true, digitalIn: true, digitalOut: false },
|
||||
{ pin: 'GPIO36', x: 445, y: 210, analogIn: true, digitalIn: true, digitalOut: false },
|
||||
{ pin: 'GPIO39', x: 445, y: 250, analogIn: true, digitalIn: true, digitalOut: false },
|
||||
];
|
||||
|
||||
if (meta.kind === 'sensor') {
|
||||
function pinEntry(name) { return PIN_CATALOG.find((p) => p.pin === name); }
|
||||
|
||||
let latest = {}; // slot -> last known Device
|
||||
let cardSlots = new Set(); // slots that currently have a rendered card
|
||||
|
||||
function escapeHTML(str) {
|
||||
return String(str).replace(/[&<>"']/g, (c) => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c]));
|
||||
}
|
||||
|
||||
function cssId(name) { return name.replace(/[^a-zA-Z0-9_-]/g, '_'); }
|
||||
|
||||
function analogRowHTML(slot, name, value) {
|
||||
const preset = SIGNAL_PRESETS[name];
|
||||
const min = preset?.min ?? 0, max = preset?.max ?? 100, step = preset?.step ?? 1, unit = preset?.unit ?? '';
|
||||
return `<div class="signal-row" data-signal="${escapeHTML(name)}">
|
||||
<span class="name">${escapeHTML(name)}${unit ? ' ('+unit+')' : ''}</span>
|
||||
<input type="range" min="${min}" max="${max}" step="${step}" value="${value}"
|
||||
oninput="onSliderInput('${slot}','${escapeHTML(name)}', this.value)">
|
||||
<span class="val" id="${slot}-${cssId(name)}-val">${value}</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function discreteRowHTML(slot, name, value) {
|
||||
return `<div class="signal-row" data-signal="${escapeHTML(name)}">
|
||||
<span class="name">${escapeHTML(name)}</span>
|
||||
<div class="toggle ${value ? 'on' : ''}" onclick="toggleDiscrete('${slot}','${escapeHTML(name)}')"><div class="knob"></div></div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Known presets sort first (temperature before humidity), custom signals
|
||||
// after, alphabetically — keeps the board's two-line readout predictable.
|
||||
function orderedNames(readings) {
|
||||
const names = Object.keys(readings);
|
||||
const rank = (n) => (n === 'temperature' ? 0 : n === 'humidity' ? 1 : 2);
|
||||
return names.sort((a, b) => rank(a) - rank(b) || a.localeCompare(b));
|
||||
}
|
||||
|
||||
function deviceTitle(d) {
|
||||
if (d.core) return CORE_LABELS[d.slot];
|
||||
if (d.kind === 'sensor') return Object.keys(d.readings || {})[0] || d.external_id;
|
||||
return d.external_id;
|
||||
}
|
||||
|
||||
function cardHTML(d) {
|
||||
const badge = d.kind === 'actuator'
|
||||
? `<span class="badge" id="${d.slot}-badge">выключено</span>`
|
||||
: (!d.core ? `<span class="badge extra">доп.</span>` : '');
|
||||
|
||||
let body = '';
|
||||
if (d.pin) {
|
||||
body += `<p class="hint" style="margin-top:0">Пин: <strong style="color:var(--text)">${escapeHTML(d.pin)}</strong></p>`;
|
||||
}
|
||||
body += `
|
||||
<label>Температура: <span class="value" id="${idPrefix}-temp-value">24</span> °C</label>
|
||||
<input type="range" id="${idPrefix}-temp" min="-10" max="50" step="0.5" value="24">
|
||||
<label>Влажность: <span class="value" id="${idPrefix}-humidity-value">55</span> %</label>
|
||||
<input type="range" id="${idPrefix}-humidity" min="0" max="100" step="1" value="55">
|
||||
<button onclick="publishTelemetry('${slot}')">Опубликовать показания</button>
|
||||
<label>external_id</label>
|
||||
<input type="text" id="${d.slot}-external-id">
|
||||
<label>zone_id</label>
|
||||
<input type="text" id="${d.slot}-zone-id">
|
||||
<button class="secondary" onclick="saveIdentity('${d.slot}')">Сохранить идентификатор</button>
|
||||
`;
|
||||
|
||||
if (d.kind === 'sensor') {
|
||||
body += `<div id="${d.slot}-signals"></div>`;
|
||||
body += `<p class="hint">Публикуется в MQTT автоматически (слайдер — с небольшой задержкой после того, как отпустили; переключатель — сразу).</p>`;
|
||||
} else {
|
||||
body += `
|
||||
<div class="status-line"><span>Питание</span><span id="${idPrefix}-power">—</span></div>
|
||||
<div class="status-line" id="${idPrefix}-level-row" style="display:none">
|
||||
<span>Уровень</span><span id="${idPrefix}-level">—</span>
|
||||
<div class="status-line"><span>Питание</span><span id="${d.slot}-power">—</span></div>
|
||||
<div class="status-line" id="${d.slot}-level-row" style="display:none">
|
||||
<span>Уровень</span><span id="${d.slot}-level">—</span>
|
||||
</div>
|
||||
<p style="color:var(--muted); font-size:0.78rem; margin-top:10px;">
|
||||
Управляется командами от платформы — здесь только отображение.
|
||||
</p>
|
||||
<p class="hint">Выходной сигнал — меняется, когда платформа присылает команду по MQTT. Ручного переключателя здесь нет специально.</p>
|
||||
`;
|
||||
}
|
||||
|
||||
const badge = meta.kind === 'actuator' ? `<span class="badge" id="${idPrefix}-badge">выключено</span>` : '';
|
||||
return `<div class="card">
|
||||
<h2>${meta.label} ${badge}</h2>
|
||||
if (!d.core) {
|
||||
body += `<button class="danger" onclick="removeDevice('${d.slot}')">Удалить устройство</button>`;
|
||||
}
|
||||
|
||||
return `<div class="card" id="${d.slot}-card">
|
||||
<h2><span class="title">${escapeHTML(deviceTitle(d))}</span> ${badge}</h2>
|
||||
${body}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
document.getElementById('cards').innerHTML = Object.keys(SLOTS).map(cardHTML).join('');
|
||||
function addDeviceCardHTML() {
|
||||
return `<div class="card add-device-card" id="add-device-card">
|
||||
<h2><span class="title">Добавить устройство</span></h2>
|
||||
<label>Тип</label>
|
||||
<select id="new-device-kind" onchange="onNewDeviceKindChange()">
|
||||
<option value="sensor">Вход (датчик)</option>
|
||||
<option value="actuator">Выход (актуатор)</option>
|
||||
</select>
|
||||
|
||||
<div id="new-device-sensor-fields">
|
||||
<label>Название сигнала</label>
|
||||
<input type="text" id="new-device-signal-name" placeholder="напр. door_open">
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="new-device-discrete" onchange="refreshPinOptions()">
|
||||
<label style="margin:0" for="new-device-discrete">Дискретный (вкл/выкл)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="new-device-actuator-fields" style="display:none">
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="new-device-supports-level">
|
||||
<label style="margin:0" for="new-device-supports-level">Поддерживает уровень (set_level)</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<div>
|
||||
<label>external_id</label>
|
||||
<input type="text" id="new-device-external-id" placeholder="напр. door-1">
|
||||
</div>
|
||||
<div>
|
||||
<label>zone_id</label>
|
||||
<input type="text" id="new-device-zone-id" value="1">
|
||||
</div>
|
||||
</div>
|
||||
<label>Пин</label>
|
||||
<select id="new-device-pin"></select>
|
||||
<button onclick="addDevice()">Создать устройство</button>
|
||||
<p class="hint">Создаёт отдельный MQTT-девайс (свой external_id) — так же, как завели бы новое устройство на платформе, а не довесок к существующему. Список пинов сужается под выбранный тип сигнала и не предлагает уже занятые.</p>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function onNewDeviceKindChange() {
|
||||
const kind = document.getElementById('new-device-kind').value;
|
||||
document.getElementById('new-device-sensor-fields').style.display = kind === 'sensor' ? 'block' : 'none';
|
||||
document.getElementById('new-device-actuator-fields').style.display = kind === 'actuator' ? 'block' : 'none';
|
||||
refreshPinOptions();
|
||||
}
|
||||
|
||||
// Pins already claimed by any current device — the four core devices don't
|
||||
// use PIN_CATALOG entries at all (their GPIO4/16/17/18 are fixed and never
|
||||
// offered here), so only extras' .pin values need excluding.
|
||||
function usedPins() {
|
||||
return new Set(Object.values(latest).map((d) => d.pin).filter(Boolean));
|
||||
}
|
||||
|
||||
function compatiblePins(kind, discrete) {
|
||||
const used = usedPins();
|
||||
return PIN_CATALOG.filter((p) => {
|
||||
if (used.has(p.pin)) return false;
|
||||
if (kind === 'actuator') return p.digitalOut;
|
||||
return discrete ? p.digitalIn : p.analogIn;
|
||||
});
|
||||
}
|
||||
|
||||
function refreshPinOptions() {
|
||||
const select = document.getElementById('new-device-pin');
|
||||
if (!select) return; // add-device card not mounted yet
|
||||
const kind = document.getElementById('new-device-kind').value;
|
||||
const discrete = document.getElementById('new-device-discrete').checked;
|
||||
const compatible = compatiblePins(kind, discrete);
|
||||
|
||||
const prev = select.value;
|
||||
select.innerHTML = '<option value="">— без пина (EXT) —</option>' +
|
||||
compatible.map((p) => `<option value="${p.pin}">${p.pin}</option>`).join('');
|
||||
if (compatible.some((p) => p.pin === prev)) select.value = prev;
|
||||
}
|
||||
|
||||
async function addDevice() {
|
||||
const kind = document.getElementById('new-device-kind').value;
|
||||
const externalId = document.getElementById('new-device-external-id').value.trim();
|
||||
const zoneId = document.getElementById('new-device-zone-id').value.trim();
|
||||
if (!externalId || !zoneId) return;
|
||||
|
||||
const payload = { kind, external_id: externalId, zone_id: zoneId,
|
||||
pin: document.getElementById('new-device-pin').value.trim() };
|
||||
if (kind === 'sensor') {
|
||||
const name = document.getElementById('new-device-signal-name').value.trim();
|
||||
if (!name) return;
|
||||
payload.signal_name = name;
|
||||
payload.discrete = document.getElementById('new-device-discrete').checked;
|
||||
} else {
|
||||
payload.supports_level = document.getElementById('new-device-supports-level').checked;
|
||||
}
|
||||
|
||||
const res = await fetch('/api/devices', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) {
|
||||
alert('Не удалось создать устройство: ' + (await res.text()));
|
||||
return;
|
||||
}
|
||||
document.getElementById('new-device-external-id').value = '';
|
||||
document.getElementById('new-device-signal-name').value = '';
|
||||
document.getElementById('new-device-pin').value = '';
|
||||
}
|
||||
|
||||
async function removeDevice(slot) {
|
||||
if (!confirm('Удалить это устройство?')) return;
|
||||
await fetch(`/api/devices/${slot}`, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
function renderSignals(d) {
|
||||
const container = document.getElementById(`${d.slot}-signals`);
|
||||
const readings = d.readings || {};
|
||||
const names = orderedNames(readings);
|
||||
container.innerHTML = names.map((name) => {
|
||||
// Core sensor's own readings (temperature/humidity) are always analog;
|
||||
// an extra sensor device has exactly one reading, flagged by the
|
||||
// server via d.discrete.
|
||||
const discrete = !d.core && d.discrete;
|
||||
return discrete ? discreteRowHTML(d.slot, name, readings[name]) : analogRowHTML(d.slot, name, readings[name]);
|
||||
}).join('');
|
||||
updateBoardText(d.slot, readings);
|
||||
}
|
||||
|
||||
function updateBoardText(slot, readings) {
|
||||
if (slot !== 'sensor') return;
|
||||
const [primary, secondary] = orderedNames(readings);
|
||||
const fmt = (n) => n === undefined ? '' : `${readings[n]}${SIGNAL_PRESETS[n]?.unit ?? ''}`;
|
||||
document.getElementById('board-sensor-primary').textContent = fmt(primary) || '—';
|
||||
document.getElementById('board-sensor-secondary').textContent = secondary ? fmt(secondary) : '';
|
||||
}
|
||||
|
||||
// Debounced per-signal auto-publish: a value only "counts" as sent to the
|
||||
// platform ~350ms after the user stops moving the slider, so a full drag
|
||||
// doesn't flood MQTT with one message per pixel — but the server (and thus
|
||||
// the SSE truth every client, including reconnects, converges to) is back
|
||||
// in sync within a fraction of a second either way, not only when a
|
||||
// separate "publish" button is remembered and clicked.
|
||||
const publishTimers = {};
|
||||
|
||||
function schedulePublish(slot, name, value) {
|
||||
const key = `${slot}:${name}`;
|
||||
clearTimeout(publishTimers[key]);
|
||||
publishTimers[key] = setTimeout(() => publishOne(slot, name, value), 350);
|
||||
}
|
||||
|
||||
function onSliderInput(slot, name, value) {
|
||||
const el = document.getElementById(`${slot}-${cssId(name)}-val`);
|
||||
if (el) el.textContent = value;
|
||||
if (!latest[slot]) latest[slot] = { readings: {} };
|
||||
latest[slot].readings[name] = parseFloat(value);
|
||||
updateBoardText(slot, latest[slot].readings);
|
||||
schedulePublish(slot, name, value);
|
||||
}
|
||||
|
||||
function toggleDiscrete(slot, name) {
|
||||
const cur = latest[slot]?.readings?.[name] ?? 0;
|
||||
const next = cur ? 0 : 1;
|
||||
latest[slot].readings[name] = next;
|
||||
renderSignals(latest[slot]);
|
||||
publishOne(slot, name, next); // discrete flips are instant, no debounce needed
|
||||
}
|
||||
|
||||
function render(snapshot) {
|
||||
latest = {};
|
||||
const seenSlots = new Set();
|
||||
|
||||
for (const d of snapshot.devices) {
|
||||
seenSlots.add(d.slot);
|
||||
const prevPower = latest[d.slot]?.power;
|
||||
const prevLevel = latest[d.slot]?.level;
|
||||
latest[d.slot] = d;
|
||||
|
||||
if (!cardSlots.has(d.slot)) {
|
||||
insertCard(d);
|
||||
}
|
||||
|
||||
document.getElementById(`${d.slot}-external-id`).value = d.external_id;
|
||||
document.getElementById(`${d.slot}-zone-id`).value = d.zone_id;
|
||||
|
||||
if (d.kind === 'sensor') {
|
||||
const temp = d.readings?.temperature ?? 0;
|
||||
const humidity = d.readings?.humidity ?? 0;
|
||||
document.getElementById(`${d.slot}-temp`).value = temp;
|
||||
document.getElementById(`${d.slot}-temp-value`).textContent = temp;
|
||||
document.getElementById(`${d.slot}-humidity`).value = humidity;
|
||||
document.getElementById(`${d.slot}-humidity-value`).textContent = humidity;
|
||||
document.getElementById('sensor-temp').textContent = `${temp}°C`;
|
||||
document.getElementById('sensor-humidity').textContent = `${humidity}%`;
|
||||
renderSignals(d);
|
||||
} else {
|
||||
const badge = document.getElementById(`${d.slot}-badge`);
|
||||
badge.textContent = d.power ? 'включено' : 'выключено';
|
||||
@@ -222,6 +562,19 @@ function render(snapshot) {
|
||||
document.getElementById(`${d.slot}-level-row`).style.display = 'flex';
|
||||
document.getElementById(`${d.slot}-level`).textContent = d.level;
|
||||
}
|
||||
|
||||
if (prevPower !== undefined && (prevPower !== d.power || prevLevel !== d.level)) {
|
||||
flashCard(d.slot);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Drop cards for devices that no longer exist (removed extras).
|
||||
for (const slot of [...cardSlots]) {
|
||||
if (!seenSlots.has(slot)) {
|
||||
document.getElementById(`${slot}-card`)?.remove();
|
||||
cardSlots.delete(slot);
|
||||
delete latest[slot];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -229,16 +582,105 @@ function render(snapshot) {
|
||||
document.getElementById('bulb-glow').classList.toggle('on', !!latest.light?.power);
|
||||
document.getElementById('bulb-body').setAttribute('fill', latest.light?.power ? '#e8b339' : '#233348');
|
||||
document.getElementById('pump-ring').classList.toggle('on', !!latest.pump?.power);
|
||||
|
||||
const extras = snapshot.devices.filter((d) => !d.core);
|
||||
renderPinnedDevices(extras.filter((d) => d.pin && pinEntry(d.pin)));
|
||||
renderExtensionDevices(extras.filter((d) => !d.pin || !pinEntry(d.pin)));
|
||||
refreshPinOptions();
|
||||
}
|
||||
|
||||
for (const slot of Object.keys(SLOTS)) {
|
||||
if (SLOTS[slot].kind !== 'sensor') continue;
|
||||
document.getElementById(`${slot}-temp`).addEventListener('input', (e) => {
|
||||
document.getElementById(`${slot}-temp-value`).textContent = e.target.value;
|
||||
function insertCard(d) {
|
||||
const cardsEl = document.getElementById('cards');
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = cardHTML(d);
|
||||
cardsEl.appendChild(wrapper.firstElementChild);
|
||||
cardSlots.add(d.slot);
|
||||
}
|
||||
|
||||
function flashCard(slot) {
|
||||
const card = document.getElementById(`${slot}-card`);
|
||||
card.classList.add('flash');
|
||||
setTimeout(() => card.classList.remove('flash'), 900);
|
||||
}
|
||||
|
||||
// Draws every non-core device as its own icon hanging off the "EXT" bus
|
||||
// below the fixed board — visually distinct (dashed wire) from the four
|
||||
// GPIO-wired peripherals, since these aren't on a real fixed pin.
|
||||
// Shared icon+label markup for one extra device at a given (x,y) — used by
|
||||
// both the pinned layout (real GPIO position) and the unpinned fallback
|
||||
// (generic EXT bus).
|
||||
function deviceIconSVG(d, x, y, sub) {
|
||||
const title = escapeHTML(deviceTitle(d));
|
||||
let svg = '';
|
||||
if (d.kind === 'sensor') {
|
||||
const name = Object.keys(d.readings || {})[0];
|
||||
const value = name !== undefined ? d.readings[name] : 0;
|
||||
svg += `<circle cx="${x}" cy="${y}" r="24" fill="#233348" stroke="var(--wire-sensor)" stroke-width="2"/>`;
|
||||
svg += `<text x="${x}" y="${y + 5}" text-anchor="middle" font-size="13" fill="#e6edf5" font-weight="700">${escapeHTML(value)}</text>`;
|
||||
} else {
|
||||
const on = !!d.power;
|
||||
svg += `<circle cx="${x}" cy="${y}" r="24" fill="${on ? 'var(--accent-dim)' : '#233348'}" stroke="var(--wire-fan)" stroke-width="2"/>`;
|
||||
svg += `<text x="${x}" y="${y + 4}" text-anchor="middle" font-size="10" fill="${on ? 'var(--accent)' : '#8ea0b8'}" font-weight="700">${on ? 'ON' : 'OFF'}</text>`;
|
||||
}
|
||||
svg += `<text class="peripheral-label" x="${x}" y="${y + 42}">${title}</text>`;
|
||||
svg += `<text class="peripheral-sub" x="${x}" y="${y + 53}">${escapeHTML(sub)}</text>`;
|
||||
return svg;
|
||||
}
|
||||
|
||||
// Devices with no pin assigned hang off a generic dashed "EXT" bus below
|
||||
// the board — there's no real position to draw them at.
|
||||
function renderExtensionDevices(extras) {
|
||||
const g = document.getElementById('extension-devices');
|
||||
const trunk = document.getElementById('ext-trunk');
|
||||
|
||||
if (!extras.length) {
|
||||
g.innerHTML = '';
|
||||
trunk.setAttribute('d', 'M 350,320 L 350,360');
|
||||
return;
|
||||
}
|
||||
|
||||
const busY = 375;
|
||||
const spacing = 110;
|
||||
const totalWidth = spacing * (extras.length - 1);
|
||||
const startX = 350 - totalWidth / 2;
|
||||
trunk.setAttribute('d', `M 350,320 L 350,${busY}`);
|
||||
|
||||
let svg = `<line x1="${startX}" y1="${busY}" x2="${startX + totalWidth}" y2="${busY}" stroke="var(--wire-ext)" stroke-width="2" stroke-dasharray="4 3"/>`;
|
||||
|
||||
extras.forEach((d, i) => {
|
||||
const x = startX + spacing * i;
|
||||
const y = busY + 55;
|
||||
svg += `<line x1="${x}" y1="${busY}" x2="${x}" y2="${y - 26}" stroke="var(--wire-ext)" stroke-width="2" stroke-dasharray="4 3"/>`;
|
||||
const sub = `${escapeHTML(d.external_id)} · ${d.kind === 'sensor' ? 'input' : 'output'}`;
|
||||
svg += deviceIconSVG(d, x, y, sub);
|
||||
});
|
||||
document.getElementById(`${slot}-humidity`).addEventListener('input', (e) => {
|
||||
document.getElementById(`${slot}-humidity-value`).textContent = e.target.value;
|
||||
|
||||
g.innerHTML = svg;
|
||||
}
|
||||
|
||||
// Devices with a real assigned pin get a solid wire straight out from that
|
||||
// pin's actual position on the board — left-side pins grow an icon to the
|
||||
// left of the board, right-side pins to the right, both at the pin's own
|
||||
// height, so the wire reads as "this exact pin goes to this device".
|
||||
function renderPinnedDevices(pinned) {
|
||||
const g = document.getElementById('pinned-devices');
|
||||
let svg = '';
|
||||
|
||||
pinned.forEach((d) => {
|
||||
const entry = pinEntry(d.pin);
|
||||
if (!entry) return; // pin no longer in the catalog (shouldn't happen) — skip rather than crash
|
||||
const onLeft = entry.x === 255;
|
||||
const iconX = onLeft ? -40 : 730;
|
||||
const y = entry.y;
|
||||
const wireColor = d.kind === 'sensor' ? 'var(--wire-sensor)' : 'var(--wire-fan)';
|
||||
|
||||
svg += `<path class="wire" d="M ${entry.x},${y} L ${iconX + (onLeft ? 24 : -24)},${y}" stroke="${wireColor}"/>`;
|
||||
svg += `<text x="${entry.x + (onLeft ? 6 : -6)}" y="${y - 6}" font-size="9" fill="${wireColor}" text-anchor="${onLeft ? 'start' : 'end'}">${escapeHTML(entry.pin)}</text>`;
|
||||
const sub = `${escapeHTML(entry.pin)} · ${d.kind === 'sensor' ? 'input' : 'output'}`;
|
||||
svg += deviceIconSVG(d, iconX, y, sub);
|
||||
});
|
||||
|
||||
g.innerHTML = svg;
|
||||
}
|
||||
|
||||
async function saveIdentity(slot) {
|
||||
@@ -251,18 +693,11 @@ async function saveIdentity(slot) {
|
||||
});
|
||||
}
|
||||
|
||||
async function publishTelemetry(slot) {
|
||||
const temp = parseFloat(document.getElementById(`${slot}-temp`).value);
|
||||
const humidity = parseFloat(document.getElementById(`${slot}-humidity`).value);
|
||||
async function publishOne(slot, sensorType, value) {
|
||||
await fetch(`/api/devices/${slot}/telemetry`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ sensor_type: 'temperature', value: temp }),
|
||||
});
|
||||
await fetch(`/api/devices/${slot}/telemetry`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ sensor_type: 'humidity', value: humidity }),
|
||||
body: JSON.stringify({ sensor_type: sensorType, value: parseFloat(value) }),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -276,6 +711,8 @@ function connectEvents() {
|
||||
es.onmessage = (e) => render(JSON.parse(e.data));
|
||||
}
|
||||
|
||||
document.getElementById('cards').innerHTML = addDeviceCardHTML();
|
||||
refreshPinOptions();
|
||||
connectEvents();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
+118
-33
@@ -1,11 +1,16 @@
|
||||
// Package state holds the emulator's in-memory model of a growbox
|
||||
// controller board: one sensor (reports readings) and up to three
|
||||
// actuators (respond to power/level commands). Nothing here persists
|
||||
// across restarts — the emulator is a throwaway dev/demo tool, not a
|
||||
// real device.
|
||||
// Package state holds the emulator's in-memory model of the controller:
|
||||
// four fixed board slots wired to real GPIO pins (one sensor, three
|
||||
// actuators) plus any number of extra standalone sensor devices the user
|
||||
// adds at runtime — each its own MQTT device_id, the way a second physical
|
||||
// sensor would show up in the real platform, not just another sensor_type
|
||||
// bolted onto the first one. Nothing here persists across restarts — the
|
||||
// emulator is a throwaway dev/demo tool, not a real device.
|
||||
package state
|
||||
|
||||
import "sync"
|
||||
import (
|
||||
"fmt"
|
||||
"sync"
|
||||
)
|
||||
|
||||
type Kind string
|
||||
|
||||
@@ -14,30 +19,45 @@ const (
|
||||
KindActuator Kind = "actuator"
|
||||
)
|
||||
|
||||
// Device is one slot on the controller board. Sensor slots use Readings;
|
||||
// actuator slots use Power/Level. A slot is inert (not published/commanded)
|
||||
// when ExternalID is empty, so the board can represent fewer than four
|
||||
// devices without special-casing "missing" ones.
|
||||
// coreSlots are wired to a fixed GPIO pin on the board illustration and
|
||||
// can't be removed — only their identity (external_id/zone_id) is editable.
|
||||
var coreSlots = []string{"sensor", "fan", "light", "pump"}
|
||||
|
||||
// Device is one board slot or standalone extra sensor. Sensor devices use
|
||||
// Readings; actuator devices use Power/Level. Core is true for the four
|
||||
// fixed board slots (rendered wired to a GPIO pin, can't be deleted) and
|
||||
// false for user-added extra sensors (rendered as their own card, can be
|
||||
// removed). Discrete only matters for single-reading extra sensors, telling
|
||||
// the frontend to render a toggle instead of a slider.
|
||||
type Device struct {
|
||||
Slot string `json:"slot"` // "sensor" | "fan" | "light" | "pump" — fixed board position
|
||||
Slot string `json:"slot"`
|
||||
Core bool `json:"core"`
|
||||
ExternalID string `json:"external_id"`
|
||||
ZoneID string `json:"zone_id"`
|
||||
Kind Kind `json:"kind"`
|
||||
Readings map[string]float64 `json:"readings,omitempty"`
|
||||
Discrete bool `json:"discrete,omitempty"`
|
||||
Power bool `json:"power,omitempty"`
|
||||
SupportsLevel bool `json:"supports_level,omitempty"`
|
||||
Level float64 `json:"level,omitempty"`
|
||||
// Pin is a free-text label the user assigns (e.g. "GPIO25") for extra
|
||||
// devices — purely cosmetic (shown on the board/card), not validated
|
||||
// against real ESP32 pin capabilities or checked for collisions with
|
||||
// the four core pins.
|
||||
Pin string `json:"pin,omitempty"`
|
||||
}
|
||||
|
||||
// Snapshot is the full board state pushed to the browser (initial load and
|
||||
// every SSE update) — simpler than diffing for a board this small.
|
||||
// Snapshot is the full state pushed to the browser (initial load and every
|
||||
// SSE update) — simpler than diffing for a board this small.
|
||||
type Snapshot struct {
|
||||
Devices []Device `json:"devices"`
|
||||
}
|
||||
|
||||
type Store struct {
|
||||
mu sync.RWMutex
|
||||
devices map[string]*Device // keyed by Slot
|
||||
devices map[string]*Device
|
||||
order []string // rendering order: core slots first, then extras oldest-first
|
||||
nextExtra int
|
||||
|
||||
subMu sync.Mutex
|
||||
subs map[chan Snapshot]struct{}
|
||||
@@ -46,24 +66,26 @@ type Store struct {
|
||||
func NewStore() *Store {
|
||||
return &Store{
|
||||
devices: map[string]*Device{
|
||||
"sensor": {Slot: "sensor", ExternalID: "sensor-1", ZoneID: "1", Kind: KindSensor,
|
||||
"sensor": {Slot: "sensor", Core: true, ExternalID: "sensor-1", ZoneID: "1", Kind: KindSensor,
|
||||
Readings: map[string]float64{"temperature": 24, "humidity": 55}},
|
||||
"fan": {Slot: "fan", ExternalID: "fan-1", ZoneID: "1", Kind: KindActuator, SupportsLevel: true},
|
||||
"light": {Slot: "light", ExternalID: "light-1", ZoneID: "1", Kind: KindActuator, SupportsLevel: true},
|
||||
"pump": {Slot: "pump", ExternalID: "pump-1", ZoneID: "1", Kind: KindActuator},
|
||||
"fan": {Slot: "fan", Core: true, ExternalID: "fan-1", ZoneID: "1", Kind: KindActuator, SupportsLevel: true},
|
||||
"light": {Slot: "light", Core: true, ExternalID: "light-1", ZoneID: "1", Kind: KindActuator, SupportsLevel: true},
|
||||
"pump": {Slot: "pump", Core: true, ExternalID: "pump-1", ZoneID: "1", Kind: KindActuator},
|
||||
},
|
||||
order: append([]string(nil), coreSlots...),
|
||||
nextExtra: 1,
|
||||
subs: make(map[chan Snapshot]struct{}),
|
||||
}
|
||||
}
|
||||
|
||||
// Snapshot returns a deep-enough copy of the current board state (readings
|
||||
// map is copied so callers can't mutate internal state through it).
|
||||
// Snapshot returns a deep-enough copy of the current state (readings maps
|
||||
// are copied so callers can't mutate internal state through them).
|
||||
func (s *Store) Snapshot() Snapshot {
|
||||
s.mu.RLock()
|
||||
defer s.mu.RUnlock()
|
||||
|
||||
devices := make([]Device, 0, len(s.devices))
|
||||
for _, slot := range []string{"sensor", "fan", "light", "pump"} {
|
||||
devices := make([]Device, 0, len(s.order))
|
||||
for _, slot := range s.order {
|
||||
d := *s.devices[slot]
|
||||
if d.Readings != nil {
|
||||
readings := make(map[string]float64, len(d.Readings))
|
||||
@@ -89,9 +111,72 @@ func (s *Store) Device(slot string) (Device, bool) {
|
||||
return *d, true
|
||||
}
|
||||
|
||||
// DeviceBySlotExternalID finds the slot name for a given external_id, used
|
||||
// to route an incoming MQTT command (which only carries the external_id in
|
||||
// its topic) back to a board slot.
|
||||
// AddSensorDevice creates a new standalone sensor device — its own MQTT
|
||||
// device_id, one named reading (analog or discrete, both just a float64
|
||||
// underneath — the wire format doesn't distinguish them). Returns the new
|
||||
// slot name. Mirrors adding a second physical sensor to the platform (a
|
||||
// new Device row with its own external_id), not another sensor_type
|
||||
// tacked onto an existing device.
|
||||
func (s *Store) AddSensorDevice(signalName, externalID, zoneID, pin string, discrete bool) string {
|
||||
s.mu.Lock()
|
||||
slot := s.newExtraSlot()
|
||||
s.devices[slot] = &Device{
|
||||
Slot: slot, Core: false, ExternalID: externalID, ZoneID: zoneID, Kind: KindSensor,
|
||||
Readings: map[string]float64{signalName: 0}, Discrete: discrete, Pin: pin,
|
||||
}
|
||||
s.order = append(s.order, slot)
|
||||
s.mu.Unlock()
|
||||
s.broadcast()
|
||||
return slot
|
||||
}
|
||||
|
||||
// AddActuatorDevice creates a new standalone output device — same idea as
|
||||
// AddSensorDevice but for the output side: it only reacts to real
|
||||
// devices/{id}/commands from the platform, same as the four board actuators.
|
||||
func (s *Store) AddActuatorDevice(externalID, zoneID, pin string, supportsLevel bool) string {
|
||||
s.mu.Lock()
|
||||
slot := s.newExtraSlot()
|
||||
s.devices[slot] = &Device{
|
||||
Slot: slot, Core: false, ExternalID: externalID, ZoneID: zoneID, Kind: KindActuator,
|
||||
SupportsLevel: supportsLevel, Pin: pin,
|
||||
}
|
||||
s.order = append(s.order, slot)
|
||||
s.mu.Unlock()
|
||||
s.broadcast()
|
||||
return slot
|
||||
}
|
||||
|
||||
// newExtraSlot must be called with s.mu held.
|
||||
func (s *Store) newExtraSlot() string {
|
||||
slot := fmt.Sprintf("extra-%d", s.nextExtra)
|
||||
s.nextExtra++
|
||||
return slot
|
||||
}
|
||||
|
||||
// RemoveDevice deletes an extra sensor or actuator device. Core board
|
||||
// slots can't be removed (they're wired to a physical pin, not optional).
|
||||
func (s *Store) RemoveDevice(slot string) bool {
|
||||
s.mu.Lock()
|
||||
d, ok := s.devices[slot]
|
||||
if !ok || d.Core {
|
||||
s.mu.Unlock()
|
||||
return false
|
||||
}
|
||||
delete(s.devices, slot)
|
||||
for i, sl := range s.order {
|
||||
if sl == slot {
|
||||
s.order = append(s.order[:i], s.order[i+1:]...)
|
||||
break
|
||||
}
|
||||
}
|
||||
s.mu.Unlock()
|
||||
s.broadcast()
|
||||
return true
|
||||
}
|
||||
|
||||
// SlotForExternalID finds the slot name for a given external_id, used to
|
||||
// route an incoming MQTT command (which only carries the external_id in
|
||||
// its topic) back to a device.
|
||||
func (s *Store) SlotForExternalID(externalID string) (string, bool) {
|
||||
s.mu.RLock()
|
||||
defer s.mu.RUnlock()
|
||||
@@ -117,7 +202,7 @@ func (s *Store) SetIdentity(slot, externalID, zoneID string) {
|
||||
s.broadcast()
|
||||
}
|
||||
|
||||
// SetReading updates one sensor_type's value for the sensor slot.
|
||||
// SetReading updates one sensor_type's value on a sensor device.
|
||||
func (s *Store) SetReading(slot, sensorType string, value float64) {
|
||||
s.mu.Lock()
|
||||
if d, ok := s.devices[slot]; ok && d.Kind == KindSensor {
|
||||
@@ -130,17 +215,17 @@ func (s *Store) SetReading(slot, sensorType string, value float64) {
|
||||
// ApplyCommand applies an incoming {"action": ..., "level": ...} command
|
||||
// (as published by device-control-service to devices/{id}/commands) to the
|
||||
// actuator identified by externalID. Returns the resulting reported state
|
||||
// (for the ack payload) and whether externalID matched a known slot.
|
||||
// (for the ack payload) and whether externalID matched a known device.
|
||||
func (s *Store) ApplyCommand(externalID, action string, level float64, hasLevel bool) (map[string]any, bool) {
|
||||
s.mu.Lock()
|
||||
var slot *Device
|
||||
var target *Device
|
||||
for _, d := range s.devices {
|
||||
if d.ExternalID == externalID {
|
||||
slot = d
|
||||
target = d
|
||||
break
|
||||
}
|
||||
}
|
||||
if slot == nil {
|
||||
if target == nil {
|
||||
s.mu.Unlock()
|
||||
return nil, false
|
||||
}
|
||||
@@ -148,14 +233,14 @@ func (s *Store) ApplyCommand(externalID, action string, level float64, hasLevel
|
||||
reported := map[string]any{}
|
||||
switch action {
|
||||
case "turn_on":
|
||||
slot.Power = true
|
||||
target.Power = true
|
||||
reported["power"] = "on"
|
||||
case "turn_off":
|
||||
slot.Power = false
|
||||
target.Power = false
|
||||
reported["power"] = "off"
|
||||
case "set_level":
|
||||
if hasLevel {
|
||||
slot.Level = level
|
||||
target.Level = level
|
||||
reported["level"] = level
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user