smartVISU Widgets

[oli82]

Die css und js Dateien lasse ich dynamisch einbinden und laut Seitenquelltext werden sie auch geladen. Schaue mir das morgen nochmal an

[dev0]

Die css und js Dateien lasse ich dynamisch einbinden und laut Seitenquelltext werden sie auch geladen.

Habe es gerade mal ausprobiert. Ohne css sehen meine Widgets auch so aus

[oli82]

Schande über mein Haupt Uli.

Da poste ich ein Script, welches dynamisch die js und css Dateien einbindet und importiere dann auch noch die css-Dateien falsch.... (sieht man auch im Screenshot  )

Nachdem ich das Script angepasst habe, wird nun auch dein Stylesheet geladen 

Code Auswählen Erweitern

<!-- custom: dynamically add custom js and css libraries from "js" and "css" subdir -->
{% for item in dir('pages/'~config_pages~'/js') %}
<script type="text/javascript" src="{{ item.path }}"></script>
{% endfor %}
{% for item in dir('pages/'~config_pages~'/css') %}
<link rel="stylesheet" type="text/css" href="{{ item.path }}"/>
{% endfor %}

[dev0]

Fein, dass es jetzt geht. Die eigentliche Steuerung usw. funktioniert auch? Hatte bisher keine Rückmeldung zu diesem Widget bekommen. Ist ja doch einiges zu beachten... Kamst du mit den Beschreibung auf Github gut klar?

[C0mmanda]

Hallo,

gibt es irgendwo eine Anleitung oder Tutorial wie ich die Widgets richtig installiere und in SmartVisu einbinden kann?

Aktuell geht es mir um das widget "basic_extra"
https://github.com/herrmannj/smartvisu-widgets/tree/master/basic_extra

Ich bekomme es nicht ans laufen und die Readme hilft mir leider nicht besonders weiter...

Was ich bisher gemacht habe:

- Widget ins Pages-Verzeichnis kopiert (/pages/MeineWohnung/widgets/basic_extra.js + basic_extra.html)
- Widget in die Visu.js eingebunden (Inhalt aus basic_extra.js)
- Widget in der base.html importiert ( {% import "widgets/basic_extra.html" as basic_extra %} )

Nur, ob das jetzt so richtig ist und wie jetzt der korrekte Syntax ist um daraus auch einen Button zu machen um ihn in SmartVisu zu nutzen ist mir leider Schleierhaft.

Vielen Dank für die Hilfe im voraus!

grtz
C0mmanda

[oli82]

Fein, dass es jetzt geht. Die eigentliche Steuerung usw. funktioniert auch? Hatte bisher keine Rückmeldung zu diesem Widget bekommen. Ist ja doch einiges zu beachten... Kamst du mit den Beschreibung auf Github gut klar?

Naja. Ich hab in den letzen Tagen viel mit SV gemacht. War also nicht so das Problem.
Was ich noch nicht umgesetzt habe, sind die Play-/ Radiolisten und die Multiroom Bedienung (hab nur einen Play1 aktuell).
Alle Funktionen konnte ich bisher noch nicht testen, kommt aber am Wochenende.
Mir würde jedoch in der Beschreibung die Tabellenform aus deinem hm-rtr Widget für die GADs besser gefallen

[dev0]

- Widget in der base.html importiert ( {% import "widgets/basic_extra.html" as basic_extra %} )

Binde das Widget auf der Seite ein auf der du es benötigst, z.B. room_xyz.html und verändere nicht Dateien die zur SV Distribution gehören. Die Doku findest du auf smartvisu.de oder im pages Verzeichnis einer Installation.

[dev0]

Mir würde jedoch in der Beschreibung die Tabellenform aus deinem hm-rtr Widget für die GADs besser gefallen

Stimmt! Nehme ich auf toDo.

[C0mmanda]

Binde das Widget auf der Seite ein auf der du es benötigst, z.B. room_xyz.html und verändere nicht Dateien die zur SV Distribution gehören. Die Doku findest du auf smartvisu.de oder im pages Verzeichnis einer Installation.

Danke, habe das schonmal geändert.

Die Smartvisu-Doku ist bekannt und wird stark genutzt, nur finde ich doch dort keine Infos zu den widgets aus dem git von herrmannj ?!
( https://github.com/herrmannj/smartvisu-widgets )

Smartvisu an sich läuft schon seit Wochen und das auch problemlos. Damit habe ich soweit keine Probleme.
Das korrekte implementieren von den Widgets sowie der richtige Syntax, das ist mein Problem...

[dev0]

nur finde ich doch dort keine Infos zu den widgets aus dem git von herrmannj ?!

Ist ja auch klar, da die Widgets nicht zur SV Distrubution gehören. Das sind Widgets die jemand (für FHEM) geschrieben hat und die dort nur zentral abgelegt sind. Die Syntax der Widgets ergibt sich aus der Macrozeile in den Widgets selbst bzw. aus der Beschreibung direkt darüber (@param)

Das korrekte implementieren von den Widgets sowie der richtige Syntax, das ist mein Problem...

Ich versuche meine Widgets auf Github möglichst gut zu dokumentieren, aber die Arbeit macht sich jeder, da man die grundlegenden Infos auch aus der Macrozeile bekommt.

[C0mmanda]

Die Syntax der Widgets ergibt sich aus der Macrozeile in den Widgets selbst bzw. aus der Beschreibung direkt darüber (@param)
Ich versuche meine Widgets auf Github möglichst gut zu dokumentieren, aber die Arbeit macht sich jeder, da man die grundlegenden Infos auch aus der Macrozeile bekommt.

Das hatte ich mir bereits gedacht, aber ich stehe da aktuell noch wie Ochs vorm Berg.

Dies bezieht sich auf den Teil den ich einbinden möchte:

Code Auswählen Erweitern

/**
* Displays a multi-state button with a popup
*
* @param unique id for this widget
* @param a gad/item
* @param array of possible values
* @param array of pictures used for values
*/
{% macro multistate(id, gad, vals, pics) %}
    {% import "basic.html" as basic %}
   
    <a id="{{ uid(page, id) }}" data-widget="basic_extra.multistate" data-item="{{ gad }}" data-rel="popup" href="#{{id~_popup}}"
        {% for i in 1..vals|length %}
            data-val-{{i}}="{{vals[i-1]}}" data-pic-{{i}}="{{pics[i-1]}}"
        {% endfor %}
        class="ui-{{ type|default('mini') }}" data-role="button" data-inline="true" data-iconpos="center">
        <img class="icon" src="{{ pics[0] }}">
    </a>
   
    <div id="{{id~_popup}}" data-role="popup">
        <div>
            {% for i in 1..vals|length %}
                {{ basic.button(id~_popup_button_~vals[i-1], gad, '', pics[i-1], vals[i-1]) }}
            {% endfor %}
        </div>
    </div>
{% endmacro %}

Dies ist die Macrozeile ( {% macro multistate(id, gad, vals, pics) %} ) .

Mein Verständnisproblem: Wie definiere ich dies nun in SV?
Eingebunden ist das ganze ja so: {% import "widgets/basic_extra.html" as basic_extra %}
Wie definiere ich das nun? {{ basic_extra.multistate(id, gad, vals, pics) }} ?? Oder {{ multistate(id, gad, vals, pics) }}

Dann mein zweites Problem:
Die definition ansich ist klar: multistate(id, gad, vals, pics)
In den Hinweisen zu @params steht:

/**
* Displays a multi-state button with a popup
*
* @param unique id for this widget
* @param a gad/item
* @param array of possible values
* @param array of pictures used for values
*/

id und gad sind weiterhin klar.
ich hänge bei "array of.."
Wie definiere ich denn den array und wie ist der korrekte Syntax?
In der Doku zu smartvisu gibt es keinen Parameter mit "array" (oder ich habe ihn nicht gefunden) so dass ich das daraus evtl ableiten könnte.

Für einen Laien ist das auf dem ersten Blick leider nicht eindeutig.

[dev0]

{% import foo.html as foo %} ist die richtig Syntax und Aufruf mit foo.widget
Zum Array: Google nach "site:smartvisu.de array" und nimm den ersten Treffer.
Edit: Syntax korrigiert.

[C0mmanda]

Vielen Dank, ich habe es jetzt ans laufen gebracht und wieder mal dazugelernt


Eine Frage habe ich dann doch noch:

Ich habe ja das Widget "basic_extra.multistate" eingebaut. ( https://github.com/herrmannj/smartvisu-widgets/tree/master/basic_extra )

Das funktioniert jetzt auch so wie es soll, mit einer kleinen Ausnahme:

Im Normalzustand soll der Button den aktuellen "state" anzeigen. Beim Klick auf den Button erscheint ein PopUp mit beliebig vielen Buttons zum schalten.
Ändere ich jetzt den State soll der Button im Normalzustand den aktuellen (neuen) State anzeigen. Das macht er auch auf dem Laptop.
Auf dem Smartphone allerdings nicht!

Wo kann ich hier mit der Fehlersuche ansetzen? Lese-Schreibrechte des gad sind gesetzt und passen, schalten funktioniert auch mit dem Smartphone, es wird nur das Icon im Button nicht geändert.

Vielen Dank! (Ich hoffe ich konnte mein PRoblem verständlich machen...)

[dev0]

Ich vermute, dass der verwendete Browser ein Problem hat. Teste mal Andere.

[C0mmanda]

Oh man..
Ansich funktioniert das mit dem Button, einzig im Vollbildmodus unter Safari (iPhone) funktioniert es nicht!
Normaler Safarimodus geht, Chrome geht auch.

Danke für den Hinweis....