Clever Geek Handbook

Template antarmuka untuk "rumah pintar" di Arduino - bagian kedua

Kelanjutan "Rumah Pintar" berdasarkan Arduino.

gambar


Halo.

Untuk pemahaman yang lebih baik, saya sarankan membaca bagian pertama .

Bagian ini menjelaskan kontrol pencahayaan yang mulus ( dimmer , selanjutnya disebut PWM), serta menyimpan nilai dalam memori EEPROM yang tidak mudah menguap.

Menyimpan data ke memori memungkinkan untuk mengembalikan sistem ke kondisi sebelumnya setelah pemadaman.

Di sini Anda dapat melihat dan menyentuh secara real time.

Video terlampir
ipad.



Tombol-tombol akan mengaktifkan / menonaktifkan pin yang sesuai, dan menggerakkan slider akan menambah / mengurangi PWM pada D5 dan D6.

Di dalam indikator ada tombol setengah lingkaran yang dengannya Anda dapat langsung menonaktifkan dan mengaktifkan PWM. Ketika dinyalakan, nilai PWM yang ketika dimatikan akan dikembalikan.

Saya akan langsung ke titik ...

Arduino


Setel ulang EEPROM terlebih dahulu. Isi sketsa ini:

#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()
{
}


Sekarang program utamanya:
#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   
 }


Pertukaran data dengan Arduino dijelaskan di sini atau di sini .

Cara Kerja

Tombol:

gambar


Tombol (mis. D13 ) akan menyalakan LED dan menulis unit ke EEPROM. Bendera 1 akan dikirim ke antarmuka web yang menunjukkan bahwa perintah telah selesai. Tombol menyala.

Ketika ditekan lagi, LED akan mati dan nol akan ditulis ke EEPROM. Tandai 0 akan dikirim ke antarmuka web . Tombol akan berubah warna.

Artinya, di antarmuka web hanya perintah yang dijamin akan ditampilkan.

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


Jika Anda mengaktifkan D13 dan menghilangkan energi arduin, maka pada saat Anda mengaktifkan arduin, itu akan membaca sel memori yang sesuai:

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


Dan jika ada, maka di blok void setup () LED akan menyala:

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

Jeda sebelum menyalakan diperlukan agar semua konsumen TIDAK menyala pada saat yang sama (misalnya, ini adalah pondok musim panas, dan pemanas di ruangan yang berbeda dikendalikan oleh Arduino).

Untuk menonaktifkan kontrol "otomatis", misalnya untuk pin d2 , Anda perlu mengarahkan ini di awal kode:

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


hal ini:

byte d2 = 0;


Dalam pengaturan kosong (), hapus baris:

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


Dan di blok switch (uraian [3]) komentar entri di EEPROM, seperti ini:

...
         //////////////  ///////////////////
         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; 
...


Lampu dim:

gambar


Kisaran nilai PWM adalah dari 0 hingga 255, Arduino menerima (dari klien) nilai dalam kisaran dari 0 hingga 100, yang dikalikan dengan 2,55 di dalam program dan ditampilkan pada "foot".


         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;


Jika slider bergerak, maka perintah untuk menambah / mengurangi PWM satu dikirim ke arduino (dan seterusnya sambil menggerakkan slider). Shim1 ++ variabel; meningkat, nilainya disimpan dalam memori, dan shim1 dikalikan dengan 2,55 diumpankan ke pin.

Setelah itu, nilai shim1 dikirim kembali ke antarmuka web dan ditetapkan ke indikator dan slider.

Indikator dan slider akan diberi nilai yang dijamin akan dilakukan oleh Arduino.

Jika bagian dari data hilang, slider akan bergerak ke samping.

Ketika Anda mengklik tombol di dalam indikator:

gambar


Perintah nulling shim1 akan dikirim ke arduino

         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;

Pada saat yang sama, tidak ada yang ditulis ke memori, dan menekan tombol berikutnya akan mengembalikan nilai dari memori.
(Lebih mudah mematikan lampu daripada menggeser slider)

Antarmuka



Unduh arsip dan unzip ke folder kerja server (secara default adalah / var / www), misalnya - / var / www / knopki_shimpolz (Anda mungkin memiliki folder sendiri).

Di browser, buka router _ Anda / knopki_shimpolz / . Gambar berikut akan muncul:

gambar


Cara kerjanya

Dianjurkan untuk membuka file index.html dari arsip, dan membaca komentar.

Dimmer:

Pada pemuatan halaman pertama, fungsi pembaruan diaktifkan - show (); (di masa depan, ini bekerja dengan interval yang ditetapkan) dan nilai PWM diminta dari arduins bersama dengan data lain:

/**/
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();

                               ...


Setelah menerima nilai shim1 , program masuk ke fungsi 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();
}

Nilai shim1 ditampilkan pada indikator (lingkaran hijau) dan pekerjaan ditransfer ke fungsi sl1 () ;

Fungsi sl1 (); mengatur slider sesuai dengan nilai shim1

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

Function slide: function (event, ui) mengharapkan slider untuk bergerak.

Ketika slider digeser ke satu arah atau lain oleh satu divisi, algoritma berikut akan berfungsi:

Pembaruan dinonaktifkan ⇨

flagobnov = 0;


Ini dicentang ke arah mana slider dipindahkan (naik atau turun))

if( ui.value > shim1 ){


else if( ui.value < shim1 ){


Simbol dikirim ke Arduine yang mengindikasikan peningkatan (penurunan) PWM oleh satu ⇨

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


Kami mendapatkan nilai PWM baru dari arduins dan memanggil fungsi rendering indikator (sh1 ();) dengan nilai baru ⇨

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


Nyalakan pembaruan ⇨

flagobnov = 1;


Fungsi ( sh1 (); ), pada gilirannya, menggambar indikator dan mentransfer kontrol ke fungsi ( sl1 () ;).

Fungsi ( sl1 (); ) mengatur penggeser sesuai dengan nilai PWM baru dan mengharapkan gerakan penggeser berikutnya.

Kode secara keseluruhan:
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; /*   */
       }
    });
}


Nilai indikator dan posisi slider dijamin sesuai dengan nilai di Arduino.

Menekan tombol "Matikan PWM" mengirim perintah untuk mengatur ulang PWM ke arduino, dan tombol "Matikan PWM secara instan" akan meminta arduino untuk nilai PWM sebelum pengaturan ulang.

/* 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;
                  
	});


Penampilan


Posisi indikator, perubahan warna dan font dalam file 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; /*    */
}


Ukuran dan posisi slider dapat diubah dalam file slai.css

.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; /*    */
}


Itu saja, pada bagian selanjutnya kita akan mempertimbangkan menghubungkan sensor suhu dan menyalakan / mematikan berbagai perangkat berdasarkan suhu, dan juga menambahkan mode tidur untuk antarmuka web.

Terima kasih

More articles:


All Articles