Spritpreise mit Logo in FTui einfügen (HTML-Code)

[Kusselin]

Hallo Zusammen,

besteht die Möglichkeit das jemand seinen HTML Code hier mal zur verfügung stellt.
Wollte gerne den Spritpreis inkl. Tnkelogo in FTUi einbinden.

Wäre echt klasse von Euch...am besten wenn das Widget nebeneinander dargestellt ist.

Vielen Dank

Gruss
Markus

[n4rrOx]

Code Auswählen Erweitern

<table width="100%">
<tr>
<td>
</td>
<td>
<div class="bold">Diesel</div>
</td>
<td>
<div class="bold">Super E5</div>
</td>
<td>
<div class="bold">Super E10</div>
</td>
</tr>
<tr>
<td class="cell">
<div class="darker small inline">Haidach</div>
<div data-type="image" data-url="../images/default/mixed/total.png" data-size="30" class="inline"></div>

</td>
<td>
<div data-type="label" data-device="Total_Haidach" data-get="Diesel" data-unit=" &euro;" class="large"></div>
</td>
<td>
<div data-type="label" data-device="Total_Haidach" data-get="SuperE5" data-unit=" &euro;" class="large"></div>
</td>
<td>
<div data-type="label" data-device="Total_Haidach" data-get="SuperE10" data-unit=" &euro;" class="large"></div>
</td>
</tr>
<tr>
<td class="cell">
<div class="darker small inline">Enzberg</div>
<div data-type="image" data-url="../images/default/mixed/shell.png" data-size="30" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="Shell_Enzberg" data-get="Diesel" data-unit=" &euro;" class="large"></div>
</td>
<td>
<div data-type="label" data-device="Shell_Enzberg" data-get="SuperE5" data-unit=" &euro;" class="large"></div>
</td>
<td>
<div data-type="label" data-device="Shell_Enzberg" data-get="SuperE10" data-unit=" &euro;" class="large"></div>
</td>
</tr>
<tr>
<td class="cel">
<div class="darker small inline">Muehlacker</div>
<div data-type="image" data-url="../images/default/mixed/aral.png" data-size="30" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="Aral_Muehlacker" data-get="Diesel" data-unit=" &euro;" class="large"></div>
</td>
<td>
<div data-type="label" data-device="Aral_Muehlacker" data-get="SuperE5" data-unit=" &euro;" class="large"></div>
</td>
<td>
<div data-type="label" data-device="Aral_Muehlacker" data-get="SuperE10" data-unit=" &euro;" class="large"></div>
</td>
</tr>
</table>

Info: https://wiki.selfhtml.org/wiki/HTML/Tabellen/Aufbau_einer_Tabelle

[Kusselin]

Hi, danke dir. Die Url hast du rausgenommen richtig?
Gruss


Gesendet von iPad mit Tapatalk Pro

[Kusselin]

Sag mir bitte noch wo ich in deinem html code die verknüpfungen zu fhem finde (readings)??

Ich bin da noch nicht so drin, deshalb meine Frage
Gruss


Gesendet von iPad mit Tapatalk Pro

[moonsorrox]

Sag mir bitte noch wo ich in deinem html code die verknüpfungen zu fhem finde (readings)??

da werden keine Url eingetragen, dort wird aus deinem Fhem das jeweilige Reading eingetragen, wie es auch immer heißt ob nun Aral, HEM, Shell usw.
Dazu mußt du dir erst einmal eine Tankstelle suchen und dann aus dem Forum alles zusammen bauen... das macht FTUI nicht...
Also erst einmal die Tankstellen mit den Spritsorten erstellen.

[eazy_isi]

Hallo,

hier mal mein Code:

Code Auswählen Erweitern

#############################
### Aktuelle Spritpreise  ###
#############################

define Tanke_1 HTTPMOD http://www.clever-tanken.de/tankstelle_details/xxxxx 600
attr Tanke_1 userattr reading01Name reading01Regex reading02Name reading02Regex
attr Tanke_1 group Spritpreise
attr Tanke_1 icon tanken
attr Tanke_1 reading01Name Diesel
attr Tanke_1 reading01Regex <span>Diesel</span>[^0-9]+([0-9\.]+)
attr Tanke_1 reading02Name SuperE5
attr Tanke_1 reading02Regex <span>Super E5</span>[^0-9]+([0-9\.]+)
attr Tanke_1 room Spritpreise
attr Tanke_1 stateFormat Liter_Diesel: Diesel
attr Tanke_1 timeout 5

define Tanke_2 HTTPMOD http://www.clever-tanken.de/tankstelle_details/xxxxx 600
attr Tanke_2 userattr reading01Name reading01Regex reading02Name reading02Regex
attr Tanke_2 group Spritpreise
attr Tanke_2 icon tanken
attr Tanke_2 reading01Name Diesel
attr Tanke_2 reading01Regex <span>Diesel</span>[^0-9]+([0-9\.]+)
attr Tanke_2 reading02Name SuperE5
attr Tanke_2 reading02Regex <span>Super E5</span>[^0-9]+([0-9\.]+)
attr Tanke_2 room Spritpreise
attr Tanke_2 stateFormat Liter_Diesel: Diesel
attr Tanke_2 timeout 5

define Tanke_3 HTTPMOD http://www.clever-tanken.de/tankstelle_details/xxx 600
attr Tanke_3 userattr reading01Name reading01Regex reading02Name reading02Regex
attr Tanke_3 group Spritpreise
attr Tanke_3 icon tanken
attr Tanke_3 reading01Name Diesel
attr Tanke_3 reading01Regex <span>Diesel</span>[^0-9]+([0-9\.]+)
attr Tanke_3 reading02Name SuperE5
attr Tanke_3 reading02Regex <span>Super E5</span>[^0-9]+([0-9\.]+)
attr Tanke_3 room Spritpreise
attr Tanke_3 stateFormat Liter_Diesel: Diesel
attr Tanke_3 timeout 5


define FileLog_Spritpreise FileLog ./log/spritpreise-OBH-%Y-%m.log (Tanke_1|Tanke_2|Tanke_3):(SuperE5|Diesel).*
attr FileLog_Spritpreise alias Log Spritpreise
attr FileLog_Spritpreise group Logfile
attr FileLog_Spritpreise logtype text
attr FileLog_Spritpreise room Spritpreise


define Spritpreise readingsGroup (Tanke_1|Tanke_2|Tanke_3):(SuperE5|Diesel).*
attr Spritpreise group Spritpreisuebersicht
attr Spritpreise notime 1
attr Spritpreise room Spritpreise
attr Spritpreise valueFormat {'%.2f €'}
#attr Spritpreise style style="font-size:16px"     # führt ggf. zu einem PERL WARNING
#attr Spritpreise valueStyle {Werte($READING,$VALUE)}     # führt ggf. zu einem PERL WARNING

define SVG_FileLog_Spritpreise_1 SVG FileLog_Spritpreise:SVG_FileLog_Spritpreise_1:CURRENT
attr SVG_FileLog_Spritpreise_1 group Spritpreisverlauf
attr SVG_FileLog_Spritpreise_1 room Spritpreise


Die xxx müssen noch durch die ID von Clever-Tanken ersetzt werden.

Und hier der HTML Teil in FTUI:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * main page
     *
     load this page via widget pagebutton

     <div data-type="pagebutton" data-url="#content_main.html"     data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*#content_main.html)" data-icon="fa-home" class="default top-space"></div>
    -->

</head>
<body>
  <div class="page" id="content7">
<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->

<div class="gridster">
<ul>
<!-- =============Spritpreise=============== -->
<!-- ====================================== -->
<li class="semitransparent3d" data-row="1" data-col="1" data-sizex="12" data-sizey="4">
<header  class="semitransparentheader">Spritpreise</header>
<table border="0px" width="100%">
<tr>
<td>
<div data-type="image"
data-url="/fhem/tablet/images/Tanke_1.jpg"
class="shadow"
data-size="50">
</div>
</td>
<td>
<div data-type="label" data-device="Tanke_1" data-get="Diesel" data-unit="€" class="shadow top-space" style="font-size:x-large;color:#FAA460;"></div>
<div data-type="label" class="cell shadow" >Diesel</div>
</td>
<td>
<div data-type="label" data-device="Tanke_1" data-get="SuperE5" data-unit="€" class="shadow" style="font-size:x-large;color:#FAA460;"></div>
<div data-type="label" class="cell shadow" >Super</div>
</td>
</tr>

<tr>
<td>
<div data-type="image"
data-url="/fhem/tablet/images/Tanke_2.png"
class="shadow"
data-size="60">
</div>
</td>
<td>
<div data-type="label" data-device="Tanke_2" data-get="Diesel" data-unit="€" class="shadow" style="font-size:x-large;color:#FAA460;"></div>
<div data-type="label" class="cell shadow" >Diesel</div>
</td>
<td>
<div data-type="label" data-device="Tanke_2" data-get="SuperE5" data-unit="€" class="shadow" style="font-size:x-large;color:#FAA460;"></div>
<div data-type="label" class="cell shadow" >Super</div>
</td>
</tr>

<tr>
<td>
<div data-type="image"
data-url="/fhem/tablet/images/jet.jpg"
class="shadow"
data-size="50">
</div>
</td>
<td>
<div data-type="label" data-device="Tanke_3" data-get="Diesel" data-unit="€" class="shadow" style="font-size:x-large;color:#FAA460;"></div>
<div data-type="label" class="cell shadow" >Diesel</div>
</td>
<td>
<div data-type="label" data-device="Tanke_3" data-get="SuperE5" data-unit="€" class="shadow" style="font-size:x-large;color:#FAA460;"></div>
<div data-type="label" class="cell shadow" >Super</div>
</td>
</tr>
</table>
</li>

<li class="semitransparent3d" data-row="5" data-col="1" data-sizex="12" data-sizey="4">
<header  class="semitransparentheader">Spritpreisverlauf SuperE5 und Diesel</header>
   
<div data-type="highchart"
data-device="Tanke_1,Tanke_2,Tanke_3"
data-logdevice="FileLog_Spritpreise"
data-columnspec='4:Tanke_1.SuperE5:: 4:Tanke_2.SuperE5:: 4:Tanke_3.SuperE5:: 4:Tanke_1.Diesel:: 4:Tanke_2.Diesel:: 4:Tanke_3.Diesel::'
data-linenames="Tanke_1-E5,Tanke_2-E5,Tanke_3-E5,Tanke_1-D,Tanke_2-D,Tanke_3-D"
data-linetypes="line,line,line,line,line,line"
data-linesteps="false,true,true,true,true,true"
data-yaxis="0,0,1"
data-yopposites="false,true"
data-daysago="3"
data-scroll="true"
data-range="true"
data-minvalue="0.90,0"
    data-maxvalue="1.60,100"
    data-height="100%"
data-tooltip="{series.name}: <b>{point.y:,.1f}</b><br>"
data-legendalign="bottom"
class="noticks"
style="width: 800px; height: 225px">
</div>
</li>
</ul>
</div>
</body>
</html>

Gruß
Thomas

[Kusselin]

da werden keine Url eingetragen, dort wird aus deinem Fhem das jeweilige Reading eingetragen, wie es auch immer heißt ob nun Aral, HEM, Shell usw.
Dazu mußt du dir erst einmal eine Tankstelle suchen und dann aus dem Forum alles zusammen bauen... das macht FTUI nicht...
Also erst einmal die Tankstellen mit den Spritsorten erstellen.

Hi, in Fhem habe ich schon die tankstellen drinne...ich habe aber nur E10 von verschiedenen Tankes genommen..da wir nur E10 tanken..also das wäre schon in Fhem drinne....ich kann ja mal ein List des Tank-Devices heute abend posten udn dann kann man das ja anhand der List nochmal anschaulicher machen, oder? Für euch ist das kein Problem...

Die PNG´s kommen in den images ordner....

Jetzt wartet bitte mal..ich poste das heute abend.

Danek dir schon mal...
Gruss

[Kusselin]

Mensch klasse, danke für Eure Muster hier... muss ich mal testen...

wie ich schon sagte poste ich ein List heute abend mal...

Gruss

[moonsorrox]

Ein Beispiel von mir...
Kannst du heute Abend basteln

Code Auswählen Erweitern

<table width="100%">
<tr>
<td width="25%">
<div class="left-align" data-type="image" data-url="/fhem/tablet/images/hem.png" data-size="25%"></div>
<!--div class="bigger left-align">HEM
</div-->
</td>
<td width="37.5%">
<div data-type="label"
data-device="HEM"
data-get="SuperE5"
data-limits='["0","1.30","1.50"]'
data-colors='["green","#aa6900","firebrick"]'
data-unit="9 &euro;"
class="tall thin">
</div>
</td>
<td width="37.5%">
<div data-type="label"
data-device="HEM"
data-get="Diesel"
data-limits='["0","1.30","1.50"]'
data-colors='["green","#aa6900","firebrick"]'
data-unit="9 &euro;"
class="tall thin">
</div>
</td>
</tr>
<tr>
<td>
<div data-type="label"
data-device="HEM"
data-get="SuperE5"
data-substitution="toDate().hhmm()"
class="big timestamp">
</div>
</td>
<td>Super E5
</td>
<td>Diesel
</td>
</table>

[Kusselin]

Hallo Jungs,
hier mal mein List:

Code Auswählen Erweitern

Internals:
   DEF        (ARAL_Schriese|AVIA_Hause|ELAN_Saase|bft_Saase):(SuperE10).*
   NAME       Spritpreise
   NR         70
   NTFY_ORDER 50-Spritpreise
   STATE      Initialized
   TYPE       readingsGroup
   mayBeVisible 1
   Content:
     ARAL_Schriese 1
     AVIA_Hause 1
     ELAN_Saase 1
     bft_Saase  1
   Content2:
   DEVICES:
     ARRAY(0x4246c80)
     ARRAY(0x3e3de48)
     ARRAY(0x392c6d0)
     ARRAY(0x357b278)
   Fhem:
     lastDefChange 3
     last_update 1490294989.10818
   Helper:
     DEF
     valueFormat {'%.2f €'}
     Positions:
       ARAL_Schriese.SuperE10 1:1
       AVIA_Hause.SuperE10 2:1
       ELAN_Saase.SuperE10 3:1
       bft_Saase.SuperE10 4:1
     Values:
       formated:
         undef
         ARRAY(0x41c12d8)
       orig:
         undef
         ARRAY(0x4c66650)
       prefixsuffix:
         undef
         ARRAY(0x41a59e0)
Attributes:
   group      Spritpreisuebersicht
   notime     1
   room       Spritpreise
   valueFormat {'%.2f €'}

[Kusselin]

Ein Beispiel von mir...
Kannst du heute Abend basteln

Code Auswählen Erweitern

<table width="100%">
<tr>
<td width="25%">
<div class="left-align" data-type="image" data-url="/fhem/tablet/images/hem.png" data-size="25%"></div>
<!--div class="bigger left-align">HEM
</div-->
</td>
<td width="37.5%">
<div data-type="label"
data-device="HEM"
data-get="SuperE5"
data-limits='["0","1.30","1.50"]'
data-colors='["green","#aa6900","firebrick"]'
data-unit="9 &euro;"
class="tall thin">
</div>
</td>
<td width="37.5%">
<div data-type="label"
data-device="HEM"
data-get="Diesel"
data-limits='["0","1.30","1.50"]'
data-colors='["green","#aa6900","firebrick"]'
data-unit="9 &euro;"
class="tall thin">
</div>
</td>
</tr>
<tr>
<td>
<div data-type="label"
data-device="HEM"
data-get="SuperE5"
data-substitution="toDate().hhmm()"
class="big timestamp">
</div>
</td>
<td>Super E5
</td>
<td>Diesel
</td>
</table>

Hi moonsorrox,

müsste ich jetzt bei deiner BeispielHTML Datei bei data-device "Spritpreise" eintragen?
Und wo ist der Verweis auf die Grafikdateien bei dir (.png)?

Viele Grüße

Markus

[moonsorrox]

müsste ich jetzt bei deiner BeispielHTML Datei bei data-device "Spritpreise" eintragen?

übrigens du hast oben in deinem list die readingsgroup abgefragt, aber auch da steht ja das data-device drin
nein, da muss jetzt dein Eintrag rein z.B ARAL_Schriese oder AVIA_Hause oder ELAN_Saase usw.

Und wo ist der Verweis auf die Grafikdateien bei dir (.png)?

ja klar, suche dir im Netz die jeweiligen Tankstellen Bilder in png, jpg oder oder raus und lege sie in einen Ordner und gebe den Pfad an, meinen Pfad siehst du ja...!

[Kusselin]

O.K. super und danke..ja wer lesen kann vor lauter wald der findet auch...die url steht oben
Gruss

[Kusselin]

ja klar, suche dir im Netz die jeweiligen Tankstellen Bilder in png, jpg oder oder raus und lege sie in einen Ordner und gebe den Pfad an, meinen Pfad siehst du ja...!

Wie groß muss/sollte das .png denn haben?

Und wie schauts mit den anderen Data-....?
O.K. data-get da trage ich mein E10 ein und wie verhält sich das ganze mit den data-limits?? wenn ich das anzeigen lassen möchte mit den farben muss das ja auch als "attr" in fhem gelistet sein..richtig?

Gruss

[moonsorrox]

Wie groß muss/sollte das .png denn haben?

Und wie schauts mit den anderen Data-....?
O.K. data-get da trage ich mein E10 ein und wie verhält sich das ganze mit den data-limits?? wenn ich das anzeigen lassen möchte mit den farben muss das ja auch als "attr" in fhem gelistet sein..richtig?

Gruss

ist denke ich egal. probiere es aus ob es funktioniert...

das hier sind die limits

Code Auswählen Erweitern

data-limits='["0","1.30","1.50"]'
data-colors='["green","#aa6900","firebrick"]'

die Werte bekommst du natürlich durch das auslesen von Fhem, dem ist das egal wie die Farben aussehen