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.

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é.

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.

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í.

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.

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.

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.

V posledním kroku doplníme do kresby texty.

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