1. परिचय
पिछली बार अपडेट किए जाने की तारीख: 21-07-2020
आपको क्या बनाना होगा
इस कोडलैब में, आपको एक ऐसा वेब पेज बनाना होगा जो Web सीरियल API का इस्तेमाल करके, BBCmicro:bit बोर्ड के 5x5 एलईडी मैट्रिक्स पर इमेज दिखाने के लिए उससे इंटरैक्ट करे. आपको Web Serial API के बारे में पता चलेगा. साथ ही, ब्राउज़र के ज़रिए सीरियल डिवाइसों से कनेक्ट करने के लिए, पढ़ने लायक, लिखने लायक, और स्ट्रीम को बदलने के तरीके के बारे में भी जानकारी मिलेगी.
आपको इनके बारे में जानकारी मिलेगी
- वेब सीरियल पोर्ट को खोलने और बंद करने का तरीका
- किसी इनपुट स्ट्रीम का डेटा मैनेज करने के लिए, रीड लूप का इस्तेमाल कैसे करें
- राइट स्ट्रीम से डेटा भेजने का तरीका
आपको इन चीज़ों की ज़रूरत होगी
- सबसे नया Espruino फ़र्मवेयर वाला बीबीसी माइक्रो:बिट बोर्ड
- Chrome का नया वर्शन (80 या उसके बाद का वर्शन)
- एचटीएमएल, सीएसएस, JavaScript, और Chrome DevTools के बारे में जानकारी
हमने इस कोडलैब के लिए, माइक्रो:बिट का इस्तेमाल करने का विकल्प चुना है, क्योंकि यह किफ़ायती है, कुछ इनपुट (बटन) और आउटपुट (5x5 LED डिसप्ले) देता है, और अतिरिक्त इनपुट और आउटपुट दे सकता है. Micro:bit क्या-क्या कर सकता है, इसके बारे में जानकारी के लिए Espruino साइट पर BBC Micro:bit पेज देखें.
2. Web Serial API के बारे में जानकारी
Web Serial API की मदद से वेबसाइटें, स्क्रिप्ट वाले सीरियल डिवाइस से कॉन्टेंट को पढ़ सकती हैं और उसमें बदलाव कर सकती हैं. एपीआई, वेबसाइटों को माइक्रोकंट्रोलर और 3D प्रिंटर जैसे सीरियल डिवाइसों से संपर्क करने की अनुमति देकर, वेब और असल दुनिया को आपस में जोड़ता है.
वेब टेक्नोलॉजी का इस्तेमाल करके बनाए जा रहे कंट्रोल सॉफ़्टवेयर के कई उदाहरण हैं. उदाहरण के लिए:
कुछ मामलों में, ये वेबसाइटें ऐसे नेटिव एजेंट ऐप्लिकेशन के ज़रिए डिवाइस से संपर्क करती हैं जिसे उपयोगकर्ता मैन्युअल तरीके से इंस्टॉल करता है. अन्य मामलों में, ऐप्लिकेशन को Electronicn जैसे फ़्रेमवर्क के ज़रिए पैकेज किए गए नेटिव ऐप्लिकेशन में डिलीवर किया जाता है. अन्य मामलों में, उपयोगकर्ता को एक अतिरिक्त चरण पूरा करना पड़ता है, जैसे कि यूएसबी फ़्लैश ड्राइव की मदद से, कंपाइल किए गए ऐप्लिकेशन को डिवाइस में कॉपी करना.
साइट और उसके ज़रिए कंट्रोल किए जाने वाले डिवाइस के बीच सीधे तौर पर बातचीत करके, उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है.
3. सेट अप किया जा रहा है
कोड पाएं
हमने इस कोडलैब के लिए, आपकी ज़रूरत की सभी चीज़ों को Glitch प्रोजेक्ट में शामिल कर दिया है.
- नया ब्राउज़र टैब खोलें और https://web-serial-codelab-start.glitch.me/ पर जाएं.
- स्टार्टर प्रोजेक्ट का अपना वर्शन बनाने के लिए, रीमिक्स ग्लिच लिंक पर क्लिक करें.
- अपने कोड को काम करते हुए देखने के लिए, दिखाएं बटन पर क्लिक करें और फिर नई विंडो में चुनें.
4. सीरियल कनेक्शन खोलना
यह देखना कि Web Serial API काम करता है या नहीं
सबसे पहले यह देखें कि Web सीरियल एपीआई मौजूदा ब्राउज़र के साथ काम करता है या नहीं. ऐसा करने के लिए, देखें कि 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 काम करता है या नहीं. अगर ऐसा है, तो यह कोड उस बैनर को छिपा देता है, जिसमें बताया गया है कि Web Serial काम नहीं करता.
इसे आज़माएँ
- पेज लोड करें.
- पुष्टि करें कि पेज पर लाल रंग का यह बैनर न दिखे कि Web सीरियल का इस्तेमाल नहीं किया जा सकता.
सीरियल पोर्ट खोलें
इसके बाद, हमें सीरियल पोर्ट खोलना होगा. अन्य मॉडर्न एपीआई की तरह, 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, USB-से-सीरियल चिप और मुख्य प्रोसेसर के बीच 9600 बॉड कनेक्शन का उपयोग करता है.
कनेक्ट बटन को भी जोड़ें और जब उपयोगकर्ता उस पर क्लिक करे, तब उसे connect() पर कॉल करें.
अपने प्रोजेक्ट में यह कोड जोड़ें:
script.js - clickConnect()
// CODELAB: Add connect code here.
await connect();
इसे आज़माएँ
अब हमारे प्रोजेक्ट को शुरू करना कम से कम ज़रूरी सीमा तक पहुंच गया है. कनेक्ट करें बटन पर क्लिक करने से, उपयोगकर्ता को निर्देश मिलता है कि वह सीरियल डिवाइस से कनेक्ट हो. इसके बाद, माइक्रो:बिट से कनेक्ट हो जाता है.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने के डायलॉग बॉक्स में, BBC माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- टैब पर, आपको यह बताने वाला एक आइकॉन दिखेगा कि आपने सीरियल डिवाइस से कनेक्ट किया है:
सीरियल पोर्ट से डेटा सुनने के लिए, इनपुट स्ट्रीम सेट अप करें
कनेक्ट हो जाने के बाद, हमें एक इनपुट स्ट्रीम और एक रीडर सेट अप करना होगा, ताकि डिवाइस का डेटा पढ़ा जा सके. सबसे पहले, हम 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 माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको 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 read-eval-print लूप (REPL) की तरह काम करता है. यह Node.js शेल की तरह ही काम करता है. इसके बाद, हमें स्ट्रीम में डेटा भेजने का एक तरीका बताना होगा. नीचे दिए गए कोड को आउटपुट स्ट्रीम से राइटर मिलता है और इसके बाद हर लाइन को भेजने के लिए write का इस्तेमाल किया जाता है. भेजी जाने वाली हर पंक्ति में एक नई पंक्ति वाला वर्ण (\n) शामिल होता है, जो माइक्रो:बिट को भेजे गए निर्देश की जाँच करने के लिए कहता है.
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);');
इसे आज़माएँ
हमारा प्रोजेक्ट अब माइक्रो:बिट से डेटा भेज और प्राप्त कर सकता है. आइए, देखते हैं कि हम सही तरीके से निर्देश भेज सकते हैं या नहीं:
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने के डायलॉग बॉक्स में, BBC माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- Chrome DevTools में कंसोल टैब खोलें और
writeToStream('console.log("yes")');टाइप करें
आपको पेज पर कुछ इस तरह प्रिंट होगा:
5. एलईडी मैट्रिक्स को कंट्रोल करें
मैट्रिक्स ग्रिड स्ट्रिंग बनाना
माइक्रो:बिट पर मौजूद LED मैट्रिक्स को कंट्रोल करने के लिए, हमें show() पर कॉल करना होगा. इस तरीके में, पहले से मौजूद 5x5 एलईडी स्क्रीन पर ग्राफ़िक दिखाए जाते हैं. इसके लिए एक बाइनरी संख्या या स्ट्रिंग डालें.
हम चेकबॉक्स को फिर से देखेंगे और 1 और 0 की एक कलेक्शन जनरेट करेंगे. इससे पता चलेगा कि कौनसा चेक किया गया है और कौनसा नहीं. हमें फिर कलेक्शन को उलटा करना होगा, क्योंकि हमारे चेकबॉक्स का क्रम, मैट्रिक्स में दी गई एलईडी लाइटों के क्रम से बिलकुल उलट होता है. इसके बाद, हम अरे को स्ट्रिंग में बदलते हैं और माइक्रो:बिट में भेजने के लिए कमांड बनाते हैं.
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('')})`);
मैट्रिक्स को अपडेट करने के लिए, चेकबॉक्स को चुनें
इसके बाद, हमें चेकबॉक्स पर हुए बदलावों को ध्यान से सुनना होगा और अगर वे बदल जाते हैं, तो उन्हें माइक्रो:बिट पर भेजना होगा. सुविधा की पहचान वाले कोड (// CODELAB: Add feature detection here.) में, यह लाइन जोड़ें:
script.js - DOMContentLoaded
initCheckboxes();
माइक्रो:बिट के पहली बार कनेक्ट होने पर, ग्रिड को रीसेट करते हैं, ताकि यह खुश चेहरा दिखाए. drawGrid() फ़ंक्शन पहले से ही दिया गया है. यह फ़ंक्शन sendGrid() की तरह ही काम करता है; यह 1 और 0 की कैटगरी लेता है. साथ ही, ज़रूरत के हिसाब से चेकबॉक्स पर सही का निशान लगाता है.
script.js - clickConnect()
// CODELAB: Reset the grid on connect here.
drawGrid(GRID_HAPPY);
sendGrid();
इसे आज़माएँ
अब, जब पृष्ठ माइक्रो:बिट से कोई कनेक्शन खोलता है, तो वह खुश चेहरा भेज देता है. चेकबॉक्स पर क्लिक करने से, एलईडी मैट्रिक्स का डिसप्ले अपडेट हो जाएगा.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने के डायलॉग बॉक्स में, BBC माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट LED मैट्रिक्स पर एक मुस्कान दिखाई देगी.
- चेकबॉक्स को बदलकर, एलईडी मैट्रिक्स पर कोई दूसरा पैटर्न बनाएं.
6. माइक्रो:बिट बटन जोड़ें
माइक्रो:बिट बटन पर स्मार्टवॉच से जुड़ा कोई इवेंट जोड़ना
माइक्रो:बिट पर दो बटन होते हैं, एक LED मैट्रिक्स के दोनों ओर. 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');
इसे आज़माएँ
कनेक्ट होने पर खुश चेहरा दिखाने के अलावा, माइक्रो:बिट पर किसी भी बटन को दबाने से, पेज पर टेक्स्ट जुड़ जाएगा, जिससे पता चलेगा कि कौनसा बटन दबाया गया था. इस बात की ज़्यादा संभावना है कि हर वर्ण अपनी लाइन में होगा.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने के डायलॉग बॉक्स में, BBC माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट्स LED मैट्रिक्स पर एक मुस्कान दिखाई देगी.
- माइक्रो:बिट पर बटन दबाएं और पुष्टि करें कि यह दबाए गए बटन के विवरण के साथ पेज पर नया टेक्स्ट जोड़ता है.
7. आने वाले डेटा को पार्स करने के लिए ट्रांसफ़ॉर्म स्ट्रीम का इस्तेमाल करें
स्ट्रीम को बुनियादी तौर पर मैनेज करना
जब माइक्रो:बिट बटन में से किसी एक को पुश किया जाता है, तो माइक्रो:बिट किसी स्ट्रीम के ज़रिए सीरियल पोर्ट पर डेटा भेजता है. स्ट्रीम बहुत उपयोगी होती हैं, लेकिन वे आपके लिए चुनौती की तरह भी हो सकती हैं, क्योंकि यह ज़रूरी नहीं है कि आपको सभी डेटा एक साथ मिल जाएं और वे मनचाहे तरीके से बंटे हुए हो सकते हैं.
ऐप्लिकेशन फ़िलहाल, इनकमिंग स्ट्रीम के आने पर उसे प्रिंट करता है (readLoop में). ज़्यादातर मामलों में, हर वर्ण अपनी लाइन में होता है, लेकिन यह ज़्यादा मददगार नहीं होता. आम तौर पर, स्ट्रीम को अलग-अलग लाइन में पार्स किया जाना चाहिए. साथ ही, हर मैसेज को उसकी लाइन के तौर पर दिखाया जाना चाहिए.
TransformStream की मदद से स्ट्रीम में बदलाव किया जा रहा है
ऐसा करने के लिए, हम स्ट्रीम ट्रांसफ़ॉर्म ( TransformStream) का इस्तेमाल कर सकते हैं. इससे इनकमिंग स्ट्रीम को पार्स करने और पार्स किया गया डेटा लौटाने में मदद मिलती है. एक ट्रांसफ़ॉर्म स्ट्रीम, स्ट्रीम सोर्स (इस मामले में, माइक्रो:बिट) और स्ट्रीम का इस्तेमाल करने वाली किसी भी चीज़ (इस मामले में 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 से तक प्रोसेस किया गया था. इसलिए, हमें अपने नए LineBreakTransformer से जोड़ने के लिए, एक और pipeThrough जोड़ना होगा.
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()));
इसे आज़माएँ
अब, जब आप माइक्रो:बिट बटन में से कोई एक बटन दबाते हैं, तो प्रिंट किया गया डेटा एक ही पंक्ति में लौटाया जाना चाहिए.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने के डायलॉग बॉक्स में, BBC माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट LED मैट्रिक्स पर एक मुस्कान दिखाई देगी.
- माइक्रो:बिट पर बटन दबाएं और सत्यापित करें कि आपको निम्न जैसा कुछ दिखाई देता है:
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()));
इसे आज़माएँ
अब, जब आप माइक्रो:बिट बटन में से कोई एक बटन दबाते हैं, तो आपको पेज पर प्रिंट किया हुआ [object Object] दिखाई देगा.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने के डायलॉग बॉक्स में, BBC माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट LED मैट्रिक्स पर एक मुस्कान दिखाई देगी.
- माइक्रो:बिट पर बटन दबाएं, और सत्यापित करें कि आपको निम्न जैसा कुछ दिखाई देता है:
बटन दबाने पर जवाब देना
माइक्रो:बिट बटन दबाए जाने का जवाब देने के लिए, readLoop को अपडेट करें, ताकि यह पता लगाया जा सके कि उसे मिला डेटा, button प्रॉपर्टी वाला object है या नहीं. इसके बाद, बटन पुश करने के लिए buttonPushed पर कॉल करें.
script.js - readLoop()
const { value, done } = await reader.read();
if (value && value.button) {
buttonPushed(value);
} else {
log.textContent += value + '\n';
}
जब माइक्रो:बिट बटन पुश किया जाता है, तो LED मैट्रिक्स पर डिस्प्ले बदल जाना चाहिए. मैट्रिक्स को सेट करने के लिए, नीचे दिए गए कोड का इस्तेमाल करें:
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();
}
}
इसे आज़माएँ
अब जब आप माइक्रो:बिट बटन में से किसी एक को दबाते हैं, तो आपको एलईडी मैट्रिक्स को बदलकर खुश चेहरे या उदास चेहरे को दिखाया जाना चाहिए.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने के डायलॉग बॉक्स में, BBC माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट्स LED मैट्रिक्स पर एक मुस्कान दिखाई देगी.
- माइक्रो:बिट पर बटन दबाएं और पुष्टि करें कि LED मैट्रिक्स बदल गया है.
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 माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट LED मैट्रिक्स पर एक मुस्कान दिखेगी
- डिसकनेक्ट करें बटन दबाएं और पुष्टि करें कि एलईडी मैट्रिक्स बंद हो और कंसोल में कोई गड़बड़ी न हो.
9. बधाई हो
बधाई हो! आपने Web Serial API का इस्तेमाल करने वाला पहला वेब ऐप्लिकेशन बना लिया है.
वेब सीरियल एपीआई और वेब से जुड़ी उन सभी नई शानदार सुविधाओं के बारे में जानने के लिए https://goo.gle/fugu-api-tracker पर नज़र रखें जिन पर Chrome टीम काम कर रही है.