Webseitenlayout über Ajax mit Arduino Kommunizieren lassen

Hallo an alle :slight_smile:
Ich bin wiedermal am rumtüffteln an einer neuen Webseite und wollte die Funktion meiner “alten” (“Webseite mit funktionierendem AJAX-Code.txt”,welche funktioniert) übernehmen, aber das funktioniert nicht wirklich XD.
Ich möchte über das Arduino-Ethernet shield die Webseite per SD-Karte abrufen lassen und dann über die Webseite dem Arduino Mega 2560 R3 den entsprechenden Befehl senden.
Da ich nicht wirklich gut in Ajax und der Programmierung allgemein bin, wollte ich wieder mal euch um Hilfe erbitten.
In der Angehängten (“Webseite_mit_funktionierendem_Arduino_Code.ino” - Arduino Code für die “alte” Webseite, für die neue muss das dann angepasst werden, aber müsste eigentlich auch ohne änderung teilweise funktionieren, wenn die Tablet-Webseite funktioniert) - Datei sieht man den funktionierenden Arduino Code zur “alten” Webseite (Webseite mit funktionierendem AJAX-Code.txt - Muss auf die SD-Karte).
Desweiteren habe ich noch die (“Tablet-Webseite - Nur Layout ohne Funktion.html” - Muss auf die SD-Karte) angehängt, welche das gewünschte Webseitenlayout ist.
Zu letzt habe ich meinen kläglichen Versuch die “alte” Webseite und die “Tablet-Webseite” ineinander zu integrieren (Webseitenversuch - AJAX-Code in die Tablet-Webseite zu integrieren.txt - Muss auf die SD-Karte), angehängt.

Ich hoffe es gibt nette angagierte Forenhelferlein :P, welche sich trauen die nicht zu komplizierten Codes anzusehen. Vielleicht findet jemand ja sofort den Fehler und erleichtert mich so sehr wie es im Moment nur geht, da ich gerne vor Investitionen in eine “Hausautomationsinstallation” eine funktionierende Webseite hätte!
Es reicht schon wenn jemand eine Idee hat oder einen Tipp, damit ich weitere Tage rumprobieren kann bis es vielleicht funktioniert.

Vielen Dank im Voraus an euch nette Helfer!!!

p.s. Bei Fragen bitte gerne an mich schreiben!!!

Webseite_mit_funktionierendem_Arduino_Code.ino (8.93 KB)

Webseite mit funktionierendem AJAX-Code.txt (2.76 KB)

Tablet-Webseite - Nur Layout ohne Funktion.html (33 KB)

Webseitenversuch - AJAX-Code in die Tablet-Webseite zu integrieren.txt (6.09 KB)

Wie ich es kenne, hat keiner ein Nerv dazu, sich mit der Website Geschichte auseinander zu setzen.
Also bleib immer noch ich und du der es braucht :smiley:
Ich versteh nicht was du nun machen möchtest, mit den Ajax krimskram. Was soll da funktionieren?
So nebenbei, tolles Design :smiley:

PS: die skripts, brauchst du immer noch nicht, wenn du kein PHP verwendest.

Hi skorpi08 XD ich glaube du hast sowas von recht......leider!!!
Alsooooooooooo.... ich möchte die Webseite über die SD-Karte des Ethernet-Shields laufen lassen und die Befehle dann über die Webseite an den Arduino geben.
Ich habe mithilfe einer Beispielseite Arduino Webserver Input and Output es nach einiger Zeit geschafft meine eigene Webseite zu erstellen und zu steuern über dieses Ajax.
Der Vorteil ist das es flüssig läuft und ohne "refresh" bzw. "flackern" änderungen aktualisiert und es funktioniert wirklich sehr gut!
Aus diesem Grund möchte ich das tolle "Tablet-Layout", welches auch du sehr gut findest XD nutzen und über dieses versuchen auf die gleiche Weise wie über die Beispielseite dem Arduino Befehle zu geben, aber das klappt einfach nicht und ich verstehe nicht warum.
Habe extra alles unnötige vorerst rausgenommen und lediglich eine hauptpage mit unterpage und button gelassen damit ich nicht viele Fehler haben kann, aber wie gesagt klappt es nicht wirklich ..........

Vielen Dank skorpi08, wiedermal bist du der Einzige! :blush:

p.s. hast du dir das nochmal mit dem Stromstoßrelais und dem Arduino durch den Kopf gehen lassen in Hinsicht auf die Funktion!?

Ich muss zugeben, ich hasse mittlerweile das Design :zipper_mouth_face:
Da funktioniert bei mir auch nix wie ich will.
Momentan keine Zeit für Arduino etc

Aber die Ansteuerung hatte doch geklappt hast du gesagt gehabt!?

Dass schon. Was ich schon seit Tagen versuche ist, wenn im Linken Panel ich was auswähle, soll dann nicht eine komplett neue Seite geöffnet werden, sondern rechts daneben auftauchen. Somit habe ich immer dieses linke Panel da

XD Das hatte ich auch vor, aber nicht mit wirklicher Überzeugung versucht umzusetzen, aber könnte eine Idee haben wie es funktioniert.
Für diese Spielerei werde ich aber erst wieder ein Auge haben, wenn ich zumindest mal die Ansteuerung hinbekomme...... :wink:

Wenn du mir dabei hilfst, helfe ich dir dann da weiter :wink:

XD ich habe nur eine Idee, aber nichts 100%iges.
Hab nochmal nachgeschaut, aber mir fällt auf anhieb doch nichts gutes ein…
Ich dachte hier :

mit der entsprechenden abfrage auf diesen Part bzw. #panel-fixed-page1 weiterleiten bzw. einfügen lassen, aber wie genau müsste ich selber rumtüffteln XD

Hatte ich alles probiert, funktioniert nicht wirklich

Ja tolles Design, will ich auch haben, hast das selber gemacht? :slight_smile:
Hab bisher auch nur das Tutorial durch und lasse mir ein paar Daten auf der Webseite anzeigen, aber Ajax ist mir zu kompliziert :smiley:

hi,

es gibt in jquery mobile standardmäßig keine solche linke leiste. nur oben oder unten buttons, ab 5 wirds zweizeilig.
such mal in google nach "jquery mobile navbar vertical", da steht einiges, aber ich habe keine ahnung, ob's auch brauchbar ist.

gruß stefan

Hello back again :slight_smile:

nun schon über zwei Jahre und ich bin nun wieder dran dieses “Tabletdesign” in einen funktionsfähigen Code umzufummeln, aber wie gehabt bleibt es eine echt große Herausforderung und Glückssache für mich…
Kann mir denn wirklich keiner bei dieser Herausforderung helfen?

Falls sich jemand erbarmt wäre das echt super, da ich nun schon eine ganze Woche jeden Abend bis Nacht versuche und versuche, aber der Arduino schaltet nichts.

Im aktuellen “ALTEN”-Layout ist die Abfrage so:

function GetArduinoIO()
{
nocache = “&nocache=” + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
// XML file received - switch values
var count;

// get switch inputs
var num_an = this.responseXML.getElementsByTagName(‘Rückmeldungen’).length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName(“Rückmeldungen”)[count].innerHTML =
this.responseXML.getElementsByTagName(‘Rückmeldungen’)[count].childNodes[0].nodeValue;
}

}
}
}
}
request.open(“GET”, “ajax_inputs” + strGaestezimmer_Licht_Allgemein + nocache, true);
request.send(null);
setTimeout(‘GetArduinoIO()’, 1000);
strGaestezimmer_Licht_Allgemein = “”;
}

function Gaestezimmer_Licht_Allgemein()
{
strGaestezimmer_Licht_Allgemein = “&Gaestezimmer-Licht-Allgemein”;
}

Gästezimmer Licht Allgemein

Wie kann ich diese Abfrage mit dem “Tabletlayout” kombinieren, sodass es mit der Übertragung zum Arduino ebenso klappt?

Vielen Dank im Voraus!

2 Jahre und du hast nix gelernt.
Code Tags.
Willst du nur schalten können oder muss es unbedingt dieses Design sein?

Hi Tobias,

vielleicht hilft es Dir weiter, ich habe ebenfalls ne Haussteuerung vor und mein Arduino Uno ist mit einem Ethernet Shield, einem CAN-BUS Shield, einem 32Input-74hc165 Shield sowie einem 32Output 74HC595 Shield versehen. Z.Z. wird die Webseite noch von der SD-Karte geladen, das schalten funktioniert, wobei Output 30+31 mit Input 30+31 verbunden sind (nur erstmal zur Kontrolle)

Der Arduino Code und die Webseite sind hier:

http://www.mega-hz.de/Arduino/WEB-IO/web-io.htm

http://www.mega-hz.de/Arduino/WEB-IO/_home-sys_arduino-fast.ino.ino

Da der Arduino nur noch 328Bytes (Zahl passt zum Controller :slight_smile: ) freies Ram hat und ich schon etliche Optimierungen durchgeführt habe, kam mir die Idee, die Webseite nicht vom Arduino sondern von meinem Server laden zu lassen.
Der Vorteil ist: die Webseite kann bequem editiert werden,
die doch sehr empfindlichen SD-Karten können entfallen und somit auch die Speicherfressende
SD.Lib !

mit dem auskommentierten Befehlen zur Umleitung

// umleitung zum server:
// client.println(F("HTTP/1.1 302 Found"));
// client.println(F("Location: http://192.168.2.222/Arduino/WEB-IO/web-io.htm"));
// client.println(F("HTTP/1.1 301 Moved Permanently"));
// client.println(F("Location: http://192.168.2.222/Arduino/WEB-IO/web-io.htm"));

per HTTP 301 oder 302 funktioniert das auch prima, allerdings wird dann der Arduino nicht mehr angesprochen!

Hier brauche ich dringend Hilfe, hab keine Ahnung, was ich auf der Webseite einbauen muss, damit die mit dem Arduino redet!

Der Arduino ist unter mega-hz.dnshome.de:85 zu erreichen!

Aus Deiner Weboberfläche könnte man noch einiges zaubern!