Moravian instruments
Vyhledávání
Hlavní menu
Hlavní stránka
O společnosti
Stažení software
Stažení dokumentů
Obchodní partneři
Produkty
Programový systém Control Web
Strojové vidění VisionLab
Kamery DataCam a  osvětlovače DataLight
Průmyslový počítačový systém DataLab
Vědecké CCD kamery
Speciální technika
Ceník
Aktivace produktů
Služby
Školení
Zakázková řešení
Podpora
Rady pro tvorbu aplikací


Hlavní stránka

Control Web 8 přináší novou možnost, jak kreslit obrázky v aplikaci
 Nová verze systému Control Web 8 umožňuje v Grafickém editoru vývojového prostředí kreslit statické i dynamické obrázky ve virtuálních přístrojích panel a drawing.

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

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

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

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

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

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í

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

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

Výsledná podoba přístroje

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

 
 | O společnosti | Produkty | Podpora | Stažení software | Stažení dokumentů | 
Moravské přístroje, a.s., Masarykova 1148, Zlín-Malenovice, 76302