Wofür FHEM? Tablet als Wand-Infodisplay mit FLOORPLAN

Begonnen von MaJu, 08 April 2014, 21:15:32

Vorheriges Thema - Nächstes Thema

moonsorrox

Zitat von: bmwfan am 12 Januar 2016, 22:18:22
Leider finde ich im play store die APP webviewcontrol nicht.
gibt es auch nicht  :-\
Musst du dir hier aus dem Forum holen und aufs Tablet spielen
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Tommy82

Hi, wie moonsorrox schon sagt gibt's nur hier im Forum, gibt's auch einen Beitrag im fhem Wiki zu.

Ich bin aber wie oben erwähnt mittlerweile zu amad App umgestiegen, da diese die Konfiguration von Tanker überflüssig macht.
Gibt es hier im Forum auch einige Beiträge zu, und auch im wiki


Gesendet von iPhone mit Tapatalk
Fhem Cubitruck  Armbian Buster with Linux 5.3.9-sunxi
HM-CC_RT-DN, HM-Sec-RHS,HM-Sec-SD, HM-Sec-SCo,IT1500,1xIT GRR-3500 Fritz!Dect200,Powerline546E,Enigma2 Modul mit 3 Vu+,Wol Modul für WinServer2016 und WinServer 2019,FB6590
Allnetl Wandtablett mit FTUI

Syntaxterror

Hallo,

ich bin auch von WVC weg, so nett das auch ist..
Nun hab ich Automagic Pro und IP webcam Pro installiert.
Prinzipiell muss ja das was mit Tasker geht, auch mit Automagic gehen.
Das Display von meinem Tablet soll angehen, wenn IP webcam eine Bewegung erkennt.
Ich habe keine Rootrechte auf dem Tablet. (Irgendein Noname MPQC1010, kriege ich nicht gerootet.)
Deshalb soll Automagic eine Meldung an fhem schicken und dann schaltet fhem mit "set Tablet screen on" das Display ein.
Hat einer sowas schon am Laufen und dafür vielleicht schon einen Flow erstellt?

:)
FHEM5.7produktiv Pi3+Pi2,CUL868,CUL433,ser2net,DS2482 mit ca.30Sensoren/Aktoren, ca.100xHomematic,Gertboard+GPIO, 10xLaCrosse

Tommy82

Hi, guck mal hier im Forum im Amad Thread, da wirst du bestimmt was passendes dafür finden


Gesendet von iPhone mit Tapatalk
Fhem Cubitruck  Armbian Buster with Linux 5.3.9-sunxi
HM-CC_RT-DN, HM-Sec-RHS,HM-Sec-SD, HM-Sec-SCo,IT1500,1xIT GRR-3500 Fritz!Dect200,Powerline546E,Enigma2 Modul mit 3 Vu+,Wol Modul für WinServer2016 und WinServer 2019,FB6590
Allnetl Wandtablett mit FTUI

bmwfan

Irgendwie fehlt mir der Background hierzu.  :'(

WVC ist doch kein Browser sondern eine Art Webserver, dachte ich immer. AMAD ebenso. Ich suche aber einen Browser, der mir eine Darstellung auf dem ganzen Screen zuläßt, ohne Kopfzeilen o.ä.
Auf dem Tablet kann dann über IPCam Pro und Tasker o.ä. gesteuert werden, das das Tablet selbständig angeht etc. Soweit ist mein bisheriges Verständnis.

Mit welchem Browser auf dem Tablet arbeitet Ihr? Mit dem FullScreen Webbrowser komme ich nicht zurecht. Ich habe es nicht einmal geschafft, eine URL dauerhaft abzuspeichern.  :(

Gruß Jürgen
Synology DS720+ mit Docker-Container und Haupt-FHEM, HW-LAN, Jalousienaktoren; Raspi 3B+ mit piVCCU ohne FHEM-Instanz, CUL, JeeLink; Raspi 3B+ mit FHEM und HMUARTUSB,  Raspi 3B+ mit HMUARTGPIO, 1-wire, ebusd

Tommy82

Hey, wo hängst du denn jetzt genau uberAll? Dann kann man es etwas strukturiert abarbeiten;-)
Also WVC bringt den Browser mit, denn kann man natürlich nehmen, ich hatte damit immer das Problem das ich mein WebIf nicht in der richtigen Größe dargestellt bekam, deshalb nutze ich denn FullScreenWebbrowser, damit klappte problemlos bei mir, einige hier verwenden aber glaub ich auch chrome. Hab ich noch nicht getestet.

Also mach mal eine todo Liste was nicht klappt, und dann schauen wir mal


Gesendet von iPhone mit Tapatalk
Fhem Cubitruck  Armbian Buster with Linux 5.3.9-sunxi
HM-CC_RT-DN, HM-Sec-RHS,HM-Sec-SD, HM-Sec-SCo,IT1500,1xIT GRR-3500 Fritz!Dect200,Powerline546E,Enigma2 Modul mit 3 Vu+,Wol Modul für WinServer2016 und WinServer 2019,FB6590
Allnetl Wandtablett mit FTUI

bmwfan

Beim FullScreenBrowser habe ich meine URL zur index.html eingegeben, er öffnet aber nur den HOME-Button und der Rest der Seite bleibt leer.
Die index.html:
<!DOCTYPE html>
<html>
<head>
        <title>HOME</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="widget_base_width" content="138">
        <meta name="widget_base_height" content="155">
<meta name="widget_margin" content="1">
        <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="gridster_disable" content="1">
        <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

        <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/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-tablet.css" />

        <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/pgm2/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'TAB3':'TAB3'}; var wvcUserCssFile="webviewcontrol.css"</script>
</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>

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


und die inc_homebutton.html:
<header class="headerTransparent">HOME</header>
<div data-type="pagetab"
data-url="index_home.html"
data-background-icon="fa-circle-thin"
data-on-background-color="orange"
data-icon="fa-home"
class="bigger top-space">
</div>


und die index_home.html:
<!DOCTYPE html>
<html>
<head>
        <title>HOME</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="1" data-sizey="1" data-template="inc_jalousiebutton.html"></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="1" data-sizey="1" data-template="inc_wetterbutton.html"></li>
<li class="halbTransparent" data-row="1" data-col="6" data-sizex="2" data-sizey="1" data-template="inc_aussentemp.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>
.

In der index_home.html steht dann der Seitenaufbau. Alle anderen Browser (Firefox, Tabler-eigene Browser) öffnen die index.html, beim FullScreenBrowser kommt nur die Beschriftung des Home-Buttons.

Woran kann das liegen?

Noch eine Frage: Wie legt man denn
<meta name="widget_base_width" content="138">
        <meta name="widget_base_height" content="155">

für ein gegebens Tablet (hier HannsPad 13,3") fest? Gibt es da Umrechnungsfaktoren für Pixelzahl o.ä.? Ich habe hierzu bisher nicht im Netz gefunden.

Gruß Jürgen
Synology DS720+ mit Docker-Container und Haupt-FHEM, HW-LAN, Jalousienaktoren; Raspi 3B+ mit piVCCU ohne FHEM-Instanz, CUL, JeeLink; Raspi 3B+ mit FHEM und HMUARTUSB,  Raspi 3B+ mit HMUARTGPIO, 1-wire, ebusd

Tommy82

Was machst du mit den ganze html Sachen?:-)
Also ich hab bei dem Browser nur meine Url eingeben zu meiner WebIf Instanz, also bei mir so 192.168.188.47:8085/floorplans/HOME

Zu deiner zweiten Frage, keine Ahnung sorry


Gesendet von iPhone mit Tapatalk
Fhem Cubitruck  Armbian Buster with Linux 5.3.9-sunxi
HM-CC_RT-DN, HM-Sec-RHS,HM-Sec-SD, HM-Sec-SCo,IT1500,1xIT GRR-3500 Fritz!Dect200,Powerline546E,Enigma2 Modul mit 3 Vu+,Wol Modul für WinServer2016 und WinServer 2019,FB6590
Allnetl Wandtablett mit FTUI

Rumbel

#293
Jetzt buddel ich hier den uralten Beitrag mal wieder aus... sorry! :-D

ich hab seit einiger Zeit zuhause in kleines 1024x600pxl Touchscreenchen stehen... mit dem alten Floorplan von mir sieht das einfach mager aus. LCARS ist da schöner.

Jetzt war ich gestern einige Zeit dran und bin dem WIKI gefolgt und habe alles auf 1024x600pxl runter skaliert.
Genervt war ich aber dann, als ich für jeden Text ein einzelnes SVG anlegen musste.

Faul wie ich bin, hab ich nach Alternativen gesucht und mit etwas Java-Script folgendes geschafften.
(Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg)
Es ist 1:1 der Text-Tag aus dem Wiki nur die letzten Zeilen mit dem Script sind ergänzt.



<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="260"
   height="55"
   viewBox="0 0 260 55.000001"
   id="svg2"
   version="1.1"
   sodipodi:docname="lbl_switch_kueche1.svg"
   inkscape:version="0.91 r13725">
  <style
     type="text/css"
     id="style3">
@font-face {
    font-family: 'lcars';
    src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
    src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
         url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
         url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
    font-weight: normal;
    font-style: normal;}
</style>
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="3.9185501"
     inkscape:cx="133.4632"
     inkscape:cy="52.4847"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:window-width="1827"
     inkscape:window-height="1051"
     inkscape:window-x="84"
     inkscape:window-y="-9"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Ebene 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#ffcc9a;fill-opacity:1"
       id="rect3364"
       width="260"
       height="55"
       x="0"
       y="0" />
    <text
       x="255.354"
       y="49.50441"
       font-size="35"
       id="text11"
   name="text11"
       style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000"></text>
  </g>
  <script type="text/javascript">
    <![CDATA[
var Node = document.getElementsByTagName("text")[0]
var sParam = location.search;
sParam = sParam.substring(1,sParam.length);
var textNode = document.createTextNode(sParam);
Node.appendChild(textNode);
    ]]></script>
 
</svg>


Was macht das Script? Ganz einfach: es nimmt den Teil der URL hinter dem ? und fügt es in den Text ein. Zack fertig, dymanisches SVG. :-D

ich teste es jetzt noch etwas, aber klappen sollte es mit

define lbl_switch_Balkon weblink htmlCode {'<object data="/fhem/icons/lcars/Test.svg?Balkon" type="image/svg+xml"></object>' }
define lbl_switch_Schlafzimmer weblink htmlCode {'<object data="/fhem/icons/lcars/Test.svg?Schlafzimmer" type="image/svg+xml"></object>' }
...
define lbl_switch_TestTest123 weblink htmlCode {'<object data="/fhem/icons/lcars/Test.svg?TestTest123" type="image/svg+xml"></object>' }



Vielleicht will das ja jemand ebenfalls testen und im Wiki ergänzen... find ich praktischer als 100 SVGs mit verschiedenen Texten anzulegen ;-)


Nachtrag: in den angehängten Dateien hab ich das noch mal etwas erweitert... dafür wird (mit vielen symbolen/texten) dann auch etwas mehr JavaScript ausgeführt... vielleicht nicht für ganz träge viewer geeignet aber flexibler. im test.html steht der aufruf mit drin:

<html>
<object type="image/svg+xml" data="test.svg?Label=Test234&BG=fill:#00FF00;fill-opacity:1&Style=font-size:35px;font-family:lcars;text-anchor:end;fill:#FF0000&W=200&H=10" />


</html>


mit
Label --> Label ändern
BG --> Hintergrund ändern
Style --> Text-Style ändern
W--> breite
H --> Höhe

ein SVG für alle Texte :-)
Fhem auf Raspberry Pi 3 mit HMLAN + viel HomeMatic-Zeugs / VU+ duo2 / Webcam an Synology Surveillance Station auf DS213+ / LD382A LED Module /Netatmo Wetterstation ... und mehr kommt sicher bald ;-)

mani

Hallo,
Versuche schon seit längerem die floorplan.css so zu ändern das der Name vom Gerät nicht darunter sondern seitlich vom Icon angezeigt wird leider schaff ich nicht....kann mir da event. Jemand weiterhelfen?
Mfg Mani
RasPi B+,Onkyo_AVR,Luxtronik2,Logo7,Mpd,Arduino Uno mit Ethernet,KNX,Jablotron

msfox

Zitat von: Rumbel am 05 April 2017, 15:55:28
Was macht das Script? Ganz einfach: es nimmt den Teil der URL hinter dem ? und fügt es in den Text ein. Zack fertig, dymanisches SVG. :-D
ein SVG für alle Texte :-)
Das wollte ich ja auch, habe deine Lösung nicht gefunden. Super, dank. Jetzt kann ich es schön machen und spare mir die 'zig Dateien mit redundaten Formatierungen.

Rumbel

#296
Zitat von: msfox am 31 August 2017, 15:38:04
Das wollte ich ja auch, habe deine Lösung nicht gefunden. Super, dank. Jetzt kann ich es schön machen und spare mir die 'zig Dateien mit redundaten Formatierungen.

ich hab das zuhause schon weiter entwickelt. Anbei der Download.

Eine Warnung noch:
Da die Bilder dynamisch generiert werden, landen sie nicht im Cache und machen den Download / Bildaufbau etwas langsamer.


Mein aktueller Aufruf sieht so aus:


htmlCode {'<object type="image/svg+xml" data="/fhem/images/default/lcars/Text_Flex.svg?Label=Alarmanlage_Scharf&H=30&W=150&Size=23"></object>' }

(hier mit Text, Breite, Höhe, Textgröße)

oder für die Uhrzeit (Dummy, der minütlich aktualisiert wird)
{ '<object type="image/svg+xml" data="/fhem/images/default/lcars/Text_Flex.svg?Label=' . Value('Uhrzeit') . '&H=25&W=50&Size=25&BG=#ff9900"></object>' }
zusätzlich noch mit der Hintergrundfarbe

Parameter:
W: Breite in pixeln
H: Höhe in Pixeln
Size:Textgröße
Label:Textinhalt (Lücken als _ klappen gut bei mir)
BG:Hintergrund
Style:complette Style-Definiton nach CSS (Dann wird Size ignoriert)
Anim:Wenn vorhanden, wird animiert (bsp. "alarmanlage" blinkt rot wenn aktiv.)

Zusätzliche Grafiken für
an (leuchtet)
an (blinkt rot)
aus (leuchtet nicht)
auf (blinkt rot)
zu (leuchtet nicht)
etc kann ich heute abend ergänzen.
Auf
Fhem auf Raspberry Pi 3 mit HMLAN + viel HomeMatic-Zeugs / VU+ duo2 / Webcam an Synology Surveillance Station auf DS213+ / LD382A LED Module /Netatmo Wetterstation ... und mehr kommt sicher bald ;-)

ringidigiding

Hallo,

habe das Text_Flex.svg von Rumbel jetzt mal ausprobiert. Es erleichtert die Positionierung von Texten auf dem Floorplan ungemein. Vielen Dank dafür.

Mir ist aufgefallen, dass die Positionierung des SVG Flex_Text.svg 'verschoben' ist. Mit 'verschoben' meine ich, dass das Objekt um 3 px nach unten und 3 px nach rechts verschoben ist, gegenüber anderen Objekten die mit den bisherigen svg Objekten ausgegebn wurden.

Die Postion auf dem Floorplan wird ja nicht über das Text_Flex.svg Objekt angegeben, sondern über das Attribut fp_<Floorplan_Name>, z.B. fp_LCARS_STATUS. Habe jetzt schon herumprobiert woran dies liegen könnte, aber nichts gefunden.

Hat vielleicht noch jemand dieses Verhalten festgestellt, bzw. eine Lösung dafür?

Habe mal einen Screenshot von dem verschobenen Element angfügt. Das rosa Rechteck im Hintergrund hat die Position 160, 10 und kommt über die background.svg, das orangene Rechteck kommt über Text_Flex.svg und hat ebenfalls die Position 160,10. Ist aber um 3px nach unten und 3px nach rects verschoben.

Schönen Tach noch   

Rumbel

Freut mich, dass es dir gefällt.

Das mit den 3 px ist mir bisher nicht aufgefallen. Aber jetzt wo ich nachschaue, ist der Text tatsächlich 3 px weiter oben platziert als das passende Bildchen dazu.
Merkwürdig.

Im SVG selbst seh ich dazu nichts. Alles beginnt bei pxl 9.

   viewBox="0 0 260 55"

[...]
  <rect xmlns="http://www.w3.org/2000/svg" style="fill:#ffcc9a;fill-opacity:1" id="rect3364" width="260" height="55" x="0" y="0">


Ich hab da leider keine Lösung.
ich würde vermuten, dass es generell am HTML-Object-Rahmen liegt? Oder hast du das andere SVG ebenfalls so eingebunden?


Hier mal der Vergleich zur Grafik und dem Text

define LC_LichtFlur structure LCARS fl_Licht_1 fl_Licht_2
attr LC_LichtFlur devStateIcon on:Switch_on:off off:Switch_off


define LC_Text_Flur weblink htmlCode {'<object type="image/svg+xml" data="/fhem/images/default/lcars/Text_Flex.svg?Label=Flur&H=30&W=140&Size=23"></object>' }

Die Icons (Licht an / Licht aus) sind 3 px höher als der Text dazu. Aber der Text ist ja im weblink-Rahmen... vielleicht ist das eben der kleine offset.
Meine Lösung: einfach um 3px verschieben ;-)
Fhem auf Raspberry Pi 3 mit HMLAN + viel HomeMatic-Zeugs / VU+ duo2 / Webcam an Synology Surveillance Station auf DS213+ / LD382A LED Module /Netatmo Wetterstation ... und mehr kommt sicher bald ;-)

ringidigiding

Alles um 3px zu verschieben wäre zwar möglich, aber da im Hintergrundbild alle Objekte auf 10px genau positioniert sind, wären alle über den Floorplan hinzugefügten Objekte mit krummen px Angaben.

Bisher war Webdesign nicht wirklich meins, wird es wahrscheinlich auch nicht mehr werden, habe mir das ganze aber nochmal genauer angesehen, und die Lösung doch noch gefunden.

Das Problem sind die Default Werte für die Rahmen.
Mit folgenden Definitionen im css Floorplan passt bei mir jetzt die Positionierung der dynamischen svg Elemente.


table, th, td, tr {
  border-collapse: collapse;
  padding: 0px 0px 0px 0px;
}

Werde jetzt weiter probieren die Elemente alle dynamisch einzubinden.