graf (pokročilé funkce GRID)

Založíme si nový projekt a pojmenujeme si LineGraph.

Úvodní kód:

vytvoříme Analogový vstup. Analog je reprezontován (desetiným) číslem. které může jít i do záporných hodnot. (Poslední datový typ messeage, si ukážeme později.)

let anaIn = context.inputs.add("analin","analog","Analog Input");

a přidáme sizeProfile

context.addSizeProfiles(3,2,20,20);

a nakonec přidáme "generický element", na kterém budeme pracovat.

let element = new WK.Element(context);

Tímto jsme si vytvořili bílý obdélník jenž vyplňuje celou plochu widgetu.

uchování hodnot:

Určitě budeme chtít zaznamenat hodnoty, které pak vykreslíme do widgetu jako graf. Proto si vytvoříme pole., do kterého si budeme ukládat hodnoty. (připomínám, že pole v Javascriptu(typescriptu) fungují jinak než v Javě,C(++/#) apod.)

let dataStorage = [];

Nejlepší způsob, jak získat hodnotu z inputu je event listenerem. Proto napíšem

anaIn.listenEvent("valueChanged", e => {        
    dataStorage.push(anaIn.value);      
});

Pozn.: kvůli bugu v GRID se nová hodnota nedá získat z callbacku (e).

tímto při každé změně uložíme novou hodnotu do pole.

Nyní je třeba začít s vykreslováním na element.

Event render a kreslení

Widgety vykreslovány v Canvasu, díky tomu můžeme použít oficiální dokumentaci Canvasu. (LINK).

Veškeré vykreslování se děje v

context.listenEvent("render", e => {        
    let draw = e.context;    
})

čímž kreslíme na vrh celé "plochy" widgetu. Protože budeme hodně používat e.context, uložil jsem si ho do promněné pro jednodušší práci.

Ve zkratce nyní shrnu nejduležitější body z dokumentace Canvasu,

• Prakticky veškeré úkony s ním začínáme tím, že zavoláme metodu .beginPath();

• bod 0,0 se nachází v levém horním rohu

• veškeré změny projeví až poté co zavoláme .stroke();

Nakreslíme si základní testovací čáru. pod námi definovaný _draw _napíšeme

draw.beginPath();  
 draw.moveTo(0,0);  
 draw.lineTo(context.root.visibleRect.size.width,context.root.visibleRect.size.height);  
 draw.strokeStyle = "#000000";  
 draw.stroke();`

a klikneme na test

Čára by vždy měla být z levého horního rohu do dolního pravého. Pozornější si jistě všimli context.root.invalidate();Tato metoda se volá kdykoliv se změní widget a je třeba znovu ho celý vykreslit (znova zavolá render). Např. při změně velikosti widgetu, nebo když ho zavoláme my s tím že chceme vykreslit nově příchozí hodnoty.

když už jsme dali dohromady základy práce s canvasem, jsem si udělat graf z hodnot co ukládáme do pole.

více práce s kreslením

Pro snažší práci si zabarvíme pozadí na bílo a vytvoříme si několik promněných pro snažší práci.

Samozřejmě, přídáme si element, který jsme vytvořili na žačátku do widgetu. context.root.add(element);

nyní by při kliknuntí na test měla čára být nakreslená na bílém pozadí.

Na začátek renderu si nadefinujeme několik pomocných promněných.

začneme s

let chartPaddingX = 10;  
let chartPaddingY = 10;

chceme nechat nějaký prostor na krajích. poté

let chartX = 30 + chartPaddingX;  
let chartY = 10 + chartPaddingY;

jakožto "startovací bod" pro náš graf (vlevo nahoře). Odtud budeme začínat se vším vykreslováním.

nakonec

let chartWidth = context.root.visibleRect.size.width - chartPaddingX  
let chartHeight = context.root.visibleRect.size.height - chartPaddingY;

Ve zkratce jsme si nadefinovali výšku a šířku pro náš widget, složením těchto dvou hodnot máme souřadnice pravého dolního rohu našeho grafu. U _chartWidth _jsme si vzali šířku celého widgetu (která může být různě veliká) a odečetli jsme od ní padding (pro odstup od okraje).

Abychom zhruba věděli, jak je náš Graf ve widgetu velký, změníme několik parametrů v naší předtím vytvořené čáry.

změníme

draw.moveTo(0,0);  
 draw.lineTo(context.root.visibleRect.size.width,context.root.visibleRect.size.height);

na

 draw.moveTo(chartX, chartY);  
 draw.lineTo(chartWidth, chartHeight);

klikneme na test a podíváme se, zda se všechno povedlo dle plánu.

zakreslování hodnot

Poté, co jsme si oveřili že vše vypadá OK, mohli bychom získat data z našeho pole, a zakreslit je do widgetu. to uděláme smyčkou(loop).

nejdříve najdeme nejvyšší hodnotu v poli, což uděláme jednoduše:

let max = 0;  
    for (let i = 0; i < dataStorage.length; i++) {  
        if (max < dataStorage[i]) {  
            max = dataStorage[i];  
        }  
    }

vytvoříme promněnou, kterou budeme určovat počet prvků jenž zobrazíme v grafu

let chartSize = 50;

poté napíšeme smyčku na vykreslování grafu jako takového:

render.beginPath();
let first = true;  
    for (let i = Math.max(dataStorage.length - chartSize, 0), j = 0; i < dataStorage.length; i++ , j++) {  
        const x = chartX + (j / chartSize) * chartWidth;  
        const y = chartY + chartHeight - (dataStorage[i] / max) * chartHeight;
        if (first) {
             draw.moveTo(x, y);
         } 
        else { 
             draw.lineTo(x, y);
         }
    first = false;    
    }
draw.strokeStyle = "#489fdf";  
draw.stroke();`

překreslení hodnot (re-render)

To nejdůležitější je hotovo. Pokud jste ještě nedopsali to, že při změně hodnoty se má překreslit widget, nyní je správná chvíle

anaIn.listenEvent("valueChanged", e => {
    context.root.invalidate();
    dataStorage.push(anaIn.value);
});

`

a můžeme náš widget otestovat.

widget by měl při každé změně hodnoty nakreslit nový graf, který se postupně posouvá.

Vodící čáry grafu:

Avšak, graf bez hodnot je užitečný jako bezdrátová myš bez baterek. Přidáme text a "vodící čáry'

draw.fillStyle = "#000";
draw.fillText("0", 3, chartY + chartHeight - 3);
draw.fillText(max, 3, chartY + 13);
draw.strokeStyle = "rgba(0,0,0,0.5)";

draw.beginPath();
draw.moveTo(chartX, chartY);
draw.lineTo(chartX + chartWidth, chartY);
draw.stroke();

draw.beginPath();
draw.moveTo(chartX, chartY + chartHeight);
draw.lineTo(chartX + chartWidth, chartY + chartHeight);
draw.stroke();

Zároveň, můžeme přidat i to, že se vykreslí "kolečka" na vrcholech. první část kódu známe

 for(let i = Math.max(dataStorage.length - chartSize, 0), j = 0; i < dataStorage.length; i++, j++) {
        const x = chartX + (j / chartSize) * chartWidth;
        const y = chartY + chartHeight - (dataStorage[i] / max) * chartHeight;
        draw.beginPath();
        draw.arc(x,y,2,0,2*Math.PI); //nakreslí oblouk o poloměru Pí * 2 radiánů (celý kruh)
        draw.closePath();
        draw.strokeStyle = "rgb(0, 153, 255)";
        draw.stroke();
        draw.fillStyle = "rgba(0, 153, 255, 0.5)";
        draw.fill();
    }

změna četnosti vykreslování

Pokud se zamyslíme tak zjistíme, že se hodnoty do grafu vykreslují ve chvíli, kdy se změní hodnota vstupu, což je poněkud k ničemu.

Vytvoříme si interval, který bude pravidělně číst a zapisovat do grafu:

setInterval(function () {
    dataStorage.push(input.value); //přidáme hodnotu do pole
    context.root.invalidate(); //překreslíme widget
}, 1000);

a listener smažeme, protože nechceme nadále zapisovat hodnoty pouze při změně, ale pravidelně

input.listenEvent("valueChanged", function (e) {});

výsledný graf bude vypadat nějak takto

Pokud jste s grafem spokojeni. Můžete ho vesele používat kde potřebujete.

konečné slovo:

Samozřejmě je zde hromada místa k zlepšení, jako např. možnost ukazovat více čar, možnost zobrazovat i čísla pod nulu...