Guten Tag zusammen,

ich würde ebenfalls über das Netzwerk gehen. Dann wäre es möglich später auf andere Betriebssysteme oder Webseiten zu erweitern.
Dazu eignet sich die Steuerung über HTTP zu erledigen.
Also benötigt der Arduino ein Ethernet-Shield und eines der zahlreichen Beispiele hier aus dem Forum.
Die Android-Seite kann man z.B. mit diesem Tutorial.

Gruß,
trib

Hi zusammen,

dann mag ich nochmal schnell das Wort Gertboard in den Raum werfen
Das kann man an die GPIO Pins des Pi anschließen und hat einen ATMega mit einer Vielzahl von Pins zur Verfügung. Vielleicht ist das ja auch eine Option.

Gruß,
trib

Die Funktion die Matrix zu Importieren und zu Exportieren hat aktuell nichts mit dem Arduino zu tun. Sie dient einzig und allein dazu seine gerade kreierte Matrix samt Einstellungen persistent abzulegen
In .NET ist es dazu üblich auf eine XML-Struktur zu setzen, da das Framework einem quasi jegliche Arbeit abnimmt 

Wie gesagt, der Plan war erstmal ein vernünftiges Format zu erarbeiten bevor ich an einem für den Arduino lesbaren Export baue.
Ein Zweidimensionales Array würde ich nicht verwenden.  Das erzeugt nur unnötig mehr Daten. Ob ich nun Koordinaten mit gebe oder einen laufenden Index, macht letztendlich keinen Unterschied, da ich die Datei ohnehin Zeilenweise auslesen muss.
Wenn immer alle LED´s gespeichert werden, könnte ich dann sogar auf den Index verzichten.
(Je länger ich darüber nachdenke macht es nur Sinn alle LED´s zu exportieren. Für Reihenweise Färbungen o.ä. sollte man ohnehin lieber programmieren und nicht auf eine Textdatei setzen)

Optimaler weise sollten die Trennzeichen auch weise gewählt werden um diese auf dem Arduino vernünftig verarbeiten zu können. Z.B. statt einem Zeilenumbruch (2 Zeichen) nur ein ; zu verwenden oder so.
Also:
255,255,255;5,27,100;255,0,255;0,255,255*
wobei das ";" die Farben trennt und der "*" das Ende der Matrix beschreibt. Dann können auch mehrere Animationen in eine Datei abgelegt werden. Bei meiner 10x10 Matrix ist die Datei dann ~2KB groß bei einer 50x50 Matrix schon ~28KB.

Das Glediator-Programm sieht schonmal super aus. Da kann ich sicherlich einige Anregungen einholen. Da ich schon ein fertiges Programm für die Serielle Schnittstelle habe, werde ich es trotzdem integrieren. Schadet ja nicht ;-)

Hallo Helmuth,

danke für deine Antwort!

Ich würde mir viel mehr Interaktionsmöglichkeiten wünschen: Formeln eingeben und simulieren zum Beispiel. Momentan kann man ja "nur" aus Deinen fertigen Effekten auswählen, wenn ich das Recht verstehe.

Es liegt der Quellcode in Anhang offen, so dass jeder (Vorrausgesetzt er hat Visual Studio installiert) seine eigenen Effekte programmieren kann.
Dazu gibt es zahlreiche Hilfsklassen, so dass es auch für C# Fremde kein Problem darstellen sollte.
Die Funktionen SetPixel oder SetRange sind dabei sicherlich selbsterklärend.
Zwar hatte ich erst überlegt eine Möglichkeit zu schaffen, Code auch von außen verarbeiten zu lassen. Die Grundfunktionalitäten von Visual Studio sind aber so umfassend, dass ich die nicht alle nachprogrammieren wollte. (Syntax Highlighting, Intellisense, JustInTime Überprüfung, usw.)

Plasma- und Feuereffekte, Fraktale, Wobblingsachen, Filter und Ebenen, Formeln deren Parameter durch Formeln mit Parametern manipuliert werden...wo man halt immer was Neues sieht, Zellautomaten...

Finde ich auch gut! Es steckt ja erstmal alles in den Kinderschuhen. Ein paar Dinge habe ich auch schon für den Arduino fertig, aber noch nicht in die Anwendung übernommen. Wollte die nicht zu voll packen.

"Rohdatenexport" fehlt mir, also ein 3dimensionales Array mit den RGB Werten drin...

Kommt! Muss mir nur ein sinnvolles Format überlegen. Bzw. ihr helft mir eine schlanke Lösung zu erarbeiten.
Entweder exportiert man immer alles oder nur die LEDs die auch wirklich geändert werden. Das würde die Datei deutlich verkleinern. Bin da offen für Anregungen!

Was auch schick wäre: GIF-Import

Glaube das ist garnicht so kompliziert, da die Bilderumwandlung recht offen von mir programmiert wurde. Man müsste vorher nur die einzelnen Frames des Gifs auseinander nehmen.

Und dann können wir über die komplexen Inhalte mit unserer neuen Überblendfunktion drüberfahren, damit das alles butterweich wird, das wäre doch mal was.   (http://arduino.cc/forum/index.php/topic,151103.0.html)

Eine Art Ambiente-Beleuchtung hatte ich auch mal realisiert. Die änderte in einem vorgegebenen Interval die Farbe von einer zur anderen. Kann ich ebenfalls aus meinem Arduino-Projekt übernehmen. (Bzw. schaue ich mir mal eure Lösung genauer an)

Vielen Dank nochmal für dein Interesse!

[Reiter Actions:]

Guten Tag zusammen,

ich habe schon vor längerer Zeit mit dem Gedanken gespielt ein Programm zu entwickeln, welches mir am Computer hilft meine Animationen für den LED Coffee Table zu entwerfen.
Ziel sollte es sein, dass man einfach Algorithmen testen kann um diese dann auf seinen Arduino zu übertragen.

Der Versuch ein paar nette Animationen zu sammeln ist leider nicht so sehr erfolgreich gewesen  

Das Programm sieht wie folgt aus:


Reiter Actions:
Unter Demo können ein paar Animationen ausgewählt werden und per Klick auf den Start-Button aktiviert werden.
Das Interval beschreibt die Zeit zwischen jeder Aktualisierung.
Die Button daneben legen die verwendeten Vordergrund- oder Hintergrundfarben fest. Die Farbe, die für den Vordergrund verwendet wird, kann auch gleichzeitig per linker Maustaste auf die Matrix übertragen werden.


Reiter Setup:
Hier kann die Richtung der LED-Kette festgelegt werden. Das ist nötig, wenn man nicht per Koordinatensystem, sondern per Array, bzw. LED-Nummer die Farbe ändern möchte.
Weiterhin können die LED´s als Rechteck oder Kreis, 2 oder 3 Dimensional angezeigt werden. Label blendet die laufende Nummer der LED´s ein.
Größe und Abstand der LED´s ist selbsterklärend, denke ich.
Per Save & Load können die aktuellen Einstellungen und die angezeigte Matrix per XML exportiert & wieder importiert werden.
Image wandelt ein Bild um, Folder zeigt alle Bilder in einem Ordner nacheinander an. Dabei muss allerdings der Pixelflow auf UpperLeftToBottom stehen.

Reiter Info:
Zeigt die aktuelle Farbe und Transparenz zu der LED an, die sich gerade unter dem Mauszeiger befindet.

Im Anhang befindet sich weiterhin das Programm zum ausführen und der Quellcode der Anwendung (Visual Studio 2010 Projekt in C# ).
In dem Programmcode der Form LED Matrix ist allerhand Code für die Button, Laden und Speichern der Einstellungen, usw. Wichtig ist erstmal nur die Funktion private void Loop(). Diese kann verwendet werden um eigene Animationen zu programmieren. Die Grundlegenden Funktionen sind dort bereits zu Demonstrationszwecken enthalten:

Code:

           //All Pixel
            matrix.All(backgroundColor);
            DisplayMatrix();

            //First Pixel
            matrix.SetLed(0, foreColor);
            DisplayMatrix(1000); //1 Second Delay

            //Last Pixel by coordinates
            matrix.SetPixel(matrix.GridWidth - 1, matrix.GridHeight - 1, foreColor);
            DisplayMatrix();

            //Set PixelRange
            matrix.SetRange(3, 8, foreColor);
            DisplayMatrix();

            //Set Pixel Range by coordinates
            matrix.SetPixelRange(2, 3, 7, 8, foreColor);
            DisplayMatrix();

            //Draw a Circle
            matrix.DrawCircle(5, 4, 4, matrix.RandomColor());
            DisplayMatrix();
            //Fill this Circle
            matrix.FillCircle(5, 4, 4, matrix.RandomColor());
            DisplayMatrix();

            //Draw Rectangle
            matrix.DrawRect(1, 1, 8, 8, matrix.RandomColor());
            DisplayMatrix();

Die Funktionen sind an die Library von Bliptronics angelehnt. Das ermöglicht quasi eine 1:1 übernahme des Codes in die Arduino IDE.
Die Library habe ich für mich etwas angepasst und erweitert. Die stelle ich gerne auch nochmal zur Verfügung. Sicherlich kann man diese relativ einfach auch für andere Hersteller anpassen.

Geplant ist noch ein Protokoll um per Serieller Schnittstelle direkt mit dem Arduino zu kommunizieren und die LED´s live zu steuern.

Über etwas Feedback würde ich mich freuen

Gruß,
Thomas

Hello giladaya,

this really looks great. I was searching for some nice Matrix Animations and started a thread, which was not very succesful
LED Matrix - animation pattern.
I´ll try to port your code to my matrix and go on collecting some nice effects

Some time ago I wrote a .NET program which can demonstrate matix animations on a PC. Maybe I´ll release it to make it easier to create some new effects.

Greetings
Thomas

Hi,

dann würde ich einfach mal ein anderes Programm zum Vergleich nutzen. Unter Windows XP gibt es noch den Hyperterminal. Ansonsten ist der HHD Free Serial Port Monitor zu empfehlen.

Hallo Felix,

das klingt nach einem schönen Projekt!
Grundsätzlich ist das keine komplizierte Sache.

Nun habe ich folgende Fragen:
1. Was ist aus eurer Sicht ein sinnvoller Weg mein Ziel zu erreichen?
2. Kann man die serverseitigen Skripte auf dem Raspberry auch in Python schreiben und einbinden, da habe ich im Gegensatz zu php zumindest schon mal Fingerübungen gemacht.
3. Hat jemand ein Codebeispiel einer HTMLSeite (mit welcher Skriptsprache auch immer), die bei Klick auf einen Knopf einen Statusrequest/Befehl via Ethernet an einen Arduino schickt.
4. Wie stelle ich in meinem Szenario sicher, dass die Webseite ein Update erfährt und an den Client sendet, wenn sich ein anzuzeigender Wert ändert, ohne das ich vorher aktiv angefragt habe? Polling?
5. Die Kür wäre das Codebeispiel aus Punkt 3 mit jQuery Mobile, damit es auch noch hübsch aussieht 

• Das Sinnvollste ist imho ein Befehlsverzeichnis zu entwickeln, welches per GET oder POST an den Arduino gesendet und ausgewertet werden kann. Also z.B. die Art des Steuerungsgerätes festlegen: Schalter (Button) = B1, Sensoren = S3 oder andere Geräte mit Werten = O4.
  Dann wird einfach bei dem Befehl ?B4=1 der Button4 auf An gesetzt. ?S4 liefert den Wert von Sensor 4 zurück, usw.
• Dazu reicht erstmal vollkommen aus eine reine HTML-Seite mit einem Formular zu erstellen. Weitere Skripte nicht ausgeschlossen
• Anbei im Link (Funkschalter in Webserver einbinden) ist eigentlich alles erklärt, wie das Prinzip funktioniert und wie man z.B. Pins steuern kann. Das lässt sich leicht adaptieren und auf Befehle "trimmen"
• Das wirst du ohne Polling so nicht hinbekommen. Aber man kann die Webseite so designen, dass sich nur die entsprechenden Stellen aktualisieren müssen und nicht die gesamte Seite.
• Wenn das Konstrukt mit dem Befehlsverzeichnis steht, kannst du jedwede Art der Programmierung nutzen um die Haussteuerung zu nutzen. Android, IOS oder Windows Phone Apps wären ein Kinderspiel

Viel Erfolg!

@Trib: Meine Frage bezog sich auf das originale Posting, nicht auf Deinen Code. Unsere Posts haben sich nur überschnitten.

Dann nehme ich alles zurück und behaupte das Gegenteil 

Und wo ist der Code der ein Bild an den Client (Browser) liefert? Wenn Du einen Link auf der von Arduino gelieferten HTML-Seite anklickst, dann schickt der Browser wieder einen HTTP-Request an den Arduino mit der URI (Pfad aus dem Link) der verlinkten Datei. Dein Programm muss also auf ein "GET /IMAGE00.jpg" reagieren, die Datei öffnen und die entsprechenden Daten an den Browser schicken.
Zur Zeit reagiert Dein Programm vermutlich nur mit der einen Programmierten HTML-Seite auf alle ankommenden Requests.

Der Code liefert Dir jede Art von Datei zurück. Ob Bild, Text oder meinetwegen auch einer *.exe-Anwendung.
An folgender Stelle wird unterschieden ob es sich um eine HTML-Seite handelt und wenn nicht, wir die Datei direkt an den Browser zurück übermittelt. Genau wie Du ansprichst, wird geprüft ob noch was hinter dem GET kommt und entsprechend ausgelesen. Funktioniert bei mir problemlos!

Code:

if(strstr(clientline, "HTM") != 0 || strstr(clientline, "TML") != 0)
            client.println("Content-Type: text/html");         
          else
            client.println("Content-Type: text/plain");
          client.println();
         
          int16_t c;
          while ((c = file.read()) > 0)
          {
              client.print((char)c);
          }
          file.close();

Das setzen des Content-Type auf "text/plain" ist der Trick.

@Thombo84: Das habe ich aus diesem Tutorial. Damit ist es Problemlos möglich die SD-Karte und das Ethernet Modul anzusprechen.
Ansonsten müsstest Du mal schauen was die SD-Library noch so bietet, die Du eingebunden hast.

Code:

root = SD.open("/");

Hier initialisierst du ja die Karte und ziehst Dir die Dateiliste. Sicherlich gibt es auch eine ähnliche Funktion, wie das file.read was ich aus dem Tutorial nutze.

Hallo Thombo84,

du musst eine Unterscheidung machen was für eine Anfrage  an den Webserver gestellt wird und dann die Datei anstelle der Webseite zurückliefern.

Wenn ein GET ankommt ohne dass ein weiterer Befehl angehängt ist, so gebe ich die Dateiliste aus.
Klicke ich eine Datei an, so bekomme ich eine neuen Anfrage mit dem Dateinamen. Diesen kann ich abprüfen und sofern diese Datei existiert zurückgeben.
Dann habe ich noch einen Fall mehr eingebaut, der ist natürlich nicht unbedingt nötig. Und zwar kann ich auch eine Steuerung vornehmen in dem ich Befehle mitsende. Die werden mit einem GET? angekündigt.

Code:

// 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("<html><body bgcolor='#444444' text='#c0c0c0'>");
          client.println();
         
          // print all the files, use a helper to keep it clean
          client.println("<h2>Files:</h2>");
          ListFiles(client, LS_SIZE);
          client.println("<p><a href='INDEX.HTM'>zur&uuml;ck</a></p></body></html>");
        }
        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);
          // File couldn´t be opened
          if (! file.open(&root, filename, O_READ))
          {           
            //If it is an command, work with it
            if(filename[0] == '?')
            {
              //Function to control Pins, ect.
              ProcessInput(client, filename);
              break;
            }             
            else
            {
            // Print 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;           
          }
         
          //It really is a File
//          PgmPrint("Opened!");                   
          client.println("HTTP/1.1 200 OK");
         
          if(strstr(clientline, "HTM") != 0 || strstr(clientline, "TML") != 0)
            client.println("Content-Type: text/html");         
          else
            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>");
        }

Was ich darüber hinaus noch gemacht habe ist, dass ich unterscheide ob die Datei eine richtige Datei ist oder eine HTML-Seite. Dann kann man im Header den Content-Type setzen und die Seite wird direkt ausgegeben. Ansonsten sieht man nur den Quelltext. Funktioniert mit Bildern hervorragend!

Gruß,
trib

Hallo zusammen,

nach einigen Wochen mit testen und installieren habe ich nun die für mich optimale Lösung gefunden.

Zuerst sei doch gesagt: Vertraut keinesfalls euren Netzteilen! In jedem 2. Thread über den Pi wird angesprochen, dass sicherlich 80-90% aller Probleme mit der Stromversorgung zusammenhängen. Das kann ich nur bestätigen!
Weder ein HTC, Logitech oder iPhone Ladegerät reicht auf um dem Betrieb zu gewährleisten. Der Pi friert einfach ein oder Maus und/oder Tastatur verschwinden.

Installation: Nachdem ich wie oben angesprochen habe, ein paar Distributionen ausprobiert habe, bin ich bei Raspbian und XBMC hängen geblieben. Eines zum surfen, Arduino ansteuern, usw. und eines als Mediacenter.
Also muss ein Bootmenü her! Nach etwas Recherche habe ich Berryboot gefunden.
Man kopiert die Dateien einfach auf die formatierte SD-Karte, schiebt sie in den Pi und befolgt das Setup.
Es werden mehrere Distributionen angeboten, die direkt aus dem Netzt geladen werden können.
Raspbian & OpenElec (Ein auf den Raspberry optimiertes XBMC) ausgewählt und fertig!

Nun erscheint beim Start etwa 2 Sekunden lang ein Menü, welches man über die Tastatur auswählen kann.

Anfangs hatte ich ein paar Probleme, das mein Fernseher oft auf einen anderen Eingang geschaltet hat, wenn ich vorgespult habe. Also den Bluray-Player und den Raspberry getauscht und Problem gelöst.
Das hatte nebenbei noch den grandiosen Vorteil, dass die Anynet+ Verbindung des Samsungfernsehers (Heißt überall anders, ist eigentlich CES) eine Steuerung über das HDMI Kabel erlaubt.
Nun kann ich das komplette XBMC ohne Tastatur, nur über die Fernbedienung des TV´s steuern.

Bisher bin ich absolut zufrieden und denke schon darüber nach, mir einen weiteren zuzulegen. 
Auf dem Foto ist ein Amazon DVD-Brenner, der sofort erkannt wurde und unter Raspbian und OpenElec (nur lesend) funktioniert. Darüber ein 5 Port Switch und zu guter Letzt der Pi in einem transparenten Case.

[circuit99]

@ Trib: Ich finde da ich neu in der Materie bin noch keinen Ansatz für die Implementierung einer Steuerung. Kannst du mir helfen hierbei einen Ansatz zu finden?

Hi Tobias93,

wie circuit99 bereits schreibt, liegen die Grundlagen in HTML. Man definiert ein Formular, welches Daten per POST oder GET versenden kann. Damit baust du dir also den Button zum schalten und hinterlegst diesem einen Wert, um welchen Pin es sich handelt.
Der Trick besteht nun darin, dass dieses Formular dynamsich von Deinem Arduino erstellt wird und z.b. bei aktivierten Digitalpin einen Button mit "Aus" und bei deaktiviertem Pin mit "An" ausgibt.
Dein angefügtes Script zeigt zwar den Zustand der PINS, beinhaltet aber kein Formular zur Steuerung.
An dieser Stelle nochmal der Verweis zu circuit99´s Link.

Der nächste Punkt wäre dann im Arduino auf dieses WebFormular zu reagieren.
Dazu muss man den String auslesen, der an den Client übermittelt wird und entsprechend die Pins an oder aus schalten.

Der letzte von mir gepostete Link enthält eigentlich alle nötigen Informationen und auch fertigen Code.
Funkschalter in Webserver einbinden

Gruß
trib

Na klar können wir das, aber warum das Rad neu erfinden?  
Die Suchfunktion spuckt z.B. folgende Links aus:
    
Arduino Werte an Server übertragen
Webserver einen Korrekturwert übermitteln
WebServer mit Html-Seiten von der SD Karte
Wie kann man den Arduino am einfachsten über eine Oberfläche steuern???
Pin-Steuerung aus Webseite
uvm.

Je nach Anwendungszweck kannst du dort die beste Lösung herauspicken
Dein Ansatz gibt nur die Entsprechenden Stati der Pins aus und eine Steuerung ist noch garnicht implementiert.

Gruß,
trib

[HTML-File (Color.htm):]

While I was answering another Post, I´ve refered to this solution. I was shocked a little, how obsolet my post was 

So here is my current solution, how to create a Color-Picker, which constantly stays on the site and workes quite fast.
The JS-File is outsourced to possibly put it on a different webspace. It also can be re-included in the main page.

HTML-File (Color.htm):

Code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript" src="color.js"></script>
<title>Arduino Webserver 1.0 - Color</title>
</head>
<body bgcolor='#444444'  text="#c0c0c0">
<table border='0' width='480' cellpadding='5'>
<tr><td>
<br><hr/>
<h2><div align='center'><font color='#2076CD'>Arduino Webserver 1.0</font></div></h2>
<hr/><br>
<div align='left'><font face='Verdana' color='#FFFFFF'>Colorpicker</font></div>
<br>

<table border='1' width='460' cellpadding='5'>
<tr bgColor='#222222'>
<td align='center' bgcolor='#222222'>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="hidden" id="r" size="2" value="0"></td>
<script type="text/javascript">
for (i=0;i<=31;i++)
  document.write("<td bgcolor='#ff0000' height=40 width=10 onMouseOver='Slider(" + i + ",\"r\")' id='r" + i + "'></td>"); </script>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="hidden" id="g" size="2" value="0"></td>
<script type="text/javascript">
for (i=0;i<=31;i++)
  document.write("<td bgcolor='#00ff00' height=40 width=10 onMouseOver='Slider(" + i + ",\"g\")' id='g" + i + "'></td>");
</script>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="hidden" id="b" size="2" value="0"></td>
<script type="text/javascript">
for (i=0;i<=31;i++)
  document.write("<td bgcolor='#0000ff' height=40 width=10 onMouseOver='Slider(" + i + ",\"b\")' id='b" + i + "'></td>");
</script>
</tr>
</table>
</td></tr>
<tr><td  align='center' bgcolor='#222222'>
<hr color="#ffffff" size="50" width="50" id="color"></hr>
</td></tr>
<tr bgColor='#222222'>
<td align='center' bgcolor='#222222'>
<form id="myform" action="../?" onsubmit="return submitformColor();">
<input type='hidden' name='action' id="action">
Password: <input type="password" name="pw" id="pw">
<br>
<input type="submit" name="btn" value="Change">
</form>
</td>
</tr>
</table>

<br>
</td></tr>
</table>
<a href="INDEX.HTM">back</a>
</body></html>

JavaScript-File (color.js):

Code:

function Slider(i,c)
{
//Get last resized Image
im = c + document.getElementById(c).value
d=document.all[im];
switch (c)
{
case "r":
d.bgColor = "#ff0000";
break;
case "g":
d.bgColor = "#00ff00";
break;
case "b":
d.bgColor = "#0000ff";
break;
}
//Set Textbox to value
document.getElementById(c).value = i;
//Resice actual Image to 1
im = c + i;
d=document.all[im];
d.bgColor = "#000000";
//Set <hr color=""> to Hexcode
var r,g,b;
r = Math.round((document.all.r.value*255)/31);
g = Math.round((document.all.g.value*255)/31);
b = Math.round((document.all.b.value*255)/31);
document.getElementById('color').color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
document.getElementById('action').value = 'color'+document.all.r.value+'-'+document.all.g.value+'-'+document.all.b.value;
}

function submitformColor()
{
var oRequest = new XMLHttpRequest();
var sURL  = '/?action='+document.getElementById('action').value;
sURL += '&pw='+document.getElementById('pw').value;
sURL += '&btn=Change';
oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("User-Agent",navigator.userAgent);
oRequest.send(null)

if (oRequest.status==200)
  {
   //var txt = oRequest.responseText;     
   //document.write(txt);
   return false;
  }
else
  document.write('Error while sending!');
}

Arduino Code:
(A working Ethernet Shield is mandatory & some knowlodge where to paste the code required)

Code:

char pw[21] = "&pw=MySecurepassword&btn=Change";
  if(strstr(filename,"?action=") !=0)
  {
    filename = filename + 8; // look behind "?action=" (8 chars)
    if(strstr(filename,pw) !=0)
    {
      //Delete Password stuff
      (strstr(filename, pw))[0] = 0;

      if(strstr(filename, "color") != 0)
        {
          All(LP.color(0,0,0));
          client.println("Color:<br>");
          filename = filename + 5; //Remove "color"
          client.println(filename);
               
          String str = filename;
          char theName[3];
          str = str.substring(0,str.indexOf('-'));
          str.toCharArray(theName, 3);
          Serial.println(theName);
          r = atoi(theName);         
   
          str = filename;
          str = str.substring(str.indexOf('-')+1,str.lastIndexOf('-'));
          str.toCharArray(theName, 3);
          Serial.println(theName);
          g = atoi(theName);
         
          str = filename;
          str = str.substring(str.lastIndexOf('-')+1);
          str.toCharArray(theName, 3);
          Serial.println(theName);
          b = atoi(theName);
          All(LP.color(r,g,b));
        }
   }
}

This string conversations are quite ugly and should be redesigned...
The Password-Thing is just a little unsecure solution, but there werent high confidential data on my arduino. So it is just to avoid people to turn my livingroom into a disco 

And this is how it looks like: