[FHEM-Tablet-UI] User-Demos

dieter114 · 01 Februar 2020, 18:31:11

Hallo Eisix,

tolle Templates hast Du da entwickelt.
Ich bin an dem Fhemmonitor und dem Netzwerkmonitor interessiert.
Muss aber zu meiner Schande gestehen das ich nicht den ganzen Thread gelesen habe.
Steht das schon irgendwo so in der Art oder würdest du es hier zeigen.

Gruß Wolfdieter

Eisix · 01 Februar 2020, 18:50:42

Hallo Wolfdieter,

fhemmonitor

Code Auswählen


<body>
<header></header>

<br>
<div class="inline top-narrow left">
        <div data-type="symbol" data-device="logdb"
                data-get-on='["connected"]'
                data-icons='["fa-database"]'
                data-colors='["#21a000","#FA2828"]'
                class="big top-narrow"
        ></div>
        <div class="top-narrow">Status DB</div>
</div>
<div class="inline right-align left-space-1x">
        <div data-type="label" data-device="logdb" data-get="countCurrent"></div>
        <div data-type="label" data-device="logdb" data-get="countHistory"></div>
</div>
<div class="inline left-align">
        <div>Current</div>
        <div>History</div>
</div>
<div class="inline right-align left-space-2x">
        <div data-type="label" data-device="DbRep" data-get="INFO_current.data_index_lenth_MB" data-unit=" MB"></div>
        <div data-type="label" data-device="DbRep" data-get="INFO_history.data_index_lenth_MB" data-unit=" MB"></div>
</div>
<div class="inline right bottom">
        <div data-type="push" data-device="logdb"
                data-set-on="count"
                data-icon="fa-refresh"
                data-color="#aa6900"
                class="top-narrow">
        </div>
        <div>Refresh</div>
</div>
<br>
<br>
<br>
<br>
<center>
<table style="border:1px solid grey; width:80%">
	<tr>
    	<td style="border:2px solid grey;" class="A1"><center><div class="inline"><big>FHEM uptime<br></big></div>
		<br>
		<div data-type="label" data-device="sysmon" data-get="fhemuptime_text" class="small"></div>
		</center>
	</td>
    	<td style="border:2px solid grey;" class="B1">
		<div data-type="popup" data-width="120px" data-height="105px">
			<div data-type="button" data-icon="fs-system_fhem_reboot" data-on-background-color="orange" data-off-background-color="orange" class="center"></div>
        		<div class="dialog">
               			<header>Neustart FHEM</header>
				<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fs-system_fhem"></div>
        			<div class="top">sicher?</div>
			</div>
		</div>
	</td>
	</tr>
	<tr>
    	<td style="border:2px solid grey;" class="A2"><center><div class="inline"><big>FHEM updates<br></big></div>
	</center>
	</td>
    	<td style="border:2px solid grey;" class="B2">
		<div data-type="popup" data-width="260px" data-height="120px">
			<div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="orange" data-off-background-color="orange" data-get-warn="(\d+)" data-icon="fs-system_fhem_update warn" class="warn center"></div>
        		<div class="dialog">
               			<header>Update</header>
				<br>
				<div class="inline">
					<div data-type="button" 
						data-device="UPDATE.status"
						data-get="UPDATE.FHEM"
						data-warn="UPDATE:FHEM"
						data-fhem-cmd="setreading UPDATE.status UPDATE.FHEM run"
						data-states='["idle","update","run","done"]'
						data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
						data-on-colors='["darkgrey","red","white","green"]'
						data-background-icon="fa-circle"
						data-on-background-color="orange"
						data-off-background-color="orange"
						data-icon="fa-refresh warn"
						class="warn"
					></div>
					<div><small>FHEM</small></div>
				</div>
				<div class="inline">
                                	<div data-type="button"
                                                data-device="UPDATE.status"
                                                data-get="UPDATE.FTUI"
                                                data-warn="UPDATE:FTUI"
                                                data-fhem-cmd="setreading UPDATE.status UPDATE.FTUI run"
                                                data-states='["idle","update","run","done"]'
                                                data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
                                                data-on-colors='["darkgrey","red","white","green"]'
                                                data-background-icon="fa-circle"
                                                data-on-background-color="orange"
                                                data-off-background-color="orange"
                                                data-icon="fa-refresh warn"
                                                class="warn"
                                	></div>
					<div><small>FTUI</small></div>
				</div>
				<div class="inline">
                                	<div data-type="button"
                                                data-device="UPDATE.status"
                                                data-get="UPDATE.ALL"
                                                data-warn="UPDATE:ALL"
                                                data-fhem-cmd="setreading UPDATE.status UPDATE.ALL run"
                                                data-states='["idle","update","run","done"]'
                                                data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
                                                data-on-colors='["darkgrey","red","white","green"]'
                                                data-background-icon="fa-circle"
                                                data-on-background-color="orange"
                                                data-off-background-color="orange"
                                                data-icon="fa-refresh warn"
                                                class="warn"
                                	></div>
                                	<div><small>All</small></div>
				</div>
			</div>
		</div>
	</td>
	</tr>
        <tr>
        <td style="border:2px solid grey;" class="A3"><center><div class="inline"><big>FHEM rollback<br></big></div>
                <br>
		</center>
        </td>
        <td style="border:2px solid grey;" class="B3">
                <div data-type="popup" data-width="150px" data-height="105px">
                        <div data-type="button" data-icon="oa-control_arrow_turn_left" data-on-background-color="orange" data-off-background-color="orange" class="center"></div>
                        <div class="dialog">
                                <header>Rollback last updates</header>
                                <div data-type="button" data-fhem-cmd="rollback" data-icon="fs-system_fhem"></div>
                                <div class="top">sicher?</div>
                        </div>
                </div>
        </td>
        </tr>
        <tr>
        <td style="border:2px solid grey;" class="A4"><center><div class="inline"><big>FHEM backup<br></big></div>
                <br>
		</center>
        </td>
        <td style="border:2px solid grey;" class="B4">
                <div data-type="popup" data-width="120px" data-height="105px">
                        <div data-type="button" data-icon="fs-system_backup" data-on-background-color="orange" data-off-background-color="orange" class="center"></div>
                        <div class="dialog">
                                <header>Create Backup</header>
                                <div data-type="button" data-fhem-cmd="backup" data-icon="fs-system_fhem"></div>
                                <div class="top">sicher?</div>
                        </div>
                </div>
        </td>
        </tr>
</table>
</center>
</body>

Netzwerkmonitor

Code Auswählen


<div class="inline">
<br>
        <div data-type="popup" data-width="400px" data-height="300px">
        	<div data-type="symbol" 
                	data-device="Unifi"
                	data-get="-UC_wlan_state"
                	data-warn="Unifi:-UC_wlan_users"
			data-get-on='["off","ok"]'
			data-colors='["blue","#21a000"]'
			data-icons='["fa-wifi warn","fa-wifi warn"]'
                	class="large readonly warn"
        	></div>
        	<div>WLAN</div>
                <div class="dialog">
                        <header>Home</header>
                        <table align="center" style="width:90%">
                        <tr>
                        <td style="" class="A1"><center><div class="inline"></div></td>
                        <td style="solid grey;" class="A2"><center><div class="inline"><big>Aktuell<br></big></div></td>
                        <td style="" class="A3"><center><div class="inline"></div></td>
                        <td style="solid grey;" class="A4"><center><div class="inline"><big>Durchschnitt<br></big></div></td>
                        </tr>
                        <tr>
                        <header>Traffic</header>
                	<div class="inline">
                        	<div class="">Upload:</div>
                        	<div data-type="label"
                                 	data-device="sysmon"
                                 	data-get="WLAN"
                                 	data-part="5"
                                 	data-unit="MB"
                                 	class="big orange top-space"
                        	></div>
                	</div>
                	<div class="inline left-space">
                        	<div class="">Download:</div>
                        	<div data-type="label"
                                 	data-device="sysmon"
                                 	data-get="WLAN"
                                 	data-part="2"
                                 	data-unit="MB"
                                 	class="big orange top-space"
                        	></div>
                	</div>
                        </table>
                </div>
        </div>
</div>
<div class="inline cell">
</div>

<div class="inline">
        <div data-type="popup" data-width="400px" data-height="300px">
                <div data-type="symbol"
                        data-device="Unifi"
                	data-get="-UC_wlan_guests_state"
                	data-warn="Unifi:-UC_wlan_guests"
                        data-warn-on='[0-9]'
                        data-get-on='["off","ok"]'
                        data-colors='["blue","#21a000"]'
                        data-icons='["fa-wifi warn","fa-wifi warn"]'
                        class="large readonly warn"
                ></div>
                <div>Gast</div>
                <div class="dialog">
                        <header>Gast</header>
                        <table align="center" style="width:90%">
                        <tr>
                        <td style="" class="A1"><center><div class="inline"></div></td>
                        <td style="solid grey;" class="A2"><center><div class="inline"><big>Aktuell<br></big></div></td>
                        <td style="" class="A3"><center><div class="inline"></div></td>
                        <td style="solid grey;" class="A4"><center><div class="inline"><big>Durchschnitt<br></big></div></td>
                        </tr>
                        <tr>
                        <header>Traffic</header>
                        <div class="inline">
                                <div class="">Upload:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="WLAN"
                                        data-part="5"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        <div class="inline left-space">
                                <div class="">Download:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="WLAN"
                                        data-part="2"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        </table>
                </div>
        </div>

</div>

<div class="inline cell">
</div>

<div class="inline">
	<div data-type="popup" data-width="260px" data-height="100px">
        <div data-type="knob" 
                data-device="sysmon"
                data-get="LAN_diff"
                data-anglearc="360"
                data-angleoffset="0"
                data-part="8"
                data-min="0"
                data-max="3750"
                data-fgcolor="#FA2828"
                data-bgcolor="#21a000"
		data-nomcolor="white"
                class="mini readonly"
                data-unit="MB"
        ></div>
        <div>LAN</div>
                <div class="dialog">
                        <table align="center" style="width:90%">
                        <tr>
                        <header>Traffic LAN Interface</header>
                        <div class="inline">
                                <div class="">Upload:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="LAN_diff"
                                        data-part="5"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        <div class="inline left-space">
                                <div class="">Download:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="LAN_diff"
                                        data-part="2"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        </tr>
                        </table>
                </div>
	</div>
</div>
<div class="inline cell">
</div>
<div class="inline">
	<div data-type="popup" data-width="260px" data-height="100px">
        <div data-type="knob" 
                data-device="sysmon"
                data-get="DOCKER_diff"
                data-anglearc="360"
                data-angleoffset="0"
                data-part="8"
                data-min="0"
                data-max="3750"
                data-fgcolor="#FA2828"
                data-bgcolor="#21a000"
		data-nomcolor="white"
                class="mini readonly"
                data-unit="MB"
        ></div>
        <div>DOCKER</div>
                <div class="dialog">
                        <table align="center" style="width:90%">
                        <tr>
                        <header>Traffic DOCKER Interface</header>
                        <div class="inline">
                                <div class="">Upload:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="DOCKER_diff"
                                        data-part="5"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        <div class="inline left-space">
                                <div class="">Download:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="DOCKER_diff"
                                        data-part="2"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        </tr>
                        </table>
                </div>
	</div>
</div>
<!--
<div class="inline">
	<div data-type="popup" data-width="260px" data-height="100px">
        	<div data-type="knob" 
                	data-device="sysmon"
                	data-get="VLAN_diff"
                	data-anglearc="360"
                	data-angleoffset="0"
                	data-part="8"
                	data-min="0"
                	data-max="3750"
                	data-fgcolor="#FA2828"
                	data-bgcolor="#21a000"
			data-nomcolor="white"
                	class="mini readonly"
                	data-unit="MB"
        	></div>
                <div class="dialog">
                        <table align="center" style="width:90%">
                        <tr>
                        <header>Traffic VLAN Interface</header>
                        <div class="inline">
                                <div class="">Upload:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="VLAN_diff"
                                        data-part="5"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        <div class="inline left-space">
                                <div class="">Download:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="VLAN_diff"
                                        data-part="2"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        </tr>
                        </table>
                </div>
        	<div>VLAN</div>
	</div>
</div>
<div class="inline">
	<div data-type="popup" data-width="250px" data-height="150px">
        	<div data-type="knob" 
                	data-device="sysmon"
                	data-get="VPN_diff"
                	data-anglearc="360"
                	data-angleoffset="0"
                	data-part="8"
                	data-min="0"
                	data-max="375"
                	data-fgcolor="#FA2828"
                	data-bgcolor="#21a000"
			data-nomcolor="white"
                	class="mini readonly"
                	data-unit="MB"
        	></div>
                <div class="dialog">
                        <header>Traffic VPN Interface</header>
                        <div class="cell inline">
                        	<div class="">Upload:</div>
                              	<div data-type="label"
                               		data-device="sysmon"
                               		data-get="VPN_diff"
                               		data-part="5"
                               		data-unit="MB"
                               		class="big orange top"
                               	></div>
                       	</div>
                       	<div class="cell inline">
                       		<div class="">Download:</div>
                       		<div data-type="label"
                               		data-device="sysmon"
                               		data-get="VPN_diff"
                               		data-part="2"
                               		data-unit="MB"
                               		class="big orange top"
                       		></div>
                       	</div>
                       	<div class="cell">
                       		<div class="">Clients connected: </div>
                       		<div data-type="label"
                               		data-device="SYSMON2"
                               		data-get="OpenVPN"
                               		class="big orange"
                       		></div>
                       	</div>
		</div>
	</div>
        <div>VPN</div>
</div>
<div class="inline">
        <div data-type="popup" data-width="260px" data-height="100px">
        <div data-type="knob" 
                data-device="sysmon"
                data-get="WAN_diff"
                data-anglearc="360"
                data-angleoffset="0"
                data-part="8"
                data-min="0"
                data-max="375"
                data-fgcolor="#FA2828"
                data-bgcolor="#21a000"
		data-nomcolor="white"
                class="mini readonly"
                data-unit="MB"
        ></div>
        <div>WAN</div>
                <div class="dialog">
                        <table align="center" style="width:90%">
                        <tr>
                        <header>Traffic WAN Interface</header>
                        <div class="inline">
                                <div class="">Upload:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="WAN_diff"
                                        data-part="5"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        <div class="inline left-space">
                                <div class="">Download:</div>
                                <div data-type="label"
                                        data-device="sysmon"
                                        data-get="WAN_diff"
                                        data-part="2"
                                        data-unit="MB"
                                        class="big orange top-space"
                                ></div>
                        </div>
                        </tr>
                        </table>
                </div>
        </div>
</div>
-->
<br></br>
<br>
<th><b>Internetverbindung</b></th>
<br></br>
	<div data-type="chart"
        	data-logdevice='["logdb","logdb","logdb"]'
        	data-columnspec='["InternetSpeed:ping:::","InternetSpeed:upload:::","InternetSpeed:download:::"]'
        	data-style='["ftui l3","ftui l6fill","ftui l4fill"]'
        	data-ptype='["lines","lines","lines"]'
        	data-uaxis='["secondary","primary","primary"]'
        	data-legend='["ping","upload","download"]'
        	data-yunit="Mbit"
        	data-minvalue="auto"
        	data-maxvalue="auto"
        	data-yunit_sec="ms"
        	data-minvalue_sec="auto"
        	data-maxvalue_sec="auto"
        	data-height="150"
        	data-width="350"
        	data-daysago_start="1"
        	data-daysago_end="-1"
        	data-crosshair="true"
        	data-cursorgroup="1"
        	data-scrollgroup="1"
        	data-showlegend="false"
        	data-yticks="auto"
        	data-xticks="auto">
	</div>
</div>
</body>

Netzwerk habe ich teilweise rausgenommen da ich gerade was umbaue und mein Server nun weniger Netzwerkinterfaces hat.

Gruß
Eisix

dieter114 · 02 Februar 2020, 11:44:43

Hallo Zusammen,
hier ein Auszug meiner Darstellungen auf dem Tablet. Ich verwende den Fully-Browser dazu.
Die Bilder stammen allerdings aus dem Firefox, daher ist die eine oder andere Darstellung etwas "seltsam" anzusehen.
Die Werte der Poolsteuerung stammen alle aus dem letzten Jahr (Hier is nix mit baden z.Z.)

Die Palmenheizung läuft auch nicht, da es draußen schon seit Wochen über 0 Grad ist.
Grüße Wolfdieter

dieter114 · 02 Februar 2020, 13:56:15

Hallo Esix

ich hab den Fhemmonitor integrieren können aber
was ist

Code Auswählen

data-device="UPDATE.status" für ein Device?
Erzeugst du einen Dummy mit all den Updateinfos oder wo kommen die her?

Gruß WDS

Eisix · 02 Februar 2020, 14:16:24

Ja, das ist ein Dummy

Code Auswählen


Internals:
   FUUID      5c457ceb-f33f-8e5f-a437-da4d257c49d56003
   FVERSION   98_dummy.pm:0.206650/2019-12-06
   NAME       UPDATE.status
   NR         159
   STATE      update
   TYPE       dummy
   READINGS:
     2020-02-02 11:26:20   UPDATE.ALL      update
     2020-02-02 11:26:20   UPDATE.FHEM     update
     2020-02-02 11:26:20   UPDATE.FTUI     idle
     2020-02-02 11:26:20   state           update
Attributes:
   setList    idle update run done

Das ganze habe ich hier im thread glaube ich schon mal erklärt. Wenn du es nicht findest schick mir eine PM dann suche ich es nochmal raus.

Gruß
Eisix

Dracolein · 07 Februar 2020, 12:16:16

Ich möchte dann auch mal mein Dashboard Projekt vorstellen, was ich seit 12/2019 am basteln bin.

Hardware:

Raspberry Pi 4, 2 GB
ConBee II USB Stick mit deCONZ für Zigbee
15,6" Asus VT168H Touchscreen

Die Hardware befindet sich auf der Rückseite des Monitors in einem kleinen Gehäuse

Ziel war es, eine kleine Wetterstation und ein altes kleines Tablet mit Livestreamanzeige einer IP-Kamera durch etwas besseres, zukunftsorientiertes zu ersetzen.
Die gesamte Visualisierung entstand mit Tablet UI mittels Gridster von Null begonnen. Ziel war die Darstellung zweier Livestreams sowie einfache Übersichtlichkeit der wichtigsten Informationen.
"Leider" habe ich daran Gefallen gefunden, sodass ich FHEM & Smart-Home kontinuierlich erweitere.

Das Menü rechts im Bild ( v.O.n.U.)

Apple iCloud Familienkalender mit optischerm Hinweis vor Termin
Regenradar mit optischer Frostwarnung
Livestream 3D-Drucker im Keller (und zukünftig Darstellung weiterer Infos des Druckers)
Systeminformationen (und zukünftig ggf. einige Einstellungsmöglichkeiten)
"Besucher"-Modus (siehe Bild-06, Blanker Bildschirm, lediglich Darstellung von Uhrzeit & Datum)
Alles-Aus-Knopf (schaltet alle Lampen aus)

Ich bin ein Freund von Popups. So sind fast alle Temperaturen per Finger mit einem Diagramm hinterlegt, es gibt detailierte Wetterprognosen (Proplanta, hier nicht im Detail gezeigt), die Kalenderdarstellung und das Regenradar sind ebenfalls Popups.

Ganz neu sind die Rolläden, per Shelly-Modul eingebunden. 4 Stück an der Zahl im Wohn- und Essbereich, verfügen je über ein eigenes Symbol, per Finger mit eigenem Circlemenu steuerbar.
Was noch fehlt sind darunter 2-3 kleine Taster, womit alle Rolläden gemeinsam per Hand bedient werden können. Dazu fehlte mir bisher noch die Zeit.
Ansonsten sind viele kleine Gadgets inzwischen auch wieder rausgeflogen, da sie sich als unnötig herausgestellt hatten. Die Einbindung meiner Zentralheizung wäre noch interessant, übersteigt jedoch meine Fähigkeiten und das fehlende Ethernet-Modul ist zu kostenintensiv. Meine FBH ist inzwischen 100% passiv ohne Stellantriebe, weshalb es hier auch nichts mehr einzubinden gibt.
Mal sehen, was die Zukunft noch bringt, das Thema macht auf jeden Fall sau Spaß

jnewton957 · 08 Februar 2020, 11:10:11

Ich will dann auch gerne mal ein screenshot meiner Überarbeitung meiner tabletUI Installation.

Ich wollte das Raumklima darstellen und habe mit meinen Temperatursensoren eine entsprechende Grafik mit logproxy erzeugt.
Ziel ist es also alle Räume im inneren Feld zu halten.

Mit der Spalte rechts bin ich noch nicht glücklich. Da sind noch Fehler drin.

Grüße
Jörg

Andy89 · 08 Februar 2020, 17:18:47

Zitat von: Eisix am 31 Januar 2020, 20:23:24
@Andy
...
Gruß
Eisix

Hallo,
so hier auch mal ein ganz kleiner Auszug aus meinem FTUI, was nun dank Eisix dazu kam

Beste Grüße
Andy

Eisix · 08 Februar 2020, 17:31:10

@Andy
Kannst du mir den USV Teil schicken? Sieht besser aus aus als meins

Der Hintergrund macht auch was her.

Gruß
Eisix

Andy89 · 08 Februar 2020, 17:48:56

sehr gerne.

hier der USV Anteil. Ich hab das im "flex" Design:

Code Auswählen

<div class="card lift">
    <header>USV Status</header>
    <section>
        <div class=" col-1-4 left-align left-space ">
            <div>Ladestand</div>
            <div data-type="label" data-device="USV" data-get="battery.charge" data-fix="0" data-post-text=" %" class="big"></div>
        </div>
        <div class=" col-3-4 right-align right-space">
            <div data-type="scale" data-device="USV" data-get="battery.charge" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="horizontal" data-height="35" data-width="240px" data-limits='["0","50","90"]' data-colors='["#FA2828","#dddd22","#21a000"]' data-min="0" data-max="100" class=""></div>
        </div>
    </section>
    <section>
        <div class=" col-1-4 left-align left-space ">
            <div>Belastung</div>
            <div data-type="label" data-device="USV" data-get="ups.load" data-fix="0" data-post-text=" %" class="big"></div>
        </div>
        <div class=" col-3-4 right-align right-space">
            <div data-type="scale" data-device="USV" data-get="ups.load" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="horizontal" data-height="35" data-width="240px" data-limits='["0","50","80"]' data-colors='["#21a000","#dddd22","#FA2828"]' data-min="0" data-max="100" class="showdeco"></div>
        </div>
    </section>
    <section>
        <div class=" col-1-4 left-space">
            <div data-type="controlbutton" data-device="USV" data-get="state" data-get-on="OL" data-get-off="!OL" data-icon="fa-plug" data-on-color="white" data-off-color="white" data-on-background-color="#21a000" data-off-background-color="#FA2828" class=""> </div>
        </div>
        <div class=" col-1-3 left-align">
            <div data-type="label" data-device='USV' data-get='state' data-substitution='["OL","Online"]' class="big"></div>
            <div data-pre-text="Update vor " data-type="label" data-device="USV" data-get="state" data-substitution="toDate().ago2()" class="small inline timestamp darker"></div>
        </div>
        <div class=" col-1-3 right-align right-space">
            <div>Restaufzeit</div>
            <div data-type="label" data-device="USV" data-get="runtime-minutes" data-fix="0" data-post-text=" Minuten" class="big"></div>
        </div>
    </section>
</div>

das Background Bild hab ich angehängt. Damit das funktionoert, muss man sich ne eigene CSS-Datei erstellen, welche auch in der index.html erwähnt wird. Die css muss dann dies enthalten:

Code Auswählen

body {
    background-image: url(Background_01.png);
    background-repeat: repeat;
    background-size: 10% !important;
}

Ich hab die Background Datei am gleichen Pfand, wie die eigene CSS.

Beste Grüße
Andy

Stonemuc · 08 Februar 2020, 19:36:06

Zitat von: Dracolein am 07 Februar 2020, 12:16:16
Ich möchte dann auch mal mein Dashboard Projekt vorstellen, was ich seit 12/2019 am basteln bin.

Hardware:

Raspberry Pi 4, 2 GB
ConBee II USB Stick mit deCONZ für Zigbee
15,6" Asus VT168H Touchscreen
Die Hardware befindet sich auf der Rückseite des Monitors in einem kleinen Gehäuse

Ziel war es, eine kleine Wetterstation und ein altes kleines Tablet mit Livestreamanzeige einer IP-Kamera durch etwas besseres, zukunftsorientiertes zu ersetzen.
Die gesamte Visualisierung entstand mit Tablet UI mittels Gridster von Null begonnen. Ziel war die Darstellung zweier Livestreams sowie einfache Übersichtlichkeit der wichtigsten Informationen.
"Leider" habe ich daran Gefallen gefunden, sodass ich FHEM & Smart-Home kontinuierlich erweitere.

Das Menü rechts im Bild ( v.O.n.U.)

Apple iCloud Familienkalender mit optischerm Hinweis vor Termin
Regenradar mit optischer Frostwarnung
Livestream 3D-Drucker im Keller (und zukünftig Darstellung weiterer Infos des Druckers)
Systeminformationen (und zukünftig ggf. einige Einstellungsmöglichkeiten)
"Besucher"-Modus (siehe Bild-06, Blanker Bildschirm, lediglich Darstellung von Uhrzeit & Datum)
Alles-Aus-Knopf (schaltet alle Lampen aus)
Ich bin ein Freund von Popups. So sind fast alle Temperaturen per Finger mit einem Diagramm hinterlegt, es gibt detailierte Wetterprognosen (Proplanta, hier nicht im Detail gezeigt), die Kalenderdarstellung und das Regenradar sind ebenfalls Popups.

Ganz neu sind die Rolläden, per Shelly-Modul eingebunden. 4 Stück an der Zahl im Wohn- und Essbereich, verfügen je über ein eigenes Symbol, per Finger mit eigenem Circlemenu steuerbar.
Was noch fehlt sind darunter 2-3 kleine Taster, womit alle Rolläden gemeinsam per Hand bedient werden können. Dazu fehlte mir bisher noch die Zeit.
Ansonsten sind viele kleine Gadgets inzwischen auch wieder rausgeflogen, da sie sich als unnötig herausgestellt hatten. Die Einbindung meiner Zentralheizung wäre noch interessant, übersteigt jedoch meine Fähigkeiten und das fehlende Ethernet-Modul ist zu kostenintensiv. Meine FBH ist inzwischen 100% passiv ohne Stellantriebe, weshalb es hier auch nichts mehr einzubinden gibt.
Mal sehen, was die Zukunft noch bringt, das Thema macht auf jeden Fall sau Spaß

Kannst du mal den Teil mit der Rollosteuerung als code posten? Sieht schöner gelöst aus als bei mir.

Dracolein · 08 Februar 2020, 20:57:41

Zitat von: Stonemuc am 08 Februar 2020, 19:36:06
Kannst du mal den Teil mit der Rollosteuerung als code posten? Sieht schöner gelöst aus als bei mir.

Klar,hier

Code Auswählen


<!-- Rollosteuerung -->
                <div class="sheet">
                    <div class="row">
                      <div class="col">
                        <div class="sheet">
                            <div class="row">
                                <div class="col">
                                  <!-- Symbol Rolladen 1 -->
                                  <div data-type="circlemenu" class="noshade keepopen">
                                      <ul>
                                          <li><div data-type="symbol" data-device="shelly1" data-get="pct" class="large"
                                          data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]'
                                          data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
                                          data-colors='["gray","orange","orange","orange","orange","orange","orange","orange","orange","orange","green"]'></div></li>
                                          <li><div data-type="push" data-device="shelly1" data-set-on="stop" data-icon="fa-stop"></div></li>
                                          <li><div data-type="push" data-device="shelly1" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
                                          <li><div data-type="push" data-device="shelly1" data-set-on="pct 80" data-icon="">80</div></li>
                                          <li><div data-type="push" data-device="shelly1" data-set-on="pct 70" data-icon="">60</div></li>
                                          <li><div data-type="push" data-device="shelly1" data-set-on="pct 55" data-icon="">40</div></li>
                                          <li><div data-type="push" data-device="shelly1" data-set-on="pct 26" data-icon="">20</div></li>
                                          <li><div data-type="push" data-device="shelly1" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
                                      </ul>
                                  </div>
                                </div>
                                <div class="col">
                                  <!-- Symbol Rolladen 2 -->
                                  <div data-type="circlemenu" class="noshade keepopen">
                                      <ul>
                                          <li><div data-type="symbol" data-device="shelly2" data-get="pct" class="large"
                                          data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]'
                                          data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
                                          data-colors='["gray","orange","orange","orange","orange","orange","orange","orange","orange","orange","green"]'></div></li>
                                          <li><div data-type="push" data-device="shelly2" data-set-on="stop" data-icon="fa-stop"></div></li>
                                          <li><div data-type="push" data-device="shelly2" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
                                          <li><div data-type="push" data-device="shelly2" data-set-on="pct 80" data-icon="">80</div></li>
                                          <li><div data-type="push" data-device="shelly2" data-set-on="pct 70" data-icon="">60</div></li>
                                          <li><div data-type="push" data-device="shelly2" data-set-on="pct 55" data-icon="">40</div></li>
                                          <li><div data-type="push" data-device="shelly2" data-set-on="pct 26" data-icon="">20</div></li>
                                          <li><div data-type="push" data-device="shelly2" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
                                      </ul>
                                  </div>

                                </div>
                                <div class="col">
                                  <!-- Symbol Rolladen 3 -->
                                  <div data-type="circlemenu" class="noshade keepopen">
                                      <ul>
                                          <li><div data-type="symbol" data-device="shelly3" data-get="pct" class="large"
                                          data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]'
                                          data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
                                          data-colors='["gray","orange","orange","orange","orange","orange","orange","orange","orange","orange","green"]'></div></li>
                                          <li><div data-type="push" data-device="shelly3" data-set-on="stop" data-icon="fa-stop"></div></li>
                                          <li><div data-type="push" data-device="shelly3" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
                                          <li><div data-type="push" data-device="shelly3" data-set-on="pct 80" data-icon="">80</div></li>
                                          <li><div data-type="push" data-device="shelly3" data-set-on="pct 60" data-icon="">60</div></li>
                                          <li><div data-type="push" data-device="shelly3" data-set-on="pct 40" data-icon="">40</div></li>
                                          <li><div data-type="push" data-device="shelly3" data-set-on="pct 20" data-icon="">20</div></li>
                                          <li><div data-type="push" data-device="shelly3" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
                                      </ul>
                                  </div>

                                </div>
                                <div class="col">
                                  <!-- Symbol Rolladen 4 -->
                                  <div data-type="circlemenu" class="noshade keepopen">
                                      <ul>
                                          <li><div data-type="symbol" data-device="shelly4" data-get="pct" class="large"
                                          data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]'
                                          data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
                                          data-colors='["gray","orange","orange","orange","orange","orange","orange","orange","orange","orange","green"]'></div></li>
                                          <li><div data-type="push" data-device="shelly4" data-set-on="stop" data-icon="fa-stop"></div></li>
                                          <li><div data-type="push" data-device="shelly4" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
                                          <li><div data-type="push" data-device="shelly4" data-set-on="pct 80" data-icon="">80</div></li>
                                          <li><div data-type="push" data-device="shelly4" data-set-on="pct 60" data-icon="">60</div></li>
                                          <li><div data-type="push" data-device="shelly4" data-set-on="pct 40" data-icon="">40</div></li>
                                          <li><div data-type="push" data-device="shelly4" data-set-on="pct 20" data-icon="">20</div></li>
                                          <li><div data-type="push" data-device="shelly4" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
                                      </ul>
                                  </div>

                                </div>
                            </div>
                          </div>

                      </div>
                    </div>
                    <div class="row">
                      <div class="col top-narrow-2x">
                        <!-- untere Zeile -->
                        <div class="sheet">
                          <div class="row">
                            <div class="col"  style="width:30px">
                              <!-- leere Zeile -->
                            </div>
                            <div class="col top-space"  style="width:100px">
                              <div class="normal darker">Automatik:</div>
                              <div data-type="switch" data-device="Rolloautomatikschalter" class="" data-states='["off","on"]' data-icons='["fa-power-off", "fa-power-off"]' data-colors='["#720000", "green"]' data-background-colors='["lightgray", "#515151"]'></div>
                            </div>
                            <div class="col"  style="width:170px">
                                    <!-- Anzeige Rolloautomatik Zeitanzeige -->
                                    <div class="top-space-2x bottom-space small darker">Nächste Schaltzeit:</div>
                                    <!-- wird angezeigt wenn Rolloautomatik aus ist -->
                                    <div data-type="classchanger" data-device="Rolloautomatikschalter" data-get="state" data-get-on="off"  data-on-class="hide">
                                      <div data-type="label" data-device="Rolladenautomatik" data-get="timer_01_c01" data-unit="Uhr" class="normal darker"></div>
                                      <div data-type="label" data-device="Rolladenautomatik" data-get="timer_02_c02" data-unit="Uhr" class="normal darker"></div>
                                    </div>
                                    <!-- wird angezeigt wenn Rolloautomatik an ist -->
                                    <div data-type="classchanger" data-device="Rolloautomatikschalter" data-get="state" data-get-on="on" data-on-class="hide">
                                      <div class="small darker">Automatik inaktiv</div>
                                    </div>
                            </div>
                            <div class="col top-space-2x"  style="width:60px">
                              <!-- Button Alle Rollos Ab -->
                              <div data-type="switch" data-device="alleRollosAb" data-icon="fa fa-chevron-circle-down" data-color="lightgray" data-set-on="on"></div>
                            </div>
                            <div class="col top-space-2x"  style="width:60px">
                              <!-- Button Alle Rollos Stop -->
                              <div data-type="switch" data-device="alleRollosStop" data-icon="fa fa-stop-circle" data-color="lightgray" data-set-on="on"></div>
                            </div>
                            <div class="col top-space-2x"  style="width:60px">
                              <!-- Button Alle Rollos Auf -->
                              <div data-type="switch" data-device="alleRollosAuf" data-icon="fa fa-chevron-circle-up" data-color="lightgray" data-set-on="on"></div>
                            </div>
                          </div>
                        </div><!-- Ende untere Zeile -->
                          
                        </div>
                      </div>
                    </div>
                </div>
              </div>
            </div>
        </div><!-- Ende Sheet -->

Inzwischen sind die Sammel-Buttons hinzugekommen und die Rolläden werden einzeln farbig dargestellt (orange="unterwegs", grau=geschlossen, grün=geöffnet)

jnewton957 · 09 Februar 2020, 12:24:08

Nachdem ja für heute das Sturmtief "Sabine" mit Orkanböen ansteht, habe ich mich mal um meine Wettertrendseiten gekümmert.

Auf die Schnelle ist ein Windtrend abgeleitet aus dem bekannten Chart-Beispiel "Darstellung der Wetter Icons im Diagramm" hinzu gekommen.

Auf der Windtrend-Seite ist die Idee der Vorhersage Wind / Regen für die nächsten 7 bzw. 3 Tage.

Code Auswählen

<li class="halbTransparent" data-row="2" data-col="2" data-sizex="7" data-sizey="2">
<header class="headerTransparent">Wind / Regen 7 Tage</header>
     <div class="nobuttons fullsize"
		data-type="chart"
		data-device="AgroWeather"
		data-logdevice='[
					"logProxy",
					"logProxy",
					"logProxy"
				]'
		data-columnspec='[
					"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
				[
					"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22gust_\\x22,$from,$to,12,\\x22day\\x22)",
					"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22wind_\\x22,$from,$to,12,\\x22day\\x22)"
				],
					"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
				]'
		data-style='[
				"ftui l99icon",
				["fill",["-40","#dfe100","1.0"],["0","#00de43","0"],["0","#00de43","0"],["90","#de1e00","1.0"]],
				"ftui l5fill"
				]'
		data-ptype='[
				"icons:1",
				"cubic",
				"steps"
				]'
		data-uaxis='[
				"primary",
				"primary",
				"secondary"
				]'
		data-legend='[
				"Wetterbedingung",
				"Wind",
				"Niederschlag"
				]'
		data-legendpos='["behind","top"]'
		data-showlegend="true"
		data-minvalue="auto"
		data-maxvalue="auto"
		data-minvalue_sec="0"
		data-maxvalue_sec="20"
		data-xticks="720"
		data-yticks="auto"
		data-yunit=" km/h"
		data-yunit_sec=" mm"
		data-y_margin="20"
		data-width="90%"
		data-height="280px"
		data-daysago_start = "now"
		data-daysago_end = "-7d"
		data-timeformat="hh\LF\ee\LF\dd.MM.."
		data-nofulldays='true'
	></div>
</li>
<li class="halbTransparent" data-row="4" data-col="2" data-sizex="7" data-sizey="2">
<header class="headerTransparent">Wind / Regen 3 Tage</header>
    <div class="nobuttons fullsize"
		data-type="chart"
		data-device="AgroWeather"
		data-logdevice='[
					"logProxy",
					"logProxy",
					"logProxy"
				]'
		data-columnspec='[
					"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
				[
					"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22gust_\\x22,$from,$to,12,\\x22day\\x22)",
					"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22wind_\\x22,$from,$to,12,\\x22day\\x22)"
				],
					"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
				]'
		data-style='[
				"ftui l99icon",
				["fill",["-40","#dfe100","1.0"],["0","#00de43","0"],["0","#00de43","0"],["90","#de1e00","1.0"]],
				"ftui l5fill"
				]'
		data-ptype='[
				"icons:1",
				"cubic",
				"steps"
				]'
		data-uaxis='[
				"primary",
				"primary",
				"secondary"
				]'
		data-legend='[
				"Wetterbedingung",
				"Wind",
				"Niederschlag"
				]'
		data-legendpos='["behind","top"]'
		data-showlegend="true"
		data-minvalue="auto"
		data-maxvalue="auto"
		data-minvalue_sec="0"
		data-maxvalue_sec="20"
		data-xticks="720"
		data-yticks="auto"
		data-yunit=" km/h"
		data-yunit_sec=" mm"
		data-y_margin="20"
		data-width="90%"
		data-height="280px"
		data-daysago_start = "now"
		data-daysago_end = "-3d"
		data-timeformat="hh\LF\ee\LF\dd.MM.."
		data-nofulldays='true'
	></div>
</li>

Auf der Windtrend2-Seite ist die Idee der Darstellung des tatsächlichen Ist und darunter der Tagesvorhersage Wind.

Ich nehme gerne Anregungen in Bezug auf Farben bzw. Fehler oder andere Optimierungen auf.

Grüße
Jörg

majestro84 · 09 Februar 2020, 15:48:50

Zitat von: Dracolein am 07 Februar 2020, 12:16:16
Ich möchte dann auch mal mein Dashboard Projekt vorstellen, was ich seit 12/2019 am basteln bin.

Hardware:

Raspberry Pi 4, 2 GB
ConBee II USB Stick mit deCONZ für Zigbee
15,6" Asus VT168H Touchscreen
Die Hardware befindet sich auf der Rückseite des Monitors in einem kleinen Gehäuse

Ziel war es, eine kleine Wetterstation und ein altes kleines Tablet mit Livestreamanzeige einer IP-Kamera durch etwas besseres, zukunftsorientiertes zu ersetzen.
Die gesamte Visualisierung entstand mit Tablet UI mittels Gridster von Null begonnen. Ziel war die Darstellung zweier Livestreams sowie einfache Übersichtlichkeit der wichtigsten Informationen.
"Leider" habe ich daran Gefallen gefunden, sodass ich FHEM & Smart-Home kontinuierlich erweitere.

Das Menü rechts im Bild ( v.O.n.U.)

Apple iCloud Familienkalender mit optischerm Hinweis vor Termin
Regenradar mit optischer Frostwarnung
Livestream 3D-Drucker im Keller (und zukünftig Darstellung weiterer Infos des Druckers)
Systeminformationen (und zukünftig ggf. einige Einstellungsmöglichkeiten)
"Besucher"-Modus (siehe Bild-06, Blanker Bildschirm, lediglich Darstellung von Uhrzeit & Datum)
Alles-Aus-Knopf (schaltet alle Lampen aus)
Ich bin ein Freund von Popups. So sind fast alle Temperaturen per Finger mit einem Diagramm hinterlegt, es gibt detailierte Wetterprognosen (Proplanta, hier nicht im Detail gezeigt), die Kalenderdarstellung und das Regenradar sind ebenfalls Popups.

Ganz neu sind die Rolläden, per Shelly-Modul eingebunden. 4 Stück an der Zahl im Wohn- und Essbereich, verfügen je über ein eigenes Symbol, per Finger mit eigenem Circlemenu steuerbar.
Was noch fehlt sind darunter 2-3 kleine Taster, womit alle Rolläden gemeinsam per Hand bedient werden können. Dazu fehlte mir bisher noch die Zeit.
Ansonsten sind viele kleine Gadgets inzwischen auch wieder rausgeflogen, da sie sich als unnötig herausgestellt hatten. Die Einbindung meiner Zentralheizung wäre noch interessant, übersteigt jedoch meine Fähigkeiten und das fehlende Ethernet-Modul ist zu kostenintensiv. Meine FBH ist inzwischen 100% passiv ohne Stellantriebe, weshalb es hier auch nichts mehr einzubinden gibt.
Mal sehen, was die Zukunft noch bringt, das Thema macht auf jeden Fall sau Spaß

Hi
Darf ich mal Fragen was Du für Kameras hast und wie du das Livebild einbindest?
VG Alex

Dracolein · 10 Februar 2020, 08:41:24

Zitat von: majestro84 am 09 Februar 2020, 15:48:50
Hi
Darf ich mal Fragen was Du für Kameras hast und wie du das Livebild einbindest?
VG Alex

Modul SSCAM.
FHEM bzw. Tablet UI dient ausschließlich der Livestream-Darstellung. Das gesamte Surveillance-Management (Bewegung erkennen, Sequenzen aufnehmen und abspeichern, ggf. Meldungen versenden) erledigt die Synology