Ethernet-Shield und PHP

hi,

bitte nicht jquery mit php gleichsetzen.
jquery ist eine library, die auf dem CLIENT (PC, tablet, smartphone) viele dinge vereinfacht, unter anderem auch XMLHttpRequests, in den letzten jahren oft AJAX genannt.

php ist eine sprache, die SERVERSEITIG (PC) dinge auf eben diesem server ausführt.
was Dir an ajax gefällt, ist die möglichkeit, requests an den server zu senden, ohne daß danach die seite auf dem tablet neu aufgebaut wird (das ging schon, lange bevor jquery ein baby war, aber damit ist es halt einfacher). außerdem bietet jquery den einfachen aufbau von seiten, die speziell auf mobiles abgestimmt sind. aber auch das ist keine sache, die jquery benötigt, es wird nur einfacher.

auf jeden fall brauchst Du einen server, der reagiert und eventuell antwortet. das kann ein pc sein, auf dem ein webserver läuft und zb php installiert ist, oder eben einen arduino, der auch ein webserver sein kann (wie in dem beispiel von mir in diesem thread).
auf dem arduino läuft eine ähnliche sache wie php, nur hat das halt keinen namen.
Du mußt Dir wirklich darüber klar werden, was was ist und was wo läuft, sonst rennst Du immer wieder gegen unnötige wände.

gruß stefan

Jomelo:
Bei dem Beispiel muss man beachten das ich kein Ethernet-Shield verwende (zu teuer) sondern einen Ethernet-Seriell Wandler für 15 €

Ethernet Shield zu teuer? Guck mal bei eBay. Da gehen die ab 8EUR (inkl Versand) los. Ok - ist aus China, muss man ein bischen warten

Moin Stefan. Was php ist weiß ich da ich eine Wordpress Website habe. Wie ich jetzt verstanden habe, gibt es keine Möglichkeit Jquery ohne php zu nutzen? Webduino habe ich getestet, da wird ja der html code in dem Sketch geschrieben, was viel platz einnimmt. Deswegen will ich die datei auf meinem Webserver hochladen. Momentan benutze ich MAMP Pro. Wenn man Arduino als Webserver nutzen will, nimmt es schon 2/3 des Speichers ein ohne dass der Arduino was getan hat was ich ja eigentlich will. Gibt es eine Möglichkeit dass Arduino von der MicroSD den Sketch liest? Ich weiß garnicht wie man mit dem Arduino UNO vieles anstellen kann, der hat doch nur 32.256 Bytes?! Wie kann man da viele Funktionen einbauen? Allein das LCDMenu2 verbraucht schon 10k Bytes ohne jeglicher funktion.

rena:

Jomelo:
Bei dem Beispiel muss man beachten das ich kein Ethernet-Shield verwende (zu teuer) sondern einen Ethernet-Seriell Wandler für 15 €

Ethernet Shield zu teuer? Guck mal bei eBay. Da gehen die ab 8EUR (inkl Versand) los. Ok - ist aus China, muss man ein bischen warten

Meines hat 10€ gekostet inkl Versand aus Berlin. In 2 Tagen hatte ich es.

Wie macht man es mit Jquery, wenn ich eine Option gewählt habe, dass ich dann nicht auf Senden oder Set klicken muss? Dass es schon gleich gesendet wird wenn andere Option gewählt wurde. Kann jemand ein Beispiel geben?

Das ist doch das Beispiel hier:

#include "SPI.h"
#include "Ethernet.h"
#include "WebServer.h"

static uint8_t mac[6] = { 0x02, 0xAA, 0xBC, 0xCC, 0x11, 0x22 };
static uint8_t ip[4] = { 192, 168, 2, 153 };

#define PREFIX "/rgb"
WebServer webserver(PREFIX, 80);

int licht = 0;
const int latchPin = 5;
const int clockPin = 7;
const int dataPin = 6;
const int led13 = 13;
bool neu = true;
byte register1 = 0;
byte register2 = 0;
byte register3 = 0;
byte register4 = 0;

void rgbCmd(WebServer &server, WebServer::ConnectionType type, char *, bool)
{
  if (type == WebServer::POST)
  {
    bool repeat;
    char name[16], value[16];
    do
    {
      repeat = server.readPOSTparam(name, 16, value, 16);
      if (strcmp(name, "licht") == 0)
      {
        neu = true;
        licht = strtoul(value, NULL, 10);
      }
    } while (repeat);
    
    server.httpSeeOther(PREFIX);
    return;
  }

  server.httpSuccess();

  if (type == WebServer::GET) {
    P(message) = 
"<!DOCTYPE html><html>\n"
"<head>\n"
"<meta charset='utf-8'><meta name='apple-mobile-web-app-capable' content='yes' />\n"
"<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>\n"
"<meta name='viewport' content='width=device-width, user-scalable=no'>\n"
"<title>Webduino RGB</title>\n"
"<link rel='stylesheet'href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css' />\n"
"<script src='http://code.jquery.com/jquery-1.6.4.min.js'></script>\n"
"<script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js'></script>\n"
"<style> body, .ui-page { background: black; } .ui-body { padding-bottom: 1.5em; } div.ui-slider { width: 88%; } #halb, #alles, #tisch, #schreibtisch, #tv, #aus { display: block; margin: 10px; } </style>\n"
"<script>\n"
    "$(document).ready(function(){ \n"
		"$('#halb, #alles, #tisch, #schreibtisch, #tv, #aus').knopf; \n"
		"$('#halb, #alles, #tisch, #schreibtisch, #tv, #aus').bind('click', function(event, ui) { \n"
			"jQuery.ajaxSetup({timeout: 110}); \n"
			"var id = $(this).attr('id'); \n"
			"if (id == 'halb')          $.post('/rgb', { licht: '1' } ); \n"
			"if (id == 'alles')         $.post('/rgb', { licht: '2' } ); \n"
			"if (id == 'tisch')         $.post('/rgb', { licht: '3' } ); \n"
			"if (id == 'schreibtisch')  $.post('/rgb', { licht: '4' } ); \n"
			"if (id == 'tv')            $.post('/rgb', { licht: '5' } ); \n"
			"if (id == 'aus')           $.post('/rgb', { licht: '6' } ); \n"
		"}); \n"
	"});\n"
"</script>\n"
"</head>\n"
"<body>\n"
  "<div data-role='header' data-position='inline'><h1>Licht Wohnzimmer</h1></div>\n"
    "<div class='ui-body ui-body-a'>\n"
      "<input type='button' name='knopf' id='halb' value='Halb' />\n"
      "<input type='button' name='knopf' id='alles' value='Alles' />\n"
      "<input type='button' name='knopf' id='tisch' value='Tisch' />\n"
      "<input type='button' name='knopf' id='schreibtisch' value='Schreibtisch' />\n"
      "<input type='button' name='knopf' id='tv' value='TV' />\n"
      "<input type='button' name='knopf' id='aus' value='Aus' />\n"
    "</div>\n"
  "</body>\n"
"</html>\n";
server.printP(message);
  }
}

void setup() {
	pinMode(latchPin, OUTPUT);
	pinMode(dataPin, OUTPUT);  
	pinMode(clockPin, OUTPUT);
	pinMode(led13, OUTPUT);
	
	Ethernet.begin(mac, ip);	
	webserver.setDefaultCommand(&rgbCmd);	
	webserver.begin();
}

void loop()
{
  webserver.processConnection();
  if (neu == true) {
	if (licht == 1) {
	        digitalWrite(led13, HIGH);
	}
	if (licht == 2) {
	        digitalWrite(led13, LOW);
	}
	if (licht == 3) {
		register1 = 0b00000111;
		register2 = 0b00110101;
		register3 = 0b00000000;
		register4 = 0b00000001;
	}
	if (licht == 4) {
		register1 = 0b11000101;
		register2 = 0b00000000;
		register3 = 0b00000000;
		register4 = 0b00000001;
	}
	if (licht == 5) {
		register1 = 0b00010000;
		register2 = 0b00010110;
		register3 = 0b00010001;
		register4 = 0b00100100;
	}
	if (licht == 6) {
		register1 = 0b00000000;
		register2 = 0b00000000;
		register3 = 0b00000000;
		register4 = 0b00000000;
	}
	digitalWrite(latchPin, LOW);
	shiftOut(dataPin, clockPin, MSBFIRST, register4);
	shiftOut(dataPin, clockPin, MSBFIRST, register3);
	shiftOut(dataPin, clockPin, MSBFIRST, register2);
	shiftOut(dataPin, clockPin, MSBFIRST, register1);
	digitalWrite(latchPin, HIGH);
	
	neu = false;
  }
}

JQuery ist Javascript und kann somit auch ohne PHP verwendet werden. Dann kannst du allerdings nichts großes in Verbindung mit dem Ethernet-Shield machen.

Warum meinst du dass ich dann nichts großes dann machen kann?

In diesem Beispiel wird ja der html code in dem Sketch geschrieben, was ich nicht wollte. Entweder auf die SD karte oder auf dem Lokalen Server.

Du kannst mit Javascript/JQuery und ohne PHP deine Website optisch gestalten und viele neue Methoden verwenden.
So gibt es mithilfe von JQuery Funktionen um Controls wie Buttons, Eingabefelder oder Slider im mordernen Design zu erstellen.
Jetzt könntest du zum Beispiel nur mit Javascript einen Taschenrechner oder so erstellen, der eingegebene Werte mittels Javascript-Funktionen auswertet,
ohne dabei Werte per POST/GET zu übermitteln.
Nun gibt es aber auch die Möglichkeit mittels PHP oder eben JQuery Daten zu versenden, wobei du,
wenn ich es richtig verstanden habe, auf PHP verzichten möchtest, und nur JQuery zum Übertragen von Daten verwenden willst.
Den Code dafür habe ich ja bereits gepostet.
Du könntest den gesamten HTML-Code auf einen externen Server auslagern. Dann müsstest du allerdings PHP mit einbringen.
Der Sketch wäre folgender:

#include <SPI.h>
#include <Ethernet.h>

// MAC und IP Konfiguration
byte mac[] = { 0x90, 0xA2, 0xDA, 0x00, 0xEE, 0xF3 };
IPAddress ip(192,168,0,105);

// warten auf port 23
EthernetServer server(23);

byte returnvalue;

void setup() {
  //Ethernet initialisieren
  Ethernet.begin(mac, ip);
  // Server starten
  server.begin();
  // serielle konsole öffnen (debug)
  Serial.begin(9600);
  pinMode(7, OUTPUT);
}

void loop() 
{
// auf eine eingehende Verbindung warten
  EthernetClient client = server.available();
  
  if (client) 
  {
   
    byte pinnumber = client.read();
    byte pinvalue = client.read();
    byte returnvalue = 0;
    
    //Kommando auswerten
    
      if(pinnumber!=0)
      {
        if(pinvalue==0)
        {
          digitalWrite(pinnumber,LOW);
          returnvalue = 0;
        }
        else if(pinvalue==1)
        {
          digitalWrite(pinnumber,HIGH);
          returnvalue = 1;
        }
      }
       
    
    // rückantwort senden (1 byte) die "+48" sorgen dafür das der Wert 0 oder 1 
    // als Zeichen "0" oder "1" übertragen werden. 
    //das vereinfacht die verarbeitung in php.
    client.write(returnvalue+48);
    
    //übertragung erzwingen
    client.flush();
    
    //10ms delay damit daten sicher gesendet werden.
    delay(10);
    
    //wichtg! client verbindung beenden
    client.stop();
  }
}

Der HTML-Code der hier:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>LED an/aus</title>

		<?php
			$arduino_ip = "192.168.0.105";
			$arduino_port = "23";
			$Status = 0;

			function arduino_send($ip,$port,$command) {
				$res = fsockopen($ip,$port);
				if($res) {
					fwrite($res,$command);
					$ret =fread($res,10);
					return $ret;
				} else {
					echo "Fehler, kein kontakt.
Kommando konnte nicht abgesetzt werden";
				}
			}

			if(isset($_GET['submit']))
			{
				if(isset($_GET['LED_an'])) {
					$LED1 = $_GET['LED_an'];                    	  //PinNR.	an/aus
					$Status = arduino_send($arduino_ip,$arduino_port,chr(7).chr($LED1));
				}
				else
				{
					$LED1 = 0;		               					 //PinNR.	an/aus
					$Status = arduino_send($arduino_ip,$arduino_port,chr(7).chr($LED1));
				}
			}
		?>

	</head>
	<body>
		<h1><div align="center">LED an/aus</div></h1>
		<div align="center">
			<table border="0" bgcolor="#808080">
				<tr>
					<td><div align="center"><b>LED 1</b></div></td>
				</tr>
				<tr>
					<td>
						<form action="">
							<p><input type="checkbox" name="LED_an" value="1"><font size=
							"-1">LED an</font></p>
							<p></p>
							<div align="center"><input type="submit" name="submit" value=
							"Senden"></div><p>
						</form>
						
						<!--
						<?php if($Status==1){
						  echo "<div align='center'>&nbsp;LED an&nbsp;</div>\n";
						} else {
						  echo "<div align='center'>&nbsp;LED aus&nbsp;</div>\n";}
						?>
						-->
						
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Zweite Möglichkeit, wäre den HTML-Code auf die MicroSD zu verlegen.
Das hier wäre ein Beispielcode für den Arduino Mega:

#include <SD.h>
#include <Ethernet.h>
#include <SPI.h>

/************ ETHERNET STUFF ************/
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = { 192, 168, 0, 105};
EthernetServer server(80);

/************ SDCARD STUFF ************/
Sd2Card card;
SdVolume volume;
SdFile root;
SdFile file;

// store error strings in flash to save RAM
#define error(s) error_P(PSTR(s))

void error_P(const char* str) {
  PgmPrint("error: ");
  SerialPrintln_P(str);
  if (card.errorCode()) {
    PgmPrint("SD error: ");
    Serial.print(card.errorCode(), HEX);
    Serial.print(',');
    Serial.println(card.errorData(), HEX);
  }
  while(1);
}

void setup() {
  Serial.begin(9600);
 
  PgmPrint("Free RAM: ");
  Serial.println(FreeRam());
  
  // initialize the SD card at SPI_HALF_SPEED to avoid bus errors with
  // breadboards. use SPI_FULL_SPEED for better performance.
  pinMode(53, OUTPUT); // set the SS pin as an output (necessary!)
  digitalWrite(53, HIGH); // but turn off the W5100 chip!

  if (!card.init(SPI_HALF_SPEED, 4)) error("card.init failed!");
  
  // initialize a FAT volume
  if (!volume.init(&card)) error("vol.init failed!");

  PgmPrint("Volume is FAT");
  Serial.println(volume.fatType(),DEC);
  Serial.println();
  
  if (!root.openRoot(&volume)) error("openRoot failed");

  // list file in root with date and size
  PgmPrintln("Files found in root:");
  root.ls(LS_DATE | LS_SIZE);
  Serial.println();
  
  // Recursive list of all directories
  PgmPrintln("Files found in all dirs:");
  root.ls(LS_R);
  
  Serial.println();
  PgmPrintln("Done");
  
  // Debugging complete, we start the server!
  Ethernet.begin(mac, ip);
  server.begin();
}

void ListFiles(EthernetClient client, uint8_t flags) {
  // This code is just copied from SdFile.cpp in the SDFat library
  // and tweaked to print to the client output in html!
  dir_t p;
  
  root.rewind();
  client.println("<ul>");
  while (root.readDir(p) > 0) {
    // done if past last used entry
    if (p.name[0] == DIR_NAME_FREE) break;

    // skip deleted entry and entries for . and ..
    if (p.name[0] == DIR_NAME_DELETED || p.name[0] == '.') continue;

    // only list subdirectories and files
    if (!DIR_IS_FILE_OR_SUBDIR(&p)) continue;

    // print any indent spaces
    client.print("<li><a href=\"");
    for (uint8_t i = 0; i < 11; i++) {
      if (p.name[i] == ' ') continue;
      if (i == 8) {
        client.print('.');
      }
      client.print((char)p.name[i]);
    }
    client.print("\">");
    
    // print file name with possible blank fill
    for (uint8_t i = 0; i < 11; i++) {
      if (p.name[i] == ' ') continue;
      if (i == 8) {
        client.print('.');
      }
      client.print((char)p.name[i]);
    }
    
    client.print("</a>");
    
    if (DIR_IS_SUBDIR(&p)) {
      client.print('/');
    }

    // print modify date/time if requested
    if (flags & LS_DATE) {
       root.printFatDate(p.lastWriteDate);
       client.print(' ');
       root.printFatTime(p.lastWriteTime);
    }
    // print size if requested
    if (!DIR_IS_SUBDIR(&p) && (flags & LS_SIZE)) {
      client.print(' ');
      client.print(p.fileSize);
    }
    client.println("</li>");
  }
  client.println("</ul>");
}

// How big our line buffer should be. 100 is plenty!
#define BUFSIZ 100

void loop()
{
  char clientline[BUFSIZ];
  int index = 0;
  
  EthernetClient client = server.available();
  if (client) {
    // an http request ends with a blank line
    boolean current_line_is_blank = true;
    
    // reset the input buffer
    index = 0;
    
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        
        // If it isn't a new line, add the character to the buffer
        if (c != '\n' && c != '\r') {
          clientline[index] = c;
          index++;
          // are we too big for the buffer? start tossing out data
          if (index >= BUFSIZ)
            index = BUFSIZ -1;
          
          // continue to read more data!
          continue;
        }
        
        // got a \n or \r new line, which means the string is done
        clientline[index] = 0;
        
        // Print it out for debugging
        Serial.println(clientline);
        
        // Look for substring such as a request to get the root file
        if (strstr(clientline, "GET / ") != 0) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          
          // print all the files, use a helper to keep it clean
          client.println("<h2>Files:</h2>");
          ListFiles(client, LS_SIZE);
        } else if (strstr(clientline, "GET /") != 0) {
          // this time no space after the /, so a sub-file!
          char *filename;
          
          filename = clientline + 5; // look after the "GET /" (5 chars)
          // a little trick, look for the " HTTP/1.1" string and
          // turn the first character of the substring into a 0 to clear it out.
          (strstr(clientline, " HTTP"))[0] = 0;
          
          // print the file we want
          Serial.println(filename);

          if (! file.open(&root, filename, O_READ)) {
            client.println("HTTP/1.1 404 Not Found");
            client.println("Content-Type: text/html");
            client.println();
            client.println("<h2>File Not Found!</h2>");
            break;
          }
          
          Serial.println("Opened!");
                    
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/plain");
          client.println();
          
          int16_t c;
          while ((c = file.read()) > 0) {
              // uncomment the serial to debug (slow!)
              //Serial.print((char)c);
              client.print((char)c);
          }
          file.close();
        } else {
          // everything else is a 404
          client.println("HTTP/1.1 404 Not Found");
          client.println("Content-Type: text/html");
          client.println();
          client.println("<h2>File Not Found!</h2>");
        }
        break;
      }
    }
    // give the web browser time to receive the data
    delay(1);
    client.stop();
  }
}

Da haste ja immer noch ein Senden Button. Ich will ja so, wenn man da angeklickt hat, dass die LED sofort angeht ohne auf Senden klicken zu müssen.

Und ohne den Webserver wird der html code nur als Text angezeigt.

Guck doch bei dem Post hier drüber "Das ist doch das Beispiel hier: ..."
Da hast dus ohne Button.

hi,

bei meinem code (der eben auf einem arduino direkt gehostet ist) wird beim drücken des buttons geschalten. da gibt es kein eigenes "senden".

Wie macht man es mit Jquery, wenn ich eine Option gewählt habe, dass ich dann nicht auf Senden oder Set klicken muss? Dass es schon gleich gesendet wird wenn andere Option gewählt wurde. Kann jemand ein Beispiel geben?

oder meinst Du mit "option" auswahlfelder in html? oder radiobuttons?
in solchen fällen mußt Du in meiner seite dort ansetzen>

"$('#halb, #alles, #tisch, #schreibtisch, #tv, #aus').bind('click', function(event, ui)

an die buttons ist der event "click" angebunden, bei optionsfeldern egal welcher art mußt Du den event "change" verwenden. ob "click" auch bei option-tags funktioniert, kann ich nicht sagen...

gruß stefan

gruß stefan

Genau, dein Arduino ist der Server, ich will den Arduino möglichst frei halten für andere funktionen deswegen soll der html code auf dem Lokalen Server hin. Mit option meine ich radiobutton oder auswahlfelder.

Moin Stefan. Kannst du mir hier weiterhelfen?! Wenn man bei Licht den Schalter betätigt, passiert da noch nix weil die Abfrage nicht gesendet wurde. Dieses echo "checked" in php code da wo der Schalter erstellt ist, gibt ja nur ein Signal, da ist es egal ob checked oder change steht, richtig? In deinem Fall hast du so ein .click, hier ist es aber nicht. Wie kann man es hinkriegen dass die Abfrage ohne Bestätigung abgeschickt wird?

<!DOCTYPE html> 
<html>
<head>
<meta charset='utf-8'><meta name='apple-mobile-web-app-capable' content='yes' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width, user-scalable=no'>
<title>Haus-Steuerung</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<?php

$arduino_ip="192.168.178.177";
$arduino_port="23";

function arduino_send($ip,$port,$command) {
    $res = fsockopen($ip,$port);
    if($res) {
        fwrite($res,$command);
        $ret =fread($res,1);
        echo "arduino_send() returned = $ret 
\n";
        return $ret;
    } else {
        echo "Fehler, Kommando konnte nicht abgesetzt werden";
    }
}

if(isset($_POST['led1'])) {
    //übergebenen Wert speichern.
    $led1 = $_POST['led1'];
    //Wert an Arduino (Pin 9) senden
    arduino_send($arduino_ip,$arduino_port,chr(7).chr($led1));
} else {
    //else-Zweig wird aufgerufen, wenn keine Daten per POST übermittelt wurden.
   //daher daten vom Arduino (Pin 9) lesen und in $led1 speichern
    $led1 = arduino_send($arduino_ip,$arduino_port,chr(7).chr(0));
}

?>

</head> 
<body> 

<div data-role="page" id="page">
	<div data-role="header">
		<h1>Wohnzimmer</h1>
	</div>
  <div data-role="content">	
		<ul data-role="listview">
			<li><a href="#page2">Licht</a></li>
            <li><a href="#page3">Heizung</a></li>
			<li><a href="#page4">Rolladen</a></li>
		</ul>		
	</div>
	<div data-role="footer">
	  <h4>Küche</h4>
  </div>
</div>
<div data-role="page" id="page2">
  <div data-role="header">
    <h1>Licht</h1>
  </div>
      <div data-role="content"></div>
      <form method="POST" action="<?php echo $PHP_SELF ?>">
    <select name="led1" id="led1" data-role="slider">
      <option value="0">Aus</option><?php if($led1==0) echo "checked" ?>
      <option value="1">Ein</option><?php if($led1==1) echo "checked" ?>
    </select>
      <input type="submit" name="submit" value="Abschicken">
</form>
    </div>
 
</div>



<div data-role="page" id="page3">
	<div data-role="header">
		<h1>Heizung</h1>
	</div>
	<div data-role="content">	
		Inhalt		
	</div>
	<div data-role="footer">
		<h4>Fußzeile</h4>
	</div>
</div>

<div data-role="page" id="page4">
	<div data-role="header">
		<h1>Rolladen</h1>
	</div>
	<div data-role="content">
      <div data-role="fieldcontain">
        <label for="selectmenu" class="select">Optionen:</label>
        <select name="selectmenu" id="selectmenu">
          <option value="option1">OPTION 1</option>
          <option value="option2">OPTION 2</option>
          <option value="option3">OPTION 3</option>
        </select>
      </div>
    </div>
	<div data-role="fieldcontain">
	  <label for="slider">Wert:</label>
	  <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
  </div>
	<div data-role="fieldcontain">
	  <fieldset data-role="controlgroup">
	    <legend>OPTION</legend>
	    <input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
	    <label for="checkbox1_0">OPTION</label>
	    <input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
	    <label for="checkbox1_1">OPTION</label>
	    <input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="" />
	    <label for="checkbox1_2">OPTION</label>
      </fieldset>
  </div>
	<div data-role="fieldcontain">
	  <label for="flipswitch2">OPTION:</label>
	  <select name="flipswitch2" id="flipswitch2" data-role="slider">
	    <option value="off">Aus</option>
	    <option value="on">Ein</option>
      </select>
  </div>
    
	<div data-role="footer">
	  <h4>Fußzeile</h4>
	</div>
</div>


</body>

</html>

Sketch:

#include <SPI.h>
#include <Ethernet.h>

// MAC und IP Konfiguration
byte mac[] = { 0x90, 0xA2, 0xDA, 0x00, 0xEE, 0xF3 };
IPAddress ip(192,168,178,177);
IPAddress gateway(192,168,178, 1);
IPAddress subnet(255, 255, 255, 0);
// warten auf port 23
EthernetServer server(23);

byte returnvalue;

void setup() {
  //Ethernet initialisieren
    Ethernet.begin(mac, ip, gateway, subnet);
  // Server starten
  server.begin();
  // serielle konsole öffnen (debug)
 
  pinMode(7, OUTPUT);
  pinMode(6, OUTPUT);
  pinMode(5, OUTPUT);

}

void loop() 
{
// auf eine eingehende Verbindung warten
  EthernetClient client = server.available();
  
  if (client) 
  {
   
    byte pinnumber = client.read();
    byte pinvalue = client.read();
    byte returnvalue = 0;
    
    //Kommando auswerten
    
      if(pinnumber!=0)
      {
        if(pinvalue==0)
        {
          digitalWrite(pinnumber,LOW);
          returnvalue = 0;
        }
        else if(pinvalue==1)
        {
          digitalWrite(pinnumber,HIGH);
          returnvalue = 1;
        }
      }
       
    
    // rückantwort senden (1 byte) die "+48" sorgen dafür das der Wert 0 oder 1 
    // als Zeichen "0" oder "1" übertragen werden. 
    //das vereinfacht die verarbeitung in php.
    client.write(returnvalue+48);
    
    //übertragung erzwingen
    client.flush();
    
    //10ms delay damit daten sicher gesendet werden.
    delay(10);
    
    //wichtg! client verbindung beenden
    client.stop();
  }
}

hi,

so, jetzt wird beim starten des sliders beim licht eine javascript-function angestossen, die die überschrift ändert.
sollte sich auch mit php machen lassen, aber dazu fehlt mir der server.

gruß stefan

<!DOCTYPE html> 
<html>
<head>
<meta charset='utf-8'><meta name='apple-mobile-web-app-capable' content='yes' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width, user-scalable=no'>
<title>Haus-Steuerung</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<?php

$arduino_ip="192.168.178.177";
$arduino_port="23";

function arduino_send($ip,$port,$command) {
    $res = fsockopen($ip,$port);
    if($res) {
        fwrite($res,$command);
        $ret =fread($res,1);
        echo "arduino_send() returned = $ret 
\n";
        return $ret;
    } else {
        echo "Fehler, Kommando konnte nicht abgesetzt werden";
    }
}

if(isset($_POST['led1'])) {
    //übergebenen Wert speichern.
    $led1 = $_POST['led1'];
    //Wert an Arduino (Pin 9) senden
    arduino_send($arduino_ip,$arduino_port,chr(7).chr($led1));
} else {
    //else-Zweig wird aufgerufen, wenn keine Daten per POST übermittelt wurden.
   //daher daten vom Arduino (Pin 9) lesen und in $led1 speichern
    $led1 = arduino_send($arduino_ip,$arduino_port,chr(7).chr(0));
}

?>
<script type="text/javascript">
$().ready(function(){
	$('#slider1').bind({
	    slidestart  : function(event,ui) {
			document.getElementById("hh").innerHTML="www";				
		}
	
	}).slider();
});
</script>
</head> 
<body> 

<div data-role="page" id="page">
	<div data-role="header">
		<h1>Wohnzimmer</h1>
	</div>
  <div data-role="content">	
		<ul data-role="listview">
			<li><a href="#page2">Licht</a></li>
            <li><a href="#page3">Heizung</a></li>
			<li><a href="#page4">Rolladen</a></li>
		</ul>		
	</div>
	<div data-role="footer">
	 <h4>Küche</h4>
  </div>
</div>
<div data-role="page" id="page2" style="background-color='#555555'">
  <div data-role="header" id="hh">
    Licht
  </div>
    <div data-role="content"></div>
	    <select id="slider1" data-role="slider">
	      <option value="0">Aus</option>
	      <option value="1">Ein</option>
	    </select>
    </div>
 
</div>



<div data-role="page" id="page3">
	<div data-role="header">
		<h1>Heizung</h1>
	</div>
	<div data-role="content">	
		Inhalt		
	</div>
	<div data-role="footer">
		<h4>Fußzeile</h4>
	</div>
</div>

<div data-role="page" id="page4">
	<div data-role="header">
		<h1>Rolladen</h1>
	</div>
	<div data-role="content">
      <div data-role="fieldcontain">
        <label for="selectmenu" class="select">Optionen:</label>
        <select name="selectmenu" id="selectmenu">
          <option value="option1">OPTION 1</option>
          <option value="option2">OPTION 2</option>
          <option value="option3">OPTION 3</option>
        </select>
      </div>
    </div>
	<div data-role="fieldcontain">
	 <label for="slider">Wert:</label>
	 <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
  </div>
	<div data-role="fieldcontain">
	 <fieldset data-role="controlgroup">
	   <legend>OPTION</legend>
	   <input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
	   <label for="checkbox1_0">OPTION</label>
	   <input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
	   <label for="checkbox1_1">OPTION</label>
	   <input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="" />
	   <label for="checkbox1_2">OPTION</label>
      </fieldset>
  </div>
	<div data-role="fieldcontain">
	 <label for="flipswitch2">OPTION:</label>
	 <select name="flipswitch2" id="flipswitch2" data-role="slider">
	   <option value="off">Aus</option>
	   <option value="on">Ein</option>
      </select>
  </div>
    
	<div data-role="footer">
	 <h4>Fußzeile</h4>
	</div>
</div>


</body>

</html>

Hmm... dass es zusammen mit PHP arbeitet hab ich noch nicht hinbekommen, fals jemand ein Vorschlag hat, einfach Posten XD

Soooo.... fals es mal jemand gebrauchen kann....

<script type="text/javascript">

$(document).ready(function () {
    $("#slider1").change(function () {
        var led1 = $("#slider1").val();
        if (led1 == "1") {
			$("#slider1").submit();
        } else {
          $("#slider1").submit();
        }				
    });
});
</script>

So gehts auch...

$(document).ready(function () {
    $("#slider1").change(function () {
        $("#slider1").submit();
    });
});

Und die nächste Frage.... Wenn man da auf ON oder OFF umschaltet, ladet der ja die seite neu und springt wieder zur Startseite, was nicht der sinn der sache ist. Wenn man die Seite neu ladet, sind die Einstellungen nicht gespeichert. Jemand dazu ein Vorschlag?

Nathax:
Das ist doch das Beispiel hier:

#include "SPI.h"

#include "Ethernet.h"
#include "WebServer.h"

static uint8_t mac[6] = { 0x02, 0xAA, 0xBC, 0xCC, 0x11, 0x22 };
static uint8_t ip[4] = { 192, 168, 2, 153 };

#define PREFIX "/rgb"
WebServer webserver(PREFIX, 80);

int licht = 0;
const int latchPin = 5;
const int clockPin = 7;
const int dataPin = 6;
const int led13 = 13;
bool neu = true;
byte register1 = 0;
byte register2 = 0;
byte register3 = 0;
byte register4 = 0;

void rgbCmd(WebServer &server, WebServer::ConnectionType type, char *, bool)
{
  if (type == WebServer::POST)
  {
    bool repeat;
    char name[16], value[16];
    do
    {
      repeat = server.readPOSTparam(name, 16, value, 16);
      if (strcmp(name, "licht") == 0)
      {
        neu = true;
        licht = strtoul(value, NULL, 10);
      }
    } while (repeat);
   
    server.httpSeeOther(PREFIX);
    return;
  }

server.httpSuccess();

if (type == WebServer::GET) {
    P(message) =
"\n"
"\n"
"\n"
"\n"
"\n"
"Webduino RGB\n"
"<link rel='stylesheet'href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css' />\n"
"\n"
"\n"
" body, .ui-page { background: black; } .ui-body { padding-bottom: 1.5em; } div.ui-slider { width: 88%; } #halb, #alles, #tisch, #schreibtisch, #tv, #aus { display: block; margin: 10px; } \n"
"\n"
"\n"
"\n"
  "

Licht Wohnzimmer

\n"
    "
\n"
      "\n"
      "\n"
      "\n"
      "\n"
      "\n"
      "\n"
    "
\n"
  "\n"
"\n";
server.printP(message);
  }
}

void setup() {
pinMode(latchPin, OUTPUT);
pinMode(dataPin, OUTPUT); 
pinMode(clockPin, OUTPUT);
pinMode(led13, OUTPUT);

Ethernet.begin(mac, ip);	
webserver.setDefaultCommand(&rgbCmd);	
webserver.begin();

}

void loop()
{
  webserver.processConnection();
  if (neu == true) {
if (licht == 1) {
        digitalWrite(led13, HIGH);
}
if (licht == 2) {
        digitalWrite(led13, LOW);
}
if (licht == 3) {
register1 = 0b00000111;
register2 = 0b00110101;
register3 = 0b00000000;
register4 = 0b00000001;
}
if (licht == 4) {
register1 = 0b11000101;
register2 = 0b00000000;
register3 = 0b00000000;
register4 = 0b00000001;
}
if (licht == 5) {
register1 = 0b00010000;
register2 = 0b00010110;
register3 = 0b00010001;
register4 = 0b00100100;
}
if (licht == 6) {
register1 = 0b00000000;
register2 = 0b00000000;
register3 = 0b00000000;
register4 = 0b00000000;
}
digitalWrite(latchPin, LOW);
shiftOut(dataPin, clockPin, MSBFIRST, register4);
shiftOut(dataPin, clockPin, MSBFIRST, register3);
shiftOut(dataPin, clockPin, MSBFIRST, register2);
shiftOut(dataPin, clockPin, MSBFIRST, register1);
digitalWrite(latchPin, HIGH);

neu = false;

}
}

Hat es schon jemand hinbekommen das Ganze auf die SD-Karte auszulagern, mit den entsprechenden JS- und CSS-Dateien, so dass das auch noch ohne Internet funktioniert und dass auch noch POST-Anfragen gesendet werden wenn die Html-Datei von Karte geladen wird?

Daran scheitert es bei mir.
Sitze jetzt schon fast ne Woche an allen möglichen Kombinationen, bekomme es aber einfach nicht hin.
Entweder wird der Style nachgeladen, aber es wird nichts zum Arduino gesendet beim Drücken der Buttons,
oder der Style sieht nach "normalem" Html aus und es werden Anfragen gepostet...
oder eben.... "normales" Html und keine Anfragen. :frowning:

Bin langsam am Verzweifeln

http://forum.arduino.cc/index.php?topic=56928.15
Nimm hier das Beispiel * BlinkLed5_new.zip

skorpi08:
Blinkled - Help - Programming Questions - Arduino Forum
Nimm hier das Beispiel * BlinkLed5_new.zip

Kann es sein dass mit meinen Libs was nicht stimmt? :

core.a(wiring_digital.c.o):(.progmem.data+0x94): multiple definition of `digital_pin_to_bit_mask_PGM'
Pins_arduino\pins_arduino.c.o:(.progmem.data+0x94): first defined here
m:/hardware/arduino/arduino/hardware/tools/avr/bin/../lib/gcc/avr/4.3.3/../../../../avr/bin/ld.exe: Disabling relaxation: it will not work with multiple definitions
core.a(wiring_digital.c.o):(.progmem.data+0x4e): multiple definition of `digital_pin_to_port_PGM'
Pins_arduino\pins_arduino.c.o:(.progmem.data+0x4e): first defined here
core.a(wiring_digital.c.o):(.progmem.data+0x0): multiple definition of `port_to_mode_PGM'
Pins_arduino\pins_arduino.c.o:(.progmem.data+0x0): first defined here
core.a(wiring_digital.c.o):(.progmem.data+0x1a): multiple definition of `port_to_output_PGM'
Pins_arduino\pins_arduino.c.o:(.progmem.data+0x1a): first defined here
core.a(wiring_digital.c.o):(.progmem.data+0xda): multiple definition of `digital_pin_to_timer_PGM'
Pins_arduino\pins_arduino.c.o:(.progmem.data+0xda): first defined here
core.a(wiring_digital.c.o):(.progmem.data+0x34): multiple definition of `port_to_input_PGM'
Pins_arduino\pins_arduino.c.o:(.progmem.data+0x34): first defined here

[Nachtrag] Habs herausgefunden: Ich muss das "<pins_arduino.h>" durch "Arduino.h" ersetzen.[/Edit]