💖 🤴🏻 👨🏿‍🚒 दोस्तों इलेक्ट्रॉन और वेबिक्स कैसे बनाये। भाग 2. अपने दृश्य के साथ एक एप्लिकेशन बनाएं 🤖 🚟 ☝🏿

परिचय

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

समस्या का निरूपण

GUI एप्लिकेशन "इलेक्ट्रॉन + वेबिक्स" बनाएं, जो ग्राफ के एक गतिशील रीड्रा के साथ फ़ंक्शन "a, b और c" के मापदंडों को बदलने की क्षमता के साथ फॉर्म "y = a * sin (b) + c" के फ़ंक्शन के ग्राफ़ का निर्माण करेगा।

छोटा आरक्षण

तुरंत एक आरक्षण करें कि "वेबिक्स" में चार्ट के साथ काम करने के लिए मानक बहुत शक्तिशाली उपकरण हैं। मेरा लक्ष्य इन साधनों को पूरक करना नहीं है, लेकिन यह दिखाने के लिए कि आप इलेक्ट्रॉन + वेबिक्स बंडल में अतिरिक्त रूपरेखा या पुस्तकालयों को कैसे एकीकृत कर सकते हैं। यह सिर्फ इतना हुआ कि मेरे पास "D3.js" का उपयोग करते हुए इस ग्राफ के लिए एक तैयार कोड था और मैंने इसे एप्लिकेशन में एकीकृत करने का निर्णय लिया।

उपकरण

विजुअल स्टूडियो कोड - एडिटर code.visualstudio.com ।
Node.js - यहां से डाउनलोड nodejs.org/en
इलेक्ट्रॉन - स्थापित करें "npm स्थापित - सेवे-देव इलेक्ट्रॉन"।
Webix – ru.webix.com.
JQuery – «npm jquery»
D3.js – d3js.org
(https://github.com/kapakym/electron_webix) , .

1. चूंकि मैं एक आलसी व्यक्ति हूं, इसलिए मैं शुरुआत से दूसरी बार सभी कोड लिखना नहीं चाहता। इसलिए, हम पिछले लेख से कोड लेते हैं और इसे हमें आवश्यक फ़ोल्डर में भरते हैं। दो विकल्प हैं। साइट (छवि 1) से संग्रह को डाउनलोड करने के लिए या क्लोन स्थापित होने पर इसे स्थापित करने के लिए सबसे पहले है (चित्र 2)।

अंजीर। 1 - एक साइट

छवि से स्रोत कोड डाउनलोड करना । 2 - रिपॉजिटरी को क्लोन करना

2. भविष्य में भ्रमित न होने के लिए, फ़ोल्डर का नाम बदलें (यह वैकल्पिक है), उदाहरण के लिए, “electron_webix_2” की तरह और इसे विजुअल स्टूडियो कोड (चित्र 3) में खोलें।

अंजीर। 3 - परियोजना खोलें

3. आवश्यक तत्व स्थापित करें। पहली चीज जो आपको करने की ज़रूरत है वह "Node.JS" के ऊपर दिए गए टूल में दिए गए लिंक से डाउनलोड करें और इसे इंस्टॉल करें। "Node.JS" के बिना, आप आगे कुछ नहीं कर सकते। अगला, विजुअल स्टूडियो कोड में "सीटीआर +` "कंसोल खोलें और एक (छवि 4) द्वारा निम्नलिखित कमांड दर्ज करें:

"एनपीएम स्थापित - सेवे-देव इलेक्ट्रॉन";
"एनपीएम स्थापित jquery"।

अंजीर। 4 - Node.JS और JQuery

4 स्थापित करना । अगला, आपको और मुझे अभी भी "डी 3" जेएस फ्रेमवर्क की आवश्यकता होगी, हम इसे टूल्स ("डी 3.ज़िप" फ़ाइल) के लिंक का उपयोग करके भी डाउनलोड करते हैं। डाउनलोड किए गए संग्रह "d3.zip" से हम फ़ाइल "d3.js" को निकालते हैं और इसे "libs" फ़ोल्डर (चित्र 5) में डालते हैं।

अंजीर। 5 - D3.js लाइब्रेरी को जोड़ना

इस कार्य केंद्र में, हमने तैयार किया है।

इंटरफ़ेस टाइप करना

अब जब कार्यस्थल तैयार हो गया है, तो सीधे हमारे एप्लिकेशन के निर्माण पर जाएं। इसमें निम्नलिखित "दृश्य" तत्व शामिल होंगे:

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

आएँ शुरू करें। फ़ाइल "रेंडरर.जेएस" खोलें और इसे संपादित करें हम उन तत्वों को हटा देते हैं जिनकी हमें पिछले लेख से आवश्यकता नहीं है और उन्हें ऊपर वर्णित तत्वों से बदल दें।

"रेंडरर.जेएस" फ़ाइल इस प्रकार थी:

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
//               
webix.ui(
    {
        "id": 1587908357897,
        "rows": [
            {
                "css": "webix_dark",
                "view": "toolbar",
                "height": 0,
                "cols": [
                    { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
                    { "label": "-", "view": "button", "height": 38, "width": 40, id:"min-bt" },
                    { "label": "+", "view": "button", "height": 38, "width": 40, id:"max-bt" },
                    { "label": "x", "view": "button", "height": 38, "width": 40, id:"close-bt" }
                ]
            },
            {
                "width": 0,
                "height": 0,
                "cols": [
                    { "url": "demo->5ea58f0e73f4cf00126e3769", "view": "sidebar", "width": 177 },
                    {
                        "width": 0,
                        "height": 0,
                        "rows": [
                            { "template": "Hello WORLD! ", "view": "template" },
                            {
                                "url": "demo->5ea58f0e73f4cf00126e376d",
                                "type": "bar",
                                "xAxis": "#value#",
                                "yAxis": {},
                                "view": "chart"
                            }
                        ]
                    }
                ]
            }
        ]
    }
)

//  
$$("close-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.close();
})

//  
$$("min-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.minimize();
})

//  
$$("max-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    if (!window.isMaximized()) {
        window.maximize();
    } else {
        window.unmaximize();
    }
})

यह इस तरह बन जाएगा:

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
//               
webix.ui(
    {
        "id": 1587908357897,
        "rows": [
            {
                // view : toolbar - 1   
                "css": "webix_dark",
                "view": "toolbar",
                "height": 0,
                "cols": [
                    //  
                    { "view": "label", "label": "Electron + Webix + D3.js", css:"head_win" },
                    //  " "
                    { "label": "-", "view": "button", "height": 38, "width": 40, id:"min-bt" },
                    //  " "
                    { "label": "+", "view": "button", "height": 38, "width": 40, id:"max-bt" },
                    //  
                    { "label": "x", "view": "button", "height": 38, "width": 40, id:"close-bt" }
                ]
            },
            // view : myview -    ,      .
            { "view": "myview", id: "d3_chart" },
            {
                "cols": [
                    // view : slider - 3 .     sin
                    {
                        "label": "Amplitude", "title": "#value#", "value": 50, "view": "slider", id: "slider_amplitude",
                    },
                    // view : slider - 4 .      sin   Y
                    {
                        "label": "Bias", "title": "#value#", "value": 0, "view": "slider", "height": 38, id: "slider_scope", min:-50, max:50, step:1,
                    },
                    // view : slider - 5 .     sin
                    {
                        "label": "Frequency", "title": "#value#", "value": 0.005, "view": "slider", "height": 38, id: "slider_freq", min:0, max:0.1, step:0.001,
                    }
                ]
            }
        ]
    }
)

//  
$$("close-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.close();
})

//  
$$("min-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.minimize();
})

//  
$$("max-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    if (!window.isMaximized()) {
        window.maximize();
    } else {
        window.unmaximize();
    }
})

आइए हम और अधिक विस्तार से विचार करें कि किन मापदंडों में "{" दृश्य ":" myview ", id:" d3_chart "}":
- दृश्य: myview - प्रकार "दृश्य" शामिल है, जबकि यह मौजूद नहीं है, हमने इसे अभी तक नहीं बनाया है;
- आईडी: d3_chart - "वेबिक्स" आईडी, हम इसका उपयोग अपने तत्व को संदर्भित करने के लिए करेंगे।
मैं पूर्णता के लिए "स्लाइडर" तत्व के मापदंडों को भी समझाऊंगा:
- दृश्य: स्लाइडर - "दृश्य", स्लाइडर;
- लेबल: "टेक्स्ट" - एक लेबल जो स्लाइडर पर प्रदर्शित किया जाएगा;
- शीर्षक: "#value" - स्लाइडर का वर्तमान प्रदर्शित मूल्य;
- मूल्य: "मूल्य" - डिफ़ॉल्ट स्लाइडर मूल्य;
- मिनट: "मूल्य" - स्लाइडर का न्यूनतम मूल्य;
- अधिकतम: "मूल्य" - स्लाइडर का अधिकतम मूल्य ";
- चरण:" मूल्य "- स्लाइडर के मूल्य को बदलने का चरण।
आप यहां वेबिक्स तत्वों के सभी मापदंडों के बारे में और अधिक पढ़ सकते हैं

"Myview" बनाएं

अब एक फाइल “view_chart.js” बनाएं जिसमें हम अपने नए प्रकार “myview” को परिभाषित करें और इसे “VSC” में खोलें।

अंजीर। 6 - एडिटिंग व्यू_chart.js शुरू करना इसमें

निम्न कोड जोड़ें:

webix.protoUI({
    name: "myview",
    $init: function () {
    },
    redraw: function (a, b, c) {
    },
}, webix.ui.view);

Webix.protoUI फ़ंक्शन को मानक तत्वों के आधार पर कस्टम वेबिक्स तत्व बनाने के लिए डिज़ाइन किया गया है। इस फ़ंक्शन को दिए गए मापदंडों पर विचार करें:

नाम - निर्मित वस्तु का नाम;
$ init एक ऐसा फंक्शन है जिसे किसी तत्व के बनने पर लॉन्च किया जाएगा। दूसरे शब्दों में, यह एक निर्माता है;
redraw - आपके साथ हमारा फंक्शन, जो फंक्शन के ग्राफ को redrawing करने के लिए जिम्मेदार होगा। हम अपने वैरिएबल "a, b और c" के पैरामीटर्स के मानों को पार करेंगे।
webix.ui.view हमारे तत्व का जनक है।

आप यहां webix.protoUI के बारे में अधिक पढ़ सकते हैं ।
इसलिए, जब हमारे "दृश्य" की रूपरेखा तैयार हो जाएगी, तो हम कुछ ऐसे फ़ंक्शन लिखेंगे जो पाप ग्राफ़ को प्लॉट करने के लिए ज़िम्मेदार होंगे।
पाप फ़ंक्शन के मूल्यों की गणना करने का कार्य निम्न प्रकार दिखाई देगा:

function calcsin(a, b, c) {
    dataset = [];
    for (var i = 1; i < 360; i++) {
        dataset.push({ "x": i, "y": a * Math.sin(b * i) + c });
    };
};

यहां सब कुछ बहुत सरल है, हम गणितीय फ़ंक्शन पाप में पैरामीटर मानों को प्रतिस्थापित करते हैं और परिणाम को एक सरणी में सहेजते हैं। इसे "view_chart.js" फ़ाइल के अंत में जोड़ें।
अगला, फ़ाइल के अंत में जोड़ें "view_chart.js" एक फ़ंक्शन जो कि डी 3 का उपयोग करके एक ग्राफ खींचेगा। जेएस फ्रेमवर्क, यह इस तरह दिखेगा:

function drawSin() {
    $(document).ready(function () {
        width = $("#mycontent").width() - margin.left - margin.right
        height = $("#mycontent").height() - margin.top - margin.bottom;
        var xScale = d3.scaleLinear()
            .domain([0, 360]) 
            .range([0, width]); 

        var yScale = d3.scaleLinear()
            .domain([-100, 100]) 
            .range([height, 0]);  

        var line = d3.line()
            .x(function (d, i) { return xScale(d.x); }) 
            .y(function (d) { return yScale(d.y); })
            .curve(d3.curveMonotoneX)

        var svg = d3.select("#mycontent").append("svg")
            .attr("float", "center")
            .attr("class", "webix_chart")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height/2 + ")")
            .call(d3.axisBottom(xScale)); 

        svg.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(yScale))

        svg.append("path")

            .datum(dataset) 
            .attr("class", "line") 
            .attr("d", line); 
    })

}

दिए गए फ़ंक्शन का क्रम निम्नानुसार है:
- उस दिव्य तत्व के सापेक्ष ग्राफ के आकार की गणना करें जिसमें इसे "चौड़ाई" और "ऊंचाई" पैक किया गया है;
- हम "एक्स" और "वाई" द्वारा ग्राफ के मूल्यों को मापते हैं;
- एक "html" तत्व "svg" बनाएं जिसमें हम "X" अक्ष, "Y" अक्ष और स्वयं ग्राफ खींचते हैं;
अब जब हमारे चार्ट की गणना और प्रतिपादन के लिए कार्य तैयार हैं, तो हम कुछ पुस्तकालयों को जोड़ेंगे और "view_chart.js" फ़ाइल की शुरुआत में कई चर घोषित करेंगे:

//     D3.js
const d3 = require("./libs/d3")
//   JQuery
$ = require('jquery')
//          X    Y
var dataset = [];
//         
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
    , width = $("#mycontent").width() - margin.left - margin.right 
    , height = $("#mycontent").height() - margin.top - margin.bottom;

चर "चौड़ाई" और "ऊंचाई" इंडेंटेशन को ध्यान में रखते हुए, चार्ट की चौड़ाई और ऊंचाई को संग्रहीत करेगा।
अगला, फ़ंक्शन "webix.protoUI" पर वापस जाएं और इसकी कार्यक्षमता लिखें:

webix.protoUI({
    name: "myview",
    $init: function () { //  View
        //   div  id=mycontent.      
        this.$view.innerHTML = "<div id='mycontent'></div>"
        //   calcsin       data  
        calcsin(60, 0.05, 0)
        //   drawSin        data
        drawSin()
    },
    redraw: function (a, b, c) { //    
        //   
        $("#mycontent").html("")
        //       data
        calcsin(a, b, c)
        //  
        drawSin()
    },
}, webix.ui.view);

सामग्री दो कार्यों से भरा। पहले "इनिट" को "व्यू" बनाते समय केवल एक बार निष्पादित किया जाता है। दूसरा तब कहा जाएगा जब हमें चार्ट को फिर से तैयार करना होगा।
अब फाइल की पूरी सामग्री "view_chart.js" इस तरह दिखाई देगी:

//     D3.js
const d3 = require("./libs/d3")
//   JQuery
$ = require('jquery')
//          X    Y
var dataset = [];
//         
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
    , width = $("#mycontent").width() - margin.left - margin.right 
    , height = $("#mycontent").height() - margin.top - margin.bottom;

webix.protoUI({
    name: "myview",
    $init: function () { //  View
        //   div  id=mycontent.      
        this.$view.innerHTML = "<div id='mycontent'></div>"
        //   calcsin       data  
        calcsin(60, 0.05, 0)
        //   drawSin        data
        drawSin()
    },
    redraw: function (a, b, c) { //    
        //   
        $("#mycontent").html("")
        //       data
        calcsin(a, b, c)
        //  
        drawSin()
    },
}, webix.ui.view);



function drawSin() {
    $(document).ready(function () {
        width = $("#mycontent").width() - margin.left - margin.right
        height = $("#mycontent").height() - margin.top - margin.bottom;
        var xScale = d3.scaleLinear()
            .domain([0, 360]) 
            .range([0, width]); 

        var yScale = d3.scaleLinear()
            .domain([-100, 100]) 
            .range([height, 0]);  

        var line = d3.line()
            .x(function (d, i) { return xScale(d.x); }) 
            .y(function (d) { return yScale(d.y); })
            .curve(d3.curveMonotoneX)

        var svg = d3.select("#mycontent").append("svg")
            .attr("float", "center")
            .attr("class", "webix_chart")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height/2 + ")")
            .call(d3.axisBottom(xScale)); 

        svg.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(yScale))

        svg.append("path")

            .datum(dataset) 
            .attr("class", "line") 
            .attr("d", line); 
    })

}

function calcsin(a, b, c) {
    dataset = [];
    for (var i = 1; i < 360; i++) {
        dataset.push({ "x": i, "y": a * Math.sin(b * i) + c });
    };
};

अगला, आपको फ़ाइल "view_chart.js" की सामग्री को "रेंडरर.जेएस" फ़ाइल में कनेक्ट करना होगा। हमें रेंडरर के शीर्ष पर "आवश्यकता (" ./ view_chart.js ") पंक्ति को जोड़ने की आवश्यकता है। जेएस फ़ाइल को नीचे दिखाया गया है:

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
//  view_chart.js
require("./view_chart.js")

अब आपको "style.css" फ़ाइल में कुछ शैलियों को जोड़ने की जरूरत है, इसे खोलें और नीचे दिखाए गए अनुसार "svg पथ" और "#mycontent" शैलियों को जोड़ें:

.head_win {
    -webkit-app-region: drag;
}

/*   */
svg path{
    /*   */
    stroke: #666;
    /*   */
    fill: none;
    /*    */
    stroke-width: 1;
}

/*   mycontent,     */
#mycontent { 
    /*     */
    text-align: center;
    /*   */
    overflow: none;
    /*   */
    border: 1px solid black;
    /*     */
    background-color: antiquewhite;
    /*   */
    height: calc(100% - 2px);
}

शैलियों के साथ समाप्त होने के बाद, आप हमारे एप्लिकेशन को चलाने का प्रयास कर सकते हैं और देख सकते हैं कि क्या हुआ। तो, "F5" दबाएं और उसके बाद स्क्रीन पर एक विंडो दिखाई देनी चाहिए जैसा कि चित्र 7.

अंजीर में दिखाया गया है। 7 - हमारे आवेदन की खिड़की

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

चलो स्लाइडर्स काम करते हैं

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

// view : slider - 3 .     sin
                    {
                        "label": "Amplitude", "title": "#value#", "value": 50, "view": "slider", id: "slider_amplitude",
                        on: {
                            onChange: function () {
                                $$("d3_chart").redraw($$("slider_amplitude").getValue(), $$("slider_freq").getValue(), $$("slider_scope").getValue());
                            }
                        }
                    },
                    // view : slider - 4 .      sin   Y
                    {
                        "label": "Bias", "title": "#value#", "value": 0, "view": "slider", "height": 38, id: "slider_scope", min:-50, max:50, step:1,
                        on: {
                            onChange: function () {
                                $$("d3_chart").redraw($$("slider_amplitude").getValue(), $$("slider_freq").getValue(), $$("slider_scope").getValue());
                            }
                        }
                    },
                    // view : slider - 5 .     sin
                    {
                        "label": "Frequency", "title": "#value#", "value": 0.005, "view": "slider", "height": 38, id: "slider_freq", min:0, max:0.1, step:0.001,
                        on: {
                            onChange: function () {
                                $$("d3_chart").redraw($$("slider_amplitude").getValue(), $$("slider_freq").getValue(), $$("slider_scope").getValue());
                            }
                        }
                    }

इस हैंडलर में, हम अपने तत्व को उसके "id" तक पहुँचाएंगे और "redraw" फ़ंक्शन को कॉल करेंगे, जिसे हमने चार्ट को redraw करने के लिए पहले बनाया था, जो इसे स्लाइडर्स के वर्तमान मानों को पार करता है। "F5" पर क्लिक करें, हमारे आवेदन को चलाएं और मूल्यों को बदलने की कोशिश करें (चित्र 8)।

अंजीर। 8 - स्लाइडर्स की कार्यक्षमता की जाँच करना

खिड़की के बाद ग्राफ खींचो

और अंत में, हम एक फ़ंक्शन जोड़ते हैं जो हमारे चार्ट को विंडो के आकार में बदल देगा जब यह बदलता है। हम संपादक में फ़ाइल "view_chart.js" क्यों खोलते हैं और इसके अंत में एक हैंडलर जोड़ते हैं जो नीचे दिखाए गए अनुसार विंडो परिवर्तन को पकड़ता है:

window.onresize = function ( e ) {
  
    $("#mycontent").html("")
    drawSin()
}

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

निष्कर्ष

बस इतना ही। मुझे उम्मीद है कि यह जानकारी आपके लिए उपयोगी होगी। धन्यवाद! सूत्रों को यहां डाउनलोड किया जा सकता है ।

दोस्तों इलेक्ट्रॉन और वेबिक्स कैसे बनाये। भाग 2. अपने दृश्य के साथ एक एप्लिकेशन बनाएं