[Tablet UI] FB_CALLLIST einbinden

Begonnen von Gunther, 08 November 2015, 18:04:47

Vorheriges Thema - Nächstes Thema

roman1528

Zitat von: uniqueck am 08 November 2015, 22:07:15
Hi roman1528,

was ist denn das für ein Background auf deinem TabletUI, bzw. woher hast du den?

Gruß

Moin.
Einfach mal Tante Google's Fotoalbum befragen.  ;)
Anschließend hab ich in /opt/fhem/www/tablet den ordner /images angelegt und über **-custom.css den Hintergrund eingebunden.
body {
background:#000000 url(../images/orange_blue_bg.jpg) 0 0 no-repeat
}


So wird der Hintergrund aus der originalen CSS überschrieben. Dran denken die CSS in deinen HTML's zu verlinken/deklarieren:
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-custom.css" />

Kleiner Tipp. Das Bild in genau der Auflösung suchen/herunterladen in der du dein FTUI später darstellen möchtest.
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

setstate

Vielen Dank für die kurze Erklärung bezüglich des Hindergrundbildes. Ich habe es gleich ins Wiki FTUI FAQ übernommen.

Gunther

So, das schaut jetzt bei mir schon gut aus. (Bild anbei)

Mein Code dazu in entsprechender html:
<li data-row="2" data-col="2" data-sizex="5" data-sizey="4">
    <header>Anrufliste</header>
<table width="100%" class="top-space">
        <tr>
            <td>
<div data-type="symbol" data-device="Fritzboxanrufeliste" 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="symbol" data-device="Fritzboxanrufeliste" data-get="1-internal" data-get-on='["Sipgate","6932","Privat","Oculus Concept","Fotografie","Fax","982"]' data-icons='["gk-question","gk-question","gk-h-g","gk-oculusconcept","gk-gk-photo","gk-file-text","gk-question"]' data-colors='["red","red","green","blue","red","red"]'></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-internal"></div>
            </td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-name"></div>
</td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-duration"></div>
</td>
</tr>
        <tr>
            <td>
<div data-type="symbol" data-device="Fritzboxanrufeliste" 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="symbol" data-device="Fritzboxanrufeliste" data-get="2-internal" data-get-on='["Sipgate","6932","Privat","Oculus Concept","Fotografie","Fax","982"]' data-icons='["gk-question","gk-question","gk-h-g","gk-oculusconcept","gk-gk-photo","gk-file-text","gk-question"]' data-colors='["red","red","green","blue","red","red"]'></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-internal"></div>
            </td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-name"></div>
</td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-duration"></div>
</td>
</tr>
        <tr>
            <td>
<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="3-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="symbol" data-device="Fritzboxanrufeliste" data-get="3-internal" data-get-on='["Sipgate","692","Privat","Oculus Concept","Fotografie","Fax","982"]' data-icons='["gk-question","gk-question","gk-h-g","gk-oculusconcept","gk-gk-photo","gk-file-text","gk-question"]' data-colors='["red","red","green","blue","red","red"]'></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-internal"></div>
            </td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-name"></div>
</td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="3-duration"></div>
</td>
</tr>
        <tr>
            <td>
<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="4-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="symbol" data-device="Fritzboxanrufeliste" data-get="4-internal" data-get-on='["Sipgate","692","Privat","Oculus Concept","Fotografie","Fax","982"]' data-icons='["gk-question","gk-question","gk-h-g","gk-oculusconcept","gk-gk-photo","gk-file-text","gk-question"]' data-colors='["red","red","green","blue","red","red"]'></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-internal"></div>
            </td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-name"></div>
</td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="4-duration"></div>
</td>
</tr>
        <tr>
            <td>
<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="5-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="symbol" data-device="Fritzboxanrufeliste" data-get="5-internal" data-get-on='["Sipgate","692","Privat","Oculus Concept","Fotografie","Fax","982"]' data-icons='["gk-question","gk-question","gk-h-g","gk-oculusconcept","gk-gk-photo","gk-file-text","gk-question"]' data-colors='["red","red","green","blue","red","red"]'></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-internal"></div>
            </td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-name"></div>
</td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="5-duration"></div>
</td>
</tr>
        <tr>
            <td>
<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="6-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="symbol" data-device="Fritzboxanrufeliste" data-get="6-internal" data-get-on='["Sipgate","692","Privat","Oculus Concept","Fotografie","Fax","982"]' data-icons='["gk-question","gk-question","gk-h-g","gk-oculusconcept","gk-gk-photo","gk-file-text","gk-question"]' data-colors='["red","red","green","blue","red","red"]'></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-internal"></div>
            </td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-name"></div>
</td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="6-duration"></div>
</td>
</tr>
        <tr>
            <td>
<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="7-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="symbol" data-device="Fritzboxanrufeliste" data-get="7-internal" data-get-on='["Sipgate","692","Privat","Oculus Concept","Fotografie","Fax","982"]' data-icons='["gk-question","gk-question","gk-h-g","gk-oculusconcept","gk-gk-photo","gk-file-text","gk-question"]' data-colors='["red","red","green","blue","red","red"]'></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-internal"></div>
            </td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-name"></div>
</td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="7-duration"></div>
</td>
</tr>
</table>
</li>



Meine fhem.cfg
define Fritzboxanrufe FB_CALLMONITOR 192.168.0.1
attr Fritzboxanrufe fritzbox-remote-phonebook 1
attr Fritzboxanrufe fritzbox-remote-phonebook-via tr064
attr Fritzboxanrufe reverse-search phonebook,klicktel.de,dasoertliche.de,search.ch,dasschnelle.at,textfile
attr Fritzboxanrufe room Haus


define Fritzboxanrufeliste FB_CALLLIST Fritzboxanrufe
attr Fritzboxanrufeliste create-readings 1
attr Fritzboxanrufeliste event-on-change-reading 1
attr Fritzboxanrufeliste event-on-update-reading 1
attr Fritzboxanrufeliste time-format-string %a, %d.%m.%y %H:%M
attr Fritzboxanrufeliste internal-number-filter {'1234567' => 'Sipgate', '1234567' => '1234567', '1234567' => 'Privat', '1234567' => 'Oculus Concept', '1234567' => 'Fotografie', '1234567' => 'Fax', '1234567' => '1234567'}
attr Fritzboxanrufeliste connection-mapping {'DECT_1' => 'Telefon Büro', 'DECT_2' => 'Telefon Küche', 'DECT_3' => 'Telefon Kino', 'DECT_4' => 'Telefon Schlafzimmer'}
attr Fritzboxanrufeliste room Haus

FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Gunther

#18
Was nun leider noch nicht klappt ist die Übernahme der Nummern aus dem FB-Telefonbuch. Muss ich dafür noch etwas machen?


Edit: für einige Nummern klappt das. Vermute das Problem liegt im Mapping, wenn mal mit internationaler Nummer und mal ohne im Adressbuch.
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Gunther

Und ich schiebe noch eine 2. Frage hinterher:

Auf dem Homescreen möchte ich nur 2 einfache Textzeilen mit den nicht angenommenen, verpassten Anrufen und den AB-Mitteilungen

Mein Code sieht so aus:
<table width="100%" class="top-space">
        <tr>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-state" data-states='["=> X","=> O_O"]'</div>
</td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-name"></div>
</td>
<td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-duration"></div>
</td>
</tr>
        <tr>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-state" data-states='["=> X","=> O_O"]'></div>
</td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-name"></div>
</td>
<td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-duration"></div>
</td>
</tr>
</table>


Wie bekomme ich es hin, dass nur die verpassten Anrufe angezeigt werden?
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

setstate

@Gunther: Deine Icons funktionieren jetzt, oder? Ich konnte noch nicht schauen ...

Deine Icons sehen auch sehr gut aus!
Wenn ihr allgemeine und schöne Icons selbst gebaut habt (die Urheber seit) und sie der Allgemeinheit zur Verfügung stellen wollt, schickt sie mir einfach. Ich lasse sie dann durch meinen garantiert subjektiven  ;) Stil-Check laufen und binde sie dann in den FTUI-Font mit ein. Vielleicht bekommen wir so schnell die Openautomation Icons weg, die ich immer noch als sehr hässlich empfinde, bzw. sie vom Stil her nicht zum FTUI passend finde.

roman1528

Zitat von: setstate am 09 November 2015, 13:30:10
Vielleicht bekommen wir so schnell die Openautomation Icons weg, die ich immer noch als sehr hässlich empfinde, bzw. sie vom Stil her nicht zum FTUI passend finde.

Die können nicht weg  :o
dann müsste ich alles ändern  ::)
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

setstate

Ja, mache ich auch nicht. Keine Angst ...

roman1528

i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

l3skon3

#24
Zitat von: Gunther am 09 November 2015, 13:20:48
Und ich schiebe noch eine 2. Frage hinterher:

Auf dem Homescreen möchte ich nur 2 einfache Textzeilen mit den nicht angenommenen, verpassten Anrufen und den AB-Mitteilungen

Mein Code sieht so aus:
<table width="100%" class="top-space">
        <tr>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-state" data-states='["=> X","=> O_O"]'</div>
</td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-name"></div>
</td>
<td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-duration"></div>
</td>
</tr>
        <tr>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-state" data-states='["=> X","=> O_O"]'></div>
</td>
            <td>
                <div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-timestamp" data-part="3" class=""></div>
            </td>
            <td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-number"></div>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-name"></div>
</td>
<td>
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="2-duration"></div>
</td>
</tr>
</table>


Wie bekomme ich es hin, dass nur die verpassten Anrufe angezeigt werden?

Hallo,

das ist jetzt nur eine Vermutung aber sollte klappen:

1. Leg die noch einen FB_CALLLIST an z.B. Fritzboxanrufeliste_missing
2. Setzte das attr list-type auf "missed-calls"
3. editiere dein html auf das neue data-device="Fritzboxanrufeliste_missing"

Gruß

Daniel

ps: Du hast mich da grad auf eine Idee gebracht, muss mal bisschen mit dem widget_Select spielen.

uniqueck

Dankeschön, natürlich google ist nen guter Ansatz ;)
Ich finde nur die Größenberechnung etwas schwierig, da wenn ich 8 Reihen habe + 116 in der Breite, dann noch 9 x gridster_margin von 5 drauf, komme ich irgendwie nicht auf die Größe, in welcher das Bild sein muss, aber das ist natürlich eine andere Baustelle.

Oder kann mir gerade jemand schnell sagen wie ich anhand dieser Angaben auf die tatsächliche Größe vom Tablet, oder halt andersrum.

Ziel soll es nämlich sein, eine DSL zu entwerfen, womit einfach solche TabletUI Seite entworfen werden können. Ich habe schon einen Stand, der bald soweit ist, dass ich ihn vorstellen kann.


Zitat von: roman1528 am 09 November 2015, 10:10:56
Moin.
Einfach mal Tante Google's Fotoalbum befragen.  ;)
Anschließend hab ich in /opt/fhem/www/tablet den ordner /images angelegt und über **-custom.css den Hintergrund eingebunden.
body {
background:#000000 url(../images/orange_blue_bg.jpg) 0 0 no-repeat
}


So wird der Hintergrund aus der originalen CSS überschrieben. Dran denken die CSS in deinen HTML's zu verlinken/deklarieren:
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-custom.css" />

Kleiner Tipp. Das Bild in genau der Auflösung suchen/herunterladen in der du dein FTUI später darstellen möchtest.

roman1528

Zitat von: uniqueck am 09 November 2015, 22:28:33
Dankeschön, natürlich google ist nen guter Ansatz ;)
Ich finde nur die Größenberechnung etwas schwierig, da wenn ich 8 Reihen habe + 116 in der Breite, dann noch 9 x gridster_margin von 5 drauf, komme ich irgendwie nicht auf die Größe, in welcher das Bild sein muss, aber das ist natürlich eine andere Baustelle.

Oder kann mir gerade jemand schnell sagen wie ich anhand dieser Angaben auf die tatsächliche Größe vom Tablet, oder halt andersrum.

Ziel soll es nämlich sein, eine DSL zu entwerfen, womit einfach solche TabletUI Seite entworfen werden können. Ich habe schon einen Stand, der bald soweit ist, dass ich ihn vorstellen kann.

Ausgehen von einem Android Tablet... AntutuBenchmark installieren und unter Device Info die Display Resolution nehmen. Oder in den Technischen Details des herstellers nachschauen.

Dann die width und height der einzelnen grister elemente pixelweise erhöhen bis man einen einigermaßen gleichmäßigen Außenrand hat... Manuelle Methode. So hab ich das gemacht. Als beispiel mal ein Screenshot im Anhang. Wenn ich dann meine CUL's am laufen habe und einige weitere Geräte dazu gekommen sind stell ich meine FTUI auch gern im User-Thread vor^^
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

uniqueck

Jap so habe ich das auch gemacht, da ich gerade aber am entwickeln einer DSL für das Thema TabletUI sitze, will ich ja gerade nur die Angaben zur maximalen Auflosung machen und dann wieviele Spalten / Zeilen hätte ich gerne. Der Rest soll halt automatisch berechnet werden. Der Vorteil ich kann bei jeder Seite prüfen ob die gridster immer nich in der Range liegen und solche nützlichen Validierungen. Genauso kann ich zum Beispiel prüfen, ob eine Seite welche ich per Button anspringen möchte auch vorhanden ist. Naja dazu dann später mehr.

Gesendet von meinem GT-N7100 mit Tapatalk


Gunther

FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden