Autor Thema: Liste: wie am besten dargestellt?  (Gelesen 2616 mal)

Offline Bootscreen

  • Full Member
  • ***
  • Beiträge: 176
Liste: wie am besten dargestellt?
« am: 02 November 2016, 12:45:39 »
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)

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3749
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Liste: wie am besten dargestellt?
« Antwort #1 am: 02 November 2016, 13:07:08 »
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.

Offline Bootscreen

  • Full Member
  • ***
  • Beiträge: 176
Antw:Liste: wie am besten dargestellt?
« Antwort #2 am: 02 November 2016, 13:15:23 »
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)

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3749
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Liste: wie am besten dargestellt?
« Antwort #3 am: 02 November 2016, 13:48:06 »
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.

Offline Bootscreen

  • Full Member
  • ***
  • Beiträge: 176
Antw:Liste: wie am besten dargestellt?
« Antwort #4 am: 02 November 2016, 14:40:45 »
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)

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3749
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Liste: wie am besten dargestellt?
« Antwort #5 am: 02 November 2016, 15:05:58 »
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

Offline Bootscreen

  • Full Member
  • ***
  • Beiträge: 176
Antw:Liste: wie am besten dargestellt?
« Antwort #6 am: 02 November 2016, 15:34:55 »
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)

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3749
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Liste: wie am besten dargestellt?
« Antwort #7 am: 02 November 2016, 20:41:48 »
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)

Offline Bootscreen

  • Full Member
  • ***
  • Beiträge: 176
Antw:Liste: wie am besten dargestellt?
« Antwort #8 am: 04 November 2016, 12:49:45 »
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)

Offline tdoe

  • Full Member
  • ***
  • Beiträge: 103
Antw:Liste: wie am besten dargestellt?
« Antwort #9 am: 21 Januar 2017, 14:49:53 »
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
« Letzte Änderung: 21 Januar 2017, 15:48:08 von tdoe »

Offline tdoe

  • Full Member
  • ***
  • Beiträge: 103
Antw:Liste: wie am besten dargestellt?
« Antwort #10 am: 22 Januar 2017, 10:57:56 »
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
« Letzte Änderung: 22 Januar 2017, 11:04:16 von tdoe »

Offline Jack-Luck

  • New Member
  • *
  • Beiträge: 42
Antw:Liste: wie am besten dargestellt?
« Antwort #11 am: 05 Februar 2017, 12:03:01 »
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?

Offline magix99

  • Jr. Member
  • **
  • Beiträge: 59
Antw:Liste: wie am besten dargestellt?
« Antwort #12 am: 29 Juni 2017, 22:24:39 »
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?

Offline lunak

  • Newbie
  • Beiträge: 1
Antw:Liste: wie am besten dargestellt?
« Antwort #13 am: 15 Juni 2018, 23:28:22 »
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