QtQML / त्वरित सहसंबंध पैनल

सभी को नमस्कार! मैं रोजिया यूरोप की कंपनी में डेस्कटॉप एप्लिकेशन के विकास के लिए टीम लीडर हूं। हम तेल और गैस उद्योग के लिए सॉफ्टवेयर समाधान विकसित करते हैं।

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

विरासत कोडबेस के सवालों को दरकिनार करते हुए - मैं लेख में इसका उल्लेख करूंगा - एक बुनियादी सवाल था - मुझे किस तकनीक का उपयोग करना चाहिए? हमें निश्चित रूप से OpenGL की आवश्यकता थी - जो पहले से ही MapView और 3DS दृश्य में OpenSceneGraph के आधार पर उपयोग किया जाता है - लेकिन यह स्पष्ट है कि यह नंगे नहीं है, और GUI तत्वों के साथ है। OSG गिर गया = (?) एक तकनीक जो दो आवश्यकताओं को पूरा करती है - ओपन ग्राफ पर GUI और GUI - मुझे केवल एक ही पता था - Qt QML / क्विक। हमारे पास जो कुछ भी मिला है और जो हमें साझा करना है - अंदर।

प्रविष्टि

हमने 2013 के पतन में उत्पाद विकसित करना शुरू किया। क्यूटी प्रशंसक के रूप में मेरे लिए उपयोग करने के लिए पुस्तकालयों का क्या सेट है, यह भी एक सवाल नहीं था। उस समय, यह सवाल उठ सकता है: क्यूटी के 4 वें या 5 वें (अभी भी हाल ही में) संस्करण का उपयोग करें। हमने पाँचवाँ चुना है और अपनी उड़ान की ऊँचाई से मैं केवल इतना ही कह सकता हूँ: भगवान का शुक्र है!

पूरा लुक QtGui / विजेट्स पर विकसित किया गया है। सभी दृश्य जहां ग्राफ़ प्रदर्शित किए जाते हैं (गामा, पोरसिटी, प्रतिरोध, आदि) QGraphicsScene / View पर बनाए जाते हैं। मेरी सलाह है - गंभीर चीजों के लिए इस बंडल का उपयोग न करें! तर्क: बार को स्क्रॉल करें और बाहर से डिस्कनेक्ट नहीं किया गया है (यह Qt के अपने संपादन के बिना बाहर है) दृश्य को केन्द्रित करने के लिए तर्क ( qgraphicsview.cpp +458 और क्षैतिज के लिए एक ही विधि में ऊपर; qgraphicsview.cpp +3816 - मैट्रिक्स पर क्या नियंत्रण है)। यदि यह आपको परेशान नहीं करता है, तो उपयोग करें - बॉक्स से बहुत सुविधाजनक टुकड़े।

और क्या उपयोग नहीं करना है? NSIS।

सब कुछ सही था, उत्पाद विकसित हो रहा था, कार्य किए जा रहे थे, ग्राहकों की संख्या बढ़ रही थी। Refactoring ... सामान्य तौर पर, कुछ समय बाद, QGraphicsScene ने हमारे साथ हस्तक्षेप करना शुरू कर दिया - हम 40,000 अंकों के ग्राफ के ड्राइंग को अनुकूलित करने के लिए जल्दी में नहीं थे, जब मोटी लाइनें चालू थीं - सीपीयू पर यह सब सामान बहुत धीमा था।

रास्ते में, हम विजेट्स पर GUY विकसित करने से थक गए। या तो कोड में पूरी तरह से अपने हाथों से, या डिजाइनर में थोड़ा (निर्माता, .यूआई + । Cpp से)। मैं आधुनिक सामान चाहता था, जैसे ग्राफिकल इंटरफ़ेस का घोषणात्मक विवरण।

उन प्रौद्योगिकियों की सूची तैयार की जिन पर हम करेंगे:

• QGraphicsView / दृश्य पर पुराने ढंग का तरीका;
• प्रत्येक ट्रैक के लिए एक अलग नंगे QOpenGLWidget का उपयोग करें;
• QOpenGLWidget पर पूरी विंडो कार्यान्वित करें, लेकिन स्वयं द्वारा GUI (या कुछ ढूंढें);
• पिछले दो अंक + OSG क्रमशः;
• Qt QML / क्विक,

केवल छह अंक; हम पर चर्चा की। मेरे करिश्मे ने पल्ला झाड़ लिया और यह देखने का प्रयास करने का फैसला किया कि QML में प्रोटोटाइप कैसे व्यवहार करता है।

प्रोटोटाइप

मैंने एक उदाहरण दृश्यचित्र / ग्राफ़ खोला। देखा और बंद =)। मैंने कई दिनों तक खेला, अन्य उदाहरणों को देखा, लेकिन मेरे पोषित लक्ष्य के करीब कुछ भी नहीं पहुंचा।

और फिर क्या जरूरत थी? यहाँ सहसंबंध पैनल कैसा दिख सकता है:

• पहला उदाहरण: अच्छी तरह से सहसंबंध 1. png (पृष्ठ https://geosteering.ru/software/geosteering-office.html से );
• दूसरा: cp_1.png ( https://geosteertech.com/products/geonaft/correlation-panel/ ) से;
• बेशक, विशाल पेट्रेल के पास है;
• यह भी अनुरोध पर गूगल (अच्छी तरह से) सहसंबंध पैनल।

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

मैंने sgengine को देखा, सीखा कि दो दृश्य रेखांकन कैसे बनाएं और उन्हें निर्दिष्ट व्यूपोर्ट में आकर्षित करें। बाद में मुझे महसूस हुआ कि इस विकल्प के साथ, QML / क्विक नहीं होगा, फिर मुझे यह सब क्यों चाहिए?

वास्तव में, मुझे याद नहीं है कि कौन सी दवाएं हैं, लेकिन किसी कारण से मैंने कंप्यूटर ग्राफिक्स की मूल बातों को बदलने का फैसला किया। इसलिए रेखांकन के अंतिम चरणों में, दृश्य के सभी निर्देशांक NKU (सामान्यीकृत डिवाइस निर्देशांक; बेहतर NDC = सामान्यीकृत उपकरण निर्देशांक) के रूप में अनुवादित किए जाते हैं। हां, मैंने सुना है कि वर्टेक्स शेडर का आउटपुट वास्तव में एक क्लिप स्पेस है और उसके बाद अभी भी एफिन विरूपण है, लेकिन यह सब एक त्रि-आयामी प्रतिनिधित्व के लिए है, और 2 डी में यह हमेशा w = 1 है और इसलिए हम यह मान सकते हैं कि आउटपुट तुरंत एन.डी.सी.

ठीक है, एनडीसी, आगे क्या है? यदि आपकी विंडो की चौड़ाई 800 पिक्सेल है, तो शून्य पिक्सेल के केंद्र का NDC समन्वय -1 है; 799 वें का केंद्र समन्वय 1. 1. संक्षेप में, ndcX = -1 + 2 * i / 799 है। अब कल्पना करें कि 100 से 300 तक एक आयत है और मैं पूरे दृश्य को एक पूरी खिड़की में नहीं, बल्कि उसमें खींचना चाहता हूं। इस खंडित ज्ञान का उपयोग करते हुए, मैं ndcX100, ndcX300 की गणना करूंगा, फिर उन्हें मानक शीर्ष पर फेंक दें और मानक के बाद

gl_Position = matrix * position; 

[ndcX100 में रैखिक "रैप" gl_Position.x; ndcX300]। हम ऊर्ध्वाधर घटक के लिए भी ऐसा ही करते हैं। यह चाल आपको दृश्य के किसी भी चयनित आयत में दृश्यों को देखने की अनुमति देगी। इस ज्ञान के साथ, ग्राफ उदाहरण में परिवर्तन से गुजरना शुरू हुआ। आप यहां के पल्ली को देख सकते हैं - ग्राफ ; shaders/line.vsh में सभी नमक।

दृश्य / दृश्य

अगले तीन महीने टीके का लेखन था, यह ए 4 = के 12 पत्रक निकला। समानांतर में, हमने वास्तुकला पर विचार किया। उन्होंने एमवीसी ... उर्फ ​​एमवीपी ... उर्फ ​​श्रेणीबद्ध एमवीसी / एमवीपी ... या यहां तक ​​कि पीएसी ले लिया - ये सभी कन्वेंशन हैं, अच्छा अपघटन महत्वपूर्ण है।

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

दृश्य मुख्य खिलाड़ी है। यह वर्ग इसके NDC निर्देशांक की निगरानी करता है और संबंधित मेट्रिसेस को अद्यतन करता है। SceneCamera उसके साथ घनिष्ठ मित्र है। उल्लेख के लायक अगली इकाई SceneItem है। यह अपने आप में बेकार है, इसमें केवल कुछ बुनियादी तर्क शामिल हैं; इसे विरासत में मिला - लाइनेस्ट्रिप की तरह - और जो आपको चाहिए उसे लागू करें। उसी समय, updatePaintNode आपको संदर्भ के रूप में SceneMaterial - FlatColorMaterial के डेरिवेटिव का उपयोग करने की आवश्यकता होती है। शेष इकाइयां भी कुछ =) करती हैं, सभी प्रकार के जोड़तोड़, उपकरण। कई कक्षाएं QML में नहीं डाली जाती हैं, और आप ऐसे C ++ के बिना नहीं कर सकते हैं; क्या आपको याद है कि क्या तैयार नहीं है?

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

दृष्टिकोण के लाभ:

• सब कुछ दृश्य के एक कॉलम में तैयार किया गया है;
• हमने Qt को सही नहीं किया है - स्टेज पर नियमित QML नियंत्रण जोड़ना संभव है ताकि उनके और घटता (या अन्य SceneItem) के बीच z- क्रम सही हो;
• अन्य तरीकों की तुलना में कम मेमोरी खपत।

विपक्ष

• जटिल urbermachine;
• ओपनजीएल और जीएलएसएल के ज्ञान की आवश्यकता है;
• अर्द्ध तैयार समाधान।

बेशक, हमें विकास के दौरान कुछ कठिनाइयों का सामना करना पड़ा। उनमें से एक था

Z- क्रम के साथ बग

जब हमने पहली बार घटता के साथ एक दृश्य प्रदर्शित करने की कोशिश की, तो हमने ऐसी तस्वीरें देखीं:

पहली नज़र में यह स्पष्ट नहीं था, "हमने सब कुछ ठीक किया!" यह अस्पष्ट रूप से अनुमान लगाया गया था कि gl_Position.z किसी तरह गलत था, लेकिन यह समझना मुश्किल था कि रात में क्यों। हमने हार नहीं मानी: हमने देखा कि Qt शेड्स को सही करता है और gl_Position.z को बदलने के लिए कोड जोड़ता है, हमने सोचा। थोड़ी देर बाद, यह हम पर हावी हो गया: हमने z में परिवर्तन करके मैट्रिक्स के डेटा को गड़बड़ कर दिया, और Qt ने उनके मूल्यों को उनके पास स्थानांतरित कर दिया! इस प्रकार, QML के आइटम.z मान को OpenGL ( SceneMaterial.cpp +20 ) से z में मैप किया गया है:

क्लिप के साथ बग: सच

एक बार चैट में, एक व्यवसाय टीम एक स्क्रीन भेजती है जहां समन्वय ग्रिड की बाईं रेखा गायब हो गई।

हमारे क्यू एंड ए ने कार्यक्रम को पीड़ा दी और स्थिर प्लेबैक के लिए कदम उठाए: हमने मॉनिटर के लिए स्केलिंग को 100% से अधिक नहीं और "फ्लैश" लाइनों के रूप में सेट किया। Artyom बैठे, सोचा, और पाया कि जब clip: true और आइटम आयताकार है, तो glScissor का उपयोग किया जाता है, लेकिन इसके तर्क पूर्णांक पिक्सेल निर्देशांक हैं! क्यूएमएल की वस्तुओं में वे वास्तविक हैं और यह पता चला है कि लाइन का रेखांकन अगले / पिछले पिक्सेल तक गिर गया था, और कैंची वर्तमान में कट गई थी।

हमने इस तरह से दृश्य को निर्धारित किया: width: Math.round(metrics.width + leftPadding + 2 * rightPadding + 0.5) । तदनुसार, इस तरह की कलाकृतियों से बचने के लिए दृश्य आइटम में हमेशा पूर्णांक निर्देशांक होना चाहिए।

अंत में, मैं केडीपीवी लाऊंगा

ध्यान देने के लिए आप सभी का धन्यवाद!