Hallo zusammen,
ich bastel mir gerade ine Website über die ich meine Funksteckdosen, die ich über einen Mikrocontroller anspreche, ein- und ausschalten kann.
Ich möchte mit einem Klick auf das Lampensymbol meine MySQL Datenbank updaten und jeweils den Zustand auf AN oder AUS setzen, so dass wenn immer ich die Seite neu lade ich sehe welche Lampe AN oder eben AUS ist. Aktuell ist es so, das wenn ich die Seite neu lade automatisch die DB ein Update erfährt und eben nicht erst wenn ich auf die jeweiligen buttons klicke. Anbei mein Code, in der Hoffnung das Ihr mir da schnell und relativ einfach weiterhelfen könnt, ich habe google mittlerweile ausgereizt und weiss aktuell nicht weiter...
PS die Funktion Tauschen() ist seit dem ich versuche mit der DB zu arbeiten obsolet und wird später gelöscht...
index.php
PHP-Code:
<html>
<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>
<head>
<title>Meine erste Seite </title>
</head>
<body>
<script>
//Funktion für Lampen
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
//Test jQuery DBUpdate onclick
$(document).ready(function() {
$('#LampTv').click(function(){
$.ajax({
type: "GET",
url: "onclickDBUpdate.php",
}
}); // Ajax Call
}); //event handler
}); //document.ready
//Test call php script
function callPHP(){
$.post("onclickDBUpdate.php",
{
DBLampeTV();
},
);
}
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'
}
}
</script>
<?php
include 'iconchange.php';
include 'onclickDBUpdate.php';
?>
<!Hintergrundbild = Wohnung>
<img src="bg_image.svg" id="background">
<!Link zur TV Lampe Wohnzimmer >
<img id="LampTv" onclick=<?php DBLampeTV(); ?> "Lampe('http://192.168.1.66/index.html?schalte&3')" src=<?php iconLampeTV()?>>
<!Link zur Sofa Lampe Wohnzimmer>
<img id="LampSofa" onclick=<?php DBLampeCouch(); ?> "Lampe('http://192.168.1.66/index.html?schalte&1')" src=<?php iconLampeCouch()?>>
<!Link zum XBMC Raspberry Pi>
<img id="XBMC" onclick=<?php DBXBMC();?> "Lampe('http://192.168.1.66/index.html?schalte&2')" src=<?php iconXBMC()?>>
</body>
</html>
DB Update:
PHP-Code:
<?php
function DBLampeTV(){
//Verbindung zur DB herstellen
mysql_connect("localhost", "root","") or die ("Verbindung nicht möglich");
//DB auswählen
mysql_select_db("homecontrol") or die ("Datenbank existiert nicht");
//Query in Result wandeln
$Funk1Q = mysql_query("SELECT Zustand FROM funksteckdosen WHERE Standort='Lampe TV'");
$Funk1R = mysql_result($Funk1Q, 0);
if ($Funk1R == "An"){
mysql_query("UPDATE funksteckdosen SET Zustand='Aus' WHERE Standort='Lampe TV'");
}else {
mysql_query("UPDATE funksteckdosen SET Zustand='An' WHERE Standort='Lampe TV'");
}
}
function DBLampeCouch(){
//Verbindung zur DB herstellen
mysql_connect("localhost", "root","") or die ("Verbindung nicht möglich");
//DB auswählen
mysql_select_db("homecontrol") or die ("Datenbank existiert nicht");
//Query in Result wandeln
$Funk1Q = mysql_query("SELECT Zustand FROM funksteckdosen WHERE Standort='Lampe Couch'");
$Funk1R = mysql_result($Funk1Q, 0);
if ($Funk1R == "An"){
mysql_query("UPDATE funksteckdosen SET Zustand='Aus' WHERE Standort='Lampe Couch'");
}else {
mysql_query("UPDATE funksteckdosen SET Zustand='An' WHERE Standort='Lampe Couch'");
}
}
function DBXBMC(){
//Verbindung zur DB herstellen
mysql_connect("localhost", "root","") or die ("Verbindung nicht möglich");
//DB auswählen
mysql_select_db("homecontrol") or die ("Datenbank existiert nicht");
//Query in Result wandeln
$Funk1Q = mysql_query("SELECT Zustand FROM funksteckdosen WHERE Standort='XBMC'");
$Funk1R = mysql_result($Funk1Q, 0);
if ($Funk1R == "An"){
mysql_query("UPDATE funksteckdosen SET Zustand='Aus' WHERE Standort='XBMC'");
}else {
mysql_query("UPDATE funksteckdosen SET Zustand='An' WHERE Standort='XBMC'");
}
}
?>
Bildwechsel der Buttons:
PHP-Code:
<?php
//Funktion um icon entsprechend Status anzupassen:
function iconLampeTV(){
//Verbindung zur DB herstellen
mysql_connect("localhost", "root","") or die ("Verbindung nicht möglich");
//DB auswählen
mysql_select_db("homecontrol") or die ("Datenbank existiert nicht");
//Query in Result wandeln
$Funk1Q = mysql_query("SELECT Zustand FROM funksteckdosen WHERE Standort='Lampe TV'");
$Funk1R = mysql_result($Funk1Q, 0);
//Nun wird entsprechend Status das passende icon ausgewählt
if ($Funk1R == "An"){
echo "ligthbulb_on.png";
}else {
echo "ligthbulb_off.png";
}
}
function iconLampeCouch(){
//Verbindung zur DB herstellen
mysql_connect("localhost", "root","") or die ("Verbindung nicht möglich");
//DB auswählen
mysql_select_db("homecontrol") or die ("Datenbank existiert nicht");
//Query in Result wandeln
$Funk1Q = mysql_query("SELECT Zustand FROM funksteckdosen WHERE Standort='Lampe Couch'");
$Funk1R = mysql_result($Funk1Q, 0);
//Nun wird entsprechend Status das passende icon ausgewählt
if ($Funk1R == "An"){
echo "ligthbulb_on.png";
}else {
echo "ligthbulb_off.png";
}
}
function iconXBMC(){
//Verbindung zur DB herstellen
mysql_connect("localhost", "root","") or die ("Verbindung nicht möglich");
//DB auswählen
mysql_select_db("homecontrol") or die ("Datenbank existiert nicht");
//Query in Result wandeln
$Funk1Q = mysql_query("SELECT Zustand FROM funksteckdosen WHERE Standort='XBMC'");
$Funk1R = mysql_result($Funk1Q, 0);
//Nun wird entsprechend Status das passende icon ausgewählt
if ($Funk1R == "An"){
echo "raspi_on.png";
}else {
echo "raspi_off.png";
}
}
?>