WebFront - Genereller Diskussionsthread

wgreipl · 18. Januar 2009 um 10:39

Hallo Horst,

ruft man per Webfront ein Skript auf werden ja die echo-Anweisungen wunderbar in dem Popup abgebildet.

Besteht hier eine Möglichkeit die zu formatieren, am besten natürlich mit HTML-Code wie <br> <p> oder <b>

Somit könnte man sich saubere Meldungen zurückgeben lassen und wie für mich gedacht auch Statis anzeigen von Variablen die noch nicht im Webfront angezeigt werden.

Horst · 19. Januar 2009 um 05:09

HTML wird im wahrscheinlich nächsten Update dabei sein. Da das iPhone ja per alert() die selben Sachen anzeigt werd ich da die HTML-Tags allerdings rausfiltern.

Des Weiteren ist für interessierte Entwickler unter WebFront: IP-Symcon :: Automatisierungssoftware der Anfang der Dokumentation zum seit lange bestehenden WebFront-Plugin-Systems getan. Hatte ja eigentlich gehofft, dass hier jemand durch eigenständiges Austesten von alleine mal ein Plugin schreibt.

Horst · 25. Januar 2009 um 22:01

So, Update ist drin.

Bei Skriptrückgabe in HTML müsst Ihr Euch nun selber um die komplette Ausgabeformatierung kümmern, WebFront erkennt das automatisch. Es wird dabei auch kein Erfolgreich o.ä. angezeigt, das Popup steht zur freien Verfügung.
Bei einfachem Text wird ab jetzt jedes Vorkommniss von
durch ein <br /> ersetzt, d.h. eine neue Zeile generiert.
Das iFront macht weiterhin automatisch bei
eine neue Zeile und filtert sämtliche HTML-Tags dabei aus, d.h. dass die Ausgabe sowohl im normalen Webfront als auch auf dem iP* ordentlich aussehen kann.

Horst

wgreipl · 25. Januar 2009 um 22:15

Hallo Horst,

vielen Dank für die Umsetzung.

BerndJ · 26. Januar 2009 um 10:36

Hi,

NEU: WebFront -> HTML wird in Konsole angezeigt

also nehmt mir das nicht übel, aber das was als Hilfestellung diesbezüglich angeboten wird… dafür bin ich anscheinend zu unterbelichtet.

Selbst dreifach negiertes Juristengeschwafel oder die Fremdsprache „Beamtendeutsch“ ist einfacher zu begreifen (auch wenn erst nach fünfmaligem Lesen und durchackern der Durchführungsverordnungen). Die Dokumentation fängt ja langsam an zu wachsen, ist für meinen rudimentären Wissensstand aber zu sehr oversized, was fehlt ist praktisch umsetzbares; schnell nachvollziehbares, um den Nebel der Verwirrung zu vertreiben.

Besteht die Möglichkeit, das hier jemand, quasi für DUMMIES, ein einziges Beispiel postet:

wie setze ich ein eigenes WebFront auf mit der Ausgabe einer einzigen Variable

mfg

BerndJ

PS: der sich jetzt schämt, das in einer seiner Berufsbezeichnungen der Text „Informatik…“ enthalten ist.

wgreipl · 26. Januar 2009 um 11:09

Hallo BerndJ,

das Anzeigen von selbst erzeugten Variablen geht in der jetzigen Version vom webfront (noch:D) nicht. Der Zeit werden nur Instanzvariablen angezeigt.

Um was es in der letzten Meldung von Horst ging ist die Möglichkeit wenn Du in webfront ein Skript anklickst die anschließende Popup-Meldung mit HTML füttern kannst. Bis dato waren die Ausgaben:

„Skript erfolgreich/nicht erfolgreich ausgeführt“ und die echo-Meldungen wurden hintereinander geschrieben.

Horst · 27. Januar 2009 um 14:00

Wer keine lust hat, sich in die Tiefen der JS-Programmierung einzuarbeiten und ein WebFront-Modul zu schreiben, kann auch auf einfache Art seine eigene Seite ins WebFront integrieren:

Im IP-Symcon-Verzeichnis unter /webfront die config.default.basic.php kopieren und als config.custom.basic.php einfügen.
In der config.custom.basic.php nach den dojo.require-Zeilen das iview-Modul mitladen lassen:


  
    dojo.require("webfront.modules.iview.Presenter");
    dojo.require("webfront.modules.iview.BasicView");

Vor der -Tag seine Seiten ins WebFront einladen lassen:


  
    var testseitePresenter = new webfront.modules.iview.Presenter("user/testseite.php", 30000);
    testseitePresenter.registerView(new webfront.modules.iview.BasicView("testseite", "Testseite"));
    webfront.controller.getApplication().addPage(testseitePresenter.getView());

Der Variablenname testseitePresenter ist für jede Seite individuell zu ändern. Die zu ladende Seite ist hier user/testseite.php und wird alle 30000ms automatisch aktualisiert. Wenn man den Zeit-Parameter weglässt ( webfront.modules.iview.Presenter(„user/testseite.php“); ) findet kein automatisches neu laden statt.
In webfront.modules.iview.BasicView(„testseite“, „Testseite“) werden die WebFront-interne ID testseite (wie der verwendete Variablenname testseitePresenter ohne Presenter) und der Titel in der Navigation Testseite festgehalten.
Damit das ganze designtechnisch auch zum Rest des WebFronts passt sind bereits im Verzeichnis /webfront/user die genannte testseite.php mit ein paar HTML-Beispielen und eine default.css vorhanden.

Eine vollständige config.custom.php sieht folgendermaßen aus:



<script type="text/javascript">
  
    dojo.registerModulePath("webfront", "../../webfront");
    dojo.require("webfront.Main");
    dojo.require("webfront.applications.basic.Basic");
    dojo.require("webfront.modules.ips.Presenter");
    dojo.require("webfront.modules.ips.BasicView");
    dojo.require("webfront.modules.dwd.Presenter");
    dojo.require("webfront.modules.dwd.BasicView");
    dojo.require("webfront.modules.iview.Presenter");
    dojo.require("webfront.modules.iview.BasicView");

    new webfront.Main("webfront");
    webfront.controller.setApplication(new webfront.applications.basic.Basic("basic", "WebFront"));

    var ipsPresenter = new webfront.modules.ips.Presenter("data/data.php");
    ipsPresenter.registerView(new webfront.modules.ips.BasicView("ips", "IP-Symcon"));
    webfront.controller.getApplication().addPage(ipsPresenter.getView());

    var dwdPresenter = new webfront.modules.dwd.Presenter("data/dwd.php");
    dwdPresenter.registerView(new webfront.modules.dwd.BasicView("dwd", "Wetter"));
    webfront.controller.getApplication().addPage(dwdPresenter.getView());

    var testseitePresenter = new webfront.modules.iview.Presenter("user/testseite.php", 30000);
    testseitePresenter.registerView(new webfront.modules.iview.BasicView("testseite", "Testseite"));
    webfront.controller.getApplication().addPage(testseitePresenter.getView());
</script>

Viel Spaß beim einbinden eurer WebCams, Wetterstationen, Heizungsanlagen und was es sonst noch alles gibt!

Horst

PS: Die /webfront/user/testseite.php und /webfront/user/default.css sind nicht zum Bearbeiten vorgesehen und werden bei jedem WebFront-Update vom LiveUpdater überschrieben und sollten daher für eigene Anpassungen unter einem anderem Namen kopiert werden.

BerndJ · 27. Januar 2009 um 18:09

Hallo Horst,

jo, das isses, jenes Futter welche die letzten grauen Zellen beflügelt und im Zuge der Erfolgserlebnisse und unendlich vielen Debugmeldungen den Dunst der Unwissenheit vertreibt.

Schönen Dank für den Schnelleinstieg.

Ich schlage eine eigene Kategorie für das Thema Webfront vor, unter Entwicklungsumgebung fügt es sich spitzenmässig in das Thema WIIPS und Designer, bzw. neu Dashboard ein.

mfg

BerndJ

PS: ich freu mich auf das erste veröffentlichte Beispiel einer erfolgreichen Einbindung einer IP-Cam

Horst · 27. Januar 2009 um 21:23

Folgende Einbindung einer IP-Cam läuft seit drei Monaten im SmartHome Paderborn:

<!--
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

<style type="text/css">@import "default.css";</style>
<style type="text/css">
html, body
{
    margin: 0;
    padding: 0;
}
</style>

</head><body>

<table style="width: 100%; height: 100%; border: 0;"><tbody><tr><td align="center" valign="middle">
<div style="border: 10px solid #3A3D40; width: 662px; height: 502px;">
<div style="border: 1px solid white; padding: 10px; background: black; width: 640px; height: 480px;">
<img src="http://SERVER-IP:PORT/BILDADRESSE.JPG?t=<?php echo time(); ?>" />
</div></div>
</td></tr></tbody></table>

</body></html>

Die Timestamp verhindert, dass der Browser das Bild aus dem Cache liest und somit nicht die aktuelle Version anzeigt. Die width- und height-Attribute sind manuell anzupassen, damit der Rahmen auch gut aussieht. Beim Anlegen eine passende Refresh-Zeit angeben.

Horst

RWN · 31. Januar 2009 um 02:26

ich mach dann mal den Anfang. sonst kommt ja nix

Danke Horst für deine Arbeit.

Bilder folgen gleich.

oder auch nicht :mad:

Da ist eine ganze HP dahinter, aber egal.

epogo · 31. Januar 2009 um 14:26

Hallo,

gibt es eine Möglichkeit die „Script erfolgreich ausgeführt“ Meldung im WebFront und iFront zu unterdrücken ?
Will eigentlich nur das Script ausführen… ohne eine Meldung danach…

Und nochwas… ist es möglich eine Seite im WebFront per Ereignis aufploppen zu lassen…
Nach dem Motto - es klingelt - und im WebFront springt das Bild der IP Kamera hoch…

Gruß epogo

Horst · 31. Januar 2009 um 18:44

Unter WebFront - IP-Symcon :: Automatisierungssoftware befindet sich ab jetzt übrigens die Doku zum WebFront. Im Menü ist nochmal die Beschreibung zum einfachen Einrichten eigener Seiten zu sehen. Insgesamt nichts interessantes für alle, die WebFront schon am laufen haben und die letze Seite dieses Threads gelesen haben.

@epogo: Das mit dem Unterdrücken werd ich bei Zeiten mal so lösen, dass der Script-Button einmal grün aufleuchtet, wenn das Ausführen erfolgreich war und keine Rückgabe vom Skript gekommen ist.
Die Geschichte mit Events fürs WebFront klingt interessant. Dafür müsste ich aber diverse Sachen in der Modularchitektur anpassen und mir einfallen lassen, wie man das am bequemsten löst.
Du könntest als Übergangslösung aber WebFront im Designer als Vollbild-Browserfenster anzeigen lassen und dann über den Designer entsprechende Overlays anzeigen.

RWN · 31. Januar 2009 um 18:56

Hallo Horst,

noch mal Vielen Dank !

epogo · 31. Januar 2009 um 19:26

@horst

Ok… Also mal noch abwarten. Das mit dem grünen aufleuchten wäre optimal. So stell ich mir das vor…

Und mit dem aufploppen. War nur so ne Idee von mir. Ich freu mich wenn nach und nach immer wieder Optionen in WebFront eingebaut werden. Mann muss ja nicht alles auf einmal haben…

Danke für Eurer unermüdlicher Einsatz

Gruß

epogo

Horst · 31. Januar 2009 um 20:19

Also das grüne Faden hab ich gerade mal eingebaut. Waren ja nur ein paar simple Zeilen. Werd das paresy zum Hochladen geben, d.h. es wird wahrscheinlich morgen im LiveUpdate sein.

Update: Ist drin

epogo · 2. Februar 2009 um 15:44

@Horst

Perfekt. Hab mal noch ein paar Dinge…
Erstens… im Front kommt nach Ablauf des Skriptes auch ne Meldung… Könnte man das auch deaktivieren ?
Weiterhin - gibt es irgendwo ein Punkt wo ich die Texte umstellen kann ?
Hintergrund: Fensterkontakte - da soll nicht Ein oder Aus dastehen sonder Offen/Geschlossen.

Hätte auch noch einen Verschönerungsvorschlag:

Schaut mal das hier an:

KNX-User-Forum - Einzelnen Beitrag anzeigen - iPhone Skin für Misterhouse - Tester gesucht

Wäre doch toll wenn ihr ein bissel in der Richtung was stricken könntet.

Danke !

Gruß epogo

paresy · 2. Februar 2009 um 15:52

Hintergrund: Fensterkontakte - da soll nicht Ein oder Aus dastehen sonder Offen/Geschlossen.

Das wirst du demnächst über die „Interpretation“ im EIB/KNX Modul verändern können. Zur Zeit ist es nur „auf die Schnelle“ einbaut, damit diese Werte überhaupt sichtbar sind.

paresy

Horst · 2. Februar 2009 um 16:33

Meinst damit das iFront? Da könnt ich auch was wie das Aufleuchten einbauen. Leider fällt mir spontan nichts designtechnisch passendes ein. Wenn es da irgendwo was standardmäßig von Apple eingesetztes gibt sag bescheid. Habe kein iPhone/iPod Touch und kann daher nicht so einfach nachsehen.

epogo · 2. Februar 2009 um 16:47

@Horst

Ja - meinte im iFront. Fänd es auch nichtmal so schlimm wenn garnichts passieren würde. Beim Drücken der „Taste“ leuchtet die ja kurz auf.

Gruß epogo

Horst · 4. Februar 2009 um 19:03

Hallo,

im aktuellen Update haben alle Devices und Variablen Icons bekommen.

Ab jetzt ist es aber auch möglich vor jedes Modul ein Icon zu setzen. Dazu bei der Definition der Views hinten den Namen des Icons dranhängen.
Die Icons finden sich unter /webfront/img/icons/png und /webfront/img/icons/gif. Die Icons liegen einmal im PNG- und einmal im GIF-Format vor, da es leider Menschen gibt, die den IE6 benutzen / benutzen müssen.

Erklärung anhand meines Codebeispiele der letzten Threadseite:
ohne Icon: testseitePresenter.registerView(new webfront.modules.iview.BasicView(„testseite“, „Testseite“));
mit Icon: testseitePresenter.registerView(new webfront.modules.iview.BasicView(„testseite“, „Testseite“, „ArrowRight“));

Hier nochmal die aufbereitete config.custom.php:

<script type="text/javascript">
    dojo.registerModulePath("webfront", "../../webfront");
    dojo.require("webfront.Main");
    dojo.require("webfront.applications.basic.Basic");
    dojo.require("webfront.modules.ips.Presenter");
    dojo.require("webfront.modules.ips.BasicView");
    dojo.require("webfront.modules.dwd.Presenter");
    dojo.require("webfront.modules.dwd.BasicView");
    dojo.require("webfront.modules.iview.Presenter");
    dojo.require("webfront.modules.iview.BasicView");

    new webfront.Main("webfront");
    webfront.controller.setApplication(new webfront.applications.basic.Basic("basic", "WebFront"));

    var ipsPresenter = new webfront.modules.ips.Presenter("data/data.php");
    ipsPresenter.registerView(new webfront.modules.ips.BasicView("ips", "IP-Symcon", "IPS"));
    webfront.controller.getApplication().addPage(ipsPresenter.getView());

    var dwdPresenter = new webfront.modules.dwd.Presenter("data/dwd.php");
    dwdPresenter.registerView(new webfront.modules.dwd.BasicView("dwd", "Wetter", "Cloud"));
    webfront.controller.getApplication().addPage(dwdPresenter.getView());

    var testseitePresenter = new webfront.modules.iview.Presenter("user/testseite.php", 30000);
    testseitePresenter.registerView(new webfront.modules.iview.BasicView("testseite", "Testseite", "ArrowRight"));
    webfront.controller.getApplication().addPage(testseitePresenter.getView());
</script>

Horst

PS: Wer mir einen Gefallen tun will: Benutzt einen W3C-konformeren Webbrowser wie den FireFox!
PPS: Wer es noch nicht kennt und an Webseiten oder WebFront-Modulen entwickelt: Installiert euch im FireFox das FireBug-Plugin.