+ (AppStore *) टिमेरा: एप्लीकेशन आर्किटेक्चर और डेवलपमेंट फीचर्स

हमारे टाइमरा ऐप के बारे में जनता को बताने का समय आ गया है। आज से इसे ऐपस्टोर में डाउनलोड किया जा सकता है।
हेक्सिमल (पावेल) , हमारे ios डेवलपर, टाइमरा आर्किटेक्चर के बारे में बताएंगे , उन्होंने केवल अब पढ़ा है, इसीलिए मैं उनकी पोस्ट प्रकाशित करता हूं।

-> इस पोस्ट में मैं एक बहुत ही मूल नाम टिमरा (शब्द समय और युग से) के साथ एक दिलचस्प और आशाजनक परियोजना में अपनी मामूली भागीदारी के बारे में लिखूंगा। सौभाग्य से, मैं उसी समय नए विकास क्षितिज की खोज के सक्रिय चरण में था जब स्टार्टअप प्रबंधन एक iOS डेवलपर रिक्ति के लिए एक उम्मीदवार की तलाश कर रहा था। परियोजना का सार काफी सरल है - इसकी दृश्य प्रस्तुति और वास्तुकला का वर्णन पोस्ट के लिए मुख्य चित्रण में कटौती के तहत देखा जा सकता है।





उपयोगकर्ता को स्मार्टफोन कैमरा द्वारा खींची गई तस्वीर के साथ अतीत से तस्वीरें मिलाकर एक अस्थायी सुरंग बनाने के लिए एक उपकरण के साथ प्रस्तुत किया जाता है। मुझे वास्तव में यह विचार पसंद आया, और मैंने तुरंत विकास प्रक्रिया में एकीकृत करना शुरू किया, जिसके दौरान मुझे कई कठिन और दिलचस्प कार्यों का सामना करना पड़ा।

सबसे पहले, मैं वैश्विक वास्तुकला के बारे में कुछ शब्द कहना चाहूंगा। सेंट्रल लिंक वह सर्वर है जो बैक-एंड, फ्रंट-एंड, डेटा स्टोरेज, वेब-एपीआई के कार्यों को करता है। मैं सर्वर स्टफिंग का विस्तार से वर्णन नहीं करूंगा, क्योंकि मेरा इससे कोई संबंध नहीं है। मैं केवल यह कह सकता हूं कि उत्पादन संस्करण Microsoft से क्लाउड होस्टिंग पर चलता है, और सर्वर-साइड के कार्यान्वयन के लिए हमने वर्तमान में क्लासिक स्टैक का उपयोग किया है: IIS + MSSQL + ASP.NET।

फ्रंट-एंड सिस्टम (वेबसाइट www.timera.com ) उपयोगकर्ता को अन्य उपयोगकर्ताओं की तस्वीरें देखने की क्षमता प्रदान करता है, और एक सामाजिक नेटवर्क की कार्यक्षमता से भी सुसज्जित है: टिप्पणियों को पसंद करने, छोड़ने की क्षमता है, अन्य सामाजिक नेटवर्क में शेयर फ़ंक्शन है। साथ ही, वेबसाइट के उपयोगकर्ता के पास एक पुरानी फोटो अपलोड करने का अवसर है। इसका क्या मतलब है और इसके लिए क्या है? इसके बारे में आगे।

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

ऐतिहासिक कालजयी शैली को संदर्भित करने के लिए "टिमरग्राफी" शब्द का उपयोग किया जाता है। वह नया नहीं है। आखिरकार, ये काम लंबे समय से इंटरनेट पर सर्फिंग कर रहे हैं और उनमें से कई बहुत वायरल हो गए हैं। एक को केवल 1906 में सैन फ्रांसिस्को में भूकंप के बारे में अपने स्लाइड शो के साथ सर्गेई लारेनकोव "कनेक्शन का समय" या शॉन क्लेवर की परियोजना को याद करना है। वास्तव में, एप्लिकेशन का नाम प्रोजेक्ट के संस्थापक डेविड वेब द्वारा गढ़ा गया था, बस "टाइमर" शब्द को छोटा कर रहा था। अब समय आ गया है कि आप खुद ही टाइगरग्राफी के थोड़े से मैकेनिकों को समझायें और इस प्रक्रिया को टिमेरा मोबाइल एप्लिकेशन में कैसे लागू किया जाता है।
मान लीजिए कि हमारे पास एफिल टॉवर की एक पुरानी तस्वीर है। मुझे व्यक्तिगत रूप से 1889 की तस्वीर पसंद है, जिस पर टॉवर केवल पहले स्तर पर बनाया गया था। टिमरा-स्नैपशॉट बनाने के लिए, आपको उस कोण को खोजने की आवश्यकता है जिसमें से पुरानी तस्वीर ली गई थी, एक तस्वीर लें, इसे कंप्यूटर पर "ओवरटेक" करें, और कुछ ग्राफिक्स एडिटर में विभिन्न फिल्टर और ग्रेडिएंट का उपयोग करके संयोजित करने के लिए। कार्य, कहते हैं, हर किसी के लिए नहीं है। लेकिन फिर यह टिमेरा एप्लिकेशन के प्रत्येक उपयोगकर्ता के लिए सस्ती है। पूरी प्रक्रिया को जितना संभव हो उतना सरल किया जाता है और यहां तक ​​कि यह बहुत अजीब लग सकता है (कम से कम मैं व्यक्तिगत रूप से इस तरह के बारे में सोचता हूं)।

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



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

सभी मोड में, स्क्रीन इशारों का उपयोग करके समय सुरंग के आकार और स्थिति को बदलना उपलब्ध है।

यह विरल प्रतीत होगा? शायद, लेकिन उपकरणों के इस सेट के साथ भी बहुत अच्छी रचनाएं बनाई जाती हैं। और प्लस सब कुछ, इस कार्यक्षमता का विस्तार करने की योजना है, इस बारे में पर्याप्त विचार हैं।
संपादन के बाद, परिणामी छवि दिखाई देती है, आप इसे सर्वर पर अपलोड कर सकते हैं और / या सामाजिक नेटवर्क पर साझा कर सकते हैं। सर्वर पर अपलोड करते समय, यदि आप अपना काम सार्वजनिक नहीं करना चाहते हैं, तो आप गोपनीयता ध्वज सेट कर सकते हैं।
यहां मैं आपको मुख्य उपयोग-मामले (टाइमर ग्राफ्टिंग) के निर्माण के दौरान आने वाली कठिनाइयों के बारे में कुछ बारीकियों को बताना चाहूंगा।

सबसे पहले, अप्रिय आश्चर्य UIDeviceOrientation प्रकार के दो मूल्यों की उपस्थिति थी। अतीत में, मैं iOS एक्सेलेरोमीटर और डिवाइस ओरिएंटेशन कॉन्सेप्ट के साथ काम करता था, और तब संभावित डिवाइस ओरिएंटेशन की संख्या चार थी: UIDeviceOrientationPortrait, UIDeviceOrientationPortraitUpsDown, UIDeviceOrientationLandscapeLeft, UIDeviceOrientationands। फ़ोटोग्राफ़िंग स्क्रीन पर, डिवाइस का अभिविन्यास बहुत महत्वपूर्ण है, क्योंकि ओवरले छवि को तदनुसार उन्मुख किया जाना चाहिए, ताकि पुरानी तस्वीर उल्टा न हो, या उसके किनारे पर झूठ न हो। जैसा कि यह निकला, डिवाइस के दो और स्थान हैं: UIDeviceOrientationFaceUp और UIDeviceOrientationFaceDown। इस तथ्य को महसूस करने और कार्यक्रम के अनुचित व्यवहार के कारण को पहचानने के लिए बहुत से मानव घंटे बिताए गए थे।

फोटोग्राफिंग स्क्रीन से संबंधित एक और दिलचस्प बिंदु डिवाइस के किनारे वॉल्यूम बटन के साथ समस्या थी: मानक कैमरा एप्लिकेशन में, वॉल्यूम बटन दबाने से शटर चालू होता है, जो बहुत सुविधाजनक है।
इसके अलावा, प्रौद्योगिकी का मामला है। किसी कारण से, हमारे फ़ोटोग्राफ़िंग स्क्रीन पर इन बटनों ने कोई प्रतिक्रिया नहीं दी, चाहे हमने कोई भी चाल चली हो, यहां तक ​​कि मीडिया प्रणाली से सूचनाओं के "सुन "ने के लिए भी मदद नहीं की।
यह लगभग इस तरह किया जाता है। वॉल्यूम परिवर्तन सूचनाएँ प्राप्त करने के लिए ViewController सदस्य।

[[NSNotificationCenter defaultCenter]
addObserver:self
selector:@selector(volumeChanged:)
name:@"AVSystemController_SystemVolumeDidChangeNotification"
object:nil];

जैसा कि बाद में पता चला, यह इस तथ्य के कारण है कि हम एक ओवरलेव्यू का उपयोग करते हैं, जिसमें उपयोगकर्ता पुरानी तस्वीर की पारदर्शिता को बदल सकता है, और आम तौर पर इसे देख सकता है। वही लोकप्रिय व्यवहार अन्य लोकप्रिय फोटो अनुप्रयोगों में पाया गया। उसी समय, फोटो खींचने के लिए मानक नियंत्रण का उपयोग करने वाले एप्लिकेशन वॉल्यूम बटन दबाने पर प्रतिक्रिया की कमी से ग्रस्त नहीं होते हैं।
सबसे बड़ा विकास समय, समय-सुरंग प्रभाव के साथ एक स्क्रीन को लागू करने पर खर्च किया गया था। समय सुरंग एल्गोरिथ्म मूल छवि से ढाल स्टैंसिल को घटाने की विधि पर आधारित है: मास्क पर छवि पिक्सेल जितना गहरा होता है, मुखौटे वाली छवि में उसी पिक्सेल का पारदर्शिता मूल्य कम होता है। सभी जादू मानक CoreGraphics फ्रेमवर्क और CGImageCreateWithMask फ़ंक्शन का उपयोग करके कार्यान्वित किया जाता है, जो ऊपर वर्णित दो छवियों को CGImageRef ऑब्जेक्ट के रूप में इनपुट पर भेजता है।

टिमरग्राफी का गठन तीन चरणों में होता है। चलो पृष्ठभूमि में छवि के लिए पदनाम "छवि ए" का उपयोग करने के लिए सहमत हैं, और अग्रभूमि में छवि के लिए "छवि बी"।

1. ढाल किनारों के साथ एक आयताकार मुखौटा खींचा जाता है और छवि बी पर लागू होता है। यह इसलिए किया गया था ताकि अस्थायी सुरंग कहीं भी तेज गति से न टूटे। यह ध्यान दिया जाना चाहिए कि उपयोगकर्ता के पास "छवि बी" को घुमाने की क्षमता है, उदाहरण के लिए, यदि क्षितिज कूड़े में है। इस प्रकार, मुखौटा निम्नलिखित मापदंडों के आधार पर बनता है: "छवि बी" का आकार, "छवि बी" का रोटेशन कोण, सीमा के धुंधला होने की मात्रा (स्लाइडर द्वारा समायोज्य)। परिणामस्वरूप मुखौटा "छवि बी" से घटाया जाता है, परिणाम धुंधली किनारों के साथ "छवि बी" है।



मुझे ढाल के प्रसार के साथ बहुत सी छेड़छाड़ करनी पड़ी, जिसे ग्राफिक संदर्भ के समन्वय मैट्रिक्स के परिवर्तनों के माध्यम से एक ही कोरग्राफिक्स का उपयोग करके किया गया था:

CGFloat angleInRadians = angle * (M_PI / 180);

CGContextRotateCTM(bmContext, angleInRadians);


उसी समय, एक अप्रत्याशित प्रभाव उत्पन्न हुआ, क्योंकि यह बाद में निकला, इस तथ्य के कारण कि, डिफ़ॉल्ट रूप से, पृष्ठ को छवि के ऊपरी बाएं कोने में घुमाया जाता है।



मैंने स्टैकओवरफ्लो पर एक सवाल भी पूछा, असफल संकेत खोज के बाद। हालाँकि, कोई उत्तर न मिलने पर, मैंने समाधान को आनुभविक रूप से पाया, और अपने स्वयं के प्रश्न का उत्तर छोड़ दिया (http://stackoverflow.com/questions/19219855/uiimageview-get-transformed-uiimage)

एक और आश्चर्य की बात है कि मुखौटा के लिए एक आयताकार ढाल (जैसे चित्रण में) तैयार करने के लिए तैयार तरीके की कमी थी। CoreGraphics में एक अण्डाकार के लिए एक समाधान है, लेकिन यह गोल किनारों के साथ एक आयताकार के लिए था जिसे मुझे आविष्कार करना था (http://stackoverflow.com/questions/18918382/coregraphics-rectangle-gradient - एक और उत्तर स्वयं)।

2. पहले चरण में प्रसंस्करण के परिणामस्वरूप प्राप्त "ग्रेड बी" के लिए एक ढाल मास्क तैयार और लागू किया जाता है। पहले चरण के विपरीत, उपयोगकर्ता मुखौटा के प्रकार को निर्दिष्ट कर सकता है: आयताकार या अण्डाकार प्लस एक ही मुखौटा आयाम, रोटेशन कोण, सीमा के धुंधला होने की डिग्री। उपयोगकर्ता स्क्रीन पर उंगलियों के साथ मुखौटा और स्थिति के आकार को बदलता है। इस प्रकार, समय सुरंग की एक छवि बनती है।



3. अंतिम चरण में, समय सुरंग के परिणामस्वरूप छवि को "छवि ए" पर वांछित निर्देशांक में खींचा जाता है।



मुझे कहना होगा कि CoreGraphics दुनिया की सबसे अधिक उत्पादक चीज़ों से दूर है, और यह विशेष रूप से पुराने उपकरणों पर ध्यान देने योग्य है, iPhone 4 और नीचे से शुरू होता है। इस संबंध में, कई उपायों की समयबद्धता को अपनाने के लिए कई उपाय किए गए थे। लेकिन इसके बारे में और दूसरे भाग में बहुत कुछ।

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