New FHEM Tablet UI

[setstate]

Im moment drück ich mich noch drum, aber ich sehe den Bedarf

Oder die stable Widgets kommen mit in den Standard Projekt Folder?! (Per pull request)

[nesges]

Oder die stable Widgets kommen mit in den Standard Projekt Folder?! (Per pull request)

Wäre mir zwar recht, aber das könnte auf lange Sicht dazu führen, dass du ziemlich viele hochspezialisierte Widgets (zB kodinowplaying) im Projekt hast, die eigentlich nur eine handvoll Leute brauchen.

[mw_fhem]

Warum drückst du dich? Deine Widgets braucht man doch 

[Phil__]

Hallo setstate,

ich weiss die Frage wurde hier schonmal behandelt....
Aber ist es möglich das man im thermostat-Widget die Schrittweite auf 0.5 einstellen kann.
Also nicht das du das jetzt komplett änderst, aber könntest du mir erläutern ob ich das bei mir ändern könnte und wenn ja wie?

Viele Grüße
Phil__

[stromer-12]

das geht schon seit http://forum.fhem.de/index.php/topic,34233.msg278255.html#msg278255

- **data-step**  : step size for value adjustment e.g. 0.5 (default 1)

[chris1284]

Wäre mir zwar recht, aber das könnte auf lange Sicht dazu führen, dass du ziemlich viele hochspezialisierte Widgets (zB kodinowplaying) im Projekt hast, die eigentlich nur eine handvoll Leute brauchen.

Und? wer sie nicht braucht wird sie nicht nutzen, für alle anderen ist es eine erleichteung. die paar kb mehr laden wird heutzutage keinen mehr sdas leben schwer machen 
es ist so schon mehr aufwand als es sein müsste erstmal alles zusammen zu kopieren was man will/braucht (wenn man den per zufall mal auf die 2. quelle im forum stößt) und dann fhem , das standard projekt und ggf deine widget zu updaten (und dazu kommen noch module nicht eingechecked sind usw usw).

[Phil__]

Wenn ich in einem Feld, 1 hoch 3 breit, Temperatur Luftfeuchtigkeit und Taupunkt als Label anzeigen möchte. Bekomme ich das nur "Linksbündig" hin, gibt es eine Möglichkeit die 3 Werte/Labels in dem 3 breiten Feld zu zentrieren?

[setstate]

Wenn ich in einem Feld, 1 hoch 3 breit, Temperatur Luftfeuchtigkeit und Taupunkt als Label anzeigen möchte. Bekomme ich das nur "Linksbündig" hin, gibt es eine Möglichkeit die 3 Werte/Labels in dem 3 breiten Feld zu zentrieren?

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="3" data-sizey="1">
     <header>DEMO</header>
     <div class="cell">
             <div data-type="label" data-device="THSensorWZ" data-get="temperature"
                     data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]'
                     data-unit="%B0C%0A" class="cell bigger thin">
             </div>
             <div data-type="label" data-device="THSensorWZ" data-fix="0"
                     data-part="4" data-limits='[0,40,60]'
                      data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="cell bigger thin">
             </div>
     </div>
</li>

[Phil__]

Sorry, vllt habe ich mich missverständlich ausgedrückt. Ich meinte alle drei Werte nebeneinander und die drei dann zentriert oder gleichmäßig verteilt über das 3 breite Feld???

[setstate]

dann nur noch 'inline' zusätzlich rein.

class="cell bigger thin inline"

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="3" data-sizey="1">
     <header>DEMO</header>
     <div class="cell">
        <div data-type="label" class="inline">Temp: </div>
        <div data-type="label" data-device="THSensorWZ"
               data-get="temperature" data-limits='[-73,19,23]'
               data-colors='["#6699FF","#aa6900","#bb6242"]'
               data-unit="%B0C%0A"
               class="cell bigger thin inline"></div>
        <div data-type="label" class="inline">Hum: </div>
        <div data-type="label" data-device="THSensorWZ"
                data-fix="0" data-part="4"
                data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]'
                data-unit="%"
                class="cell bigger thin inline">
        </div>
     </div>
</li>


Man kann auch das 'cell' bei den großen Zahlen weglassen, dann wird nicht vertical zentriert .

Code Auswählen Erweitern


class="bigger thin inline"

[Sky]

Laut Post 1 soll ja das Update in Fhem mit

update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

funktionieren , bei mir kommt als Ausgabe :

Events (Filter:global):
2015-04-14 20:49:20 Global global UPD www/tablet/css/fhem-tablet-ui.css
2015-04-14 20:49:21 Global global open ./www/tablet/css/fhem-tablet-ui.css failed: Permission denied, trying to restore the previous version and aborting the update

Da bei der Erstinstallation Benutzer Pi als "Standart" eingerichtet wurde und kein root weiß ich im Moment nicht was ich wo ändern muss.

Wer weiß mehr ??

PS: Tolle Community !!!!!

[Phil__]

Fhem hat keine Zugriffsrechte auf die Dateien.

In der Linux Shell:
In das in das Verzeichnis .../fhem/www wechseln
Dann
chown -R fhem:root tablet

[setstate]

Oder du löschst alles unter www/tablet/ weg.
Wenn du Änderungen gemacht hast, z.B. an der index.hmtl, diese vorher wegkopieren.
Und machst dann ein update.

[stromer-12]

Das Problem hatte ich auch dieser Tage als ich update das erste mal nutze. wollte er bei mir widget_select öffnen.
Ich hatte dann das tablet-Verzeichnis geleert und der erneute update Aufruf klappte dann auch.

[jual]

Ich habe an meinem TabUI weiter gearbeitet und eine weitere Seite erstellt, die ich hier gerne vorstellen möchte. Hierbei handelt es sich um eine Seite, auf der meinei Sonos Player und die TV Anlage gesteuert werden können. Bei der Steuerung der TV Anlage handelt es sich aber nur um das ein- und ausschalten sowie den Aufruf von Aktionen mittels Harmony Hub und natürlich einer Lautstärkeregelung.

Bei den Sonosgeräten habe ich die neue Listenfunktion (select) genutzt und steuere darüber den Start meiner Playlisten, die im Sonos gespeichert sind. Hierbei habe ich einen Dummy genutzt, was aber auch zu Problemen führt. Da hier kein "get" für Dummys zur Verfügung steht wird die ausgewählte Liste nicht mehr angezeigt und auch beim "set" hatte ich ein paar Probleme, da ich eigentlich ein setreading gebraucht hätte. Die aktuelle Lösung funktioniert aber.

Hier nun der entsprechende Code:

Erst einmal eine einfache Dummy Definition:

Code Auswählen Erweitern

define duSonosPlaylists

Ein notify, damit nach der Auswahl einer Playlist der Player direkt gestartet wird:

Code Auswählen Erweitern

define notSonosPLaylist notify duSonosPlaylists {SonosPlaylistStarten($EVENT)}


Zur Ermittlung der aktuellen Playlisten kann man regelmäßig folgende Funktion aufrufen, die in myutils99 eingefügt werden muss:

Code Auswählen Erweitern

#aktuelle Playlist ermitteln und im Dummy als Liste speichern
sub MeinePlayList()
{
   #Buero ist am Rooter und immer an, daher Playlist hier ermitteln
   fhem("get Sonos_Buero Playlists; sleep 2;");
   my $Playlist = ReadingsVal("Sonos_Buero", "LastActionResult", "Keine");

   my @Playlists = split('GetPlaylists: ', $Playlist);

   #zusätzllich noch unseren einzigen Radiosender dazu packen
   my $playlistneu = '"SWR3 Elchradio",'.$Playlists[1];

   #playlist für TABUI select aufbereiten
   $playlistneu =~ s/,/:/g;

   fhem("setreading duSonosPlaylists Playlist ".$playlistneu);   
}


Die Sleep Aktion habe ich bei mir eingebaut, da die Liste manchmal nicht richtig gefüllt wird und ich nicht sicher bin, ob das vielleicht an meinem neuen schnellen raspi2 liegt. Hier habe ich vermutet, dass die Perl Ausführung schon weiter läuft während die Sonos-Funktionen zum Abruf der Listen noch nicht ganz fertig ist. Vielleicht hat ja jemand eine Idee, ob die Annahme richtig ist.

Nun gibt es noch eine Funktion zum Abspielen (immer mit der Sonderbehandlung für unseren einzigen Radiosender):

Code Auswählen Erweitern

sub SonosPlaylistStarten($)
{
   my ($Playlist) = @_;
   my @player = split(' ',$Playlist);
   my @Liste = split($player[0]." ", $Playlist);
   
  #List für Sonos aufbereiten und Leerzeichen maskieren
   $Liste[1] =~ s/ /%20/g;

   if($Playlist =~ /SWR3/)
   {
      fhem("set $player[0] StartRadio $Liste[1]");
   }
   else
   {
      fhem("set $player[0] StartPlaylist $Liste[1]");
   }
}


Schließlich folgt noch der eigentliche Coder für das TabUI:

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="1" data-sizey="2">
<header>MultiMedia</header>
<div data-type="switch" data-device="wz_MultiMedia" data-get-on="an" data-get-off="aus" data-icon="fa-power-off" class="cell bigger"></div>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-set="mute" data-get="mute" data-icon="fa-volume-off" class="cell bigger"></div>

</li>

<li data-row="1" data-col="3" data-sizex="4" data-sizey="2">
<header>Sonos Wohnzimmer</header>
<div class="container left wider" style="max-width:16em;">
<div data-type="image" data-device="Sonos_Wohnzimmer" data-get="currentAlbumArtURL" data-size="40%"></div>
<div data-type="label" data-device="Sonos_Wohnzimmer" data-get="infoSummarize2"></div>
<div data-type="select" data-device="duSonosPlaylists" data-list="Playlist" data-set="Sonos_Wohnzimmer" "class="wider"></div>
</div>
<div class="container inline wider">
<div class="left">
<div data-type="push" data-device="Sonos_Wohnzimmer" data-set="PLAY" data-icon="fa-play" class="cell bigger"></div><p></p>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-set="PAUSE" data-icon="fa-pause" class="cell bigger"></div><p></p>
</div>
<div class="right">
<div data-type="volume" data-device="Sonos_Wohnzimmer" data-get="Volume" data-set="Volume" data-min="0" data-max="30" class=""></div>
<div data-type="label" data-device="Sonos_Wohnzimmer" data-get="transportState"></div>
</div>
</div>
<div>
</li>
<li data-row="1" data-col="7" data-sizex="4" data-sizey="2">
<header>Sonos Küche</header>
<div class="container left wider" style="max-width:16em;">
<div data-type="image" data-device="Sonos_Kueche" data-get="currentAlbumArtURL" data-size="40%"></div>
<div data-type="label" data-device="Sonos_Kueche" data-get="infoSummarize2"></div>
<div data-type="select" data-device="duSonosPlaylists" data-list="Playlist" data-set="Sonos_Kueche" "class="wider"></div>

</div>
<div class="container inline wider">
<div class="left">
<div data-type="push" data-device="Sonos_Kueche" data-set="PLAY" data-icon="fa-play" class="cell bigger"></div><p></p>
<div data-type="push" data-device="Sonos_Kueche" data-set="PAUSE" data-icon="fa-pause" class="cell bigger"></div><p></p>
</div>
<div class="right">
<div data-type="volume" data-device="Sonos_Kueche" data-get="Volume" data-set="Volume" data-min="0" data-max="30" class=""></div>
<div data-type="label" data-device="Sonos_Kueche" data-get="transportState"></div>
</div>
</div>
<div>
</li>

<li data-row="3" data-col="1" data-sizex="2" data-sizey="2">
<header>MultiMedia</header>
<div data-type="volume" data-device="wzOnkyo" data-get="volume" data-set="volume" data-min="0" data-max="30" class="wider"></div>
<div data-type="select" data-device="WohnzimmerHub" data-items='["Fernsehen","Musik.hören","TV.PC","SWR3","Chromecast"]' data-get="activity" data-set="activity" class=""></div>
</li>

<li data-row="3" data-col="3" data-sizex="4" data-sizey="2">
<header>Sonos Büro</header>
<div class="container left wider" style="max-width:16em;">
<div data-type="image" data-device="Sonos_Buero" data-get="currentAlbumArtURL" data-size="40%"></div>
<div data-type="label" data-device="Sonos_Buero" data-get="infoSummarize2"></div>
<div data-type="select" data-device="duSonosPlaylists" data-list="Playlist" data-set="Sonos_Buero" "class="wider"></div>

</div>
<div class="container inline wider">
<div class="left">
<div data-type="push" data-device="Sonos_Buero" data-set="PLAY" data-icon="fa-play" class="cell bigger"></div><p></p>
<div data-type="push" data-device="Sonos_Buero" data-set="PAUSE" data-icon="fa-pause" class="cell bigger"></div><p></p>
</div>
<div class="right">
<div data-type="volume" data-device="Sonos_Buero" data-get="Volume" data-set="Volume" data-min="0" data-max="30" class=""></div>
<div data-type="label" data-device="Sonos_Buero" data-get="transportState"></div>
</div>
</div>
<div>
</li>
<li data-row="3" data-col="7" data-sizex="4" data-sizey="2">
<header>Sonos Bad</header>
<div class="container left wider" style="max-width:16em;">
<div data-type="image" data-device="Sonos_Bad" data-get="currentAlbumArtURL" data-size="40%"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="infoSummarize2"></div>
<div data-type="select" data-device="duSonosPlaylists" data-list="Playlist" data-set="Sonos_Bad" "class="wider"></div>

</div>
<div class="container inline wider">
<div class="left">
<div data-type="push" data-device="Sonos_Bad" data-set="PLAY" data-icon="fa-play" class="cell bigger"></div><p></p>
<div data-type="push" data-device="Sonos_Bad" data-set="PAUSE" data-icon="fa-pause" class="cell bigger"></div><p></p>
</div>
<div class="right">
<div data-type="volume" data-device="Sonos_Bad" data-get="Volume" data-set="Volume" data-min="0" data-max="30" class=""></div>
<div data-type="label" data-device="Sonos_Bad" data-get="transportState"></div>
</div>
</div>
<div>
</li>


So, dann wünsche ich viel Spaß damit und hoffe weitere Anregungen auch für andere Lösungen damit bereit gestellt zu haben.