[FHEM-Tablet-UI] Widgets for fhem-tablet-ui

[roman1528]

Moin.
Erstmal natürlich ein fettes Danke @blackbluegl für das Highchart Widget und @setstate für die Einbindung. Echt schick!

Habe nur nen kleines Problem... Abgesehen davon, dass eine Doku für die ganzen elems gut wäre 

Mein Highchart stellt die 4:cpu_temp nicht richtig dar. Siehe Anhang... Alle Daten werden im Minutentakt gelogt. Aber die Darstellung der 4:cpu_temp springt zwischendrin auf den ebenfalls dargestellten und gelogten 4:cpu_temp_stat (min-Wert) weshalb auch die Darstellung der "line" nicht korrekt ist. Ist das schon aufgefallen oder bekannt?

Code Auswählen Erweitern

<div data-type="highchart"
data-device="rpi_sys"
data-logdevice="FileLog_sysmon"
data-columnspec="4:cpu_temp 4:cpu_temp_stat 5:cpu_temp_stat"
data-linenames="act,min,max"
data-linetypes="line,line,line"
data-minvalue="25"
data-maxvalue="60"
data-height="0"
data-title=""
data-xunit="Heute"
data-yunit="°C"
data-tooltip="{series.name} <b>{point.y:,.1f}</b> °C of CPU"
data-tickInterval="5"
data-tickAmount="8"
                 style="width:1050px;height:650px;">
</div>

[setstate]

Moin.
Erstmal natürlich ein fettes Danke @blackbluegl für das Highchart Widget und @setstate für die Einbindung. Echt schick!

Habe nur nen kleines Problem... Abgesehen davon, dass eine Doku für die ganzen elems gut wäre 

@blackbluegl & @eki: währt ihr noch so nett und fügt einen kleinen Abschnitt ins WIKI für die Charts ein?!

[eki]

Im Wiki ist jetzt auch das chart widget beschrieben.

[setstate]

Wunderbar, vielen Dank.

[Schnabelowski]

Moyn,
hab  irgenwie ein Problem mit  dem "button" Widget...

Wenn ich die  Definition wie im Wiki beschrieben  setze ,wird  der "button" nicht  sichtbar ... aber als  "switch" deklariert schon und  die Verlinkung  funktioniert auch

Code Auswählen Erweitern

<div data-type="button" data-icon="fa-cloud" data-off-background-color="blue" data-url="wetter.html"></div>

Code Auswählen Erweitern

<div data-type="switch" data-icon="fa-cloud" data-off-background-color="blue" data-url="wetter.html"></div>

woran kann es liegen?

Gruß
Peter

[setstate]

Zum Button findest du hier eine Antwort:

http://forum.fhem.de/index.php/topic,34233.msg358401.html#msg358401

[Schnabelowski]

Sorry, dumm von mir. Hab  das irgenwie  übersehen.
Danke

[Schnabelowski]

Noch ne Frage...

versuche  gerade mittels  highchart Widgets im großen Container   drei  Charts Verschiedene  Thermostaten darzustellen ,jedoch scheitere ich die alle  zusammen  zu bekommen.  Data-height und  data-width leider  ohne  funktion.

Code Auswählen Erweitern

      <li data-row="1" data-col="2" data-sizex="8" data-sizey="9">

            <header>Charts</header>
            <div id="ram-container"
                 data-type="highchart"
                 data-device="wz_termostat"
                 data-logdevice="FileLog_wz_termostat"
                 data-columnspec="4:wz_termostat.desired-temp 4:wz_termostat.measured-temp 4:wz_termostat.batteryLevel"
                 data-linenames="soll,ist,Battery"
                 data-linenames="soll,ist,Battery"
                 data-linetypes="line,line,line"
                 data-minvalue="0"
                 data-maxvalue="25"
                 data-width="100"
                 data-height="100"
                 data-title="WOHNZIMMER"
                 data-xunit="Heute"
                 data-yunit="°C"
                 data-tooltip="{series.name} <b>{point.y:,.0f}</b> MB of RAM"
                 data-tickInterval="1800000"
                 data-tickAmount="10" >
            </div>
         <div id="ram-container"
                 data-type="highchart"
                 data-device="jan_termostat"
                 data-logdevice="FileLog_jan_termostat"
                 data-columnspec="4:jan_termostat.desired-temp 4:jan_termostat.measured-temp 4:jan_termostat.batteryLevel"
                 data-linenames="soll,ist,Battery"
                 data-linetypes="line,line,line"
                 data-minvalue="0"
                 data-maxvalue="30"
                 data-width="100"
                 data-height="100"
                 data-title="JAN"
                 data-xunit="Heute"
                 data-yunit="°C"
                 data-tooltip="{series.name} <b>{point.y:,.0f}</b> MB of RAM"
                 data-tickInterval="1800000"
                 data-tickAmount="10" >
              </div>

[Morrino]

Hallo,

finde das chart widget echt nice. Tolle Arbeit.

Habe damit aber leider ein kleines Problem. Und zwar gibt es in meinem LogFile zwei ähnliche Werte. Einmal "consumption" und dann noch "consumptionTotal".

Allerdings werden mit

Code Auswählen Erweitern

data-columnspec='["4:power","4:consumption"]'
beide Werte abwechselnd verwendet.

Mache ich hier etwas falsch?

[Nobby1805]

der Suchbegriff ist ein regEx, consumption^T findet nur consumption ohne ein T dahinter

Edit: viele Wege führen bei RegEx zum Ziel ... aber genau dieser wohl eher nicht versuche consumption[^T] oder auch consumption\b

[Morrino]

der Suchbegriff ist ein regEx, consumption^T findet nur consumption ohne ein T dahinter

Edit: viele Wege führen bei RegEx zum Ziel ... aber genau dieser wohl eher nicht versuche consumption[^T] oder auch consumption\b

Hi,

mit consumption[^T] fubktioniert es.

Vielen dank

[danieljo]

Besteht eine Möglichkeit den Farbkreis für das Thermostat Widget so zu modifizieren das ich den Farbkreis von rot über grün wieder zu rot darstellen kann.

Normalerweise kann ich ja nur den Start und End Wert für die Farbe angeben dazwischen wird ja automatisch interpoliert.

Hintergrund ist folgender das ich gerne den pH-Wert im Bereich von 4 - 10 Darstellen möchte. Was ja kein Problem ist. Allerdingsm möchte ich das bei pH 4 = rot ; pH = grün ; pH = rot dargestellt wird.

[Schlimbo]

Hallo,
habe immer noch das Problem, dass bei mir das Widget "itunes_artwork" nicht funktioniert siehe: http://forum.fhem.de/index.php/topic,36122.msg338277.html#msg338277

In der Javascript-Konsole bekomme ich folgende Fehler Meldung:

Code Auswählen Erweitern

TypeError: $(...).attr(...) is undefined jquery.min.js line 2 > eval:28

Habe mir jetzt die Datei "widget_itunes_artwork.js" angeschaut:

Code Auswählen Erweitern

26|
27|        // dir for standard images
28|        var dir = $('script[src$="fhem-tablet-ui.js"]').attr('src').replace(/(.*\/).*/, '$1');
wie es aussieht gibt es bei mir Probleme den Pfad aufzulösen.
habe nun Zeile 28 so abgeändert:

Code Auswählen Erweitern

28|       var dir = "/opt/fhem/www/tablet/js/";
und nun bekomme ich auch ein Cover angezeigt

Die Standart Bilder für LOADING,STOP und UNKNOWN funktionieren aber trotzedem nicht, evtl. stimmt hier noch etwas mit meinem absoluten Pfad Angabe nicht.

Code Auswählen Erweitern

dir + '../images/loading.svg');
dir + '../images/stop.svg');
dir + '../images/unknown.svg');

Da ich das Widget nicht über ein "MPD" Device, sondern über "XBMC" mit Daten versorge,
funktioniert bei mir der Playstatus nicht, im Modul wird das Reading "STATE" auf "stop" ausgewertet:

Code Auswählen Erweitern

22|        // reading and reading-value that say "Player has stopped"
23|       elem.data('get-playstatus',             elem.data('get-playstatus')         || 'STATE');
24|        elem.data('get-playstatus-stop',        elem.data('get-playstatus-stopp')   || 'stop');
25|        readings[elem.data('get-playstatus')] = true;
XBMC nutzt aber das Reading "playStatus" und dies wird bei stop auf "stopped" gesetzt.
Ändere ich den Code auf das XBMC Reading, funktioniert auch der Playstatus:

Code Auswählen Erweitern

22|        // reading and reading-value that say "Player has stopped"
23|       elem.data('get-playstatus',             elem.data('get-playstatus')         || 'playStatus');
24|        elem.data('get-playstatus-stop',        elem.data('get-playstatus-stopp')   || 'stopped');
25|        readings[elem.data('get-playstatus')] = true;

der Versuch den Playstatus von außen zu versorgen hat leider nicht geklappt:

Code Auswählen Erweitern

<div data-type="itunes_artwork"
    data-device="raspbmc"
                data-get='["currentArtist","currentAlbum","currentTitle"]'
date-get-playstatus="playStatus"
date-get-playstatus-stopp="stopped"
                data-size=400
data-stoppedimg="http://..........stop.png"
</li>


Nutzt das "itunes_artwork" Widget sonnst noch jemand mit XBMC? Und Funktioniert es bei euch ohne Probleme?

[nesges]

Habe mir jetzt die Datei "widget_itunes_artwork.js" angeschaut:

Code Auswählen Erweitern

26|
27|        // dir for standard images
28|        var dir = $('script[src$="fhem-tablet-ui.js"]').attr('src').replace(/(.*\/).*/, '$1');
wie es aussieht gibt es bei mir Probleme den Pfad aufzulösen.
habe nun Zeile 28 so abgeändert:

Code Auswählen Erweitern

28|       var dir = "/opt/fhem/www/tablet/js/";
und nun bekomme ich auch ein Cover angezeigt

Wie sieht denn die zugehörige HTML-Zeile bei dir aus? Diese hier wird gesucht: <script src="....fhem-tablet-ui.js"...>

[Schlimbo]

Hallo nesges,

danke für den Hinweis,
habe gerade gesehen, dass es "<script src="....fhem-tablet-ui.js"...>" in meiner index.html gar nicht gibt.
Hatte den Code einfach aus der "Beispiel" index.html übernommen:

Code Auswählen Erweitern

</body>
    <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.min.js"></script>

    <!-- Remove this line to enable for usage with WebViewControl
    <script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
    <script type="text/javascript" src="/fhem/pgm2/webviewcontrol.js"></script>
    <script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    End for WebViewControl -->
</html>

FHEM läuft bei mir auf einen Raspberry Pi im Pfad /opt/fhem.
Muss ich hier jetzt alle Pfadangaben auf /opt/fhem/www/... ändern?

Habe die Zeile:

Code Auswählen Erweitern

  <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.min.js"></script>
in

Code Auswählen Erweitern

  <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
umbenannt jetzt geht es.

Was ist denn der unterschied zwischen "fhem-tablet-ui.min.js" und "fhem-tablet-ui.js"?
Hatte zuerst beide aktiviert, dann waren einige Widgets doppelt vorhanden.