एचटीएमएल 5: जावास्क्रिप्ट के माध्यम से बैटरी का उपयोग

एचटीएमएल 5 विनिर्देश भर रहा है और एपीआई धीरे-धीरे दिखाई देने लगे हैं, जिससे आप उस डिवाइस के बारे में जानकारी प्राप्त कर सकते हैं जिस पर एप्लिकेशन चल रहा है। नवीनतम में से एक बैटरी स्थिति एपीआई है । जैसा कि आप अनुमान लगा सकते हैं, एपीआई आपको जावास्क्रिप्ट का उपयोग करके बैटरी की जानकारी प्राप्त करने की अनुमति देता है। तो अब आपके पास अपने पेज पर भारी एनीमेशन को डिस्कनेक्ट करने का अवसर है, उपयोगकर्ता को डेटा को सहेजने या स्थानीय भंडारण में सक्रिय रूप से सहेजने की पेशकश करें। आप यहां एक काम करने का उदाहरण पा सकते हैं । यह ध्यान दिया जाना चाहिए कि जब मैंने पेज खोला तो "बैटरी टाइम बचे" प्रॉपर्टी उपलब्ध नहीं थी। लेकिन यह कुछ मिनटों में अपडेट हो गया।

मैंने मोज़िला के नवीनतम बीटा संस्करणों से इस एपीआई का परीक्षण किया और यह अभी तक मैक पर काम नहीं करता है (लेकिन आईओएस, एंड्रॉइड और विंडोज पर काम करता है)। मुझे चार्जिंग स्टेटस का सकारात्मक परिणाम भी नहीं मिला, लेकिन डिस्चार्ज का समय और बैटरी स्तर सही ढंग से काम करता है। इस छोटे से उदाहरण में, हम बस एक साधारण पृष्ठ पर एपीआई से जानकारी प्रदर्शित करते हैं, जैसे यह एक (मेरे टैबलेट से स्क्रीन):

इस लेख में हम विचार करेंगे:

• बैटरी एपीआई का उपयोग करना
• एपीआई से जानकारी प्रदर्शित करने के लिए फ़ील्ड बनाना
• बैटरी की स्थिति प्रदर्शित करने के लिए एक चित्र बनाना
• जानकारी को अद्यतन करने के लिए EventListener का उपयोग करना

आइए एपीआई के त्वरित परिचय से शुरू करते हैं।

बैटरी एपीआई का उपयोग करना

बहुत आसान है - एपीआई में केवल कुछ ही गुण हैं जो आपके पास (कल्पना से) हैं:

[NoInterfaceObject] interface BatteryManager : EventTarget { readonly attribute boolean charging; readonly attribute double chargingTime; readonly attribute double dischargingTime; readonly attribute double level; }; 

चार्जिंग प्रॉपर्टी इंगित करती है कि क्या हम चार्जिंग से जुड़े हैं, चार्जटाइम पूरी तरह से चार्ज होने तक शेष समय का रिटर्न देता है, डिस्चार्जिंग टाइम तब तक दिखाता है जब तक कि यह पूरी तरह से डिस्चार्ज न हो जाए, और लेवल यह दर्शाता है कि आपने कितने प्रतिशत का चार्ज प्रतिशत के रूप में छोड़ा है। बहुत सरल है।

इन गुणों के अतिरिक्त, API कई कॉलबैक को परिभाषित करता है:

 [TreatNonCallableAsNull] attribute Function? onchargingchange; [TreatNonCallableAsNull] attribute Function? onchargingtimechange; [TreatNonCallableAsNull] attribute Function? ondischargingtimechange; [TreatNonCallableAsNull] attribute Function? onlevelchange; 

आप इन कॉलबैक के लिए फ़ंक्शंस को पंजीकृत कर सकते हैं जो हर बार गुणों में से किसी एक परिवर्तन के बाद निष्पादित होंगे।

एपीआई से जानकारी प्रदर्शित करने के लिए फ़ील्ड बनाना

आइए कुछ सरल क्षेत्रों से शुरू करें, जिनमें हम बैटरी के बारे में जानकारी प्रदर्शित करेंगे। निम्नलिखित HTML का उपयोग करें:

 <div id="box"> <div id="battery"></div> <div id="text"> <span style="display: block;margin-bottom:15px;font-size: xx-large;"><strong>Battery specifications</strong></span> <span style="display: block" id="level">Battery level: unknown</span> <span style="display: block" id="status">Charging status: unknown</span> <span style="display: block" id="charged">Battery charged: unknown</span> </div> </div> 

और जावास्क्रिप्ट:

 // get the battery information var battery = navigator.mozBattery; // get the battery information to be displayed $('#level').text("Battery level: " + Math.round(battery.level * 100) + "%"); $('#status').text("Charging status: " + ((battery.charging) ? "true" : "false")); if (battery.charging) { $('#charged').text("Battery time to charge: " + battery.chargingTime); } else { $('#charged').text("Battery time left: " + (Math.round(battery.dischargingTime / 60)) + " minutes"); } 

जैसा कि आप ऊपर दिए गए कोड से देख सकते हैं - कहीं भी आसान नहीं है। हम बैटरी स्तर भी प्रदर्शित करते हैं।

बैटरी की स्थिति प्रदर्शित करने के लिए एक चित्र बनाना

मैं विवरण में नहीं जाऊंगा क्योंकि यह उबाऊ है। लेकिन अगर आप अभी भी रुचि रखते हैं, तो स्रोत कोड देखें । इस उदाहरण के लिए, मैंने एक साधारण बैटरी ऑब्जेक्ट (नोकिया से एक उदाहरण के आधार पर) बनाया और अपडेटबैट विधि को कॉल करके मैं बैटरी स्तर सेट कर सकता हूं। आरंभीकरण के लिए, नीचे दिए गए कोड का उपयोग करें:

 var b = new Battery("assets/bat_empty.png", "assets/bat_full.png", 96, 168); $("#battery").append(b.domElement); b.updateBattery(battery.level * 100); 

जानकारी को अद्यतन करने के लिए EventListener का उपयोग करना

अंत में, बैटरी गुणों में प्रत्येक परिवर्तन के बाद निष्पादित होने वाले EventListeners की एक जोड़ी जोड़ें:

 // when the loader is connected battery.addEventListener("chargingchange", function (e) { $('#status').text("Charging status: " + ((battery.charging) ? "true" : "false")); }, false); // when charging time changes update the time to charge / time left battery.addEventListener("chargingtimechange", function (e) { if (battery.charging) { $('#charged').text("Battery time to charge: " + battery.chargingTime); } else { $('#charged').text("Battery time left: " + (Math.round(battery.dischargingTime / 60)) + " minutes"); } }, false); // when dischargingtime changes update the time to charge / time left battery.addEventListener("dischargingtimechange", function (e) { if (battery.charging) { $('#charged').text("Battery time to charge: " + (Math.round(battery.dischargingTime / 60)) + " minutes"); } else { $('#charged').text("Battery time left: " + (Math.round(battery.dischargingTime / 60)) + " minutes"); } }, false); // listener that is notified when the level changes battery.addEventListener("levelchange", function (e) { $('#level').text("Battery level: " + Math.round(battery.level * 100) + "%"); b.updateBattery(100 * battery.level) }, false); 

बस सही है? वास्तव में अच्छी खबर यह है कि एपीआई सभी उपकरणों पर काम करता है। मेरे मोबाइल पर ऐसा दिखता है:



Windows पर (VM पर चल रहा है), ऐसा दिखता है: