Sterowanie diodami przez przeglądarkę internetową

Start

Sterowanie diodami przez przeglądarkę internetową

5 Lipiec 2011 Arduino

Jak za pomocą mikro kontrolera Arduino i przeglądarki www sterować diodami LED. Jest to przykład w jaki sposób można sterować elementami elektrycznymi na odległość (zamiast diod można podłączyć np. pralkę, tv, komputer itp.)

Przykładowe skrypty umieszczone poniżej (paczka do ściągnięcia tutaj) napisane są pod system operacyjny Windows, jednak wszystkie użyte języki programowania są multiplatformowe, więc nie ma przeszkód, żeby używać ich pod innymi OS (trzeba jednak zmienić kilka linii kodu pod inne OS..).

Zastosowano 3 języki programowania:PHP, python, C#. PHP-część wizualna oraz wysyłanie danych do gniazda(socket), python - odbiera dane i wysyła na urządzenie, C# - standardowy język dla Arduino.

Efekt końcowy:

Podłączenie

Potrzebne będą:

Arduino UNO
Rejestr przesuwny typu SIPO (Serial-In, Parallel-Out) o 8 wyjściach równoległych w tym przypadku 74HC595
8x dioda LED
8x rezystor 220 ohm
kabel USB
kabelki podłączeniowe

Podłączenie

12 ST-CP -> Arduino 13 (cyfrowe)
11 SH-CP -> Arduino 12 (cyfrowe)
14 DS -> Arduino 11 (cyfrowe)
16 Vcc -> Arduino +5
8 GND -> Arduino GND
10 ^MR -> Arduino +5
13 ^OE -> Arduino GND

Uwaga, na układzie poniżej jest poprzemieniane połączenie z arduino. Poprawne jest wyżej.Kondensator dołączony do układu nie jest potrzebny...

Zdjęcie układu

Część wizualna

Do części wizualnej potrzebny jest serwer PHP. Dostępny jest w pakietach WAMP (windows) lub LAMP (linux), oraz pliki:

index.php - wyświetla główną strone
change_diode.php - skrypt odpowiada za wysłanie przez socket informacji o stanie diód.
img/red.png, img/white.png - pliki grafiki, dostępne w całej paczce plików
js/functions.js - plik funkcji JS
js/jquery.js - framework JS, dostępne w całej paczce plików jak również pod adresem http://docs.jquery.com/Downloading_jQuery

W skrypcie zasosowałem framework jQuery w celu przyśpieszenia działania strony. Po zmianie stanu diód strona nie musi się przeładowywać za każdym razem, tylko poprzez AJAX wysyłana jest informacja do pliku change_diode.php. Plik ten wysyła żądanie poprzez socket do skryptu napisanego w pythonie arduino_socket.py.

[ php ] index.phpZaznacz cały

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
 
<title>Arduino</title>
<script type="text/javascript" src="/arduino/js/jquery.js"></script>
<script type="text/javascript" src="/arduino/js/functions.js"></script>
</head>
<body style='background-color:#000;'>
<div id="diodes">
<?php
if (!isset($_GET['did'])){
    $_GET['did'] = 0;
}
 
 
    $bin_diode = strrev($_GET['did']) ;
    for ($i=7;$i>=0;$i--){
        if (@$bin_diode[$i]=="0" || !isset($bin_diode[$i])){
            print "<img src=\"img/white.png\" id=\"d$i\" onclick=\"diode($i);\" alt=\"0\">";
        }else{
            print "<img src=\"img/red.png\" id=\"d$i\" onclick=\"diode($i);\" alt=\"1\">";
        }
 
    }
 
?>
<?php
if (isset($_GET['did'])){
    $bin_diode_get = base_convert($_GET['did'], 2, 10);
    $host="localhost" ;
    $port=2000;
    $timeout=3;
    $sk=fsockopen($host,$port,$errnum,$errstr,$timeout) ;
    if (!is_resource($sk)) {
        exit("connection fail: ".$errnum." ".$errstr) ;
    } else {
        fputs($sk, $bin_diode_get) ;
    }
    fclose($sk) ;
}
?>
</div>
</body>
</html>

[ php ] change_diode.phpZaznacz cały

<?php
if (isset($_GET['did'])){
    $host="localhost" ;
    $port=2000;
    $timeout=3;
    $sk=fsockopen($host,$port,$errnum,$errstr,$timeout) ;
    if (!is_resource($sk)) {
        exit("connection fail: ".$errnum." ".$errstr) ;
    } else {
        fputs($sk, $_GET['did']) ;
    }
    fclose($sk) ;
}
?>

[ javascript ] js/functions.jsZaznacz cały

function diode(nr){
    //$('#diodes').hide();
    bits = "";
 
    for (i=7;i>=0;i--)
    {
        if (i==nr){
            if ($("#d"+i).attr("alt")==1){bits = bits + "0"}
            if ($("#d"+i).attr("alt")==0){bits = bits + "1"}
        }else{bits = bits + $("#d"+i).attr("alt");}
    }
    $.ajax({
  url: 'index.php?did='+bits,
  success: function(data) {
    $('#diodes').html(data);
    //alert('Load was performed.');
  }
});
}

Uchwyt do Arduino

Uchwytem do urządzenia poprzez kabel USB będzie skrypt napisany w pythonie. Uruchamiamy skrypt python arduino_socket.py, włączając nasłuchiwanie gniazda(socket) na porcie 2000. W chwili otrzymania danych wyświetlana jest informacja "Otrzymałem:xxx" gdzie xxx jest to liczba dziesiętna, która następnie zamieniona jest na liczbę dwujkową i wysłana na rejestr przesuwny.

[ python ] arduino_socket.pyZaznacz cały

from time import sleep
import serial
 
from socket import *
myHost = 'localhost'
myPort = 2000
 
s = socket(AF_INET, SOCK_STREAM)    # create a TCP socket
s.bind((myHost, myPort))            # bind it to the server port
s.listen(5)                         # allow 5 simultaneous
                                    # pending connections
 
 
ser = serial.Serial('COM5', 9600)
#print "Listen"
 
def set_diode(t):
    if len(t)==0 or len(t)>3:
        t="000"
    if len(t)==1:
        t="00"+t
    if len(t)==2:
        t="0"+t
    ser.write('X'+t+"\0")
 
while 1:
    # wait for next client to connect
    connection, address = s.accept() # connection is a new socket
 
    data = connection.recv(1024) # receive up to 1K bytes
    if data:
        #connection.send('echo -> ' + data)
        set_diode(data)
        print "Otrzymalem : "+data
    else:
        break
connection.close()              # close socket
 
    #set_diode(t)

Kod do wgrania na Arduino

Progam za pomocą, którego wgrywa się skrypt na urządzenie Arduino można ściągnąć z adresu http://www.arduino.cc/en/Main/Software

[ csharp ] diody_python.pdeZaznacz cały

//Pin connected to ST_CP of 74HC595
int latchPin = 13;
//Pin connected to SH_CP of 74HC595
int clockPin = 12;
////Pin connected to DS of 74HC595
int dataPin = 11;
 
#include <stdlib.h>     // needed for atoi, atoi = ~strToInt
char buffer[6];   //Otrzymywane dane
int received;      // otrzymany bit
 
//holder for infromation you're going to pass to shifting function
byte data = 0;
 
int myInt;
 
 
 
void setup() {
  //set pins to output because they are addressed in the main loop
  pinMode(latchPin, OUTPUT);
  pinMode(clockPin, OUTPUT);
  pinMode(dataPin, OUTPUT);
  Serial.begin(9600);	// opens serial port, sets data rate to 9600 bps
  received = 0;
  buffer[received] = '\0';
  digitalWrite(latchPin, HIGH);
  myInt = 170;
}
 
 
void blinkArt3(int n, int d) {
  digitalWrite(latchPin, LOW);
  shiftOut(dataPin, clockPin, MSBFIRST, B00011000);
  digitalWrite(latchPin, HIGH);
  delay(200);
 
  digitalWrite(latchPin, LOW);
  shiftOut(dataPin, clockPin, MSBFIRST, B10000001);
  digitalWrite(latchPin, HIGH);
  delay(200);
 
  digitalWrite(latchPin, LOW);
  shiftOut(dataPin, clockPin, MSBFIRST, B01000010);
  digitalWrite(latchPin, HIGH);
  delay(200);
 
  digitalWrite(latchPin, LOW);
  shiftOut(dataPin, clockPin, MSBFIRST, B00100100);
  digitalWrite(latchPin, HIGH);
  delay(200);
}
 
void loop() {
  // send data only when you receive data:
   if (Serial.available() > 0)
    {
 
          buffer[received++] = Serial.read();
          if (buffer[0]!='X'){received = 0;}
          else{
  	  buffer[received] = '\0';
  	  if (received >= (sizeof(buffer)-1))
  	  {
            buffer[0]='0';
        	   myInt = atoi(buffer);
               // Serial.println(buffer);
 
                Serial.print("1: ");
                Serial.println(myInt);
 
                 /* digitalWrite(latchPin, LOW);
                  shiftOut(dataPin, clockPin, MSBFIRST, myInt);
                  digitalWrite(latchPin, HIGH);
      */
                received = 0;
            }
          }
 
   }
                  digitalWrite(latchPin, LOW);
                  shiftOut(dataPin, clockPin, MSBFIRST, myInt);
                  digitalWrite(latchPin, HIGH);
//Serial.print("I received: ");
}

Dołączone pliki

www_lcd_source.zip

Przeczytaj także

Wyświetlanie stanu z pamięci komputera na wyświtlacz LCD (Arduino)

Kategorie

Arduino₍₅₎