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

1. เรื่องนี้เกี่ยวกับอะไร

IMG_19700101_023537~2~2.jpg

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

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

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

สิ่งที่คุณต้องมี

ความเข้าใจพื้นฐานเกี่ยวกับการพัฒนาเว็บ
ความรู้พื้นฐานเกี่ยวกับบลูทูธพลังงานต่ำ (BLE) และโปรไฟล์แอตทริบิวต์ทั่วไป (GATT)
โปรแกรมแก้ไขข้อความที่คุณเลือก
Mac, Chromebook หรืออุปกรณ์ Android M ที่มีแอปเบราว์เซอร์ Chrome และสาย USB Micro เป็น USB

2. เล่นก่อน

คุณอาจต้องการดูแอปเวอร์ชันสุดท้ายที่คุณกำลังจะสร้างที่ https://googlecodelabs.github.io/candle-bluetooth และลองใช้กับอุปกรณ์ PLAYBULB Candle Bluetooth ที่คุณมีก่อนที่จะเริ่มทำ 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 เว็บสโตร์

หลังจากติดตั้งแอป Web Server for Chrome แล้ว ให้คลิกทางลัดแอปในแถบบุ๊กมาร์ก

Screen Shot 2016-11-16 at 4.10.42 PM.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 ของบริการ Bluetooth 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();

})();

Promise คืออะไร

Promise แสดงถึงพร็อกซีสำหรับค่าที่ไม่จำเป็นต้องทราบเมื่อสร้าง Promise ซึ่งช่วยให้คุณเชื่อมโยงแฮนเดิลกับค่าความสำเร็จหรือเหตุผลที่ทำให้การดำเนินการแบบไม่พร้อมกันไม่สำเร็จได้ ซึ่งจะช่วยให้เมธอดแบบอะซิงโครนัสแสดงผลค่าได้เหมือนเมธอดแบบซิงโครนัส โดยเมธอดแบบอะซิงโครนัสจะแสดงผลสัญญาว่าจะได้รับค่าในอนาคตแทนที่จะเป็นค่าสุดท้าย

ในฐานะฟีเจอร์ความปลอดภัย ระบบจะเรียกใช้การค้นหาอุปกรณ์บลูทูธที่อยู่ใกล้เคียงด้วย 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 แทนกัน ฟังก์ชันเหล่านี้ช่วยชีวิตได้จริงๆ ฟังก์ชันที่ไม่ระบุชื่อนั้นน่ารักมาก แต่การเชื่อมโยงนั้นน่าเศร้า

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

นอกจากนี้ เรายังต้องอัปเดตออบเจ็กต์ options JavaScript เพื่อรวมบริการแบตเตอรี่ไว้ในคีย์ 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 ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ในแอปเว็บเซิร์ฟเวอร์) หรือเพียงรีเฟรชหน้าที่เปิดอยู่ คลิกปุ่ม "เชื่อมต่อ" ในหน้าดังกล่าว แล้วคุณจะเห็นทั้งชื่ออุปกรณ์และระดับแบตเตอรี่

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

- ใกล้เสร็จแล้ว ฉันสัญญา...

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

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 ได้หลายครั้งตามต้องการ

เอฟเฟกต์เทียน Moar

หากเคยจุดเทียนมาก่อน คุณจะทราบว่าแสงสว่างไม่ได้คงที่ โชคดีที่ยังมีลักษณะ 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;
  }
}

- มีแค่นี้เหรอ 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]

ซึ่งหมายถึงการเพิ่มเมธอด 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, ฟังก์ชันลูกศร, Map และ Promise

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Web Bluetooth API
เรียกดูตัวอย่าง Web Bluetooth และการสาธิตอย่างเป็นทางการ
ดูแมวหน้าบึ้งบิน