🏵️ 🧝🏿 👨🏼 सैमसंग, एलजी, फिलिप्स और अन्य के लिए स्मार्टबॉक्स लाइब्रेरी पर आधारित क्रॉस-प्लेटफॉर्म स्मार्ट टीवी एप्लिकेशन का निर्माण 👨🏿‍⚖️ 🏚️ 🙏🏽

स्मार्टबॉक्स लाइब्रेरी के बारे में पिछले लेख में गहरी रुचि के कारण, जिसे किसी भी क्रॉस-प्लेटफॉर्म स्मार्टटीवी एप्लिकेशन के लिए आधार बनने के लिए डिज़ाइन किया गया है, मैंने यह वर्णन करने का निर्णय लिया कि स्मार्टवेट उपकरणों के तीन विक्रेताओं के लिए एक ही बार में इस तरह के एप्लिकेशन को कैसे बनाया जाए:

तो, इस लेख में आपको बहुत उपयोगी मिलेगा यदि आप:

शुरुआत स्मार्ट'स्ट लेकिन क्लासिक js / html अनुप्रयोगों में अनुभव है
उन्नत js / html डेवलपर और क्रॉस-प्लेटफॉर्म SmartTV समाधान के लिए एक मंच की तलाश करें
शुरुआती जेएस / html डेवलपर और कट्टर के साथ शुरू करना चाहते हैं
एक परीक्षक जिसे तृतीय पक्षों द्वारा विकसित अनुप्रयोगों को चलाने की आवश्यकता होती है

लेख "झोंके" निकला और स्पॉइलर का एक गुच्छा - इसलिए सामग्री की तालिका:

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

आवेदन परीक्षण

SmartTv अनुप्रयोगों के विकास में डूबने के बाद, आप अंततः एक या दूसरे तरीके से अपनी रचना का परीक्षण करने के लिए मजबूर होंगे। SmartTv के परीक्षण के ताओ में अनुक्रमिक बिंदु होते हैं:

ब्राउज़र परीक्षण
विक्रेता एमुलेटर में परीक्षण
समापन बिंदु परीक्षण

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

वेंडर एमुलेटर में चल रहे हैं

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

सैमसंग एमुलेटर में एप्लिकेशन कैसे चलाएं

एमुलेटर के नवीनतम संस्करण में एप्लिकेशन को चलाने के लिए, आपको आवश्यकता है: एमुलेटर खुद, जो वर्चुअलबॉक्स के लिए छवि है और एसडीके पृष्ठ पर डाउनलोड के लिए उपलब्ध है। छवि को आयात करने के बाद, आपको अपनी परियोजनाओं के साथ निर्देशिका को पथ निर्दिष्ट करने और वर्चुअल मशीन शुरू करने की आवश्यकता है। याद रखने वाली मुख्य बात यह है कि वर्चुअल मशीन में डायरेक्टरी का नाम Apps होना चाहिए। स्क्रीनशॉट में आपको स्पष्टीकरण मिलेंगे।

(तस्वीरें क्लिक करने योग्य हैं)

सैमसंग एमुलेटर (पुराने एसडीके) में एप्लिकेशन कैसे चलाएं

यदि आप आधिकारिक एसडीके का उपयोग करके एक एप्लिकेशन विकसित कर रहे हैं, तो बस एक समस्या नहीं हो सकती है, एक बड़ा स्टार्ट बटन है। उस स्थिति में जब आप केवल एप्लिकेशन चलाना चाहते हैं, आपको प्रोजेक्ट को SDK एप्लिकेशन डायरेक्टरी में रखना होगा और आपको आवश्यक एप्लिकेशन का चयन करके एमुलेटर को चलाना होगा। तस्वीरें दिखाती हैं कि यह कैसे करना है।

(तस्वीरें क्लिक करने योग्य हैं)

एलजी एमुलेटर में एप्लिकेशन कैसे चलाएं

एमुलेटर शुरू करने के बाद, जो एसडीके के साथ स्थापित किया गया है, और वास्तव में टीवी ओएस से एक वर्चुअल मशीन है, आप अपने एप्लिकेशन का URL निर्दिष्ट कर सकते हैं (हां, एप्लिकेशन को http के माध्यम से सुलभ होना चाहिए, यह अपाचे / डेनिवर / नेग्नेक्स पर एक स्थानीय सेवा भी हो सकती है)। चित्र क्रियाओं का क्रम दिखाते हैं।
(तस्वीरें क्लिक करने योग्य हैं)

फिलिप्स एमुलेटर में एप्लिकेशन कैसे चलाएं

शायद GUI डेवलपर्स के लिए हो सकने वाली सबसे "अद्भुत" चीज एमुलेटर शुरू होने पर एक कंसोल प्राप्त करना है। मैं कुछ नहीं कहूंगा, अपने लिए देखें

(तस्वीरें क्लिक करने योग्य हैं)

सैमसंग ने रिमोट उपकरणों पर एक लैब शुरू करके अनुप्रयोगों के परीक्षण में अगला कदम उठाया। वास्तव में, ये वास्तविक उपकरण हैं जो आपको अपने दिमाग की उपज के सभी कार्यों की जांच करने की अनुमति देते हैं जो एमुलेटर में नहीं देखे जा सकते हैं (उदाहरण के लिए, सभी प्रारूपों के साथ खिलाड़ी का काम, DRM सिस्टम के साथ बातचीत)।

हमारे एप्लिकेशन को लॉन्च करने के लिए, आपको प्रयोगशाला वेबसाइट पर एक डिवाइस का चयन करना होगा और निर्देशों का पालन करना होगा:

सैमसंग रिमोट टेस्ट सिस्टम में एप्लिकेशन कैसे चलाएं

(तस्वीरें क्लिक करने योग्य हैं)

स्मार्ट टीवी पर लॉन्च

हम सबसे सरल, मेरी राय में, अंतिम उपयोगकर्ता उपकरणों पर एप्लिकेशन इंस्टॉल करने और परीक्षण करने के तरीके पर विचार करेंगे। इसके लिए हमें चाहिए:

एलजी के लिए - php समर्थन के साथ Http सर्वर।
मैंने आवेदन http://paunin.com/content/demoApp/index.html पर पोस्ट किया है
आवेदन ही, यह स्मार्टबॉक्स लाइब्रेरी के रिपॉजिटरी में लिया जा सकता है, demo/demoApp ;

आप सार्वजनिक डेमो के पते का उपयोग कर सकते हैं http://immosmart.imtqy.com/smartbox/demo/demoApp/ यदि किसी कारण से आपके पास एप्लिकेशन को प्रकाशित करने के लिए HTTP सर्वर नहीं है। हालांकि, मैं यह नोट करना चाहता हूं कि प्रयोग और अनुप्रयोग विकास की संभावना के लिए, एक HTTP सर्वर आवश्यक है (जब तक, निश्चित रूप से, आप विक्रेता प्रलेखन में वर्णित वैकल्पिक स्थापना विधियों का उपयोग नहीं करेंगे)

सभी विक्रेताओं के लिए संक्षिप्त निर्देश (निचोड़)

सैमसंग

10-12 प्लेटफार्म :

उपयोगकर्ता खाते में लॉग करता है (रिमोट पर बटन A)
क्षेत्र में प्रकार सैमसंग: विकसित
पासवर्ड फ़ील्ड में: 123456 (अन्य कोई भी उपयुक्त होना चाहिए)
"लॉगिन" का चयन करता है
रिमोट कंट्रोल पर एंटर बटन दबाएं
लॉग इन किया
रिमोट कंट्रोल पर D बटन दबाएं (कुछ टीवी पर, TOOLS बटन)
विकास चुनता है
रिमोट कंट्रोल पर एंटर बटन दबाएं
"सर्वर आईपी पता कॉन्फ़िगर करें" का चयन करता है।
रिमोट कंट्रोल पर एंटर बटन दबाएं
आईपी पते को डायल करना: 82.146.41.200
रिमोट कंट्रोल रिटर्न को दबाता है
"उपयोगकर्ता अनुप्रयोग सिंक" का चयन करता है
रिमोट कंट्रोल पर एंटर बटन दबाएं
ऐप अपडेट जारी है

13 मंच :

स्मार्ट हब बटन दबाएं
अपने विकसित खाते में प्रवेश करें (मेनू - स्मार्ट सुविधाएँ -> सैमसंग खाता -> लॉगिन (नाम: विकास; पासवर्ड: sso1029dev!)
स्मार्ट हब स्क्रीन पर, नीचे एक "अधिक एप्लिकेशन" टैब है, आपको उस पर क्लिक करने की आवश्यकता है
स्क्रीन के ऊपरी दाएं कोने में विकल्प का चयन करें।
ड्रॉप-डाउन मेनू से आईपी सेटिंग्स का चयन करें
आईपी 82.146.41.200 डायल करें
ऊपरी दाएं कोने में फिर से विकल्प चुनें
ड्रॉप-डाउन सूची से ऐप सिंक चुनें

* कुछ मामलों में, टीवी को थर्ड-पार्टी एप्लिकेशन इंस्टॉल करने की अनुमति की आवश्यकता होती है, जो डेवलपर की कुंजी द्वारा प्रदान की जाती है, जिसे सैमसंग आरएनडी ( http://samsungdforum.com/ ) से संपर्क करके प्राप्त किया जा सकता है, जो विक्रेताओं द्वारा किए गए अवैध वितरण को दबाने के लिए बनाया गया है।

एलजी

संग्रह को http://paunin.com/content/lg_drm.zip से USB- फ्लैश पर कॉपी करें
संग्रह को अनज़िप करें ताकि फ़ाइलों का पथ: USB- फ्लैश / lgapps / स्थापित / रूट, आदि।
टीवी के यूएसबी पोर्ट में यूएसबी-फ्लैश डालें
टीवी चालू करें (रिमोट कंट्रोल पर पावर)
रिमोट कंट्रोल पर प्रेस होम - स्मार्ट टीवी एलजी के लिए एक संक्रमण होगा
रिमोट कंट्रोल पर लाल बटन दबाएं - आपके खाते में प्रवेश करने के लिए एक फॉर्म दिखाई देगा
लॉगिन फ़ील्ड में डायल करें: अपना लॉगिन% दर्ज करें (यदि कोई लॉगिन नहीं है, तो रजिस्टर करें, टीवी पर फंड हैं)
पासवर्ड फ़ील्ड में अपना पासवर्ड% लिखें
ठीक पर क्लिक करें - आपको अपने खाते में लॉग इन किया जाएगा और एलजी स्मार्ट टीवी पर वापस स्थानांतरित कर दिया जाएगा
निचले दाएं कोने में "मेरे एप्लिकेशन" चुनें
रिमोट कंट्रोल पर पेज डाउन (चैनलों को स्विच करने का बटन) दबाएं - यह यूएसबी पर मेरे अनुप्रयोगों पर स्विच हो जाएगा
अनुप्रयोग चलाएँ

फिलिप्स

फिलिप्स स्मार्ट टीवी पर एप्लिकेशन लॉन्च करने के लिए, टीवी ब्राउज़र में http://goo.gl/o93keD लिंक खोलें

पूर्ण स्थापना निर्देश

सैमसंग टीवी / बीडी पर एप्लिकेशन को चलाने के लिए। आपको सर्वर के मूल में widgetlist.xml बनाना होगा, जिसे आईपी एड्रेस द्वारा एक्सेस किया जा सकता है। उदाहरण के लिए, http://xxx.xxx.xxx.xxx/widgetlist.xml। मैंने फ़ाइल को http://82.146.41.200/widgetlist.xml पर पोस्ट किया है । फ़ाइल, बस, एप्लिकेशन इंस्टॉल करने की एक सूची है। विगेट्स की सूची में मुख्य तत्व download नोड है, जहां आपके एप्लिकेशन के ज़िप संग्रह का लिंक इंगित किया गया है। बाकी मापदंडों का कोई फर्क नहीं पड़ता, यहां तक कि आकार भी। जैसा कि आप हमारी विजेट सूची से देख सकते हैं, मैंने इसे http://paunin.com/content/smartbox.zip पर ज़िप और मोड़ा।

अब जो कुछ बचता है वह है डिवाइस को अपना IP पता c widgetlist.xml और एप्लिकेशन को अपडेट करना। यह मॉडल के आधार पर डिवाइस के माध्यम से किया जाता है:

10-12 प्लेटफार्म

उपयोगकर्ता खाते में लॉग करता है (रिमोट पर बटन A)
क्षेत्र में प्रकार सैमसंग: विकसित
पासवर्ड फ़ील्ड में: 123456 (अन्य कोई भी उपयुक्त होना चाहिए)
"लॉगिन" का चयन करता है
रिमोट कंट्रोल पर एंटर बटन दबाएं
लॉग इन किया
रिमोट कंट्रोल पर D बटन दबाएं (कुछ टीवी पर, TOOLS बटन)
विकास चुनता है
रिमोट कंट्रोल पर एंटर बटन दबाएं
"सर्वर आईपी पता कॉन्फ़िगर करें" का चयन करता है।
रिमोट कंट्रोल पर एंटर बटन दबाएं
आईपी पते को डायल करना: 82.146.41.200
रिमोट कंट्रोल रिटर्न को दबाता है
"उपयोगकर्ता अनुप्रयोग सिंक" का चयन करता है
रिमोट कंट्रोल पर एंटर बटन दबाएं
ऐप अपडेट जारी है

13 मंच

स्मार्ट हब बटन दबाएं
अपने विकसित खाते में प्रवेश करें (मेनू - स्मार्ट सुविधाएँ -> सैमसंग खाता -> लॉगिन (नाम: विकास; पासवर्ड: sso1029dev!)
स्मार्ट हब स्क्रीन पर, नीचे एक "अधिक एप्लिकेशन" टैब है, आपको उस पर क्लिक करने की आवश्यकता है
स्क्रीन के ऊपरी दाएं कोने में विकल्प का चयन करें।
ड्रॉप-डाउन मेनू से आईपी सेटिंग्स का चयन करें
आईपी 82.146.41.200 डायल करें
ऊपरी दाएं कोने में फिर से विकल्प चुनें
ड्रॉप-डाउन सूची से ऐप सिंक चुनें

शायद सवाल में सभी उपकरणों की सबसे रोमांचक खोज। एलजी एप्लिकेशन को स्थापित करने के लिए, इसे डेवलपर के पेज (पंजीकरण / प्राधिकरण आवश्यक) पर पंजीकृत होना चाहिए।
चित्रों में बताई गई सभी चीजों को भरें और परिणामी फाइल को डाउनलोड करें।
यदि किसी को इसकी आवश्यकता है, तो मैंने अपनी फ़ाइल http://paunin.com/content/lg_wrapper.zip पर पोस्ट की।

आवेदन रजिस्टर करें

(तस्वीरें क्लिक करने योग्य हैं)

और अब वह सब कुछ एप्लिकेशन को वितरित करना है (अधिक सटीक रूप से, इसके हस्ताक्षर, आवेदन खुद इंटरनेट पर है) टीवी पर:

एप्लिकेशन इंस्टॉलेशन - औपचारिक निर्देश

संग्रह को http://paunin.com/content/lg_drm.zip से USB- फ्लैश पर कॉपी करें
संग्रह को अनज़िप करें ताकि फ़ाइलों का पथ: USB- फ्लैश / lgapps / स्थापित / रूट, आदि।
टीवी के यूएसबी पोर्ट में यूएसबी-फ्लैश डालें
टीवी चालू करें (रिमोट कंट्रोल पर पावर)
रिमोट कंट्रोल पर प्रेस होम - स्मार्ट टीवी एलजी के लिए एक संक्रमण होगा
रिमोट कंट्रोल पर लाल बटन दबाएं - आपके खाते में प्रवेश करने के लिए एक फॉर्म दिखाई देगा
लॉगिन फ़ील्ड में डायल करें: अपना लॉगिन% दर्ज करें (यदि कोई लॉगिन नहीं है, तो रजिस्टर करें, टीवी पर फंड हैं)
पासवर्ड फ़ील्ड में अपना पासवर्ड% लिखें
ठीक पर क्लिक करें - आपको अपने खाते में लॉग इन किया जाएगा और एलजी स्मार्ट टीवी पर वापस स्थानांतरित कर दिया जाएगा
निचले दाएं कोने में "मेरे एप्लिकेशन" चुनें
रिमोट कंट्रोल पर पेज डाउन (चैनलों को स्विच करने का बटन) दबाएं - यह यूएसबी पर मेरे अनुप्रयोगों पर स्विच हो जाएगा
अनुप्रयोग चलाएँ

फिलिप्स स्मार्टटीवी उपकरणों पर एप्लिकेशन लॉन्च करने के लिए, हमें बस इसे HTTP पते को निर्दिष्ट करके ब्राउज़र में लॉन्च करने की आवश्यकता है। हमारे मामले में, हम http://paunin.com/content/demoApp/index.html पते का उपयोग करते हैं। हालांकि, ब्राउज़र शुरू करने के तुरंत बाद, आप फ़ोकस में तत्वों के चारों ओर देशी फ़्रेमों को नोटिस करेंगे, जो एक कॉम्बैट एप्लिकेशन के लिए स्वीकार्य नहीं है, और जो वास्तव में एलजी हब में एप्लिकेशन रखते समय नहीं होगा।

सर्वर से जवाब देते समय आवश्यक हेडर्स को इंगित करके सब कुछ हल किया जाता है, अर्थात् " application/ce-html+xml "। यह php एप्लिकेशन में मौजूद philips.php philips.php द्वारा नियंत्रित किया जाता है। तदनुसार, हमें http://paunin.com/content/demoApp/philips.php जैसा पता मिलता है। टीवी रिमोट कंट्रोल से पतों की डायलिंग को तेज करने के लिए, आप लिंक को छोटा करने वाली सेवा का उपयोग कर सकते हैं, उदाहरण के लिए, http://goo.gl/ । मुझे पता http://goo.gl/o93keD मिला

अनुप्रयोग विकास

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

अधीर के लिए - तैयार आवेदन

अनुप्रयोग संरचना

अनुप्रयोग कॉन्फ़िगरेशन

एप्लिकेशन कॉन्फ़िगरेशन को कई फ़ाइलों में संग्रहीत किया जाना चाहिए, और उनमें से सभी सैमसंग प्लेटफ़ॉर्म से संबंधित हैं:

Widget.info विकल्प (केवल सैमसंग)

यह स्व-व्याख्यात्मक मापदंडों के साथ एक नियमित पाठ फ़ाइल है, जहां हम जिस पैरामीटर में रुचि रखते हैं वह Screen Resolution , जो उस संकल्प को निर्धारित करता है जिसके लिए आपका आवेदन लिखा गया है, वर्तमान में अनुशंसित एचडी 1280x720 । मान्य: एसडी 960x540 और फुलएचडी 1920x1080

 Use Alpha Blending = Yes Screen Resolution = 1280x720

Config.xml विकल्प (केवल सैमसंग)

फुल डॉक

 <?xml version="1.0" encoding="UTF-8"?> <widget> <voice>y</voice> <!--     --> <mouse>y</mouse> <!--       --> <previewjs itemtype="string"></previewjs> <preicon itemtype="string"></preicon> <cpname itemtype="string"></cpname> <cplogo itemtype="string"></cplogo> <cpauthjs itemtype="string"></cpauthjs> <ver itemtype="string">0.1</ver> <!--   --> <mgrver itemtype="string"></mgrver> <fullwidget itemtype="boolean">y</fullwidget> <srcctl itemtype="boolean">y</srcctl> <ticker itemtype="boolean">n</ticker> <childlock itemtype="boolean">n</childlock> <audiomute itemtype="boolean">y</audiomute> <!--            --> <videomute itemtype="boolean">y</videomute> <!--           --> <dcont itemtype="boolean">y</dcont> <widgetname itemtype="string">SmartBox DemoApp</widgetname> <!--  /,      --> <description itemtype="string"></description> <!--  / --> <width itemtype="number">1280</width> <!--   -  --> <height itemtype="number">720</height> <!--   -  --> <author itemtype="group"> <!--   --> <name itemtype="string">Smart</name> <email itemtype="string">info@example.com</email> <link itemtype="string">https://github.com/immosmart/smartbox</link> <organization itemtype="string">Smart</organization> </author> <!--     (    ),         --> <ThumbIcon itemtype="string">icon/sb_demo_115x95.png</ThumbIcon> <BigThumbIcon itemtype="string">icon/sb_demo_115x95.png</BigThumbIcon> <BigListIcon itemtype="string">icon/sb_demo_95x78.png</BigListIcon> <ListIcon itemtype="string">icon/sb_demo_85x70.png</ListIcon> </widget>

index.html

हमारे एप्लिकेशन को लॉन्च करते समय, index.html फ़ाइल हमेशा खुलती है, जिसमें सभी लाइब्रेरी और हमारी स्क्रिप्ट्स जुड़े हुए हैं, साथ ही साथ प्रारंभिक लेआउट भी।

index.html शामिल फ़ाइलों और लेआउट के विवरण के साथ

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"/> <title>Smartbox demo</title> <!--   --> <link rel="stylesheet" href="css/input.css"/> <link rel="stylesheet" href="css/keyboard.css"/> <link rel="stylesheet" href="css/legend.css"/> <!-- --> <link rel="stylesheet" href="css/style.css"/> <!--  Smartbox--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script> <!--  Smartbox--> <script type="text/javascript" src="js/lib/smartbox.js"></script> <!--  --> <script type="text/javascript" src="js/app.js"></script> <!--     --> <script type="text/javascript" src="videos.js"></script> <!----> <script type="text/javascript" src="js/scenes/videos.js"></script> <script type="text/javascript" src="js/scenes/navigation.js"></script> <script type="text/javascript" src="js/scenes/input.js"></script> <!--         --> <script type="text/javascript" src="js/legendTriggers.js"></script> </head> <body> <!--for better view in browser--> <div class="bg"></div> <div class="wrap"> <!--   --> <div class="menu"> <div class="logo"></div> <ul class="menu-items" data-nav_type="vbox" data-nav_loop="true"> <li data-content='video' class="menu-item menu-item_green nav-item">Videos</li> <li data-content='input' class="menu-item menu-item_blue nav-item">Inputs</li> <li data-content='navigation' class="menu-item menu-item_red nav-item">Navigation</li> </ul> </div> <!--//   --> <!----> <div class="scenes-wrapper"> <!--   (     scenes/videos.js )--> <div class="scene scene_video js-scene-video" data-nav_type="vbox" data-nav_loop="true"> <!--<div data-url="http://smartimmo.ru/uploaded/big_buck_bunny_480p_h264.mp4" data-type="vod" class="video-item nav-item">Big Buck Bunny</div> <div data-url="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" data-type="vod" class="video-item nav-item">Elephants Dream</div> <div data-url="http://europaplus.cdnvideo.ru/europaplus-live/eptv_main.sdp/playlist.m3u8" data-type="hls" class="video-item nav-item">HLS test</div> <div data-url="http://phone.pik-tv.com/live/mp4:piktv3pik3tv/playlist.m3u8" data-type="hls" class="video-item nav-item">HLS test 2</div> <div data-url="http://live.iphone.redbull.de.edgesuite.net/webtvHD.m3u8" data-type="hls" class="video-item nav-item focus">HLS test 3</div>--> </div> <!--//  --> <!--  input'--> <div class="scene scene_input js-scene-input"> <div class="input-example"> <h2>Standart input</h2> <input class="input-item js-input-1 nav-item"/> <div class="input-val"> Input value: <span class="js-input-1-val"></span> </div> </div> <div class="input-example"> <h2>Input with email keyboard</h2> <input class="input-item js-input-2 nav-item"/> </div> <div class="input-example"> <h2>Input with num keyboard and maximum 4 signs</h2> <input class="input-item js-input-3 nav-item"/> </div> </div> <!--//  input'--> <!--  --> <div class="scene js-scene-navigation"> <ul class="navigation-items"> <li class="navigation-item nav-item">1</li> <li class="navigation-item nav-item">2</li> <li class="navigation-item nav-item">3</li> <li class="navigation-item nav-item">4</li> <li class="navigation-item nav-item">5</li> <li class="navigation-item nav-item">6</li> <li class="navigation-item nav-item">7</li> <li class="navigation-item nav-item">8</li> </ul> <p class="navigation-info"></p> </div> <!--//  --> </div> <!--//--> </div> </body> </html>

यहां सबसे महत्वपूर्ण बात यह है कि नेविगेशन का संगठन है। nav-item वर्ग के साथ सभी दृश्य तत्व बाद में फ़ोकस और ट्रिगर इवेंट प्राप्त कर सकते हैं ( focus , click , आदि)। नेविगेशन का अनुकूलन करने के लिए, data-nav_type="vbox" उपयोग साइड मेनू में और वीडियो स्टेज पर किया जाता है, जो नेविगेशन प्लगइन को बताता है कि "पृष्ठ पर तत्वों की स्थिति के अनुसार दिशा खोज का उपयोग बंद कर दें, और फोकस एक टिबलिंग एलीमेंट से दूसरे तक जाना शुरू हो जाता है, जो बहुत तेज़ है" (c) नेविगेशन प्रलेखन । एक अन्य हैक data-nav_loop="true" विशेषता है, जो आपको इस तत्व के भीतर नेविगेशन को लूप करने की अनुमति देता है।

ऐप ऐप मुख्य वस्तु

आइए js/app.js फ़ाइल पर js/app.js के प्रारंभ के बाद, SB.ready(_.bind(App.initialize, App)); एप्लिकेशन को SB.ready(_.bind(App.initialize, App)); जाता SB.ready(_.bind(App.initialize, App)); , जिससे किंवदंती $$legend.show(); किंवदंती का शुभारंभ हो रहा है। $$legend.show(); और ईवेंट हैंडलर्स को जोड़ना this.setEvents(); मेनू आइटम, खिलाड़ी, रिमोट कंट्रोल कुंजी से। फ़ाइल में अतिरिक्त टिप्पणियां।

लीजेंड चेंज ट्रिगर

जबकि एप्लिकेशन चल रहा है, हम उपयोगकर्ता को रिमोट कंट्रोल पर कुछ कुंजियों के उपयोग पर संकेत देना चाहते हैं। घटना के आधार पर किंवदंती को अपडेट करने का सबसे आसान तरीका है। यह js/legendTriggers.js फ़ाइल js/legendTriggers.js । जब nav_focus या nav_focus फ़ोकस हो जाता है nav_blur तो हम window.$$legend.keys लेजेंड एलिमेंट्स देते window.$$legend.keys भिन्न मान जो तुरंत संबंधित आइकॉन के साथ प्रदर्शित होते हैं।

वीडियो स्ट्रीम संग्रह

किसी भी एप्लिकेशन की तरह, हमारे पास प्रदर्शन, उपयोगकर्ता इंटरैक्शन या आंतरिक सेटिंग्स के लिए एक डेटा स्रोत होना चाहिए। videos दृश्य के लिए हमारा सारा डेटा वीडियो.जेएस videos.js में संग्रहीत है। यह केवल एक उदाहरण है, और इसलिए एक वास्तविक एप्लिकेशन को एक अलग तरीके से डेटा प्राप्त करने की संभावना है। वैश्विक कोड ऑब्जेक्ट window.App.videos = [...] में कोड का यह टुकड़ा ऑब्जेक्ट्स की एक सरणी (स्ट्रीम और उनके नाम के लिंक के साथ) को window.App.videos = [...] । इसके अलावा, दृश्य फ़ाइल में, इस सरणी का विस्तार किया जाएगा और html में div.scene_video में डाला जाएगा।

अनुप्रयोग दृश्य

दृश्य वैश्विक window.App में संग्रहीत एक ही संरचना के ऑब्जेक्ट हैं window.App ऑब्जेक्ट, जिसे दिखाया जाता है और छिपाया जाता है कि किस मेनू आइटम पर click गया था click

दृश्य कोड

मेनू आइटम पर क्लिक करके ईवेंट्स हैंगिंग:

 //js/app.js $('.menu').on('click', '.menu-item', function ( e ) { var scene = e.currentTarget.getAttribute('data-content'); self.showContent(scene); });)

वह विधि जो दृश्यों के प्रदर्शन को आरंभ करती है:

 //js/app.js showContent: function ( scene ) { var cur = this.currentScene, newScene = this.scenes[scene]; if ( cur !== newScene ) { if ( !newScene ) { $$error('Scene ' + scene + ' doesn\'t exist'); } else { if ( cur ) { cur.hide(); } newScene.show(); this.currentScene = newScene; } } }

मैं दृश्यों के कार्यान्वयन पर विस्तार से ध्यान नहीं दूंगा, लेकिन मैं स्मार्टबॉक्स लाइब्रेरी से संबंधित केवल बारीकियों का वर्णन करूंगा।

videos.js

जैसा कि ऊपर उल्लेख किया गया है, html में this.renderItems(App.videos); को तैनात करने के बाद वीडियो स्ट्रीम का एक संग्रह this.renderItems(App.videos); , nav-item तत्व में वर्ग के कारण नेविगेशन के लिए उपलब्ध है। जब दृश्य प्रारंभिक हो जाता है, सभी वीडियो स्ट्रीम इवेंट हैंडलर को प्राप्त करते हैं this.$el.on('click', '.video-item', this.onItemClick); , जहां Player.play(...) स्ट्रीम Player.play(...) । खिलाड़ी प्रलेखन ।

input.js

एक दृश्य में कीबोर्ड के संचालन को प्रदर्शित करने के लिए input, एक कीबोर्ड एक विधि के माध्यम से प्रत्येक व्यक्तिगत इनपुट क्षेत्र से जुड़ा होता है SBInput। कीबोर्ड प्रलेखन में आपकी अपनी भाषाओं और लेआउट को जोड़ने के बारे में जानकारी शामिल है।

कीबोर्ड कनेक्शन उदाहरण

, email js-input-2 , , click :

 //js/scene/input.js this.$el.find('.js-input-2').SBInput({ keyboard: { type: 'email' } });

navigation.js

दृश्य घटनाओं दिखा nav_focusऔर nav_blurवर्ग के साथ आइटम के लिए navigation-item, नहीं अलग नेविगेशन की बारीकियों और बस प्रतिस्थापन जानकारी ब्लॉक लागू करता है जब ध्यान में तत्व को बदलने।

मुख्य दृश्य कोड

 //js/scene/navigation.js init: function () { var $info; this.$el = $('.js-scene-navigation'); $info = this.$el.find('.navigation-info'); this.$el .find('.navigation-item') .on( { 'nav_focus': function () { $info.html('Item with text "' + this.innerHTML + '" focused'); }, 'nav_blur': function () { $info.html(''); } }); _inited = true; }

डेवलपर संसाधन लिंक

स्मार्टबॉक्स लाइब्रेरी

भंडार - github.com/immosmart/smartbox ।
पूर्ण डेमो - immosmart.imtqy.com/smartbox/demo/demoApp/ ।
समाधान के लेखक:
- चिनिन डेनिस (chininden [at] gmail.com),
- Poletsky Artyom (artempoletsky [at] gmail.com पर),
- इल्या पोपोविच (लॉसहाडुस्का [पर] gmail.com),
- शामगुनोव इल्डार (il.shamgunov [at] gmail.com),
- पौन दिमित्री ( ज़मीद )।
- लोगोव पावेल ( प्लोगिनॉफ़ ),
- स्मोरोडिन एंटोन ( मेलकोव )।
प्रोजेक्ट के टास्क ट्रैकर , जहां आप एक प्रश्न पूछ सकते हैं, एक कार्य बना सकते हैं या कार्यान्वयन में एक कार्य ले सकते हैं।

आप सभी का धन्यवाद और आपका सप्ताह मंगलमय हो!

पुनश्च

डेवलपर्स के लिए जो परियोजना में भाग लेना चाहते हैं और पुस्तकालय का विस्तार करना चाहते हैं, हम हमेशा खुश हैं और पुल अनुरोधों की प्रतीक्षा करते हैं

युपीडी

एसटीबी एमएजी 200/250 पर समर्थन और स्टार्टअप विधि