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

[tomster]

Ich habe dafür zwei Optionen eingebaut:

data-stripbrackets true/false, Default: false. Löscht alle geklammerten Inhalte aus allen Readings. "Geklammert" ist alles in ({[<>]})
data-stripregex regex, Default: "". Löscht alle Matches des regulären Ausdrucks "regex". Achtung: Regex-Notation ohne Slashes, also ".*" statt "/.*/"

Servus nesges!

Hab grad einmal wieder ein bissl an meinem FTUI-Code gebastelt. Beim iTunes-Widget hast du ja obige Optionen eingebaut. Kann es sein, dass mpdnowplaying das data-stripregex (noch) nicht versteht? Ich bilde mir zwar ein, dass ich das in irgendeiner früheren Version Mal benutzt hatte, aber Stand: heute geht es wohl nicht (mehr) - kann aber auch sein, dass meine Erinnerung nicht mehr geht...

[dadoc]

Hi nesges,
ich bin eifriger Nutzer des iframe Widgets. Seit Neuestem (seit ich auf Apache umgestellt habe) macht der data-check-src-Trick Probleme, aber merkwüdigerweise nur im iOS Safari auf dem iPad, nicht aber in Firefox, Chrome usw. - da funktioniert es immer noch.

Code Auswählen Erweitern


data-type="iframe"
data-src="http://192.168.50.14/query?getbouquetchannel&Free%20Tv"
data-check-src="http://192.168.50.24:8083"
data-fill="yes"

oder

Code Auswählen Erweitern


data-type="iframe"
data-src="http://www.tvspielfilm.de/tv-programm/sendungen/jetzt.html"
data-check-src="http://192.168.50.24:8083"
data-fill="yes"

Fällt Dir dazu vielleicht etwas ein?
Grüße
Martin

[bmwfan]

Hallo,

ich verwende das wind_direction widget mit einer Wetterstation HM-WDS100-C6-O und dem rain- und statistics-Modul. Das Einbinden hat sehr gut funktioniert. Die Wetterstation liefert die Windrichtung in Grad. Bei der Anzeige der Windrichtung im Widget erscheint aber nur eine Tilte (für Windstille), jedoch keine Richtungsanzeige. Die Messwerte des Sensors:

Code Auswählen Erweitern

2016-03-18 18:56:25   state           T: 8.7 H: 57 W: 0 R: 5.015 IR: 0 WD: 65 WDR: 45 S: 249 B: 9
     2016-03-18 18:56:25   sunshine        249
     2016-03-18 18:56:25   temperature     8.7
     2016-03-18 18:56:25   windDirRange    45
     2016-03-18 18:56:25   windDirection   65
     2016-03-18 18:56:25   windSpeed       15

Meine Konfiguration des Widgets:

Code Auswählen Erweitern

<header class="headerTransparent">WINDRICHTUNG</header>
<div data-type="wind_direction"
data-device="Ga_UmweltSen"
data-direction="windDirection"
data-speed="windspeed"
data-calm="~"
data-size="120"
data-tickstep="30"
data-angleoffset="0"
class=""
style="padding-top:7px;">
</div>
<div class="top-space">
<div data-type="label"
class="inline medium">Wind:
</div>
<div data-type="label"
data-device="Ga_UmweltSen"
data-get="windSpeed"
data-unit=" km/h"
data-limits="[0, 19, 28, 38, 49, 74, 102, 117]"
data-colors='["#ffffff","#dddddd","#aa6900","#aa6900","#ff9999","#ff6666","#ff3333","#ff0000"]'
style="display:inline"
class="big inline" >
</div>
</div>

Ich hätte die Windrichtung gerne nicht in Grad sondern in Richtungen angezeigt.

1: Hat jemand eine Idee, warum gar nichts angezeigt wird?
2: Wie kann ich Grad in Richtung umrechnen.
3: Wie kann ich den state vom String in seine Einzelwerte zerlegen und diese Werte mit widgets ausgeben? Ich habe mal ein Beispiel von Betateilchen als Perl-Code gefunden, finde es aber nicht mehr und meine Perl-Kenntnisse reichen hierzu nicht aus.

Gruß Jürgen

[Jojo11]

Hallo,

zu dem widget "wind-direction" hätte ich auch eine Frage:
Wie kann ich die Farbe des Richtungsindikators ändern? Bisher habe ich das nur direkt in der widget_wind_direction.js geschafft, was ich aber vermeiden möchte.

schöne Grüße
Jo

[Jojo11]

Hallo,

ich habe leider noch ein Detail, bei dem ich nicht weiter komme 
Ich setze ein vertikales circlemenu ein und würde gerne die Hintergrundfarbe bzw. diesen abgerundeten Rahmen ändern/entfernen. Der Code, mit dem ich rumprobiere ist:

Code Auswählen Erweitern


<div data-type="circlemenu" data-border="square" data-item-width="60" data-item-height="60" data-circle-radius="60" data-direction="vertical" class="circlemenu keepopen" style="background:#191919;">
        <ul>
          <li>
            <div data-type="symbol" data-icon="fa-bars" class="inline" style="background:#191919;margin:0px;padding:0px;"></div>
          </li>
          <li><div data-type="link" data-color="blue" data-url="#link1.html" style="background:#191919;">LINK1</div></li>
          <li><div data-type="link" data-color="blue" data-url="#link2.html">LINK2</div></li>
        </ul>
      </div>

Ergebnis s. screenshot. Das hellere Grau würde ich gerne ändern, finde aber die richtigen css-Parameter nicht.

schöne Grüße
Jo

[setstate]

So kann man die Farben ändern:

Code Auswählen Erweitern


<div data-type="circlemenu" data-border="square" data-direction="vertical" class="circlemenu keepopen">
<ul>
  <li>
    <div data-type="symbol" data-icon="fa-bars" data-off-background-color="green" data-background-icon="fa-square" class="inline"></div>
  </li>
  <li><div data-type="link" data-color="blue" data-url="#link1.html" data-background-color="yellow">LINK1</div></li>
  <li><div data-type="link" data-color="blue" data-url="#link2.html" data-background-color="yellow">LINK2</div></li>
</ul>
</div>


Beim Symbol braucht es ein Background-Icon, was man färben kann. Null kann man beim Symbol nicht farblich ändern.

Bitte gewöhnt euch nicht an, im HTML Code Style Attribute zu benutzen! Auch wenn einige Beispiele von Usern das beinhalten, es kommt sehr sehr unschönes HTML dabei raus. Es ist zwar auf die Schnelle bequem, aber besser ist es mit class und id zu arbeiten und dann im CSS definieren, welches Style diese Elemente bekommen sollen. Farben und einige andere Eigenschaften von Widgets sind per data-* Attribute änderbar. Wenn eine bestimmte wichtige Eigenschaft fehlt, können wir das bestimmt noch erweitern.

[Jojo11]

Hallo,

ich gelobe Besserung 
Eigentlich bin ich gerade auch nur am testen, weswegen ich direkt im html mit styles arbeite.
Allerdings funktioniert Deine Korrektur auch nicht 100%ig.
Um das grüne Hintergrund-icon ist immer noch dieser hellgraue Bereich, der sich nicht färben lässt. Dieser Bereich ist von den Abmessungen so wie die beiden gelben Bereiche. Scheint so, als würde das gelbe icon ihn nicht 100% überdecken. Kann man diesen Hintergrund komplett ausblenden?

schöne Grüße
Jo

Nachtrag: Ich glaub ich hab's gefunden:

Code Auswählen Erweitern


.gridster ul li {
    background-color:XXX


[bmwfan]

Verwendet niemand das Wind_Direktion widget?

[CoolTux]

Doch ich, wieso?

[Jojo11]

Ich auch. Bin immer noch auf der Sucher nach einer Möglichkeit, die Farben unkompliziert zu ändern (das Orange der Richtungsanzeige z.B.) 

schöne Grüße
Jo

[bmwfan]

@CoolTux
Da ich angenommen hatte, dass diejenigen die das widget nutzen auch dieselben Probleme haben und einen Tip geben können.

Gruß Jürgen

[Freeride]

Ich hab das gleiche Problem, dass die Windrichtung nicht mehr angezeigt wird. Gibt es eine Lösung für dieses Problem?

[setstate]

Das Widget Wind_Direction funktioniert grundsätzlich.
Wir können den Fehler nur finden, wenn du uns deinen Code zeigst und die Readings des Devices ("list MyDevice")

[stefanru]

Hi,

wer wartet das Tablet UI Weather Widget?

Ich hätte da einen Wunsch.
Meine WS 3080 / 1080 läuft mit pywws und mit FHEM anbindung mit dem Modul WS3600.

pywws kann den Wetter Trend schon als ZambrettiCode zurückgeben.
Es ist also keine Konvertierung mehr nätig für die Meteocons.

Somit habe ich mir das widget_weather.js erweitert für meteoconsdirect:
Im HTML:
<div data-type="weather" device-type="CODE" data-device="meineWetterstation" data-get="Forecast-Code" data-imageset="meteoconsdirect" style="font-size:300%"></div>

Im JS:
beim translate:
if (device_type == 'CODE') {
translate = false;
}

bei der Ausgabe:
} else if (elem.data('imageset') == "meteoconsdirect") {
   elem.attr('data-icon', val);               
}

Wer kann das einpflegen?

Gruß,
Stefan

[setstate]

Mache ich. Wenn ich es vergessen sollte, bitte wieder erinnern.