Aussengelaende als vierte Etage einhaengen
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>
This commit is contained in:
Claude Opus 5
+66
-53
@@ -52,59 +52,57 @@
|
||||
</g>
|
||||
</defs>
|
||||
<g>
|
||||
<g id="UGimg" <?php if($_GET["floor"] != "UG"){echo "opacity='0'";} ?> >
|
||||
<animate begin="UG.click" attributetype="CSS" attributeName="opacity" to=1.0 dur="0.7s"
|
||||
<?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" />
|
||||
<animate begin="EG.click" attributetype="CSS" attributeName="opacity" to=0.0 dur="0.7s"
|
||||
repeatCount="1" calcMode="spline" keyTimes="0;1" keySplines=".1,0,.27,1" fill="freeze" />
|
||||
<animate begin="OG.click" attributetype="CSS" attributeName="opacity" to=0.0 dur="0.7s"
|
||||
repeatCount="1" calcMode="spline" keyTimes="0;1" keySplines=".1,0,.27,1" fill="freeze" />
|
||||
<image href="assets/img/UG.png" height="100%" width="100%" x=0
|
||||
y=0 />
|
||||
<?php endforeach; ?>
|
||||
<image href="assets/img/<?= $etage ?>.png" height="100%" width="100%" x=0 y=0 />
|
||||
</g>
|
||||
<g id="EGimg" <?php if($_GET["floor"] != "EG"){echo "opacity='0'";} ?> >
|
||||
<animate begin="EG.click" attributetype="CSS" attributeName="opacity" to=1.0 dur="0.7s"
|
||||
repeatCount="1" calcMode="spline" keyTimes="0;1" keySplines=".1,0,.27,1" fill="freeze" />
|
||||
<animate begin="OG.click" attributetype="CSS" attributeName="opacity" to=0.0 dur="0.7s"
|
||||
repeatCount="1" calcMode="spline" keyTimes="0;1" keySplines=".1,0,.27,1" fill="freeze" />
|
||||
<animate begin="UG.click" attributetype="CSS" attributeName="opacity" to=0.0 dur="0.7s"
|
||||
repeatCount="1" calcMode="spline" keyTimes="0;1" keySplines=".1,0,.27,1" fill="freeze" />
|
||||
<image href="assets/img/EG.png" height="100%" width="100%" x=0
|
||||
y=0 />
|
||||
|
||||
</g>
|
||||
<g id="OGimg" <?php if($_GET["floor"] != "OG"){echo "opacity='0'";} ?> >
|
||||
<animate begin="OG.click" attributetype="CSS" attributeName="opacity" to=1.0 dur="0.7s"
|
||||
repeatCount="1" calcMode="spline" keyTimes="0;1" keySplines=".1,0,.27,1" fill="freeze" />
|
||||
<animate begin="EG.click" attributetype="CSS" attributeName="opacity" to=0.0 dur="0.7s"
|
||||
repeatCount="1" calcMode="spline" keyTimes="0;1" keySplines=".1,0,.27,1" fill="freeze" />
|
||||
<animate begin="UG.click" attributetype="CSS" attributeName="opacity" to=0.0 dur="0.7s"
|
||||
repeatCount="1" calcMode="spline" keyTimes="0;1" keySplines=".1,0,.27,1" fill="freeze" />
|
||||
<image href="assets/img/OG.png" border="1px solid white" height="100%" width="100%" x=0
|
||||
y=0 />
|
||||
</g>
|
||||
<g id="OG" onclick="switchFloor('OG')" xcursor="pointer" transform="translate(0,0), scale(0.50,0.50)">
|
||||
<animate id="showOG" 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>
|
||||
<?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(62,90)">OG</text>
|
||||
</g>
|
||||
<g id="EG" onclick="switchFloor('EG')" cursor="pointer" transform="translate(0,100), scale(0.50,0.50)">
|
||||
<animate id="showEG" 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(64,90)">EG</text>
|
||||
</g>
|
||||
<g id="UG" onclick="switchFloor('UG')" cursor="pointer" transform="translate(0,200), scale(0.50,0.50)">
|
||||
<animate id="showUG" 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(63,90)">UG</text>
|
||||
<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): ?>
|
||||
@@ -125,10 +123,25 @@
|
||||
<?php endif; ?>
|
||||
<text fill="#fff" style="font: 4px sans-serif;">
|
||||
<?php if (!$room["werte"]): ?>
|
||||
<!-- Kein Messwert: die Kachel traegt ihren Namen und
|
||||
oeffnet den Raum. Ein leeres Rechteck saehe aus
|
||||
wie ein Fehler. -->
|
||||
<tspan x="12" y="11.5" font-size="1.2em" text-anchor="middle"><?= htmlspecialchars($room["mqtt"]) ?></tspan>
|
||||
<?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
|
||||
|
||||
@@ -95,20 +95,20 @@ $rooms = [
|
||||
// Zwei Carports, einer je Wohnpartei - deshalb dieselben Kuerzel wie die
|
||||
// Etagen. Die Wattpilot der EG-Partei steht dagegen in der Garage, siehe
|
||||
// restricted/config.php; am Carport OG haengt der go-e Charger.
|
||||
["floor" => "AG", "mqtt" => "Carport EG", "id" => "carport_eg", "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Carport OG", "id" => "carport_og", "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Carport EG", "id" => "carport_eg", "x" => 156, "y" => 214, "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Carport OG", "id" => "carport_og", "x" => 38, "y" => 155, "werte" => []],
|
||||
// Veranda und Terrasse gibt es zweimal, je Wohnpartei eine. In der
|
||||
// Draufsicht laege das obere Paar genau auf dem unteren - deshalb die
|
||||
// Schraegsicht, siehe restricted/aussenplan.php.
|
||||
["floor" => "AG", "mqtt" => "Veranda EG", "id" => "veranda_eg", "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Veranda OG", "id" => "veranda_og", "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Terrasse EG", "id" => "terrasse_eg", "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Terrasse OG", "id" => "terrasse_og", "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Pergola", "id" => "pergola", "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Garage", "id" => "garage", "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Veranda EG", "id" => "veranda_eg", "x" => 156, "y" => 132, "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Veranda OG", "id" => "veranda_og", "x" => 150, "y" => 92, "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Terrasse EG", "id" => "terrasse_eg", "x" => 212, "y" => 160, "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Terrasse OG", "id" => "terrasse_og", "x" => 205, "y" => 122, "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Pergola", "id" => "pergola", "x" => 339, "y" => 108, "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Garage", "id" => "garage", "x" => 103, "y" => 134, "werte" => []],
|
||||
// Der Garten ist kein Bauteil wie die anderen, aber ein Ort: hier haengen
|
||||
// der Regensensor und die beiden Ventilsteuerungen.
|
||||
["floor" => "AG", "mqtt" => "Garten", "id" => "garten", "werte" => []],
|
||||
["floor" => "AG", "mqtt" => "Garten", "id" => "garten", "x" => 288, "y" => 180, "werte" => []],
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user