Clock

[Chris M.]

Gerade schreibe ich an einem Clock-Widget über das man Uhrzeiten intuitiv eingeben können soll.

Gleichzeitig soll es als Beispiel dienen, wie man interaktives SVG einbindet.

Neben der verschiedenen Möglichkeiten, die sich aus unterschiedlichen Gründen oft als Unmöglichkeit herausstellen, gibt es die für uns eigentlich sehr konsistente Möglichkeit das jQuery SVG Plugin zu nutzen.
Wegen einer anderen Unmöglichkeit könnte man viel Aufwand sparen, wenn das pauschal immer geladen wird.

Da bin ich aber im Dilemma:
Die Basis-Visu soll so schnell wie möglich laden. Dieses Plugin (19,7 kB minimized) steht dem natürlich entgegen.

Andererseits könnte es durchaus mehrere Widgets geben, die davon stark profitieren können (ein Füllstands-Plugin analog dem 2D Demo habe ich schon fest im Sinn). Jedes mal das jQ-Plugin neu zu laden wäre da auch Müll.

Wie seht ihr dieses Dependency?

Pauschal einbinden? Optional im Plugin (mit fiesen Verrenkungen)?

PS: SVG ist inzwischen Mainstream. Selbst mein Fernseher kann das in einer Web-Seite darstellen. Das 3D per WebGL dagegen ist z.B. im Standard-Android-Browser noch nicht angekommen...

[makki]

Schwierig, weil das konservative Herz teilt natürlich deine bedenken. Aber das Featureitis-Herz sagt: das ist essentiell!
Also sind auf die 19kB mal IMHO ein Ei gepellt. Das darf nicht überhand nehmen, klar, aber essentielles sollte IMHO auf der anderen Seite möglichst "Freakfrei" gehen, immer eine Krux..

Makki

P.S: ich stand heute schon vor derselben Frage mit jQ UI/marquee und scrollable (rss..); wollte es erstmal selber austesten, wieviel overhead das produziert..

[Chris M.]

Release

Mit Revision 699 bzw. 700 ist das Plugin jetzt mal hochgeladen. Das jQ.SVG habe ich mal pauschal mit eingebunden. (Wenn wir den Code modularer strukturieren, sollten per Dependencies automagisch die passenden Libs mit eingebunden werden; steht auch noch auf der globalen ToDo für's nächste Release...)

TODO:
- make scalable and use colspan + rowspan
- implement the knx_encode for the DPT
- better design of the SVG
- change UI and SVG to show a little clock ("preview") and on click pop up a bigger one for changing the setting
- change SVG design based on visu design (e.g. dynamically recolor parts)
- visually hide the handles
- add digital time to clock (to distinguish AM/PM, but also for those that prefer that and to show the exact time)

(@ die fleißigen Doku-Schreiber: auch wenn's vom Code "stabil" ist und der Editor damit umgehen können sollte, erwarte ich noch einige Änderungen an der Syntax und der Optik (s.o.) => bitte noch nicht dokumentieren)

[vlamers]

Hi,

bei mir gehts leider nicht.
Der Editor macht gar nix wenn ich versuche das Widget zu erstellen.

Wenn ich es manuell eintrage lädt die Visu nicht mehr.

Gruß

[Chris M.]

Enabled hast Du das Plugin, oder?

    <plugins>
      ...
      <plugin name="clock"/>
    </plugins>

und weiter unten in der Test-Seite habe ich das zu erwartende:

    <clock>
      <label>ClTest</label>
      <address transform="DPT:10.001" readonly="false" writeonly="false" variant="">12/7/10</address>
    </clock>
    <info>
      <label>ClInfo</label>
      <address transform="DPT:10.001" readonly="false" variant="">12/7/10</address>
    </info>

[Werner V]

Hi!

Hab hier das selbe Problem. Wenn ich im Editor fertig bin mit den Einstellungen und auf OK klicke passiert nichts, kann nur mit Cancel den Editor verlassen.

Wenn ich es händisch eintrage wie du gepostest hast, läd die Visu nicht mehr.

Plugin hab ich aktiviert.

lg Werner

[Chris M.]

Hm, welcher Browser? Was sagt die Debug-Konsole (wie z.B. Firebug)?

[vlamers]

hi,

hatte es auch aktiviert in der config.
Hab es über dass Handy gemacht also keine debug Möglichkeit.(*duckundweg*)
da ich heute noch etwas länger arbeiten muss werd ich versuchen es morgen zu debuggen.

Gruß

[Werner V]

Hey,

Google Chrome



[INFORMATION]

• Uncaught TypeError: Object [object Object] has no method 'svg'
  • VisuDesign_Custom.addCreator.create /visu_svn/visu/plugins/clock/structure_plugin.js?_=1329086693394:51
  • create_pages templateengine.js:358
  • Editor.saveElement cometeditor.js:371
  • (anonymous function)visuconfig_edit.js:401
  • jQuery.event.dispatch jquery.js:3256
  • jQuery.event.add.elemData.handle.eventHandle jquery.js:2875

[/INFORMATION]

lg Werner

[makki]

Im Klartext, im Editor kommt
$actor.svg is not a function

ich vermute weil es noch nicht geladen ist..

Makki