नोड इंटरफ़ेस बनाने के लिए WxPython का उपयोग करने का एक उदाहरण। भाग 1: ड्रा करना सीखना

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

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

इसलिए मैं कुछ लेखों में स्क्रैच से विकास की प्रक्रिया का वर्णन करने के लिए काम करने की कोशिश करूंगा। खैर, इसे दिलचस्प बनाने के लिए, और फार्मवर्क सार्वभौमिक था, इसके लिए पहला काम सिमुलिंक की तरह नहीं होगा, लेकिन फ्लोचार्ट को ला विसियो ड्राइंग के लिए सॉफ्टवेयर, लेकिन इसके लाठी और अन्य प्रतिभागियों के साथ :)

भाग 1: ड्रा करना सीखना
भाग 2: माउस ईवेंट्स को हैंडल करना
भाग 3: सुविधाओं + कीबोर्ड प्रसंस्करण को जोड़ने के लिए जारी है
भाग 4: ड्रैग एंड ड्रॉप को लागू करना
भाग 5: नोड कनेक्ट करें

कौन परवाह करता है, बिल्ली के नीचे आपका स्वागत है ...


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

1. पहला परीक्षण

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

import wx from MoveMe.Canvas.Canvas import Canvas class CanvasWindow(wx.Frame): def __init__(self, *args, **kw): wx.Frame.__init__(self, *args, **kw) s = wx.BoxSizer(wx.VERTICAL) s.Add(Canvas(self), 1, wx.EXPAND) self.SetSizer(s) if __name__ == '__main__': app = wx.PySimpleApp() CanvasWindow(None).Show() app.MainLoop() 

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

2. आकर्षित करने के लिए सीखना

वास्तव में कैनवास के साथ, हमारी रूपरेखा शुरू होती है। वह वस्तुओं के भंडारण के लिए ज़िम्मेदार है (हम उन्हें नोड्स कहेंगे), उपयोगकर्ता इंटरैक्शन का उनका प्रतिपादन और प्रसंस्करण। तदनुसार, हम एक साधारण ड्राइंग से शुरू करते हैं।

 import wx class Canvas(wx.PyScrolledWindow): """ Canvas stores and renders all nodes and node connections. It also handles all user interaction. """ def __init__(self, *args, **kw): super(Canvas, self).__init__(*args, **kw) self.scrollStep = kw.get("scrollStep", 10) self.canvasDimensions = kw.get("canvasDimensions", [800, 800]) self.SetScrollbars(self.scrollStep, self.scrollStep, self.canvasDimensions[0]/self.scrollStep, self.canvasDimensions[1]/self.scrollStep) self._dcBuffer = wx.EmptyBitmap(*self.canvasDimensions) self.Render() self.Bind(wx.EVT_PAINT, lambda evt: wx.BufferedPaintDC(self, self._dcBuffer, wx.BUFFER_VIRTUAL_AREA) ) def Render(self): """Render all nodes and their connection in depth order.""" cdc = wx.ClientDC(self) self.PrepareDC(cdc) dc = wx.BufferedDC(cdc, self._dcBuffer) dc.Clear() gc = wx.GraphicsContext.Create(dc) gc.SetPen(wx.Pen('#000000', 2, wx.SOLID)) gc.DrawRoundedRectangle(12, 34, 56, 78, 10) gc.DrawRoundedRectangle(112, 134, 156, 178, 10) 

यहाँ सब कुछ थोड़ा और दिलचस्प हो जाता है:

• सबसे पहले, हम "wx.PyScrolledWindow" को इनहेरिट करते हैं ताकि हमारी विंडो को स्क्रॉल किया जा सके और स्क्रॉलिंग मापदंडों को "self.SetScrollbars" में सेट किया जा सके।
• दूसरे, हम सीधे नहीं खींचेंगे, लेकिन बफर में, ताकि यह सब तेजी से और बिना झिलमिलाहट के हो। ऐसा करने के लिए, "wx.BufferedDC" और एक बफर का उपयोग करें, जो एक बिटमैप है।
• और तीसरा, हम राज्य की सुविधाजनक बचत के लिए "wx.GraphicsContext" का उपयोग करेंगे। इसमें "PushState" और "PopState" विधियाँ हैं, जो ब्रश, फोंट, आदि के लिए सेटिंग्स को बचाती हैं, जो विशेष रूप से उपयोगी है, क्योंकि उपयोगकर्ता कोड स्क्रीन पर ब्लॉक खींचेगा और कोई भी गारंटी नहीं देगा कि उपयोगकर्ता अपनी जगह पर सब कुछ वापस कर देगा।

यदि आप अभी कोड चलाते हैं, तो हम विंडो में गोल आयतों के कुछ आईफ़ोन देख सकते हैं, जिन्हें स्क्रॉल किया जा सकता है।

3. दृश्य की व्यवस्था करना

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

 import wx from MoveMe.Canvas.Objects.SimpleBoxNode import SimpleBoxNode class Canvas(wx.PyScrolledWindow): """ Canvas stores and renders all nodes and node connections. It also handles all user interaction. """ def __init__(self, *args, **kw): super(Canvas, self).__init__(*args, **kw) self.scrollStep = kw.get("scrollStep", 10) self.canvasDimensions = kw.get("canvasDimensions", [800, 800]) self.SetScrollbars(self.scrollStep, self.scrollStep, self.canvasDimensions[0]/self.scrollStep, self.canvasDimensions[1]/self.scrollStep) self._canvasObjects = [SimpleBoxNode([20,20]), SimpleBoxNode([140,40]), SimpleBoxNode([60,120])] self._dcBuffer = wx.EmptyBitmap(*self.canvasDimensions) self.Render() self.Bind(wx.EVT_PAINT, lambda evt: wx.BufferedPaintDC(self, self._dcBuffer, wx.BUFFER_VIRTUAL_AREA) ) def Render(self): """Render all nodes and their connection in depth order.""" cdc = wx.ClientDC(self) self.PrepareDC(cdc) dc = wx.BufferedDC(cdc, self._dcBuffer) dc.Clear() gc = wx.GraphicsContext.Create(dc) for obj in self._canvasObjects: gc.PushState() obj.Render(gc) gc.PopState() 

वैसे, दृश्य ऑब्जेक्ट्स की सूची में तुरंत SimpleBoxNode क्लास के कई ऑब्जेक्ट शामिल हैं, जो अभी के लिए बस ऑब्जेक्ट्स के निर्देशांक के साथ आयतों को आकर्षित करेगा।

 import wx class SimpleBoxNode(object): """ SimpleBoxNode class represents a simplest possible canvas object that is basically a rectangular box. """ def __init__(self, pos): self.position = pos self.boundingBoxDimensions = [90, 60] def Render(self, gc): gc.SetPen(wx.Pen('#000000', 2, wx.SOLID)) gc.DrawRoundedRectangle(self.position[0], self.position[1], self.boundingBoxDimensions[0], self.boundingBoxDimensions[1], 10) gc.SetFont(wx.SystemSettings.GetFont(wx.SYS_DEFAULT_GUI_FONT)) gc.DrawText("(%d, %d)"%(self.position[0], self.position[1]), self.position[0]+10, self.position[1]+10) 

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

कोई चमत्कार नहीं, लेकिन एक शुरुआत के लिए पर्याप्त है। यह पहले भाग को समाप्त करता है, और अगले भाग में हम माउस और कीबोर्ड घटनाओं के प्रसंस्करण को जोड़ते हैं और उपयोगकर्ता को हमारे आयतों को स्थानांतरित करने, कनेक्ट करने और हटाने में सक्षम करते हैं।

जारी रखने के लिए ...

PS1: कोड GitHub पर पाया जा सकता है
PS2: पीएम में टाइपो के बारे में लिखें।