admin/Smart-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Strassenmarkierung massstaeblich statt Baumreihe

Browse Source 
Die Baumkronen neben der Fahrbahn sahen aus wie Erbsen und nicht wie eine
Allee - sie sind raus. Stattdessen ist die Markierung jetzt richtig.

Massstab: der Wagen ist 4,65 m lang und misst im Bild 488 Einheiten, eine
Einheit ist also knapp ein Zentimeter (105 je Meter). Danach richten sich
alle Masse:

  rechts  Fahrbahnbegrenzung, durchgezogen
  links   Leitlinie, 6 m Strich auf 12 m Luecke (630 auf 1260 Einheiten)
  beide   0,12 m breit, also 12,6 Einheiten

Der Strich ist damit laenger als das Bild hoch ist, und zwischen zwei
Strichen liegt mehr als eine Bildhoehe - genau so sieht eine Landstrasse aus
dem Auto auch aus. Sichtbar ist eine Markierung dadurch etwa zwei Drittel der
Zeit.

Die Geschwindigkeit ist ebenfalls abgeleitet und nicht geraten: 875 Einheiten
je Sekunde sind gut 30 km/h. Der Fahrtwind laeuft jetzt genauso schnell - ein
Streifen, der die Fahrbahnmarkierung ueberholt, faellt sofort auf.

Nicht massstaeblich bleibt die Breite der Fahrbahn: neben dem Wagen sind
zwanzig Zentimeter Platz statt der drei Viertel Meter einer echten Spur.
Dafuer muesste das Fahrzeug halb so gross gezeichnet werden, und darum geht
es auf dieser Kachel nicht.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
admin
2026-09-09 18:57:55 +02:00
co-authored by Claude Opus 5
parent b0596721fa
commit b7c2bc82c7
2 changed files with 50 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/solar.css
+25 -41
View File
@@ -1132,19 +1132,16 @@ input[type='range']::-webkit-slider-runnable-track {
} }
/* --- Strasse ------------------------------------------------------------ /* --- Strasse ------------------------------------------------------------
Sichtbar nur waehrend der Fahrt. Sie traegt die eigentliche Bewegung: der Sichtbar nur waehrend der Fahrt, und sie traegt die eigentliche Bewegung.
Belag dunkelt die Flaeche ab, die Markierungen laufen in den Randstreifen
neben den Raedern, die Baeume ziehen aussen vorbei.
Beide Schleifen sind so gebaut, dass sie sich selbst treffen: die Striche Die Masse stehen im SVG und stammen von der echten Strasse: 0,12 m
wandern um eine Strich-Lueckenlaenge (26 + 20 = 46), die Baumreihen um Strichbreite, 6 m Strich auf 12 m Luecke, rechts durchgezogen. Hier bleibt
ihren Abstand (160). Nach einem Durchlauf steht das Muster wieder wie die Bewegung: eine Umdrehung ist eine Strich-Lueckenlaenge (1890
zuvor - deshalb sieht man keinen Sprung. Einheiten), in 2,16 s - das sind 875 Einheiten je Sekunde oder gut 30 km/h
bei einem Massstab von 105 Einheiten je Meter.
Alle drei laufen mit derselben Geschwindigkeit von rund 180 Einheiten je Nur die Leitlinie laeuft. Die durchgezogene Linie hat nichts, woran man
Sekunde: Markierungen und Baeume gehoeren zur selben Landschaft, und ein Bewegung saehe - genau wie in echt. */
Baum, der langsamer zurueckbleibt als der Strich daneben, faellt sofort
auf. */
.skoda-auto .strasse { display: none; } .skoda-auto .strasse { display: none; }
.skoda-auto.faehrt .strasse { display: block; } .skoda-auto.faehrt .strasse { display: block; }
@@ -1152,30 +1149,19 @@ input[type='range']::-webkit-slider-runnable-track {
fill: rgba(8, 10, 12, 0.35); fill: rgba(8, 10, 12, 0.35);
} }
.skoda-auto .strasse .markierung line { .skoda-auto .strasse line {
stroke: rgba(232, 237, 233, 0.35); stroke: rgba(232, 237, 233, 0.42);
stroke-width: 3; stroke-width: 12.6; /* 0,12 m */
stroke-dasharray: 26 20;
animation: skoda-markierung 0.26s linear infinite;
} }
.skoda-auto .strasse .baum { .skoda-auto .strasse .leitlinie {
fill: rgba(96, 140, 104, 0.55); stroke-dasharray: 630 1260; /* 6 m Strich, 12 m Luecke */
stroke: rgba(52, 84, 60, 0.7); animation: skoda-leitlinie 2.16s linear infinite;
stroke-width: 1.2;
} }
.skoda-auto .strasse .baumreihe { animation: skoda-baeume 0.9s linear infinite; }
/* Die rechte Reihe etwas langsamer und mit Vorlauf - sonst stehen sich die
Baeume paarweise gegenueber. */
.skoda-auto .strasse .rechts { animation-duration: 1.05s; animation-delay: -0.4s; }
@keyframes skoda-markierung { @keyframes skoda-leitlinie {
from { transform: translateY(0); } from { transform: translateY(0); }
to { transform: translateY(46px); } to { transform: translateY(1890px); }
}
@keyframes skoda-baeume {
from { transform: translateY(0); }
to { transform: translateY(160px); }
} }
/* --- Fahrtwind ---------------------------------------------------------- /* --- Fahrtwind ----------------------------------------------------------
@@ -1199,12 +1185,11 @@ input[type='range']::-webkit-slider-runnable-track {
stroke-linecap: round; stroke-linecap: round;
animation: skoda-fahrtwind 1.1s linear infinite; animation: skoda-fahrtwind 1.1s linear infinite;
} }
/* Vier Spuren, jede mit eigenem Takt und Vorlauf. Der Wind zieht etwa /* Vier Spuren, jede mit eigenem Takt und Vorlauf. Sie laufen so schnell wie
anderthalbmal so schnell wie die Landschaft: schneller, weil Luft ueber den die Strasse darunter - ein Streifen, der die Fahrbahnmarkierung ueberholt,
Wagen streicht, aber nicht so viel schneller, dass die beiden Bewegungen faellt sofort auf. */
auseinanderfallen. */ .skoda-auto .fahrtwind .b1 { animation-duration: 0.78s; animation-delay: -0.30s; opacity: .5; }
.skoda-auto .fahrtwind .b1 { animation-duration: 2.40s; animation-delay: -0.30s; opacity: .5; } .skoda-auto .fahrtwind .b6 { animation-duration: 0.86s; animation-delay: -0.55s; opacity: .5; }
.skoda-auto .fahrtwind .b6 { animation-duration: 2.60s; animation-delay: -1.70s; opacity: .5; }
/* Ueber dem Fahrzeug: heller, duenner, durchsichtiger. Der Wind zieht ueber /* Ueber dem Fahrzeug: heller, duenner, durchsichtiger. Der Wind zieht ueber
das Blech hinweg - er soll sich darauf legen, nicht hineinschneiden. Die das Blech hinweg - er soll sich darauf legen, nicht hineinschneiden. Die
@@ -1214,8 +1199,8 @@ input[type='range']::-webkit-slider-runnable-track {
stroke: rgba(232, 237, 233, 0.85); stroke: rgba(232, 237, 233, 0.85);
stroke-width: 3; stroke-width: 3;
} }
.skoda-auto .fahrtwind .b7 { animation-duration: 2.30s; animation-delay: -0.60s; opacity: .34; } .skoda-auto .fahrtwind .b7 { animation-duration: 0.74s; animation-delay: -0.20s; opacity: .34; }
.skoda-auto .fahrtwind .b10 { animation-duration: 2.70s; animation-delay: -1.20s; opacity: .34; } .skoda-auto .fahrtwind .b10 { animation-duration: 0.82s; animation-delay: -0.45s; opacity: .34; }
@keyframes skoda-fahrtwind { @keyframes skoda-fahrtwind {
from { transform: translateY(0); } from { transform: translateY(0); }
@@ -1231,10 +1216,9 @@ input[type='range']::-webkit-slider-runnable-track {
transform: translateY(250px); transform: translateY(250px);
opacity: .45; opacity: .45;
} }
/* Strasse und Baeume bleiben stehen - zu sehen ist dann eine Standaufnahme /* Auch die Leitlinie bleibt stehen - zu sehen ist dann eine Standaufnahme
statt einer Fahrt, und das Abzeichen "unterwegs" sagt den Rest. */ statt einer Fahrt, und das Abzeichen "unterwegs" sagt den Rest. */
.skoda-auto .strasse .markierung line, .skoda-auto .strasse .leitlinie {
.skoda-auto .strasse .baumreihe {
animation: none; animation: none;
} }
} }
restricted/skoda.php
+25 -27
View File
@@ -113,36 +113,34 @@
<!-- Die Straße, über die der Wagen fährt. Ganz zuerst <!-- Die Straße, über die der Wagen fährt. Ganz zuerst
gezeichnet, damit alles andere darauf liegt. gezeichnet, damit alles andere darauf liegt.
Der Belag deckt die ganze Zeichenfläche, die Markiert wie eine deutsche Landstraße und maßstäblich
Fahrbahnmarkierungen laufen in den beiden Randstreifen zum Fahrzeug: der Wagen ist 4,65 m lang und misst hier
neben den Rädern - dort ist Platz, ohne dem Fahrzeug 488 Einheiten, eine Einheit ist also knapp ein
ins Bild zu geraten. Die Striche wandern um genau eine Zentimeter (105 Einheiten je Meter).
Strich-Lücke-Länge; danach steht das Muster wieder so
da wie zuvor, und die Schleife ist unsichtbar.
Dasselbe bei den Bäumen: ihr Abstand ist der Weg einer rechts Fahrbahnbegrenzung, durchgezogen
Umdrehung. Die beiden Reihen laufen versetzt und links Leitlinie, 6 m Strich auf 12 m Lücke
verschieden schnell, sonst fährt man durch eine Allee (630 und 1260 Einheiten)
aus Zwillingen. --> beide 0,12 m breit, also 12,6 Einheiten
Der Strich ist damit länger als das Bild hoch ist -
genau so sieht es aus dem Auto auch aus. Sichtbar ist
eine Markierung dadurch etwa zwei Drittel der Zeit.
Nicht maßstäblich ist die Breite der Fahrbahn: neben
dem Wagen bleiben zwanzig Zentimeter Platz statt der
drei Viertel Meter einer echten Spur. Dafür müsste das
Fahrzeug halb so groß gezeichnet werden, und darum
geht es auf dieser Kachel nicht.
Die Leitlinie wandert um genau eine Strich-Lücken-
Länge (1890); danach steht das Muster wieder so da wie
zuvor, und die Schleife ist unsichtbar. Bei 875
Einheiten je Sekunde entspricht das gut 30 km/h. -->
<g class="strasse" aria-hidden="true"> <g class="strasse" aria-hidden="true">
<rect class="belag" x="-16" y="-8" width="256" height="516"/> <rect class="belag" x="-16" y="-8" width="256" height="516"/>
<g class="markierung"> <line class="leitlinie" x1="-6" y1="-1900" x2="-6" y2="2400"/>
<line x1="-2" y1="-60" x2="-2" y2="560"/> <line class="begrenzung" x1="230" y1="-8" x2="230" y2="508"/>
<line x1="226" y1="-60" x2="226" y2="560"/>
</g>
<g class="baumreihe links">
<circle class="baum" cx="-9" cy="-100" r="6.5"/>
<circle class="baum" cx="-8" cy="60" r="5.5"/>
<circle class="baum" cx="-9" cy="220" r="6.5"/>
<circle class="baum" cx="-8" cy="380" r="6"/>
<circle class="baum" cx="-9" cy="540" r="6.5"/>
</g>
<g class="baumreihe rechts">
<circle class="baum" cx="233" cy="-20" r="6"/>
<circle class="baum" cx="233" cy="140" r="6.5"/>
<circle class="baum" cx="232" cy="300" r="5.5"/>
<circle class="baum" cx="234" cy="460" r="6.5"/>
</g>
</g> </g>
<!-- Fahrtwind: zeigt an, dass das Fahrzeug gerade rollt. <!-- Fahrtwind: zeigt an, dass das Fahrzeug gerade rollt.