FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Gasmast3r am 31 Oktober 2016, 19:54:50

Titel: Spritpreis Tablet UI wie ??
Beitrag von: Gasmast3r am 31 Oktober 2016, 19:54:50
Hallo habe mit Hilfe von Hausautomatisierung.com den Sprit Preis in Fhem einbinden können.
Frage wie bekomme ich das in meine Tablet UI ?????
Entweder bin ich zu D..... oder Blind
Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Amenophis86 am 31 Oktober 2016, 22:17:01
zB mittels Label die Readings anzeigen lassen. Gibt aber auch einige Beispiele im Forum.
Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: hillbicks am 31 Oktober 2016, 23:09:10
Hier noch ein Beispiel

        <li data-row="2" data-col="1" data-sizex="4" data-sizey="2">                                                                                                                                                             
            <header>Spritpreise</header>                                                                                                                                                                                         
<table>                                                                                                                                                                                                                           
<tr>                                                                                                                                                                                                                             
<td>                                                                                                                                                                                                                             
               <div class="left aligned big thin ">Elan:</div>                                                                                                                                                                   
</td>                                                                                                                                                                                                                             
<td width="500" >                                                                                                                                                                                                                 
               <div data-type="label"                                                                                                                                                                                             
                     data-device="ELAN"                                                                                                                                                                                           
     data-get="SuperPlus"                                                                                                                                                                                                         
     data-unit="€"                                                                                                                                                                                                           
     class="right right-space-2x aligned big thin"></div>                                                                                                                                                                         
</td>                                                                                                                                                                                                                             
</tr>                                                                                                                                                                                                                             
<td>                                                                                                                                                                                                                             
               <div class="left aligned big thin ">Star:</div>                                                                                                                                                                   
</td>                                                                                                                                                                                                                             
<td width="500" >                                                                                                                                                                                                                 
               <div data-type="label"                                                                                                                                                                                             
                     data-device="star"                                                                                                                                                                                           
     data-get="SuperPlus"                                                                                                                                                                                                         
     data-unit="€"                                                                                                                                                                                                           
     class="right right-space-2x aligned big thin"></div>                                                                                                                                                                         
</td>                                                                                                                                                                                                                             
</tr>                                                                                                                                                                                                                             
<td>                                                                                                                                                                                                                             
               <div class="left aligned big thin ">OIL:</div>                                                                                                                                                                     
</td>                                                                                                                                                                                                                             
<td width="500" >                                                                                                                                                                                                                 
               <div data-type="label"                                                                                                                                                                                             
                     data-device="OIL"                                                                                                                                                                                           
     data-get="SuperPlus"                                                                                                                                                                                                         
     data-unit="€"                                                                                                                                                                                                           
     class="right right-space-2x aligned big thin"></div>                                                                                                                                                                         
</td>                                                                                                                                                                                                                             
</tr>                                                                                                                                                                                                                             
</table>                                                                                                                                                                                                                         
        </li>                     
Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Gasmast3r am 01 November 2016, 06:17:32
Danke schaue mir das heute Nachmittag mal genauer an

Gesendet von meinem SM-N915FY mit Tapatalk

Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Gasmast3r am 01 November 2016, 19:33:16
(http://uploads.tapatalk-cdn.com/20161101/f726eaefc94d63b879b2c805dff4e7ec.jpg)

Ich bekomme das nicht hin,
(http://uploads.tapatalk-cdn.com/20161101/4167c53c47c5c9fd5a288e4400a1d7f6.jpg)

Meine Einträge
(http://uploads.tapatalk-cdn.com/20161101/a53b101228821645b7b8a301c26ab622.jpg)
Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Amenophis86 am 01 November 2016, 19:40:20
Poste mal ein list deines Device und poste mal die zugehörige definition in deiner html datei.
Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: jnewton957 am 01 November 2016, 20:16:33
Meine Umsetzung mit Charts (Tageschart und Wochenchart). Dann habe ich noch einen Aktualisierungsbutton und eine Anzeige, wann normalerweise die nächsten Daten geholt werden.


Ich freue mich ja auch immer, wenn man bei posts dann auch ein Bild anhängt. "Ein Bild sagt mehr als 1000 Zeilen coding".

Viel Spass damit.

Jörg
<!DOCTYPE html>
<html>
<head>
        <title>Tanken</title>
</head>
<body>

<div class="gridster">
<ul>
<li class="halbTransparent" data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="inc_home_button.html"></li>

<li class="halbTransparent" data-row="1" data-col="2" data-sizex="2" data-sizey="1">
<header class="headerTransparent">WETTER (Heute)</header>
<div class="cell">
<table>
<tr>
<td align="center" width="40px"><div data-type="label">Min:</div> </td>
<td align="center"><div data-type="label" data-device="Wetter_Pro" data-get="fc0_tempMin" data-unit="%B0C%0A" class="large" data-colors='["#B28F00"]' data-limits='["0"]'></div></td>
<td>&nbsp;</td>
<td width="150px">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center"><div data-type="label">Akt:</div> </td>
<td align="center"><div data-type="label" data-device="Wetter_Pro" data-get="temperature" data-unit="%B0C%0A" class="large" data-colors='["#B28F00"]' data-limits='["0"]'></div></td>
<td width="37%">&nbsp;</td>
<td align="left"><div data-type="weather" data-icon="R" class="small"></div></td>
<td align="left"><div data-type="label" data-device="Wetter_Pro" data-get="fc0_chOfRainDay" data-unit="%" class="large" data-colors='["#B28F00"]' data-limits='["0"]'></div></td>
</tr>
<tr>
<td align="center"><div data-type="label">Max:</div> </td>
<td align="center"><div data-type="label" data-device="Wetter_Pro" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large" data-colors='["#B28F00"]' data-limits='["0"]'></div></td>
<td>&nbsp;</td>
<td align="left"><div data-type="weather" data-icon="B" class="small"></div></td>
<td align="left"><div data-type="label" data-device="Wetter_Pro" data-get="fc0_sun" data-unit="%" class="large" data-colors='["#B28F00"]' data-limits='["0"]'></div></td>
</tr>
</table>
</div>
</li>

<li class="halbTransparent" data-row="1" data-col="4" data-sizex="1" data-sizey="1" data-template="inc_dwdbutton.html">
</li>

<li class="halbTransparent" data-row="1" data-col="5" data-sizex="2" data-sizey="1" data-template="inc_aussentemp.html">
</li>

<li class="halbTransparent" data-row="1" data-col="7" data-sizex="1" data-sizey="1" data-template="inc_wetterbutton.html">
</li>

<li class="halbTransparent" data-row="1" data-col="8" data-sizex="2" data-sizey="1" data-template="inc_uhr.html">
</li>

<li class="halbTransparent" data-row="2" data-col="1" data-sizex="1" data-sizey="4" data-template="menu_links.html">
</li>
<li class="halbTransparent" data-row="2" data-col="9" data-sizex="1" data-sizey="4" data-template="menu_home_rechts.html">
</li>

<li data-row="2" data-col="2" data-sizex="1" data-sizey="1" class="halbTransparent">
<header class="headerTransparent">Aktualisieren</header>
<div data-type="popup" data-height="210px" data-width="270px">
<div data-type="push"
data-background-icon=""
data-icon="fa-refresh"
class="bigger">
</div>
<div class="dialog dialogTransparent">
<header class="dialogheaderTransparent">Reread</header>
<div onclick="$('.dialog-close').trigger('click');"
data-type="link"
data-width="240"
data-height="70"
data-color="white"
             data-background-color="firebrick"
data-icon="fa-refresh"
data-fhem-cmd='["set Shell reread","set AralK reread","set AralD reread","set AralBG reread"]'
class="round bigger top-space center left-space">
</div>
</div>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1" class="halbTransparent">
<header>Shell Ranzel</header>
        <div class="cell narrow top-space">
                <div data-type="image"
    data-url="/fhem/www/images/fhemSVG/Shell_logo.svg"
      data-size="50">
</div>
                <div data-type="label" data-device="Shell"
                        data-get="V-Power"
                        data-limits='[1.15,1.35,1.50'
                        data-colors='["#009900","#AA6900","#CC0000"]'
                        class="large" >
                </div>
        </div>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1" class="halbTransparent">
<header>Mundorf</header>
        <div class="cell narrow top-space">
<div data-type="image"
    data-url="/fhem/www/images/fhemSVG/mundorf_icon.gif"
      data-size="50">
</div>
                <div data-type="label" data-device="Mundorf"
                        data-get="SuperPlus"
                        data-limits='[1.15,1.30,1.39]'
                        data-colors='["#009900","#AA6900","#CC0000"]'
                        class="large" >
                </div>
        </div>
</li>

<li data-row="2" data-col="5" data-sizex="1" data-sizey="1" class="halbTransparent">
<header>Nächste Daten</header>
        <div class="cell narrow top-space">
<div data-type="label" data-device="Shell"
                        data-get="TRIGGERTIME_FMT"
                        class="large" >
                </div>
        </div>

</li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="1" class="halbTransparent">
<header>Aral Godesberg</header>
        <div class="cell narrow top-space">
                <div data-type="image"
    data-url="/fhem/www/images/fhemSVG/Aral_Logo.svg"
      data-size="50"> </div>
                <div data-type="label" data-device="AralBG"
                        data-get="Ultimate102"
                        data-limits='[1.15,1.29,1.39]'
                        data-colors='["#009900","#AA6900","#CC0000"]'
                        class="large" >
                </div>
        </div>
       
</li>
<li data-row="2" data-col="7" data-sizex="1" data-sizey="1" class="halbTransparent">
<header>Aral Köln</header>
        <div class="cell narrow top-space">
                <div data-type="image"
    data-url="/fhem/www/images/fhemSVG/Aral_Logo.svg"
      data-size="50"> </div>
                <div data-type="label" data-device="AralK"
                        data-get="Ultimate102"
                        data-limits='[1.15,1.29,1.39]'
                        data-colors='["#009900","#AA6900","#CC0000"]'
                        class="large" >
                </div>
        </div>
       
</li>
<li data-row="2" data-col="8" data-sizex="1" data-sizey="1" class="halbTransparent">
<header>Aral Deutz</header>
        <div class="cell narrow top-space">
                <div data-type="image"
    data-url="/fhem/www/images/fhemSVG/Aral_Logo.svg"
      data-size="50"> </div>
                <div data-type="label" data-device="AralD"
                        data-get="Ultimate102"
                        data-limits='[1.15,1.29,1.39]'
                        data-colors='["#009900","#AA6900","#CC0000"]'
                        class="large" >
                </div>
        </div>
       
</li>

<li class="halbTransparent" data-row="3" data-col="2" data-sizex="7" data-sizey="2">
<header>Spritpreisverlauf</header>
<div class="normal"
         data-type="chart"
         data-device="counter_kabelkanal.power"
         data-logdevice='["FileLog_Spritpreise","FileLog_Spritpreise","FileLog_Spritpreise","FileLog_Spritpreise","FileLog_Spritpreise"]'
         data-columnspec='["4:Mundorf.SuperPlus","4:Shell.V-Power","4:AralBG.Ultimate102","4:AralK.Ultimate102","4:AralD.Ultimate102"]'
         data-style='["ftui l2dot","ftui l4dot","ftui l0dot","ftui l3dot","ftui l3dot"]'
         data-ptype='["lines","lines","lines","lines","lines"]'
         data-uaxis='["primary","primary","primary","primary","primary"]'
         data-legend='["Mundorf Ranzel", "Shell Ranzel", "Aral_Godesberg", "Aral_Köln", "Aral_Deutz"]'
         data-yunit="°EUR"
         data-ytext="Preise (EUR/Liter)"
         data-minvalue="auto"
         data-maxvalue="auto"
         data-yunit_sec="EUR"
         data-ytext_sec="Preise (EUR/Liter)"
         data-yticks="auto"
         data-minvalue_sec="auto"
         data-maxvalue_sec="auto"
         data-daysago_start="0"
         data-daysago_end="-1"
         data-crosshair="true"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
data-height="200"
         data-xticks="auto">
    </div>
</li>
<li class="halbTransparent" data-row="5" data-col="2" data-sizex="7" data-sizey="1">
<div class="normal"
         data-type="chart"
         data-logdevice='["FileLog_Spritpreise","FileLog_Spritpreise","FileLog_Spritpreise","FileLog_Spritpreise","FileLog_Spritpreise"]'
         data-columnspec='["4:Mundorf.SuperPlus","4:Shell.V-Power","4:AralBG.Ultimate102","4:AralK.Ultimate102","4:AralD.Ultimate102"]'
         data-style='["ftui l2dot","ftui l4dot","ftui l0dot","ftui l3dot","ftui l3dot"]'
         data-ptype='["lines","lines","lines","lines","lines"]'
         data-uaxis='["primary","primary","primary","primary","primary"]'
         data-legend='["Mundorf Ranzel", "Shell Ranzel", "Aral_Godesberg", "Aral_Köln", "Aral_Deutz"]'
         data-yunit="°EUR"
         data-ytext="Preise (EUR/Liter)"
         data-minvalue="auto"
         data-maxvalue="auto"
         data-yunit_sec="EUR"
         data-ytext_sec="Preise (EUR/Liter)"
         data-yticks="auto"
         data-minvalue_sec="auto"
         data-maxvalue_sec="auto"
         data-daysago_start="0"
         data-daysago_end="-7"
         data-crosshair="true"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
data-height="auto"
         data-xticks="auto">
    </div>
</li>

</ul>
</div>
</body>
</html>


Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Gasmast3r am 01 November 2016, 20:46:20
Poste ich morgen mal

Gesendet von meinem SM-N915FY mit Tapatalk

Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Gasmast3r am 03 November 2016, 16:08:11
So hab es nicht früher geschafft

define Oil HTTPMOD http://www.clever-tanken.de/tankstelle_details/19112
attr Oil userattr reading01Name reading01Regex
attr Oil enableControlSet 1
attr Oil group Spritpreise
attr Oil reading01Name SuperE5
attr Oil reading01Regex <span>Super E5</span>[^0-9]+([0-9\.]+)
attr Oil room Aussen
attr Oil stateFormat Preis: SuperE5 €
attr Oil timeout 5


<div class="big">OIL:</div> 
<div data-type="label" data-device="Oil" data-get="SuperE5" data-unit="€" class="big"></div>  
Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Amenophis86 am 03 November 2016, 17:11:38
Ich möchte an dieser Stelle auf diesen Post verweisen:

Zitat von: Amenophis86 am 26 September 2016, 11:54:49
Die Fehler kommen daher, dass Tankerkönig die Server regelmäßig überlastet sind. Ich wurde von Tankerkönig per Mail angeschrieben mit der bitte meine Requests zu ändern. Dies kann ich auch jedem nur empfehlen. Und zwar sollen wir von detail.php auf prices.php wechseln. Ich stelle hier mal meine Definition als Beispiel rein. Hat auch den Vorteil, dass man alles in einem Device nun hat und nicht mehr für jedes ein eigenes machen muss:


https://creativecommons.tankerkoenig.de/json/prices.php?ids=e1a15081-2613-9107-e040-0b0a3dfe563c,174ba965-2b6e-468c-86c3-44a6601b1f3f,e8e2a14f-4bac-4b14-b8e8-b7b6347ffb56,2fdeef9e-36ca-44d7-9ee4-3bdaa0112539&apikey=XXXXXXXXXXXXX 610

attr Benzin enableControlSet 1
attr Benzin extractAllJSON 1
attr Benzin getHeader1 Content-Type: application/json
attr Benzin getHeader2 Accept: */*


uns besonders auf diesen Thread:
https://forum.fhem.de/index.php/topic,22554.0.html

Geht ja hier nicht mehr nur um die TabletUi Einbindung, sondern auch um das Abfragen der Spritpreise ;)
Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Gasmast3r am 03 November 2016, 17:50:32
Hy danke schaue mir das mal an.
Unter FHEM wird mir der aktuelle Preis angezeigt oder ist das fürs implantieren in die UI vorteilhafter

Gesendet von meinem SM-N915FY mit Tapatalk

Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Amenophis86 am 03 November 2016, 19:31:02
Dort ist erklärt, wie man die Spritpreise abrufen kann insbesondere, dass man nicht mit detail.php sonder mit prices.php arbeiten sollte. Für die UI ist es egal, wo die Preise herkommen. Hauptsache sie liegen in einem Reading in FHEM.
Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Gasmast3r am 04 November 2016, 18:14:39
Hallo irgendwie lese ich nur Bahnhof.

ich kann dem Beitrag leider nicht entnehmen wie mir das weiter helfen soll, da ich mich auch nicht für solche Infos anmelden möchte.

den beitrag hatte ich vorher schon gelesen, was mich aber nicht weiter brachte deswegen meine frage.

habe erstmal die spritpreis abfrage gelöscht und schaue mal weiter.


Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Gasmast3r am 05 November 2016, 13:41:07
Hab es hinkommen.
Poster die tage meinen Code damit anderen auch geholfen werden kann

Gesendet von meinem SM-N915FY mit Tapatalk

Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Amenophis86 am 05 November 2016, 16:06:09
Naja mit einer Anmeldung bekommst du eine API, die API wiederrum reduziert den Datentraffic des Hosters, was dazu führt, dass Tankerkönig nicht ständig abschmiert. Ich bin der Meinung, dass man ein solches kostenloses Angebot nutzen sollte, wenn es schon angeboten wir und dem Betreiber der Website nicht noch mehr Arbeit und Kosten aufhalsen muss indem man immer die komplette Seite aufruft und damit seinen Server regelmäßig in die Knie zwingt. So war es nämlich und daher wurden wir geben auf prices und nicht auf detail abzufragen.
Titel: Antw:Spritpreis Tablet UI wie ??
Beitrag von: Gasmast3r am 07 November 2016, 17:12:18
Hy so habe ich das alles gelöst

define Oil HTTPMOD http://www.clever-tanken.de/tankstelle_details/19112
attr Oil userattr reading01Name reading01Regex
attr Oil enableControlSet 1
attr Oil group Spritpreise
attr Oil reading01Name SuperE5
attr Oil reading01Regex <span>Super E5</span>[^0-9]+([0-9\.]+)
attr Oil room Aussen
attr Oil stateFormat Preis: SuperE5 €
attr Oil timeout 5



<div class="big top-space-2x">OIL:</div> 
<div data-type="label" data-device="Oil" data-get="SuperE5" data-limits='[1.20,1.30,1.40]' data-colors='["Green","Yellow","Red"]' data-unit="€" class="bigger"></div> 


hoffe das hilft anderen weiter