Analogen Zeiger über Javascript steuern?

[Gary]

Hallohallo @all

Mal eine nicht alltägliche Frage:

Gibt es fertige Analoginstrumente ( So vie z. B. VDO mit Scala und Zeiger), die man in sein HTML-Dokument abbilden kann, und dann ihren Zeiger so einstellen, wie der Wert in einem Inputfeld ist?

Also:
Webseite hat ein Rundzeigerinstrument. Darunter ein Inputfeld (Readonly). Beim Laden der Seite schmeist der Server zum Beispiel einen Wert von  "1" Bar in das Inputfeld. Die Seite wird vom Browser angezeigt. JavaScript liest das Readonlyfeld aus, und stellt den Zeiger des Rundinstruments auf den entsprechenden Wert.

Gibt es sowas fertiges?

Wäre sowas überhaupt machbar?

Gruß Gary

[Struppi]

Gibt es fertige Analoginstrumente ( So vie z. B. VDO mit Scala und Zeiger), die man in sein HTML-Dokument abbilden kann, und dann ihren Zeiger so einstellen, wie der Wert in einem Inputfeld ist?

gesehen habe ich sowas schon.

Also:
Webseite hat ein Rundzeigerinstrument. Darunter ein Inputfeld (Readonly). Beim Laden der Seite schmeist der Server zum Beispiel einen Wert von  "1" Bar in das Inputfeld. Die Seite wird vom Browser angezeigt. JavaScript liest das Readonlyfeld aus, und stellt den Zeiger des Rundinstruments auf den entsprechenden Wert.

Was heißt "schmeist", wieso ein Inputfeld?
Du kannst ohne Probleme auch JS Code direkt ausgeben und musst nicht den Umweg über HTML gehen.
Ein simples:

print CGI::script({-type => 'text/javascript'}, 'var js_var = 1');  
  

reicht dazu aus.

Gibt es sowas fertiges?

Ich glaube ja.

Wäre sowas überhaupt machbar?

sicher.

Struppi.

[Gary]

Hi Struppi

Was heißt "schmeist", wieso ein Inputfeld?
Du kannst ohne Probleme auch JS Code direkt ausgeben und musst nicht den Umweg über HTML gehen.
Ein simples:

print CGI::script({-type => 'text/javascript'}, 'var js_var = 1');

> reicht dazu aus.  
  
Danke ist gespeichert! Die Inputausgabe deshalb, weil man auch den genauen Wert ablesen können soll. Die Instrumente sollen nur einen groben Überblick liefern  
  
Ich denke da aun zwei Möglichkeiten:  
  
A)  
Ich kreiere für jeden Wert ein eigenes Bild.  
  
B)  
Ich zeichne nur einmal die Anzeige mit Skala und arbeite mit einzelnen Zeigern, die dann aber allerdings transparent sein müsten.  
  
A ist einfacher zu realisieren als B.  
  
Grüße  
  
Gary

[Klawischnigg]

Hi there,

A)
Ich kreiere für jeden Wert ein eigenes Bild.

Ja, falls Du JS nicht voraussetzt, praktisch die einzige Möglichkeit. Hängt halt von der "Auflösung" Deiner Anzeige ab, wieviele Bilder Du benötigst. Ich würde das übrigens nicht mit verschiedenen Bildern sondern mit CSS-Sprites lösen...

[Gunnar Bittersmann]

@@Klawischnigg:

nuqneH

Ich kreiere für jeden Wert ein eigenes Bild.

Um Himmels Willen, nein!

Hängt halt von der "Auflösung" Deiner Anzeige ab, wieviele Bilder Du benötigst.

Nein, es sind zwei.

Qapla'

[Gary]

Hi Gunnar

Ich kreiere für jeden Wert ein eigenes Bild.

Um Himmels Willen, nein!

Doch!

Es sind genau 49 Stück - und alle schon fertig. Hier darfst du mal eines sehen. Skala selber eingeteilt und schönen blauen Zeiger drangebaut - weil blau ist grad modern!

Das war was im Gimp - schweine arbeit. Aber so langsam komm ich mit den Ebenen klar *g*.

Gruß und Gute Nacht

Gary

[Gunnar Bittersmann]

@@Gary:

nuqneH

Das war was im Gimp - schweine arbeit.

Die hättest du dir sparen können.

Wie gesagt, drehen geht mit CSS. Das hat dann auch den Vorteil, dass bei Änderungen des Wertes kein neues Bild zum Client übertragen werden muss.

Qapla'

[Klawischnigg]

Hi there,

Ich kreiere für jeden Wert ein eigenes Bild.

Um Himmels Willen, nein!

Das war sein Vorschlag, nicht meiner.

Hängt halt von der "Auflösung" Deiner Anzeige ab, wieviele Bilder Du benötigst.

Nein, es sind zwei.

Ich hab' solche Probleme immer mit "Vektoren" gelöst, die ich aus einzelnen Pixeln (Zeichen wie Punkt oder Stern...) zusammengesetzt habe. Das war sogar schon auf 10 Jahre alten (und älteren) Rechnern recht flott. Der Nachteil dabei ist, daß man in Bezug auf den Zeiger recht wenig Gestaltungmöglichkeiten hat und daß es nicht ganz einfach zu implentieren ist.

Auf der anderen Seite muss ich sagen, daß ich die Lösung über Canvas nicht für eine Lösung halte, solange das nur Browser aber der IE nicht verstehen. Insoferne halte ich eine Lösung über CSS-Sprites gar nicht so schlecht...

[ChrisB]

Hi,

Auf der anderen Seite muss ich sagen, daß ich die Lösung über Canvas nicht für eine Lösung halte, solange das nur Browser aber der IE nicht verstehen.

Das man dem mit explorercanvas auf die Beine helfen kann, schrieb ich bereits.

MfG ChrisB

[Gunnar Bittersmann]

@@Klawischnigg:

nuqneH

Auf der anderen Seite muss ich sagen, daß ich die Lösung über Canvas nicht für eine Lösung halte, solange das nur Browser aber der IE nicht verstehen.

Die Lösung mit einem gedrehten Zeiger-Bild verstehen nicht nur Browser, sondern auch der IE (auf seine Art).

Qapla'

[flowh]

Hallo Gary.

Hallohallo @all

Mal eine nicht alltägliche Frage:

Gibt es fertige Analoginstrumente ( So vie z. B. VDO mit Scala und Zeiger), die man in sein HTML-Dokument abbilden kann, und dann ihren Zeiger so einstellen, wie der Wert in einem Inputfeld ist?

Also:
Webseite hat ein Rundzeigerinstrument. Darunter ein Inputfeld (Readonly). Beim Laden der Seite schmeist der Server zum Beispiel einen Wert von  "1" Bar in das Inputfeld. Die Seite wird vom Browser angezeigt. JavaScript liest das Readonlyfeld aus, und stellt den Zeiger des Rundinstruments auf den entsprechenden Wert.

Gibt es sowas fertiges?

Wäre sowas überhaupt machbar?

Gruß Gary

Eine analoge Uhr gibts schon fertig.

Das kann man sicher gut anpassen, so dass es deine Anforderungen erfüllt.

Servus,
Flo

[Klawischnigg]

Hi there,

Gibt es fertige Analoginstrumente ( So vie z. B. VDO mit Scala und Zeiger), die man in sein HTML-Dokument abbilden kann, und dann ihren Zeiger so einstellen, wie der Wert in einem Inputfeld ist?

ja, das geht. Die Frage der Umsetzung hängt eigentlich nur davon ab, ob es auch ohne JS funktionieren soll und falls Du JS voraussetzt, ob es nur in Browsern oder auch im Internet-Explorer angezeigt werden soll...

[ChrisB]

Hi,

Gibt es fertige Analoginstrumente ( So vie z. B. VDO mit Scala und Zeiger), die man in sein HTML-Dokument abbilden kann

Canvas oder SVG bieten sich dafür an, weil sich damit das „drehen“ eines Zeigers um eine Achse sehr gut realisieren lässt, ohne für jeden Zustand ein eigenes Bildchen haben zu müssen.

Wenn du das mit Canvas umsetzen willst, kannst du dir diese analoge Uhr als Beispiel nehmen. Dank Explorer Canvas läuft das auch im IE - der 9er wird Canvas ja endlich auch nativ unterstützen.
Auf dem Rest der Seite http://canvas.quaese.de/ findest du auch sowas wie ein Mini-Tutorial für den Umgang mit Canvas.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Canvas oder SVG bieten sich dafür an

Ja, aber …

ohne für jeden Zustand ein eigenes Bildchen haben zu müssen.

… das muss man nicht, ein Bildchen des Zeigers (und eins für die Skala) sind genug. Ersteres wird per CSS gedreht.

Qapla'