Das Eigene WEB ohne den Ballast des WebFront

Hallo IPS Freunde,
ich habe lange durch das Forum gesurft, um all das zu finden, das ich brauchte um eigene, unabhängige Webseiten zu bauen, die nicht mehr an den IPS Server,und an das WebFront gebunen sind.
Mag sein das es andere und einfachere wege gibt, darum veröffentliche ich hier mal meine Projekte.

Fröliches Basteln

Alles fing an mit n bisschen FS20

dann ging es tiefer mit der Steuerung der Beleuchtung und Versorgung des Stahlbaus

Zugang, Beleuchtung, Pressluftversorgung,Schutzgasversorgung, Reinigungsanlage für Raumluft, Lüfterklappensteuerung, Temperaturen, Heizungsteurung,Alarme…

Hier die Anfänge…
Zuerst brauche ich einen Webserver.
IPS hat dafür schon alles. Es kann aber nur ein Webserver im Standartmode laufen.
z.B. web aufruf 192.168.135.153/test.php (die IP istdie das Rechners auf dem IPS läuft)


Üblicherweise steht in Root „webfront“. Der port 80 ist der Standart.
Wenn da 81 steht müste der aufruf 192.168.135.153:81/test.php lauten.
Ich nutze das webfront nicht. Also in IP-Symcon das Unterverzeihnis „web“ erzeugt und in Root eigetragen.

nun der erste Test mit der Datei test.php im Unterverzeichnis web von IPS
es soll eine temperatur angezeigt werden und eine Lampe geschaltet werden.
die Seite erneuert sich alle x Sekunden.
test.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="hgp">
<meta name="editor" content="html-editor phase 5">
<!-- in content bitte die Zeit in Sekunden eigeben,
        in der periodisch die Seite neu aufgebaut werden soll  -->
<meta http-equiv="refresh" content="60">
</head>
<?php
    // Wenn die Seite durch  form method='post' aufgerufen wird
    // und die ein Input name "Licht_A" hat
    // wird der FS20 Schalter mit dem invertirten Status des FS20 Schalters gesetzt
    // "!"= true wird false oder  false wird true
   if (isset($_POST["Licht_A"]))  FS20_SwitchMode(12008, !GetValue(57037));
    // Status des FS20 Schalters ermitten und das Immage definieren
   if (GetValue(57037))  $la = "Bilder/Lan.png"; else $la = "Bilder/Laus.png";
    // Temperatur der Wetterstation lesen und formatieren
    // Dezimalzeichen "," und 1 ne stelle nach dem Komma
   $tempa = number_format(GetValue(34359), 1, ",", ".");
?>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

  <!-- Hintergrundrahmen   -->
  <div style='position:absolute; top:0px; left:0px; height:300px; width:800px; background-color:#ddd;'>  </div>
  <!-- Schlichte übersicht eines Raumes   -->
  <div style='position:absolute; top:20px; left:30px; height:200px; width:300px; background-color:#aaa;'>  </div>
  <div style='position:absolute; top:25px; left:35px; height:190px; width:290px; background-color:#fff;'>  </div>


  <!-- Anzeige des Bildes $la an den koordinaten left: top:
       gleichzeitig selbst Aufruf mit post Parameter
       und damit schalten des FS20 Schalters. Siehe [if (isset($_POST["Licht_A"]))] -->
  <div style='position:absolute; left:100px; top:100px;'>
    <form method='post' action="<?php echo $_SERVER['PHP_SELF'] ?>">
      <input name='Licht_A' type='hidden'>
      <input type='image' title="Aussenbeleuchtung Büro" src='<?echo $la?>' >
    </form>
  </div>
  <!-- Anzeige der Temperatur an den koordinaten left: top:   -->
  <div style='position:absolute; left:150px; top:100px;'>
     Aussentemperatur : <?echo $tempa?> &#176C
  </div>
  <!--  Anzeige einer Raumübersicht left: top:    -->
  <div style='position:absolute; left:400px; top:20px;'>
      <input type='image' src='Bilder/raum.png' height='200px' width='300px' alt="Raumübersicht">
  </div>
  <!-- Anzeige refreschen hilfreich bei Kontrolle von code änderungen    -->
  <div style='position:absolute;left:200px;top:250px;'>
    <form method='post' action='<?php echo $_SERVER['PHP_SELF'] ?>'>
      <input type='image' src='Bilder/aktualisieren.png' alt="aktuaslisieren">
    </form>
  </div>
  <!-- Anzeige hilfe was so gepostet wurde    -->
  <div style='position:absolute;left:0px;top:300px;'>
    <?php
    Print_r ($_POST);
    ?>
  </div>
</body>
</html>

Das Ergebnis:

aktualisieren.pngLan.pngLaus.png

HGP Home OG.png

HGP Home EG.png

Und wie kommunizieren IPS und die Webseite miteinnander?

Hallo Karlheinz

auf dem Xampp web folgender Code.
Bei mir im web unterverzeichnis javascript die Datei ips_js.php
Bedingung ist das das Verzeichnis Dojo hieher kopiert wird. Die dojo.js liegt dann im verzeicnis dojo/dojo/dojo.js


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="hgp">
<meta name="editor" content="html-editor phase 5">
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig=""></script>
<script language="JavaScript">
       var WriteValueToIPS  = function (url) { dojo.xhrGet({ url: url, timeout:5000 }) };
       var ReadValueFromIPS = function (node, url) { dojo.addOnLoad( function () { var req = function () { dojo.xhrGet( { url: url, node: dojo.byId(node), load: function (data, xhr) { if (xhr.args.node) { xhr.args.node.innerHTML = data; } } } ); }; req(); }); };
    var refreshPeriodically = function (node, url, interval) { dojo.addOnLoad( function () { var req = function () { dojo.xhrGet( { url: url, node: dojo.byId(node), load: function (data, xhr) { if (xhr.args.node) { xhr.args.node.innerHTML = data; } } } ); }; req(); window.setInterval(req, interval); }); };


    refreshPeriodically("A_Temperatur",   "http://192.168.135.153/dojo/getIPSValue.php?id=51408&dez=1", 2000);
    refreshPeriodically("A_Temperatur_S", "http://192.168.138.36/dojo/getIPSValue.php?id=34359&dez=1", 1900);
    refreshPeriodically("BeleuchtungA", "http://192.168.135.153/dojo/getIPSValue.php?id=53293&style=grafik&file0=Laus.png&file1=Lan.png",2000);
  //netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<!--Lampen und deren Schalter----->
<div id="BeleuchtungA" style="left: 155px; top: 135px; position: absolute"
      onmousedown="ReadValueFromIPS('BeleuchtungA', 'http://192.168.135.153/dojo/FS20_IPS_Grafikschalter.php?id=48610&status=53293&file0=Laus.png&file1=Lan.png');">
</div>
<div title='Temperatur Aussen' style='position:absolute;left:365px;top:15px;font-size:15px;'>
  <span id="A_Temperatur">T</span>&#176&#67
</div>

<div title='Temperatur Aussen' style='position:absolute;left:465px;top:15px;font-size:15px;'>
  <span id="A_Temperatur_S">T</span>&#176&#67
</div>

<div style='position:absolute;left:570px;top:300px;'>
   <form method='post' action='<?php echo $_SERVER['PHP_SELF'] ?>'>
   <input type='image' src='../Bilder/aktualisieren.png' alt="aktuaslisieren">
   </form>
</div>

</body>
</html>

auf dem IPS web sollte folgendes Script im Verzeichnis Dojo datei getIPSValue.php sein.


<?php
    header("Expires: Mon, 12 Jul 1995 05:00:00 GMT");
    header("Last-Modified: ".gmdate("D, d M Y H:i:s", time())." GMT");
    header("Pragma: no-cache");
    header("Expires: 0");
    header("Cache-Control: no-store, no-cache, must-revalidate");
    header("Cache-Control: pre-check=0, post-check=0, max-age=0");

$t="Erg:";
if (isset($_GET['id']) == true) $t=$t." ID:".$_GET['id'];
if (isset($_GET['dez']) == true) $t=$t." dez:".$_GET['dez'];
if (isset($_GET['style']) == true) $t=$t." style:".$_GET['style'];
setvalue(32846,$t);

if (isset($_GET['id']) == true)  {
  if (isset($_GET['dez']) == true) {
    $styletext = number_format(GetValue((int)$_GET['id']), $_GET['dez'], ",", "");
  }else{
    $styletext = GetValue((int)$_GET['id']);
  }
  if (isset($_GET['style']) == true) {
    switch($_GET['style']) {
        case 'grafik':
             if (GetValue((int)$_GET['id']) == 1) {
                if (isset($_GET['hoehe']) == true) {
                  $styletext =  "<input type='image' src='" . $_GET['file1'] ."' height='" . $_GET['hoehe'] ."' width='" . $_GET['breite'] ."' >";
                } else {
                  $styletext =  "<input type='image' src=" . $_GET['file1'] ." >";
                }
              } else {
                if (isset($_GET['hoehe']) == true) {
                  $styletext =  "<input type='image' src='" . $_GET['file0'] ."' height='" . $_GET['hoehe'] ."' width='" . $_GET['breite'] ."' >";
                } else {
                  $styletext =  "<input type='image' src=" . $_GET['file0'] ." >";
                }
              }
              break;
        default:
              break;
    }
  }
  echo $styletext;
}
?>

und das script FS20_IPS_Grafikschalter.php


<?php
    header("Expires: Mon, 12 Jul 1995 05:00:00 GMT");
    header("Last-Modified: ".gmdate("D, d M Y H:i:s", time())." GMT");
    header("Pragma: no-cache");
    header("Expires: 0");
    header("Cache-Control: no-store, no-cache, must-revalidate");
    header("Cache-Control: pre-check=0, post-check=0, max-age=0");


$t="Erg:";
if (isset($_GET['id']) == true) $t=$t." ID:".$_GET['id'];
if (isset($_GET['status']) == true) $t=$t." status:".$_GET['status'];

setvalue(52725,$t);

if (isset($_GET['id']) == true)  {

             FS20_SwitchMode((int)$_GET['id'],!GetValueBoolean((int)$_GET['status']));
             if (GetValue((int)$_GET['status']) == 1) {
                if (isset($_GET['hoehe']) == true) {
                  $styletext =  "<input type='image' src='" . $_GET['file1'] ."' height='" . $_GET['hoehe'] ."' width='" . $_GET['breite'] ."' >";
                } else {
                  $styletext =  "<input type='image' src=" . $_GET['file1'] ." >";
                }
              } else {
                if (isset($_GET['hoehe']) == true) {
                  $styletext =  "<input type='image' src='" . $_GET['file0'] ."' height='" . $_GET['hoehe'] ."' width='" . $_GET['breite'] ."' >";
                } else {
                  $styletext =  "<input type='image' src=" . $_GET['file0'] ." >";
                }
              }
  }
  echo $styletext;
?>

Natürlich solltest du nun die ID’s ändern
beim FS20_IPS_Grafikschalter.php id(Instanz) und status(Staus der Instanz)

Achung: Firefox blockt den Zugriff, nicht verwenden.Ich suche noch nach einer lösung.
eventuell //netscape.security.PrivilegeManager.enablePrivilege(„UniversalBrowserRead“);

IE fragt um Erlaubnis, die läst sich deaktiviern.
[Extras] [Internetoptionen] [Sicherheit] [Lokales Intranet] [Stufe anpassen] [Auf Datenquellen über Domänengrenzen hinweg zugreifen] [Aktivieren]

optisch noch nicht wirklich ein Highlight, was sind die Vorteile nicht gleich den Server vom IPS zu verwenden und nur
das Webfront selber?

Optik is nur ein GIF oder n PNG. da kann jeder der Kreativität freien Lauf lassen.
was ich hier aufzeigen möchte ist der weg nicht die Optik.
Mein Hutschienen PC im Schaltschrank ist Langsam aber Stabiel. Dem möchte ich damit entlasten.
Das läuft genausogut auf dem IPS Server ist ur ne sache der URL

Mein Hutschienen PC im Schaltschrank ist Langsam aber Stabiel. Dem möchte ich damit entlasten.
Das läuft genausogut auf dem IPS Server ist ur ne sache der URL

Sorry, versteh ich immer noch nicht, ist für mich ein Widerspruch:
Weil dein Hutschienen-PC stabil ist soll der Webserver darauf laufen und nicht am IPS-Rechner?
Aber eigentlich willst den langsamen Hutschienen-PC entlasten?
Oder läuft da IPS drauf?

Und Zuverlässigkeit gibt das auch keine, weil ohne IPS dann ja nicht viel vom Rest funktioniert.

Werde das Projekt aber verfolgen, vielleicht wird das ja doch noch was für mich.

viel Erfolg, chris

Hutschienen PC …138.36 ist IPS für die Werkstatt, daran angeschlossen Siemens S7 zur Lüftersteuerug
und KNX zur Automation
2 All 4000 als Sensor Temperatur Luftdruck, 5 Solarlogger, Mysql auf dem SRV-XAMPP(in ner virtuellen umgebung)
da ist mit der Zeit schon einiges an Last gewachsen. Dank des neusten Updates hat sich die Situation aber stark verbessert.
Und Zuhause nen EEE-PC mit Satmodul zum Fernsehen, auf dem mein IPS Home läuft …135.153
alles intranet

Hier nun die Testumgebung Zuhause:

HGP Home EG.pngHGP Home OG.png

Als Geräte kommen zum Einsatz:

EEE PC mit FHZ 1300 PC FS 20
KS 300 Wetterstation
FS20 Dämmeschalter
FS20 RSU Rolladenschalter
FHT80b
HMS100 TF
FS20 Aktoren
S 20 Fernbedienung
S 4 Fernbedienung
S 4a Fernbedienung
IPSwitch
ALL 4000
Android TabletPC

Mysql auf SRV-XAMPP dient zum Loggen und Protoklieren der Events