adminandClaude Opus 5
abdf6880eb
Das Rendering des Grundstuecks tritt an die Stelle des Vektorplans. Es kommt aus derselben Art Quelle wie die drei Geschossbilder und passt damit besser zu ihnen, als der Plan es je koennte; der hat seinen Zweck erfuellt, indem er die Geometrie sortiert hat. Freigestellt wird mit einer Flutfuellung vom Rand her, nicht mit einem Farbtausch: Weiss kommt auch im Bild selbst vor - Hauswand, Grundstuecksmauer -, und nur was vom Rand aus zusammenhaengend erreichbar ist, ist wirklich Hintergrund. Aufgefuellt statt beschnitten auf 4:3, weil 1024x792 etwas hoeher ist und Wegschneiden das Bild selbst treffen wuerde. Etagenbilder und Schalter in home.php kommen jetzt aus einer Schleife. Ausgeschrieben waren die Blenden bei drei Etagen neun Zeilen und bei vier schon sechzehn, und jede neue Etage haette alle anderen mit angefasst. Die Schalter ruecken ab der vierten Etage von 100 auf 78 Einheiten zusammen, sonst faellt der unterste aus der 300 hohen viewBox. Die Kachelpositionen sind ein Startwert, kein Endstand: Richtung aus dem Modell gerechnet - Westen liegt links unten, Sueden rechts unten -, Lage per Auge im Raster. Der erste Wurf hatte die Terrasse an der falschen Fassade; im Modell liegt sie an der Suedwestecke. Lange Raumnamen brechen jetzt um. "Terrasse OG" stand einzeilig ueber die 24 Einheiten breite Kachel hinaus - sichtbar wurde das erst hier, weil im Aussengelaende jeder Raumname aus zwei Woertern besteht. Nebenbei: xcursor="pointer" am OG-Schalter war ein Tippfehler, der Kreis hatte als einziger keinen Zeiger. Das tote border-Attribut am OG-Bild ist mit weggefallen, SVG kennt es nicht. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
236 lines
13 KiB
PHP
236 lines
13 KiB
PHP
<?php require_once(__DIR__ . "/rooms.php"); ?>
|
|
<!--begin::App Main-->
|
|
<main class="app-main">
|
|
<!--begin::App Content Header-->
|
|
<div class="app-content-header">
|
|
<!--begin::Container-->
|
|
<div class="container-fluid">
|
|
<!--begin::Row-->
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3 class="mb-0">Home</h3>
|
|
</div>
|
|
</div>
|
|
<!--end::Row-->
|
|
</div>
|
|
<!--end::Container-->
|
|
</div>
|
|
<!--end::App Content Header-->
|
|
<!--begin::App Content-->
|
|
<div class="app-content">
|
|
<!--begin::Container-->
|
|
<div class="container-fluid">
|
|
<!--begin::Row-->
|
|
<div class="row">
|
|
<!-- Start col -->
|
|
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 d-flex align-items-stretch">
|
|
<div class="card p-0 mb-4" style="width:100%">
|
|
<div class="card-header pb-0 pt-1">
|
|
<h3 class="card-title">Home</h3>
|
|
<div class="card-tools">
|
|
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pb-1">
|
|
<div lass="img-overlay-wrap">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<defs>
|
|
<g id="floorBtn">
|
|
<path fill="transparent" stroke-width="4"
|
|
d="M 99.86386438745993 22.00011880076356 A 50 50 0 1 0 100 22" />
|
|
</g>
|
|
<g id="heater" filter="url(#shadow)" transform="translate(1.5,1),scale(0.2,0.2)" fill="#993311" stroke="#FF2211">
|
|
<path clip-path="M-22 2.24h42V22h-42z"
|
|
d="M16.543 8.028c-.023 1.503-.523 3.538-2.867 4.327.734-1.746.846-3.417.326-4.979-.695-2.097-3.014-3.735-4.557-4.627-.527-.306-1.203.074-1.193.683.02 1.112-.318 2.737-1.959 4.378C4.107 9.994 3 12.251 3 14.517 3 17.362 5 21 9 21c-4.041-4.041-1-7.483-1-7.483C8.846 19.431 12.988 21 15 21c1.711 0 5-1.25 5-6.448 0-3.133-1.332-5.511-2.385-6.899-.347-.458-1.064-.198-1.072.375" />
|
|
</g>
|
|
<g id="buffer" filter="url(#shadow)" transform="translate(18,1),scale(0.3,0.3)" fill="#ffffff">
|
|
<path d="M5 12.5a1.5 1.5 0 1 1-2-1.415V2.5a.5.5 0 0 1 1 0v8.585A1.5 1.5 0 0 1 5 12.5"/>
|
|
<path d="M1 2.5a2.5 2.5 0 0 1 5 0v7.55a3.5 3.5 0 1 1-5 0zM3.5 1A1.5 1.5 0 0 0 2 2.5v7.987l-.167.15a2.5 2.5 0 1 0 3.333 0L5 10.486V2.5A1.5 1.5 0 0 0 3.5 1m5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5m4.243 1.757a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 1 1-.708-.708l.708-.707a.5.5 0 0 1 .707 0M8 5.5a.5.5 0 0 1 .5-.5 3 3 0 1 1 0 6 .5.5 0 0 1 0-1 2 2 0 0 0 0-4 .5.5 0 0 1-.5-.5M12.5 8a.5.5 0 0 1 .5-.5h1a.5.5 0 1 1 0 1h-1a.5.5 0 0 1-.5-.5m-1.172 2.828a.5.5 0 0 1 .708 0l.707.708a.5.5 0 0 1-.707.707l-.708-.707a.5.5 0 0 1 0-.708M8.5 12a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5"/>
|
|
</g>
|
|
</defs>
|
|
<g>
|
|
<?php
|
|
/*
|
|
* Ein Bild je Etage, dazu fuer jede Etage eine Blende.
|
|
* Ausgeschrieben waren das bei drei Etagen neun Zeilen
|
|
* und bei vier schon sechzehn - und jede neue Etage
|
|
* haette alle anderen mit angefasst.
|
|
*
|
|
* floorsWithPlan() liefert nur Etagen, deren Raeume
|
|
* Koordinaten haben. Eine Etage ohne angeklickte
|
|
* Kachelpositionen taucht hier also gar nicht erst auf.
|
|
*/
|
|
$etagen = floorsWithPlan();
|
|
?>
|
|
<?php /* Von unten nach oben gestapelt, wie bisher: waehrend der Blende
|
|
sind zwei Bilder gleichzeitig halb sichtbar, und dann soll das
|
|
obere Geschoss obenauf liegen. */ ?>
|
|
<?php foreach (array_reverse($etagen) as $etage): ?>
|
|
<g id="<?= $etage ?>img" <?php if ($_GET["floor"] != $etage) echo "opacity='0'"; ?> >
|
|
<?php foreach ($etagen as $andere): ?>
|
|
<animate begin="<?= $andere ?>.click" attributetype="CSS" attributeName="opacity"
|
|
to=<?= $andere === $etage ? "1.0" : "0.0" ?> dur="0.7s"
|
|
repeatCount="1" calcMode="spline" keyTimes="0;1" keySplines=".1,0,.27,1" fill="freeze" />
|
|
<?php endforeach; ?>
|
|
<image href="assets/img/<?= $etage ?>.png" height="100%" width="100%" x=0 y=0 />
|
|
</g>
|
|
<?php endforeach; ?>
|
|
<?php
|
|
/*
|
|
* Der Kreis ist 50 hoch und sitzt 11 unter der Oberkante
|
|
* seiner Gruppe. Bei drei Etagen bleibt es bei den
|
|
* gewohnten 100 Einheiten Abstand; ab der vierten ruecken
|
|
* sie zusammen, sonst faellt die unterste aus der 300
|
|
* hohen viewBox heraus.
|
|
*/
|
|
$abstand = count($etagen) > 1
|
|
? min(100, (295 - 61) / (count($etagen) - 1))
|
|
: 0;
|
|
// Von Hand mittig gerueckt, je nach Breite der Buchstaben.
|
|
$textX = ["OG" => 62, "EG" => 64, "UG" => 63, "AG" => 62];
|
|
?>
|
|
<?php foreach ($etagen as $i => $etage): ?>
|
|
<g id="<?= $etage ?>" onclick="switchFloor('<?= $etage ?>')" cursor="pointer"
|
|
transform="translate(0,<?= round($i * $abstand, 1) ?>), scale(0.50,0.50)">
|
|
<animate id="show<?= $etage ?>" begin=click attributetype="CSS" attributeName="opacity"
|
|
from=0 to=1 dur="0.1s" repeatCount="1" calcMode="spline" keyTimes="0;1"
|
|
keySplines=".1,0,.27,1" fill="freeze"></animate>
|
|
<use href="#floorBtn" stroke="#aa7713" />
|
|
<text fill="#aa7713" style="font: 3em sans-serif;"
|
|
transform="translate(<?= $textX[$etage] ?? 62 ?>,90)"><?= $etage ?></text>
|
|
</g>
|
|
<?php endforeach; ?>
|
|
<?php foreach (floorsWithPlan() as $floor): ?>
|
|
<g id="<?= $floor ?>_Info" <?php if ($floor != "OG") echo 'opacity="0" '; ?><?php if($_GET["floor"] != $floor){echo "display='none'";} ?> >
|
|
<?php foreach (array_map("mitWerten", roomsOnFloor($floor)) as $room): ?>
|
|
<?php
|
|
/*
|
|
* Grundlinien je nach Anzahl der Werte. Die Kachel ist 19 hoch; mit
|
|
* drei Werten sind es dieselben Zeilen wie eh und je (klein, gross,
|
|
* klein), mit weniger ruecken sie in die Mitte.
|
|
*/
|
|
$zeilen = [1 => [12], 2 => [9, 16], 3 => [5, 11.5, 16.5]];
|
|
$y = $zeilen[count($room["werte"])] ?? [];
|
|
?>
|
|
<g transform="translate(<?= $room["x"] ?>,<?= $room["y"] ?>)" onclick="openHeaterSettings('<?= $floor ?>_<?= $room["mqtt"] ?>');" cursor="pointer">
|
|
<rect width="24" height="19" rx="5" fill="#0006" />
|
|
<?php if ($room["heizung"]): ?>
|
|
<use id="<?= $floor ?>_<?= $room["id"] ?>_heater" href="#heater" display="none" />
|
|
<use id="<?= $floor ?>_<?= $room["id"] ?>_buffer" href="#buffer" display="none" />
|
|
<?php endif; ?>
|
|
<text fill="#fff" style="font: 4px sans-serif;">
|
|
<?php if (!$room["werte"]): ?>
|
|
<?php
|
|
/*
|
|
* Kein Messwert: die Kachel traegt ihren Namen und oeffnet den Raum.
|
|
* Ein leeres Rechteck saehe aus wie ein Fehler.
|
|
*
|
|
* Lange Namen brechen am letzten Leerzeichen um. Die Kachel ist 24
|
|
* Einheiten breit, und "Terrasse OG" stand einzeilig links und rechts
|
|
* darueber hinaus. Aufgefallen ist das erst mit dem Aussengelaende:
|
|
* dort besteht jeder Raumname aus zwei Woertern.
|
|
*/
|
|
$luecke = strrpos($room["mqtt"], " ");
|
|
$teile = (strlen($room["mqtt"]) > 8 && $luecke !== false)
|
|
? [substr($room["mqtt"], 0, $luecke), substr($room["mqtt"], $luecke + 1)]
|
|
: [$room["mqtt"]];
|
|
$namenszeilen = count($teile) === 2 ? [9, 15.5] : [11.5];
|
|
?>
|
|
<?php foreach ($teile as $i => $teil): ?>
|
|
<tspan x="12" y="<?= $namenszeilen[$i] ?>" font-size="1.2em" text-anchor="middle"><?= htmlspecialchars($teil) ?></tspan>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
<?php foreach ($room["werte"] as $i => $wert): ?>
|
|
<!-- Der Platzhalter ist nur ein Strich: bevor der
|
|
erste Wert da ist, soll hier keine Einheit
|
|
stehen, die vielleicht gar nicht passt. -->
|
|
<tspan id="<?= $floor ?>_w<?= $i ?>_<?= $room["id"] ?>" x="12" y="<?= $y[$i] ?>"
|
|
<?= empty($wert["gross"]) ? "" : 'font-size="1.6em"' ?> text-anchor="middle">–</tspan>
|
|
<?php endforeach; ?>
|
|
</text>
|
|
</g>
|
|
<?php endforeach; ?>
|
|
</g>
|
|
<?php endforeach; ?>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 d-flex align-items-stretch">
|
|
<div class="card p-0 mb-4" style="width:100%">
|
|
<div class="card-header pb-0 pt-1">
|
|
<h3 class="card-title">Automatismen</h3>
|
|
<div class="card-tools">
|
|
<!-- Zuordnung Geraet -> Raum: sie ordnet die Geraeteliste im
|
|
Editor nach Raeumen statt nach Geraeteart. -->
|
|
<button type="button" class="btn btn-tool" title="Geräte den Räumen zuordnen"
|
|
onclick="openRoomModal()">
|
|
<i class="bi bi-house-gear"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card-body pb-1">
|
|
<div class="card-header p-0 pt-1">
|
|
<ul class="nav nav-tabs" id="actions-tab" role="tablist">
|
|
<?php foreach ($floors as $etage): $offen = $_GET["floor"] == $etage; ?>
|
|
<li class="nav-item">
|
|
<a class="nav-link <?php if ($offen) echo "active"; ?>" id="actions-<?= $etage ?>-tab"
|
|
href="#actions-<?= $etage ?>" onclick="switchTab('actions-<?= $etage ?>')"
|
|
title="<?= htmlspecialchars(floorLabel($etage)) ?>"
|
|
aria-controls="actions-<?= $etage ?>" aria-selected="<?= $offen ? "true" : "false" ?>"><?= $etage ?></a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
<div class="tab-content" id="actions-tabContent">
|
|
<?php foreach ($floors as $etage): ?>
|
|
<div class="tab-pane fade <?php if ($_GET["floor"] == $etage) echo "active show"; ?>"
|
|
id="actions-<?= $etage ?>" role="tabpanel" aria-labelledby="actions-<?= $etage ?>-tab">
|
|
<!-- Inhalt kommt aus ajax/AutoAction.php?action=list, gefuellt von
|
|
refreshAutomations() in js/solar/autoActionFuncs.js -->
|
|
<div id="actions-<?= $etage ?>-list">Wird geladen...</div>
|
|
<button type="button" class="btn btn-success" title="Neue Automatik"
|
|
onclick="openAutoActionModal('?action=editor&floor=<?= $etage ?>')"><i class="bi bi-plus-square"></i></button>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.Start col -->
|
|
</div>
|
|
|
|
<!-- /.row (main row) -->
|
|
</div>
|
|
<!--end::Container-->
|
|
</div>
|
|
<!--end::App Content-->
|
|
</main>
|
|
<!--end::App Main-->
|
|
|
|
<script>
|
|
// Raumtabelle aus restricted/rooms.php - homeMQTT.js aktualisiert darueber
|
|
// die SVG-Kacheln, ohne die Raeume noch einmal aufzufuehren. In "werte"
|
|
// steht, welche Messwerte eine Kachel zeigt; homeTopics sind die Zweige,
|
|
// die der Browser dafuer beim Broker anmelden muss.
|
|
const homeRooms = <?= json_encode(roomsWithTile(), JSON_UNESCAPED_UNICODE) ?>;
|
|
const homeTopics = <?= json_encode(tileTopics(), JSON_UNESCAPED_UNICODE) ?>;
|
|
<?php if ($_GET["floor"] != "OG" && in_array($_GET["floor"], floorsWithPlan())): ?>
|
|
document.addEventListener('readystatechange', function () {
|
|
if (event.target.readyState === 'complete') {
|
|
switchFloor('<?= $_GET["floor"] ?>');
|
|
}
|
|
});
|
|
<?php endif; ?>
|
|
</script>
|