पिछला अपडेट: 01-11-2019
आप क्या बनाते हैं
इस कोडलैब में, आप एक ऐसा वेब पेज बना सकते हैं जो 5x5 LED मैट्रिक्स की इमेज दिखाने के लिए, वेब सीरियल एपीआई का इस्तेमाल करके, BBC माइक्रो:बिट बोर्ड के साथ इंटरैक्ट करे. आप वेब सीरियल एपीआई के बारे में जानेंगे. साथ ही, ब्राउज़र से सीरियल डिवाइस से संपर्क करने के लिए, पढ़ने लायक, लिखने, और स्ट्रीम के फ़ॉर्मैट को इस्तेमाल करने का तरीका भी जानेंगे.
आप क्या #39;जानेंगे
- वेब सीरियल पोर्ट को खोलने और बंद करने का तरीका
- इनपुट स्ट्रीम से डेटा मैनेज करने के लिए, 'लूप लूप' का इस्तेमाल कैसे करें
- राइट स्ट्रीम से डेटा भेजने का तरीका
आपको क्या चाहिए
- नए एस्प्रिनो फ़र्मवेयर के साथ BBC माइक्रो:बिट बोर्ड
- Chrome का नया वर्शन (78 या इसके बाद का वर्शन)
- एचटीएमएल, सीएसएस, JavaScript, और Chrome DevTools की जानकारी
हमने इस कोडलैब के लिए माइक्रो:बिट का इस्तेमाल करने का विकल्प चुना है, क्योंकि यह किफ़ायती है, कुछ इनपुट (बटन) और आउटपुट (5x5 एलईडी डिसप्ले) की सुविधा देता है. साथ ही, ज़्यादा इनपुट और आउटपुट दे सकता है. Esp:ino साइट पर BBC माइक्रो:बिट पेज देखें कि माइक्रो-बिट क्या काम कर सकता है.
वेब सीरियल एपीआई से, वेबसाइटों को किसी सीरियल डिवाइस की मदद से पढ़ने और लिखने की सुविधा मिलती है. इसके लिए, वेबसाइट स्क्रिप्ट का इस्तेमाल करती है. एपीआई, वेबसाइटों को माइक्रोकंट्रोलर और 3D प्रिंटर जैसे सीरियल डिवाइसों के साथ संपर्क करने की अनुमति देकर, वेब और लोगों की ज़िंदगी को बेहतर बनाता है.
वेब टेक्नोलॉजी का इस्तेमाल करके बनाए जाने वाले कंट्रोल सॉफ़्टवेयर के कई उदाहरण हैं. उदाहरण के लिए:
कुछ मामलों में, ये वेबसाइटें उपयोगकर्ता के ज़रिए मैन्युअल रूप से इंस्टॉल किए गए मूल एजेंट ऐप्लिकेशन के ज़रिए डिवाइस से संपर्क करती हैं. अन्य मामलों में, ऐप्लिकेशन को इलेक्ट्रोन जैसे फ़्रेमवर्क के ज़रिए पैकेज किए गए नेटिव ऐप्लिकेशन में डिलीवर किया जाता है. दूसरे मामलों में, उपयोगकर्ता को एक और चरण पूरा करना होता है. जैसे, यूएसबी फ़्लैश डिस्क की मदद से, डिवाइस पर कंपाइल किए गए ऐप्लिकेशन को कॉपी करना.
उपयोगकर्ता के अनुभव को साइट और कंट्रोल किए जा रहे डिवाइस के बीच सीधे तौर पर बातचीत करके बेहतर बनाया जा सकता है.
वेब सीरियल एपीआई चालू करें
फ़िलहाल, वेब सीरियल एपीआई पर अभी काम चल रहा है और यह सिर्फ़ फ़्लैग के पीछे उपलब्ध है. आपको chrome://flags में #enable-experimental-web-platform-features फ़्लैग चालू करना होगा.
कोड पाएं
हमने इस कोडलैब के लिए ज़रूरी सभी चीज़ें ग्लिच प्रोजेक्ट में डाल दी हैं.
- नया ब्राउज़र टैब खोलें और https://web-serial-codelab-start.glitch.me/ पर जाएं.
- स्टार्टर प्रोजेक्ट का अपना वर्शन बनाने के लिए, Remix ग्लिच लिंक पर क्लिक करें.
- दिखाएं बटन पर क्लिक करें. इसके बाद, अपनी कोड कार्रवाई को देखने के लिए नई विंडो में चुनें.
देखें कि वेब सीरियल एपीआई काम करता है या नहीं
सबसे पहले यह देखें कि वेब सीरियल एपीआई मौजूदा ब्राउज़र में काम करता है या नहीं. ऐसा करने के लिए, यह देखें कि serial, navigator में है या नहीं.
DOMContentLoaded इवेंट में, अपने प्रोजेक्ट में नीचे दिया गया कोड जोड़ें:
script.js - DOMContentLoaded
// CODELAB: Add feature detection here.
if ('serial' in navigator) {
const notSupported = document.getElementById('notSupported');
notSupported.classList.add('hidden');
}इससे यह पता चलता है कि वेब सीरियल काम करता है या नहीं. अगर ऐसा है, तो यह कोड उस बैनर को छिपा देता है जो बताता है कि वेब सीरियल काम नहीं करता है.
इसे आज़माएं
- पेज को लोड करें.
- पुष्टि करें कि पेज पर यह दिखाने वाला लाल बैनर न दिखे कि वेब सीरियल काम नहीं करता है.
सीरियल पोर्ट खोलें
इसके बाद, हमें सीरियल पोर्ट खोलना होगा. दूसरे आधुनिक एपीआई की तरह, वेब सीरियल एपीआई भी एसिंक्रोनस है. यह इनपुट का इंतज़ार करते समय, यूज़र इंटरफ़ेस (यूआई) को ब्लॉक करने से रोकता है, लेकिन यह भी ज़रूरी है कि वेब पेज को सीरियल डेटा किसी भी समय मिल सकता है. साथ ही, हमें इसे सुनने का तरीका भी चाहिए.
किसी कंप्यूटर में एक से ज़्यादा सीरियल डिवाइस हो सकते हैं, इसलिए जब ब्राउज़र किसी पोर्ट का अनुरोध करने की कोशिश करता है, तो उपयोगकर्ता को यह चुनने के लिए कहा जाता है कि वह कौनसा डिवाइस कनेक्ट करे.
अपने प्रोजेक्ट में यह कोड जोड़ें:
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 माइक्रो:बिट, यूएसबी-टू-सीरियल चिप और मुख्य प्रोसेसर के बीच 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 माइक्रो:बिट बोर्ड, 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")');टाइप करें
आपको पेज पर कुछ इस तरह से प्रिंट किया गया दिखेगा:
मैट्रिक्स ग्रिड स्ट्रिंग बनाना
माइक्रो:बिट पर एलईडी मैट्रिक्स को कंट्रोल करने के लिए, हमेंshow()को कॉल करना होगा. इस तरीके से, पहले से मौजूद 5x5 एलईडी स्क्रीन पर ग्राफ़िक दिखते हैं. यह बाइनरी नंबर या स्ट्रिंग लेता है.
हम चेकबॉक्स पर फिर से कार्रवाई करेंगे और 1 और 0 सेकंड की कैटगरी जनरेट करेंगे. इसमें बताया जाएगा कि कौनसा चेकबॉक्स चुना गया है और कौनसे. फिर हमें सारणी को उलटना होगा, क्योंकि हमारे चेकबॉक्स का क्रम मैट्रिक्स के LED के क्रम से उलट है. इसके बाद, हम अरे को स्ट्रिंग में बदलते हैं और माइक्रो:बिट पर भेजने के लिए निर्देश बनाते हैं.
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() की तरह ही काम करता है; यह 1s और 0s की रेंज लेता है और सही चेकबॉक्स को चुनता है.
script.js - clickConnect()
// CODELAB: Reset the grid on connect here.
drawGrid(GRID_HAPPY);
sendGrid();इसे आज़माएं
अब, जब पेज माइक्रो:बिट से कनेक्शन खोलता है, तो यह एक खुश चेहरा भेजेगा. चेकबॉक्स पर क्लिक करने से, एलईडी मैट्रिक्स पर डिसप्ले अपडेट हो जाएगा.
- पेज को फिर से लोड करें.
- कनेक्ट करें बटन पर क्लिक करें.
- सीरियल पोर्ट चुनने वाले डायलॉग बॉक्स में, BBC माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट एलईडी मैट्रिक्स पर एक मुस्कान दिखनी चाहिए.
- एलईडी मैट्रिक्स पर एक अलग पैटर्न बनाएं. इसके लिए चेकबॉक्स पर सही का निशान लगाएं.
माइक्रो:बिट बटन पर वॉच इवेंट जोड़ना
माइक्रो:बिट पर दो बटन होते हैं, एक एलईडी एलईडी मेट्रिक के दोनों ओर. 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 माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट एलईडी मेट्रिक पर एक मुस्कान दिखनी चाहिए.
- माइक्रो:बिट पर बने बटन दबाएं और पुष्टि करें कि दबाए गए बटन की जानकारी के साथ पेज में नया टेक्स्ट जुड़ता है.
स्ट्रीम की बुनियादी सुविधा
जब किसी एक माइक्रो:बिट बटन को पुश किया जाता है, तो माइक्रो:बिट स्ट्रीम से डेटा को सीरियल पोर्ट में भेज देता है. स्ट्रीम बहुत काम की होती हैं, लेकिन यह एक चुनौती भी हो सकती है, क्योंकि आपको एक ही बार में सारा डेटा मिल जाता है. साथ ही, यह आपके काम का हो सकता है.
ऐप्लिकेशन में, आने वाली स्ट्रीम प्रिंट होते ही पहुंच जाती है (readLoop में). ज़्यादातर मामलों में, हर वर्ण अपनी लाइन पर होता है, लेकिन यह बहुत ज़्यादा मददगार नहीं होता है. आम तौर पर, स्ट्रीम को अलग-अलग लाइन में पार्स किया जाना चाहिए. साथ ही, हर मैसेज को उसकी लाइन के तौर पर दिखाया जाना चाहिए.
स्ट्रीम को TransformStream से बदलना
ऐसा करने के लिए, हम ट्रांसफ़ॉर्म स्ट्रीमTransformStream का इस्तेमाल कर सकते हैं. इससे इनकमिंग स्ट्रीम को पार्स किया जा सकता है और पार्स किया गया डेटा दिखाया जा सकता है. ट्रांसफ़ॉर्म स्ट्रीम, स्ट्रीम स्रोत (इस मामले में, माइक्रो:बिट) और स्ट्रीम इस्तेमाल करने वाली किसी भी चीज़ (इस मामले में readLoop) के बीच बैठ सकती है. इसे किसी असेंबली लाइन की तरह देखें: जैसे-जैसे विजेट लाइन में आता है, लाइन के हर कदम पर विजेट में बदलाव होता जाता है, इसलिए जब तक यह अपने फ़ाइनल डेस्टिनेशन पर पहुंच जाता है, तब तक यह #33; पूरी तरह से काम करता रहता है.
ज़्यादा जानकारी के लिए, MDN'Sstreams एपीआई के कॉन्सेप्ट देखें.
स्ट्रीम को LineBreakTransformer से बदलें
Let's से एक LineBreakTransformer क्लास बनती है, जो एक स्ट्रीम को देखेगी और लाइन ब्रेक के आधार पर उसे बनाती है (\r\n). इस क्लास के लिए दो तरीके, transform और flush होने चाहिए. हर बार स्ट्रीम से नया डेटा मिलने पर, transform तरीके को कॉल किया जाता है. यह डेटा को कतार में रख सकता है या बाद में देखने के लिए सेव कर सकता है. स्ट्रीम के बंद होने पर flush तरीके का इस्तेमाल किया जाता है. साथ ही, यह ऐसे किसी भी डेटा को हैंडल करता है जिसमें अभी तक #39;प्रोसेस नहीं हुआ है.
हमारे 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 माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट एलईडी मैट्रिक्स पर एक मुस्कान दिखनी चाहिए.
- माइक्रो:बिट पर दिए गए बटन दबाएं और पुष्टि करें कि आपको कुछ इस तरह का दिखता है:
स्ट्रीम को 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 माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट एलईडी मैट्रिक्स पर एक मुस्कान दिखनी चाहिए.
- माइक्रो:बिट पर दिए गए बटन दबाएं और पुष्टि करें कि आपको कुछ इस तरह का दिखता है:
बटन दबाने पर जवाब देना
माइक्रो:बिट बटन दबाने पर जवाब पाने के लिए, readLoop को अपडेट करके देखें कि उसे मिला डेटा button प्रॉपर्टी वाला object है या नहीं. इसके बाद, बटन पुश करने के लिए buttonPushed पर कॉल करें.
script.js - readLoop()
const { value, done } = await reader.read();
if (value && value.button) {
buttonPushed(value);
} else {
log.textContent += value + '\n';
}जब माइक्रो:बिट बटन पुश किया जाता है, तो एलईडी मैट्रिक्स पर डिसप्ले बदल जाना चाहिए. मैट्रिक्स सेट करने के लिए इस कोड का इस्तेमाल करें:
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 माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट एलईडी मेट्रिक पर एक मुस्कान दिखनी चाहिए.
- माइक्रो:बिट पर मौजूद बटन दबाएं और पुष्टि करें कि एलईडी मैट्रिक्स बदल रहा है.
आखिरी चरण में, उपयोगकर्ता के हो जाने पर पोर्ट बंद करने के लिए डिसकनेक्ट करने की सुविधा को हुक कर दें.
जब उपयोगकर्ता कनेक्ट करें/डिसकनेक्ट करें बटन पर क्लिक करे, तब पोर्ट बंद कर दें
जब उपयोगकर्ता कनेक्ट करें/डिसकनेक्ट करें बटन पर क्लिक करता है, तब हमें कनेक्शन बंद करना होगा. अगर पोर्ट पहले से खुला हुआ है, तो 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;
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 माइक्रो:बिट डिवाइस चुनें और कनेक्ट करें पर क्लिक करें.
- आपको माइक्रो:बिट एलईडी मैट्रिक्स पर एक मुस्कान दिखनी चाहिए
- डिसकनेक्ट करें बटन दबाएं और पुष्टि करें कि एलईडी मैट्रिक्स बंद हो जाता है और कंसोल में कोई गड़बड़ी नहीं है.
बधाई हो! आपने पहला वेब ऐप्लिकेशन बना लिया है, जो वेब सीरियल एपीआई का इस्तेमाल करता है.
वेब सीरियल एपीआई और Chrome टीम के सभी नए बेहतरीन वेब क्षमताओं के बारे में नई जानकारी पाने के लिए https://goo.gle/fugu-api-tracker पर नज़र रखें.