🦌 👨🏼‍🍳 ❄️ Arduino पर "स्मार्ट होम" के लिए इंटरफ़ेस टेम्पलेट

Arduino पर आधारित "स्मार्ट होम" की निरंतरता।

हैलो।

बेहतर समझ के लिए, मैं पहले भाग को पढ़ने की सलाह देता हूं ।

यह हिस्सा प्रकाश के सुचारू नियंत्रण ( डिमर , इसके बाद PWM) का वर्णन करता है , साथ ही मेमोरी में गैर-वाष्पशील EEPROM में मूल्यों को संग्रहीत करता है।

डेटा को मेमोरी में सहेजना एक ब्लैकआउट के बाद सिस्टम को अपनी पिछली स्थिति में वापस करना संभव बनाता है।

यहां आप वास्तविक समय में देख और छू सकते हैं।

वीडियो संलग्न है

ipad.

बटन संबंधित पिंस को सक्षम / अक्षम करेंगे और स्लाइडर्स को हिलाने पर D5 और D6 पर PWM बढ़ेगा / घटेगा।

संकेतक के अंदर अर्धवृत्ताकार बटन होते हैं, जिसके साथ आप तुरंत पीडब्लूएम को निष्क्रिय और सक्षम कर सकते हैं। चालू होने पर, बंद किया गया PWM मान वापस कर दिया जाएगा।

मैं सही बात करने के लिए मिल जाएगा ...

Arduino

सबसे पहले EEPROM को रीसेट करें। इस स्केच को भरें:

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

अब मुख्य कार्यक्रम:

#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   
 }

Arduino के साथ डेटा विनिमय यहाँ या यहाँ वर्णित है । बटन

कैसे काम करते हैं

:

एक बटन (जैसे D13 ) एलईडी को चालू करेगा और यूनिट को EEPROM पर लिख देगा। फ्लैग 1 को वेब इंटरफेस पर भेजा जाएगा, जो यह दर्शाता है कि कमांड पूरा हो चुका है। बटन रोशनी।

जब फिर से दबाया जाता है, तो एलईडी बंद हो जाएगा और शून्य को EEPROM को लिखा जाएगा। फ्लैग 0 को वेब इंटरफेस पर भेजा जाएगा । बटन रंग बदल जाएगा।

यही है, वेब इंटरफेस में केवल गारंटीकृत कमांड प्रदर्शित किया जाएगा।

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

यदि आप D13 को चालू करते हैं और Arduin को डी-एनर्जाइज़ करते हैं, तो अगली बार जब आप Arduin को चालू करेंगे, तो यह संबंधित मेमोरी सेल को पढ़ेगा:

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

और अगर वहाँ एक था, तो शून्य सेटअप में () ब्लॉक एलईडी चालू होगा:

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

स्विच करने से पहले एक विराम आवश्यक है ताकि सभी उपभोक्ता एक ही समय में चालू न हों (उदाहरण के लिए, यह एक गर्मियों का कॉटेज है, और विभिन्न कमरों में हीटर आर्दीनो द्वारा नियंत्रित होते हैं)।

"स्वचालित" नियंत्रण को अक्षम करने के लिए, उदाहरण के लिए पिन d2 के लिए , आपको कोड की शुरुआत में इसे पुनर्निर्देशित करना होगा:

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

इस पर:

byte d2 = 0;

में शून्य सेटअप (), लाइनों को हटा दें:

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

और स्विच ब्लॉक में (वर्णन [3]) EEPROM में प्रविष्टि को इस तरह टिप्पणी करें:

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

मद्धम:

PWM मानों की सीमा 0 से 255 तक होती है, arduino 0 से 100 की सीमा में (क्लाइंट से) मान प्राप्त करता है, जो कार्यक्रम के अंदर 2.55 से गुणा किया जाता है और "पैर" पर प्रदर्शित होता है।


         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;

यदि स्लाइडर चलता है, तो एक से PWM को बढ़ाने / घटाने का आदेश arduino (और स्लाइडर को स्थानांतरित करते समय) पर भेजा जाता है। शिम 1 ++ चर; बढ़ जाती है, इसके मूल्य को मेमोरी में संग्रहीत किया जाता है, और शिम 1 को 2.55 से गुणा करके पिन को खिलाया जाता है।

उसके बाद, shim1 का मान वापस वेब इंटरफेस पर भेजा जाता है और संकेतक और स्लाइडर को सौंपा जाता है।

संकेतक और स्लाइडर को उस मूल्य को सौंपा जाएगा जो कि arduino द्वारा निष्पादित होने की गारंटी है।

यदि डेटा का हिस्सा खो जाता है, तो स्लाइडर एक तरफ चला जाएगा।

जब आप संकेतक के अंदर बटन पर क्लिक करते हैं:

Nulling कमांड shim1 को 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;

उसी समय, मेमोरी के लिए कुछ भी नहीं लिखा जाता है, और अगला बटन दबाने से मेमोरी से मान वापस आ जाएगा।
(स्लाइडर को स्थानांतरित करने की तुलना में प्रकाश को बंद करना अधिक सुविधाजनक है)

इंटरफेस

संग्रह डाउनलोड करें और इसे सर्वर के कार्यशील फ़ोल्डर में अनज़िप करें (डिफ़ॉल्ट रूप से यह / var / www है), उदाहरण के लिए - / var / www / knopki_shimpolz (आपके पास अपना फ़ोल्डर हो सकता है)।

ब्राउज़र में, अपने_ रूटर / knopki_shimpolz / पर जाएं । निम्न चित्र दिखाई देगा:

यह कैसे काम करता है

यह संग्रह से index.html फ़ाइल को खोलने और टिप्पणियों को पढ़ने के लिए सलाह दी जाती है।

डिमर:

पहला पृष्ठ लोड होने पर, अपडेट फ़ंक्शन सक्रिय होता है - शो (); (भविष्य में, यह एक निर्धारित अंतराल के साथ काम करता है) और पीडब्लूएम मूल्यों को अन्य डेटा के साथ arduins से अनुरोध किया जाता है:

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

                               ...

शिम 1 का मान प्राप्त करने के बाद , प्रोग्राम फंक्शन 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();
}

मूल्य shim1 को संकेतक (ग्रीन सर्कल) पर प्रदर्शित किया जाता है और कार्य को फ़ंक्शन sl1 () में स्थानांतरित कर दिया जाता है ;

समारोह sl1 (); शिम 1 मूल्य के अनुसार स्लाइडर सेट करता है

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

फ़ंक्शन स्लाइड: फ़ंक्शन (ईवेंट, यूआई) स्लाइडर को स्थानांतरित करने की अपेक्षा करता है।

जब स्लाइडर को एक दिशा में या किसी अन्य डिवीजन द्वारा स्थानांतरित किया जाता है, तो निम्न एल्गोरिथ्म काम करेगा:

अपडेट अक्षम है ⇨

flagobnov = 0;

यह जांचा जाता है कि स्लाइडर किस दिशा में (ऊपर या नीचे) चला गया है)

if( ui.value > shim1 ){

else if( ui.value < shim1 ){

एक प्रतीक Arduine को एक ⇨ से PWM को बढ़ाने (घटाने) का संकेत देता है

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

हम arduins से एक नया PWM मान प्राप्त करते हैं और नए मान के साथ संकेतक रेंडरिंग फ़ंक्शन (sh1 ();) कहते हैं।

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

अपडेट को चालू करें ⇨

flagobnov = 1;

फ़ंक्शन ( sh1 (); ), बदले में, एक संकेतक खींचता है और फ़ंक्शन ( sl1 () ;) पर नियंत्रण स्थानांतरित करता है ।

फ़ंक्शन ( sl1 (); ) नए PWM मान के अनुसार स्लाइडर सेट करता है और अगले स्लाइडर आंदोलन की उम्मीद करता है।

एक पूरे के रूप में कोड:

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

संकेतक के मूल्य और स्लाइडर की स्थिति को आर्डिनो में मूल्य के अनुरूप करने की गारंटी है।

बटन दबाते हुए "तुरंत PWM को बंद करें" कमांड को PWM को Arduino पर रीसेट करने के लिए भेजता है, और बटन "तुरंत PWM को चालू करें", PWM मान के लिए arduino से पूछेगा जो रीसेट करने से पहले था।

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

दिखावट

संकेतक की स्थिति, उनका रंग और फ़ॉन्ट 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; /*    */
}

स्लाइडर्स का आकार और स्थिति 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; /*    */
}

बस इतना ही, अगले भाग में हम तापमान संवेदकों को जोड़ने और तापमान द्वारा विभिन्न उपकरणों को चालू / बंद करने पर विचार करेंगे, और वेब इंटरफेस के लिए स्लीप मोड भी जोड़ेंगे।

धन्यवाद।

Arduino पर "स्मार्ट होम" के लिए इंटरफ़ेस टेम्पलेट - दूसरा भाग

Arduino

इंटरफेस

दिखावट

More articles: