Ich habe einen Arduino Webserver am laufen, wird Teil meines Home-Automation Projektes werden.
Über eine Webseite kann man LEDs bzw. Ausgänge des 32SHIFT-OUT Shield mit 4x74HC595 schalten.
Das schalten funktioniert bereits, siehe und probiere hier:
http://mega-hz.dnshome.de:85/.
Wie kann man antelle der checkboxen "LED-ICONS" wie diese [Blockierte Grafik: http://www.mega-hz.de/icons/SquareCons_icons/PNG/Green1.png] in rot (für aus) und grün (für an) darstellen lassen? Ein Klick auf die Icons sollte dennoch den Status wechseln.
Hier der Arduino Code:
/*--------------------------------------------------------------
Program: eth_websrv_SD_Ajax_in_out
Description: Arduino web server that displays 4 analog inputs,
the state of 3 switches and controls 4 outputs,
2 using checkboxes and 2 using buttons.
The web page is stored on the micro SD card.
Hardware: Arduino Uno and official Arduino Ethernet
shield. Should work with other Arduinos and
compatible Ethernet shields.
2Gb micro SD card formatted FAT16.
A2 to A4 analog inputs, pins 2, 3 and 5 for
the switches, pins 6 to 9 as outputs (LEDs).
Software: Developed using Arduino 1.0.5 software
Should be compatible with Arduino 1.0 +
SD card contains web page called web-io.htm
References: - WebServer example by David A. Mellis and
modified by Tom Igoe
- SD card examples by David A. Mellis and
Tom Igoe
- Ethernet library documentation:
http://arduino.cc/en/Reference/Ethernet
- SD Card library documentation:
http://arduino.cc/en/Reference/SD
Date: 4 April 2013
Modified: 19 June 2013
- removed use of the String class
Author: W.A. Smith, http://startingelectronics.com
modified: 14.11.2016 mega-hz
hardware: arduino uno, 32input shield, 32output shield, ethernet shield
--------------------------------------------------------------*/
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ 60
// Pin- und Variablen-Definierung des 32 Kanal SHIFT-IN-SHIELDs
uint8_t IN_loadPin = 5; // per Jumper wählbar D2 - D11
uint8_t IN_dataPin = 6; // per Jumper wählbar D2 - D11
uint8_t IN_clockPin = 3; // per Jumper wählbar D2 - D11
uint8_t Input[32] = {};
uint32_t Inputs = 0;
// Pin- und Variablen-Definierung des 32 Kanal SHIFT-OUT-SHIELDs
uint8_t OUT_latchPin = 2; // per Jumper wählbar D2 - D11
uint8_t OUT_dataPin = 7; // per Jumper wählbar D2 - D11
uint8_t OUT_clockPin = 3; // per Jumper wählbar D2 - D11
uint8_t Output[33] = {};
uint32_t Outputs = 0;
// Ethernet Shield benutzt 10,11,12,13!
// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 2, 231); // IP address, may need to change depending on network
EthernetServer server(85); // create a server at port 80
File webFile; // the web page file on the SD card
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0; // index into HTTP_req buffer
unsigned char LED_state[4] = {0}; // stores the states of the LEDs
unsigned char switch_state[4] = {0}; // stores the states of the switches
void setup()
{
delay(2000); // gib dem Controller Zeit für den Upload
pinMode(IN_dataPin, INPUT);
pinMode(IN_loadPin, OUTPUT);
pinMode(IN_clockPin, OUTPUT);
pinMode(OUT_latchPin, OUTPUT);
pinMode(OUT_clockPin, OUTPUT);
pinMode(OUT_dataPin, OUTPUT);
digitalWrite(IN_dataPin, LOW); // Pullups abschalten
digitalWrite(OUT_clockPin, LOW);
digitalWrite(IN_clockPin, LOW);
digitalWrite(IN_loadPin, LOW);
digitalWrite(OUT_latchPin, LOW);
digitalWrite(OUT_dataPin, LOW);
pinMode(8,OUTPUT);
pinMode(9,OUTPUT);
digitalWrite(8,HIGH);
digitalWrite(9,HIGH);
int i;
// disable Ethernet chip
pinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(9600); // for debugging
// initialize SD card
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for web-io.htm file
if (!SD.exists("web-io.htm")) {
Serial.println("ERROR - Can't find web-io.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found web-io.htm file.");
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
Beispiel_0();
Beispiel_1();
Beispiel_2();
Beispiel_3();
clr_Outputs();
}
void loop()
{
EthernetClient client = server.available(); // try to get client
if (client) { // got client?
boolean currentLineIsBlank = true;
while (client.connected()) {
digitalWrite(8,LOW);
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from client
// limit the size of the stored received HTTP request
// buffer first part of HTTP request in HTTP_req array (string)
// leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
if (req_index < (REQ_BUF_SZ - 1)) {
HTTP_req[req_index] = c; // save HTTP request character
req_index++;
}
// last line of client request is blank and ends with \n
// respond to client only after last line received
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
// remainder of header follows below, depending on if
// web page or XML page is requested
// Ajax request - send XML file
if (StrContains(HTTP_req, "ajax_inputs")) {
// send rest of HTTP header
Serial.print("ajax_inputs");
client.println("Content-Type: text/xml");
client.println("Connection: keep-alive");
client.println();
SetLEDs();
// send XML file containing input states
XML_response(client);
}
else { // web page request
// send rest of HTTP header
Serial.print("text/html");
client.println("Content-Type: text/html");
client.println("Connection: keep-alive");
client.println();
// send web page
webFile = SD.open("web-io.htm"); // open web page file
if (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
}
// display received HTTP request on serial port
Serial.print(HTTP_req);
// reset buffer index and all buffer elements to 0
req_index = 0;
StrClear(HTTP_req, REQ_BUF_SZ);
break;
}
// every line of text received from the client ends with \r\n
if (c == '\n') {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != '\r') {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())
delay(5); // give the web browser time to receive the data
client.stop(); // close the connection
digitalWrite(8,HIGH);
} // end if (client)
}
// checks if received HTTP request is switching on/off LEDs
// also saves the state of the LEDs
void SetLEDs(void)
{
char str_on[12] = {0};
char str_off[12] = {0};
unsigned char i;
unsigned int j;
int LED_num = 0;
for (i = 0; i < 4; i++) {
for (j = 1; j <= 0x80; j <<= 1) {
sprintf(str_on, "LED%d=%d", LED_num, 1);
sprintf(str_off, "LED%d=%d", LED_num, 0);
if (StrContains(HTTP_req, str_on)) {
LED_state[i] |= (unsigned char)j; // save LED state
bitSet(Outputs,LED_num);
shiftOut32(Outputs);
Serial.println("ON");
}
else if (StrContains(HTTP_req, str_off)) {
LED_state[i] &= (unsigned char)(~j); // save LED state
bitClear(Outputs,LED_num);
shiftOut32(Outputs);
}
LED_num++;
}
}
}
// send the XML file with analog values, switch status
// and LED status
void XML_response(EthernetClient cl)
{
unsigned char i;
unsigned int j;
unsigned analog_val;
cl.print("<?xml version = "1.0" ?>");
cl.print("<inputs>");
for (i = 0; i < 4; i++) {
for (j = 1; j <= 0x80; j <<= 1) {
cl.print("<LED>");
if ((unsigned char)LED_state[i] & j) {
cl.print("checked");
}
else {
cl.print("unchecked");
}
cl.println("</LED>");
}
}
shiftIn32();
for (i = 0; i < 4; i++) {
for (j = 1; j <= 0x80; j <<= 1) {
cl.print("<switches>");
if ((unsigned char)Input[i] & j) {
cl.print("on");
}
else {
cl.print("off");
}
cl.println("</switches>");
}
}
cl.print("</inputs>");
}
// sets every element of str to 0 (clears array)
void StrClear(char *str, char length)
{
for (int i = 0; i < length; i++) {
str[i] = 0;
}
}
// searches for the string sfind in the string str
// returns 1 if string found
// returns 0 if string not found
char StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
return 0;
}
while (index < len) {
if (str[index] == sfind[found]) {
found++;
if (strlen(sfind) == found) {
return 1;
}
}
else {
found = 0;
}
index++;
}
return 0;
}
//-----------------------------------------------------------------------------------------------------------------
void Beispiel_0() // - Einlesen vom SHIFT-IN Shield, Ausgabe auf SHIFT-OUT Shield
//-----------------------------------------------------------------------------------------------------------------
{
clr_Outputs(); // alle Ausgänge aus
shiftIn32();
Outputs = Inputs; // von einem SHIFT-IN Shield lesen, ausgeben auf einem SHIFT-OUT Shield
shiftOut32(Outputs);
Serial.println(Inputs); // Ausgabe der Eingänge als Zahl und als Bitmuster auf dem Seriellen Monitor
for( uint8_t i = 0; i<32; i++ )
{
Serial.print(Input[i]);
Serial.print(" ");
}
Serial.println();
delay(2000);
}
//-----------------------------------------------------------------------------------------------------------------
void Beispiel_1() // - Bitmuster Übergabe an Shift-Routine
//-----------------------------------------------------------------------------------------------------------------
{
clr_Outputs(); // alle Ausgänge aus
Outputs = 0x55555555; // Bitmuster in hexadezimal
shiftOut32(Outputs);
delay(500);
}
//-----------------------------------------------------------------------------------------------------------------
void Beispiel_2() // - Direkte Bitmanipulation der Ausgänge
//-----------------------------------------------------------------------------------------------------------------
{
clr_Outputs(); // alle Ausgänge aus
bitSet(Outputs,5);
bitSet(Outputs,11);
bitClear(Outputs,0);
shiftOut32(Outputs);
delay(500);
}
//-----------------------------------------------------------------------------------------------------------------
void Beispiel_3() // - Die Ausgänge sind in dem Array Output[0-31] und werden der Shift Routine übergeben
//-----------------------------------------------------------------------------------------------------------------
{
clr_Outputs(); // alle Ausgänge aus
Output[0] = 1;
Output[1] = 1;
Output[2] = HIGH;
Output[3] = 1;
Output[7] = 1;
Output[5] = LOW;
for( uint8_t i = 0; i<32; i++ )
{
if (Output[i] == 1)
{
bitSet(Outputs,i);
}
if (Output[i] == 0)
{
bitClear(Outputs,i);
}
}
shiftOut32(Outputs);
delay(500);
}
//-----------------------------------------------------------------------------------------------------------------
void set_Outputs() // - Bitmuster Übergabe an Shift-Routine
//-----------------------------------------------------------------------------------------------------------------
{
Outputs = 0xFFFFFFFF; // alle Ausgänge aus (LOW)
shiftOut32(Outputs);
}
//-----------------------------------------------------------------------------------------------------------------
void clr_Outputs() // - Bitmuster Übergabe an Shift-Routine
//-----------------------------------------------------------------------------------------------------------------
{
Outputs = 0x00000000; // alle Ausgänge aus (LOW)
shiftOut32(Outputs);
}
//-----------------------------------------------------------------------------------------------------------------
// 32 Bit ShiftOut Routine für 4x 74HTC595 - Hauptroutine SHIFT-OUT Shield, kopiere diese in dein Listing!
//-----------------------------------------------------------------------------------------------------------------
void shiftOut32(uint32_t val)
{
byte i;
byte i1;
byte Sbyte;
byte shiftNo;
digitalWrite(OUT_latchPin, LOW); // Latch-Output disablen, während übertragen wird
Sbyte = val;
for (i1 = 0; i1 < 4; i1++)
{
for (i = 0; i < 8; i++)
{
digitalWrite(OUT_dataPin, !!(Sbyte & (1 << i)));
digitalWrite(OUT_clockPin, HIGH);
digitalWrite(OUT_clockPin, LOW);
}
shiftNo += 8;
Sbyte = val >> shiftNo;
}
digitalWrite(OUT_latchPin, HIGH); // Latch-Output enablen, nach der Übertragung
digitalWrite(OUT_clockPin, LOW);
}
//-----------------------------------------------------------------------------------------------------------------
// 32 Bit ShiftIn Routine für 4x 74HC165 - Hauptroutine SHIFT-IN Shield, kopiere diese in dein Listing!
//-----------------------------------------------------------------------------------------------------------------
uint32_t shiftIn32( void )
{
digitalWrite(IN_loadPin, LOW);
digitalWrite(IN_loadPin, HIGH);
for( uint8_t i = 0; i<32; i++ )
{
Inputs >>= 1;
if( digitalRead(IN_dataPin))
{
Inputs |= 0x80000000;
Input[i] = 1;
}
else
{
Input[i] = 0;
}
digitalWrite(IN_clockPin, HIGH);
digitalWrite(IN_clockPin, LOW);
}
return Inputs;
}
//-----------------------------------------------------------------------------------------------------------------
Alles anzeigen
und hier der html code:
<!DOCTYPE html>
<html>
<head>
<title>mega-hz Arduino IN/OUT WEB-Server</title>
<script>
strLED = "";
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 - contains LED states
// ----------------------------------------------------------------------------------------------------------
var re;
var num_LEDs;
var i;
var ledstr = "";
var ledstr2 = "";
var ri;
var num_SWITCHEs;
var switchstr = "";
// ----------------------------------------------------------------------------------------------------------
re = this.responseXML.getElementsByTagName('LED');
num_LEDs = re.length;
for (i = 0; i < num_LEDs; i++) {
ledstr = "LED" + (i);
if (re[i].childNodes[0].nodeValue == "checked") {
document.getElementsByName(ledstr)[0].checked = true;
}
else {
document.getElementsByName(ledstr)[0].checked = false;
}
}
// ----------------------------------------------------------------------------------------------------------
re = this.responseXML.getElementsByTagName('switch');
num_SWITCHEs = re.length;
for (i = 0; i < SWITCHEs; i++) {
switchstr = "SWITCH" + (i);
if (re[i].childNodes[0].nodeValue == "checked") {
document.getElementsByName(switchstr)[0].checked = true;
}
else {
document.getElementsByName(switchstr)[0].checked = false;
}
}
// ----------------------------------------------------------------------------------------------------------
}
}
}
}
// ----------------------------------------------------------------------------------------------------------
// send HTTP GET request with LEDs to switch on/off if any
request.open("GET", "ajax_inputs" + strLED + nocache, true);
request.send(null);
setTimeout('GetArduinoIO()', 1000);
strLED = "";
}
// ----------------------------------------------------------------------------------------------------------
// service LEDs when checkbox checked/unchecked
function GetCheck(led_num_str, cb)
{
if (cb.checked) {
strLED += ("&" + led_num_str + "=1");
}
else {
strLED += ("&" + led_num_str + "=0");
}
}
// ----------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------------------
</script>
<style>
.IO1_box {
float: left;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 100px;
}
.IO_box {
float: left;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 10px 0 10px;
width: 220px;
height: 500px;
}
.out_box {
float: left;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 2px 0 2px;
min-width: 180px;
}
input {
margin: 10px;
}
input {
vertical-align: -3px;
}
h1 {
font-size: 120%;
color: blue;
margin: 0 0 10px 0;
}
h2 {
font-size: 85%;
color: #5734E6;
margin: 5px 0 5px 0;
}
p, form, button {
font-size: 80%;
color: #252525;
}
.small_text {
font-size: 70%;
color: #737373;
}
</style>
</head>
<body onload="GetArduinoIO()">
<h1>mega-hz Arduino </h1>
<h1>IN/OUT WEB-Server</h1>
<div class="out_box">
<h2>SHIFT-OUT Outputs</h2>
<form class="check_LEDs" name="LED_form1">
<input type="checkbox" name="LED0" value="0" onclick="GetCheck('LED0', this)" />LED 0
<input type="checkbox" name="LED16" value="0" onclick="GetCheck('LED16', this)" />LED 16<br />
<input type="checkbox" name="LED1" value="0" onclick="GetCheck('LED1', this)" />LED 1
<input type="checkbox" name="LED17" value="0" onclick="GetCheck('LED17', this)" />LED 17<br />
<input type="checkbox" name="LED2" value="0" onclick="GetCheck('LED2', this)" />LED 2
<input type="checkbox" name="LED18" value="0" onclick="GetCheck('LED18', this)" />LED 18<br />
<input type="checkbox" name="LED3" value="0" onclick="GetCheck('LED3', this)" />LED 3
<input type="checkbox" name="LED19" value="0" onclick="GetCheck('LED19', this)" />LED 19<br />
<input type="checkbox" name="LED4" value="0" onclick="GetCheck('LED4', this)" />LED 4
<input type="checkbox" name="LED20" value="0" onclick="GetCheck('LED20', this)" />LED 20<br />
<input type="checkbox" name="LED5" value="0" onclick="GetCheck('LED5', this)" />LED 5
<input type="checkbox" name="LED21" value="0" onclick="GetCheck('LED21', this)" />LED 21<br />
<input type="checkbox" name="LED6" value="0" onclick="GetCheck('LED6', this)" />LED 6
<input type="checkbox" name="LED22" value="0" onclick="GetCheck('LED22', this)" />LED 22<br />
<input type="checkbox" name="LED7" value="0" onclick="GetCheck('LED7', this)" />LED 7
<input type="checkbox" name="LED23" value="0" onclick="GetCheck('LED23', this)" />LED 23<br />
<input type="checkbox" name="LED8" value="0" onclick="GetCheck('LED8', this)" />LED 8
<input type="checkbox" name="LED24" value="0" onclick="GetCheck('LED24', this)" />LED 24<br />
<input type="checkbox" name="LED9" value="0" onclick="GetCheck('LED9', this)" />LED 9
<input type="checkbox" name="LED25" value="0" onclick="GetCheck('LED25', this)" />LED 25<br />
<input type="checkbox" name="LED10" value="0" onclick="GetCheck('LED10', this)" />LED 10
<input type="checkbox" name="LED26" value="0" onclick="GetCheck('LED26', this)" />LED 26<br />
<input type="checkbox" name="LED11" value="0" onclick="GetCheck('LED11', this)" />LED 11
<input type="checkbox" name="LED27" value="0" onclick="GetCheck('LED27', this)" />LED 27<br />
<input type="checkbox" name="LED12" value="0" onclick="GetCheck('LED12', this)" />LED 12
<input type="checkbox" name="LED28" value="0" onclick="GetCheck('LED28', this)" />LED 28<br />
<input type="checkbox" name="LED13" value="0" onclick="GetCheck('LED13', this)" />LED 13
<input type="checkbox" name="LED29" value="0" onclick="GetCheck('LED29', this)" />LED 29<br />
<input type="checkbox" name="LED14" value="0" onclick="GetCheck('LED14', this)" />LED 14
<input type="checkbox" name="LED30" value="0" onclick="GetCheck('LED30', this)" />LED 30<br />
<input type="checkbox" name="LED15" value="0" onclick="GetCheck('LED15', this)" />LED 15
<input type="checkbox" name="LED31" value="0" onclick="GetCheck('LED31', this)" />LED 31<br />
</form>
</div>
</body>
</html>
Alles anzeigen
in Sachen html usw. bin ich kein Profi, würde mich über Hilfe sehr freuen.
Wolfram.
