Jednou z mnoha nových vlastností nové verze systému Control Web 8 je možnost přímo v Grafickém editoru
vývojového prostředí kreslit obrázky ve virtuálních přístrojích
panel a drawing. Kresba v přístrojích
může být statická i dynamická, kdy animace kresby se odvíjí od hodnot
z běžící aplikace. Kresbu lze editovat v Editoru kresby,
který nabízí řadu grafických primitiv a nástroje pro jejich editaci a
umožňuje i import obrázků ve formátu SVG.
Na následujících příkladech si ukážeme různé možnosti využítí této
nové vlastnosti systému Control Web 8 v
aplikacích.
Jednoduché použití kresby pro dekoraci přístroje
V prvním příkladu si ukážeme využití Editoru kresby
pro orámování přístroje meter umístěného v
panelu. Editor kresby spustíme
stejnojmenným příkazem z menu, které se zobrazí po stisknutí
pravého talčítka myši nad virtuálním přístrojem
panel nebo drawing.
![Spuštění Editoru kresby z menu přístroje Spuštění Editoru kresby z menu přístroje](/image?id=2578&thumb=on)
Spuštění Editoru kresby z menu přístroje
V Editoru kresby nakreslíme rámeček a nadefinujeme
jeho vzhled. Protože editace kresby je možná jak v Editoru
kresby, tak i přímo v upravovaném přístroji
panel, je umístění rámečku kolem přístroje
meter velmi snadné.
![Editace orámování přístroje meter Editace orámování přístroje meter](/image?id=2575&thumb=on)
Editace orámování přístroje
meter
V dalším kroku doplníme do kresby text, který bude sloužit jako
titulek přístroje meter. Po uzavření editoru kresby
pak dostaneme dekorovaný přísttroj meter.
![Orámovaný přístroj meter Orámovaný přístroj meter](/image?id=2576)
Orámovaný přístroj meter
Jak bylo uvedeno dříve, kresba může být i dynamická, tzn., že
objektům kresby může být za běhu aplikace měněna jejich poloha a
rozměry, mohou rotovat nebo může být měněn jejich vzhled. Pokud
bychom tedy např. chtěli měnit barvu rámečku obdélníku kresby v
závislosti na zobrazované hodnotě v přístroji
meter, pak toho můžeme docílit následujícím
skriptem.
procedure OnActivate();
static
LastColor : longcard;
static
Color : longcard;
begin
if Value < GetLowLimit() then
Color = system.ColorNameToColor( 'lcyan' );
elsif Value > GetHighLimit() then
Color = system.ColorNameToColor( 'lred' );
else
Color = system.ColorNameToColor( 'green' );
end;
if Color <> LastColor then
panel_1.SetStrokeColor( 'Frame', Color );
panel_1.Paint();
LastColor = Color;
end;
end_procedure;
Rámeček kresby bude za běhu aplikace měnit svou barvu podle
toho, v jakém pásmu se zobrazovaná hodnota v přístroji
meter nachází.
![Změna barvy rámečku kresby za běhu aplikace Změna barvy rámečku kresby za běhu aplikace](/image?id=2577&thumb=on)
Změna barvy rámečku kresby za běhu aplikace
Zdrojový text aplikace s příkladem je k dispozici zde - Drawing_Frame.zip
Vytvoření vlastního přístroje
V druhém příkladu vytvoříme jednoduchou animovanou kresbu,
která bude znázorňovat měřicí přístroj. Místo panelu však
použijeme přístroj drawing.
Obdobně jako nad přístrojem panel, otevřeme z menu Editor
kresby a pomocí nástroje Obdélník si nakreslme podklad
přístroje.
![Pozadí přístroje Pozadí přístroje](/image?id=2579)
Pozadí přístroje
V dalším kroku si nakreslíme pomocí nástroje Oblouk
stupnici. Stupnice bude vytvořena ze dvou oblouků a každý oblouk
bude vykreslen jinou barvou.
![Přístroj s nakreslenou stupnicí Přístroj s nakreslenou stupnicí](/image?id=2580)
Přístroj s nakreslenou stupnicí
Ve třetím kroku nakreslíme pomocí nástrojů Obecná
křívka a Elipsa ukazatel. Pro jednodušší
manipulaci s ukazatelem, seskupíme oba objekty a vzniklou skupinu
pojmenujeme arm.
![Přístroj doplněný o ukazatel Přístroj doplněný o ukazatel](/image?id=2581)
Přístroj doplněný o ukazatel
V posledním kroku doplníme do kresby texty.
![Výsledná podoba přístroje Výsledná podoba přístroje](/image?id=2582)
Výsledná podoba přístroje
Takto vytvořenou kresbu uložíme do souboru.
Nyní bude potřeba napsat skript, kterým budeme nastavovat
vychýlení ukazatele. Procedura SetRange bude sloužit
k nastavení rozsahu stupnice a procedura SetValue k
nastavení zobrazované hodnoty, resp. k vychýlení ukazatele podle
zadané hodnoty.
drawing FuelMeter;
static
Value : real;
LoRange : real {init_value = 0};
HiRange : real {init_value = 100};
Range : real {init_value = 100};
end_static;
gui
owner = P1;
position = 11, 15, 200, 200;
end_gui;
drawing_file = 'fuel_meter.cwg';
procedure SetRange( Lo, Hi : real );
begin
LoRange = Lo;
HiRange = Hi;
Range = abs(HiRange) + abs(LoRange);
end_procedure;
procedure SetValue( NewValue : real );
begin
Value = NewValue;
TransformReset( 'arm' ); // Vynulování transformace ukazatele
TransformRotate( 'arm', 360 - 270 * (Value - LoRange) / Range, 100, 100 ); // Pootočení ukazatele o vypočítaný úhel
Paint(); // Vynucení překreslení kresby
end_procedure;
end_drawing;
A na závěr si uvedeme kód pro obsluhu námi vytvořeného
přístroje.
control control_1;
gui
owner = P1;
position = 224, 42, 154, 143;
end_gui;
range_to = 50;
procedure OnStartup();
var
RangeFrom, RangeTo : real;
begin
GetRange( RangeFrom, RangeTo ); // Přečtení nastaveného rozsahu
FuelMeter.SetRange( RangeFrom, RangeTo ); // Nastavení rozsahu stupnice přístroje
end_procedure;
procedure OnOutput( Output : real );
begin
FuelMeter.SetValue( Output ); // Nstavení hodnoty
end_procedure;
end_control;
Zdrojový text aplikace s příkladem je k dispozici zde - Drawing_Fuel Meter.zip
|