Hallo,
ich grüble gerade darüber nach, ob es möglich ist die Ausgabe des Event Monitors in einem Floorplan darzustellen. Einfache Frage: Ist das lösbar?
Wenn ja wäre ich über einen Lösungsansatz dankbar :)
VG
Frank
das hier: https://forum.fhem.de/index.php/topic,56084.msg476631.html#msg476631 abwandeln :)
gruss
andre
Top! Das sieht schon einmal gut aus. Danke Andre.
VG
Frank
Jetzt muss ich doch noch einmal fragen: wer ruft monitorRight.js auf? Bekomme es leider nicht zum laufen, da kommt noch dazu das ich iMo nicht mit meinem MAC arbeiten kann und nur dort sämtliche Hilfsprogs wie Textwrangler js Editor usw. verfügbar sind.
VG
Frank
es wird automatisch aufgerufen. du musst das file ins JavaScripts attribut eintragen. in deinem fall beim floorplan.
es kann aber sein das man am js file noch etwas ändern muss damit es mit dem floorplan geht. probier erst mal ob du es in fhemweb zum laufen bekommst.
ansonsten funktioniert das ganze so:
- der normale fhem event monitor sucht sich auf der aktuellen seite ein div mit der id console und zeigt dort dir events an.
- monitorRight.js baut ein solches div einfach auf jeder seite ein.
- auf dem floorplan könnte man das div auch über ein weblink device erzeugen das dann auch frei positionierbar ist
- dann muss man das div nicht mehr in dem code erzeugen der mit JavaScripts nachgeladen wird.
- wenn es das div auf der seite sowieso gibt kann man vermutlich auch direkt pgm2/console.js über JavaScripts nachladen
gruss
andre
ps: da fällt mir noch ein: schau dir mal readingsHistory an. vielleicht reicht dir das ja auch schon.
Habe ewig nicht mit Windows gearbeitet und jetzt mal meinen Studiorechner zu Rate gezogen. Im Debugger bekomme ich u.a.
[/!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head root="/fhem">
<title>fp_EV_Monitor</title>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="360">
<link href="/fhem/pgm2/jquery-ui.min.css" rel="stylesheet"/>
<link href="/fhem/css/darkfloorplanstyle_original.css" rel="stylesheet"/>
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/floorplan_drag.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_colorpicker.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_fbcalllist.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_knob.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_readingsGroup.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_readingsHistory.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_sortable.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_uzsu.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_weekprofile.js"></script>
<script attr='' type="text/javascript" src="/fhem/monitorRight.js"></script>
<script attr='' type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script><script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script><script type="text/javascript">var wvcDevices = {'12350': 'Lenovo', '12346': 'ViewSonic'}</script><script type="text/javascript" charset="UTF-8"></script>
</head>
<body name="fp_EV_Monitor" generated="1476219095.81686" longpoll="1" longpollfilter="fp_fp_EV_Monitor=.%2B" >
<div id="backimg" style="width: 99%; height: 99%;">
<img class=' fp_Energie_png' src="/fhem/images/default/fp_Energie.png" alt="fp_Energie.png" title="fp_Energie.png">
</div>
<div class="floorplan" id="menu">
<table class="start" id="floorplans">
<tr>
<td><div><a href="/fhem">fhem</a></div></td>
</tr>
<tr>
<td><div><a href="/fhem/floorplan/Energie">Energie</a></div></td>
</tr>
<tr>
<td><div><a href="/fhem/floorplan/Grundriss">Grundriss</a></div></td>
</tr>
<tr>
<td><div><a href="/fhem/floorplan/Le_Status">Le_Status</a></div></td>
</tr>
<tr>
<td><div><a href="/fhem/floorplan/Le_Zeit">Le_Zeit</a></div></td>
<script attr='' type="text/javascript" src="/fhem/monitorRight.js"></script>
wird also geladen aber im Floorplan erscheint leider nichts, werde morgen damit weiter machen, mit dem Windows Teil kann ich mich nicht anfreunden.
VG
Frank[/code]
Funktioniert, nur auf background img black war das natürlich nicht zu sehen... :o
P.S. nur mit color habe ich noch zu kämpfen:
$(div).css({font-size:14px; color: #F3F781)};
will nicht
VG
Frank
die syntax bei deinem css aufruf stimmt nicht.
du kannst entweder gleich beim erzeugen des div den style fest mit setzen:var div = $('<div style="font-size:32px;color:#F3F781;">').get(0);
oder anschliessend so setzen:div.css('color', '#F3F781');
oder so:$(div).css({"font-size": "14px", "color": "#F3F781")};
gruss
andre
Danke Andre!
Zitatdu kannst entweder gleich beim erzeugen des div den style fest mit setzen:
Code: [Auswählen]
var div = $('<div style="font-size:32px;color:#F3F781;">').get(0);
Das funktioniert, wie erwartet, wobei die Attribute in css zu setzen nicht funktioniert, ist aber egal, läuft jetzt. Um die Ausgabe nach unten (bottom) zu begrenzen suche ich noch. Anbei mal ein Screenshot um das zu verdeutlichen. Die Ausgabe des Event Monitors läuft jetzt natürlich unten über die Größe vom background img (blauer Balken wäre die Begrenzung).
seitz mal height für das div.
Hallo Andre, das hatte ich schon ergebnislos probiert:
$(div).css({position:'absolute', top:'50px', bottom:'500px', width:'50%', right:'0px', height:'500px'});
habe mich dabei an folgende Webseite gehalten:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position
Habe jetzt eine Weile mit box-sizing und Flexbox herumexperimentiert aber dafür reicht mein Wissen über css bei weitem nicht aus. Mit height für das div ändert sich leider nichts an der Ausgabe. Anbei mal ein Screenshot von der Resourcen Console
VG
Frank
Ich geb's auf...
nichts zu machen, der Text läuft und läuft und ......
:o >:(
VG
Frank
kann grad nicht selber probieren
aber hast du dir mal readingsHistory angeschaut?
ich habe zwar gerade keine ahnung ob das auf dem floorplan überhaupt geht. aber probier es einfach mal.
Na ja, wenn ich readingsHistory richtig verstanden habe dann gilt das für ein oder mehrere devices, dass gäbe dann eine ziemlich lange Kette von devices, da ich nicht nur CUL_HM als TYPE sondern etliche "andere" devices in meiner Installation habe und alle spezifiziert werden müssten um eine ähnliche Ausgabe zu erhalten, wie vom EventMonitor generiert wird.
Vlt. sollte man eine Textbox definieren und dort als child Prozess den Event Monitor einbetten.
VG
Frank
readingsHistory auf .* zeigt alle events aller devices.
das mit dem einbetten war der vorschlag von ganz oben. das div per weblink html erzeugen und dann nur nur noch die console drauf los lassen.
Ja Andre, im "Groben" funktioniert das im Floorplan also die Ausgabe ----> siehe Screenshot
wo rufe ich dann aber console.js auf, die color Anpassung kann ich in der Stylesheet.css machen aber die Fenstergröße?
Soo, bleibt nur noch den Text Linksbünding darzustellen :)
#Events {font-size:14px; color: #FF7F24; font-weight: bold; text-align: left }
alles gut!
freut mich.
gruss
andre