इस पेज का अनुवाद Cloud Translation API से किया गया है.

वेब ब्लूटूथ से PLAYBULB कैंडल को कंट्रोल करें

1. यह गेम किस बारे में है?

GMC_19700101_023537~2~2.jpg

इस बेहतरीन कोडलैब में, आपको वेब ब्लूटूथ एपीआई की मदद से JavaScript के अलावा, PLAYBULB की जलती हुई जलती हुई मोमबत्ती को कंट्रोल करने का तरीका पता चलेगा. इस दौरान, आपको JavaScript ES2015 की क्लास, ऐरो फ़ंक्शन, मैप, और प्रॉमिसेस जैसी सुविधाएं भी मिलेंगी.

आपको इनके बारे में जानकारी मिलेगी

JavaScript में आस-पास मौजूद ब्लूटूथ डिवाइस से इंटरैक्ट करने का तरीका
ES2015 क्लास, ऐरो फ़ंक्शन, मैप, और प्रॉमिस को इस्तेमाल करने का तरीका

आपको इन चीज़ों की ज़रूरत होगी

वेब डेवलपमेंट की बुनियादी जानकारी
ब्लूटूथ कम ऊर्जा (BLE) और जेनेरिक एट्रिब्यूट प्रोफ़ाइल (GATT) के बारे में बुनियादी जानकारी
आपकी पसंद का टेक्स्ट एडिटर
Chrome ब्राउज़र ऐप्लिकेशन वाला Mac, Chromebook या Android M डिवाइस. साथ ही, माइक्रो से यूएसबी केबल की सुविधा वाला Android M डिवाइस.

2. पहले चलाएं

इस कोडलैब का इस्तेमाल शुरू करने से पहले, हो सकता है कि आप https://googlecodelabs.github.io/candle-bluetooth पर जो ऐप्लिकेशन बनाने वाले हैं उसका फ़ाइनल वर्शन देखना और आपके पास मौजूद PLAYBULB कैंडल ब्लूटूथ डिवाइस के साथ खेलना चाहें.

आप मुझे https://www.youtube.com/watch?v=fBCPA9gIxlU पर रंग बदलते हुए भी देख सकते हैं

3. सेट अप करें

सैंपल कोड डाउनलोड करें

इस कोड का सैंपल कोड पाने के लिए, पिन कोड यहां से डाउनलोड करें:

या इस गिट रेपो को क्लोन करके:

git clone https://github.com/googlecodelabs/candle-bluetooth.git

अगर आपने सोर्स को ज़िप के रूप में डाउनलोड किया है, तो इसे अनपैक करने से आपको एक रूट फ़ोल्डर candle-bluetooth-master मिल जाएगा.

वेब सर्वर इंस्टॉल करके उसकी पुष्टि करें

जब आप अपने वेब सर्वर का इस्तेमाल करने के लिए स्वतंत्र हों, तब भी यह कोडलैब Chrome वेब सर्वर के साथ ठीक से काम करने के लिए डिज़ाइन किया गया है. अगर आपने उस ऐप्लिकेशन को अभी तक इंस्टॉल नहीं किया है, तो आप उसे Chrome वेब स्टोर से इंस्टॉल कर सकते हैं.

Chrome ऐप्लिकेशन के लिए वेब सर्वर इंस्टॉल करने के बाद, बुकमार्क बार पर ऐप्लिकेशन शॉर्टकट पर क्लिक करें:

स्क्रीन शॉट 2016-11-2016 को 4.10.42 PM.png पर

आगामी विंडो में, वेब सर्वर आइकन पर क्लिक करें:

इसके बाद, आपको यह डायलॉग दिखेगा. इसकी मदद से, अपने लोकल वेब सर्वर को कॉन्फ़िगर किया जा सकता है:

Screen Shot 2016-11-16: 3.40.47 PM.png

फ़ोल्डर चुनें बटन पर क्लिक करें और क्लोन किए गए (या संग्रह से निकाले गए) रेपो के रूट को चुनें. इससे आप वेब सर्वर डायलॉग (वेब सर्वर यूआरएल सेक्शन में) में हाइलाइट किए गए यूआरएल के ज़रिए, अपना काम जारी रख पाएंगे.

विकल्प में, "index.html अपने-आप दिखाएं" के बगल में मौजूद बॉक्स को चुनें, जैसा कि नीचे दिखाया गया है:

स्क्रीन शॉट 2016-11-2016 को 3.40.56 PM.png पर

अब अपने वेब ब्राउज़र में अपनी साइट पर जाएं (हाइलाइट किए गए वेब सर्वर यूआरएल पर क्लिक करके) और आपको एक पेज दिखेगा जो कुछ ऐसा दिखता है:

16-11-2016 को 3.20.22 PM.png पर स्क्रीन शॉट लिया गया

अगर आपको यह देखना है कि यह ऐप्लिकेशन आपके Android फ़ोन पर कैसा दिखता है, तो आपको Android पर रिमोट तरीके से डीबग करने की सुविधा चालू करनी होगी. साथ ही, आपको पोर्ट फ़ॉरवर्ड करने की सुविधा सेट अप करनी होगी. डिफ़ॉल्ट रूप से पोर्ट नंबर 8887 होता है. इसके बाद, अपने Android फ़ोन पर http://localhost:8887 पर नया Chrome टैब खोलें.

अगला वीडियो

इस समय यह वेब ऐप्लिकेशन ज़्यादा कुछ नहीं करता. आइए, ब्लूटूथ की सुविधा जोड़ना शुरू करें!

4. मोमबत्ती के बारे में जानें

हम एक लाइब्रेरी लिखकर शुरुआत करेंगे जो PLAYBULB कैंडल ब्लूटूथ डिवाइस के लिए JavaScript ES2015 क्लास का इस्तेमाल करती है.

शांत रहें. क्लास सिंटैक्स, JavaScript में नया ऑब्जेक्ट-ओरिएंटेड इनहेरिटेंस मॉडल पेश नहीं कर रहा है. यह ऑब्जेक्ट बनाने और इनहेरिटेंस को मैनेज करने के लिए, ज़्यादा साफ़ सिंटैक्स देता है, जैसा कि नीचे बताया गया है.

सबसे पहले, playbulbCandle.js में PlaybulbCandle क्लास तय करने के बाद, एक playbulbCandle इंस्टेंस बनाते हैं. यह इंस्टेंस, बाद में app.js फ़ाइल में उपलब्ध होगा.

playbulbCandle.js

(function() {
  'use strict';

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
  }

  window.playbulbCandle = new PlaybulbCandle();

})();

आस-पास के किसी ब्लूटूथ डिवाइस का ऐक्सेस मांगने के लिए, हमें navigator.bluetooth.requestDevice पर कॉल करना होगा. PLAYBULB कैंडल डिवाइस लगातार विज्ञापन दिखाता है (अगर पहले से नहीं जोड़ा गया है), तो एक कॉन्सटेंट ब्लूटूथ GATT सेवा UUID छोटे फ़ॉर्मैट में जानी जाती है. इसे 0xFF02 के नाम से जाना जाता है. इसलिए, हम सिर्फ़ एक कॉन्स्टेंट तय कर सकते हैं और उसे PlaybulbCandle क्लास की नई सार्वजनिक connect तरीके में फ़िल्टर सेवाएं पैरामीटर में जोड़ सकते हैं.

हम BluetoothDevice ऑब्जेक्ट को अंदरूनी तौर पर भी ट्रैक करते रहेंगे, ताकि ज़रूरत पड़ने पर हम उसे ऐक्सेस कर सकें. navigator.bluetooth.requestDevice, JavaScript ES2015 Promise दिखाता है, इसलिए हम ऐसा then वाले तरीके में करेंगे.

playbulbCandle.js

(function() {
  'use strict';

  const CANDLE_SERVICE_UUID = 0xFF02;

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
    connect() {
      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}]};
      return navigator.bluetooth.requestDevice(options)
      .then(function(device) {
        this.device = device;
      }.bind(this)); 
    }
  }

  window.playbulbCandle = new PlaybulbCandle();

})();

प्रॉमिस क्या होता है?

प्रॉमिस, उस वैल्यू के लिए प्रॉक्सी को दिखाता है जिसकी जानकारी प्रॉमिस बनाए जाते समय नहीं होती. इसकी मदद से, हैंडलर को किसी एसिंक्रोनस कार्रवाई की सफलता की वैल्यू या न होने की वजह से जोड़ा जा सकता है. इसकी मदद से, एसिंक्रोनस तरीके, सिंक्रोनस तरीकों की तरह वैल्यू दे सकते हैं: फ़ाइनल वैल्यू के बजाय, एसिंक्रोनस तरीका आने वाले समय में वैल्यू मिलने का प्रॉमिस देता है.

सुरक्षा सुविधा के तौर पर, navigator.bluetooth.requestDevice वाले आस-पास मौजूद ब्लूटूथ डिवाइसों को खोजने के लिए, उपयोगकर्ता के हाथ के जेस्चर का इस्तेमाल करना ज़रूरी है. जैसे, टच या माउस क्लिक करना. इसलिए, जब उपयोगकर्ता "कनेक्ट करें" पर क्लिक करेगा, तो हम connect तरीके को कॉल करेंगे बटन: app.js फ़ाइल में

app.js

document.querySelector('#connect').addEventListener('click', function(event) {
  document.querySelector('#state').classList.add('connecting');
  playbulbCandle.connect()
  .then(function() {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
  })
  .catch(function(error) {
    console.error('Argh!', error);
  });
});

ऐप्लिकेशन चलाएं

इसके बाद, वेब ब्राउज़र में अपनी साइट पर जाएं (वेब सर्वर ऐप्लिकेशन में हाइलाइट किए गए वेब सर्वर यूआरएल पर क्लिक करके) या मौजूदा पेज को रीफ़्रेश करें. हरे रंग में, "कनेक्ट करें" पर क्लिक करें बटन पर क्लिक करने के बाद, पिकर में डिवाइस चुनें और Ctrl + Shift + J कीबोर्ड शॉर्टकट की मदद से अपना पसंदीदा Dev टूल कंसोल खोलें. इसके बाद, देखें कि BluetoothDevice ऑब्जेक्ट को लॉग किया गया है.

16-11-2016 को 3.27.12 PM.png पर स्क्रीन शॉट लिया गया

अगर ब्लूटूथ बंद है और/या PLAYBULB कैंडल ब्लूटूथ डिवाइस बंद है, तो आपको गड़बड़ी का मैसेज मिल सकता है. ऐसी स्थिति में, उसे चालू करें और फिर से आगे बढ़ें.

ज़रूरी बोनस

मैं आपके बारे में नहीं जानती, लेकिन मुझे इस कोड में पहले से ही बहुत ज़्यादा function() {} दिख रहे हैं. इसके बजाय, () => {} JavaScript ES2015 ऐरो फ़ंक्शन पर स्विच करें. ये बहुत सारी ज़िंदगी बचा सकते हैं: पहचान छिपाकर दी गई सुविधाओं की वजह से, अनजाने में होने वाली परेशानी से कोई फ़र्क़ नहीं पड़ता.

playbulbCandle.js

(function() {
  'use strict';

  const CANDLE_SERVICE_UUID = 0xFF02;

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
    connect() {
      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}]};
      return navigator.bluetooth.requestDevice(options)
      .then(device => {
        this.device = device;
      }); 
    }
  }

  window.playbulbCandle = new PlaybulbCandle();

})();

app.js

document.querySelector('#connect').addEventListener('click', event => {
  playbulbCandle.connect()
  .then(() => {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
  })
  .catch(error => {
    console.error('Argh!', error);
  });
});

अगला वीडियो

- ठीक है... क्या मैं असल में इस मोमबत्ती से बात कर सकता हूं या क्या?

- बिलकुल... अगले चरण पर जाएं

अक्सर पूछे जाने वाले सवाल

5. कुछ पढ़ें

तो अब आप क्या करेंगे कि navigator.bluetooth.requestDevice के प्रॉमिस के बाद आपको BluetoothDevice वापस मिल गया है? आइए, उस ब्लूटूथ रिमोट GATT सर्वर से कनेक्ट करते हैं जिसमें device.gatt.connect() को कॉल करके ब्लूटूथ सेवा और विशेषता वाली सेटिंग मौजूद हैं:

playbulbCandle.js

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
    connect() {
      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}]};
      return navigator.bluetooth.requestDevice(options)
      .then(device => {
        this.device = device;
        return device.gatt.connect();
      });
    }
  }

डिवाइस का नाम पढ़ना

यहां हम PLAYBULB Candle ब्लूटूथ डिवाइस के GATT सर्वर से कनेक्ट कर रहे हैं. अब हम प्राथमिक GATT सेवा पाना चाहते हैं (पहले 0xFF02 के रूप में विज्ञापन किया गया था) और इस सेवा से संबंधित डिवाइस नाम की विशेषता (0xFFFF) पढ़ना चाहते हैं. ऐसा करने के लिए, PlaybulbCandle क्लास में getDeviceName नया तरीका जोड़ें. साथ ही, device.gatt.getPrimaryService और service.getCharacteristic का इस्तेमाल करें. characteristic.readValue तरीका असल में एक DataView दिखाएगा, जिसे हम बस TextDecoder से डिकोड करेंगे.

playbulbCandle.js

  const CANDLE_DEVICE_NAME_UUID = 0xFFFF;

  ...

    getDeviceName() {
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_DEVICE_NAME_UUID))
      .then(characteristic => characteristic.readValue())
      .then(data => {
        let decoder = new TextDecoder('utf-8');
        return decoder.decode(data);
      });
    }

जब हम कनेक्ट हो जाएं, तो playbulbCandle.getDeviceName पर कॉल करके और डिवाइस का नाम दिखाकर, इसे app.js में जोड़ें.

app.js

document.querySelector('#connect').addEventListener('click', event => {
  playbulbCandle.connect()
  .then(() => {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
    return playbulbCandle.getDeviceName().then(handleDeviceName);
  })
  .catch(error => {
    console.error('Argh!', error);
  });
});

function handleDeviceName(deviceName) {
  document.querySelector('#deviceName').value = deviceName;
}

इसके बाद, वेब ब्राउज़र में अपनी साइट पर जाएं (वेब सर्वर ऐप्लिकेशन में हाइलाइट किए गए वेब सर्वर यूआरएल पर क्लिक करके) या मौजूदा पेज को रीफ़्रेश करें. पक्का करें कि PLAYBULB कैंडल चालू है और फिर "कनेक्ट करें" पर क्लिक करें बटन पर क्लिक करें और आपको कलर पिकर के नीचे डिवाइस का नाम दिखेगा.

16-11-2016 को 3.29.21 PM.png पर स्क्रीन शॉट लिया गया

बैटरी लेवल का डेटा देखना

PLAYBULB कैंडल ब्लूटूथ डिवाइस में बैटरी लेवल की एक स्टैंडर्ड ब्लूटूथ सुविधा भी उपलब्ध है, जिसमें डिवाइस का बैटरी लेवल भी शामिल होता है. इसका मतलब है कि हम ब्लूटूथ GATT सेवा के UUID के लिए battery_service और ब्लूटूथ GATT Characteristic UUID के लिए battery_level जैसे स्टैंडर्ड नाम इस्तेमाल कर सकते हैं.

चलिए, PlaybulbCandle क्लास में getBatteryLevel वाला नया तरीका जोड़ते हैं और जानते हैं कि बैटरी के लेवल का प्रतिशत क्या है.

playbulbCandle.js

    getBatteryLevel() {
      return this.device.gatt.getPrimaryService('battery_service')
      .then(service => service.getCharacteristic('battery_level'))
      .then(characteristic => characteristic.readValue())
      .then(data => data.getUint8(0));
    }

हमें optionalServices कुंजी में बैटरी सेवा शामिल करने के लिए, options JavaScript ऑब्जेक्ट को भी अपडेट करना होगा. ऐसा इसलिए, क्योंकि PLAYBULB कैंडल ब्लूटूथ डिवाइस से इसका विज्ञापन नहीं दिखाया जा रहा है, लेकिन इसे ऐक्सेस करना ज़रूरी है.

playbulbCandle.js

      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}],
                     optionalServices: ['battery_service']};
      return navigator.bluetooth.requestDevice(options)

पहले की तरह ही, डिवाइस का नाम मिलने और बैटरी लेवल दिखाने के बाद, playbulbCandle.getBatteryLevel पर कॉल करके इसे app.js में प्लग-इन करते हैं.

app.js

document.querySelector('#connect').addEventListener('click', event => {
  playbulbCandle.connect()
  .then(() => {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
    return playbulbCandle.getDeviceName().then(handleDeviceName)
    .then(() => playbulbCandle.getBatteryLevel().then(handleBatteryLevel));
  })
  .catch(error => {
    console.error('Argh!', error);
  });
});

function handleDeviceName(deviceName) {
  document.querySelector('#deviceName').value = deviceName;
}

function handleBatteryLevel(batteryLevel) {
  document.querySelector('#batteryLevel').textContent = batteryLevel + '%';
}

इसके बाद, वेब ब्राउज़र में अपनी साइट पर जाएं (वेब सर्वर ऐप्लिकेशन में हाइलाइट किए गए वेब सर्वर यूआरएल पर क्लिक करके) या मौजूदा पेज को रीफ़्रेश करें. "कनेक्ट करें" पर क्लिक करें बटन पर क्लिक कर सकते हैं और आपको डिवाइस का नाम और बैटरी लेवल दोनों दिखाई देंगे.

अगला वीडियो

- मैं इस बल्ब का रंग कैसे बदलूं? इसलिए, मैं यहां हूं!

- तुम काफ़ी करीब हो...

अक्सर पूछे जाने वाले सवाल

6. रंग बदलें

रंग बदलना उतना ही आसान है जितना कि 0xFF02 के रूप में विज्ञापन की गई मुख्य GATT सेवा में किसी ब्लूटूथ कैरेक्टरिस्टिक (0xFFFC) में निर्देशों के किसी सेट को लिखना. उदाहरण के लिए, आपकी PLAYBULB कैंडल को लाल में बदलने का मतलब है कि [0x00, 255, 0, 0] के बराबर 8-बिट के साइन नहीं किए गए पूर्णांक दिखेंगे, जहां 0x00 सफ़ेद सैचुरेशन है और 255, 0, 0 क्रम से लाल, हरे, और नीले मान हैं .

असल में, हम PlaybulbCandle क्लास के नए setColor सार्वजनिक तरीके में, ब्लूटूथ एट्रिब्यूट के कुछ डेटा को लिखने के लिए characteristic.writeValue का इस्तेमाल करेंगे. साथ ही, प्रॉमिस पूरा होने पर, हम लाल, हरे, और नीले रंग की असली वैल्यू भी दिखाएंगे, ताकि बाद में app.js में उनका इस्तेमाल किया जा सके:

playbulbCandle.js

  const CANDLE_COLOR_UUID = 0xFFFC;

  ...

    setColor(r, g, b) {
      let data = new Uint8Array([0x00, r, g, b]);
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_COLOR_UUID))
      .then(characteristic => characteristic.writeValue(data))
      .then(() => [r,g,b]);
    }

"कोई इफ़ेक्ट नहीं" होने पर playbulbCandle.setColor को कॉल करने के लिए, app.js में changeColor फ़ंक्शन को अपडेट करें रेडियो बटन चुना हुआ है. जब उपयोगकर्ता कलर पिकर कैनवस पर क्लिक करता है, तो ग्लोबल r, g, b कलर वैरिएबल पहले से सेट होते हैं.

app.js

function changeColor() {
  var effect = document.querySelector('[name="effectSwitch"]:checked').id;
  if (effect === 'noEffect') {
    playbulbCandle.setColor(r, g, b).then(onColorChanged);
  }
}

इसके बाद, वेब ब्राउज़र में अपनी साइट पर जाएं (वेब सर्वर ऐप्लिकेशन में हाइलाइट किए गए वेब सर्वर यूआरएल पर क्लिक करके) या मौजूदा पेज को रीफ़्रेश करें. "कनेक्ट करें" पर क्लिक करें बटन पर क्लिक करें और अपनी PLAYBULB कैंडल का रंग जितनी बार चाहें उतनी बार बदलने के लिए कलर पिकर पर क्लिक करें.

मोअर कैंडल इफ़ेक्ट

अगर आपने पहले ही मोमबत्ती जलाई है, तो आपको पता है कि रोशनी स्थिर नहीं है. अच्छी बात यह है कि प्राइमरी GATT सेवा की एक और ब्लूटूथ विशेषता (0xFFFB) है, जिसका विज्ञापन 0xFF02 के तौर पर किया गया है. इसकी मदद से उपयोगकर्ता, कैंडल के कुछ इफ़ेक्ट सेट कर सकते हैं.

"कैंडल इफ़ेक्ट" सेट करना उदाहरण के लिए, [0x00, r, g, b, 0x04, 0x00, 0x01, 0x00] लिखकर हासिल किया जा सकता है. और आप "फ़्लैशिंग इफ़ेक्ट" भी सेट कर सकते हैं [0x00, r, g, b, 0x00, 0x00, 0x1F, 0x00] के साथ.

आइए, setCandleEffectColor और setFlashingColor तरीकों को PlaybulbCandle क्लास में जोड़ें.

playbulbCandle.js

  const CANDLE_EFFECT_UUID = 0xFFFB;

  ...

    setCandleEffectColor(r, g, b) {
      let data = new Uint8Array([0x00, r, g, b, 0x04, 0x00, 0x01, 0x00]);
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_EFFECT_UUID))
      .then(characteristic => characteristic.writeValue(data))
      .then(() => [r,g,b]);
    }
    setFlashingColor(r, g, b) {
      let data = new Uint8Array([0x00, r, g, b, 0x00, 0x00, 0x1F, 0x00]);
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_EFFECT_UUID))
      .then(characteristic => characteristic.writeValue(data))
      .then(() => [r,g,b]);
    }

चलिए, app.js में changeColor फ़ंक्शन को अपडेट करते हैं, ताकि "कैंडल इफ़ेक्ट" के होने पर playbulbCandle.setCandleEffectColor को कॉल किया जा सके रेडियो बटन सही का निशान लगा हो और "बहुत तेज़" होने पर playbulbCandle.setFlashingColor रेडियो बटन चुना हुआ है. अगर आपकी सहमति सही है, तो इस बार हम switch का इस्तेमाल करेंगे.

app.js

function changeColor() {
  var effect = document.querySelector('[name="effectSwitch"]:checked').id;
  switch(effect) {
    case 'noEffect':
      playbulbCandle.setColor(r, g, b).then(onColorChanged);
      break;
    case 'candleEffect':
      playbulbCandle.setCandleEffectColor(r, g, b).then(onColorChanged);
      break;
    case 'flashing':
      playbulbCandle.setFlashingColor(r, g, b).then(onColorChanged);
      break;
  }
}

इसके बाद, वेब ब्राउज़र में अपनी साइट पर जाएं (वेब सर्वर ऐप्लिकेशन में हाइलाइट किए गए वेब सर्वर यूआरएल पर क्लिक करके) या मौजूदा पेज को रीफ़्रेश करें. "कनेक्ट करें" पर क्लिक करें बटन पर क्लिक कर सकते हैं और कैंडल और फ़्लैशिंग इफ़ेक्ट के साथ खेल सकते हैं.

अगला वीडियो

- बस इतना ही? मोमबत्ती के 3 खराब इफ़ेक्ट? क्या मैं यहां हूं?

- आपके पास और भी बहुत से विकल्प हैं. हालांकि, इस बार आपको सब कुछ खुद ही करना होगा.

7. कुछ और फ़ायदे भी पाएं

तो हम शुरू कर रहे हैं! आपको लग सकता है कि ऐप्लिकेशन खत्म होने वाला है, लेकिन अभी यह खत्म नहीं हुआ है. चलिए देखते हैं कि क्या आपको वाकई समझ आया कि आपने इस कोडलैब के दौरान क्या कॉपी करके चिपकाया है. यहां बताया गया है कि इस ऐप्लिकेशन को लोकप्रिय बनाने के लिए, अब आपको क्या करना होगा.

छूटे हुए इफ़ेक्ट जोड़ें

जो इफ़ेक्ट मौजूद नहीं हैं, उनका डेटा यहां दिया गया है:

पल्स: [0x00, r, g, b, 0x01, 0x00, 0x09, 0x00] (शायद आप वहां r, g, b वैल्यू को अडजस्ट करना चाहें)
इंद्रधनुष: [0x01, 0x00, 0x00, 0x00, 0x02, 0x00, 0x01, 0x00] (हो सकता है कि एपिलेप्टिक लोग इससे बचना चाहें)
रेनबो फ़ेड: [0x01, 0x00, 0x00, 0x00, 0x03, 0x00, 0x26, 0x00]

इसका मतलब है कि PlaybulbCandle क्लास में नए setPulseColor, setRainbow, और setRainbowFade तरीके जोड़ना और उन्हें changeColor में कॉल करना.

"कोई इफ़ेक्ट नहीं" को ठीक करना

जैसा कि आपने देखा होगा कि "कोई इफ़ेक्ट नहीं" विकल्प जारी किसी प्रभाव को रीसेट नहीं करता है, यह मामूली लेकिन फिर भी है. चलिए, इसे ठीक करते हैं. setColor तरीके में, आपको सबसे पहले यह जांचना होगा कि नए क्लास वैरिएबल _isEffectSet से कोई इफ़ेक्ट दिख रहा है या नहीं. अगर true है, तो इस डेटा के साथ नया रंग सेट करने से पहले, इफ़ेक्ट को बंद कर दें: [0x00, r, g, b, 0x05, 0x00, 0x01, 0x00].

डिवाइस का नाम लिखें

यह आसान है! किसी कस्टम डिवाइस का नाम लिखना उतना ही आसान है जितना पिछले ब्लूटूथ डिवाइस के नाम की विशेषता को लिखना. मेरा सुझाव है कि डिवाइस के नाम वाला Uint8Array पाने के लिए, TextEncoder encode तरीके का इस्तेमाल करें.

इसके बाद, मुझे एक "इनपुट" जोड़ना होगा इसे आसान रखने के लिए, document.querySelector('#deviceName') के लिए eventListener और playbulbCandle.setDeviceName पर कॉल करें.

मैंने खुद अपना नाम PLAY💡 CANDLE रखा है!

8. हो गया!

आपने क्या सीखा

JavaScript में आस-पास मौजूद ब्लूटूथ डिवाइस से इंटरैक्ट करने का तरीका
ES2015 क्लास, ऐरो फ़ंक्शन, मैप, और प्रॉमिस को इस्तेमाल करने का तरीका

अगले चरण

वेब ब्लूटूथ एपीआई के बारे में ज़्यादा जानें
आधिकारिक वेब ब्लूटूथ सैंपल और डेमो ब्राउज़ करें
एक खड़ूस बिल्ली देखें