nicht angemeldet
Dynamische HTML Seite entwerfen --> Geht das überhaupt?
0 Tabellenkalk
0 0 
JürgenB
0 0 0 0 0 2 
Orlok
0
Dynamische HTML Seite entwerfen --> Geht das überhaupt?
Gunnar BittersmannHallo Community, ich hoffe es finden sich unter euch Leute die mir ein paar Anregungen geben können.
Ich möchte beispielsweise folgendes Bild auf einer HTML Website darstellen und dynamisieren.
Wie stelle ich mir die Dynamisierung vor? Zunächst sollen sich beispielsweise die grünen Striche farblich verändern, wenn ein bestimmtes Bit gesetzt wurde. Die Schalter sollen einmal sichtbar sein bzw. unsichtbar wenn bestimmte Bedingungen vorliegen usw.
Nun zu meiner Frage geht sowas überhaupt im Browser? HTML;CSS,JS oder PHP? Ich würde gern ein paar Ideen von euch hören, wie ihr das anstellen würdet so ein Bild auf einer HTML-Seite zu dynamisieren.
Ich hoffe ihr versteht was ich wissen möchte.
-
Hallo,
Nun zu meiner Frage geht sowas überhaupt im Browser?
das sollte möglich sein.
HTML;CSS,JS oder PHP?
Wie wärs mit SVG?
Gruß
Kalk-
-
@@Christian Kruse
Wie wärs mit SVG?
Alternativ: Canvas.
Wohl nicht die beste Alternative.
-
Pixelgrafik, skaliert nicht.
-
Beim Umfärben (was bei SVG lediglich eine Änderung eines Attributwerts/einer CSS-Eigenschaft für ein Element wäre) muss im Canvas alles neu gezeichnet werden.
AFAIS ist SVG hier alternativlos.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar,
- Pixelgrafik, skaliert nicht.
Irrelevant, man zeichnet ja selber. Und die Canvas selber kann durchaus skalieren.
- Beim Umfärben (was bei SVG lediglich eine Änderung eines Attributwerts/einer CSS-Eigenschaft für ein Element wäre) muss im Canvas alles neu gezeichnet werden.
Das ist prinzipiell richtig, aber dafür ist die Canvas Hardware-beschleunigt (und frisst damit viel weniger Akku) und um Klassen weniger Komplex als SVG.
Nein, Canvas wäre hier eine Vernünftige Wahl. Die Abwägung muss stattfinden zwischen den Vor- und Nachteilen:
SVG
- Pro
- Skalierung ist von Haus aus eingebaut
- kann mit CSS gestyled werden
- Kontra
- hohe Komplexität
- Browserunterstützung ist je nach verwendetem Feature immer noch problematisch
- Je nach Verwendung ist es langsam
Canvas
- Pro
- Rattenschnell
- geringe Komplexität
- Kontra
- man muss viel selber implementieren
Gerade der Punkt kann btw eine Menge Arbeit bereiten. Ich habe das mal gemacht für technische Zeichnungen (SVG war hier keine Alternative, aufgrund der Browser-Voraussetzungen), das kann viel Zeit fressen. fabric.js hilft dabei.
LG,
CK-
@@Christian Kruse
- Pixelgrafik, skaliert nicht.
Irrelevant
Alles andere als das.
man zeichnet ja selber.
Ja und? Bei jeder Änderung der Viewportgröße (Drehung des Geräts) immer wieder neu? Bei jedem Rein- und Rauszoomen immer wieder neu?
Das ist prinzipiell richtig, aber dafür ist die Canvas Hardware-beschleunigt (und frisst damit viel weniger Akku)
Ist das so, dass SVG nicht über die GPU läuft? Wenn ja, sollte das in den Browsern gefixt werden.
und um Klassen weniger Komplex als SVG.
Den Gedanken von dir verstehe ich nicht. Bei SVG hat man lesbaren Quelltext; bei entsprechender Formatierung des Codes sieht man die Verschachtelung der Teile.
Bei Canvas hat man JavaScript-Suppe.
SVG
- Pro
-
Verwendung von Web-Technologien: DOM, Event-Handler, CSS, …
-
einfache Erstellung mit Vektorgrafikprogrammen
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar,
man zeichnet ja selber.
Ja und? Bei jeder Änderung der Viewportgröße (Drehung des Geräts) immer wieder neu? Bei jedem Rein- und Rauszoomen immer wieder neu?
Ja und? Canvas kann ohne grössere Probleme mit 60 FPS zeichnen.
Das ist prinzipiell richtig, aber dafür ist die Canvas Hardware-beschleunigt (und frisst damit viel weniger Akku)
Ist das so, dass SVG nicht über die GPU läuft? Wenn ja, sollte das in den Browsern gefixt werden.
Sollte, ja ;-) sehe ich auch so.
und um Klassen weniger Komplex als SVG.
Den Gedanken von dir verstehe ich nicht. Bei SVG hat man lesbaren Quelltext; bei entsprechender Formatierung des Codes sieht man die Verschachtelung der Teile.
Bei Canvas hat man JavaScript-Suppe.
Bei SVG muss man eine komplett neue sehr komplexe Technologie lernen. Bei Canvas nur eine (sehr kleine) neue API.
LG,
CK-
@@Christian Kruse
Ja und? Bei jeder Änderung der Viewportgröße (Drehung des Geräts) immer wieder neu? Bei jedem Rein- und Rauszoomen immer wieder neu?
Ja und? Canvas kann ohne grössere Probleme mit 60 FPS zeichnen.
Warst du nicht der, der Ressourcen (Akku) schonen wollte?
Das ist prinzipiell richtig, aber dafür ist die Canvas Hardware-beschleunigt (und frisst damit viel weniger Akku)
Ja, der warst du. ;-)
Bei SVG muss man eine komplett neue sehr komplexe Technologie lernen.
XML-Syntax. Kennt man von HTML. Und die Komplexität liegt im Auge des Betrachters.
Außerdem muss man gar nichts lernen, wenn man ein Verktorgrafikprogramm verwendet.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar,
Ja und? Bei jeder Änderung der Viewportgröße (Drehung des Geräts) immer wieder neu? Bei jedem Rein- und Rauszoomen immer wieder neu?
Ja und? Canvas kann ohne grössere Probleme mit 60 FPS zeichnen.
Warst du nicht der, der Ressourcen (Akku) schonen wollte?
Ich halte die gelegentlich notwendigen redraws für absolut unproblematisch.
Bei SVG muss man eine komplett neue sehr komplexe Technologie lernen.
XML-Syntax. Kennt man von HTML. Und die Komplexität liegt im Auge des Betrachters.
Dass man XML-Syntax von HTML kennt halte ich für ein Gerücht, aber um die Syntax ging es mir auch nicht.
Außerdem muss man gar nichts lernen, wenn man ein Verktorgrafikprogramm verwendet.
Es geht hier doch darum verschiedene Teile des Bildes zu ändern. Da muss ich zumindest verstehen welche Teile des Bildes jetzt wie verändert werden müssen.
LG,
CK-
@@Christian Kruse
Dass man XML-Syntax von HTML kennt halte ich für ein Gerücht
Schon klar, dass XML nur eine Teilmenge von SGML ist und dass HTML5 gar kein SGML mehr ist. Mir ging es auch eher um das Grundkonzept so mit Elementen, Tags und Attributen.
Außerdem muss man gar nichts lernen, wenn man ein Verktorgrafikprogramm verwendet.
Es geht hier doch darum verschiedene Teile des Bildes zu ändern. Da muss ich zumindest verstehen welche Teile des Bildes jetzt wie verändert werden müssen.
Das allerdings. Aber auch dabei sollte einen ein Verktorgrafikprogramm unterstützen können.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
-
@@Gunnar Bittersmann
SVG
- Pro
- Verwendung von Web-Technologien: DOM, Event-Handler, CSS, …
- media queries
Das macht die Erstellung einer responsiven Grafik (verschiedene levels of detail) einfach.
Bei Canvas würde das woh weitaus mehr Aufwand bedeuten.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
@@Christian Kruse
- Pixelgrafik, skaliert nicht.
Irrelevant, man zeichnet ja selber. Und die Canvas selber kann durchaus skalieren.
In dem Zusammenhang: Mit was für Pixeln rechnet Canvas eigentlich? Sprich: Sind Canvas-Darstellungen auf hochauflösenden Displays scharf oder verpixelt?
SVG war hier keine Alternative, aufgrund der Browser-Voraussetzungen
Welche Browser unterstützen denn Canvas, aber nicht SVG?
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar,
- Pixelgrafik, skaliert nicht.
Irrelevant, man zeichnet ja selber. Und die Canvas selber kann durchaus skalieren.
In dem Zusammenhang: Mit was für Pixeln rechnet Canvas eigentlich? Sprich: Sind Canvas-Darstellungen auf hochauflösenden Displays scharf oder verpixelt?
Kommt drauf an wie man es implementiert. Im Prinzip gilt, dass man das scharf und mit Sausse haben kann.
SVG war hier keine Alternative, aufgrund der Browser-Voraussetzungen
Welche Browser unterstützen denn Canvas, aber nicht SVG?
IE mit Flash-Polyfill.
LG,
CK
-
@@Christian Kruse
Nein, Canvas wäre hier eine Vernünftige Wahl. Die Abwägung muss stattfinden zwischen den Vor- und Nachteilen:
Noch was vergessen:
Canvas ist nicht barrierefrei. Überhaupt nicht.
SVG kann man barrierefrei gestalten.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
-
Klarer Fall für SVG, danke Kalk.
Andere Idee, wirft Gegenfrage: Wieviele verschiedene Zustände gibt es denn?
-
Hallo,
Ich möchte beispielsweise folgendes Bild auf einer HTML Website darstellen und dynamisieren.
ich habe dabei auch zuerst an canvas gedacht. Aber ich halte es nicht für eine einfach Aufgabe, einen Schaltplan mit canvas (oder auch SVG) nach zubauen.
Wenn die Anzahl der Zustände nicht zu groß ist, würde ich für jeden ein neues Bild erstellen, und diese dann per Javascript austauschen.
Gruß Jürgen
-
@@JürgenB
ich habe dabei auch zuerst an canvas gedacht. Aber ich halte es nicht für eine einfach Aufgabe, einen Schaltplan mit canvas (oder auch SVG) nach zubauen.
Wenn die Anzahl der Zustände nicht zu groß ist, würde ich für jeden ein neues Bild erstellen
„Bild“ muss ja nicht Pixelgrafik heißen. Mit geeignetem Werkzeug ist eine Vektorgrafik genauso einfach (wenn nicht gar einfacher) erstellt.
und diese dann per Javascript austauschen.
Bei SVG muss man dann nur Teile austauschen. Oder auch nicht austauschen, sondern umfärben, drehen, …
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar,
„Bild“ muss ja nicht Pixelgrafik heißen. Mit geeignetem Werkzeug ist eine Vektorgrafik genauso einfach (wenn nicht gar einfacher) erstellt.
und diese dann per Javascript austauschen.
Bei SVG muss man dann nur Teile austauschen. Oder auch nicht austauschen, sondern umfärben, drehen, …
meine Gedanke ging eher dahin, dass es für Schaltpläne und Schaltungssimulatoren schon recht ordentliche Softwarelösungen gibt, in denen die Symbole für die diversen Bauteile schon vordefiniert sind, und dass es daher nicht sinnvoll ist, das alles nach zubauen. Ob man jetzt ganze Bilder tauscht, oder nur Teile, ist letztendlich ein Teilproblem.
Gruß Jürgen
-
Hallo,
meine Gedanke ging eher dahin, dass es für Schaltpläne und Schaltungssimulatoren schon recht ordentliche Softwarelösungen gibt,
also lautet die eigentliche Frage: Welche Schaltplan-Software hat einen vernünftigen SVG-Export?
Gruß
Kalk
-
-
-
-
Hallo,
ich würde zu SVG raten. Die vorgebrachten "Argumtente" gegen SVG sind mehr oder weniger veraltet oder falsch.
Die Browsersunterstützung ist zum Beispiel fast perfekt, nachzuprüfen bei caniuse. Nur einige Teilaspekte, die für die Zeichnung aber überhaupt nicht benötigt werden, werden nicht unterstützt.
Besonders komplex ist die Zeichnung auch nicht.
Die Texte können zum Schluß problemlos erstellt und plaziert werden
Wiederkehrende Elemente müssen nur einmal definiert werden und können dann beliebig oft verwendet und plaziert werden. So ein Schaltplan ist eher eine Übung für Anfänger.
Die einzelnen Elemente werden einfach übereinander gesetzt:
Die hellblau gestrichelten Quadrate: einmal definieren, viermal anwenden und plazieren
Die grünen Linien: einfach direkt zeichnen, eventuell teilweise als Polylinien
Die grünen Kreuzungspunkte: einmal definieren, beliebig oft anwenden und plazieren
Die gestrichelte gelbe Linie: genau so
Die weiße Linie mit den beiden Pfeilen: genau so
Die gelb-umrandeten Kreise: ganau so, wobei die Anordnungen zur wiederholten Anwendung zusätzlich gruppiert weden können
Bis hierher sind das absolute Anfängeraufgaben. Von der Komplexität sind nur noch die gelben und wenigen grünen Elemente übrig.
Aber wenn man sich die genauer anschaut: Hauptsächlich senkrechte und waagerechte Linien, die anschließend teilweise rotiert sind.
Die können auch jeweils für sich einmal erstellt und dann beliebig oft eingefügt und plaziert werden.
Mit etwas Glück findet sich sogar eine fertige Bibliothek von Symbolen. Zum Beispiel auf Wikipedia:
https://de.wikipedia.org/wiki/Liste_der_Schaltzeichen_%28Elektrik/Elektronik%29
Für nicht vorhandene können ja einfach ähnliche heruntergeladen und angepasst werden. Im Web werden sich aber noch mehr finden lassen.
Die Zeichnung sieht also nur auf den ersten Blick komplex aus. Zerlegt besteht sie aus einfachsten Elementen. Ideales Futter für SVG, grade falls zukünftig noch anderen Grafiken in ähnlicher Art benötigt werden.
Zur Änderung der Schaltzustände brauchen dann nur noch nach Bedarf die entsprechenden Elementen getauscht zu werden.
Gruss
MrMurphy
-
Ich gebe MrMurphy recht mit seiner Ausführung. Er hat mein Bild exakt analysiert. : )
Ich frage mich jetzt nur noch ob es Sinn macht das als ein großes SVG-Objekt aufzubauen oder aus vielen kleineren svg blöcken und diese dann zu recht zu schieben. Was meint ihr? Oder sehe idh das falsch?
-
@@CoNt0r
Ich frage mich jetzt nur noch ob es Sinn macht das als ein großes SVG-Objekt aufzubauen oder aus vielen kleineren svg blöcken und diese dann zu recht zu schieben.
Ein Schaltplan – ein SVG.
Du kannst dort allerdings Blöcke per
usereinholen – auch aus externen SVG-Dateien.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo,
Du kannst dort allerdings Blöcke per
usereinholen – auch aus externen SVG-Dateien.Vielleicht sollte man statt "Blöcke" lieber "Objekte" sagen.
Gruß
Kalk
-
-
-
-
Gibt es denn ein Tool, das aus einer Zeichnung automatisch den SVG-Code erzeugt? Oder muss man wirklich alles selbst definieren.
Ich habe mal kurz angefangen und das würde dann so in etwa aussehen:
<line x1="200" y1="0" x2="200" y2="80" style="stroke:rgb(255,0,0);stroke-width:5" /> <line x1="200" y1="140" x2="200" y2="160" style="stroke:rgb(255,0,0);stroke-width:5" /> <line x1="170" y1="80" x2="200" y2="140" style="stroke:rgb(255,0,0);stroke-width:5" /> <circle cx="200" cy="170" r="10" style="fill:none;fill-opacity:0;stroke:black;stroke:yellow;stroke-width:3;opacity:1" /> <circle cx="190" cy="180" r="10" style="fill:none;fill-opacity:0;stroke:black;stroke:yellow;stroke-width:3;opacity:1" /> <circle cx="210" cy="180" r="10" style="fill:none;fill-opacity:0;stroke:black;stroke:yellow;stroke-width:3;opacity:1" /> <line x1="0" y1="0" x2="500" y2="0" style="stroke:rgb(255,0,0);stroke-width:5" /> <rgeht das auch noch irgendwie einfacher ?
Die Dynamisierung muss ich dann über ein Skript(JS) vornehmen?
-
Hallo,
Gibt es denn ein Tool, das aus einer Zeichnung automatisch den SVG-Code erzeugt? Oder muss man wirklich alles selbst definieren.
z.B. Illustrator von Adobe kann dieses: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
-
Hallo,
geht das auch noch irgendwie einfacher ?
Es wird auf jeden Fall übersichtlicher, wenn du die Styles in ein zentrales CSS auslagerst. Bei den Linien bieten sich vermutlich ein paar wenige Klassen an und die Schalter und Dioden usw. bekommen noch IDs dazu.
Womit hast du denn das Schaltbild in deinem ersten Posting erstellt und was für Exportmöglichkeiten hat das Programm?
Gruß
Kalk-
Womit hast du denn das Schaltbild in deinem ersten Posting erstellt und was für Exportmöglichkeiten hat das Programm?
Die Zeichnung ist direkt mit Siemens Simatic WinCC erstellt. Alles soweit so gut ich kann damit alles wunderbar auf einem HMI darstellen. Nun hat aber die neuen SPS Serie einen integrierten Web-Server. Deshalb wollte ich das ganze mal ausprobieren um in Zukunft ggf. den Kauf eines Panels zu ersparen und nen günstigen Rechner bzw. Tablet zu verwenden.
Im WinCC kann man meines Wissens aber leider keine Bilder exportieren. Da bleibt nur zeichnen.
-
-
Hallo,
ich wollte es in meinem ersten Beitrag dazuschreiben, habe es dann aber doch als bekannt vorausgesetzt:
Du musst natürlich zunächst die Grundlagen von SVG lernen. Ansonsten kannst du die Vorteile nicht nutzen und vertändelst viel mehr Zeit mit halbgaren Ergebnissen, als wenn du die Lernzeit zunächst investierst.
<circle cx="200" cy="170" r="10" style="fill:none;fill-opacity:0;stroke:black;stroke:yellow;stroke-width:3;opacity:1" /> <circle cx="190" cy="180" r="10" style="fill:none;fill-opacity:0;stroke:black;stroke:yellow;stroke-width:3;opacity:1" /> <circle cx="210" cy="180" r="10" style="fill:none;fill-opacity:0;stroke:black;stroke:yellow;stroke-width:3;opacity:1" />
Ich hatte doch geschrieben: Gleiche Elemente (bzw. Objekte) werden nur einmal erstellt und dann so oft wie notwendig eingefügt.
geht das auch noch irgendwie einfacher ?
Es gibt gute Freeware-Programme wie
und
Wobei du dich auch in die natürlich erst mal etwas reinarbeiten musst.
Gibt es denn ein Tool, das aus einer Zeichnung automatisch den SVG-Code erzeugt?
Google mal nach
pixelgrafik in svg umwandeln
Inkscape soll das zum Beispiel können. Egal bei welchem Programm: Der erzeugte Code dürfte aber grauenhaft sein und sich kaum zur Nachbearbeitung eignen. Ich habe damit aber noch keine Erfahrungen.
Die Dynamisierung muss ich dann über ein Skript(JS) vornehmen?
Nein, nicht unbedingt. Das hängt aber auch davon ab, unter welchen Voraussetzungen und wie die Grafik(en) gezeigt werden.
Gruss
MrMurphy
-
Hallo
Google mal nach
Wie wäre es mit: „Suche mal nach“
Es gibt auch alternative Suchmaschinen die einen nicht ausspionieren, zum Beispiel:
Ixquick oder auch DuckDuckGo
Gruß,
Orlok
-
@CoNt0r:
EAGLE kann deinen Schaltplan und deine Platine per ULP als SVG exportieren. Du brauchst nicht, wie hier vogeschlagen frickelig das Bitmap in SVG umzuwandeln oder nachzeichnen.
- http://www.cadsoft.de/download-eagle/
- ftp://ftp.cadsoft.de/eagle/userfiles/ulp/eagle2svg-1.0.ulp
- ftp://ftp.cadsoft.de/eagle/userfiles/ulp/eagle2svg-1.2.ulp
Das ganze funktioniert auch umgekehrt svg2eagle:
Eine Möglichkeit von WinCC auf Eagle zu kommen kenne ich allerdings nicht. Vielleicht hilft dir der Tip ja weiter.
lg mark
-
-