pendel/site_builder

Lokales Testen mit einem Webserver

npm install http-server

Installiert nach node_modules. Starten mit:

http-server ./

Struktur

Beispiel, wie Kachel an der gleichen Stelle platziert werden anhand einer einzelnen Spalte.Mit jeder Szene (S1 etc.) kommt eine neue Kachel hinzu (T1 etc.).

		S1	S2	S3	S4
y\x		1	1	1	1
	┌	─	─	─	─	┐
1	│			T1	T3	│
2	│		T1	T3	T2	│
3	│	T1	T2	T2	T4	│
4	│					│
	└	─	─	─	─	┘

• Verdrängte Kacheln werden nach oben geschoben
• Über den Rand geschobene Kacheln werden ausgeblendet

Originaler Eintrag:

<g id="pendeltileid79" 
class="pendel-svg-tile" 
transform="translate(2681.6,1081.6)

Koordinatensystem

(0.0) 
   ┌───────────────────────> x, lon   CANVAS
   │←→                ↑               SPACE (x and y)
   │                  ↓
   │  0───────────────+               TILE
   │  │               │
   │  │  0─────────+  │               IMAGE
   │  │  │         │  │
   │  │  │    0    │  │               Middle
   │  │  │         │  │
   │  │  +─────────+  │
   │  │               │
   │  +───────────────+
   │                    . (xmax,ymax)
   V                            
   y, lat

Json

Das Json enthält die Konstellation der Kacheln-Positionen der einzelnen Szenen. Es werden nicht Pixel-Koordinaten sonderne die Position als Interger-Paar abgelegt. Die Pixel-Koordinate wird zur Laufzeit ermittelt (bessere Lesbarkeit des Jsons, Trenneung von Inhalt und Anzeige).