ควบคุมแท่งเทียน PLAYBULB ด้วยบลูทูธเว็บ

1. เกี่ยวกับอะไร

IMG_19700101_023537~2~2.jpg

ใน Codelab ที่ให้ความรู้นี้ คุณจะได้เรียนรู้วิธีควบคุมเทียน LED ไร้เปลวไฟ PLAYBULB โดยใช้เพียง JavaScript ด้วย Web Bluetooth API นอกจากนี้ คุณยังจะได้ลองใช้ฟีเจอร์ JavaScript ES2015 เช่น Classes, Arrow functions, Map และ Promises ด้วย

สิ่งที่คุณจะได้เรียนรู้

  • วิธีโต้ตอบกับอุปกรณ์บลูทูธที่อยู่ใกล้เคียงใน JavaScript
  • วิธีใช้คลาส ES2015, ฟังก์ชัน Arrow, Map และ Promise

สิ่งที่ต้องมี

2. เล่นก่อน

คุณอาจต้องการดูแอปเวอร์ชันสุดท้ายที่กำลังจะสร้างที่ https://googlecodelabs.github.io/candle-bluetooth และลองเล่นกับอุปกรณ์บลูทูธ PLAYBULB Candle ที่คุณมีก่อนที่จะเริ่มใช้ Codelab นี้จริงๆ

นอกจากนี้ คุณยังดูวิธีเปลี่ยนสีได้ที่ https://www.youtube.com/watch?v=fBCPA9gIxlU

3. ตั้งค่า

ดาวน์โหลดโค้ดตัวอย่าง

คุณรับโค้ดตัวอย่างสำหรับโค้ดนี้ได้โดยดาวน์โหลดไฟล์ ZIP ที่นี่

หรือโดยการโคลนที่เก็บ Git นี้

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

หากคุณดาวน์โหลดซอร์สโค้ดเป็นไฟล์ ZIP การแตกไฟล์ควรจะให้โฟลเดอร์รูท candle-bluetooth-master แก่คุณ

ติดตั้งและยืนยันเว็บเซิร์ฟเวอร์

แม้ว่าคุณจะใช้เว็บเซิร์ฟเวอร์ของคุณเองได้ แต่ Codelab นี้ออกแบบมาให้ทำงานได้ดีกับ Chrome Web Server หากยังไม่ได้ติดตั้งแอปดังกล่าว คุณสามารถติดตั้งได้จาก Chrome เว็บสโตร์

หลังจากติดตั้งแอปเว็บเซิร์ฟเวอร์สำหรับ Chrome แล้ว ให้คลิกทางลัดแอปบนแถบบุ๊กมาร์ก

Screen Shot 2016-11-16 at 4.10.42 PM.png

ในหน้าต่างที่ปรากฏขึ้น ให้คลิกไอคอนเว็บเซิร์ฟเวอร์

9f3c21b2cf6cbfb5.png

คุณจะเห็นกล่องโต้ตอบนี้ถัดไป ซึ่งช่วยให้คุณกำหนดค่าเว็บเซิร์ฟเวอร์ในเครื่องได้

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

คลิกปุ่มเลือกโฟลเดอร์ แล้วเลือกรูทของที่เก็บที่โคลน (หรือยกเลิกการเก็บ) ซึ่งจะช่วยให้คุณแสดงผลงานที่อยู่ระหว่างดำเนินการผ่าน URL ที่ไฮไลต์ในกล่องโต้ตอบเว็บเซิร์ฟเวอร์ (ในส่วน URL ของเว็บเซิร์ฟเวอร์) ได้

ในส่วน "ตัวเลือก" ให้เลือกช่องข้าง "แสดง index.html โดยอัตโนมัติ" ดังที่แสดงด้านล่าง

Screen Shot 2016-11-16 at 3.40.56 PM.png

ตอนนี้ให้ไปที่เว็บไซต์ในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์) แล้วคุณจะเห็นหน้าเว็บที่มีลักษณะดังนี้

Screen Shot 2016-11-16 at 3.20.22 PM.png

หากต้องการดูว่าแอปนี้มีลักษณะอย่างไรในโทรศัพท์ Android คุณจะต้องเปิดใช้การแก้ไขข้อบกพร่องระยะไกลใน Android และตั้งค่าการส่งต่อพอร์ต (หมายเลขพอร์ตโดยค่าเริ่มต้นคือ 8887) หลังจากนั้น คุณก็เพียงแค่เปิดแท็บ Chrome ใหม่ไปที่ http://localhost:8887 ในโทรศัพท์ Android

ถัดไป

ในตอนนี้ เว็บแอปนี้ยังทำอะไรไม่ได้มากนัก มาเริ่มเพิ่มการรองรับบลูทูธกันเลย

4. สำรวจเทียน

เราจะเริ่มด้วยการเขียนไลบรารีที่ใช้คลาส JavaScript ES2015 สำหรับอุปกรณ์บลูทูธ PLAYBULB Candle

ตั้งสติ ไวยากรณ์คลาสไม่ได้แนะนำรูปแบบการสืบทอดที่อิงตามออบเจ็กต์ใหม่ให้กับ JavaScript แต่จะให้ไวยากรณ์ที่ชัดเจนกว่ามากในการสร้างออบเจ็กต์และจัดการกับการรับค่า ดังที่คุณอ่านได้ด้านล่าง

ก่อนอื่น เรามากำหนดคลาส PlaybulbCandle ใน playbulbCandle.js และสร้างอินสแตนซ์ playbulbCandle ที่จะพร้อมใช้งานในไฟล์ app.js ในภายหลัง

playbulbCandle.js

(function() {
  'use strict';

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

  window.playbulbCandle = new PlaybulbCandle();

})();

หากต้องการขอสิทธิ์เข้าถึงอุปกรณ์บลูทูธที่อยู่ใกล้เคียง เราจำเป็นต้องเรียกใช้ navigator.bluetooth.requestDevice เนื่องจากอุปกรณ์ PLAYBULB Candle จะกระจายข้อมูลอย่างต่อเนื่อง (หากยังไม่ได้จับคู่) ด้วย UUID ของบริการ GATT ของบลูทูธแบบคงที่ซึ่งมีชื่อย่อว่า 0xFF02 เราจึงสามารถกำหนดค่าคงที่และเพิ่มค่านี้ลงในพารามิเตอร์บริการตัวกรองในเมธอด connect สาธารณะใหม่ของคลาส PlaybulbCandle ได้

นอกจากนี้ เราจะติดตามออบเจ็กต์ 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);
  });
});

เรียกใช้แอป

ตอนนี้ให้ไปที่เว็บไซต์ในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ในแอปเว็บเซิร์ฟเวอร์) หรือเพียงรีเฟรชหน้าที่มีอยู่ คลิกปุ่ม "เชื่อมต่อ" สีเขียว เลือกอุปกรณ์ในเครื่องมือเลือก แล้วเปิดคอนโซลเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการด้วยแป้นพิมพ์ลัด Ctrl + Shift + J แล้วสังเกตออบเจ็กต์ BluetoothDevice ที่บันทึกไว้

Screen Shot 2016-11-16 at 3.27.12 PM.png

คุณอาจได้รับข้อผิดพลาดหากบลูทูธปิดอยู่และ/หรืออุปกรณ์บลูทูธ PLAYBULB Candle ปิดอยู่ ในกรณีนี้ ให้เปิดอุปกรณ์และดำเนินการอีกครั้ง

โบนัสที่จำเป็น

ฉันไม่รู้ว่าคุณคิดยังไง แต่ฉันเห็น function() {} มากเกินไปแล้วในโค้ดนี้ มาเปลี่ยนไปใช้ฟังก์ชันลูกศร JavaScript ES2015 ของ () => {} แทนกัน ฟังก์ชันนี้ช่วยชีวิตได้จริงๆ: ความน่ารักทั้งหมดของฟังก์ชัน Anonymous ไม่มีความเศร้าของการเชื่อมโยง

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. อ่านอะไรบางอย่าง

แล้วคุณจะทำอย่างไรต่อไปเมื่อมี BluetoothDevice ที่แสดงผลจากสัญญาของ navigator.bluetooth.requestDevice มาเชื่อมต่อกับเซิร์ฟเวอร์ 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();
      });
    }
  }

อ่านชื่ออุปกรณ์

ในที่นี้เราเชื่อมต่อกับเซิร์ฟเวอร์ GATT ของอุปกรณ์บลูทูธ PLAYBULB Candle ตอนนี้เราต้องการรับบริการ GATT หลัก (ที่โฆษณาเป็น 0xFF02 ก่อนหน้านี้) และอ่านลักษณะชื่ออุปกรณ์ (0xFFFF) ที่เป็นของบริการนี้ ซึ่งทำได้ง่ายๆ โดยเพิ่มเมธอด getDeviceName ใหม่ลงในคลาส PlaybulbCandle และใช้ 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);
      });
    }

มาเพิ่มอุปกรณ์นี้ลงใน app.js โดยเรียกชื่อ playbulbCandle.getDeviceName เมื่อเชื่อมต่อแล้ว และแสดงชื่ออุปกรณ์

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

ตอนนี้ให้ไปที่เว็บไซต์ในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ในแอปเว็บเซิร์ฟเวอร์) หรือเพียงรีเฟรชหน้าที่มีอยู่ ตรวจสอบว่า PLAYBULB Candle เปิดอยู่ จากนั้นคลิกปุ่ม "เชื่อมต่อ" ในหน้าเว็บ แล้วคุณจะเห็นชื่ออุปกรณ์ใต้ตัวเลือกสี

Screen Shot 2016-11-16 at 3.29.21 PM.png

อ่านระดับแบตเตอรี่

นอกจากนี้ยังมีลักษณะบลูทูธระดับแบตเตอรี่มาตรฐานในอุปกรณ์บลูทูธ PLAYBULB Candle ซึ่งมีระดับแบตเตอรี่ของอุปกรณ์ ซึ่งหมายความว่าเราสามารถใช้ชื่อมาตรฐาน เช่น battery_service สำหรับ UUID ของบริการ GATT ของบลูทูธ และ battery_level สำหรับ UUID ของลักษณะ GATT ของบลูทูธ

มาเพิ่มเมธอด getBatteryLevel ใหม่ลงในคลาส PlaybulbCandle และอ่านระดับแบตเตอรี่เป็นเปอร์เซ็นต์กัน

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

นอกจากนี้ เรายังต้องอัปเดตออบเจ็กต์ JavaScript options เพื่อรวมบริการแบตเตอรี่ไว้ในคีย์ optionalServices เนื่องจากอุปกรณ์บลูทูธ PLAYBULB Candle ไม่ได้โฆษณาไว้ แต่ยังคงจำเป็นต้องเข้าถึง

playbulbCandle.js

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

เช่นเดียวกับก่อนหน้านี้ เราจะเสียบปลั๊กอุปกรณ์นี้เข้ากับ app.js โดยเรียกใช้ playbulbCandle.getBatteryLevel เมื่อเรามีชื่ออุปกรณ์และแสดงระดับแบตเตอรี่

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 + '%';
}

ตอนนี้ ให้ไปที่เว็บไซต์ในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ในแอปเว็บเซิร์ฟเวอร์) หรือเพียงรีเฟรชหน้าเว็บที่มีอยู่ คลิกปุ่ม "เชื่อมต่อ" ในหน้าเว็บ แล้วคุณจะเห็นทั้งชื่ออุปกรณ์และระดับแบตเตอรี่

Screen Shot 2016-11-16 at 3.29.21 PM.png

ถัดไป

- ฉันจะเปลี่ยนสีของหลอดไฟนี้ได้อย่างไร นั่นคือเหตุผลที่ฉันมาที่นี่

- คุณใกล้จะทำได้แล้วจริงๆ...

คำถามที่พบบ่อย

6. เปลี่ยนสี

การเปลี่ยนสีทำได้ง่ายๆ เพียงเขียนชุดคำสั่งเฉพาะไปยังลักษณะบลูทูธ (0xFFFC) ในบริการ GATT หลักที่โฆษณาเป็น 0xFF02 ตัวอย่างเช่น การเปลี่ยน PLAYBULB Candle เป็นสีแดงจะเป็นการเขียนอาร์เรย์ของจำนวนเต็มแบบไม่มีเครื่องหมายขนาด 8 บิตที่เท่ากับ [0x00, 255, 0, 0] โดยที่ 0x00 คือความอิ่มตัวของสีขาว และ 255, 0, 0 คือค่าสีแดง สีเขียว และสีน้ำเงินตามลำดับ

เราจะใช้ characteristic.writeValue เพื่อเขียนข้อมูลบางอย่างลงในลักษณะเฉพาะของบลูทูธในเมธอดสาธารณะ setColor ใหม่ของคลาส PlaybulbCandle และเราจะแสดงผลค่าสีแดง สีเขียว และสีน้ำเงินจริงเมื่อดำเนินการตามสัญญาเสร็จสมบูรณ์ เพื่อให้เราสามารถใช้ค่าเหล่านั้นใน 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]);
    }

มาอัปเดตฟังก์ชัน changeColor ใน app.js เพื่อเรียกใช้ playbulbCandle.setColor เมื่อเลือกปุ่มตัวเลือก "ไม่มีเอฟเฟกต์" กัน ระบบจะตั้งค่าตัวแปรสี r, g, b ส่วนกลางไว้แล้วเมื่อผู้ใช้คลิก Canvas ของตัวเลือกสี

app.js

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

ตอนนี้ให้ไปที่เว็บไซต์ในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ในแอปเว็บเซิร์ฟเวอร์) หรือเพียงรีเฟรชหน้าที่มีอยู่ คลิกปุ่ม "เชื่อมต่อ" ในหน้าเว็บ แล้วคลิกตัวเลือกสีเพื่อเปลี่ยนสีของ PLAYBULB Candle ได้บ่อยเท่าที่ต้องการ

Screen Shot 2016-11-16 at 3.31.37 PM.png

เอฟเฟกต์เทียนเพิ่มเติม

หากคุณเคยจุดเทียนมาก่อน คุณจะรู้ว่าแสงเทียนนั้นไม่คงที่ โชคดีที่เรามีลักษณะ Bluetooth อีกรายการ (0xFFFB) ในบริการ GATT หลักที่โฆษณาเป็น 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]);
    }

และมาอัปเดตฟังก์ชัน changeColor ใน app.js เพื่อเรียกใช้ 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;
  }
}

ตอนนี้ให้ไปที่เว็บไซต์ในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ในแอปเว็บเซิร์ฟเวอร์) หรือเพียงรีเฟรชหน้าที่มีอยู่ คลิกปุ่ม "เชื่อมต่อ" ในหน้าเว็บ แล้วเล่นกับเอฟเฟกต์เทียนและแสงแฟลช

Screen Shot 2016-11-16 at 3.33.23 PM.png

ถัดไป

- แค่นั้นเองเหรอ เอฟเฟกต์เทียน 3 อันที่ดูไม่ดีใช่ไหม นี่คือเหตุผลที่ฉันมาที่นี่ใช่ไหม

- ยังมีอีกหลายอย่าง แต่ครั้งนี้คุณต้องจัดการเอง

7. ทุ่มเทเกินร้อย

เรามาถึงจุดนี้แล้ว คุณอาจคิดว่าใกล้จะจบแล้ว แต่แอปยังไม่จบ มาดูกันว่าคุณเข้าใจสิ่งที่คุณคัดลอกและวางในระหว่าง Codelab นี้จริงๆ หรือไม่ สิ่งที่คุณต้องทำด้วยตนเองในตอนนี้เพื่อให้แอปนี้โดดเด่นมีดังนี้

เพิ่มเอฟเฟกต์ที่ขาดหายไป

ข้อมูลสำหรับเอฟเฟกต์ที่ขาดหายไปมีดังนี้

  • Pulse: [0x00, r, g, b, 0x01, 0x00, 0x09, 0x00] (คุณอาจต้องปรับค่า r, g, b ในส่วนนั้น)
  • สายรุ้ง: [0x01, 0x00, 0x00, 0x00, 0x02, 0x00, 0x01, 0x00] (ผู้ที่เป็นโรคลมบ้าหมูอาจต้องหลีกเลี่ยงตัวเลือกนี้)
  • Rainbow Fade: [0x01, 0x00, 0x00, 0x00, 0x03, 0x00, 0x26, 0x00]

ซึ่งหมายถึงการเพิ่มเมธอด setPulseColor, setRainbow และ setRainbowFade ใหม่ลงในคลาส PlaybulbCandle และเรียกใช้ใน changeColor

แก้ไข "ไม่มีผล"

คุณอาจสังเกตเห็นว่าตัวเลือก "ไม่มีเอฟเฟกต์" ไม่ได้รีเซ็ตเอฟเฟกต์ที่กำลังทำงานอยู่ ซึ่งเป็นปัญหาเล็กน้อยแต่ก็ยังคงอยู่ มาแก้ปัญหานี้กัน ในเมธอด setColor คุณจะต้องตรวจสอบก่อนว่าเอฟเฟกต์กำลังทำงานอยู่หรือไม่ผ่านตัวแปรคลาสใหม่ _isEffectSet และหาก true ให้ปิดเอฟเฟกต์ก่อนตั้งค่าสีใหม่ด้วยข้อมูลต่อไปนี้ [0x00, r, g, b, 0x05, 0x00, 0x01, 0x00]

เขียนชื่ออุปกรณ์

อันนี้ง่ายมาก การเขียนชื่ออุปกรณ์ที่กำหนดเองนั้นทำได้ง่ายๆ เหมือนกับการเขียนลักษณะเฉพาะของชื่ออุปกรณ์บลูทูธก่อนหน้า เราขอแนะนำให้ใช้เมธอด TextEncoder encode เพื่อรับ Uint8Array ที่มีชื่ออุปกรณ์

จากนั้นฉันจะเพิ่ม "อินพุต" eventListener ไปยัง document.querySelector('#deviceName') และเรียกใช้ playbulbCandle.setDeviceName เพื่อให้เข้าใจง่าย

ฉันตั้งชื่อให้เทียนของฉันว่า PLAY💡 CANDLE!

8. เท่านี้ก็เรียบร้อย

สิ่งที่คุณได้เรียนรู้

  • วิธีโต้ตอบกับอุปกรณ์บลูทูธที่อยู่ใกล้เคียงใน JavaScript
  • วิธีใช้คลาส ES2015, ฟังก์ชัน Arrow, Map และ Promise

ขั้นตอนถัดไป