Liste: wie am besten dargestellt?

Begonnen von Bootscreen, 02 November 2016, 12:45:39

Vorheriges Thema - Nächstes Thema

Bootscreen

Moin moin allerseits,

ich habe gerade unsere Einkaufs-Wunderliste in FHEM eingebunden und würde diese nun gerne auch ins FTUI bringen. Kann mir einer sagen wie ich das am besten anstelle? Mein Wunderlist Device readings sehn so aus:
Readings:
     2016-11-02 12:10:40   Task_000        Baby L Sauger
     2016-11-02 12:10:40   Task_000_ID     2227482469
     2016-11-02 12:10:40   Task_001        Lange Spieße
     2016-11-02 12:10:40   Task_001_ID     2233594733
     2016-11-02 12:10:40   Task_002        Flaschen Bürste
     2016-11-02 12:10:40   Task_002_ID     2251836248
     2016-11-02 12:10:40   Task_003        active
     2016-11-02 12:10:40   Task_003_ID     2253895761
     2016-11-02 12:10:40   count           4
     2016-11-02 12:10:40   error           none
     2016-11-02 12:10:38   lastCreatedTask active
     2016-11-02 11:46:17   lastError
     2016-11-02 12:10:40   listText        Baby L Sauger , Lange Spieße, Flaschen Bürste, active
     2016-11-02 11:48:41   state           active


Mit welchem Widget bekomm ich da am ehesten eine schöne Liste, wenn möglich auch eine die sich scrollen lässt wenn es mehr Items als Platz gibt.
Gruß
Oliver

FHEM 5.7 Hardware:
Raspberry PI B+ | HomeMatic USB 2 | 433Mhz Sender (pilight) | nanoCUL (433Mhz)

setstate

Heißt das wirklich Wunderlist oder eher Wunschliste?

Ich würde mit einem Userreading ein Medialist Widget füllen.

Oder ich könnte mal schauen, ob man aus der Medialist ein Wunschliste Widget ableiten könnte.

Bootscreen

Das heißt wirklich Wunderlist: https://www.wunderlist.com/
und hier der Thread zum Modul: https://forum.fhem.de/index.php/topic,55842.0.html

ich schau mir mal userreading und Medialist an. Dank dir erstmal =)
Gruß
Oliver

FHEM 5.7 Hardware:
Raspberry PI B+ | HomeMatic USB 2 | 433Mhz Sender (pilight) | nanoCUL (433Mhz)

setstate

Ok. Ich bin sowas von nicht Up-to-Date.

Schön wäre es, wenn zu jedem item auch ein Produktimage dabei wäre. Das könnte Medialist mit anzeigen.
Die Parameter müssen dazu von der Bedeutung her etwas umbenutzt werden -> Cover , Artist, Titel. usw.

Bootscreen

ich habs auch erst heute gesehen ^^

das mit den Bildern wäre zwar nice aber in der Praxis nicht nutzbar. Zum einen unterstützt Wunderliste das nicht und zum andren wäre es auch nicht hilfreich wenn ich schnell was auf die lsite setze und dann erst noch nen bild raussuchen muss. Dauert dann einfach zu lange, grad am Tablet in der Küche.

Ich versuch mich grad mal dran das medialist in eine einfache liste umzubauen. mal sehn obs was wird.
Gruß
Oliver

FHEM 5.7 Hardware:
Raspberry PI B+ | HomeMatic USB 2 | 433Mhz Sender (pilight) | nanoCUL (433Mhz)

setstate

Medialist erwartet die Liste als JSON String.

Hier hatte ich schon mal erklärt, wie ich per Perl diese zusammen baue.

https://forum.fhem.de/index.php/topic,53863.0.html

Bootscreen

Ich habs jetzt auf die schnelle soweit hinbekommen das ich mir ein Userreading zusammen baue und dann mit einem eigenem Widget darstelle.

Grundwidget war das Medialist, hab es nur etwas minimalisiert. Vllt bekommt es auch jemand noch hübscher hin als ich ^^ Grad die Scrolleiste würde ich gern anpassen, nur weiß ich nicht wie.

Vllt kann mir ja da jemand helfen und mich etwas weiter bilden.
Gruß
Oliver

FHEM 5.7 Hardware:
Raspberry PI B+ | HomeMatic USB 2 | 433Mhz Sender (pilight) | nanoCUL (433Mhz)

setstate

Zitat von: Bootscreen am 02 November 2016, 15:34:55
Grad die Scrolleiste würde ich gern anpassen, nur weiß ich nicht wie.


Das Aussehen der Scrollleiste wird vom OS definiert. Auf einem Tablet/Mobil ist das eh nebensächlich, da dort die Scrollbars nur beim Scrollen gezeigt wird. Beim Desktop-Browser kann man mit viel CSS die Scrollleiste veränden. Siehe Google  8)

Bootscreen

Oh, gar nicht gesehen das du noch geantwortet hast.  Ahso na dann lass ich es erstmal und nehms am Rechner so hin, FTUI läuft da eh selten.

Aber mal was anderes wie bau ich longpoll ein? Denn bei mir aktualisiert sich die Liste leider nicht wenn sich am device etwas ändert :(
Gruß
Oliver

FHEM 5.7 Hardware:
Raspberry PI B+ | HomeMatic USB 2 | 433Mhz Sender (pilight) | nanoCUL (433Mhz)

tdoe

#9
Hallo Bootscreen,

Kannst du bitte schreiben wie du das widget einsetzt? Bekomme es nicht zum laufen.
Die 2 Files hab ich an die richtige stelle kopiert und als data-device die Einkaufsliste gegeben.

Was für ein Userreading verwendest du?

Danke und Gruß Tobias

Edit:
Die Fehlermeldung sagt:
Error
widget_list.js:16
ReferenceError: getClassColor is not defined

tdoe

#10
Hallo Bootscreen,

ich habs ans fliegen bekommen.

folgendes musste ich machen damit die wunderliste funktioniert:

1. Änderungen in "widget_list.js:

--- /tmp/widget_list.js 2017-01-22 10:40:28.219758284 +0100
+++ www/tablet/js/widget_list.js 2017-01-21 23:28:00.143028879 +0100
@@ -13,9 +13,9 @@
         elem.initData('get'                     ,'STATE');
         elem.initData('set'                     ,'play');
         elem.initData('cmd'                     ,'set');
-        elem.initData('color'                   ,getClassColor(elem) || getStyle('.'+this.widgetname,'color') || '#222');
-        elem.initData('background-color'        ,getStyle('.'+this.widgetname,'background-color')    || 'transparent');
-        elem.initData('text-color'              ,getStyle('.'+this.widgetname,'text-color')    || '#ddd');
+        elem.initData('color'                   ,ftui.getClassColor(elem) || ftui.getStyle('.'+this.widgetname,'color') || '#222');
+        elem.initData('background-color'        ,ftui.getStyle('.'+this.widgetname,'background-color')    || 'transparent');
+        elem.initData('text-color'              ,ftui.getStyle('.'+this.widgetname,'text-color')    || '#ddd');
         elem.initData('width'                   ,'100%');
         elem.initData('height'                  ,'100%');
         elem.initData('indicator'               ,'-');


2. 99_myUtils.pm ergänzen:

sub list2json()
{
  my $b='[ ';
  my @arr = split(/\,/, ReadingsVal("Einkaufsliste","listText",""));
  foreach my $a (@arr)
    {
      $b.='{"Title":"'.trim($a).'"},';
    }
  $b=$b.']';
  $b=~s/\,]/ ]/g;
  return $b;
}


3. userreading zur wunderliste hinzufügen:
attr Einkaufsliste userReadings ListeJSON { list2json();; }

4. html ergänzen:
   <div class="top-space inline ">
     <div class="notransmit" data-type="input" id="sendTask"></div>
   </div>

   <div class="top-space inline ">
     <div class="round" data-type="link" data-width="80" data-height="40" data-color="white" data-background-color="#AA6900" data-icon="fa-send" data-device="Einkaufsliste" data-set="addTask" data-value="#sendTask">OK</div>
   </div>
   <div class="top-space">
     <div data-type="list" data-size="80%" data-device="Einkaufsliste" data-get="ListeJSON" ></div>
   </div>


Gruß Tobias

Jack-Luck

Hallo,

die Darstellung von Tobias seine Liste sieht gut aus, habe versucht das genauso zu machen,
jedoch funktioniert es bei mir nicht. Wie bist du genau vorgegangen?

magix99

Hallo, schließe mich hier an.
Bei mir funktioniert die Anzeige im HTML auch nicht, die Liste ist leer.
die Readings werden aber befüllt.

Hat jemand ein Tip?

lunak

Sehr cool, herzlichen Dank für eure Arbeit
Ich hab noch eine kleine Verbessung um auch mehrere Listen im FTUI anzeigen zu können

99_myUtils.pm die list2json Funktion ändern in:
### Zusatzfunktion für Wunderlist
sub list2json($)
{
my ($obj) = @_;
  my $b='[ ';
  my @arr = split(/\,/, ReadingsVal($obj,"listText",""));
  foreach my $a (@arr)
    {
      $b.='{"Title":"'.trim($a).'"},';
    }
  $b=$b.']';
  $b=~s/\,]/ ]/g;
  return $b;
}


2. userreading ändern in:

attr wunderlist_ToDoliste userReadings ListeJSON { list2json("wunderlist_ToDoliste");; }


wobei wunderlist_ToDoliste, der Name der zu übergebenden Liste ist