Eigene Webseiten zur Steuerung

Alles was per HTTP gesteuert werden kann
mmehlich
Beiträge: 510
Registriert: Mi 24. Feb 2016, 18:47

Mi 9. Mär 2016, 09:29

Hallo,

möchte auch eine eigene Oberfläche/Website auf einem evtl. noch zu kaufenden
Tablet erstellen.
Html-Kenntnisse sind vorhanden (Vereinshomepage, etc.).
Nur dazu eine grundsätzliche Frage:

Ich gestalte mir eine Oberfläche nach eigenem Gusto (Buttons für die jeweiligen Schalter, ...)
und versehe dann die Buttons (...) mit den entsprechenden Hyperlinks (get-Anweisungen, ...).

Ist das so korrekt ?

Danke & Gruss
Marioir
Beiträge: 1147
Registriert: Mi 24. Feb 2016, 15:36
Wohnort: Offenbach

Mi 9. Mär 2016, 09:50

POST statt GET benutzen
Browser haben die Angewohnheit, Inhalte, die bereits geladen wurden, zu puffern. Beim nächsten Ladevorgang wird dann der Inhalt des Puffers angezeigt, statt die Seite erneut vom Server, hier dem Light-Manager, zu übertragen. Diese Funktion hat den Nachteil, dass Steuerbefehle verloren gehen können, d.h. beim zweiten oder dritten Aufruf eines Szenarios würde sich nichts mehr tun, außer dass OK angezeigt wird. Um dies zu vermeiden kann man einen fortlaufenden Parameter zusätzlich anhängen, z.B. id=1, 2, 3... usw. Damit wird dem Browser bzw. dem Betriebssystem vorgegaukelt, dass es sich um einen neuen Request handelt. Komfortabel ist dies allerdings nicht.

Wir empfehlen stattdessen die Verwendung der Post Methode. Dabei wird der Parameter nicht über die Adresszeile übermittelt, sondern in die zu übertragenden HTML-Daten eingebettet. Falls der HTTP Request von einer Webseite gesendet werden soll, ist Javascript erforderlich. Die entsprechende Funktion braucht jedoch nicht selbst programmiert zu werden, der Light-Manager hält eine passende Javascript Bibliothek bereit, und zwar in der Datei lightman.js.

Mit der Funktion minrequest aus der Javascript Bibliothek kann ein HTTP Request mit der Post Methode komfortabel gesendet werden, z.B. über das OnClick Ereignis eines HTML-Elementes:

onclick="minrequest('key=1')"
Muss auch persönlich sagen das ich so die besseren Erfahrungen gemacht habe.

Alles weitere kannst du http://cms.jbmedia.de/index.php?option= ... 57&lang=de hier nachlesen,

Von dort stammt auch der oben eingefügte Text.
Ralf
Beiträge: 1
Registriert: Sa 19. Nov 2016, 21:06

Sa 19. Nov 2016, 21:50

Hallo zusammen,

sofern ich das richtig verstanden habe, legt ihr euch lokal html dokumente an, die als GUI dienen und die Befehle des LM dann via HTTP triggern?
Kann ich auch direkt die index.htm des Web-Interface modifizieren und dann diese modifizierte datei auf einfachem Weg auf den LMAir übertragen? Ich bin mit dem Web-Interface wie es ist eigentlich schon recht zufrieden. Ich würde nur gerne ein paar kleinere Änderungen vornehmen (bspw. für IR-Befehle Buttons nebeneinander und individuelle Beschriftung - anstatt gegenwärtig Beschreibung links, Button mit Aufschrift "SEND" rechts). Also die vom AirStudio generierte index.htm unter AppData/AirStudio/html_temp entsprechend anzupassen ginge recht einfach. Nur wie bekomme ich diese Datei dann auf den LMAir?!
Sebi
Beiträge: 334
Registriert: Do 18. Feb 2016, 13:22
Wohnort: Aachen

So 20. Nov 2016, 09:28

Moin Ralf,

du kannst auch die originale index.html Datei anpassen.

Dazu gehst du einfach in das HTML Unterverzeichnis in deinem AirStudio Installationsordner (standardmäßig bei x64: C:\Program Files (x86)\airStudio\html).

Dort dann einfach die Datei anpassen (Am besten vorher eine Kopie der Datei erstellen!) und im AirStudio anschließend auf Konfiguration übertragen klicken. Fertig.

Hinweis 1: Vor einem Update des Airstudios musst du deine eigens angepassten Dateien - sofern du die original Dateien direkt angepasst hast - wegsichern. Diese werden mit dem Update wieder überschrieben und deine Änderungen sind weg. Bevor du dann aber wieder deine alte Datei zurückkopierst, solltest du sie mit der neuen original Datei vergleichen. Nicht, dass dort neue Funktionen etc. enthalten sind, die in deiner älteren Version nicht vorhanden sind.

Hinweis 2: In der Vergangenheit wurden immer wieder kleinere und größere Änderungen in der styles.css/index.html Datei seitens JBMedia vorgenommen. Z.B. wurde vor kurzem der generelle Aufbau der index.html angepasst. Es kann also passieren, dass du nach dem Einspielen eines Updates auch wieder deine individuellen Änderungen adapatieren musst.

Ich persönlich würde eigene Websites/Dashboards immer vom Lightmanager trennen. Ein kleiner Raspberry Pi 3 hat mehr als genug Power für ein solches Projekt und braucht extrem wenig Strom.

Viele Grüße
Sebastian
Darf's ein bisschen smarter sein? http://www.schlaue-huette.de ! :idea:
Benutzeravatar
jbmedia
Administrator
Beiträge: 4446
Registriert: Mi 17. Feb 2016, 13:42

So 20. Nov 2016, 20:32

Wer mit einem modifiziertem Interface arbeiten möchte, kann folgendermaßen vorgehen. Zunächst das Web-Interface per airStudio auf den Light-Manager laden. Nun das Verzeichnis %appdata%\AirStudio\html_temp an einen beliebigen Ort kopieren, z.B. nach c:\temp. Anschließend können alle gewünschten Änderungen vorgenommen werden.

Möglichkeit 1: Man benennt die index.htm in index2.htm um und kopiert diese nach C:\Program Files (x86)\airStudio\html. Beim nächsten Upload wird diese Datei automatisch mit hochgeladen. Der Zugriff erfolgt über http://192.168.xxx.xxx/index2.htm.

Möglichkeit 2: Wer ausschließlich das modifizierte Interface auf dem Manager haben möchten, kann ein kleines Tool namens MPFS2.exe nutzen, welches sich unter C:\Program Files (x86)\airStudio\MPFS findet. Dort muss lediglich das zuvor angelegte Verzeichnis ausgewählt werden. Unter Output Files kann man c:\temp wählen. Schließlich braucht unter Settings noch die IP-Adresse des Light-Managers angegeben zu werden. Die Daten werden gespeichert, so dass dies nur einmal notwendig ist. Mit einem Druck auf Generate and Upload wird das Interface auf den Light-Manager hochgeladen.

Wie bereits geschrieben wurde, finden immer wieder Änderungen an den Dateien statt. Mit einem Update von airStudio kann es also notwendig sein, die Änderungen an aktualisierten Dateien zu wiederholen.
Wir wünschen viel Spaß mit den Produkten und einen erfolgreichen Tag! Ihr jbmedia Team :)

Benutzeravatar
Vardaaran
Beiträge: 97
Registriert: So 1. Jan 2017, 11:36

Mi 18. Jan 2017, 22:13

Nochmals zum Thema POST statt GET:

das Javascript aus der erwähnten Datei sieht ja so aus:

Code: Alles auswählen

function minrequest(ctlcmd)
{				
	$.ajax({
    url: "control",
    data: ctlcmd,
    type: "POST",
	});			
}
kann ich diese Zeilen in meine HTML-Datei kopieren (natürlich im Script-Bereich) und dann über einen Link mit folgendem HREF ansprechen?

Code: Alles auswählen

href="javascript:minrequest(13)"
In wie weit muss ich die URL dann aber anpassen? Das einfache Anfügen der IP scheint nicht auszureichen...
url: "192.168.XXX.XXX/control",
Ich habe schon an diese Methode gedacht, aber da es hier ebenfalls eine GET-Übertrageung ist, bekomme ich Probleme bezüglich Browser-Cache (Verlust von Befehlen bei erneutem Senden...

Code: Alles auswählen

function SendLMAir(szene) {
 var xmlhttp;
 var ipadr = "192.168.XXX.XXX";

 xmlhttp=new XMLHttpRequest();
 xmlhttp.open("GET","http://" + ipadr + "/control?key=" + szene,true);
 xmlhttp.send();
}
Sebi
Beiträge: 334
Registriert: Do 18. Feb 2016, 13:22
Wohnort: Aachen

Do 19. Jan 2017, 21:59

Moin,

das hier in den <head> Bereich:

Code: Alles auswählen

<script type="text/javascript">

function minrequest(ctlcmd)
{				
	$.ajax({
    url: "http://ipdeslightmanagers/control",
    data: ctlcmd,
    type: "POST"
	});			
}
</script>
Und dann hier ein Beispiel Link für den <body> Bereich:

Code: Alles auswählen

<a href="#" onclick="minrequest('key=1');">Szene 1</a>
Fertig :-)

Gruß
Sebastian
Darf's ein bisschen smarter sein? http://www.schlaue-huette.de ! :idea:
Benutzeravatar
Vardaaran
Beiträge: 97
Registriert: So 1. Jan 2017, 11:36

Mo 23. Jan 2017, 14:34

schon mal vielen lieben Dank für die Mühen und die Geduld!

Mein Code sieht jetzt so aus:

Code: Alles auswählen

function SendLMAir(szene) {
 var ipadr = "192.168.0.131";
 var lmurl = "http://" + ipadr + "/control";
 var ctlcmd = "key="+ szene + "&user=XXX&pass=XXX";

 $.ajax({
    url: lmurl,
    data: ctlcmd,
    type: "POST"
   });

}
Der Link:

Code: Alles auswählen

<a href="javascript:SendLMAir(3)">
Funktioniert aber nicht... :(
Kann es an Sonderzeichen im Passwort liegen?
bjoern
Beiträge: 3
Registriert: Di 27. Feb 2018, 10:29

Di 27. Feb 2018, 11:05

Hallo zusammen,

auf der Suche nach der Lösung für meine Frage bin ich über diesen Thread gestolpert.

Ich habe grundsätzlich so gut wie keine Ahnung von HTML/Java/etc., aber möchte mir auch gerne ein eigenes Dashboard erstellen und bin auch interessiert mir grundlegende Kenntnisse der hierfür benötigten Programmiersprachen anzueignen. Eine kleine Website mit einem Button (mit CSS designed), der bei Click eine Szene auslösen soll habe ich mir bereits gebastelt.

Leider scheitert mein Vorhaben daran eine bestimmte Szene des LMair über die POST-Methode auszuführen. Ich hatte mich an diesen Code hier gehalten:
Sebi hat geschrieben:
Do 19. Jan 2017, 21:59
Moin,

das hier in den <head> Bereich:

Code: Alles auswählen

<script type="text/javascript">

function minrequest(ctlcmd)
{				
	$.ajax({
    url: "http://ipdeslightmanagers/control",
    data: ctlcmd,
    type: "POST"
	});			
}
</script>
Und dann hier ein Beispiel Link für den <body> Bereich:

Code: Alles auswählen

<a href="#" onclick="minrequest('key=1');">Szene 1</a>
Fertig :-)

Gruß
Sebastian
Es funktioniert bei mir leider nicht. Mein Quelltext sieht folgendermaßen aus:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">

<head>
	<title>Dashboard</title><!-- -->
	<meta charset="utf8"><meta/>
	<link rel="stylesheet" href="style.css" type="text/css"><link/>
	<script type="text/javascript" src="lightman.js">

	function minrequest(ctlcmd)
	{				
	$.ajax({
    url: "http://192.168.XXX.XXX/control",
    data: ctlcmd,
    type: "POST"
	});			
	}
	</script>
</head>

<body>
	<a class="button button--lighten" href="#" onclick="minrequest('scene=2');">Lichter an</a>
</body>

</html>
Was ist an meinem Quelltext falsch? Ich vermute ja, dass ich etwas grundsätzliches falsch gemacht habe!?

Vielen Dank für eure Hilfe!

Grüße, Björn
Benutzeravatar
jbmedia
Administrator
Beiträge: 4446
Registriert: Mi 17. Feb 2016, 13:42

Di 27. Feb 2018, 12:30

Das sieht auf den ersten Blick korrekt aus. Ist der Light-Manager eventuell Kennwort-geschützt? Man kann eine error-Funktion in den Request einbauen, der einem die Fehlermeldung liefert, warum der Request gescheitert ist.
Wir wünschen viel Spaß mit den Produkten und einen erfolgreichen Tag! Ihr jbmedia Team :)

Antworten