👨🏽‍🔬 🚅 📢 Die Schnittstellenvorlage für das "Smart Home" auf Arduino

Fortsetzung des "Smart Home" basierend auf Arduino.

Guten Tag.

Zum besseren Verständnis empfehle ich, den ersten Teil zu lesen .

Dieser Teil beschreibt die reibungslose Steuerung der Beleuchtung ( Dimmer , im Folgenden PWM) sowie das Speichern von Werten im nichtflüchtigen EEPROM-Speicher.

Durch das Speichern von Daten im Speicher kann das System nach einem Stromausfall in den vorherigen Zustand zurückversetzt werden.

Hier können Sie in Echtzeit sehen und berühren.

Das Video ist beigefügt

ipad.

Die Tasten aktivieren / deaktivieren die entsprechenden Pins, und durch Bewegen der Schieberegler wird die PWM bei D5 und D6 erhöht / verringert .

In den Anzeigen befinden sich halbkreisförmige Tasten, mit denen Sie PWM sofort deaktivieren und aktivieren können. Beim Einschalten wird der PWM-Wert zurückgegeben, der beim Ausschalten war.

Ich komme gleich zur Sache ...

Arduino

Setzen Sie zuerst das EEPROM zurück. Füllen Sie diese Skizze:

#include <EEPROM.h>

void setup()
{
  // write a 0 to all 512 bytes of the EEPROM
  for (int i = 0; i < 512; i++)
    EEPROM.write(i, 0);

  // turn the LED on when we're done
  digitalWrite(13, HIGH);
}

void loop()
{
}

Nun das Hauptprogramm:

#include <EEPROM.h>

byte d2 = EEPROM.read(2);     //  ( )   EEPROM,  
byte d3 = EEPROM.read(3);
byte d4 = EEPROM.read(4);
int shim1 = EEPROM.read(5); //     EEPROM,  
int shim2 = EEPROM.read(6);
byte d11 = EEPROM.read(11);
byte d12 = EEPROM.read(12);
byte d13 = EEPROM.read(13);

byte descript[5]; // 

void setup() 
{
  Serial.begin(57600);
  pinMode(2, OUTPUT); 
  pinMode(3, OUTPUT);
  pinMode(4, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(6, OUTPUT);
  pinMode(11, OUTPUT);
  pinMode(12, OUTPUT);
  pinMode(13, OUTPUT);
  
  if(d2) digitalWrite(2, HIGH); else digitalWrite(2, LOW); //    d2  ,  ,  ,   
  delay(500); //     ,  
  if(d3) digitalWrite(3, HIGH); else digitalWrite(3, LOW);
  delay(500);
  if(d4) digitalWrite(4, HIGH); else digitalWrite(4, LOW);
  delay(500);
  analogWrite(5, shim1 * 2.55); //   d5
  delay(500);
  analogWrite(6, shim2 * 2.55); //   d6
  delay(500);
  if(d11) digitalWrite(11, HIGH); else digitalWrite(11, LOW);
  delay(500);
  if(d12) digitalWrite(12, HIGH); else digitalWrite(12, LOW);
  delay(500);
  if(d13) digitalWrite(13, HIGH); else digitalWrite(13, LOW);
}
  
void loop() 
{  
  if (Serial.available()>4) //     
   {
    if (Serial.read()=='Y') //   ,   'Y',   ,  ,     
     {
      for (byte i=0; i < 5; i++)
        {
           descript[i] = Serial.read(); //       
        } 
        
    if((descript[0] =='+') && (descript[1] =='=') && (descript[2] =='Z')) //  
     {
      switch (descript[3])
       {
         case 'o': // 
         glavnaia(); //  
         break;
         
         case 'A': // d2 
         digitalWrite(2, HIGH); //  d2
         d2 = 1; //     ()
         EEPROM.write(2, d2); //   d2   №2 EEPROM 
         glavnaia(); //  
         break;
         
         case 'a': // d2 
         digitalWrite(2, LOW); //  d2
         d2 = 0; //     ()
         EEPROM.write(2, d2); //   d2   №2 EEPROM 
         glavnaia(); //  
         break; 
 
         case 'B': // d3
         digitalWrite(3, HIGH);
         d3 = 1;
         EEPROM.write(3, d3);
         glavnaia();
         break;
         
         case 'b': // d3
         digitalWrite(3, LOW);
         d3 = 0;
         EEPROM.write(3, d3);
         glavnaia();
         break;          
  
         case 'C': // d4
         digitalWrite(4, HIGH);
         d4 = 1;
         EEPROM.write(4, d4);
         glavnaia();
         break;
         
         case 'c': // d4
         digitalWrite(4, LOW);
         d4 = 0;
         EEPROM.write(4, d4);
         glavnaia();
         break;   
  
         case 'D': // d5  shim1
         shim1++; // 
         if(shim1 > 100) shim1 = 100;  //   ,   
         EEPROM.write(5, shim1); //     №5 EEPROM 
         analogWrite(5, shim1 * 2.55); //   D5 
         glavnaia(); //   
         break;
         
         case 'd': // d5  shim1
         shim1--;
         if(shim1 < 1) shim1 = 0;
         EEPROM.write(5, shim1);
         analogWrite(5, shim1 * 2.55);
         glavnaia();
         break; 
  
         case 'E': // d6  shim2
         shim2++;
         if(shim2 > 100) shim2 = 100;
         EEPROM.write(6, shim2);
         analogWrite(6, shim2 * 2.55);
         glavnaia();
         break;
         
         case 'e': // d6  shim2
         shim2--;
         if(shim2 < 1) shim2 = 0;
         EEPROM.write(6, shim2);
         analogWrite(6, shim2 * 2.55);
         glavnaia();
         break;   
  
         case 'F': //     D5
         shim1 = EEPROM.read(5); //     EEPROM
         analogWrite(5, shim1 * 2.55); //   D5
         glavnaia();
         break;
         
         case 'f': //     D5
         shim1 = 0;
         analogWrite(5, shim1); //   D5,     EEPROM
         glavnaia();
         break;  
 
         case 'G': //     D6
         shim2 = EEPROM.read(6); //     EEPROM
         analogWrite(6, shim2 * 2.55); //   D6
         glavnaia();
         break;
         
         case 'g': //     D6
         shim2 = 0;
         analogWrite(6, shim2); //   D6,     EEPROM
         glavnaia();
         break;  
 
         case 'J': // d11
         digitalWrite(11, HIGH);
         d11 = 1;
         EEPROM.write(11, d11);
         glavnaia();
         break;
         
         case 'j': // d11
         digitalWrite(11, LOW);
         d11 = 0;
         EEPROM.write(11, d11);
         glavnaia();
         break;  
        
         case 'K': // d12
         digitalWrite(12, HIGH);
         d12 = 1;
         EEPROM.write(12, d12);
         glavnaia();
         break;
         
         case 'k': // d12
         digitalWrite(12, LOW);
         d12 = 0;
         EEPROM.write(12, d12);
         glavnaia();
         break;         
      
         case 'M': // d13
         digitalWrite(13, HIGH);
         d13 = 1;
         EEPROM.write(13, d13);
         glavnaia();
         break;
         
         case 'm': // d13
         digitalWrite(13, LOW);
         d13 = 0;
         EEPROM.write(13, d13);
         glavnaia();
         break;
 
         default:
         glavnaia();
       }
     }
   
    else //   ,   
      {
        for(byte i=0; i < 255; i++) 
         {
           Serial.read();    
         } 
      } 
     }    //  if (Serial.read()=='Y')
   }    //   
 
} //  loop

void glavnaia() //  
 {
      Serial.print(d2);//0
      Serial.print(",");
      Serial.print(d3);//1
      Serial.print(",");
      Serial.print(d4);//2
      Serial.print(",");
      Serial.print(0);//3  //   ,   
      Serial.print(",");
      Serial.print(0);//4  //   ,   
      Serial.print(",");
      Serial.print(0);//5 //   ,   
      Serial.print(",");
      Serial.print(0);//6 //   ,   
      Serial.print(",");
      Serial.print(0);//7  //   ,   
      Serial.print(",");
      Serial.print(0);//8 //   ,   
      Serial.print(",");
      Serial.print(d11);//9
      Serial.print(",");
      Serial.print(d12);//10
      Serial.print(",");
      Serial.print(d13);//11 
      Serial.print(",");
      Serial.print(shim1); // 12  
      Serial.print(",");
      Serial.println(shim2); // 13  14   
 }

Der Datenaustausch mit Arduino wird hier oder hier beschrieben .

Funktionsweise von

Schaltflächen:

Eine Taste (z. B. D13 ) schaltet die LED ein und schreibt das Gerät in das EEPROM. Flag 1 wird an die Webschnittstelle gesendet, um anzuzeigen , dass der Befehl ausgeführt wurde. Die Taste leuchtet auf.

Bei erneutem Drücken erlischt die LED und es wird Null in das EEPROM geschrieben. Flag 0 wird an die Weboberfläche gesendet . Die Schaltfläche ändert die Farbe.

Das heißt, in der Weboberfläche wird nur der garantierte Befehl angezeigt.

...
         case 'M': // d13
         digitalWrite(13, HIGH); // 
         d13 = 1; //  
         EEPROM.write(13, d13); //    
         glavnaia(); //   
         break;
         
         case 'm': // d13
         digitalWrite(13, LOW);
         d13 = 0;
         EEPROM.write(13, d13);
         glavnaia();
         break;
...

Wenn Sie D13 einschalten und das Arduin abschalten, liest es beim nächsten Einschalten des Arduins die entsprechende Speicherzelle:

...
byte d13 = EEPROM.read(13);
...

Und wenn es einen gab, leuchtet die LED im void setup () -Block auf:

...
  delay(500);
  if(d13) digitalWrite(13, HIGH); else digitalWrite(13, LOW);

Vor dem Einschalten ist eine Pause erforderlich, damit sich nicht alle Verbraucher gleichzeitig einschalten (dies ist beispielsweise ein Sommerhaus, und Heizungen in verschiedenen Räumen werden vom Arduino gesteuert).

Um die automatische Steuerung zu deaktivieren, z. B. für Pin d2 , müssen Sie diese am Anfang des Codes umleiten:

...
byte d2 = EEPROM.read(2);
...

auf das:

byte d2 = 0;

Entfernen Sie in void setup () die Zeilen:

...
if(d2) digitalWrite(2, HIGH); else digitalWrite(2, LOW); 
delay(500);
...

Und im Schalterblock (Beschreibung [3]) den Eintrag im EEPROM wie folgt auskommentieren:

...
         //////////////  ///////////////////
         case 'A': // d2 
         digitalWrite(2, HIGH); //  d2
         d2 = 1; //     ()
         //EEPROM.write(2, d2); //   d2   №2 EEPROM 
         glavnaia(); //  
         break;
         
         case 'a': // d2 
         digitalWrite(2, LOW); //  d2
         d2 = 0; //     ()
         //EEPROM.write(2, d2); //   d2   №2 EEPROM 
         glavnaia(); //  
         break; 
...

Dimmer:

Der Bereich der PWM-Werte reicht von 0 bis 255, das Arduino empfängt (vom Client) Werte im Bereich von 0 bis 100, die im Programm mit 2,55 multipliziert und auf dem „Fuß“ angezeigt werden.


         case 'D': // d5  shim1
         shim1++; //  
         if(shim1 > 100) shim1 = 100; //   ,   
         EEPROM.write(5, shim1); //    
         analogWrite(5, shim1 * 2.55); //  
         glavnaia(); //   
         break;
         
         case 'd': // d5  shim1
         shim1--;
         if(shim1 < 1) shim1 = 0;
         EEPROM.write(5, shim1);
         analogWrite(5, shim1 * 2.55);
         glavnaia();
         break;

Wenn sich der Schieberegler bewegt, wird der Befehl zum Erhöhen / Verringern der PWM um eins an das Arduino gesendet (und so weiter, während der Schieberegler bewegt wird). Shim1 ++ Variable; erhöht sich, sein Wert wird im Speicher gespeichert und shim1 multipliziert mit 2,55 wird dem Pin zugeführt.

Danach wird der Wert von shim1 an die Weboberfläche zurückgesendet und dem Indikator und Schieberegler zugewiesen.

Dem Indikator und dem Schieberegler wird der Wert zugewiesen, der garantiert vom Arduino ausgeführt wird.

Wenn ein Teil der Daten verloren geht, wird der Schieberegler zur Seite verschoben.

Wenn Sie auf die Schaltfläche in der Anzeige klicken:

Der Nulling-Befehl shim1 wird an arduino gesendet

         case 'F': //     D5
         shim1 = EEPROM.read(5); //     EEPROM
         analogWrite(5, shim1 * 2.55); //   D5
         glavnaia();
         break;
         
         case 'f': //     D5
         shim1 = 0;
         analogWrite(5, shim1); //   D5,     EEPROM
         glavnaia();
         break;

Gleichzeitig wird nichts in den Speicher geschrieben, und durch Drücken der nächsten Taste wird der Wert aus dem Speicher zurückgegeben.
(Es ist bequemer, das Licht auszuschalten, als den Schieberegler zu verschieben.)

Schnittstelle

Laden Sie das Archiv herunter und entpacken Sie es in den Arbeitsordner des Servers (standardmäßig ist es / var / www), zum Beispiel - / var / www / knopki_shimpolz (möglicherweise haben Sie einen eigenen Ordner).

Gehen Sie im Browser zu Ihrem_ Router / knopki_shimpolz / . Das folgende Bild wird angezeigt:

So funktioniert es

Es ist ratsam, die Datei index.html aus dem Archiv zu öffnen und die Kommentare zu lesen.

Dimmer:

Beim Laden der ersten Seite wird die Update-Funktion aktiviert - show (); (in Zukunft funktioniert es mit dem eingestellten Intervall) und die PWM-Werte werden von den Arduinen zusammen mit anderen Daten angefordert:

/**/
show();
setInterval(show,2000);  /*     */
function show(){  /*   */
if(flagobnov == 1) { /*        */
            $.ajax({ 
                type: "GET",
                url: "box2.php?df=o", /*    */
                timeout:200, /*  (),          */          
                cache: false,       
                success: function(data){   
                                          
                           var vars = data.split(","); /*      */
                           if(vars.length == dlina){ /*    (   ) */
                               
                               /*d2*/
                               if(vars[0] == 1) { $(".d2otkl").show(); $(".d2vkl").hide(); }  /*      /     */
                               else if(vars[0] == 0) { $(".d2otkl").hide(); $(".d2vkl").show(); } 

                               /*d3*/
                               if(vars[1] == 1) { $(".d3otkl").show(); $(".d3vkl").hide(); }
                               else if(vars[1] == 0) { $(".d3otkl").hide(); $(".d3vkl").show(); }

                               ...

                               shim1 = vars[12]; /*    */ 
                               sh1(); /*       */ 

                               shim2 = vars[13]; 
                               sh2();

                               ...

Nach Erhalt des Wertes von shim1 geht das Programm in die Funktion sh1 ();

function sh1(){ /*    */
  var $ppc = $('.progress-pie-chart'),
    percent = shim1,
    deg = 360*percent/100;
  if (percent > 50) {
    $ppc.addClass('gt-50');
  }
  else $ppc.removeClass('gt-50');
  $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
  $('.ppc-percents span').html(percent+' %       D5  '); /*    - D5 */
  sl1();
}

Der Wert shim1 wird auf dem Indikator (grüner Kreis) angezeigt und die Arbeit wird an die Funktion sl1 () übertragen ;

Funktion sl1 (); Stellt den Schieberegler auf den Wert von shim1 ein

function sl1(){ /*   */
       $( "#slider" ).slider({
       value : shim1,
       min : 0,
       max : 100,
       step : 1,
       slide: function( event, ui ) {
       
       ...

Funktionsfolie: Funktion (Ereignis, Benutzeroberfläche) erwartet , dass sich der Schieberegler bewegt.

Wenn der Schieberegler um eine Division in die eine oder andere Richtung verschoben wird, funktioniert der folgende Algorithmus:

Aktualisierung ist deaktiviert ⇨

flagobnov = 0;

Es wird geprüft, in welche Richtung der Schieberegler bewegt wird (nach oben oder unten).

if( ui.value > shim1 ){

else if( ui.value < shim1 ){

Ein Symbol wird an Arduine gesendet, das angibt, die PWM um eins increase zu erhöhen (zu verringern)

$.ajax({  
    type: "GET",  
    url: "box2.php?df=D", /*          */

Wir erhalten einen neuen PWM-Wert von den Arduinen und rufen die Indikator-Rendering-Funktion (sh1 ();) mit dem neuen Wert ⇨ auf

shim1 = vars[12]; /*         */
sh1(); /*       */

Schalten Sie das Update ein ⇨

flagobnov = 1;

Die Funktion ( sh1 (); ) zeichnet wiederum einen Indikator und überträgt die Steuerung auf die Funktion ( sl1 () ;).

Die Funktion ( sl1 (); ) stellt den Schieberegler entsprechend dem neuen PWM-Wert ein und erwartet die nächste Schiebereglerbewegung.

Code als Ganzes:

function sh1(){ /*    */
  var $ppc = $('.progress-pie-chart'),
    percent = shim1,
    deg = 360*percent/100;
  if (percent > 50) {
    $ppc.addClass('gt-50');
  }
  else $ppc.removeClass('gt-50');
  $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
  $('.ppc-percents span').html(percent+' %       D5  '); /*    - D5 */
  sl1();
}

function sl1(){ /*   */
       $( "#slider" ).slider({
       value : shim1,
       min : 0,
       max : 100,
       step : 1,
       slide: function( event, ui ) {  /*     ,   ,           */
       flagobnov = 0; /*     ,    "" */
           if( ui.value > shim1 ){ /*      ,    */
		$.ajax({  
		    type: "GET",  
		    url: "box2.php?df=D", /*          */
                    timeout:200,
                    cache: false,  
                    success: function(data){                       
                         var vars = data.split(",");
                         if(vars.length == dlina) 
                             { 
			       shim1 = vars[12]; /*         */
			       sh1(); /*       */
			     }  
                    }   
 	        });
           }

           else if( ui.value < shim1 ){ /*      ,    */
		$.ajax({  
		    type: "GET",  
		    url: "box2.php?df=d", /*          */
                    timeout:200,
                    cache: false,  
                    success: function(data){                       
                         var vars = data.split(",");
                         if(vars.length == dlina) 
                             { 
			       shim1 = vars[12]; /*         */
			       sh1(); /*       */
			     }  
                    }   
 	        });
           }

        flagobnov = 1; /*   */
       }
    });
}

Der Wert des Indikators und die Position des Schiebereglers entsprechen garantiert dem Wert im Arduino.

Durch Drücken der Taste „PWM sofort ausschalten“ wird der Befehl zum Zurücksetzen der PWM an das Arduino gesendet, und durch Drücken der Taste „PWM sofort einschalten“ wird das Arduino nach dem PWM-Wert gefragt, der vor dem Zurücksetzen war.

/* d5  */
/*    D5*/
$(".d5shimvkl").click(function(){
                    $.ajax({  
		             type: "GET",  
		             url: "box2.php?df=F",
                             timeout:200,
                             cache: false,  
                             success: function(data)
                                {                       
                                  var vars = data.split(",");
                                    if(vars.length == dlina) 
                                       { 
                                          shim1 = vars[12]; /*         */
					  sh1(); /*       */
                                       }  
                                }   
 	                   }); 
                     return false;
                  
	});

/*    D5*/
$(".d5shimotkl").click(function(){
                    $.ajax({  
		             type: "GET",  
		             url: "box2.php?df=f",
                             timeout:200,
                             cache: false,  
                             success: function(data)
                                {                       
                                  var vars = data.split(",");
                                    if(vars.length == dlina) 
                                       { 
                                          shim1 = vars[12]; /*         */
					  sh1(); /*       */
                                       }  
                                }   
 	                   }); 
                     return false;
                  
	});

Aussehen

Die Position der Indikatoren, ihre Farbe und Schriftart ändern sich in der Datei shim.css

/*   */
.progress-pie-chart {
  width: 200px;
  height: 200px;
  top: 90px; /*  */
  left: 80px; /*  */
  border-radius: 50%;
  background-color: #E5E5E5;
  position: absolute;
}
...
.ppc-percents span {
  display: block;
  font-size: 26px; /*   */
  font-weight: 600; /*   */
  font-family: Arial, Helvetica, sans-serif; /**/
  color: #161616; /*   */
  text-shadow: 0px 1px 2px #7c7c7c; /*    */
}

Die Größe und Position der Schieberegler kann in der Datei slai.css geändert werden

.ui-slider { 
position: relative; 
width: 200px; /*   */
text-align: left; 
outline: none; 
}
...
/*   */
.ui-slider-horizontal .ui-slider-handle { 
width: 50px; /*  */
height: 50px;
margin-left: -25px; 
outline: none;
box-shadow: 0 0 10px 3px rgba(0,0,0,0.3);
border-radius: 4px;
border: 1px solid #2b2c2b;
cursor: pointer;
}
...
/* */
s1 { 
position: absolute; 
top: 360px; 
left: 80px;
font-size: 26px; /*   */
font-weight: 600; /*   */
font-family: Arial, Helvetica, sans-serif; /**/
color: #161616; /*   */
text-shadow: 0px 1px 2px #7c7c7c; /*    */
}

/* */
s2 { 
position: absolute; 
top: 360px; 
left: 420px;
font-size: 26px; /*   */
font-weight: 600; /*   */
font-family: Arial, Helvetica, sans-serif; /**/
color: #161616; /*   */
text-shadow: 0px 1px 2px #7c7c7c; /*    */
}

Das ist alles. Im nächsten Teil werden wir überlegen, Temperatursensoren anzuschließen und verschiedene Geräte nach Temperatur ein- und auszuschalten sowie den Ruhemodus für das Webinterface hinzuzufügen.

Danke.

Die Schnittstellenvorlage für das "Smart Home" auf Arduino - der zweite Teil

Arduino

Schnittstelle

Aussehen

More articles: