Hallo,
ich nutze zu Hause Funksteckdosen die ich mitells eines Microcontrollers auch über ein Webinterface steuern kann.
Nun möchte ich mir eine eigene Webseite erstellen mit dem Grundriss meiner Wohnung und den dem Standort der Funksteckdosen. Ich möchte mit einem Klick auf ein Lampen Icon die Lampe einschalten, worauf sich auch das Icon in eine eingaschaltete Lampe verändert und umgekehrt. Den Zustand der Lampen/Funksteckdosen möchte ich in einer Mysql Datenbank abspeichern.
Nun weiß ich nicht, wie ich eine Abfrage der Datenbank mit dem anzeigen des richtigen Icons herstellen kann. Habe schon mit PHP, AJAX und JAvas***** rumgespielt, leider steh ich grad ziemlich auf dem Schlauch und komme nicht weiter. Unten seht Ihr meinen aktuellen Code, ohne Datenbankabfrage. Ich hofe ihr könnt mir weiterhelfen!
PHP-Code:
<html>
<head>
<style type="text/css">
body {background-color: #818181;}
#LampTv {
position: absolute;
left: 900px;
top: 1000px;
z-index: 1;
}
#LampSofa {
position: absolute;
left: 1280px;
top: 1000px;
z-index: 1;
}
#XBMC {
position: absolute;
left: 900px;
top: 850px;
z-index: 1;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home-Page</title>
</head>
<body>
<?php
//Verbindung zur Datenbank herstellen
mysql_connect("localhost", "root","") or die ("Verbindung nicht möglich");
mysql_select_db("homecontrol") or die ("Datenbank existiert nicht");
//Lampe Couch auswählen
$Funk1 = mysql_query(SELECT zustand FROM 'funksteckdosen' WHERE standort='Lampe Couch');
//Funktion für DB Abfrage ob Lampe an oder aus.
boolean $Lampengrafik = False;
if Funk1 = "Aus" {
$Lampengrafik = False;
}else{
$Lampengrafik = True;}
?>
<s*****>
//Funktion für Lampen
function Lampe(Url) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", Url , true);
xmlhttp.send();
}
//Grafikewechsel bei klick Funktion
var SwitchImg = new Array();
// hier werden die URLs der Grafiken eingetragen
SwitchImg[1] = "ligthbulb_off.png";
SwitchImg[2] = "ligthbulb_on.png";
SwitchImg[3] = "raspi_off.png";
SwitchImg[4] = "raspi_on.png";
LampFlag = 'on'
function Tauschen(DeviceId, x, y)
{
if (LampFlag == 'on'){
document.getElementById(DeviceId).src = SwitchImg[x];
LampFlag='off'
}
else
{
document.getElementById(DeviceId).src = SwitchImg[y];
LampFlag='on'
}
}
</s*****>
<!Hintergrundbild = Wohnung>
<img src="bg_image.svg" id="background">
<!Link zur TV Lampe Wohnzimmer >
<img id="LampTv" onclick="Tauschen('LampTv', '1', '2'), Lampe('http://192.168.1.66/index.html?schalte&3')" src="ligthbulb_off.png">
<!Link zur Sofa Lampe Wohnzimmer>
<img id="LampSofa" onclick="Tauschen('LampSofa', '1', '2'), Lampe('http://192.168.1.66/index.html?schalte&1')" src="ligthbulb_off.png">
<!Link zum XBMC Raspberry Pi>
<img id="XBMC" onclick="Tauschen('XBMC', '3', '4'), Lampe('http://192.168.1.66/index.html?schalte&2')" src="raspi_off.png">
</body>
</html>