Membuat Animasi Water Tank Level di Lazarus dengan BGRA Bitmap

Visualisasi level air pada sebuah tangki sering digunakan dalam sistem SCADA, HMI, maupun aplikasi monitoring sederhana. Dengan Lazarus + BGRA Bitmap, kita bisa membuat animasi water tank level yang interaktif, misalnya dengan slider (TrackBar) untuk mengatur ketinggian air.

pada artikle kali ini saya hanya memfokuskan pada pengendalian animasi sederhananya jadi belum terkoneksi dengan rangkaian elektronik dan itu akan di bahas pada artikle lainnya, semoga secepatnya tinggalkan komen jika memang menginginkannya.

Prinsip sederhananya saya hanya mengupload gambar background dan memberi object kotak biru yang nantinya akan saya rubah ketinggiannya dengan mengubah nilai dari trackbar. Jadi terdapat 2 layer saja layer 1 adalah back ground dan layer 2 adalah kotak biru

ini gambar background "test.bmp"

 

seperti yang terlihat gambar bitmap ini akan di upload pada component dan diatasnya akan di berikan object. dan object itulah yang akan kita kendalikan.

Persiapan Komponen

Buat sebuah form baru di Lazarus, lalu tambahkan komponen berikut:

• TBGRAVirtualScreen → untuk menggambar grafik.

• TTrackBar → untuk mengatur tinggi air.

• TLabel → untuk menampilkan koordinat mouse.

• Tambahkan juga unit BGRABitmap dan BGRABitmapTypes pada bagian uses.

---

Logika Utama Program

Ada beberapa poin penting dalam program ini:

1. Inisialisasi Tangki dan Warna

   x0 := 111; y0 := 320; tebal := 2; lebar := 148; tinggi := 217;
   garis := BGRA(0,0,255,128); 
   isian := BGRA(0,0,255,128);
   

   Di sini kita tentukan posisi, ukuran tangki, dan warna air.

2. Memuat Background

   background := TBGRABitmap.Create;
   background.LoadFromFile('test.bmp');
   

   Background hanya diload sekali saat FormCreate.

3. Kontrol Level Air dengan TrackBar

   TrackBar1.Min := 0;
   TrackBar1.Max := tinggi;
   TrackBar1.Position := 0;
   

   Nilai TrackBar dihubungkan dengan tinggi air di tangki.

4. Menggambar Ulang pada VirtualScreen

   Bitmap.RectangleAntialias(x0, y0, x0+lebar, y0-tinggi, garis, tebal, isian);
   

   Bagian ini yang membuat animasi level air naik-turun sesuai posisi TrackBar.

5. Menjaga Proporsi Background
   Ada perhitungan aspect ratio agar background tidak gepeng ketika digambar ulang.
   
   

   // hitung aspect ratio

     imgRatio := background.Width / background.Height;

     scrRatio := Bitmap.Width / Bitmap.Height;

     if imgRatio > scrRatio then

     begin

       // gambar lebih lebar daripada layar → sesuaikan lebar penuh

       drawWidth := Bitmap.Width;

       drawHeight := Round(drawWidth / imgRatio);

       xOff := 0;

       yOff := (Bitmap.Height - drawHeight) div 2;

     end

     else

     begin

       // gambar lebih tinggi daripada layar → sesuaikan tinggi penuh

       drawHeight := Bitmap.Height;

       drawWidth := Round(drawHeight * imgRatio);

       yOff := 0;

       xOff := (Bitmap.Width - drawWidth) div 2;

     end;

     // gambar background dengan stretch proporsional-- jangan lupa urutan menggambarnya

     Bitmap.StretchPutImage(Rect(xOff, yOff, xOff+drawWidth, yOff+drawHeight), background, dmSet); 

Dengan Lazarus dan BGRA Bitmap, kita bisa membuat simulasi visual yang menarik dengan mudah. Kode di atas adalah contoh dasar animasi water tank level yang nantinya bisa dikembangkan menjadi aplikasi monitoring real-time.

Kekurangan dari animasi yang saya buat adalah meletakkan objectnya, kordinatnya harus di cari secara manual makanya pada form ini bisa di lihat ada label yang menampilkan kordinat mouse pada virtualscreen dari BRGAbitmap, bisa di lihat disini 

jadi baru mencari dulu kordinat yang di perlukan dengan menjalankan aplikasi dan mencatat kordinat mouse secara manual saya masih belum dapat cara yang lebih mudah lagi jadi jika banyak object maka kesulitan dalam mengumpulkan kordinat ini juga bertambah.

mudah2an nantinya ada yang bisa menyumbangkan idenya untuk mengatasi hal ini











berikut adalah source code lengkapnya dan jangan lupa silahkan di instal komponen BRGABitmapnya terlebih dahulu.

unit Unit1;

{$mode objfpc}{$H+}

interface

uses

  Classes, SysUtils, Forms, Controls, Graphics, Dialogs, ExtCtrls, StdCtrls,

  ComCtrls, BGRAVirtualScreen, BGRABitmap, BGRABitmapTypes;

type

  { TForm1 }

  TForm1 = class(TForm)

    Label1: TLabel;

    Label2: TLabel;

    TrackBar1: TTrackBar;

    VirtualScreen: TBGRAVirtualScreen;

    procedure FormCreate(Sender: TObject);

    procedure TrackBar1Change(Sender: TObject);

    procedure VirtualScreenMouseMove(Sender: TObject; Shift: TShiftState; X,

      Y: Integer);

    procedure VirtualScreenRedraw(Sender: TObject; Bitmap: TBGRABitmap);

  private

    background: TBGRABitmap;

    x0,y0,tebal,lebar,tinggi : integer;

    garis,isian : TBGRAPixel;

  public

  end;

var

  Form1: TForm1;

implementation

{$R *.lfm}

{ TForm1 }

procedure TForm1.FormCreate(Sender: TObject);

begin

  //buat kotak pada gambar

  x0 := 111; y0 := 320; tebal := 2; lebar := 148; tinggi := 217;

  garis := BGRA(0,0,255,128); isian := BGRA(0,0,255,128);

  // load background sekali saja

  background := TBGRABitmap.Create;

  background.LoadFromFile('test.bmp');

  //atur kondisi trackbar

  TrackBar1.Min := 0;

  TrackBar1.Max := tinggi;

  TrackBar1.position := 0;

  tinggi := TrackBar1.Position;

  VirtualScreen.RedrawBitmap;

end;

procedure TForm1.TrackBar1Change(Sender: TObject);

begin

  tinggi := TrackBar1.Position;

  VirtualScreen.RedrawBitmap;

end;

procedure TForm1.VirtualScreenMouseMove(Sender: TObject; Shift: TShiftState; X,

  Y: Integer);

begin

    label1.Caption:= 'X = ' + inttostr(X) + ' , Y = ' + inttostr(Y);

end;

procedure TForm1.VirtualScreenRedraw(Sender: TObject; Bitmap: TBGRABitmap);

var

  imgRatio, scrRatio: Double;

  drawWidth, drawHeight, xOff, yOff: Integer;

begin

  // hitung aspect ratio

  imgRatio := background.Width / background.Height;

  scrRatio := Bitmap.Width / Bitmap.Height;

  if imgRatio > scrRatio then

  begin

    // gambar lebih lebar daripada layar → sesuaikan lebar penuh

    drawWidth := Bitmap.Width;

    drawHeight := Round(drawWidth / imgRatio);

    xOff := 0;

    yOff := (Bitmap.Height - drawHeight) div 2;

  end

  else

  begin

    // gambar lebih tinggi daripada layar → sesuaikan tinggi penuh

    drawHeight := Bitmap.Height;

    drawWidth := Round(drawHeight * imgRatio);

    yOff := 0;

    xOff := (Bitmap.Width - drawWidth) div 2;

  end;

  // gambar background dengan stretch proporsional-- jangan lupa urutan menggambarnya

  Bitmap.StretchPutImage(Rect(xOff, yOff, xOff+drawWidth, yOff+drawHeight), background, dmSet);

  //gambar object kotaknya-- jangan lupa urutan menggambarnya

  Bitmap.RectangleAntialias(x0,y0,x0+lebar,y0-tinggi,garis,tebal,isian);

end;

end.

dan berikut adalah lazarus formnya :

object Form1: TForm1

  Left = 350

  Height = 456

  Top = 250

  Width = 409

  Caption = 'Animasi Water Tank Sederhana'

  ClientHeight = 456

  ClientWidth = 409

  OnCreate = FormCreate

  object VirtualScreen: TBGRAVirtualScreen

    Left = 8

    Height = 392

    Top = 8

    Width = 392

    OnRedraw = VirtualScreenRedraw

    Alignment = taLeftJustify

    Color = clWhite

    ParentColor = False

    TabOrder = 0

    OnMouseMove = VirtualScreenMouseMove

  end

  object Label1: TLabel

    Left = 104

    Height = 15

    Top = 408

    Width = 34

    Caption = 'Label1'

  end

  object TrackBar1: TTrackBar

    Left = 0

    Height = 25

    Top = 424

    Width = 408

    Position = 0

    OnChange = TrackBar1Change

    TabOrder = 1

  end

  object Label2: TLabel

    Left = 8

    Height = 15

    Top = 408

    Width = 88

    Caption = 'Mouse Position :'

  end

end

Tambahan lagi jika teman - teman juga hanya memiliki ide dan ingin idenya bisa dibuat menjadi animasi, coba komen di bawah dan emailkan detail yang teman2 ingin capai siapa tau saya mampu membuatkan artikle nya