Arduino IO-Webserver

mega-hz · 15. November 2016

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:

C

/*--------------------------------------------------------------
  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:

HTML

<!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.

mega-hz · 16. November 2016

ich habe es hinbekommen!

schaut mal:

http://mega-hz.dnshome.de:85/

Code

....

 input[type="checkbox"] {
 display:none;
 }
 input[type="checkbox"] + label span {
 display:inline-block;
 width:20px;
 height:20px;
 margin:-1px 2px 0 0;
 vertical-align:middle;
 background:url(http://www.mega-hz.de/icons/button-off.png) left top no-repeat;
 cursor:pointer;
 }
 input[type="checkbox"]:checked + label span {
 background:url(http://www.mega-hz.de/icons/button-on.png) left top no-repeat;
 }
	</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"  id="LED0" value="0" onclick="GetCheck('LED0', this)" />
 <label for="LED0"><span></span>LED&nbsp;&nbsp;&nbsp;0</label>
            	<input type="checkbox" name="LED16" id="LED16" value="0" onclick="GetCheck('LED16', this)" />
 <label for="LED16"><span></span>LED 16</label><br />
            	<input type="checkbox" name="LED1"  id="LED1" value="0" onclick="GetCheck('LED1', this)" />
 <label for="LED1"><span></span>LED&nbsp;&nbsp;&nbsp;1</label>
            	<input type="checkbox" name="LED17" id="LED17" value="0" onclick="GetCheck('LED17', this)" />
 <label for="LED17"><span></span>LED 17</label><br />
            	<input type="checkbox" name="LED2"  id="LED2" value="0" onclick="GetCheck('LED2', this)" />
 <label for="LED2"><span></span>LED&nbsp;&nbsp;&nbsp;2</label>
            	<input type="checkbox" name="LED18" id="LED18" value="0" onclick="GetCheck('LED18', this)" />
 <label for="LED18"><span></span>LED 18</label><br />
            	<input type="checkbox" name="LED3"  id="LED3" value="0" onclick="GetCheck('LED3', this)" />
 <label for="LED3"><span></span>LED&nbsp;&nbsp;&nbsp;3</label>
            	<input type="checkbox" name="LED19" id="LED19" value="0" onclick="GetCheck('LED19', this)" />
 <label for="LED19"><span></span>LED 19</label><br /> 
            	<input type="checkbox" name="LED4"  id="LED4" value="0" onclick="GetCheck('LED4', this)" />
 <label for="LED4"><span></span>LED&nbsp;&nbsp;&nbsp;4</label>
            	<input type="checkbox" name="LED20" id="LED20" value="0" onclick="GetCheck('LED20', this)" />
 <label for="LED20"><span></span>LED 20</label><br />
            	<input type="checkbox" name="LED5"  id="LED5" value="0" onclick="GetCheck('LED5', this)" />
 <label for="LED5"><span></span>LED&nbsp;&nbsp;&nbsp;5</label>
            	<input type="checkbox" name="LED21" id="LED21" value="0" onclick="GetCheck('LED21', this)" />
 <label for="LED21"><span></span>LED 21</label><br />
            	<input type="checkbox" name="LED6"  id="LED6" value="0" onclick="GetCheck('LED6', this)" />
 <label for="LED6"><span></span>LED&nbsp;&nbsp;&nbsp;6</label>
            	<input type="checkbox" name="LED22" id="LED22" value="0" onclick="GetCheck('LED22', this)" />
 <label for="LED22"><span></span>LED 22</label><br />
            	<input type="checkbox" name="LED7"  id="LED7" value="0" onclick="GetCheck('LED7', this)" />
 <label for="LED7"><span></span>LED&nbsp;&nbsp;&nbsp;7</label>
            	<input type="checkbox" name="LED23" id="LED23" value="0" onclick="GetCheck('LED23', this)" />
 <label for="LED23"><span></span>LED 23</label><br />
            	<input type="checkbox" name="LED8"  id="LED8" value="0" onclick="GetCheck('LED8', this)" />
 <label for="LED8"><span></span>LED&nbsp;&nbsp;&nbsp;8</label>
            	<input type="checkbox" name="LED24" id="LED24" value="0" onclick="GetCheck('LED24', this)" />
 <label for="LED24"><span></span>LED 24</label><br />
            	<input type="checkbox" name="LED9"  id="LED9" value="0" onclick="GetCheck('LED9', this)" />
 <label for="LED9"><span></span>LED&nbsp;&nbsp;&nbsp;9</label>
            	<input type="checkbox" name="LED25" id="LED25" value="0" onclick="GetCheck('LED25', this)" />
 <label for="LED25"><span></span>LED 25</label><br />
            	<input type="checkbox" name="LED10"  id="LED10" value="0" onclick="GetCheck('LED10', this)" />
 <label for="LED10"><span></span>LED 10</label>
            	<input type="checkbox" name="LED26" id="LED26" value="0" onclick="GetCheck('LED26', this)" />
 <label for="LED26"><span></span>LED 26</label><br />
            	<input type="checkbox" name="LED11"  id="LED11" value="0" onclick="GetCheck('LED11', this)" />
 <label for="LED11"><span></span>LED 11</label>
            	<input type="checkbox" name="LED27" id="LED27" value="0" onclick="GetCheck('LED27', this)" />
 <label for="LED27"><span></span>LED 27</label><br />
            	<input type="checkbox" name="LED12"  id="LED12" value="0" onclick="GetCheck('LED12', this)" />
 <label for="LED12"><span></span>LED 12</label>
            	<input type="checkbox" name="LED28" id="LED28" value="0" onclick="GetCheck('LED28', this)" />
 <label for="LED28"><span></span>LED 28</label><br />
            	<input type="checkbox" name="LED13"  id="LED13" value="0" onclick="GetCheck('LED13', this)" />
 <label for="LED13"><span></span>LED 13</label>
            	<input type="checkbox" name="LED29" id="LED29" value="0" onclick="GetCheck('LED29', this)" />
 <label for="LED29"><span></span>LED 29</label><br />
            	<input type="checkbox" name="LED14"  id="LED14" value="0" onclick="GetCheck('LED14', this)" />
 <label for="LED14"><span></span>LED 14</label>
            	<input type="checkbox" name="LED30" id="LED30" value="0" onclick="GetCheck('LED30', this)" />
 <label for="LED30"><span></span>LED 30</label><br />
            	<input type="checkbox" name="LED15"  id="LED15" value="0" onclick="GetCheck('LED15', this)" />
 <label for="LED15"><span></span>LED 15</label>
            	<input type="checkbox" name="LED31" id="LED31" value="0" onclick="GetCheck('LED31', this)" />
 <label for="LED31"><span></span>LED 31</label><br />
        	</form>
    	</div>
 </body>
</html>

Alles anzeigen

sicher kann man den html code kürzer hinbekommen, mit ner for-schleife?
wie macht man das, kann mir da jemand helfen?

mega-hz · 21. November 2016

sicher kann man den html code kürzer hinbekommen, mit ner for-schleife?

wie macht man das, kann mir da jemand helfen?

Sempervivum · 21. November 2016

Genau, das ist sehr zu empfehlen. Das Formular zunächst leer lassen, die Bezeichnungen in einem Array ablegen und das HTML des Formulars in einer Schleife generieren:

Code

<form id="myform" class="check_LEDs" name="LED_form1">        </form>
        <script>
            var leds = ["LED0", "LED1", "LED2"]; // usw.
            html = "";
            for (var i = 0; i < leds.length; i++) {
                html += '<input type="checkbox" name="' + leds[i] + ' " id="' + leds[i] + '" value="0" onclick="GetCheck(\'' + leds[i] + '\', this)">';
                html += '<label for="' + leds[i] + '"><span></span>' + leds[i].replace("LED", "LED&nbsp;&nbsp;&nbsp;") + '</label>';
            }             document.getElementById("myform").innerHTML = html; </script>

mega-hz · 21. November 2016

Wow, vielen Dank, oh mann, DAS hätte ich nie so hinbekommen, da fehlt einfach noch die Erfahrung...

Ich habe das script nun so angepasst, daß die Buttons wieder 2 spalting angezeigt werden.
Allerdings sind die "LEDs" <10 nun etwas daneben.
Habe Versucht in dem
var leds = ["LED0", "LED1" die Namen mit LED00, LED01 usw. zu ersetzen, dann werden aber nur LED 10-31 erkannt und gesetzt.
Da müsste noch eine If<10 irgendwo rein, oder gibt es passende formatierungsbefehle dafür?

Gruß,
Wolfram

Sempervivum · 21. November 2016

Wie hast Du sie denn vorher ausgerichtet?
Ich empfehle, es mit CSS zu machen, indem Du den Labels eine feste Breite gibst:

CSS

#myform label {                display: inline-block;
                width: 65px;             }

mega-hz · 21. November 2016

Ich hatte vorher bei LED0-9 jeweils ein space mit eingefügt.
Mit dem CSS klappt das so nicht, da ja die Checkboxes als unsichtbar geschaltet sind, damit nur die Hintergrund Bilder (rot/grün) dargestellt werden.
da müsste entweder eine 0 vor die 1,2,3..9 oder ein space.
Oder den Text "LED" linksbündig und die nummer rechtsbündig... oder so...

Oder ne andere Idee, würde es großen Aufwand machen alles umzustellen als Buttons mit gleicher Größe in denen dann ein Background Image dargestellt wird und der Text dann zentriert?

Sempervivum · 21. November 2016

Zitat

Mit dem CSS klappt das so nicht

Hast Du das ausprobiert? Ich schon. In meinem Beispiel-CSS weise ich die Breite dem Label zu und das ist sichtbar.

Zitat

würde es großen Aufwand machen alles umzustellen als Buttons mit gleicher Größe

Das läuft genau auf meinen Vorschlag mit der festen Breite hinaus. Den Text kannst Du mit text-align;center; leicht zentrieren.

mega-hz · 21. November 2016

oh ja, tatsächlich, das klappt!

Ich hatte es weiter oben ausprobiert, nicht direkt kopiert!
Danke vielmals!

Dann werde ich mich nun mal um die 32 Eingänge kümmern, die sind teilweise schon mit eingebaut aber irgendwie verstehen sich webseite und arduino noch nicht so recht.
Ist aber nun eine gute Basis für die Homeautomatisierung die ich in Arbeit habe.

Ist die verarbeitungs Zeit zwischen "LED drücken" bis Status vom Arduino zurückgesendet wird zu langsam oder ist das normal so für nen Arduino mit 16Mhz?

Arduino IO-Webserver

Jetzt mitmachen!

Teilen