Nachdem ich beim Versuch, das alleine hinzukriegen, schon wieder viel zu viel Zeit verbrannt habe, bräuchte ich etwas Hilfe beim Entwurf von Grafiken, mit denen man analoge Messinstrumente nachbilden kann, so daß man sich damit in der endgültigen Vorstellung sowas wie ein Anzeigen- und Bedienpult zusammenbasteln kann.
Ich hänge mal Bilder von Messinstrumenten dran, welche Art ich mir wünschen würde, richtig gute Vorlagen (unverzerrt und ohne große Schatten) habe ich leider keine gefunden. Es muss auch nicht allzu realistisch aussehen, aber ich bräuchte halt eine Art Hintergrund mit dem Messgerät ansich, aber ohne Zeiger und Skalen-Beschriftung. Diese könnte man hinterher mittels Programm selbst hineinbasteln, genau wie den Zeiger. Für den Zeiger bräuchte ich ein zweites Bild mit transparentem Hintergrund (und scharfen Kanten, ohne Artefakte an den Rändern), so daß man diesen hinterher einfach mit einer Vorgabe des Winkels verdrehen kann.
Ist hier jemand fit in der Grafikbearbeitung und schafft das ohne daß ich damit großen zeitlichen Aufwand verursache?
Kriegt man sowas evtl. auch mit einfachen Leuchtmeldern hin? Also eine Grafik mit Leuchtmelder an und eine zweite mit Leuchtmelder aus?
DOCX. Ich kann Dir nicht versprechen, daß ich damit was anfangen kann, ich brauche das für eine Webseite und Dinge wie der Zeiger soll per Javascript verdreht werden können. Ich hätte also auf JPGs oder PNGs gehofft und vielleicht eine kurze Anweisung, wie ich es passend skalieren kann, ohne es dabei kaputtzumachen.
Ich schaue mir das auf jeden Fall morgen mal genauer an, danke Dir für Deine Zeit. Ich bin einfach zu doof dafür, ich kann sehr gut programmieren und löte jede Wundermaschine zusammen wenn es sein muss, noch nicht mal ein Problem mit einem (guten) CAD-Programm solange sich alles mathematisch korrekt darstellen lässt, aber Grafikbearbeitung oder irgendwas frei Hand... urks kriege ich einfach nicht so gut hin, daß es mir gefällt.
ich brauche das für eine Webseite und Dinge wie der Zeiger soll per
Javascript verdreht werden können
Wäre für so etwas dann nicht einfach eine Javascript Lib das richtige? Es gibt unzählige Gauge Implementierungen. Auch welche die relativ ähnlich zu deinem Messgerät sind.
DOCX. Ich kann Dir nicht versprechen, daß ich damit was anfangen kann,
Angucken geht auch online.
ich brauche das für eine Webseite und Dinge wie der Zeiger soll per
Javascript verdreht werden können. Ich hätte also auf JPGs oder PNGs
gehofft und vielleicht eine kurze Anweisung, wie ich es passend
skalieren kann, ohne es dabei kaputtzumachen.
Du brauchst du zu jeder Zeigerstellung ein Bild.
Je nach Wertebereich / - auflösung werden das dann ziemlich viele.
So macht das z.B. 4Dsystems bei ihren Displays:
Mit deren Software erstellt man die Oberflächen. Dann "compiliert" deren Software aus den eingestellten Wertebereichen und deren Auflösung die notwendige Anzahl an Bildern und legt die dann auf einer SD-Karte als Grafikdateien mit Index ab.
Die Ansteurung per JS sollte das unaufwendigste bei der Sache sein.
Oder du "zeichnest" die Dinger "on-the-fly". Das dürfte mit SVG gehen (davon habe ich keine Ahnung; ich benutze das Datenformat nur als Datei in Inkscape).
ich brauche das für eine Webseite und Dinge wie der Zeiger soll per
Javascript verdreht werden können.
Eine Minute mit der KI deiner Wahl liefert ein Grundgerüst.
Im CSS kannst du dich austoben und z.B. Bilder für die Skala und Zeiger hinterlegen.
Und wenn deine Skalen nicht von 0°-180° gehen, eben die Formeln für die Winkel anpassen. (Oder anpassen lassen, das kriegt die KI auch noch halbwegs fehlerfrei hin)
DOCX (...) Ich hätte also auf JPGs oder PNGs
gehofft
Google nach "docx nach png".
.jpg benutzt man erst, wenn das Bild fix und fertig ist. NACH drehen, skalieren etc., denn diese Operationen sollen ja nicht an dem durch Komprimieren "verfälschten" Original vorgenommen werden.
vielleicht eine kurze Anweisung, wie ich es passend
skalieren kann, ohne es dabei kaputtzumachen.
SVG wäre auch eine Überlegung Wert, kann auch rotieren/animieren und braucht wenig Speicher weil Vektorgrafik. Kann man auch per Programmcode erstellen, insbesondere die Skala, weil XML, also textbasiert ...
Du kannst das z.b in inkscape zeichnen.
Für die Rotation von Elementen kannst du den rotationsmittelpunkt festlegen. Tools zum zeichnen von Skalen gibt's ja auch einige.
Hier im Forum gibt's auch einiges dazu...z.b. Beitrag "Kreisskala zeichen - Programm / Anleitung gesucht"
Zum "simulieren" lässt sich das in ein HTML einbinden und über JavaScript und einem Slider verknüpfen.
Es geht auch direkt im SVG JavaScript zu verwenden und den Zeiger langsam von 0-100 fahren zu lassen.
Ich habs dann bei Fiverr in Auftrag gegeben, waren keine 40€ bei einer pakistanischen Grafikerin. Ergebnis war top, Kommunikation auch. Eventuell ist das auch was für dich, einfach mal die Referenzen der Anbieter durchschauen.
Uff. Na das hat ja wieder zu einer schönen Diskussion beigetragen.
Also wenn man das so macht wie ich es getestet habe, also ein Bild mit transparentem Hintergrund (Zeiger) über ein anderes Bild (Skala bzw. die Grund-Grafik zur Darstellung des Anzeigeinstruments) drüberlegen, lässt sich der Zeiger einfach mit einer winzigen Zeile Javascript/CSS rotieren. Ideal funktioniert das, wenn der Drehpunkt des Zeigers dabei im Bildmittelpunkt liegt, ansonsten muss man das Bild entsprechend verschieben, damit der Zeiger-Drehpunkt dort bleibt, wo das Anzeigeinstrument ihn hat.
Da braucht man weder SVG (vielleicht nur, wenn man es frei skalierbar haben möchte) noch XML, funktioniert alles ohne wenn man die richtigen Grafiken hat.
Es ist auch kein Problem, etwas Schrift "zwischen" beiden Grafiken zu positionieren, so daß man dort z.B. den genauen Messwert darstellen kann oder eine wechselnde Beschriftung der Skala, bzw. dann kann man die Grund-Grafiken des Anzeigeinstruments für mehrere Anzeigen verwenden.
@Ernst
Ja, in etwa sowas. Vielleicht eine Variante, wo die Anzeige im Verhältnis zur Gesamtfläche mehr Platz einnimmt und das Messwerk noch sichtbar ist, nur eben der Zeiger fehlt und die Beschriftung der Skala, sowie das "A", so daß man da auch ein "V" oder so hinschreiben könnte. Vielleicht auch nicht ganz so groß (vor allem nicht von der Dateigröße her, daher die Grund-Grafik als JPG), denke so 300x300 Pixel reichen.
Es geht auch direkt im SVG JavaScript zu verwenden und den Zeiger
langsam von 0-100 fahren zu lassen.
Dafür nimmt man lieber eine CSS-Animation. Die läuft dann flüssig, mit exakt der Framerate, die der Browser anzeigen kann, und braucht dabei weniger CPU als eine durch Javascript erzwungene Animation.
Das war das erste Bild, was du oben angehängt hast (Ja, der "Pixelbrei"), und in eine kostenlose KI geworfen mit der Anweisung die Skala zur Verwendung in einer Webseite herauszuarbeiten.
Dachte die doppelte "6" auf der Skala würde eher auffallen. KI hat's nicht so mit Zahlen.
Um genau zu sein, ist das das Einzige, das eine Überlegung wert ist. SVGs sind skalierbar, können also auf Displays verschiedenster Auflösungen dargestellt werden, die Elemente sind über ihre id mit Javascript angesprochen werden, SVG hat bereits alle nötigen Zeichenprimitive und wird von allen halbwegs modernen Webbrowsern nativ und performant unterstützt. Obendrein lassen sie sich über CSS wunderbar ansteuern und hübsch machen.
Klar, man kann auch diese irre Nummer mit je einer Grafik je Zeigerstellung machen. Dann müssen bei, sagen wir, 100 Schritten also 100 Grafiken erstellt und natürlich vom Webserver ausgeliefert werden... Wow, irre.
Ein Canvas wäre eine andere Möglichkeit, allerdings muß man dazu das, was SVG bereits eingebaut hat, in weiten Teilen selbst implementieren. Klar, das kann man machen, ist aber ein ziemlicher Aufwand und im Übrigen auch nicht weniger oder mehr "Bloat" als gleich das zu nehmen, was HTML für sowas vorsieht, und das ist: ganz genau, SVG.
Letztlich ist es allerdings so, daß das Darstellen solcher Skalen ein Thema ist, das viele Entwickler haben. Und wie so oft bei häufig benötigtem Zeug, gibt es dafür natürlich bereits vorgefertigte Libraries, von den jQWidgets (kommerziell, [1]) über Google Charts (frei, [2]) bis hin zu Libraries für moderne JS-Framewirks wie Svelte (frei, [3]).
Svelte hat dabei den Vorteil, daß der Quellcode in einen (in neueren Versionen immer besser) optimierten, also kleinen und sehr performanten JavaScript-Code kompiliert wird. Der Nachteil von Svelte ist aber natürlich, daß man sich erst hineinarbeiten muß -- das ist für Gelegenheitsnutzer vielleicht nicht trivial, allerdings erschließen sich dann oft weitere Möglichkeiten.
Klar, man kann auch diese irre Nummer mit je einer Grafik je
Zeigerstellung machen. Dann müssen bei, sagen wir, 100 Schritten
also 100 Grafiken erstellt und natürlich vom Webserver
ausgeliefert werden... Wow, irre.
Und natürlich Blödsinn.
Per CSS kann man Grafiken frei rotieren, sogar animiert rotieren. Legt man zwei davon übereinander, hat man das Anzeigeinstrument (ohne Zeiger) als Grundbild und darüber das Bild mit dem Zeiger und transparentem Hintergrund, so daß man dieses frei rotieren kann. Damit bewegt sich der Zeiger und fertig ist das.
Edit, hier noch der HTML-Fetzen, mit dem ichs getestet habe:
Edit, hier noch der HTML-Fetzen, mit dem ichs getestet habe:
na schau her, dann hast du's doch schon fast.
Jetzt noch ein Hintergrundbild reinladen (background-image: url(skala.jpg))
den Drehpunkt von deinem Zeiger festlegen (position, transform-origin)
Dem Zeiger selber auch noch ein Bild geben (hab ich mir gespart, wär auch ein background-image)
und deine Eingabe-Werte auf die möglichen Winkel Skalieren.
Läuft real viel besser als es der Bildschirmaufnahme-auf-animated-gif-Verschnitt zeigt.
Änderung gegenüber meinem Beispiel-HTML/CSS:
1
.gauge-dial {
2
background-image: url(skala.png);
3
width: 815px;
4
height: 790px;
5
position: relative;
6
}
7
.gauge-needle {
8
position: absolute;
9
bottom: 29px;
10
right: 320px;
11
width: 10px;
12
height: 350px;
13
background-color: red;
14
transform-origin: 50% 90%;
15
transform: translateX(-50%) rotate(-85deg);
16
transition: transform 0.2s ease-out;
17
}
Tipp für das Zeigernadel-Bild: ein schwacher Schattenwurf lässt das ganze plastischer wirken.
Da braucht man weder SVG (vielleicht nur, wenn man es frei skalierbar
haben möchte) noch XML, funktioniert alles ohne wenn man die richtigen
Grafiken hat.
Naja, quick und dirty in Inkscape wäre das mein Weg:
Einfach
eine Skala mit dem render-knob-scale plugin gemacht
dann ein "dummy-kreis" im Zentrum plaziert
eine Nadel hingezeichnet
Das SVG gespeichert und einfach in ein HTML reingemacht.
Der Dummy-Kreis im Zentrum dient dazu den Rotationsmittelpunkt zu haben.
Kann man wieder rausnehmen... ich hab in zwecks demonstrationszweck drinnen gelassen.
Ein kleines bischen Javascript, und schon ist das "bedienbar"
Aja...das SVG ist absichtlich nicht "optimiert"... das ist jetz wesentlich größer als notwendig - so ist's aber leichter lesbar
@Ernst
Ich weiß, von der Programmierung her ist es kein Problem, auch wenn hier jedem sofort das Gegenteil unterstellt wird, wenn er sowas schreibt. Ich brauche nur noch richtig gute Grafiken, damit sich er Spaß am Ende auch lohnt und optisch ansprechend wird.
Schatten am Zeiger... joo gut, müsste man schauen ob man sowas in CSS definieren kann, aber wenn man den Zeiger schwarz macht so wie er bei den meisten Anzeigen ist - eben wirklich möglichst realitätsnah, dann wäre es auch verschmerzbar wenn solche Details fehlen.
@Hans
Nicht schlecht was mit so ein bißchen HTML schon möglich ist, danke dafür! Sollte das mit den realistischen Grafiken nichts werden, komme ich darauf zurück.
Klar, man kann auch diese irre Nummer mit je einer Grafik je
Zeigerstellung machen. Dann müssen bei, sagen wir, 100 Schritten also
100 Grafiken erstellt und natürlich vom Webserver ausgeliefert werden...
Wow, irre.
Bis auf die Datenmenge ist das doch Pippifax.
Die Idee mit SVG hatte ich ja sonst auch geäußert.
Dass man mit CSS irgendwas drehen kann, wissen nur Leute (aka "Webdesigner"), die sich mit dem Thema näher beschäftigen. Tue ich nicht, weil ich es nicht brauche.
Hey, direkt in die Datenblätter zu Messgeräten reinzuschauen ist eine sehr gute Idee, danke. Ich muss mal schauen, ob ich da ein paar wirklich schöne Grafiken finde, aber Hilfe beim "Ausbauen" des Zeigers, so daß dann nur der Grundaufbau in der einen Grafik und der Zeiger selbst (mit transparentem Hintergrund) in einer anderen Grafik übrigbleibt, werde ich bestimmt trotzdem brauchen.
Klar, man kann auch diese irre Nummer mit je einer Grafik je
Zeigerstellung machen. Dann müssen bei, sagen wir, 100 Schritten also
100 Grafiken erstellt und natürlich vom Webserver ausgeliefert werden...
Wow, irre.
Bis auf die Datenmenge ist das doch Pippifax.
Egal wie man es dreht und wendet, bleibt es Unfug. Irrer Unfug. Das man das tatsächlich zum Funktionieren bringen kann, ist schon das einzig Gute.
Die Idee mit SVG hatte ich ja sonst auch geäußert.
Dass man mit CSS irgendwas drehen kann, wissen nur Leute (aka
"Webdesigner"), die sich mit dem Thema näher beschäftigen. Tue ich
nicht, weil ich es nicht brauche.
Dann wirst Du vermutlich nicht darum herum kommen, Dich auf das Urteil von Menschen zu verlassen, die sich besser auskennen. Ob Du dazu meinem Urteil vertrauen möchtest, mußt Du selbst entscheiden.
Dann wirst Du vermutlich nicht darum herum kommen, Dich auf das Urteil
von Menschen zu verlassen, die sich besser auskennen.
Warum darf mann nicht einfach mal Ideen (aka dein "Unfug") haben?
Ob Du dazu meinem Urteil vertrauen möchtest, mußt Du selbst entscheiden.
Ja, tue ich (es zu entscheiden) bzw. tue ich nicht (also deinem Urteil vertrauen - da gab es schon mal eine "Hilfestellung", die nichts brachte und wohl eher geraten war).
Warum darf mann nicht einfach mal Ideen (aka dein "Unfug") haben?
Darf man. Aber diese ist, wie eine Schraube mit einer Zange festzuziehen.
Ob Du dazu meinem Urteil vertrauen möchtest, mußt Du selbst entscheiden.
Ja, tue ich (es zu entscheiden) bzw. tue ich nicht (also deinem Urteil
vertrauen - da gab es schon mal eine "Hilfestellung", die nichts brachte
und wohl eher geraten war).
Das stimmt. Allerdings hatte ich wohlweislich sogar explizit dazu geschrieben, daß (sic!) das nur eine Vermutung war.
Geht doch. Hat zwar bestimmt deutlich mehr Zeit verschwendet als wenn es ein fähigerer PC-Grafiker gemacht hätte, aber das Ergebnis finde ich durchaus brauchbar. Und nein, ich hab da nicht seit Dezember dran gesessen, ist nur die Freizeit von 2..3 Tagen für draufgegangen.
Ich werde auch für ganz andere Dinge als für das Nichtanpassen des Kleingedruckten in den Messgeräten in die Hölle kommen... so what.
Mal die 2 6en beiseite, wie kommt es, dass in der Vorschau und im Bild
der Zeiger an unterschiedlichen Stellen stehen?
Das ist ein Video, aus welchem Frame das Vorschaubild genommen wurde, ist Einstellungssache der Forumssoftware, lustigerweise wohl für kleines und großes Vorschaubild unterschiedlich.
