[Tablet UI] FB_CALLLIST einbinden

Tommy82 · 10 Januar 2017, 20:54:25

Zitat von: Tommy82 am 27 Dezember 2016, 22:19:46
Hi, ich hab noch einen Status der in der FTUI nicht angezeigt wird, und zwar wenn ein einkommender Anruf vom Anrufbeantworter angenommen wird, in Fhem wird es angezeigt, in der FTUI wird garnichts angezeigt, definiert habe ich den Status
Code Auswählen Erweitern
=> O_O in der FTUI so:

Code Auswählen Erweitern
  <li data-row="2" data-col="2" data-sizex="4" data-sizey="4"> <header class="headerTransparent">ANRUFE</header> <table width="100%" class=""> <tr> <td>  <div class="narrow" data-type="symbol" data-device="Anruferliste" data-get="1-state" data-states='["<=","=>","=> X","=> ((o))","=> [=]","=> O_O"]' data-icons='["mi-phone_forwarded","oa-phone_call_end_in","oa-phone_missed_in","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_answersing"]' data-colors='["blue","green","red","firebrick","green","#aa6900"]'></div> </td> <td> <div data-type="label" data-device="Anruferliste" data-get="1-timestamp" data-part="5" class=""></div> <div data-type="label" data-device="Anruferliste" data-get="1-timestamp" data-part="1" class="inline"></div> <div data-type="label" data-device="Anruferliste" data-get="1-timestamp" data-part="2" class="inline"></div> <div data-type="label" data-device="Anruferliste" data-get="1-timestamp" data-part="3" class="inline"></div> </td> <td> <div data-type="label" data-device="Anruferliste" data-get="1-name"></div> <div data-type="label" data-device="Anruferliste" data-get="1-number"></div> </td> <td> <div data-type="label" data-device="Anruferliste" data-get="1-duration"></div> </td> </tr>

Wieso wird das eine icon nicht angezeigt?

Keiner eine idee warum das bei mir nicht richtig klappt!?

Danke

Tommy82 · 14 Januar 2017, 05:59:30

Ok, hat sich gelöst, der Name des Icons hat sich anscheint geändert, nachdem ich das angepasst habe wird es jetzt auch alles richtig angzeigt.

Hoggle · 17 Januar 2017, 15:18:53

So, jetzt auch mal von mir ein Hilferuf.
Ich habe folgende devices in FHEM:

Code Auswählen

define Fritzbox FRITZBOX
attr Fritzbox allowTR064Command 1
attr Fritzbox group Kommunikation
attr Fritzbox room Kommunikation

Code Auswählen

define fb_Callmonitor FB_CALLMONITOR xxx.xxx.xxx.x
attr fb_Callmonitor fritzbox-user (vorh. FB User)
attr fb_Callmonitor group Kommunikation
attr fb_Callmonitor local-area-code 0XXXXX
attr fb_Callmonitor fritzbox-remote-phonebook 1
attr fb_Callmonitor fritzbox-remote-phonebook-via tr064
attr fb_Callmonitor reverse-search phonebook,klicktel.de,dasoertliche.de
attr fb_Callmonitor reverse-search-cache 1
attr fb_Callmonitor reverse-search-cache-file /opt/fhem/log/reverse_search.txt
attr fb_Callmonitor room Kommunikation

Code Auswählen

define fb_Anrufliste FB_CALLLIST fb_Callmonitor
attr fb_Anrufliste group Kommunikation
attr fb_Anrufliste language de
attr fb_Anrufliste number-of-calls 10
attr fb_Anrufliste create-readings 1
attr fb_Anrufliste event-on-change-reading 1
attr fb_Anrufliste event-on-update-reading 1
attr fb_Anrufliste room Kommunikation
attr fb_Anrufliste time-format-string %a, %d.%m.%y %H:%M
attr fb_Anrufliste visible-columns row,state,timestamp,name,number,duration

und in FTUI folgende Index.html:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
    /* FHEM tablet ui */
    /*
    * UI builder framework for FHEM
    *
    * Version: 2.2.*
    * URL: https://github.com/knowthelist/fhem-tablet-ui
    *
    * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    *
    * - create a new folder named 'tablet' in /<fhem-path>/www
    * - copy all files incl. sub folders into /<fhem-path>/www/tablet
    * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
    * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
    */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <meta name="widget_min_cols" content="13">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="widget_margin" content="4">
    <meta name="longpoll" content="1">
    <meta name="debug" content="2">

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
   
   <link rel="stylesheet" href="lib/openautomation.css" />
   <link rel="stylesheet" href="lib/fhemSVG.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>
<body>
    <div class="gridster">
        <ul>
    <!-- ============= Anrufliste ============= -->
<!-- ====================================== -->
<!--   <header>Anrufliste</header>-->

<li data-row="1" data-col="1" data-sizex="8" data-sizey="4" class="semitransparent">
   <table width="100%"  border="10" BORDERCOLOR=grey>
           <tr>
         <td>
            <div data-type="symbol" data-device="fb_Anrufliste" data-get="1-state" data-icons='["fa-toggle-off","fa-phone","fa-phone","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=>  ((o))","<= ((o))","=>  [=]","<=  [=]","<= X"]'><>
            <div data-type="symbol" data-device="fb_Anrufliste" data-get="1-state" data-icons='["fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-down","fa-arrow-circle-o-down","fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-up"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=>  ((o))","<= ((o))","=>  [=]","<=  [=]","<= X"]' data-class="inline"><>
          </td>
         
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="1-timestamp"  class="inline"><>
            </td>
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="1-number"><>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="1-name"><>
         </td>
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="1-duration"><>
         </td>
      </tr>


      <tr>
         <td>
            <div data-type="symbol" data-device="fb_Anrufliste" data-get="2-state" data-icons='["fa-toggle-off","fa-phone","fa-phone","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=>  ((o))","<= ((o))","=>  [=]","<=  [=]","<= X"]'><>
            <div data-type="symbol" data-device="fb_Anrufliste" data-get="2-state" data-icons='["fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-down","fa-arrow-circle-o-down","fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-up"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=>  ((o))","<= ((o))","=>  [=]","<=  [=]","<= X"]' data-class="inline"><>
                                                                                       </td>
         <td>   <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="2-timestamp"  class="inline"><>
               </td>
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="2-number"><>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="2-name"><>
         </td>
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="2-duration"><>
         </td>
      </tr>
      <tr>
         <td>
            <div data-type="symbol" data-device="fb_Anrufliste" data-get="3-state" data-icons='["fa-toggle-off","fa-phone","fa-phone","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=>  ((o))","<= ((o))","=>  [=]","<=  [=]","<= X"]'><>
            <div data-type="symbol" data-device="fb_Anrufliste" data-get="3-state" data-icons='["fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-down","fa-arrow-circle-o-down","fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-up"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=>  ((o))","<= ((o))","=>  [=]","<=  [=]","<= X"]' data-class="inline"><>
                                                                                       </td>
         
      <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="3-timestamp"  class="inline"><>
            </td>
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="3-number"><>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="3-name"><>
         </td>
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="3-duration"><>
         </td>
      </tr>
   <tr>
         <td>
            <div data-type="symbol" data-device="fb_Anrufliste" data-get="4-state" data-icons='["fa-toggle-off","fa-phone","fa-phone","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=>  ((o))","<= ((o))","=>  [=]","<=  [=]","<= X"]'><>
            <div data-type="symbol" data-device="fb_Anrufliste" data-get="4-state" data-icons='["fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-down","fa-arrow-circle-o-down","fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-arrow-circle-o-up"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=>  ((o))","<= ((o))","=>  [=]","<=  [=]","<= X"]' data-class="inline"><>
                                                                                       </td>
         
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="4-timestamp" class="inline"><>
         </td>
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="4-number"><>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="4-name"><>
         </td>
         <td>
            <div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="4-duration"><>
         </td>
      </tr>
</tr>
</table>    
</li>
      </ul>
    <>
</body>
</html>

Ich hoffe, das jetzt auch die beiden Bilder angehängt wurden. Auf dem ersten Bild (Fritzbox.png) sieht man den Ausschnitt direkt in Fhem mit gefüllter Anrufliste und im 2. Bild das gleiche Konstrukt nur im FTUI und leider mit verschobenen Tabellen und ohne Inhalt.
Was habe ich getan?

Markus Bloch · 17 Januar 2017, 15:43:44

Überall in deinem HTML kommt immer wieder folgendes vor.

Code Auswählen

<>
bspw:

Code Auswählen

<div data-type="label" data-device="fb_Anrufliste" style="font-size: 150%" data-get="1-name"><>

Dies soll wahrscheinlich </div> bedeuten. Momentan sind überall <div>-Tags geöffnet, aber nirgends geschlossen.

Gruß
Markus

Hoggle · 18 Januar 2017, 09:07:06

Guten morgen.
Das mit den "<>" ist komisch, denn im Originaltext steht immer ein "</div>" (Siehe Bild). $:-\$
Daran kann es nicht liegen.

Markus Bloch · 18 Januar 2017, 11:14:57

Ich hatte gestern bei mir die "<>" durch "</div>" entsprechend ersetzt. Danach hatte ich dasselbe Phänomen, wie in deinen Screenshots.

Hierbei konnten die JavaScript-Komponenten nicht geladen werden. Als ich dann die CSS (<link>) und JavaScript (<script>) Einbindungen durch die aus dem Beispiel-HTML (https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/index-example.html) ersetzt habe, hat es funktioniert.

Gruß
Markus

Hoggle · 18 Januar 2017, 11:56:15

Hi.
Jetzt ist es so, das sich das Bild so langsam aktualisiert.
Im Screenshoot habe ich mal markiert, was jetzt noch immer nicht passt, nämlich der obere Streifen.
Kommt man nicht ganz nach oben mit dem Rahmen der Tabelle?

Ich habe übrigens NIX! an der Datei geändert

eazy_isi · 22 Januar 2017, 20:10:53

Hallo zusammen,

ich habe Problem mit der Darstellung der Anrufe in Tablet UI.
Und zwar werden die Anrufe nicht vernünftig sortiert, sondern sind durcheinander.
In Fhem wird alles korrekt dargestellt.
Hier mein Code:

Code Auswählen

<ul>
				<!-- ============= Anrufliste ============= -->
				<!-- ====================================== -->
				<li class="semitransparent3d" data-row="1" data-col="1" data-sizex="6" data-sizey="8">
					<header class="semitransparentheader">Anrufe</header>
					<table width="100%" class="top-space">
						<tr>
							<td>
								<!-- Zuordnung des Status zu entsprechendem Icon -->
								<div class="narrow shadow" data-type="symbol" data-device="Fritzboxanrufeliste"
									 data-get="1-state" 
									data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
									 data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
									 data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" class="inline shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-name" data-color="yellow" class="shadow"></div>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-number" class="shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-duration" class="shadow"></div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="narrow shadow" data-type="symbol" data-device="Fritzboxanrufeliste"
									 data-get="2-state" 
							data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
									 data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
									 data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" class="inline shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-name" data-color="yellow" class="shadow"></div>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-number" class="shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-duration" class="shadow"></div>
							</td>
						</tr>
					   <tr>
							<td>
								<div class="narrow shadow" data-type="symbol" data-device="Fritzboxanrufeliste"
									 data-get="3-state" 
							data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
									 data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
									 data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>

							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-timestamp" class="inline shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-name" data-color="yellow" class="shadow"></div>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-number" class="shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-duration" class="shadow"></div>
							</td>
						</tr>
					  <tr>
							<td>
								<div class="narrow shadow" data-type="symbol" data-device="Fritzboxanrufeliste"
									 data-get="4-state" 
							data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
									 data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
									 data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>

							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-timestamp" class="inline shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-name" data-color="yellow" class="shadow"></div>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-number" class="shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-duration" class="shadow"></div>
							</td>
						</tr>
					  <tr>
							<td>
								<div class="narrow shadow" data-type="symbol" data-device="Fritzboxanrufeliste"
									 data-get="5-state" 
							data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
									 data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
									 data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>

							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-timestamp" class="inline shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-name" data-color="yellow" class="shadow"></div>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-number" class="shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-duration" class="shadow"></div>
							</td>
						</tr>
					  <tr>
							<td>
								<div class="narrow shadow" data-type="symbol" data-device="Fritzboxanrufeliste"
									 data-get="6-state" 
							data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
									 data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
									 data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>

							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-timestamp" class="inline shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-name" data-color="yellow" class="shadow"></div>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-number" class="shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-duration" class="shadow"></div>
							</td>
						</tr>
					  <tr>
							<td>
								<div class="narrow shadow" data-type="symbol" data-device="Fritzboxanrufeliste"
									 data-get="7-state" 
							data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
									 data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
									 data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>

							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-timestamp" class="inline shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-name" data-color="yellow" class="shadow"></div>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-number" class="shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-duration" class="shadow"></div>
							</td>
						</tr>
					  <tr>
							<td>
								<div class="narrow shadow" data-type="symbol" data-device="Fritzboxanrufeliste"
									 data-get="8-state" 
							data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
									 data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
									 data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>

							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="8-timestamp" class="inline shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="8-name" data-color="yellow" class="shadow"></div>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="8-number" class="shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="8-duration" class="shadow"></div>
							</td>
						</tr>

					  <tr>
							<td>
								<div class="narrow shadow" data-type="symbol" data-device="Fritzboxanrufeliste"
									 data-get="9-state" 
							data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
									 data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
									 data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>

							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="9-timestamp" class="inline shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="9-name" data-color="yellow" class="shadow"></div>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="9-number" class="shadow"></div>
							</td>
							<td>
								<div data-type="label" data-device="Fritzboxanrufeliste" data-get="9-duration" class="shadow"></div>
							</td>
						</tr>
					</table>
				</li>

Und anbei noch 2 Bilder wie das ganze in FHEM und Tablet UI aussieht.

Hausierer · 23 April 2017, 09:58:29

Hallo Zusammen,

bei mir läuft fast alles perfekt. Ich habe nur ein kleines Problemchen. Wenn jemand auf den Anrufbeantworter spricht, dann wird kein Icon angezeigt. Wenn ich in der Config ein anderes Icon angebe, dann wird das falsche Icon abgebildet. Also ist meine Schlussfolgerung, dass mein Icon "phone_answering" fehlt, oder falsch geschrieben ist. Wie kann ich das überprüfen? Wo liegen die Icons eigentlich.
Schon mal vielen Dank für die Hilfe!!

Gruß
Holger

carzl · 14 November 2017, 18:42:04

Hallo @Hausierer, hallo in die Runde,

ich habe da wohl ein vergleichbares Problem; Hausierer, hast du es gelöst? Ich habe quasi dieselbe Def im FTUI wie ihr, aber ich sehe falsche Icons. Zwar auch Telefonie-Icons, aber teilweise nicht die, die Fhem als oa-Icons mitbringt. Hier ein Beispiel, auf einen Anruf muss das Icon "phone_missed_in" gezogen werden. In Fhem korrekt (Bild 1), in FTUI aber falsch (Bild 2). Was ich nicht verstehe: das falsche Symbol entspricht zwar im Design dem Telefonie-Icon-Set, ist im oa-Ordner aber gar nicht vorhanden. Und: wenn ich z. B. in Chrome mit der rechten Maustaste auf die Icons die html-Seite ansehe, steht bei beiden "phone_missed_in" als Icon, was ja eigentlich stimmen müsste. Holt sich FTUI die Icons woanders her als aus /opt/fhem/www/images/openautomation? data-device und -get stimmen definitiv, die Zuordnung zu Quelle/Ereignis in der Fritte sind korrekt. Eigenartig...

Danke!

setstate · 14 November 2017, 20:59:57

gesten habe ich eine icons_table.html hochgeladen. Damit kann man alle Icons der font-awesome.min.css openautomation.css fhemSVG.css material-icons.min.css weather-icons.min.css ansehen.

Die Seite wurde mit der aktuellen gen_iconsdemo.pl erzeugt.

das "phone_missed_in"-Icon ist dabei. Passt das so?

Nachtrag:
Bei den Material-Icons sieht das phone_missed ähnlich aus. Also erscheint das abgebildete oa-phone_missed_in sehr plausibel.

Markus Bloch · 14 November 2017, 21:11:19

Zitat von: carzl am 14 November 2017, 18:42:04
In Fhem korrekt (Bild 1), in FTUI aber falsch (Bild 2). Was ich nicht verstehe: das falsche Symbol entspricht zwar im Design dem Telefonie-Icon-Set, ist im oa-Ordner aber gar nicht vorhanden.

Das liegt daran, dass ich das Icon in FHEM nachträglich geändert hatte, da ich das originale Symbol für nicht aussagekräftig genug gehalten habe. Daher habe ich ein eigenes "phone_missed_in"/"phone_missed_out"-Icon erstellt und eingecheckt

Viele Grüße

Markus

carzl · 18 November 2017, 09:46:06

Danke setstate und Markus.

@setstate, coole Sache mit der icons_table.html! Gefällt mir.

@Markus, sorry, ich glaube ich stehe auf der Leitung

Wo kommen denn die Icons physisch her, die ich im FTUI angezeigt bekomme - aus /opt/fhem/www/images/openautomation oder liegen die woanders? Ich habe noch so einen Effekt, und zwar mit dem Icon oa-phone_answering. Im FTUI habe ich definiert, dass es für "=> O_O" in der Fritzbox angezeigt wird. In setstates icons_table.html kann ich es auch finden. Aber FTUI zeigt bei einem solchen Anrufevent gar kein Icon an, so als könne es oa-phone_answering nicht finden.

Ich glaube, ich DAU hab hier irgendwas grundsätzliches noch nicht gerafft

Gunther · 18 November 2017, 12:12:09

Zitat von: setstate am 14 November 2017, 20:59:57
gesten habe ich eine icons_table.html hochgeladen. Damit kann man alle Icons der font-awesome.min.css openautomation.css fhemSVG.css material-icons.min.css weather-icons.min.css ansehen.

~~Cool, nur wo finde ich die?~~
Hier habe ich den Link zum ZIP-File gefunden:
https://github.com/knowthelist/fhem-tablet-ui/archive/master.zip
Wenn ich die Datei öffne, sehe ich eine kaum lesbare Tabelle mit den Namen aber keine Icons.
Wie kann ich mir das Ding richtig anzeigen lassen? Klappt das irgendwo online?

setstate · 18 November 2017, 13:29:21

die icons_table.html muss in das gleiche Verzeichnis wie deine index.html der FTUI Installation. Die URL entsprechend eingeben: http://fhem:8083/fhem/ftui/icons_table.html