विंडोज स्टोर के लिए मास्को मेट्रो आवेदन

मैं जल्द ही मास्को मेट्रो के लिए एक आवेदन बनाना चाहता था, जैसे कि आर्टेम लेबेदेव और उनके स्टूडियो ने मेट्रो के नक्शे को अपने वर्तमान स्वरूप में आकर्षित किया।

1. स्रोत डेटा

अब मास्को मेट्रो की आधिकारिक वेबसाइट से पीडीएफ में आधिकारिक मेट्रो का नक्शा डाउनलोड किया जा सकता है। एप्लिकेशन (2013 के मध्य) के निर्माण के समय, सर्किट लेबेडेव स्टूडियो की वेबसाइट पर एक .ai फ़ाइल (एडोब इलस्ट्रेटर) के रूप में उपलब्ध था। किसी भी स्थिति में, इलस्ट्रेटर में डेटा तैयार करने के लिए अगला कदम है।

2. डेटा की तैयारी

इलस्ट्रेटर में पीडीएफ खोलें, पूर्वावलोकन मोड चालू करें और पास आउट करें।


एक लंबे और श्रमसाध्य काम के बाद (यहाँ, मास्को विज्ञापन अखबार में कई वर्षों का अनुभव काम आया, पहले डिजाइन और लेआउट विभाग में, फिर आईटी विभाग में)


क्या किया गया है:

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

- लाइनों के सभी "टुकड़े" और प्रत्येक पंक्ति से संबंधित सभी स्टेशनों को परतों में वर्गीकृत किया जाता है, जिस क्रम में वे पालन करते हैं।

3. ग्राफिक्स को XAML में बदलें

XAML ग्राफिक्स का अनुवाद करने के लिए Microsoft अभिव्यक्ति डिजाइन का उपयोग करता है । यहां सब कुछ सरल है - एआई-फ़ाइल खोलें, एक्सएएमएल को निर्यात करें।

4. प्रोग्रामिंग शुरू (अंत में)

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

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

तीन स्टेशनों (संक्षिप्तता, एनीमेशन के लिए जिम्मेदार संसाधन,) के बीच संक्रमण के प्रतिपादन के लिए जिम्मेदार व्यू-लेयर का एक उदाहरण:)

<ItemsControl x:Name="ArcCrossings" ItemsSource="{Binding CrossingArcTypeList}" Visibility="Visible" Height="1760" Width="1765"> <ItemsControl.ItemTemplate> <DataTemplate> <Grid x:Name="grid" Opacity="{Binding Dimmed, Converter={StaticResource BooleanToOpacityConverter}}"> <Path StrokeThickness="7.7" Stroke="{Binding CrossBrush}"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigureCollection> <PathFigure StartPoint="{Binding GradientLineStartPoint}"> <PathFigure.Segments> <PathSegmentCollection> <ArcSegment Point="{Binding GradientLineEndPoint}" Size="{Binding ArcSize}" SweepDirection="Clockwise"/> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathFigureCollection> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> <Path StrokeThickness="2.4" Stroke="{Binding SettingsVM.BackMainBrush, Source={StaticResource Locator}}"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigureCollection> <PathFigure StartPoint="{Binding BlackLineStartPoint}"> <PathFigure.Segments> <PathSegmentCollection> <ArcSegment Point="{Binding BlackLineEndPoint}" Size="{Binding ArcSize}" SweepDirection="Clockwise"/> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathFigureCollection> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> 

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

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

एक एक्सएमएल फ़ाइल का एक टुकड़ा जो कि टैग्सको-क्रास्नोस्प्रेन्सेकाया लाइन के किय-गोरोद स्टेशन और कलुगा-रीगा लाइन के लिए इसके विशिष्ट संक्रमण का वर्णन करता है:

 <Station name="-" lat="55.755361" lon="37.632361" Width="16.8277" Height="16.8282" Canvas.Left="1011.71" Canvas.Top="741.034" Data="F1 M 1017.45,746.771C 1015.97,748.25 1015.97,750.646 1017.45,752.125C 1018.93,753.604 1021.33,753.603 1022.8,752.125C 1024.29,750.646 1024.28,748.25 1022.81,746.77C 1021.33,745.292 1018.93,745.292 1017.45,746.771 ZM 1014.2,755.425C 1010.91,752.15 1010.88,746.824 1014.15,743.524C 1017.43,740.225 1022.75,740.2 1026.05,743.473C 1029.35,746.744 1029.38,752.071 1026.1,755.371C 1022.83,758.672 1017.51,758.695 1014.2,755.425 Z " TextLabel.Left="2" TextLabel.Top="-15" ShowPad="1" IsCrossPlatform="true" CrossPlatformColor="FFF37025"> <transfers> <forward> <transfer LineID="400" station="-"> <forward vagons="11111"/> <backward vagons="00100"/> </transfer> </forward> <backward> <transfer LineID="400" station="-"> <forward vagons="00100"/> <backward vagons="11111"/> </transfer> </backward> </transfers> </Station> 1024.28,748.25 1022.81,746.77C 1021.33,745.292 1018.93,745.292 1017.45,746.771 ZM 1014.2,755.425C 1010.91,752.15 1010.88 <Station name="-" lat="55.755361" lon="37.632361" Width="16.8277" Height="16.8282" Canvas.Left="1011.71" Canvas.Top="741.034" Data="F1 M 1017.45,746.771C 1015.97,748.25 1015.97,750.646 1017.45,752.125C 1018.93,753.604 1021.33,753.603 1022.8,752.125C 1024.29,750.646 1024.28,748.25 1022.81,746.77C 1021.33,745.292 1018.93,745.292 1017.45,746.771 ZM 1014.2,755.425C 1010.91,752.15 1010.88,746.824 1014.15,743.524C 1017.43,740.225 1022.75,740.2 1026.05,743.473C 1029.35,746.744 1029.38,752.071 1026.1,755.371C 1022.83,758.672 1017.51,758.695 1014.2,755.425 Z " TextLabel.Left="2" TextLabel.Top="-15" ShowPad="1" IsCrossPlatform="true" CrossPlatformColor="FFF37025"> <transfers> <forward> <transfer LineID="400" station="-"> <forward vagons="11111"/> <backward vagons="00100"/> </transfer> </forward> <backward> <transfer LineID="400" station="-"> <forward vagons="00100"/> <backward vagons="11111"/> </transfer> </backward> </transfers> </Station> 

5. निर्मित मार्गों के कुछ स्क्रीनशॉट (क्लिक करने योग्य)

6. योजना

अनुप्रयोग के विकास की शुरुआत के समय (मैं आपको याद दिलाता हूं कि यह शुरुआत या 2013 के मध्य में है), विंडोज 8 - 8.1 पर चर्चा की गई थी। दरअसल, आवेदन अभी भी "गैर-यूडब्ल्यूपी" है। तदनुसार, आवेदन में अभी भी विंडोज 8.1 का "जन्मचिह्न" है, विशेष रूप से, एप्लिकेशन सेटिंग्स का अस्पष्ट स्थान। मैं क्या कह सकता हूँ, विंडोज 10 में सेटिंग्स का "आकर्षण" "ए ला विंडोज 8.1" थोड़ा अलग दिखता है। समय के साथ, यह संभवतः बदल जाएगा।


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

अद्यतन

YouTube: अनुप्रयोग का प्रदर्शन