Technische Dokumentation

Formularerfassung

Intern sind 3 Objekte für die Berechnung und die Effekte im Formular zuständig:

  • ofel, hier werden alle Eingabefelder gespeichert.
  • formulas enthält die Formeln für die berechneten Felder.
  • oprop, hierüber wird zur Zeit nur die Eigenschaft "disabled" gesteuert.

Nach jeder Eingabe, Ereignis: onChange, werden die Formeln und Eigenschaften neu berechnet. Im Automatikmodus (Widerholung / Automatisch) wird das SVG neu gezeichnet und die SVG-Elemente (die einzelne Fliese) mittels der Standardklasse "free" klickbar gemacht.

var ofel={};
ofel=gForm2Object(this.form.name);
calc(this.form.name,formulas);
excecuteprop(oprop)
if(ofel['mode_automatic']){
   jsDraw();
   setclickselect();
}

Mit gForm2Object(form) werden die Eingaben in das interne Objekt: ofel übertragen. Mit der Funktion calc werden die Formeln berechnet, die Ergebnisse ins interne Objekt und die Formularfelder geschrieben. Die Funktion excecuteprop(prop) führt "Enabled / Disabeled" an den Eingabefelder durch.

SVG Zeichenfläche

Entgegen dem Schulsystem verläuft die y-Achse im Browser nach unten. Das Koordinatensystem wird zur Zeit noch so verwendet. Eine Transformation wird später ergänzt.

Folgendes sind die wichtigsten Darstellungsbereiche:

  • Zeichenfläche
  • Verlegefläche
  • Fliesen

Zeichenfläche, SVG viewBox

Mittels der üblichen Größenangaben "width" und "height" wird das <SVG> im HTML eingebunden. Diese Angaben beziehen sich auf die Bildschirmpixel. Die Maße in der viewBox="0 0 2000 2000" beziehen sich auf die Maßangaben der SVG-Eelemente. In diesem Beispiel werden alle Elemente zwischen den Koordinatenpunkten 0,0 und 2000,2000 dargestellt. Innerhalb der Funktion onChange wird jsDraw() aufgerufen. Diese Funktion erstellt das SVG.

Verlegefläche

Die Verlegefläche wird zur Zeit als einfaches Rechteck dargestellt. Zum späteren Zeitpunkt ist angedacht diese einfache Methode mit einer ausgeklügelten Flächenerfassung zu ersetzen.

Fliesen

Die einzelne Fliese wird als "symbol" definiert, Funtktion jsCreateSymbol(). Hier wird die Geometrie gespeichert, jedoch keine Farbe. Die Fliesen, werden mittels der Funktion jsDrawSVG gezeichnet. In 2 Schleifen über Spalten und Reihen wird die x-y Koordinate berechnet. Mittels der Methode <g transform="..."> und "use" wird auf das Symbol zugegriffen und es auf den berechneten Platz gesetzt.

SVG-Objekte markieren

Jedes Element (Fliese) wird mit der Klasse "free" und dem Eventlistener "onClick" versehen. Über den Hoover Effekt (mittels opacity) wird die Fliese unter der Maus hervorgehoben. Beim Click Event wird die Klasse "free" gegen "SVGselected" ausgetausscht, bzw. "SVGselected" gegen "free" ausgetauscht. Beim Klick wird auch die Funktion "showPosition()" aufgerufen. Show Position liest aus den Attributen des Elementes die zugehörigen Koordinaten aus und zeigt diese unter dem Panel an. Zu einem späteren Zeipunkt werden diese zum Austausch von Fliesen verwendet.

Ausblick

Bei kleineren Projekten mit einer übersichtlichen Menge von technischen Faktoren, können diese technischen Details bei einer Kontaktaufnahme im Internet schon geklärt werden. Die Faktoren werden abgefragt und technische Größen im Formular berechnet. Kosten können ermittelt werden und direkt auf der Webseite dargestellt werden oder liegen intern für die spätere Kontaktaufnahme bereit. Sobald eine grafische Darstellung für ein Projekt sinnvoll ist, bietet sich, die Verwendung der "SVG scalable vector graphics" an. Teile einer vorgebenen Zeichnung (SVG) werden je nach Angaben hinzugefügt oder weggelassen. Maße werden im richtigen Verhältnis dargestellt. Die passende Skizze für das Kundenprojekt wird automatisch auf der Webseite erstellt.