Etagenschalter neu gestalten, Aussengelaende ruecken lassen
Das Rendering des Grundstuecks fuellt seinen Rahmen aus, die drei Geschossbilder haben dagegen breiten schwarzen Rand - deshalb lagen die Etagenschalter nur beim Aussengelaende auf dem Bild. Der Rand gehoert ins Bild und nicht in home.php: dort einzurechnen haette auch OG, EG und UG verschoben, und deren Kacheln sind auf die heutige Lage eingemessen. AG.png bekommt links 114 durchsichtige Punkte, die sieben Kacheln sind mit derselben Abbildung umgerechnet. Die Schalter selbst waren ein duenner Ring in einem Amber (#aa7713), das in css/solar.css nirgends vorkommt - und alle vier sahen immer gleich aus, die aktive Etage war an ihnen nicht zu erkennen. Jetzt tragen sie dieselbe Scheibe wie die Kacheln im Grundriss, die aktive bekommt die Akzentfarbe der Schieberegler (#00788F), und switchFloor() zieht den Zustand mit. Dort classList und nicht die Helfer addClass/removeClass weiter oben: deren "el.className +=" wirkt auf SVG-Elementen nicht, className ist dort schreibgeschuetzt. Ausserdem sind sie kleiner. Mit halber Groesse beherrschten sie die linke Seite, und das Bild musste umso weiter einruecken, um sie freizuhalten - bei 0,38 statt 0,50 bleibt mehr Plan uebrig. Die Groesse steht als eine Zahl in home.php, Abstand und Bildrand folgen daraus. Die Beschriftung sitzt jetzt ueber text-anchor und dominant-baseline im Kreismittelpunkt. Vorher stand je Etage ein von Hand gesuchter Versatz im Markup (62, 63, 64), und jede neue Etage haette einen neuen gebraucht. Weggefallen: die Definition #floorBtn, die nur einmal benutzt wurde, und die Animationen showOG/showEG/showUG, die ein bereits sichtbares Element von 0 auf 1 blendeten. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+27
-20
@@ -38,10 +38,6 @@
|
||||
<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" />
|
||||
@@ -80,27 +76,38 @@
|
||||
<?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.
|
||||
* Groesse der Etagenschalter. Der Kreis ist im eigenen
|
||||
* Koordinatensystem 88 Einheiten breit und reicht von 28
|
||||
* bis 116 unter die Oberkante seiner Gruppe; alles andere
|
||||
* folgt daraus. Sie waren einmal doppelt so gross und
|
||||
* beherrschten damit die linke Seite - und das Bild des
|
||||
* Aussengelaendes musste umso weiter einruecken, um sie
|
||||
* freizuhalten.
|
||||
*/
|
||||
$mass = 0.38;
|
||||
$kreisUnten = 116 * $mass;
|
||||
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
$abstand = count($etagen) > 1
|
||||
? min(100, (295 - 61) / (count($etagen) - 1))
|
||||
? min(100, (295 - $kreisUnten) / (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 id="<?= $etage ?>" class="floorBtn<?= $_GET["floor"] == $etage ? " active" : "" ?>"
|
||||
onclick="switchFloor('<?= $etage ?>')"
|
||||
transform="translate(0,<?= round($i * $abstand, 1) ?>), scale(<?= $mass ?>)">
|
||||
<!-- Die Beschriftung sitzt ueber text-anchor und
|
||||
dominant-baseline im Kreismittelpunkt. Vorher stand
|
||||
je Etage ein von Hand gesuchter Versatz im Markup
|
||||
(62, 63, 64), und eine neue Etage brauchte einen
|
||||
neuen. Aussehen und Zustand stehen in css/solar.css. -->
|
||||
<circle cx="50" cy="72" r="44" />
|
||||
<text x="50" y="72" text-anchor="middle"
|
||||
dominant-baseline="central"><?= $etage ?></text>
|
||||
</g>
|
||||
<?php endforeach; ?>
|
||||
<?php foreach (floorsWithPlan() as $floor): ?>
|
||||
|
||||
Reference in New Issue
Block a user