ist ein open polygon nur mit CSS /HTML möglich?

[TS]

Hello,

ich habe nun schon dutzende Seiten im Web durch, leider ohne Erfolg.
Mit PHP gibt es in der gd-lib die Funktion imageopenpolygon().

Mit CSS/HTML kann man wunderschöne Formen zeichnen. Aber ob man auch einen (offenen) Linienzug erstellen kann, kann ich nicht finden.

Ich möchte ausdrücklich kein SVG und kein Canvas benutzen.

Glück Auf
Tom vom Berg

[Gunnar Bittersmann]

@@TS

ich habe nun schon dutzende Seiten im Web durch, leider ohne Erfolg.
Mit PHP gibt es in der gd-lib die Funktion imageopenpolygon().

Mit CSS/HTML kann man wunderschöne Formen zeichnen.

Klar kann man das das. Du legst eine Tabelle mit – sagen wir 600 Zeilen und 400 Spalten – an, machst jede Spalte 1 Pixel breit, jede Zeile 1 Pixel hoch, gibst jeder Zelle die gewünschte Farbe – fertig ist die Rastergrafik. Aber ob das sinnvoll ist?

Aber ob man auch einen (offenen) Linienzug erstellen kann, kann ich nicht finden.

Ich möchte ausdrücklich kein SVG und kein Canvas benutzen.

Du willst in die CSSBattle einsteigen?

LLAP 🖖

[TS]

Hello,

☆rarara☆

das geht auch mit gefüllten Divs oder spans, die man mit Position:absolute o.ä. platziert. Ich fragte aber ausdrücklich nach Open Polygon oder ähnlichen Lösungen.

Ich interpretiere deine Antwort nun so, dass es nicht geht. Schade eigentlich!

Glück Auf
Tom vom Berg

[Gunnar Bittersmann]

@@TS

das geht auch mit gefüllten Divs oder spans, die man mit Position:absolute o.ä. platziert.

Ja, wenn du’s noch aufwändiger willst …

Ich fragte aber ausdrücklich nach Open Polygon oder ähnlichen Lösungen.

Wenn du die Farben der einzelnen Tabellenzellen (nennen wir sie „Pixel“) nicht mit Zettel und Stift ermitteln willst, kann du den Bresenham-Algorithmus in JavaScript oder PHP implementieren.

600 × 400 Pixel-Elemente^[1] im DOM ist aber schon heftig. Zum Zeichen eignen sich die Techniken, die du ausschließt: SVG und Canvas. Du bist die Begründung für den Ausschluss schuldig geblieben.

LLAP 🖖

---

1. rekursives Akronym ↩︎

[TS]

Hello,

Ich fragte aber ausdrücklich nach Open Polygon oder ähnlichen Lösungen.

Wenn du die Farben der einzelnen Tabellenzellen (nennen wir sie „Pixel“) nicht mit Zettel und Stift ermitteln willst, kann du den Bresenham-Algorithmus in JavaScript oder PHP implementieren.

Die Messpunkte selber sind doch kein Problem, sondern die Verbindungslinien dazwischen. Für die Messpunkte selber ist die Version mit den Spans durchaus praktikabel.

Glück Auf
Tom vom Berg

[JürgenB]

Hallo Tom,

vor ca. 15 Jahren habe ich mir eine auf DIV-Suppe basierende Grafikbibliothek gebastelt. Das geht, aber das Löschen von einigen 10.000 Divs beim Verlassen der Seite dauert schon einige Sekunden.

Ich habe mir dann bei leidlicher Unterstützung eine canvas-basierende Bibliothek programmiert und vor ca. 3 Jahren den DIV-Suppen-Generator entsorgt.

Gruß
Jürgen

[Gunnar Bittersmann]

@@TS

Die Messpunkte selber sind doch kein Problem

Messpunkte? Ah, du willst ein Liniendiagramm. Sag das doch gleich, nicht sowas wie „open polygon“.

sondern die Verbindungslinien dazwischen.

Sind auch nicht so’n Problem. Ein HTML-Element für eine Verbindungslinie, die man mit linear-gradient hinbekommt. djr deutete es an.

☞ Ich hab da mal was gebastelt.

Die n − 1 Elemente (bei n Messpunkten) werden per JavaScript generiert. Ansonsten tut das Script kaum mehr als die Argumente (Zeitpunkte t) und Messwerte (x) in custom properties zu schreiben und Minimum und Maximum der Argumente und Messwerte zu ermitteln. Die Berechnung der Position erfolgt dann im CSS, bspw:

	left: calc(
		var(--width) * (var(--t1) - var(--tmin)) / (var(--tmax) - var(--tmin))
	);

Obwohl, doch: bei der Darstellung kann man nicht die „obere“ Kante unter die „untere“ legen und darauf spekulieren, dass die Box trotzdem angezeigt wird, nur halt auf dem Kopf stehend. Deshalb bekommen die Elemente eine Klasse "up", "down" bzw. "const" verpasst, über welche die Richtung des Gradienten geregelt wird.

Bei konstantem Verlauf fallen obere und untere Kante zusammen. Damit vom Strich was zu sehen ist, bekommt die Box negativen margin. Um eine halbwegs durchgehende Linie zu erreichen, bekommen die "up"- und "down"-Boxen den auch.

Dadurch wird der Anstieg der Linie leicht verfälscht. Man müsste die Werte für horizontalen und vertikalen Abstand aus dem Anstieg berechenen – aber das wäre dann schon höhere Schule.

Die Beschriftung des Diagramms überlasse ich dir. Das Beispiel zeigt den vorhergesagten Temperaturverlauf für hier und heute.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

☞ Ich hab da mal was gebastelt.

[…] das Script [tut] kaum mehr als die Messwerte in custom properties zu schreiben und Minimum und Maximum der Argumente (Zeitpnkte t) und Messwerte (x) zu ermitteln. Die Berechnung der Position erfolgt dann im CSS, bspw:

	left: calc(
		var(--width) * (var(--t1) - var(--tmin)) / (var(--tmax) - var(--tmin))
	);

Ein gutes Beispiel für die sinnvolle Verwendung von custom properties.

Wenn man die Berechnung der Werte von left, right, top und bottom mit JavaScript machen würde, müsste man entweder von fester Höhe und Breite des Diagramms ausgehen; hätte es also nicht responsiv. Oder man müsste auf das resize-Event lauschen und bei Änderung der Viewportgröße gegebenenfalls alles neu berechnen.

Ein Haufen Aufwand, den man sich sparen kann, wenn man die Berechnung dort tätigt, wo es angebracht ist: per CSS.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Minimum und Maximum der Argumente und Messwerte zu ermitteln.

Das war ein bisschen unsinnig. Wenn das Array nicht chronologisch sortiert ist, dann muss man es zur Erstellung des Diagramms sowieso sortieren. Oder man kann gleich davon ausgehen, dass das Array chronologisch sortiert ist.

Beim sortierten Array ist das Mininum der Argumente (der Zeitpunkte t) im ersten Arrayelement zu finden und das Maximum im letzten. Man muss in der Schleife nur Minimum und Maximum der Messwerte x ermitteln.

Ich habe den Pen angepasst.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Minimum und Maximum der Argumente und Messwerte zu ermitteln.

Das war ein bisschen unsinnig. Wenn das Array nicht chronologisch sortiert ist, dann muss man es zur Erstellung des Diagramms sowieso sortieren. Oder man kann gleich davon ausgehen, dass das Array chronologisch sortiert ist.

in deinem Beispiel (Temperatur gegen Zeit) ist das so, aber die Wertepaare können ja auch die Koordinaten einer Rundwanderung sein.

Gruß
Jürgen

[TS]

Hello,

Minimum und Maximum der Argumente und Messwerte zu ermitteln.

Das war ein bisschen unsinnig. Wenn das Array nicht chronologisch sortiert ist, dann muss man es zur Erstellung des Diagramms sowieso sortieren. Oder man kann gleich davon ausgehen, dass das Array chronologisch sortiert ist.

in deinem Beispiel (Temperatur gegen Zeit) ist das so, aber die Wertepaare können ja auch die Koordinaten einer Rundwanderung sein.

☆grins☆
Die Begehrlichkeiten wachsen meistens mit fortschreitender Entwicklung :-P

Glück Auf
Tom vom Berg

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ein HTML-Element für eine Verbindungslinie, die man mit linear-gradient hinbekommt.

Und dann fiel mir dieses Posting wieder in die Hände.

Aber wenn man schon SVG bemüht, dann kann man es gleich richtig tun und das ganze Diagramm mit SVG zeichnen.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

600 × 400 Pixel-Elemente^[1]

Wieso ist das ein rekursives Akronym?

Bis demnächst
Matthias

---

1. rekursives Akronym ↩︎

[Gunnar Bittersmann]

@@Matthias Apsel

600 × 400 Pixel-Elemente

Wieso ist das ein rekursives Akronym?

Was heißt denn das „el“ in „Pixel“? 😏

Aber ja, es ist kein echtes.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wieso ist das ein rekursives Akronym?

Was heißt denn das „el“ in „Pixel“? 😏

Aber ja, es ist kein echtes.

In meinen Augen ist es nicht mal ein Akronym, bloß eine Wortneuschöpfung.

Bis demnächst
Matthias

[djr]

Mit CSS […] einen (offenen) Linienzug erstellen

Idee 1: eine Form basteln deren Farbe die des Hintergrunds ist & dem Wrapper-Element ein filter: drop-shadow() geben.

Idee 2: Mehrere positionierte Hintergrundbilder die je eine, mit linear-gradient() erstellte, Linie zeigen kombinieren.

[djr]

Zu Idee 2:

DEMO: https://codepen.io/anon/pen/QRqaQw

html {
  background-repeat: no-repeat;
  background-size: 100px 100px;
  
  background-image: 
    linear-gradient(-45deg, transparent 49px, red 49px, red 51px, transparent 51px),
    linear-gradient(45deg, transparent 49px, blue 49px, blue 51px, transparent 51px),
    linear-gradient(180deg, transparent 98px, green 98px);

  background-position: 150px 0px,
    10px 0px,
    80px 0px;
}

[Gunnar Bittersmann]

@@djr

    linear-gradient(-45deg, transparent 49px, red 49px, red 51px, transparent 51px),

Die Wiederholung der Farben ist nicht notwendig und die der color stops auch nicht. ☞ dieses Posting und das darauf folgende.

LLAP 🖖

[Gunnar Bittersmann]

@@djr

    linear-gradient(-45deg, transparent 49px, red 49px, red 51px, transparent 51px)

Wenn man bei allen Anstiegswinkeln gleiche Strichstärke haben will (will man!), wird da so nichts, AFAIS. Man muss die color stops berechnen: Mitte plus/minus halbe Strichbreite:

	linear-gradient(
		to right bottom,
		transparent calc(50% - var(--stroke-width) / 2,
		red 0 calc(50% + var(--stroke-width) / 2,
		transparent 0
	)

LLAP 🖖

[djr]

Idee 3: wie Idee 1 nur die Form mit clip-path: polygon() erzeugen.

• Tipp: https://bennettfeely.com/clippy/
• DEMO: https://codepen.io/anon/pen/PvJEbX

[TS]

Hello,

Idee 3: wie Idee 1 nur die Form mit clip-path: polygon() erzeugen.

• Tipp: https://bennettfeely.com/clippy/
• DEMO: https://codepen.io/anon/pen/PvJEbX

Ja, so wollte ich es ja.
Nun verstehe ich aber nicht, warum das Polygon offen ist.

Glück Auf
Tom vom Berg

[djr]

Nun verstehe ich aber nicht, warum das Polygon offen ist.

Das schwarze "offene Polygon" ist nur der Schatten des geschlossenen weißen Polygons auf weißem Hintergrund.

[djr]

Nachteil des Schattens: die Linie variiert in ihrer Breite.

Besser ist da Idee 2.

[TS]

Hello,

ich hatte noch daran gedacht, mit gedrehten Objekten zu arbeiten und z. B. die Kanten eines plattgedrückten divs zu benutzen. Aber es ist ziemlich schwer, die beiden Enden der entstehenden Linie auf die Messpunkte zu positionieren.

Ich hatte da vor längerer Zeit schon mal ein Beispiel gebastelt, aber das liegt auf dem PC zuhause ☆schnüff☆.

Glück Auf
Tom vom Berg

[JürgenB]

Hallo Tom,

Messpunkte

warum muss es unbedingt html/css sein. Im Wiki haben wir etwas in svg und in canvas:

https://wiki.selfhtml.org/wiki/SVG/Tutorials/Funktionsplotter

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Funktionsplotter

Gruß
Jürgen

[TS]

Hello,

wenn ich das richtig sehe, könnte ich mit dem Beispiel mit moveto zum Ziel kommen.

Tom vom Berg

[JürgenB]

Hallo Tom,

… Beispiel mit moveto …

also willst du das Diagramm auf dem Server erstellen?

Gruß
Jürgen

[TS]

Hello,

April, April ... ;-)
Da war wohl beim Verlinken 'was schief gegangen.

Glück Auf
Tom vom Berg

[Gunnar Bittersmann]

@@TS

wenn ich das richtig sehe, könnte ich mit dem Beispiel mit moveto zum Ziel kommen.

Das siehst du falsch. Das hattest du nämlich ausdrücklich ausgeschlossen.

LLAP 🖖

[TS]

Hello,

wenn ich das richtig sehe, könnte ich mit dem Beispiel mit moveto zum Ziel kommen.

Das siehst du falsch. Das hattest du nämlich ausdrücklich ausgeschlossen.

Ja, weil keinesfalls JS benutzt werden darf.

Wenn es mit CSS/HTML only nun wirklich nicht ohne Krampf geht und SVG einfach bleibt, kann man nochmal darüber nachdenken. Anderenfalls bleibt die Serverlösung mit PHP und imageopenpolygon().

Jetzf war die (weiterentwickelte) Frage, ob LineTo aus dem Abschnitt MoveTo dann überhaupt richtig sein könnte?

Glück Auf
Tom vom Berg

[Gunnar Bittersmann]

@@TS

wenn ich das richtig sehe, könnte ich mit dem Beispiel mit moveto zum Ziel kommen.

Das siehst du falsch. Das hattest du nämlich ausdrücklich ausgeschlossen.

Ja, weil keinesfalls JS benutzt werden darf.

Da liegst du schon wieder falsch. JavaScript darf benutzt werden, denn das hattest du nicht ausdrücklich ausgeschlossen.

Wenn es mit CSS/HTML only nun wirklich nicht ohne Krampf geht und SVG einfach bleibt, kann man nochmal darüber nachdenken.

Ja, das solltest du wirklich endlich mal tun: nachdenken! Es macht nämlich den Anschein, du kippst hier völlig unausgogerenen Kram ins Forum. Du gehst nicht auf Rückfragen ein; dafür änderst du ständig die Anforderungen. So wird das nichts hier.

LLAP 🖖

[TS]

Hello,

wenn die Sache schon ausgegoren wäre, müsste ich keine Fragen mehr stellen.

Und nun benimm dich, wie es einem intelligenten Menschen gerecht wird!

Glück Auf
Tom vom Berg

[Camping_RIDER]

Aloha ;)

wenn die Sache schon ausgegoren wäre, müsste ich keine Fragen mehr stellen.

Wenn die Restriktionen, welche Technologien benutzt werden dürfen und welche nicht, noch nicht ausgegoren sind, warum gibst du sie dann dem Anschein nach fest vor, anstatt einfach mitzuteilen, welche Überlegung hinter diesen Restriktionen steht, worum du ja auch schon explizit gebeten wurdest?

Und nun benimm dich, wie es einem intelligenten Menschen gerecht wird!

Du unterstellst, dass sich Gunnar bewusst dumm stellt. Das lese ich aus seinem Posting nicht heraus.

Was ich allerdings herauslese ist ein gewisser Unwille, sich in dieser Frage zu engagieren, solange du noch nicht klargemacht hast, wo du hinwillst und was denn überhaupt tatsächlich die Randbedingungen sind, die dein Problem besitzt.

Insofern hat er hier, natürlich so, wie es einem intelligenten Menschen gerecht wird, eine Aufforderung an dich formuliert, dein Problem klar zu umreißen oder wenigstens die Bedingungen klar mitzuteilen und nicht vom einen auf das andere Posting zu ändern. Falls Technologien wie Canvas+SVG oder auch JavaScript nur unerwünscht sind (aus zu nennenden Gründen) und nicht komplett undenkbar, kann man das ja auch so ausdrücken (gerne auch mit einer kurzen Erklärung, welche der möglichen Technologien dann Vorzug genießen soll und warum).

Damit wäre den Antwortern sehr geholfen, weil sie dann nicht mehr so viel im Nebel rumstochern müssen wie sie es gerade jetzt notgedrungen tun, weil deine Bedingungen gar nicht klar sind und man mit einer Antwort buchstäblich raten muss, was du eigentlich im Endeffekt haben willst.

Grüße,

RIDER

[JürgenB]

Hallo Tom,

ich finde auch, du solltest erst mal aufschreiben, was du willst. Dein Ziel ist bestimmt keine javascriptfreie Polylinie. Danach kann man dann abschätzen, welche Technik geeignet ist. Dann wäre es auch noch gut zu wissen, warum bestimmte Techniken ausgeschlossen werden sollen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@TS

Ja, weil keinesfalls JS benutzt werden darf.

Warum nicht? Und wie kriegst du deine Messdaten und das Template (Markup) zusammen? PHP?

[…] und SVG einfach bleibt, kann man nochmal darüber nachdenken.

Da du trotz wiederholter Nachfrage keine andere Begründung geliefert hat, nehme ich die plausibelste an: für den Ausschluss von SVG (oder canvas) gibt es keinen technischen Grund. Du hast dich nur noch nicht mit dieser Technik beschäftigt und verspürst auch weiterhin keine Lust, das zu tun, obwohl das für deine Zwecke das einzig sinnvolle ist.

Natürlich ist SVG einfach. Im einfachsten Fall sparst du sogar die Transformation der Werte (t, x(t)) in den Bereich (0, Breite des Diagramms) bzw. (0, Höhe des Diagramms) und setzt stattdessen viewBox entsprechend.

Jetzf war die (weiterentwickelte) Frage, ob LineTo aus dem Abschnitt MoveTo dann überhaupt richtig sein könnte?

Ja. Ein Liniendiagramm machst du in SVG am besten mit path. Da brauchst du am Anfang ein M und die Linien zeichnest du mit L (wobei man das L im Code auch weglassen kann). Hier steckt schon die Überlegung drin, dass für diesen Zweck L vermutlich zielführender ist als l.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Natürlich ist SVG einfach. Im einfachsten Fall sparst du sogar die Transformation der Werte (t, x(t)) in den Bereich (0, Breite des Diagramms) bzw. (0, Höhe des Diagramms) und setzt stattdessen viewBox entsprechend.

zumal es für Messdiagramme schon fertige Lösungen gibt.

Ja. Ein Liniendiagramm machst du in SVG am besten mit path. …

In meiner Plot-Bibliothek habe ich mich hier für polyline entschieden. Gibt es einen Grund, warum man path polyline vorziehen sollte?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

zumal es für Messdiagramme schon fertige Lösungen gibt.

Wie D3.js.

In meiner Plot-Bibliothek habe ich mich hier für polyline entschieden. Gibt es einen Grund, warum man path polyline vorziehen sollte?

[in der Stimme von Frau Suhrbier] Nein, ich sehe keinen. Gibt es denn einen?

polyline war bislang hinter meinem Horizont. Aber dahinter [in der Stimme von Udo Lindenberg] geht’s weiter … Danke für die Erweiterung.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

[in der Stimme von Frau Suhrbier] Nein, ich sehe keinen. Gibt es denn einen?

Ich glaube ja, du meinst: mit der Stimme von Frau Tetzlaff, die grade über Frau Suhrbier spricht. Frau Suhrbier war in dieser Serie nie zu sehen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

[in der Stimme von Frau Suhrbier] Nein, ich sehe keinen. Gibt es denn einen?

Ich glaube ja, du meinst: mit der Stimme von Frau Tetzlaff, die grade über Frau Suhrbier spricht. Frau Suhrbier war in dieser Serie nie zu sehen.

Ich glaube, du meinst was anderes. Ich meine Frau Suhrbier.

LLAP 🖖

[Auge]

Hallo

[in der Stimme von Frau Suhrbier] Nein, ich sehe keinen. Gibt es denn einen?

Ich glaube ja, du meinst: mit der Stimme von Frau Tetzlaff, die grade über Frau Suhrbier spricht. Frau Suhrbier war in dieser Serie nie zu sehen.

Soweit ich mich erinnere, war sie mindestens einmal tatsächlich zu sehen. In der Folge, in der sich Alfred mit der Anprobe eines Taucheranzugs auf den Urlaub vorbereitete und, solcherart gekleidet, die Telefonzelle blockierte, weil er einen Anruf erwartete. Dort gab es eine Auseinandersetzung mit Frau Suhrbier (dargestellt von Marie-Luise Marjan (in jung)) um den Zugang zur Telefonzelle.

Tschö, Auge

[TS]

Hello,

für meine privaten Aktivitäten mit dem RasPi habe ich nun auch SVG Polyline benutzt. Dazu werde ich bestimmt später noch Fragen haben.

Für die Aufgabenstellung, für die ich nach reinen HTML/CSS-Lösungen gefragt habe, kommt das leider nicht in Frage.

Die in den Messgeräten verwendeten Microbrowser können kein JavaScript und kein SVG. Ich habe nun interptetiert, dass Canvas daher auch ausscheidet. Darüber habe ich aber bisher keine Rückmeldung.

Gerendert werden aber die Grafikformate JPG, PNG, GIF (animated).

Es wird hier also vermutlich zu einer Servervariante führen. Da habe ich freie Hand. Für die Anzeige von MessPUNKTEN ohne durchgehende Linienverbindung könnte auch meine alte <span>-Lösung noch Verwendung finden.

Es ist nicht nur der Funktionsumfang des Microbrowsers stark eingeschränkt, sondern auch der ihm zur Verfügung gestellte Arbeitsspeicher.

Vielen Dank also an Diejenigen, die sich meiner ursprünglichen Frage ernsthaft angenommen haben.

Glück Auf
Tom vom Berg

[JürgenB]

Hallo Tom,

Die in den Messgeräten verwendeten Microbrowser können kein JavaScript und kein SVG.

willst du am Messgerät surfen, oder für wen ist die Grafik? Anzeige der Werte von anderen Geräten?

Ich habe nun interptetiert, dass Canvas daher auch ausscheidet. Darüber habe ich aber bisher keine Rückmeldung.

Ja, canvas ist ein JavaScript-API.

Gruß
Jürgen

[TS]

Hello,

Die in den Messgeräten verwendeten Microbrowser können kein JavaScript und kein SVG.

willst du am Messgerät surfen, oder für wen ist die Grafik? Anzeige der Werte von anderen Geräten?

Ja, es handelt sich um embedded diagnotic devices, die lokale Daten anzeigen können, aber auch "nach Hause" surfen können. Das Benutzerinterface bildet ein Touch-Display mit Microbrowser.

Glückauf Tom

[TS]

Hello @Gunnar Bittersmann,

eine erste Antwort auf das Warum findest Du schon mal im Posting.

Wenn der Browser SVG unterstützt, finde ich SVG auch bequem. Die Daten (Punktepaare) werden auf dem Server zusammengestellt und verursachen nuf weing Traffic im Vergleich zu fertigen Bildern (z. B. JPG, PNG, GIF).

Dass ich Dich persönlich sehr schätze, weißt Du hoffentlich. Trotzdem finde deine Antworten oft zu übergriffig und damit oft auch oft zu persönlich. Es geht mir aber immer nur um die (nachgefragte) Sache.

Daran ändern dann auch die Triaden von @Camping_RIDER nichts mehr.

Glück Auf
Tom vom Berg

[Gunnar Bittersmann]

@@TS

eine erste Antwort auf das Warum findest Du schon mal im Posting.

Hättest du das gleich am Anfang gesagt, hättest du dir einigen Ärger erspart. Du bist doch nicht zum ersten Mal hier.

Daran ändern dann auch die Triaden von @Camping_RIDER nichts mehr.

Und wenn du nicht aufhörst zu stänkern, kriegste noch mehr Ärger.

LLAP 🖖

[Camping_RIDER]

Aloha ;)

Daran ändern dann auch die Triaden von @Camping_RIDER nichts mehr.

Meinst du die hier?

(-(-(-(-(-(-.-)-)-)-)-)-)

Oder meintest du vielleicht doch eher die Tirade?

Mensch, Mensch. Erst zu einem persönlichen Angriff ausholen und dann auch noch danebenschlagen.

Gemessen an den Reaktionen auf deinen Beitrag und den Reaktionen auf meinen Beitrag solltest du dich außerdem vielleicht fragen, welcher davon die Tirade war. Das aber nur am Rande, das willst du sowieso nicht hören. Genauso wenig wie du hören willst, dass ich dich, falls da überhaupt ein Angriff drinnen war, nur auf genau der Ebene gepackt habe, auf der du Gunnar angequatscht hast. Komischerweise scheinen für dich in deinem Verständnis andere Regeln zu gelten als für andere. Das ist schade.

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

wenn ich das richtig sehe, könnte ich mit dem Beispiel mit moveto zum Ziel kommen.

Im ersten drüberlesen dachte ich doch tatsächlich, moveto (lies: mowehto) wäre der Name eines besonders fancy-en Frameworks oder so.

Es lebe der (Upper) CamelCase.

Grüße,

RIDER

[TS]

Hello,

für meinen RasPi habe ich mit PHP(Server) und SVG(Client) das erste Chart gebastelt.
Fehlt noch eine sinnvolle Beschriftung. Problem: auch die muss mitwandern....

Temperaturdaten

Glück Auf
Tom vom Berg

[Camping_RIDER]

Aloha ;)

Fehlt noch eine sinnvolle Beschriftung. Problem: auch die muss mitwandern....

Temperaturdaten

Kannst du das genauer umreißen, inwiefern das ein Problem ist? Grundsätzlich kann SVG ja Text.

Grüße,

RIDER

[TS]

Hello Twix,

Fehlt noch eine sinnvolle Beschriftung. Problem: auch die muss mitwandern....

Temperaturdaten

Kannst du das genauer umreißen, inwiefern das ein Problem ist? Grundsätzlich kann SVG ja Text.

Hab ich jetzt nicht sooo die Zeit dafür, da ich immer noch am Konzept für die embedded Systeme schreibe und mit Internetanschluss hier leider nur mein Tablet habe. Damit habe ich auch das gante Graphenwork erstellt; ssh und vim ☆☆stolz auf mich :-)☆☆

Deshalb nur kurz:
es werden immer die letzten 36 Stunden der Messung angezeigt. Die Kurve wandert also aller fünf Minuten nach links. Die Stundenlinien müssen passend beschriftet werden. Aber das ist ja noch nicht die ganze Arbeit.

Jedenfalls würde ich ab ca. Anfang Juni gerne den RasPi-Blog hier beginnen, wie schon mit @Matthias Scharwies gepostet und nach und nach derartige Aufgaben beschreiben und die Teilschritte mit den jeweiligen Kapiteln im Wiki verlinken.

Bei über 20.000.000 RasPis sollten da durchaus einige Leute Fragen haben.

Habe aber schon gemerkt, dass das Wiki oft noch zu profibezogen einsteigt in die Kapitel und die kleinen gemeinen Fragen (und die Antworten darauf) unterschlägt. Und sachliche Fehler fallen dann auch erst auf, wenn man selber mal einige Aufgabenstellungen wie ein Dummy in Angriff nimmt (Beispiel: viewBox und Koordinatensysteme).

Glück Auf
Tom vom Berg

[Camping_RIDER]

Aloha ;)

Deshalb nur kurz:
es werden immer die letzten 36 Stunden der Messung angezeigt. Die Kurve wandert also aller fünf Minuten nach links. Die Stundenlinien müssen passend beschriftet werden. Aber das ist ja noch nicht die ganze Arbeit.

Dann kommt es ein wenig drauf an, ob du das "live" anpassen willst, oder ob das erst nach einem Reload der Seite geschehen soll.

Ausgehend von letzterer Möglichkeit sollte es eigentlich kein allzu großes Problem sein, die entsprechenden Beschriftungen mit den eben verlinkten Methoden dort ins SVG zu bekommen; die Koordinaten hast du ja quasi von den Gitterlinien quasi schon vorliegen.

Bei live-Anpassung muss man das ein wenig anders gestalten - wobei es auch da die einfachste Möglichkeit sein könnte, das ganze SVG einfach neu zeichnen zu lassen.

Grüße,

RIDER

[JürgenB]

Hallo,

da die SVG ja vom Server generiert wird, bleibt nur Neuzeichnen bei Reload.

Gruß
Jürgen

[Camping_RIDER]

Aloha ;)

da die SVG ja vom Server generiert wird, bleibt nur Neuzeichnen bei Reload.

Stimmt. Ich dachte kurz daran, dass man ja auch nach initialem Generieren auch noch zeitabhängig manipulieren könnte, aber man hat ja die neuen Daten gar nicht zur Verfügung und nach dem, wie ich das Verstehe, auch keinen Kanal zur Hand, um die einzeln abzugreifen. Damit hast du wohl Recht.

Grüße,

RIDER

[TS]

Hello,

kann ich in die Kurvendarstellung per HTML/CSS/SVG auf einfache Weise einen Tooltipp o. ä. einbauen, der mir beim Zeigen auf einen Punkt der Kurve die Werte anzeigt, und zwar wieder zurückgerechnet uf Temperatur und Zeit? Oder benötige ich dafür dann JavaScript?

Das konfigurieren der Styles mit CSS, statt SVG-Attributen muss ich ja sowieso noch vornehmen.

Glück Auf
Tom vom Berg

[JürgenB]

Hallo Tom,

sieh dir mal das hier an: https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen

Gruß
Jürgen

[TS]

Hello Jürgen,

sieh dir mal das hier an: https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen

Danke für den Link. Ist mir aber prinzipiell klar, dass man darüber nachdenken sollte. Allerdings muss ich vorher noch verifizieten, welche Vorgehensweise "hampelnde Darstellungen" zur Folge haben könnte und welche ein hampelfreies Rendering begünstigt.

Bei langsamen Netzen und/oder schwachen Clients ist das nämlich bei HTML/CSS + AJAX manchmal extrem unangenehm. Man kann aber meistens mit predictivem HTML gegensteuern. Wenn z.B. Platzreservierungen für nachgeladene Inhalte bereits im HTML vorgenommen wurden...

Meine Hauptfrage richtete sich aber auf die Tooltipps bzw. Detaildatenfensterchen, die ich gerne beim Zeigen auf die Kurve hätte…

So richtig kann ich mich aber sowieso erst ab Anfang Juni darum kümmern. Im Moment sammele ich eher die Ideen und Tipps dafür.

Ich bin so langsam bei der Stelle angekommen, bei der eine Ideenumsetzung auf dem Tablet lästig wird, weil zu unübersichtlich. Der Desktop hat eben doch seine Berechtigung ;-)

Glück Auf
Tom vom Berg

[JürgenB]

Hallo Tom,

was meinst du mit „hampelnd“? Und warum soll was beim Öffnen eines Tooltips hampeln?

Du hast gerade Ajax erwähnt, ist JavaScript jetzt doch eine Option?

Steht eine Maus zur Verfügung? Oder ein Touch? Oder eine Tastatur?

Gruß
Jürgen

[TS]

Hello,

was meinst du mit „hampelnd“? Und warum soll was beim Öffnen eines Tooltips hampeln?

Es hampelt nicht beim Tooltipp, sondern beim Laden der Seite durch HTML-Auswertung, nachgeladene Sekundärelemente und nacheilendes CSS und das endgültige Rendering der Seite.

Du hast gerade Ajax erwähnt, ist JavaScript jetzt doch eine Option?

Wenn auch noch AJAX im Spiel ist, ist der Effekt oft besonders unangenehm. Ich vermeide JavaScript und damit AJAX wo immer ich kann, zumindest zum primären Laden von Dokumenten.

Steht eine Maus zur Verfügung? Oder ein Touch? Oder eine Tastatur?

Das entscheidet der Besucher und nicht ich.

Aber man darf wohl für 99 der normalen Browsernutzer annehmen, dass entweder Maus oder Touchdisplay zur Verfügung steht.

Dieser Teil des Threads bezrifft nur meine persönlichen Spielereien mit dem RasPi und der grafischen Darstellung von Messergebnissen. Bevor ich mit Kanonen, wie Grafana schieße, möcjte ich erst eigene Gehversuche from scratch machen.

Das OP bezieht sich hingegen auf meine Aufgabe, schlanke Lösungen für Microbrowser von embedded Systems zu finden. Die können kein JS und kein SVG.

Glück Auf
Tom vom Berg

[Gunnar Bittersmann]

@@djr

Idee 3: wie Idee 1 nur die Form mit clip-path: polygon() erzeugen.

Da hab ich mich dann auch mal dran versucht. Als Flächendiagramm OK, aber als Liniendiagramm?

Der Hack mit dem filter: drop-shadow() für body ist nicht das Gelbe vom Ei, zum einen wegen der unterschiedlichen Strichstärken. Zum anderen wirkt der Filter auf alles, auch auf den Text. Da müsste man ein zusätzliches Container-Element für das Diagramm vorsehen, meh.

LLAP 🖖