Guten Tag zusammen,
bin hier noch Nagelneu, buchstäblich mein erster Post.
Da ich gerade nichts zu tun habe (ruhiger Tag auf der Arbeit) mache ich ein wenig Brainstorming zu meinem kleinen Projekt und komm hier gedanklich nicht vorran.
Es geht um eine kleine Webapp, mit der man mittels der Google Maps API Wegpunkte setzen kann und diese werden in einer Datebank abgespeichert, um sie nachher auf einem Kompass darzustellen.
Ich habe gestern mittels dieser Vorlage einen groben Prototypen erstellt, der Koordinaten miteinender vergleicht, wobei einer der Ausgangspunkt ist und dazu in Relation die Richtung zum anderen auf dem Kompass anzeigt. Klar soweit?
Das funktioniert prinzipiell ganz gut und ich bin von der technischen Seite zufrieden, nur die Darstellung ist nicht so das wahre. Mir wäre dafür ein Horizontaler Kompass lieber, da man auch Namen der Wegpunkte besser darstellen könnte.
Meine Idee war zunächst einen Container zu schaffen mit all meinen Infos und ein hübsches Kompassbild im Hintergrund. Mit style.transform und der Option Translate, hätte ich das dann verschoben.
Ich müsste dann eine 1:1 Kopie neben den Container setzen, damit man, wenn man am Rand, ist kein leeres Bild hat. Jedoch vermute ich das der Sprung von 359° auf 0° etwas jumpy wirkt.
Viel einfacher aber nicht so hübsch animiert war meine Idee 90 Textfelder fest darzustellen und diese anhand der Orientierung zu beschriften.
Nicht sehr hübsch aber simpel. Damit wäre auch der Sprung von 359° auf 0° nicht bemerkbar.
Ich habe dann noch lange im Internet gegrast aber nichts gefunden. Da hier aber sicher einige Profis unterwegs sind, könnt ihr mir Amateur bestimmt ein paar Ideen oder Anregungen geben.
Ich brauche nicht explizit Code, das kriege ich hin. Ich suche da eher Ansätze wie man die Darstellung noch angehen könnte.
Ich kann das Ganze erst zuhause testen. Hab vergessen meine Entwicklungsumgebung laufen zu lassen. Vieleicht passt meine Containeridee sogar schon gut, wer weiss?
Ich freue mich jedenfalls über jeden Tipp.
P.S. Ich benutze Node.js als Webserver.