1. परिचय
पिछले अपडेट की तारीख: 21-07-2020
आपको क्या बनाने को मिलेगा
इस कोडलैब में, आपको एक ऐसा वेब पेज बनाना है जो BBC micro:bit बोर्ड के साथ इंटरैक्ट करने के लिए, Web Serial API का इस्तेमाल करता हो. इससे बोर्ड की 5x5 एलईडी मैट्रिक्स पर इमेज दिखाई जा सकेंगी. आपको Web Serial API के बारे में जानकारी मिलेगी. साथ ही, ब्राउज़र के ज़रिए सीरियल डिवाइसों से कम्यूनिकेट करने के लिए, पढ़ने, लिखने, और ट्रांसफ़ॉर्म करने वाली स्ट्रीम का इस्तेमाल करने का तरीका पता चलेगा.
आपको क्या सीखने को मिलेगा
- वेब सीरियल पोर्ट को खोलने और बंद करने का तरीका
- इनपुट स्ट्रीम से मिले डेटा को मैनेज करने के लिए, रीड लूप का इस्तेमाल कैसे करें
- राइट स्ट्रीम के ज़रिए डेटा भेजने का तरीका
आपको इन चीज़ों की ज़रूरत होगी
- Espruino के नए फ़र्मवेयर वाला BBC micro:bit बोर्ड
- Chrome का नया वर्शन (80 या इसके बाद का वर्शन)
- एचटीएमएल, सीएसएस, JavaScript, और Chrome DevTools की जानकारी
हमने इस कोडलैब के लिए micro:bit का इस्तेमाल किया है. इसकी वजह यह है कि यह सस्ता है. इसमें कुछ इनपुट (बटन) और आउटपुट (5x5 एलईडी डिसप्ले) मिलते हैं. साथ ही, इसमें अतिरिक्त इनपुट और आउटपुट भी मिल सकते हैं. micro:bit की क्षमताओं के बारे में जानने के लिए, Espruino की साइट पर BBC micro:bit पेज देखें.
2. Web Serial API के बारे में जानकारी
Web Serial API की मदद से, वेबसाइटें स्क्रिप्ट की मदद से सीरियल डिवाइस से डेटा पढ़ सकती हैं और उस पर डेटा लिख सकती हैं. यह एपीआई, वेब और फ़िज़िकल दुनिया के बीच पुल का काम करता है. इसकी मदद से वेबसाइटें, सीरियल डिवाइसों से कम्यूनिकेट कर पाती हैं. जैसे, माइक्रोकंट्रोलर और 3D प्रिंटर.
वेब टेक्नोलॉजी का इस्तेमाल करके बनाए गए कंट्रोल सॉफ़्टवेयर के कई उदाहरण मौजूद हैं. उदाहरण के लिए:
कुछ मामलों में, ये वेबसाइटें डिवाइस से कम्यूनिकेट करती हैं. इसके लिए, वे नेटिव एजेंट ऐप्लिकेशन का इस्तेमाल करती हैं. इस ऐप्लिकेशन को उपयोगकर्ता मैन्युअल तरीके से इंस्टॉल करता है. अन्य मामलों में, ऐप्लिकेशन को Electron जैसे फ़्रेमवर्क के ज़रिए, पैकेज किए गए नेटिव ऐप्लिकेशन के तौर पर डिलीवर किया जाता है. अन्य मामलों में, उपयोगकर्ता को एक और चरण पूरा करना होता है. जैसे, कंपाइल किए गए ऐप्लिकेशन को यूएसबी फ़्लैश ड्राइव की मदद से डिवाइस पर कॉपी करना.
साइट और उसे कंट्रोल करने वाले डिवाइस के बीच सीधे तौर पर कम्यूनिकेशन की सुविधा देकर, उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है.
3. सेट अप करना
कोड पाएं
हमने इस कोडलैब के लिए ज़रूरी सभी चीज़ों को Glitch प्रोजेक्ट में शामिल किया है.
- एक नया ब्राउज़र टैब खोलें और https://web-serial-codelab-start.glitch.me/ पर जाएं.
- स्टार्टर प्रोजेक्ट का अपना वर्शन बनाने के लिए, Glitch को रीमिक्स करें लिंक पर क्लिक करें.
- दिखाएं बटन पर क्लिक करें. इसके बाद, कोड को लागू होते हुए देखने के लिए नई विंडो में चुनें.
4. सीरियल कनेक्शन खोलना
देखें कि Web Serial API काम करता है या नहीं
सबसे पहले, यह देखें कि मौजूदा ब्राउज़र में Web Serial API काम करता है या नहीं. इसके लिए, देखें कि serial, navigator में मौजूद है या नहीं.
DOMContentLoaded इवेंट में, अपने प्रोजेक्ट में यह कोड जोड़ें:
script.js - DOMContentLoaded
// CODELAB: Add feature detection here.
const notSupported = document.getElementById('notSupported');
notSupported.classList.toggle('hidden', 'serial' in navigator);
इससे यह पता चलता है कि Web Serial API काम करता है या नहीं. अगर ऐसा है, तो यह कोड उस बैनर को छिपा देता है जिसमें बताया गया है कि Web Serial काम नहीं करता.
इसे आज़माएँ
- पेज लोड करें.
- पुष्टि करें कि पेज पर लाल रंग का बैनर नहीं दिख रहा हो. इस बैनर में लिखा होता है कि वेब सीरियल की सुविधा काम नहीं करती.
सीरियल पोर्ट खोलें
इसके बाद, हमें सीरियल पोर्ट खोलना होगा. ज़्यादातर आधुनिक एपीआई की तरह, Web Serial API भी एसिंक्रोनस होता है. इससे, इनपुट का इंतज़ार करते समय यूज़र इंटरफ़ेस (यूआई) ब्लॉक नहीं होता. हालांकि, यह इसलिए भी ज़रूरी है, क्योंकि वेब पेज को किसी भी समय सीरियल डेटा मिल सकता है. इसलिए, हमें इसे सुनने के लिए एक तरीके की ज़रूरत होती है.
किसी कंप्यूटर में कई सीरियल डिवाइस हो सकते हैं. इसलिए, जब ब्राउज़र किसी पोर्ट का अनुरोध करता है, तो वह उपयोगकर्ता को यह चुनने के लिए कहता है कि उसे किस डिवाइस से कनेक्ट करना है.
अपने प्रोजेक्ट में यह कोड जोड़ें:
script.js - connect()
// CODELAB: Add code to request & open port here.
// - Request a port and open a connection.
port = await navigator.serial.requestPort();
// - Wait for the port to open.
await port.open({ baudrate: 9600 });
requestPort कॉल में, उपयोगकर्ता से पूछा जाता है कि उसे किस डिवाइस से कनेक्ट करना है. port.open को कॉल करने पर पोर्ट खुल जाता है. हमें यह भी बताना होगा कि सीरियल डिवाइस से किस स्पीड पर कम्यूनिकेट करना है. BBC micro:bit, यूएसबी-टू-सीरियल चिप और मुख्य प्रोसेसर के बीच 9600 बॉड कनेक्शन का इस्तेमाल करता है.
आइए, कनेक्ट बटन को भी हुक अप करें और जब उपयोगकर्ता इस पर क्लिक करे, तो इसे connect() पर कॉल करने दें.
अपने प्रोजेक्ट में यह कोड जोड़ें:
script.js - clickConnect()
// CODELAB: Add connect code here.
await connect();
इसे आज़माएँ
अब हमारे प्रोजेक्ट में, काम शुरू करने के लिए ज़रूरी चीज़ें मौजूद हैं. कनेक्ट करें बटन पर क्लिक करने से, उपयोगकर्ता को कनेक्ट करने के लिए सीरियल डिवाइस चुनने का अनुरोध मिलता है. इसके बाद, यह micro:bit से कनेक्ट हो जाता है.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने वाले डायलॉग में, BBC micro:bit डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- टैब पर, आपको एक आइकॉन दिखेगा. इससे पता चलेगा कि आपने किसी सीरियल डिवाइस से कनेक्ट किया है:
सीरियल पोर्ट से डेटा पाने के लिए, इनपुट स्ट्रीम सेट अप करना
कनेक्शन बन जाने के बाद, हमें डिवाइस से डेटा पढ़ने के लिए एक इनपुट स्ट्रीम और एक रीडर सेट अप करना होगा. सबसे पहले, हम पोर्ट से पढ़ने लायक स्ट्रीम पाने के लिए port.readable को कॉल करेंगे. हमें पता है कि डिवाइस से टेक्स्ट वापस मिलेगा. इसलिए, हम इसे टेक्स्ट डिकोडर के ज़रिए पाइप करेंगे. इसके बाद, हम एक रीडर को चालू करेंगे और पढ़ने की प्रोसेस शुरू करेंगे.
अपने प्रोजेक्ट में यह कोड जोड़ें:
script.js - connect()
// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable;
reader = inputStream.getReader();
readLoop();
रीड लूप एक एसिंक्रोनस फ़ंक्शन है. यह लूप में चलता है और मुख्य थ्रेड को ब्लॉक किए बिना, कॉन्टेंट का इंतज़ार करता है. नया डेटा मिलने पर, रीडर दो प्रॉपर्टी दिखाता है: value और done बूलियन. अगर done की वैल्यू 'सही है' पर सेट है, तो इसका मतलब है कि पोर्ट बंद कर दिया गया है या अब कोई डेटा नहीं आ रहा है.
अपने प्रोजेक्ट में यह कोड जोड़ें:
script.js - readLoop()
// CODELAB: Add read loop here.
while (true) {
const { value, done } = await reader.read();
if (value) {
log.textContent += value + '\n';
}
if (done) {
console.log('[readLoop] DONE', done);
reader.releaseLock();
break;
}
}
इसे आज़माएँ
अब हमारा प्रोजेक्ट, डिवाइस से कनेक्ट हो सकता है. साथ ही, डिवाइस से मिले किसी भी डेटा को लॉग एलिमेंट में जोड़ देगा.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने वाले डायलॉग में, BBC micro:bit डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको Espruino का लोगो दिखेगा:
सीरियल पोर्ट पर डेटा भेजने के लिए, आउटपुट स्ट्रीम सेट अप करना
सीरियल कम्यूनिकेशन आम तौर पर दोनों दिशाओं में होता है. हमें सीरियल पोर्ट से डेटा पाने के साथ-साथ, पोर्ट पर डेटा भेजना भी है. इनपुट स्ट्रीम की तरह ही, हम आउटपुट स्ट्रीम पर सिर्फ़ टेक्स्ट भेजेंगे.
सबसे पहले, टेक्स्ट एन्कोडर स्ट्रीम बनाएं और स्ट्रीम को port.writeable पर पाइप करें.
script.js - connect()
// CODELAB: Add code setup the output stream here.
const encoder = new TextEncoderStream();
outputDone = encoder.readable.pipeTo(port.writable);
outputStream = encoder.writable;
Espruino फ़र्मवेयर के साथ सीरियल के ज़रिए कनेक्ट होने पर, BBC micro:bit बोर्ड, JavaScript रीड-इवैल-प्रिंट लूप (REPL) के तौर पर काम करता है. यह Node.js शेल की तरह होता है. इसके बाद, हमें स्ट्रीम में डेटा भेजने का तरीका बताना होगा. नीचे दिए गए कोड में, आउटपुट स्ट्रीम से राइटर मिलता है. इसके बाद, हर लाइन को भेजने के लिए write का इस्तेमाल किया जाता है. भेजी गई हर लाइन में एक नई लाइन का वर्ण (\n) शामिल होता है. इससे micro:bit को भेजी गई कमांड का आकलन करने के लिए कहा जाता है.
script.js - writeToStream()
// CODELAB: Write to output stream
const writer = outputStream.getWriter();
lines.forEach((line) => {
console.log('[SEND]', line);
writer.write(line + '\n');
});
writer.releaseLock();
सिस्टम को एक जानी-पहचानी स्थिति में लाने और उसे भेजे गए वर्णों को वापस भेजने से रोकने के लिए, हमें CTRL-C भेजना होगा और इको को बंद करना होगा.
script.js - connect()
// CODELAB: Send CTRL-C and turn off echo on REPL
writeToStream('\x03', 'echo(false);');
इसे आज़माएँ
अब हमारा प्रोजेक्ट, micro:bit से डेटा भेज और पा सकता है. आइए, पुष्टि करें कि हम कोई कमांड सही तरीके से भेज सकते हैं या नहीं:
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने वाले डायलॉग में, BBC micro:bit डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- Chrome DevTools में Console टैब खोलें और
writeToStream('console.log("yes")');टाइप करें
आपको पेज पर कुछ ऐसा प्रिंट किया हुआ दिखेगा:
5. एलईडी मैट्रिक्स को कंट्रोल करना
मैट्रिक्स ग्रिड स्ट्रिंग बनाना
micro:bit पर एलईडी मैट्रिक्स को कंट्रोल करने के लिए, हमें show() को कॉल करना होगा. इस तरीके से, 5x5 एलईडी स्क्रीन पर ग्राफ़िक दिखाए जाते हैं. यह फ़ंक्शन, बाइनरी नंबर या स्ट्रिंग लेता है.
हम चेकबॉक्स को दोहराएंगे और 1 और 0 की एक ऐसी ऐरे जनरेट करेंगे जिससे पता चलेगा कि कौनसे चेकबॉक्स चुने गए हैं और कौनसे नहीं. इसके बाद, हमें ऐरे को उलटना होगा, क्योंकि हमारे चेकबॉक्स का क्रम, मैट्रिक्स में मौजूद एलईडी के क्रम से अलग है. इसके बाद, हम ऐरे को स्ट्रिंग में बदलते हैं और micro:bit को भेजने के लिए कमांड बनाते हैं.
script.js - sendGrid()
// CODELAB: Generate the grid
const arr = [];
ledCBs.forEach((cb) => {
arr.push(cb.checked === true ? 1 : 0);
});
writeToStream(`show(0b${arr.reverse().join('')})`);
मैट्रिक्स को अपडेट करने के लिए, चेकबॉक्स को हुक अप करना
इसके बाद, हमें चेकबॉक्स में हुए बदलावों को सुनना होगा. अगर उनमें बदलाव होता है, तो हमें उस जानकारी को micro:bit पर भेजना होगा. सुविधा का पता लगाने वाले कोड (// CODELAB: Add feature detection here.) में, यह लाइन जोड़ें:
script.js - DOMContentLoaded
initCheckboxes();
जब micro:bit पहली बार कनेक्ट हो, तब ग्रिड को भी रीसेट कर दें, ताकि यह मुस्कुराता हुआ चेहरा दिखाए. drawGrid() फ़ंक्शन पहले से उपलब्ध है. यह फ़ंक्शन, sendGrid() की तरह ही काम करता है. यह 1 और 0 का अरे लेता है और ज़रूरत के हिसाब से चेकबॉक्स पर सही का निशान लगाता है.
script.js - clickConnect()
// CODELAB: Reset the grid on connect here.
drawGrid(GRID_HAPPY);
sendGrid();
इसे आज़माएँ
अब जब पेज, micro:bit से कनेक्ट होगा, तब वह मुस्कुराता हुआ चेहरा भेजेगा. चेकबॉक्स पर क्लिक करने से, एलईडी मैट्रिक्स पर डिसप्ले अपडेट हो जाएगा.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने वाले डायलॉग में, BBC micro:bit डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको micro:bit की एलईडी मैट्रिक्स पर एक स्माइली दिखेगी.
- चेकबॉक्स बदलकर, एलईडी मैट्रिक्स पर कोई दूसरा पैटर्न बनाएं.
6. micro:bit के बटन कनेक्ट करना
micro:bit के बटन पर वॉच इवेंट जोड़ना
micro:bit पर दो बटन होते हैं. एक बटन एलईडी मैट्रिक्स के एक तरफ़ और दूसरा बटन दूसरी तरफ़ होता है. Espruino, setWatch फ़ंक्शन उपलब्ध कराता है. इससे बटन दबाने पर इवेंट/कॉलबैक भेजा जाता है. हमें दोनों बटन के लिए इवेंट लिसनर सेट करना है. इसलिए, हम अपने फ़ंक्शन को सामान्य बना देंगे और उससे इवेंट की जानकारी प्रिंट करवाएंगे.
script.js - watchButton()
// CODELAB: Hook up the micro:bit buttons to print a string.
const cmd = `
setWatch(function(e) {
print('{"button": "${btnId}", "pressed": ' + e.state + '}');
}, ${btnId}, {repeat:true, debounce:20, edge:"both"});
`;
writeToStream(cmd);
इसके बाद, हमें दोनों बटन (माइक्रो:बिट बोर्ड पर BTN1 और BTN2 नाम दिए गए हैं) को हर बार डिवाइस से सीरियल पोर्ट कनेक्ट होने पर हुक अप करना होगा.
script.js - clickConnect()
// CODELAB: Initialize micro:bit buttons.
watchButton('BTN1');
watchButton('BTN2');
इसे आज़माएँ
कनेक्ट होने पर, micro:bit पर खुशी का इमोजी दिखता है. साथ ही, micro:bit पर मौजूद किसी भी बटन को दबाने पर, पेज पर एक टेक्स्ट जुड़ जाता है. इससे पता चलता है कि कौनसे बटन को दबाया गया है. ज़्यादातर मामलों में, हर वर्ण अलग लाइन में होगा.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने वाले डायलॉग में, BBC micro:bit डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको micro:bits की एलईडी मैट्रिक्स पर एक स्माइली दिखेगी.
- micro:bit पर मौजूद बटन दबाएं और पुष्टि करें कि इससे, बटन दबाने की जानकारी के साथ पेज पर नया टेक्स्ट जुड़ गया हो.
7. आने वाले डेटा को पार्स करने के लिए, ट्रांसफ़ॉर्म स्ट्रीम का इस्तेमाल करना
स्ट्रीम को मैनेज करने की बुनियादी बातें
जब micro:bit के किसी बटन को दबाया जाता है, तो micro:bit, स्ट्रीम के ज़रिए सीरियल पोर्ट को डेटा भेजता है. स्ट्रीम बहुत काम की होती हैं. हालांकि, इनसे जुड़ी कुछ समस्याएं भी हो सकती हैं. जैसे, आपको सारा डेटा एक साथ नहीं मिलेगा और इसे अलग-अलग हिस्सों में बांटा जा सकता है.
फ़िलहाल, ऐप्लिकेशन में आने वाली स्ट्रीम को readLoop के तौर पर प्रिंट किया जाता है. ज़्यादातर मामलों में, हर वर्ण अपनी लाइन में होता है, लेकिन यह ज़्यादा मददगार नहीं होता. स्ट्रीम को अलग-अलग लाइनों में पार्स किया जाना चाहिए. साथ ही, हर मैसेज को उसकी लाइन के तौर पर दिखाया जाना चाहिए.
TransformStream की मदद से स्ट्रीम को बेहतर बनाना
इसके लिए, हम ट्रांसफ़ॉर्म स्ट्रीम ( TransformStream) का इस्तेमाल कर सकते हैं. इससे, आने वाली स्ट्रीम को पार्स करना और पार्स किया गया डेटा वापस पाना मुमकिन हो जाता है. ट्रांसफ़ॉर्म स्ट्रीम, स्ट्रीम के सोर्स (इस मामले में, micro:bit) और स्ट्रीम का इस्तेमाल करने वाले डिवाइस (इस मामले में readLoop) के बीच में होती है. साथ ही, स्ट्रीम का इस्तेमाल करने से पहले, इसमें कोई भी ट्रांसफ़ॉर्म लागू कर सकती है. इसे असेंबली लाइन की तरह समझें: जैसे-जैसे कोई विजेट लाइन से नीचे आता है, लाइन में मौजूद हर चरण विजेट में बदलाव करता है. इसलिए, जब तक यह अपनी मंज़िल तक पहुंचता है, तब तक यह पूरी तरह से काम करने वाला विजेट बन जाता है.
ज़्यादा जानकारी के लिए, MDN के Streams API के कॉन्सेप्ट देखें.
LineBreakTransformer की मदद से स्ट्रीम को बेहतर बनाएं
आइए, एक LineBreakTransformer क्लास बनाते हैं. यह क्लास, स्ट्रीम को इनपुट के तौर पर लेगी और लाइन ब्रेक (\r\n) के आधार पर उसे हिस्सों में बाँट देगी. इस क्लास के लिए दो तरीकों की ज़रूरत होगी: transform और flush. स्ट्रीम से नया डेटा मिलने पर, transform तरीके को हर बार कॉल किया जाता है. यह डेटा को कतार में लगा सकता है या बाद में इस्तेमाल करने के लिए सेव कर सकता है. flush तरीके को तब कॉल किया जाता है, जब स्ट्रीम बंद हो जाती है. यह उस डेटा को हैंडल करता है जिसे अब तक प्रोसेस नहीं किया गया है.
transform तरीके में, हम container में नया डेटा जोड़ेंगे. इसके बाद, हम यह देखेंगे कि container में कोई लाइन ब्रेक है या नहीं. अगर ऐसा है, तो इसे एक अरे में बांटें. इसके बाद, लाइनों के हिसाब से दोहराएं और पार्स की गई लाइनों को भेजने के लिए, controller.enqueue() को कॉल करें.
script.js - LineBreakTransformer.transform()
// CODELAB: Handle incoming chunk
this.container += chunk;
const lines = this.container.split('\r\n');
this.container = lines.pop();
lines.forEach(line => controller.enqueue(line));
स्ट्रीम बंद होने पर, हम enqueue का इस्तेमाल करके, कंटेनर में मौजूद बाकी डेटा को हटा देंगे.
script.js - LineBreakTransformer.flush()
// CODELAB: Flush the stream.
controller.enqueue(this.container);
आखिर में, हमें नई LineBreakTransformer के ज़रिए इनकमिंग स्ट्रीम को पाइप करना होगा. हमारी ओरिजनल इनपुट स्ट्रीम को सिर्फ़ TextDecoderStream के ज़रिए पाइप किया गया था. इसलिए, हमें एक और pipeThrough जोड़ना होगा, ताकि इसे हमारे नए LineBreakTransformer के ज़रिए पाइप किया जा सके.
script.js - connect()
// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable
.pipeThrough(new TransformStream(new LineBreakTransformer()));
इसे आज़माएँ
अब micro:bit के किसी बटन को दबाने पर, प्रिंट किया गया डेटा एक ही लाइन में दिखना चाहिए.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने वाले डायलॉग में, BBC micro:bit डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको micro:bit की एलईडी मैट्रिक्स पर एक स्माइली दिखेगी.
- micro:bit पर मौजूद बटन दबाएं और पुष्टि करें कि आपको कुछ ऐसा दिख रहा है:
JSONTransformer की मदद से स्ट्रीम को बेहतर बनाएं
हम readLoop में स्ट्रिंग को JSON में पार्स करने की कोशिश कर सकते हैं. हालांकि, इसके बजाय, आइए एक बहुत ही सामान्य JSON ट्रांसफ़ॉर्मर बनाएं, जो डेटा को JSON ऑब्जेक्ट में बदल देगा. अगर डेटा मान्य JSON नहीं है, तो सिर्फ़ वही डेटा दिखाएं जो मिला है.
script.js - JSONTransformer.transform
// CODELAB: Attempt to parse JSON content
try {
controller.enqueue(JSON.parse(chunk));
} catch (e) {
controller.enqueue(chunk);
}
इसके बाद, स्ट्रीम को LineBreakTransformer से गुज़ारें. इससे पहले, स्ट्रीम को JSONTransformer से गुज़ारा गया हो. इससे हम अपने JSONTransformer को आसान बना पाते हैं, क्योंकि हमें पता है कि JSON को हमेशा एक ही लाइन में भेजा जाएगा.
script.js - connect
// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable
.pipeThrough(new TransformStream(new LineBreakTransformer()))
.pipeThrough(new TransformStream(new JSONTransformer()));
इसे आज़माएँ
अब micro:bit के किसी बटन को दबाने पर, आपको पेज पर [object Object] लिखा हुआ दिखेगा.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने वाले डायलॉग में, BBC micro:bit डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको micro:bit की एलईडी मैट्रिक्स पर एक स्माइली दिखेगी.
- micro:bit पर मौजूद बटन दबाएं और पुष्टि करें कि आपको कुछ ऐसा दिख रहा है:
बटन दबाने पर उससे जुड़ा काम तुरंत नहीं होता
micro:bit के बटन दबाने पर जवाब देने के लिए, readLoop को अपडेट करें. इससे यह पता चलेगा कि उसे मिला डेटा, button प्रॉपर्टी वाला object है या नहीं. इसके बाद, बटन दबाने की कार्रवाई को मैनेज करने के लिए, buttonPushed को कॉल करें.
script.js - readLoop()
const { value, done } = await reader.read();
if (value && value.button) {
buttonPushed(value);
} else {
log.textContent += value + '\n';
}
जब micro:bit के बटन को दबाया जाए, तो एलईडी मैट्रिक्स पर दिखने वाली इमेज बदलनी चाहिए. मैट्रिक्स सेट करने के लिए, इस कोड का इस्तेमाल करें:
script.js - buttonPushed()
// CODELAB: micro:bit button press handler
if (butEvt.button === 'BTN1') {
divLeftBut.classList.toggle('pressed', butEvt.pressed);
if (butEvt.pressed) {
drawGrid(GRID_HAPPY);
sendGrid();
}
return;
}
if (butEvt.button === 'BTN2') {
divRightBut.classList.toggle('pressed', butEvt.pressed);
if (butEvt.pressed) {
drawGrid(GRID_SAD);
sendGrid();
}
}
इसे आज़माएँ
अब micro:bit के किसी बटन को दबाने पर, एलईडी मैट्रिक्स को हैप्पी फ़ेस या सैड फ़ेस में बदल जाना चाहिए.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने वाले डायलॉग में, BBC micro:bit डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको micro:bits की एलईडी मैट्रिक्स पर एक स्माइली दिखेगी.
- micro:bit पर मौजूद बटन दबाएं और पुष्टि करें कि एलईडी मैट्रिक्स बदल रहा है.
8. सीरियल पोर्ट बंद करना
आखिरी चरण में, डिसकनेक्ट करने की सुविधा को हुक अप करना होता है, ताकि जब उपयोगकर्ता का काम पूरा हो जाए, तो पोर्ट बंद हो जाए.
उपयोगकर्ता के कनेक्ट/डिसकनेक्ट बटन पर क्लिक करने पर पोर्ट बंद करें
जब उपयोगकर्ता कनेक्ट करें/डिसकनेक्ट करें बटन पर क्लिक करता है, तो हमें कनेक्शन बंद करना होगा. अगर पोर्ट पहले से खुला है, तो disconnect()को कॉल करें और यूज़र इंटरफ़ेस (यूआई) को अपडेट करके यह दिखाएं कि पेज अब सीरियल डिवाइस से कनेक्ट नहीं है.
script.js - clickConnect()
// CODELAB: Add disconnect code here.
if (port) {
await disconnect();
toggleUIConnected(false);
return;
}
स्ट्रीम और पोर्ट बंद करना
disconnect फ़ंक्शन में, हमें इनपुट स्ट्रीम, आउटपुट स्ट्रीम, और पोर्ट को बंद करना होगा. इनपुट स्ट्रीम बंद करने के लिए, reader.cancel() को कॉल करें. cancel को एसिंक्रोनस तरीके से कॉल किया जाता है. इसलिए, हमें await का इस्तेमाल करके, इसके पूरा होने का इंतज़ार करना होगा:
script.js - disconnect()
// CODELAB: Close the input stream (reader).
if (reader) {
await reader.cancel();
await inputDone.catch(() => {});
reader = null;
inputDone = null;
}
आउटपुट स्ट्रीम को बंद करने के लिए, writer पाएं, close() को कॉल करें, और outputDone ऑब्जेक्ट के बंद होने का इंतज़ार करें:
script.js - disconnect()
// CODELAB: Close the output stream.
if (outputStream) {
await outputStream.getWriter().close();
await outputDone;
outputStream = null;
outputDone = null;
}
आखिर में, सीरियल पोर्ट बंद करें और इसके बंद होने का इंतज़ार करें:
script.js - disconnect()
// CODELAB: Close the port.
await port.close();
port = null;
इसे आज़माएँ
अब सीरियल पोर्ट को अपनी ज़रूरत के हिसाब से खोला और बंद किया जा सकता है.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- 'सीरियल पोर्ट चुनने वाला डायलॉग' में जाकर, BBC micro:bit डिवाइस चुनें. इसके बाद, कनेक्ट करें पर क्लिक करें.
- आपको micro:bit की एलईडी मैट्रिक्स पर एक स्माइली दिखेगी
- डिस्कनेक्ट करें बटन दबाएं और पुष्टि करें कि एलईडी मैट्रिक्स बंद हो गया है और कंसोल में कोई गड़बड़ी नहीं है.
9. बधाई हो
बधाई हो! आपने Web Serial API का इस्तेमाल करके, अपना पहला वेब ऐप्लिकेशन बना लिया है.
Web Serial API और Chrome टीम की ओर से वेब के लिए तैयार की जा रही अन्य नई सुविधाओं के बारे में जानने के लिए, https://goo.gle/fugu-api-tracker पर नज़र रखें.