Moin! 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? Danke!
Siehe Word doc im Anhang. So etwa? Zeiger ist freigestellt und überstehende Bereiche als transparent in Word definiert.... Bildbasis ist von hier: https://www.conrad.de/de/p/voltcraft-am-72x72-15a-am-72x72-15a-analog-einbaumessgeraet-am-72x72-15a-15-a-dreheisen-103530.html Der Rest war fünf min. Arbeit in Paint und Word... Sofern du Word hast, kannst du den Zeiger einfach so hin schieben wie du Ihn gerade brauchst...
:
Bearbeitet durch User
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.
Ben B. schrieb: > 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. Ansonsten gab es hier auch Mal den Thread der evtl auch ganz interessant ist: Beitrag "Re: Skala Drucken?"
Ben B. schrieb: > 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).
Ben B. schrieb: > 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)
:
Bearbeitet durch User
Rahul D. schrieb: > Du brauchst du zu jeder Zeigerstellung ein Bild. warum? CSS kann rotieren. sogar animiert
Ben B. schrieb: > ich kann sehr gut programmieren Das bezweifle ich, wenn du schon an sowas trivialem wie ein paar Strichchen in ein Canvas malen scheiterst.
Ben B. schrieb: > Ich kann Dir nicht versprechen, daß ich damit was anfangen kann brauchst du auch nicht, was sollte mir das bringen? daß->dass seit 1996. Ben B. schrieb: > ich brauche das für eine Webseite Wo stand das denn? Da du "Grafiken-Hilfe" suchst und ein Pult bauen möchstest: Ben B. schrieb: > in der endgültigen Vorstellung sowas wie ein Anzeigen- > und Bedienpult zusammenbasteln kann. Dachte ich, es solle eine Attrappe oder eine Requisite für irgendetwas werden wofür du die unterschiedlichen Grafiken einer Analoganzeige benötigst...
:
Bearbeitet durch User
Ben B. schrieb: > 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. Google nach Irfanview.
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 ...
Beitrag #7974391 wurde vom Autor gelöscht.
Frank E. schrieb: > SVG wäre auch eine Überlegung Wert, bloat > kann auch rotieren/animieren und ja nur viel umständlicher und bloatiger > braucht wenig Speicher Weniger als was? Es ist erst mal bloat. > weil Vektorgrafik. Nix "weil", deine Argumentation ist schon im Ansatz falsch. > Kann man auch per Programmcode erstellen, Ja, man kann auch rückwärts auf einem Bein zur Arbeit hüpfen. > insbesondere die Skala, warum insbesondere > weil XML, weil xml = megabloat > also textbasiert . siehe Vektrografik Man könnte auch unkomprimierte Videos dafür verwenden, das wäre das Beste für die gazen Bloatfans hier.
Frank D. schrieb: > ja nur viel umständlicher und bloatiger Kann es sein, daß Du gewisse ... Vorurteile hast?
Frank D. schrieb: > Das bezweifle ich, wenn du schon an sowas trivialem wie ein paar > Strichchen in ein Canvas malen scheiterst. Frank D. schrieb: > Frank E. schrieb: > >> SVG wäre auch eine Überlegung Wert, > bloat > >> kann auch rotieren/animieren und > ja nur viel umständlicher und bloatiger > >> braucht wenig Speicher > Weniger als was? Es ist erst mal bloat. > >> weil Vektorgrafik. > Nix "weil", deine Argumentation ist schon im Ansatz falsch. > >> Kann man auch per Programmcode erstellen, > Ja, man kann auch rückwärts auf einem Bein zur Arbeit hüpfen. > ... Hallo Frank, kannst du auch hilfreiche Beiträge schreiben oder nur andere runtermachen?
SVG ist für sowas tatsächlich keine dumme Idee. 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. 73
Vor dem Problem stand ich auch mal. 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. https://de.fiverr.com/
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.
Hans W. schrieb: > 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. In meinem Beispiel:
1 | transition: transform 0.2s ease-out; |
auf der Nadel. Ben B. schrieb: > Ja, in etwa sowas. 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.
:
Bearbeitet durch User
> Dachte die doppelte "6" auf der Skala würde eher auffallen. > KI hat's nicht so mit Zahlen. Ist aufgefallen, ich fand's aber nicht so wichtig, um es reinzuschreiben und die Skalenwerte brauche ich wie gesagt sowieso nicht.
Frank E. schrieb: > SVG wäre auch eine Überlegung Wert, 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. [1] https://www.jqwidgets.com/ [2] https://developers.google.com/chart [3] https://github.com/elebree/svelte-gauge
> 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:
1 | <!DOCTYPE html>
|
2 | <head></head>
|
3 | <body>
|
4 | <img src="test.png" id="testid" class="test"/> |
5 | <script>
|
6 | document.getElementById("testid").style.rotate="180deg"; |
7 | </script>
|
8 | </body>
|
9 | </html>
|
:
Bearbeitet durch User
Ben B. schrieb: > document.getElementById("testid").style.rotate="180deg"; Und wie seht das aus, wenn das ein nicht durch 90 teilbarer Winkel ist?
Angehängte Dateien:
Ben B. schrieb: > 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. Harald K. schrieb: > Und wie seht das aus, wenn das ein nicht durch 90 teilbarer Winkel ist? Einfach Nachkommastellen mit angeben.
Ben B. schrieb: > 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 73
@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.
Ein T. schrieb: > 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.
Ben B. schrieb: > Sollte das mit den realistischen Grafiken nichts werden, komme > ich darauf zurück. Ich habe mal spaßhalber parallel die KI und Google gefragt... die KI liefert wieder mal nur mist - google aber diesen link: https://g-mw.de/fileadmin/PDFs/Analoge_Anzeigegeraete/Basis-Serie_DE.pdf Da sollte sich doch eine Grafik ausborgen lassen, oder? 73
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.
Rahul D. schrieb: > Ein T. schrieb: >> 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.
Ein T. schrieb: > Das man Das "Dass"... Ein T. schrieb: > 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).
Ach. Geht sowas etwa DOCH nicht mit KI?
Vielleicht ginge es mit KI, aber wie man sieht nicht ohne Probleme bzw. so, daß es wirklich realistisch ausschaut.
Ben B. schrieb: > DOCX. Ich kann Dir nicht versprechen, daß ich damit was anfangen kann, Umbenennen in .zip Wer es nicht kennt, ernsthaft! Jede DOCX und XLSX ist eine ZIP-Datei. Unter /word/media findet man die Bilder.
Rahul D. schrieb: > Ein T. schrieb: >> Das man > > Das "Dass"... Daß. > 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.
Thread beobachten
Seitenaufteilung abschalten
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.