Gauges

Für welche Projekte verwendet Ihr OpenHAB? Was habt Ihr automatisiert? Stellt eure Projekte hier vor.

Moderatoren: Cyrelian, seppy

Benutzeravatar
guinnes
Beiträge: 146
Registriert: 21. Apr 2020 19:46

Re: Gauges

Beitrag von guinnes »

violine21 hat geschrieben: 13. Feb 2021 19:36 Alles fing 2014 mit der Solarthermie an. Hätte mir einer gesagt, das ich mich irgendwann mit Web-Programmierung
und undokumentierten Schnittstellen herumschlage, ich glaube, ich hätte nur mit dem Kopf geschüttelt.
Mit den kleinen Erfolgen kam die Lust auf mehr.
Bei mir ist es jetzt ein Jahr her, ein Freund von kam mit nem Raspberry angeschleppt. Ich hatte von Openhab gelesen und hab einfach mal angefangen. Ich hatte beruflich programmiert ( Mit Delphi ) aber der Umstieg zu Java, Html, CSS usw ist mir nicht leicht gefallen. Es gibt zwar alle Informationen im Netz, aber nirgendwo zusammen, alles muß man sich zusammensuchen. Auch unterscheiden sich grundsätzliche Prinzipien zwischen Java und Delphi ( Delphi ist absolut pingelig, was die Typen angeht, bei Java ist es scheinbar vollkommen egal ).
Noch mal zu deinen SVG-Grafiken :
Hast du in deiner Version von Inkscape unter Datei den Punkt "Kopie speichern " ? Damit kannst du die Größe der SVG-Datei teilweise mehr als halbieren, ohne etwas zu verlieren, wenn du als "Optimiertes SVG" speicherst.
Als Beispiel die komplette Uhr :

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8"/>
	<script src="script/guinnesutils.js"></script>

	<style>
        .skaleText {
            font-family:sans-serif;
            font-size:20px;
            font-variant-caps:normal;
            font-variant-east-asian:normal;
            font-variant-ligatures:normal;
            font-variant-numeric:normal;
            font-weight:bold;
            text-align:center;
            text-anchor:middle;
            vertical-align:middle; 
        }
        .skaleTicks {
            fill:none;
            stroke-width:5;
            stroke:#000; 
        }

        .datetext {
            fill:#ffffff;
            font-family:sans-serif;
            font-size:15px;
            font-weight:bold;
            text-align:center;
            text-anchor:middle;
            vertical-align:middle; 
            line-height:1.25;
            stroke-width:.27738;
        }
	</style>
	<script>
		const lCenter = innerWidth / 2;														// Mittelpunkt in Pixel
		const r		= lCenter * 0.74;														// Radius in Pixeln
		const SVGSize = innerWidth / 4.15 + "mm";

		function SetSVGSize () {
			var lSVG = document.querySelector("#MainSVG");
			lSVG.setAttribute("width",SVGSize);
			lSVG.setAttribute("height",SVGSize);
		}


        function UpdateSecond ( aSecond ) {
            var Angle = aSecond * 6 + 180;
			var lSecondPointer = document.querySelector("#Sekundenzeiger");
			lSecondPointer.setAttribute("transform", "rotate(" + Angle + " 100 100)");
        }

        function UpdateMinute ( aMinute,aSecond ) {
            var Angle = aMinute * 6 - 90 + (aSecond * 6/60);
			var lMinutePointer = document.querySelector("#Minutenzeiger");
			lMinutePointer.setAttribute("transform", "rotate(" + Angle + " 100 100)");
        }

        function UpdateHour ( aHour,aMinute ) {
            var Angle = aHour * 30 - 90 + (aMinute * 0.5);
			var lHourPointer = document.querySelector("#Stundenzeiger");
			lHourPointer.setAttribute("transform", "rotate(" + Angle + " 100 100)");
        }
        function UpdateDate ( aDay, aMonth, aYear) {
            var HS = "" + aDay + ".";
            var DateStr = HS.padStart(3,"0");
            HS = "" + aMonth;
            DateStr = DateStr + HS.padStart(2,"0") + "." + aYear;
			var lDateText = document.querySelector("#dateText");
            lDateText.innerHTML = DateStr;
        }
        function getData () {
            var lDate = new Date;
            UpdateSecond(lDate.getSeconds());
            UpdateMinute(lDate.getMinutes(),lDate.getSeconds());
            UpdateHour(lDate.getHours(), lDate.getMinutes());
            UpdateDate(lDate.getDate(),lDate.getMonth() + 1,lDate.getFullYear());
        }

        window.setInterval(getData,1000);

	</script>
</head>
<body>
    <svg id="MainSVG" width="200mm" height="200mm" version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <symbol id="Stundenzeiger" transform="rotate(0 100 100)">
                <circle cx="100" cy="100" r="3.863" style="stroke-linecap:round;stroke-width:1.162;stroke:#000"/>
                <path d="m100 95.649v8.6724l59.458-4.3202z" style="stroke-width:.26458px;stroke:#000"/>
            </symbol>
            <symbol id="Minutenzeiger" transform="rotate(0 100 100)">
                <circle cx="100" cy="100" r="3.863" style="fill:none;stroke-linecap:round;stroke-width:1.162;stroke:#000"/>
                <path d="m100 95.649v8.6724l69.999-4.3214z" style="stroke-width:.26458px;stroke:#000"/>
            </symbol>
            <symbol id="Sekundenzeiger" transform="rotate(0 100 100)">
                <circle cx="100" cy="100" r="80" style="fill:none;stroke-linecap:round;stroke-width:2.3601;stroke:none"/>
                <path d="m100 93.143v86.857z" style="fill:none;stroke-linecap:round;stroke-width:2.3601;stroke:#f00"/>
                <rect transform="rotate(90)" x="80.642" y="-102.18" width="12.501" height="4.4166" ry="1.6938" style="fill:#f00;stroke-linecap:round;stroke-width:1.6449;stroke:#f00"/>
                <circle cx="100" cy="100" r="2" style="fill:#f00;stroke-linecap:round;stroke-width:2.265;stroke:#f00"/>
            </symbol>

            <filter id="f1" x="0" y="0" width="200%" height="200%">
                <feOffset dx="1.5" dy="4" in="SourceAlpha" result="translatedObject"/>
                <feGaussianBlur in="translatedObject" result="blurredObject" stdDeviation="1.5"/>
                <feBlend in="SourceGraphic" in2="blurredObject"/>
            </filter>
        </defs>
        <g id="Zifferblatt">
            <g transform="translate(.26727 -2.94)">
                <text x="100" y="170" class="skaleText">6</text>
                <text x="70" y="161.96152" class="skaleText">7</text>
                <text x="48.038475" y="140" class="skaleText">8</text>
                <text x="40" y="110" class="skaleText">9</text>
                <text x="48.038475" y="80" class="skaleText">10</text>
                <text x="70" y="58.038475" class="skaleText">11</text>
                <text x="100" y="50" class="skaleText">12</text>
                <text x="130" y="58.038475" class="skaleText">1</text>
                <text x="151.96152" y="80" class="skaleText">2</text>
                <text x="160" y="110" class="skaleText">3</text>
                <text x="151.96152" y="140" class="skaleText">4</text>
                <text x="130" y="161.96152" class="skaleText">5</text>
            </g>
            <g id="ZifferblattOZahlen">
                <circle cx="100" cy="100" r="80" class="skaleTicks"/>
                <path d="m100 170v10" class="skaleTicks"/>
                <path d="m92.16 174.59-0.52264 4.9726" class="skaleTicks"/>
                <path d="m84.407 173.36-1.0396 4.8907" class="skaleTicks"/>
                <path d="m76.824 171.33-1.5451 4.7553" class="skaleTicks"/>
                <path d="m69.495 168.52-2.0337 4.5677" class="skaleTicks"/>
                <path d="m65 160.62-5 8.6602" class="skaleTicks"/>
                <path d="m55.916 160.68-2.9389 4.0451" class="skaleTicks"/>
                <path d="m49.815 155.74-3.3457 3.7157" class="skaleTicks"/>
                <path d="m44.264 150.18-3.7157 3.3456" class="skaleTicks"/>
                <path d="m39.324 144.08-4.0451 2.9389" class="skaleTicks"/>
                <path d="m39.378 135-8.6603 5" class="skaleTicks"/>
                <path d="m31.484 130.51-4.5677 2.0337" class="skaleTicks"/>
                <path d="m28.671 123.18-4.7553 1.5451" class="skaleTicks"/>
                <path d="m26.639 115.59-4.8907 1.0396" class="skaleTicks"/>
                <path d="m25.411 107.84-4.9726 0.52265" class="skaleTicks"/>
                <path d="m30 100h-10" class="skaleTicks"/>
                <path d="m25.411 92.16-4.9726-0.52264" class="skaleTicks"/>
                <path d="m26.639 84.407-4.8907-1.0396" class="skaleTicks"/>
                <path d="m28.671 76.824-4.7553-1.5451" class="skaleTicks"/>
                <path d="m31.484 69.495-4.5677-2.0337" class="skaleTicks"/>
                <path d="m39.378 65-8.6603-5" class="skaleTicks"/>
                <path d="m39.324 55.916-4.0451-2.9389" class="skaleTicks"/>
                <path d="m44.264 49.815-3.7157-3.3457" class="skaleTicks"/>
                <path d="m49.815 44.264-3.3457-3.7157" class="skaleTicks"/>
                <path d="m55.916 39.324-2.9389-4.0451" class="skaleTicks"/>
                <path d="m65 39.378-5-8.6603" class="skaleTicks"/>
                <path d="m69.495 31.484-2.0337-4.5677" class="skaleTicks"/>
                <path d="m76.824 28.671-1.5451-4.7553" class="skaleTicks"/>
                <path d="m84.407 26.639-1.0396-4.8907" class="skaleTicks"/>
                <path d="m92.16 25.411-0.52264-4.9726" class="skaleTicks"/>
                <path d="m100 30v-10" class="skaleTicks"/>
                <path d="m107.84 25.411 0.52265-4.9726" class="skaleTicks"/>
                <path d="m115.59 26.639 1.0396-4.8907" class="skaleTicks"/>
                <path d="m123.18 28.671 1.5451-4.7553" class="skaleTicks"/>
                <path d="m130.51 31.484 2.0337-4.5677" class="skaleTicks"/>
                <path d="m135 39.378 5-8.6603" class="skaleTicks"/>
                <path d="m144.08 39.324 2.9389-4.0451" class="skaleTicks"/>
                <path d="m150.18 44.264 3.3456-3.7157" class="skaleTicks"/>
                <path d="m155.74 49.815 3.7157-3.3457" class="skaleTicks"/>
                <path d="m160.68 55.916 4.0451-2.9389" class="skaleTicks"/>
                <path d="m160.62 65 8.6602-5" class="skaleTicks"/>
                <path d="m168.52 69.495 4.5677-2.0337" class="skaleTicks"/>
                <path d="m171.33 76.824 4.7553-1.5451" class="skaleTicks"/>
                <path d="m173.36 84.407 4.8907-1.0396" class="skaleTicks"/>
                <path d="m174.59 92.16 4.9726-0.52264" class="skaleTicks"/>
                <path d="m170 100h10" class="skaleTicks"/>
                <path d="m174.59 107.84 4.9726 0.52265" class="skaleTicks"/>
                <path d="m173.36 115.59 4.8907 1.0396" class="skaleTicks"/>
                <path d="m171.33 123.18 4.7553 1.5451" class="skaleTicks"/>
                <path d="m168.52 130.51 4.5677 2.0337" class="skaleTicks"/>
                <path d="m160.62 135 8.6602 5" class="skaleTicks"/>
                <path d="m160.68 144.08 4.0451 2.9389" class="skaleTicks"/>
                <path d="m155.74 150.18 3.7157 3.3456" class="skaleTicks"/>
                <path d="m150.18 155.74 3.3456 3.7157" class="skaleTicks"/>
                <path d="m144.08 160.68 2.9389 4.0451" class="skaleTicks"/>
                <path d="m135 160.62 5 8.6602" class="skaleTicks"/>
                <path d="m130.51 168.52 2.0337 4.5677" class="skaleTicks"/>
                <path d="m123.18 171.33 1.5451 4.7553" class="skaleTicks"/>
                <path d="m115.59 173.36 1.0396 4.8907" class="skaleTicks"/>
                <path d="m107.84 174.59 0.52265 4.9726" class="skaleTicks"/>
                <path d="m100 170v10" class="skaleTicks"/>
            </g>
        </g>
        <g transform="translate(-3.0588 -.23529)">
            <rect x="66" y="57" width="80" height="22" ry="3.5" style="stroke-linecap:round;stroke-width:1.0484;stroke:#808080"/>
            <text x="70" y="75" class="datetext" xml:space="preserve">
                <tspan id="dateText" x="134" y="73.5" >31.01.1899</tspan>
            </text>
        </g>
        <g>
            <use filter="url(#f1)" xlink:href="#Stundenzeiger"/>
            <use filter="url(#f1)" xlink:href="#Minutenzeiger"/>
            <use filter="url(#f1)" xlink:href="#Sekundenzeiger"/>
        </g>
    
    </svg>
	<script>
		SetSVGSize();
	</script>			  

</body>
</html>
Glückauf
guinnes

violine21
Beiträge: 589
Registriert: 20. Sep 2019 05:49
Answers: 7

Re: Gauges

Beitrag von violine21 »

guinnes hat geschrieben: 13. Feb 2021 19:57 Noch mal zu deinen SVG-Grafiken :
Hast du in deiner Version von Inkscape unter Datei den Punkt "Kopie speichern " ? Damit kannst du die Größe der SVG-Datei teilweise mehr als halbieren, ohne etwas zu verlieren, wenn du als "Optimiertes SVG" speicherst.
Das kannte ich noch nicht. Das werde ich mal ausprobieren.
Ich kann mich mit Inkscape nicht so richtig anfreunden. Liegt wahrscheinlich daran, das ich zu pingelig bin, was die Grafikgestaltung anbelangt ;)

violine21
Beiträge: 589
Registriert: 20. Sep 2019 05:49
Answers: 7

Re: Gauges

Beitrag von violine21 »

guinnes hat geschrieben: 13. Feb 2021 19:57 Ich hatte beruflich programmiert ( Mit Delphi ) aber der Umstieg zu Java, Html, CSS usw ist mir nicht leicht gefallen. Es gibt zwar alle Informationen im Netz, aber nirgendwo zusammen, alles muß man sich zusammensuchen. Auch unterscheiden sich grundsätzliche Prinzipien zwischen Java und Delphi ( Delphi ist absolut pingelig, was die Typen angeht, bei Java ist es scheinbar vollkommen egal ).
Ich programmiere beruflich auch, aber was ganz anderes. Hat eher mit Maschinensteuerungen zu tun.
Mit VB6 habe ich hier und da mal eine Industriemaschine mit Office "verbunden" aber das wars dann auch schon.

Das mit den Informationen im Netz kann ich absolut bestätigen. Alles immer nur scheibchenweise, oft auch sehr unterschiedlich.
Woher soll ich mir als Einsteiger dann das korrekte Wissen aneignen?

Das ist mir bei OH3 jetzt erst wieder aufgefallen. Die richtigen Cracks hauen die Widgets nur so aus dem Ärmel incl. Code.
Ist ja alles schön aber wie soll ich jemals mit meinen Kenntnissen dort hin kommen? Eine Step by Step-Anleitung wäre doch für die Unwissenden
und Leute wie mich ein riesiger Benefit! Nichts stört mich mehr, wenn etwas irgendwie funktioniert und ich nicht weiss, warum...

Benutzeravatar
guinnes
Beiträge: 146
Registriert: 21. Apr 2020 19:46

Re: Gauges

Beitrag von guinnes »

violine21 hat geschrieben: 14. Feb 2021 11:28 Ich programmiere beruflich auch, aber was ganz anderes. Hat eher mit Maschinensteuerungen zu tun.
Mit VB6 habe ich hier und da mal eine Industriemaschine mit Office "verbunden" aber das wars dann auch schon.
Ich hab 30 Jahre lang Prozessleitsysteme programmiert und Verbindungen zwischen PLS und Datenbanken zwecks Auswertungen
Zu OH3 gibts zwar schon Beispiele für Widgets, aber damit werde ich mich erstmal nicht beschäftigen. Für mich kommt OH3 nicht in Frage, da das Binding zum eBus fehlt- Da ich damit meine Heizung steuere ist das von enormere Wichtigkeit.
Zu Deinem Problem :
Kann man in OH3 auch WebViews einbinden ? Ich hab noch nichts dazu gefunden.
Ein Beispiel aus meiner Testumgebung :

Code: Alles auswählen

sitemap HTML {
    Frame label="Test Webview"{
        Text    item=DWD_warnLastUpdated
        Text    item=Depot_Change 
        Text    item=Last   
        Webview url= "../static/Test_knop.html?group=1&height=20"
        Group   item=dwdwarungen {
                Frame label="Unwetter" {
                        Webview url="../static/DWDWarn.html?group=1&height=4" visibility=[DWD_warnWarnung1==ON]
                        Webview url="../static/DWDWarn.html?group=2&height=4" visibility=[DWD_warnWarnung2==ON]
                        Webview url="../static/DWDWarn.html?group=3&height=4" visibility=[DWD_warnWarnung3==ON]

                }
        }
        Group   item=g_Stock {
                Frame label="Depot" {
	                Webview icon="allianz"  url="../static/textInput2.html?item=DE0008404005&height=1"

                }
        }
        Group   item=openweather  {
                Frame label="Openweather" {
                        Webview url="../static/openweather.html?height=18"
//                        Webview url="../static/meteoblue.html" height=9
                }
        }
//        Webview url="../static/HideHeader.html" height=1
        }
      
}
Damit werden eigene Webseiten in Oh eingebunden :
Oben nach "Unwetter" werden 3 Wetterwarnungen vom DWD angezeigt, darunter unter "Depot" gibts eine Eingabemaske für Aktienprise und Mengen uns unter "Openweather" eine eine HTML-Seite zur Anzeige von Wetterinformationen.

Wenns das in OH3 nicht mehr gibt : Noch ein Grund, bei OH2.5.8 zu bleiben
Glückauf
guinnes

Benutzeravatar
udo1toni
Beiträge: 13942
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: Gauges

Beitrag von udo1toni »

Es gibt eine Webframe Card für die Views.

Ansonsten (solange ebus noch nicht verfügbar ist) gäbe es die Möglichkeit, ein OH2 System als Remote System zu betreiben (falls Du die modernere UI verwenden willst...). Natürlich ist das vergleichsweise aufwändig...
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

Benutzeravatar
guinnes
Beiträge: 146
Registriert: 21. Apr 2020 19:46

Re: Gauges

Beitrag von guinnes »

udo1toni hat geschrieben: 14. Feb 2021 23:53 Ansonsten (solange ebus noch nicht verfügbar ist) gäbe es die Möglichkeit,.....
Ich gehe nicht davon aus, daß es den eBus nochmal geben wird, da das Binding schon ab der Version 2.5.10 nicht mehr funktioniert. Ansonsten hatte ich auch schon den Gedanken, ein 2. System aufzusetzen, aber der Aufwand steht in keinem Verhältnis zum Nutzen.

Das mit der Webframe-Card werde ich mir mal ansehen. Aber, ich sehe im Moment keinen Vorteil in der Version 3 der einen Umstieg lohnen würde
Glückauf
guinnes

Benutzeravatar
udo1toni
Beiträge: 13942
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: Gauges

Beitrag von udo1toni »

guinnes hat geschrieben: 15. Feb 2021 11:06
udo1toni hat geschrieben: 14. Feb 2021 23:53 Ansonsten (solange ebus noch nicht verfügbar ist) gäbe es die Möglichkeit,.....
Ich gehe nicht davon aus, daß es den eBus nochmal geben wird, da das Binding schon ab der Version 2.5.10 nicht mehr funktioniert. Ansonsten hatte ich auch schon den Gedanken, ein 2. System aufzusetzen, aber der Aufwand steht in keinem Verhältnis zum Nutzen.

Das mit der Webframe-Card werde ich mir mal ansehen. Aber, ich sehe im Moment keinen Vorteil in der Version 3 der einen Umstieg lohnen würde
Ja, wenn man neue Funktionen nicht braucht, gibt es in der Tat keinen Grund für einen Umstieg.

Was das ebus Binding betrifft, so handelt es sich ja um ein OH1 Binding. Der Poll ergab nur einen Nutzer, was für die Entwickler leider wenig Dringlichkeit bedeutet. Aber ich war auch lange Zeit der Einzige, der das vdr Binding nutzte, aber vor kurzem hat Matthias Klocke "mal eben" eine V2/3 Version geschrieben. Wobei Der Aufwand in dem Fall wesentlich geringer ausfällt als beim ebus Binding, aber es muss ja "nur" jemand mit entsprechenden Skills und eigenem Bedarf auf das Projekt stoßen und es angehen, also nicht die Hoffnung aufgeben!
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

Benutzeravatar
guinnes
Beiträge: 146
Registriert: 21. Apr 2020 19:46

Re: Gauges

Beitrag von guinnes »

udo1toni hat geschrieben: 15. Feb 2021 16:57 Was das ebus Binding betrifft, so handelt es sich ja um ein OH1 Binding.
Ich hab da folgendes Verzeichniss : org.openhab.binding.ebus-2.5.1-8, also gehe ich mal davon aus, daß das ein OH2-Binding ist.
Aufgrund deiner Antwort hab ich nochmal gesucht und das hier gefunden. Werd ich wohl demnächst mal probieren
Der Poll ergab nur einen Nutzer, was für die Entwickler leider wenig Dringlichkeit bedeutet.
Ich weiss ja nicht, was der Poll zählt, aber 1 ist sicher nicht richtig
Glückauf
guinnes

Benutzeravatar
guinnes
Beiträge: 146
Registriert: 21. Apr 2020 19:46

Re: Gauges

Beitrag von guinnes »

udo1toni hat geschrieben: 14. Feb 2021 23:53 Es gibt eine Webframe Card für die Views.
Danke, hab ich gefunden. Leider tuts nicht so, wie es soll : Es dürfen keine Leerzeichen in der URL sein, Parameter führen nicht zum Fehler, aber ob die auch verarbeitet werden, kann ich nicht sehen, weil scheinbar die eigenen Seiten keine extrenen Scripte laden
Zuletzt geändert von guinnes am 15. Feb 2021 19:58, insgesamt 1-mal geändert.
Glückauf
guinnes

violine21
Beiträge: 589
Registriert: 20. Sep 2019 05:49
Answers: 7

Re: Gauges

Beitrag von violine21 »

guinnes hat geschrieben: 14. Feb 2021 18:37 Für mich kommt OH3 nicht in Frage, da das Binding zum eBus fehlt- Da ich damit meine Heizung steuere ist das von enormere Wichtigkeit.
Was für eine Heizung hast Du denn?
Ich habe hier auch eine Heizung am "Netz", allerdings M-Bus. Evtl. gibt es da ja Schnittmengen?

Antworten