[Tablet UI] FB_CALLLIST einbinden

[suppenesser]

                     data-get="1-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["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='["green","red","firebrick","green","#aa6900"]'></div>
         
Ausgehende Anrufe werden z.b. genau wie angenommene eingehende Anrufe angezeigt, das ist sehr verwirrend, auch werden in der Historie die letzte Anrufe immer alle mit dem gleichen Icon und farbe angezeigt.

Wo liegt mein Fehler?

Dein Fehler liegt darin, das Du kein "<="  in der data-get Zeile hast. Dazu brauchst Du weiterhin auch ein Bild in der data-icons Zeile und eine Farbe in data-colors, jeweils an gleicher Stelle. (maybe an erster?)

Schau dir dazu mal die readings des device an!

[Tommy82]

Das war es, danke für den Tip

[Sky]

Hallo ,

ich bin auf diesen Thread gestoßen ,auf der Suche , warum ich in meinem Tablet UI keine Anrufsymbole angezeigt bekomme .

in Fhem ist meiner Meinung alles in Ordnung.


In der HTML sieht es so aus :

<li data-row="2" data-col="4" data-sizex="5" data-sizey="2">
  <header>WOHNZIMMER</header>
  <table width="100%" class="">
        <tr>
            <td>
                <!-- Zuordnung des Status zu entsprechendem Icon -->
                <div class="narrow" data-type="symbol" data-device="FritzBoxCallList"
                     data-get="1-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["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='["green","red","firebrick","green","#aa6900"]'></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-timestamp" data-part="5" class=""></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-timestamp" data-part="1" class="inline"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-timestamp" data-part="2" class="inline"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-timestamp" data-part="3" class="inline"></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-name"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-number"></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-duration"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="narrow" data-type="symbol" data-device="FritzBoxCallList"
                     data-get="2-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["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='["green","firebrick","firebrick","green","#aa6900"]'></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-timestamp" data-part="5" class=""></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-timestamp" data-part="1" class="inline"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-timestamp" data-part="2" class="inline"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-timestamp" data-part="3" class="inline"></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-name"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-number"></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-duration"></div>
            </td>
        </tr>
    </table>



Sieht irgendwer einen Fehler ??



 

[Markus Bloch]

Also ich kann Anrufsymbole auf deinem Bild sehen.

Gruß
Markus

[Sky]

 
Das Bild ist aus Fhem , nicht im Tablet UI

[Markus Bloch]

Heist denn deine FB_CALLLIST-Definition auch "FritzBoxCallList"?

Gruß
Markus

[Sky]

Danke für die Hilfe ..

hier ein paar Bilder zur Verständlichkeit ..

[Markus Bloch]

Hast du https://forum.fhem.de/index.php/topic,43758.msg366650.html#msg366650 gelesen und umgesetzt?

Gruß
Markus

[Sky]

Meinst Du dies ??

Danke für den Tipp.
Habe es hinbekommen. Hatte vergessen die openautomation Icons zu laden.

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
Gruß Jan

Wenn ja ,entschuldige ,aber wie binde ich dies ein ??

[Markus Bloch]

In deiner HTML-Datei im <head>-Tag einfügen. Siehe Bild im Anhang.

Gruß
Markus

[Sky]

Vielen Dank  Symbole sind da ...

mir ist nur aufgefallen das mir zweimal Datum und Uhrzeit angezeigt wird ,habe aber doch nichts doppelt in der HTML ??

[Sky]

Ich verzweifle langsam ...

es funktioniert nicht . Ich habe meine index.html jetzt nur mal mit der Anrufliste bestückt ,wie Ihr sehen könnt fehlt die Farbe und das richtige Symbol , der obere Anruf war ausgehend , ausserdem zeigt er mir zweimal das gleiche Datum und Uhrzeit .

Dann habe ich das Beispiel aus dem WiKi genommen zur Integration in Tablet UI ( https://wiki.fhem.de/wiki/FB_CALLLIST ) ,keine Änderung .

Meine Index sieht so aus :

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * Just another dashboard for FHEM
     *
     * Version: 1.4.4
     * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' 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="116">
    <meta name="widget_base_height" content="131">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->

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

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

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

    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
    <script src="/fhem/pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="8" data-col="2" data-sizex="4" data-sizey="1">
    <header class="headerTransparent">ANRUFE</header>
    <table width="100%" class="">
        <tr>
            <td>
                <!-- Zuordnung des Status zu entsprechendem Icon -->
                <div class="narrow" data-type="symbol" data-device="FritzBoxCallList"
                     data-get="1-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["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='["green","firebrick","firebrick","green","#aa6900"]'></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-timestamp" data-part="5" class=""></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-timestamp" data-part="1" class="inline"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-timestamp" data-part="2" class="inline"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-timestamp" data-part="3" class="inline"></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-name"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-number"></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="1-duration"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="narrow" data-type="symbol" data-device="FritzBoxCallList"
                     data-get="2-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["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='["green","firebrick","firebrick","green","#aa6900"]'></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-timestamp" data-part="5" class=""></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-timestamp" data-part="1" class="inline"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-timestamp" data-part="2" class="inline"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-timestamp" data-part="3" class="inline"></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-name"></div>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-number"></div>
            </td>
            <td>
                <div data-type="label" data-device="FritzBoxCallList" data-get="2-duration"></div>
            </td>
        </tr>
    </table>
</li>
</ul>
</div>
</body>
</html>



Meine Anrufliste in Fhem funktioniert .....
ich weiß nicht mehr  weiter .........

[Tommy82]

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

<!-- ============= Anrufe  ================== -->
<!-- ======================================= -->
<li data-row="2" data-col="2" data-sizex="4" data-sizey="4">
    <header class="headerTransparent">ANRUFE</header>
    <table width="100%" class="">
        <tr>
            <td>
                <!-- Zuordnung des Status zu entsprechendem Icon -->
                <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?

[Morrino]

Hi,

habe das Problem, dass wenn beim durchsuchen des Telefonbuchs der Name sehr Lange ist, meine Tabelle über die Größe des Rahmens geht.

Kann ich die Tabelle irgendwie auf eine feste Größe setzen oder noch besser den Namen irgendwann abschneiden?

Code Auswählen Erweitern


<!--Anruferliste -->
<li data-row="1" data-col="4" data-sizex="4" data-sizey="3">
<header>Anrufliste</header>
<table width="100%" class="top-space" >
<tr>
<td>
<div data-type="symbol" data-device="Anrufliste" data-get="1-state" data-icons='["fa-database","fa-phone","fa-phone","fa-phone","fa-phone","fa-phone","fa-phone","fa-phone","fa-phone"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=>  ((o))","<= ((o))","=>  [=]","<=  [=]","<= X"]'></div>
<div data-type="symbol" data-device="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"]' ></div>
</td>

<td>
<div data-type="label" data-device="Anrufliste" data-get="1-timestamp"  ></div>
</td>
<td>
<div data-type="label" data-device="Anrufliste" data-get="1-number"></div>
<div data-type="label" data-device="Anrufliste" data-get="1-name" style="color:#aa6900;"></div>
</td>
<td>
<div data-type="label" data-device="Anrufliste" data-get="1-duration"></div>
</td>
</tr>

[Andre0909]

Moin, ich habe auch eine Frage:

Endlich habe ich es hinbekommen, dass ein Türklingeln in der Calllist ausgewertet wird in Form eines Anrufes auf eine fiktive Nummer.
Soweit so gut. Jetzt möchte ich aber eine Calllist erstellen, in welcher NUR diese Anrufe erscheinen, also keine Telefonanrufe oder ähnliches. Leider kann ich nur nach interner Nummer filtern, aber die ist ja jeweils die selbe, eine Filterung nach Rufnummern (ausgehende , ankommende) habe ich leider nicht gefunden. Jmd. eine Idee?

2. Möglichkeit wäre z.B ein dummy mit nur den WErten der Türklingel zu beschreiben. Dazu müsste man aus der Calllist halt entsprechende Einträge ausfildern und in fortlaufende Readings eines Dummys schreiben.
Den könnte ich dann z.B. in Tabellenform in FTUI auswerten.

Hintergrund ist, dass ich zwar auswerten kann wie oft es geklingelt hat wenn ich nach Hause komme, allerdings keine Liste habe wann. Ich würd mich über eure Hilfe freuen. Vielen Dank!