smartVISU - Widget Vorstellung

[chris1284]

Da man sich aktuell aus 2 Themen die Widgets zusammen suchen muss würde ich ein Widget Thema starten. Ziel ist eine Sammlung von SmartVisu Widgets. Wenn es nicht geünscht ist einfach Löschen den Post

Ich fang mal mit einem Weather Yahoo-Widget auf basis des Fhem-Modules "Weather" an (das Umlaute-Problem ist ja bekannt):
- Anpassung visu.js:

Code Auswählen Erweitern


// ----- mybasic.yahooimage ----------------------------------------------------------
$(document).delegate('[data-widget="mybasic.yahooimage"]', {
'update': function (event, response) {
$('#' + this.id).html('<img class="icon" src="icons/weather/' + response + '.png" style="width:50%;height:50%" >');
}
});

- mybasic.html im Anhang in euren page-Ordner kopieren.
- widget_weather_yahoo.html im Anhang in euren page-Ordner kopiere.
- Einbau auf eurer Seite per

Code Auswählen Erweitern

{% import  "widget_weather_yahoo.html" as weather %}
es kann dann für die aktullen Wetterdaten so auferufen werden:

Code Auswählen Erweitern

{{ weather.weather_current("weather_yahoo") }}
weather_yahoo = id
und für den forecast so, wobei 1 = fc1, 2= fc2, 3 = fc3 usw.

Code Auswählen Erweitern


{% set fcs = [1, 2, 3, 4, 5] %}
{{ weather.weather_forecast("weather_yahoo", fcs) }}

weather_yahoo = id, fcs = variable mit den zahlen
- den Ordner mit den FHEM-Icons /opt/fhem/www/images/default/weather  nach smartVISU/icons/weather kopieren.

Ihr könnt den Pfad zum Iconordner einfach im src Teil in visu.js anpassen falls ihr andere verwendet, smartVISU bringt ja glaube ich auch Wetterbilder...

[dancatt]

Das wäre dann auch was für das neue Git-Repo von Jörg:
https://github.com/herrmannj/smartvisu-widgets

[marvin78]

@bgewehr: Ich sehe, du hast dein SELECT-Widget im git von hermannj eingepflegt. Leider kann es nur 10 Einträge aufnehmen. Es wäre schön, wenn du es durch das hier ersetzen könntest:

Code Auswählen Erweitern


{% macro selectmenu(id, gad, items, label) %}
<div align="center">
        <label for="{{ uid(page, id) }}" class="select">{{ label }}</label>
<select id="{{ uid(page, id) }}" data-widget="basic.selectmenu" data-item="{{ gad }}" data-native-menu="false" data-placeholder="false" />
{% for item in items %}
            <option>{{ item }}</option>
                {% endfor %}
</select>
</label>
    </div>
{% endmacro %}


Das ist deutlich universeller einsetzbar und kann auch mit mehr als 10 Einträgen umgehen. Der Javascript Teil bleibt gleich.

Verwendet wird es dann so:

Code Auswählen Erweitern

{{ basic.selectmenu(id,gad,['Select 1','Select2','Select 3',...,'Select N'],'LABEL') }}

[Cybers]

Da man sich aktuell aus 2 Themen die Widgets zusammen suchen muss würde ich ein Widget Thema starten. Ziel ist eine Sammlung von SmartVisu Widgets. Wenn es nicht geünscht ist einfach Löschen den Post

Ich fang mal mit einem Weather Yahoo-Widget auf basis des Fhem-Modules "Weather" an (das Umlaute-Problem ist ja bekannt):
- Anpassung visu.js:

Code Auswählen Erweitern


// ----- mybasic.yahooimage ----------------------------------------------------------
$(document).delegate('[data-widget="mybasic.yahooimage"]', {
'update': function (event, response) {
$('#' + this.id).html('<img class="icon" src="icons/weather/' + response + '.png" style="width:50%;height:50%" >');
}
});

- mybasic.html im Anhang in euren page-Ordner kopieren.
- widget_weather_yahoo.html im Anhang in euren page-Ordner kopiere.
- Einbau auf eurer Seite per

Code Auswählen Erweitern

{% import  "widget_weather_yahoo.html" as weather %}
es kann dann für die aktullen Wetterdaten so auferufen werden:

Code Auswählen Erweitern

{{ weather.weather_current("weather_yahoo") }}
weather_yahoo = id
und für den forecast so, wobei 1 = fc1, 2= fc2, 3 = fc3 usw.

Code Auswählen Erweitern


{% set fcs = [1, 2, 3, 4, 5] %}
{{ weather.weather_forecast("weather_yahoo", fcs) }}

weather_yahoo = id, fcs = variable mit den zahlen
- den Ordner mit den FHEM-Icons /opt/fhem/www/images/default/weather  nach smartVISU/icons/weather kopieren.

Ihr könnt den Pfad zum Iconordner einfach im src Teil in visu.js anpassen falls ihr andere verwendet, smartVISU bringt ja glaube ich auch Wetterbilder...

Hallo,
ich bekomme das ganze nicht zum laufen. Bei mir werden nur die blauen Rahmen und die Einheiten zu den einzelnen Werten angezeigt. Es werden scheinbar keine Werte eingelesen und demnach auch nicht angezeigt.
Für weather_yahoo muß ich doch meine Yahoo-Weather-Id-Nummer eingeben oder nicht.

Gruß, Sascha

[Jojo11]

@bgewehr: Ich sehe, du hast dein SELECT-Widget im git von hermannj eingepflegt. Leider kann es nur 10 Einträge aufnehmen. Es wäre schön, wenn du es durch das hier ersetzen könntest:

Code Auswählen Erweitern


{% macro selectmenu(id, gad, items, label) %}
<div align="center">
        <label for="{{ uid(page, id) }}" class="select">{{ label }}</label>
<select id="{{ uid(page, id) }}" data-widget="basic.selectmenu" data-item="{{ gad }}" data-native-menu="false" data-placeholder="false" />
{% for item in items %}
            <option>{{ item }}</option>
                {% endfor %}
</select>
</label>
    </div>
{% endmacro %}


Das ist deutlich universeller einsetzbar und kann auch mit mehr als 10 Einträgen umgehen. Der Javascript Teil bleibt gleich.

Verwendet wird es dann so:

Code Auswählen Erweitern

{{ basic.selectmenu(id,gad,['Select 1','Select2','Select 3',...,'Select N'],'LABEL') }}

Hallo Marvin,

habe mal das alte gegen Dein selectmenu ausgetauscht. Funktioniert soweit ganz gut und man erspart sich die Tipperei bei mehreren Feldern. Allerdings habe ich auch damit das Problem, dass führende Nullen abgeschnitten werden (wie hier beschrieben: http://forum.fhem.de/index.php/topic,33231.msg337653.html#msg337653). Hast Du eine Idee, wie sich das verhindern lässt? Ich würde gerne "00", "01" usw. übergeben.

Was mir auch aufgefallen ist: Sowohl die alte als auch Deine Version haben eine Begrenzung. Mehr als 32 Einträge werden nicht angezeigt. Lässt sich das erweitern?

schöne Grüße
Jo

[marvin78]

@führende Null: verwendest du Anführungszeichen? Probiere mal doppelte

@32 Optionen: Ich habe keine Ahnung, warum das so ist. Könnte an Twig oder smartVISU liegen. Generell sollte es kein Limit geben.

[Norbert_G]

Hallo Allerseits,

ich habe das Modul in mein smartvisu eingebaut, eigentlich läuft alles perfekt, aber leider werden keine Icons angezeigt. Selbst ein direkter Verweis auf den Ordner im visu.js hat nicht geholfen. Kann mir jemand einen Tip geben, was man im GAD einstellen muss?.

Danke im Voraus

Norbert

[dev0]

Ich benutze das Widget nicht, aber haben die Icons die richtigen file permissions? Die Seite schon mal mit Firebug o.ä. untersucht?

[reiphi]

Hallo Allerseits,

ich habe das Modul in mein smartvisu eingebaut, eigentlich läuft alles perfekt, aber leider werden keine Icons angezeigt. Selbst ein direkter Verweis auf den Ordner im visu.js hat nicht geholfen. Kann mir jemand einen Tip geben, was man im GAD einstellen muss?.

Danke im Voraus

Norbert

Hallo Norbert_G,

ist zwar schon etwas her, aber konntest du das Problem mit den Icons lösen?
Bei mir werden leider auch keine angezeigt.

Danke!
Philipp