PHP PHP oder JS Script für Koordinatensysteme

[gaunt]

Hi
für ein privates Projekt suche ich für die klassische PHP/Javascript/Ajax Combo ein Script das mir bei dem Umgang mit Koordinatensystemen hilft. Ich müsste min. folgendes hinbekommen:

-Der User gibt die Grenzen für X und Y an.
-Das Backend liefert den ersten (0,0) und den letzten (x>0,0) Punkt.
-Anhand dieser Info wird ein Koordinatensystem gezeichnet.
-Wird die Maus über das Koordinatensystem bewegt werden die x und y Werte angezeigt.
-Erfolgt ein Klick werden die Koordinaten ans Backend übergeben.
-Von links nach rechts (also X) werden die gesetzten Punkte über Geraden verbunden. Die Funktion der Gerade liefert mir "interpolierte" Zwischenpunkte.
-Das Backend bekommt spätestens am Ende die Punkte und Geraden, prüft Plausibilität, und modifiziert die "Zeichnung"

Sicherlich kann man das auch selber Programmieren. Da es aber nur für ein kleines Privates Projekt geht möchte ich den Aufwand reduzieren und hoffe irgendjemand kennt gute Scripte die ich vielleicht addaptieren kann. Meinetwegen kann das gesamte Koordinatensystem auch in Java Script abgebildet sein. Wichtig ist das ich die Daten ins Backend bekomme und vom Backend aus das Koordinatensystem auch modifizieren kann. Im idealfall einfach über ajax.

Kennt jemand fertige Plugins die ich ggf verwenden könnte?

 

[kling1]

mach doch einfach eine tabelle mit x spalten und y zeilen.. dann im td ein data-y und ein data-x mit den koordinaten und das dann bei klick übertragen

 

[gaunt]

Das ganze mit ner Tabelle zu faken wäre für die Grundfunktionen durchaus möglich (die reinen Berechnungen könnte ich auch komplett ohne Darstellung machen), aber nicht wirklich komfortabel. Ich denk mal drüber nach, aber eigentlich wäre mir ein richtiges grafisches Koordinatensystem lieber. Zumal ich nach den Berechnungen da einiges an Kurven einzeichnen möchte (optional).

 

[Yuuri]

Ohne jetzt groß mit alle denen gearbeitet zu haben... Sollte sowas nicht jede Charting Lib mit nen normalen Koordinatensystem hinbekommen? Vertreter wären da chart.js, dygraphs, D3.js, morris.js, sigma.js, ... Events sollte freilich jedes unterstützen, die Frage ist, was du draus machst.

 

[gaunt]

Sollte sowas nicht jede Charting Lib mit nen normalen Koordinatensystem hinbekommen?

Keine Ahnung. Deswegen frag ich ja;-) Ich hab schon lange nix mehr mit Diagrammen gemacht.

Chart js sieht gut aus... Und da steht auch was von "interactive". Wenn damit auch die Clicks ins Diagramm gemeint sind dann müsste das schon gehen. Naja, im allerschlimmsten Fall mache ich die Eingaben in Textform, berechne die Kurven im Backend und lass das Chart sie nur ausgeben.

Hast du oder sonst wer schonmal mit Chart JS gearbeitet?

 

[trialgod]

Wieso willst du das im Backend berechnen? Die Zeichnung ist doch quasi die "berechnung". Alles was das Backend braucht wären die Punkte oder ggf. die Funktionen, den Rest muss doch das Frontend machen (bzw. das, was auch die Zeichnung des Koordinatensystems übernimmt).

 

[Yuuri]

Hast du oder sonst wer schonmal mit Chart JS gearbeitet?

Mit chart.js ja, aber nur zur Anzeige von Balken und ohne Koordinatensystem und Interaktion. Wenn du x/y positiv/negativ machst, kommt bestimmt ein brauchbares Koordinatensystem heraus. Einfach mal ein wenig recherchieren, Dokus lesen und ausprobieren. Ein paar Vertreter hab ich dir ja genannt, da lässt sich bestimmt was brauchbares finden. Ist ja nicht allzu großes Neuland sowas.

 

[gaunt]

Wieso willst du das im Backend berechnen? Die Zeichnung ist doch quasi die "berechnung"

Ne, nicht wirklich. Die Zeichnung dient nur der Illustration um das ganze passabel darstellen zu können und dem Benutzer ggf. eine vereinfachte Eingabe zu ermöglichen. Das was der Benutzer aber als Kurve eingibt muss rel. aufwändig gegen diverse Regeln geprüft werden. Und diese Regeln kennt garrantiert keine Chart Bibliothek.
Der User wird mit hoher Wahrscheinlichkeit oft gegen das Regelwerk verstoßen. Also müssen nach der Prüfung verbesserte Vorschläge angeboten werden. Aus diesen soll der User einen Validen auswählen, diesen weiter verfeinern und unrealistische Anapssungen korrigieren/ablehnen. Könnte hier mit Ajax gearbeitet werden (z.B. Punkte der Kurve können per Drag 'n Drop verschoben werden) könnte ich Fehleingaben bereits wärend der Eingabe monieren und evtl. korrigieren.
Der letzte von Computer und User akzeptierte Vorschlag muss dann gegen eine Handvoll abweichender Profile geprüft werden. Danach müssen ggf. Änderungen an den Profilen oder der Kurve vorgeschlagen werden. Ist die Kurve grün und kollidiert auch nicht mit den Profilen soll es einen Export geben.

Wie du siehst, das Chart ist zwar schon Hilfreich. Aber nur Mittel zum Zweck. Das eigentlich komplizierte wird im Backend passieren und vermutlich schon mehr wie genug Zeit und Nerven kosten. Genau deshalb will ich mich auch nicht ewig mit den Charts rummschlagen sondern suche was, dass ich weitestgehend Out of the Box nutzen kann.

Ist ja nicht allzu großes Neuland sowas.

Nö, im Prinzip nicht. Nur das mit dem Interaktionen im Chart selber habe ich (zumindest bewusst) im Internet noch nicht gesehen. Wie du ja auch schreibst nutzen die meisten Charts nur für die Ausgabe, nicht aber für eine interaktive Eingabe. Aber ich glaube Chart js sieht von den genannten noch am besten aus. Zumindest bei einem flüchtigen Blick in die Doku.

 

[trialgod]

Das mag ja korrekt sein, allerdings musst du doch dann keine Interpolationen berechnen. Wie soll das gehen, wenn es unendlich "interpolierte" Punkte gibt. D.h. letzten Endes geht es doch um die "Berechnung" der Validität und das sollte doch "einfach nur" Mathematik sein. Die Validierung kann einfach über AJAX gehen, das ist korrekt. Wenn die Validierung jedoch positiv ist, erfolgt die Berechnung der Interpolation dennoch im Frontend.

Und: gibt er überhaupt eine Kurve ein, oder nur Punkte die dann zu einer Kurve werden sollen?

Ich bin nicht die gebildetste Person, was die Mathematik dazu angeht. Ich weiß aber wie Daten geliefert und ausgewertet werden. Und es ist unmöglich die Geraden bzw. Kurven im Backend zu berechnen und dann im Frontend zu zeichnen. Dann musst du die Zeichnung auch im Backend erstellen lassen.

Was spricht dagegen die einzelne Validierung/Berechnung auch im Frontend zu machen und dann bei endgültiger Bestätigung im Backend nochmal das Gesamtpaket zu validieren und dann nur anzunehmen/abzulehnen.

 

[gaunt]

Und: gibt er überhaupt eine Kurve ein, oder nur Punkte die dann zu einer Kurve werden sollen?

Im Prinzip gibt er wahlos Punkte an. Nur die verbindenden Geraden erzeugen dann eine Funktion, welche mir nochmehr interpolierte Punkte liefert, sodass ich eine Treppe berechen kann.

Ich wollte es eigentlich weglassen damits nicht zu kompliziert wird. Das ganze soll ein Planer für Tauchgänge werden.
Du gibts also an, nach welcher Zeit du welche Tiefe erreicht hast. Also z.B.:
nach 2min 10m
nach 4min 20m
nach 6min 30m
nach 25min immer noch 30m
dann zum auftauchen nach 35min auf 20m
nach 45min auf 10m und
nach 55min bist du wieder auf 0m.
Ein erfahrener Taucher würde z.B. darann schon sehen dass du die Nullzeitgrenze reißt. Jetzt müsstest du aus einem Nullzeit einen Deko Tauchgang machen, und in die Auftauchphase mit Deko Stops versehen oder die Zeit auf 30m verkürzen.
Um die Sättigung der verschiedenen Gewebetypen mit Stickstoff zu berechnen müsste ich die vom User angegebene "Kurve" in winzige Treppen schneiden und jede Stufe durch einen Algorithmus schicken. Dadurch werden auf und abtauchen im Gegensatz z.B. zum RDP mit bewertet, sodass aus dem o.g. Tauchgang vielleicht gerade so doch ein Nullzeittauchgang wird.
Das wäre ein Teil der Regeln die ich angesprochen habe.
Danach muss das ganze mit dem Luftvorrat abgeglichen werden. Ich selber habe bei nem normalen Tauchgang ein AMV von ~15l/min was ganz passabel ist. Mit einer 15l Flasche und 230bar würde ich o.g. Tauchgang vermutlich gerade so ohne Reserve schaffen. Standardmäßig würde mit einem AMV von 25l/min gerechnet, dann wäre die Reserve definitv weg. Anfänger (oder einfach ein Muskelbepackter Hektiker) könnte sogar leicht auf 30l/min oder nochmehr kommen. Also no Chance. Ne ziehrliche erfahrene Taucherinn dagegen braucht vielleicht nur 8l/min, käme also fast zweimal durch, der wäre aber die Flasche vermutlich zu schwer. Sie würde also "nur" eine 10L Flasche nehmen. Ich will also Profile von mit Tauchern hinterlegen, und gegen den geplanten Tauchgang abgleichen. Das war der zweite Schritt. Schön wäre es, wenn ich hier Empfehlungen für die Gruppe ausgeben könnte. Also in etwa: Taucher 1 nimmt 1*15L Taucher 2 nimmt 2*12L und Taucherinn 3 1* 10l... So würden dann alle den Tauchgang mit min 50bar Reserve abschließen

Im Idealfall steht dann am Ende ein Export den ich (und jeder der Taucher) mitnehmen kann, auf dem an markanten Punkten steht:
nach 6min, 30m Tiefe erreicht 180bar
nach 15min, immer noch 30m Tiefe bei 140bar
nach 25min, immer noch 30m Tiefe bei 100bar !Aufstieg beginnen!
nach 35min, 20m bei 70bar
nach 45min, 10m bei 45bar
nach 55min, 0m bei 20bar
Wäre also absolut haarscharf wenn mit 200bar gestartet wird, abei 230bar käme ich dagegen mit voller Reserve oben an. Merke ich aber während dem Tauchgang, dass einer der Taucher nach 25min nicht 100 sondern nur 90bar hat, wirds eng, und man sollte zusehen dass man schleunigst nach oben kommt.

Wie man sieht, das Chart dient nur der Visualisierung und ggf. der Dateneingabe. Die Berechnungen (und die sind auch das eigentlich komplizierte) sind im Backend besser aufgehoben, zumal ich hier einfach Profile der Taucher in einer DB ablegen kann, ebenso wie Sättigungskonstanten von Gewebeklassen, alternative Algorithmen und andere Hilfswerte.

 

[trialgod]

Ok sind dann die Vorgebenen Werte Zeit und max. Tiefe? Nur von der Tiefe sind die Dekoschritte abhängig? Oder auch von der Zeit, die ich auf entsprechender Tiefe verbracht habe?

Die Berechnungen gehören meiner Meinung nach wie vor ins Frontend. Die Regeln dafür mögen komplex sein, die sind aber innerhalb kürzester Zeit von einem PC berechnet. Wenn man das wirklich schön "Usable" machen will, würde ich hier nach wie vor alles im Frontend machen. Ich würde z.B. wie gesagt Zeit und Tiefe vorgeben lassen, daraus eine gleichmäßige Kurve incl. der Dekostops zeichnen. Einmal flacher und einmal eine schneller Steigende Kurve, jeweils das Maximum und Minimum der möglichen Grenzen. Zwischen diesen beiden kann man dann neue Fixpunkte auswählen und die beiden Kurven (der "Toleranzbereich") rutschen dadurch weiter zusammen.

Am Ende braucht man nur die Punkte und das Profil des Tauchers speichern. Der Rest wird jeweils Live berechnet und damit auch nachträglich leicht veränderbar.

Das ist aber eine recht aufwendige Sache.

 

[gaunt]

Das ist aber eine recht aufwendige Sache.

Allerdings. Und die Berechnung ist hüben wie drüben gleich aufwändig. Aber im Backend kann ich z.B. einen geplanten Tauchgang in einer DB abspeichern und im nachhinein mit den Daten des Tauchcomputers vergleichen.
Mit hoher Wahrscheinlichkeit wird mein erster Aufschlag nicht optimal sein und muss nach und nach der Realität angepasst werden. Das geht aber nur, wenn ich die Daten sammeln kann. Die Daten bekomme ich von Feunden welche ähnliche Tauchcomputer wie ich selbst verwenden. So brauche ich nur einen einzelnen Importer schreiben. Aber das ist recht einfach.

Ok sind dann die Vorgebenen Werte Zeit und max. Tiefe? Nur von der Tiefe sind die Dekoschritte abhängig? Oder auch von der Zeit, die ich auf entsprechender Tiefe verbracht habe?

Sobald du Druck ausgesetzt bist fängt die Sättigung an. Also auch bei dem 1Bar auf Meereshöhe, da das dein üblicher Normalzustand ist interessiert es normalerweise nicht sonderlich. Je mehr Druck, umsomehr Stickstoff wird gespeichert. Sättigst du dich also auf 30m musst du ihn beim auftauchen langsam abatmen. Tauchst du also gesättigt von 30 auf 20m auf entsättigst du dich, tauchst du von 10 auf die selben 20m runter sättigst du dagegen zusätzlich an. Das ganze ist also ein kontinuierlicher Prozess der von den Tauchcomputern permanent berechnet wird. Je niedirger der Druck, umso leichter kann der Stickstoff ausblubbern. Deshalb kommst du auch nach nem Tauchgang sicher und problemlos an die Oberfläche obwohl du zwischen 1und 4bar gependelt bist. Alles OK, steigst du aber direkt danach in ein Flugzeug, können die 0,2bar weniger Druck im Flieger schon zu einem Problem werden. Deshalb sollst du ja auch 24 Stunden nach dem Tauchen nicht fliegen. Die TC berechnen das etwas genauer.

 

[trialgod]

Allerdings. Und die Berechnung ist hüben wie drüben gleich aufwändig. Aber im Backend kann ich z.B. einen geplanten Tauchgang in einer DB abspeichern und im nachhinein mit den Daten des Tauchcomputers vergleichen.
Mit hoher Wahrscheinlichkeit wird mein erster Aufschlag nicht optimal sein und muss nach und nach der Realität angepasst werden. Das geht aber nur, wenn ich die Daten sammeln kann. Die Daten bekomme ich von Feunden welche ähnliche Tauchcomputer wie ich selbst verwenden. So brauche ich nur einen einzelnen Importer schreiben. Aber das ist recht einfach.

Spricht ja nichts dagegen die Daten über einen Service an das Backend zu übergeben und dann abzuspeichern ;-)

Ich denke im Frontend hast du einfach mehr Möglichkeiten.

Wie würden denn die DB-Tabellen aussehen, in der du die Daten speichern willst? Dann verstehe ich vielleicht auch mehr von der Struktur und kann dir bessere Tips geben.

 

[gaunt]

Ich denke im Frontend hast du einfach mehr Möglichkeiten.

Was soll ich denn im Frontend können was im Backend nicht geht?

Wie würden denn die DB-Tabellen aussehen, in der du die Daten speichern willst? Dann verstehe ich vielleicht auch mehr von der Struktur und kann dir bessere Tips geben.

Das weiß ich noch nicht. Aber mit Datenbanken kenne ich mich halbwegs aus. Da sehe ich nu wirklich keine Probleme.
Ich sehe ein Problem mit dem Frontend, einfach weil ich überhaupt keine Frontendler bin und auch wenig gespür für Design und ähnliches hab. Dann sind die Algorithmen ein Problem. Denn viele moderne sind propritär, patentiert und nicht öffentlich verfügbar. Und zu guter letzt natürlich noch die Optimierungsläufe. Das dürfte das komplizierteste sein.
Das ganze ist auch nichts was man von heute auf morgen macht. Denke mal nen Jahr werd ich brauchen. Muss mich ja auch noch um andere Sachen wie Frau und Kinder kümmern;-)

 

[mambokurt]

Ich weiss nicht ob du da mit Chart gedöhns glücklich wirst, letztendlich hast du das mit genausoviel Aufwand auch in eine Canvas gezeichnet oder als Svg gebaut, musst ja letztendlich nur die Punkte in einem Javascript Array nach X aufsteigend speichern und kannst dann in einer for Schleife über das Array auf die Canvas malen. Das Array als Json gepackt und nach Php geschickt, schon kannst du die Punkte auch speichern.

Mit ein wenig probieren solltest du das in 2-3 Stunden hinbekommen, fies wirds dann wenn es ans drag & drop vorhandener Punkte geht, da wirst du etwas probieren müssen bis es klappt. Aus dem Bach raus würde ich das als Canvas probieren, die bei jeder Änderung neu gezeichnet wird.

 

[gaunt]

Hey, das Canvas ist cool! Ich hab gerade mal ne gute Stunde gebraucht um mir nen Basic Chart zu malen.
Ich nehm nen Array das bei 0,0 startet, klicke ins Canvas füge den Punkt hinzu, sortiere das ganze und Zeichne neu. Fertig:-)
Einfach mal von rechts nach links druchs rote Viereck klicken...
http://the-gaunt.de/dive/canvas_test.html
OK, lässt sich noch optimieren. Aber sowas in der Art habe ich gesucht!

Vielleicht lass ich das mit Drag&Drop. Ich könnte auch einfach an den Punkten Kreise malen und wenn man einen anklickt wird er einfach gelöscht und man fügt einen neuen ein der besser gefällt.