New FHEM Tablet UI

danieljo · 16 September 2015, 21:23:30

Ich habe zum FTUI nochmal 4 Fragen.

1. Wie mache ich das, dass die Widgets ihre Position beibehalten? Wenn ich Browser die Seite im Vollbild öffne ist alles ok. Wenn ich aber nur ein halbes Browser Fenster öffne verschieben sich die Widget alle. Möchte das so erreichen das die Anorndung die ich Definiere auch immer Angezeigt wird egal ob es in Browser Fenster passt oder nicht. Muss zwar Scrollen aber das ist egal.

2. gibt es ein Widget um in FHEM definierte "at" anzusteuern. Also sowas ähnliches wie "settime" für einen Wecker. Habe verschiedene Zeitschaltuhren mit "at" erstellt die ich gerne anzeigen möchte.

3. Ich habe mir das Widget "wind_direction" erstellt. Funktioniert soweit auch aber statt der Windrichtung in Textform also "N, W, SW usw" bekomme ich nur ein "-" angezeigt. Obwohl sich der Zeiger jenach windrichtung auch ändert.

4. Ich habe ein Symbol erstellt das jenach zustand die Farbe wechseln soll. Im Prinzip funktioniert das auch. aber ich muss erst die Seite neuladen damit die Farbe angenommen wird.

Sky · 17 September 2015, 22:07:13

Ich hatte dieses Problem schon mal ,weiß aber nicht mehr wie die Lösung ist und auch nichts im Forum gefunden .

Die Anzeige im Tablet UI für die Spritpreise ist nicht in Euro , in der HTML Seite allerdings sehe ich keinen Fehler .
Wer kann mir unter die Arme greifen ?

<div type="label" device="Jet" data-get="Diesel" data-unit="€" style="font-size:x-large;color:#aa6900;"></div>
<div data-type="label" class="cell" >Diesel</div>

Bennemannc · 17 September 2015, 22:13:35

Hallo,

vielleicht kommst Du damit weiter
http://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz
oder das
http://www.web-toolbox.net/webtoolbox/html/euro-zeichen.htm

Gruß Christoph

Sky · 17 September 2015, 22:26:49

Danke für die Antwort ,

hilft aber nicht ..........

(

setstate · 18 September 2015, 00:24:30

Wenn ich bei mir data-unit="€" setze wird ein Euro-Zeichen angezeigt.

SvenJust · 18 September 2015, 04:36:36

Der Fehler bei der Darstellung des Eurozeichens läßt sich korrigieren, wenn die HTML-Datei als UTF-8 Datei gespeichert wird.

nesges · 18 September 2015, 22:16:15

Bez. Warnings aus controlfile_updatecheck: Wirklich nachvollziehen konnte ich die Warnings nicht. Sie können mMn nur auftreteten, wenn das controlfile nicht das korrekte Format hat. Eine kleine Anpassung habe ich reingenommen, ich prüfe ob eine "UPD"-Zeile im Controlfile mindestens vier Elemente hat. Sollten trotzdem weiterhin Warnings im Log auftauchen, bitte einmal einen Logausschnitt inkl. der Zeilen, die mit "UPD" anfangen posten. Dafür wäre dann (min) Loglevel 3 nötig.

Code Auswählen

sub controlfile_updatecheck($) {
    use Date::Parse;
    my $raw = shift;

    my $response='';
    my @lines = split "\n", $raw;
    foreach my $line (@lines) {
        my @remote= split " ", $line;
        if(@remote>3 && $remote[0] eq "UPD") {
            Log 3, $line;
            $remote[1]=~s/_/ /;
            
            my @local = stat($remote[3]);
            if($local[7] != $remote[2] || $local[9] < str2time($remote[1])) {
                $response .= $remote[0]." ".$remote[3]."\n";
            }
        }
    }
    return $response;
}

setstate · 19 September 2015, 00:48:40

Es gab gerade ein Update, was beim Farbschema etwas aufgeräumt.
Die meisten Widgets sind nun mit einfachem Extra-CSS schnell konfigurierbar.

Beispiel FTUI in Green oder Blue:

Code Auswählen


        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" />

Auch kann man jetzt die Farben schnell und einfach per CSS Class festlegen.

Beispiel mehrfarbige Switches:

Code Auswählen


<li data-row="4" data-col="4" data-sizex="3" data-sizey="1">
  <header>SWITCH-DEMO</header>
  <div class="inline">
    <div data-type="switch" data-device="dummy1" data-icon="fa-home" class="blue"></div>
    <div data-type="label">blue</div>
  </div>
  <div class="inline">
    <div data-type="switch" data-device="dummy2" data-icon="fa-music" class="green"></div>
    <div data-type="label">green</div>
  </div>
  <div class="inline">
    <div data-type="switch" data-device="dummy3" data-icon="fa-sliders" class="ligthblue"></div>
    <div data-type="label">ligthblue</div>
  </div>
  <div class="inline">
    <div data-type="switch" data-device="dummy4" data-icon="fa-lightbulb-o" class="orange"></div>
    <div data-type="label">orange</div>
  </div>
  <div class="inline">
    <div data-type="switch" data-device="dummy5" data-icon="fa-line-chart" class="red"></div>
    <div data-type="label">red</div>
  </div>
</li>

setstate · 19 September 2015, 01:02:59

Zitat von: danieljo am 16 September 2015, 21:23:30
Ich habe zum FTUI nochmal 4 Fragen.

1. Wie mache ich das, dass die Widgets ihre Position beibehalten? Wenn ich Browser die Seite im Vollbild öffne ist alles ok. Wenn ich aber nur ein halbes Browser Fenster öffne verschieben sich die Widget alle. Möchte das so erreichen das die Anorndung die ich Definiere auch immer Angezeigt wird egal ob es in Browser Fenster passt oder nicht. Muss zwar Scrollen aber das ist egal.

2. gibt es ein Widget um in FHEM definierte "at" anzusteuern. Also sowas ähnliches wie "settime" für einen Wecker. Habe verschiedene Zeitschaltuhren mit "at" erstellt die ich gerne anzeigen möchte.

3. Ich habe mir das Widget "wind_direction" erstellt. Funktioniert soweit auch aber statt der Windrichtung in Textform also "N, W, SW usw" bekomme ich nur ein "-" angezeigt. Obwohl sich der Zeiger jenach windrichtung auch ändert.

4. Ich habe ein Symbol erstellt das jenach zustand die Farbe wechseln soll. Im Prinzip funktioniert das auch. aber ich muss erst die Seite neuladen damit die Farbe angenommen wird.

zu1.) Wenn die Gridster Col/Row und Breite/Höhe stimmen, wird Gridster auch nicht versuchen zu optimieren und Elemente umbauen. Im Beispiel unter "../examples/pagetab/index_main.html" passt alles und es wird nichts verschoben, wenn man das Fenster kleiner macht.
zu2.) Hast du schon das neue widget_datetimepicker gesehen? Auf FHEM Seite dann ein Dummy und die Weckerlogik.
zu3.) kann ich gerade nicht helfen
zu4.) Wie sieht dein Code aus? Wichtig ist, was du unter data-get stehen hast. STATE oder state oder ein anderes Reading? Das Widget "sieht" über Longpoll vermutlich die Änderung nicht. <meta name="longpoll" content="1"> ist aktiviert?

uniqueck · 19 September 2015, 08:45:53

Ich glaube im widget simplechart hat sich ein Fehler eingeschlichen. Die Zeile mit dem refresh ist auskommentiert. Somit zeigt das Widget keine Charts mehr an. Falls das schon wieder behoben ist, habe ich nichts gesagt

//base.refresh.apply(this);

setstate · 19 September 2015, 09:12:27

Das stimmt so. Ist nach der Optimierung jetzt so besser. Vorher wurde einfach zu oft geladen und refresht. Das sah man im Netzwerkmonitor des Browsers und fhem log. Hier gab einen kurzen Hinweis: http://forum.fhem.de/index.php/topic,34233.msg330221.html#msg330221
Man muss jetzt zusätzlich ein Device angeben, das das Update triggert.

Code Auswählen

                 
<div data-type="simplechart"
        data-device="THSensorWZ"
        data-logdevice="FileLog_THSensorWZ"
        data-columnspec="4:temperature"
        data-minvalue="10"
        data-maxvalue="30"
        data-height="60"
        data-width="90"
        class="noticks">
 </div>

data-get="STATE" habe ich hier weggelassen, weil das intern schon per Default gesetzt ist. Nur wenn man data-get auf ein anderes Reading setzen will, muss das angegeben werden.

Newbie · 19 September 2015, 13:00:45

Hallo danieljo,

zu 3. - ich hatte das gleiche Problem, habe dann festgestellt das sich in der Index-Datei die Zeile

Code Auswählen

data-get="wind_condition"

in

Code Auswählen

data-direction="wind_condition"

geändert hat, jetzt funzt es bei mir wieder.

vg

Edit: zu früh gefreut, erst nach einem händischen Refresh der Seite verschwindet das "-" und die Windrichtung wird korrekt angezeigt.

Syntaxterror · 19 September 2015, 13:26:33

Zitat von: setstate am 09 September 2015, 00:56:47
Probiere mal eindeutige Dateinamen für alle Files. Also statt index.html und index2.html -> index.html und next.html

Danke für den Tipp, aber es war was anderes. Ich hatte auf jeder Seite

Code Auswählen

<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
...
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
...

usw.
Das funktioniert nicht.
Das gehört nur in die index.html.
Nun gehts.

Syntaxterror · 19 September 2015, 13:43:10

Ich habe gestern die 99_myUtils um das Updatecheck ergänzt.

Code Auswählen

sub 
controlfile_updatecheck($) {
    use Date::Parse;
    my $raw = shift;

    my $response='';
    my @lines = split "\n", $raw;
    foreach my $line (@lines) {
        my @remote= split " ", $line;
        $remote[1]=~s/_/ /;
       
        my @local = stat($remote[3]);
        if($local[7] != $remote[2] || $local[9] < str2time($remote[1])) {
            $response .= $remote[0]." ".$remote[3]."\n";
        }
    }
    return $response;


####
sub
controlfile_update($) {
    my $device = shift;
    my $url = InternalVal($device, 'url', '');
    my $def = InternalVal($device, 'DEF', '');
   
    fhem("setreading $device available updated");
    fhem("setreading $device files -");
    fhem("define at_recheck_$device at +00:05:00 modify $device $def");
    fhem("update all $url");
}

die fhem.cgf auch entspr. ergänzt.

Der Geschwindigkeitsunterschied ist echt zu merken, danke !
Leider ist das Batterisymbol und das WLAN-Icon verschwunden. Sollte das so?

Außerdem erhalte ich folgende Fehlermeldung:
Error messages while initializing FHEM:
configfile: Invalid Expression $val=controlfile_updatecheck($val);$val
Invalid Expression $val=controlfile_updatecheck($val) ne ''?'yes':'no';$val
Invalid Expression $val=controlfile_updatecheck($val);$val
Invalid Expression $val=controlfile_updatecheck($val) ne ''?'yes':'no';$val

Sieht so aus, als gibts da ein SSL-Problem, denn im Logfile steht:

3: UPDATE_WIDGETS: Read callback: request type was Update, no headers, buffer empty,
Error https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt: Can't connect(2) to https://raw.githubusercontent.com:443: SSL connect attempt failed because of handshake problems error:14094410:SSL routines:SSL3_READ_BYTES:sslv3 alert handshake failure SSL connect attempt failed because of handshake problems error:14094410:SSL routines:SSL3_READ_BYTES:sslv3 alert handshake failure
2015.09.19 10:27:57 1: FHEMWEB SSL/HTTPS error:
2015.09.19 10:27:57 1: FHEMWEB SSL/HTTPS error:

In der HttpUtils steht:

$hash->{conn}->blocking(1);
my $sslVersion = AttrVal($hash->{NAME}, "sslVersion",
AttrVal("global", "sslVersion", "SSLv3"));
IO::Socket::SSL->start_SSL($hash->{conn}, {
Timeout => $hash->{timeout},

Hab keinen Ansatz....

danieljo · 19 September 2015, 19:54:32

Zitat von: setstate am 19 September 2015, 01:02:59
zu1.) Wenn die Gridster Col/Row und Breite/Höhe stimmen, wird Gridster auch nicht versuchen zu optimieren und Elemente umbauen. Im Beispiel unter "../examples/pagetab/index_main.html" passt alles und es wird nichts verschoben, wenn man das Fenster kleiner macht.
zu2.) Hast du schon das neue widget_datetimepicker gesehen? Auf FHEM Seite dann ein Dummy und die Weckerlogik.
zu3.) kann ich gerade nicht helfen
zu4.) Wie sieht dein Code aus? Wichtig ist, was du unter data-get stehen hast. STATE oder state oder ein anderes Reading? Das Widget "sieht" über Longpoll vermutlich die Änderung nicht. <meta name="longpoll" content="1"> ist aktiviert?

Danke für deine Antowrt ich werde mal schauen das ich deine Hinweise umsetze und zu Punkt 4 werde ich den Code noch nachreichen. Aber erstmal ein Update machen hat sich ja wieder einiges geändert. Zu Punkt 3 werde ich auch nochmal testen was da sache ist und mich melden. Vielen Dank erstmal.

MFG, Daniel Joachims