Mempercantik Tun2Socks Traffic Monitor dengan Speedometer

Pembuatan Tun2Socks Traffic Monitor sudah Ane bahas pada artikel “Membuat Network Traffic Monitor Khusus untuk Tun2Socks GUI“, begitu pula Speedometer menggunakan Delphi. Lalu bagaimana kalau kita gabungkan keduanya?

Pertama yang harus kita siapkan adalah komponen Speedometer dan source code Tun2Socks Traffic Monitor. Dengan menggunakan Source Tun2Socks Traffic Monitor sebelumnya, kita akan memodifikasi sedikit sehingga Speedometer bisa ditambahkan pada source project tersebut.
Pada project Tun2Socks Traffic Monitor terdapat sebuah Timer yang berisi tentang informasi trafik secara Realtime. Nah pada area tersebut, nilai posisi Speedometer masukkan.
Lihat isi kode Timer sebelumnya seperti berikut:

procedure TForm1.Timer1Timer(Sender: TObject); var inval, outval: Cardinal; i: Integer; begin ProcessMIBData; if Assigned(ActiveTraffic) then with ActiveTraffic do begin ledAdapterDescription.Text := Description; ledMACAddress.Text := MAC; ledSpeed.Text := BitsToFriendlyString(Speed); ledOctInSec.Text := BytesToFriendlyString(InPerSec); ledPeakInSec.Text := BytesToFriendlyString(PeakInPerSec); ledAvgINSec.Text := BytesToFriendlyString(AverageInPerSec); ledTotalIN.Text := BytesToFriendlyString(InTotal); ledOctOUTSec.Text := BytesToFriendlyString(OutPerSec); ledPeakOUTSec.Text := BytesToFriendlyString(PeakOutPerSec); ledAvgOUTSec.Text := BytesToFriendlyString(AverageOutPerSec); ledTotalOUT.Text := BytesToFriendlyString(OutTotal); self.ledStartedAt.Text := DateTimeToStr(StartedAt); self.ledActiveFor.Text := FriendlyRunningTime; Form1.Caption := IP; end;//with end; (*RefreshDisplay*)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

procedure TForm1.Timer1Timer(Sender: TObject); var   inval, outval: Cardinal;   i: Integer; begin   ProcessMIBData;     if Assigned(ActiveTraffic) then     with ActiveTraffic do   begin       ledAdapterDescription.Text := Description;     ledMACAddress.Text := MAC;       ledSpeed.Text := BitsToFriendlyString(Speed);       ledOctInSec.Text := BytesToFriendlyString(InPerSec);     ledPeakInSec.Text := BytesToFriendlyString(PeakInPerSec);     ledAvgINSec.Text := BytesToFriendlyString(AverageInPerSec);     ledTotalIN.Text := BytesToFriendlyString(InTotal);       ledOctOUTSec.Text := BytesToFriendlyString(OutPerSec);     ledPeakOUTSec.Text := BytesToFriendlyString(PeakOutPerSec);     ledAvgOUTSec.Text := BytesToFriendlyString(AverageOutPerSec);     ledTotalOUT.Text := BytesToFriendlyString(OutTotal);         self.ledStartedAt.Text := DateTimeToStr(StartedAt);     self.ledActiveFor.Text := FriendlyRunningTime;       Form1.Caption := IP;     end;//with   end; (*RefreshDisplay*)

Kode tersebut yang akan kita modifikasi sehingga trafik akan terlihat di Speedometer.
Simak langkah-langkah pembuatannya

Modifikasi Source Tun2socks Traffic Monitor

1. Masukan komponen Speedometer ke dalam Form lalu ganti propertinya sesuai yang diharapkan.
2. Buat variabel “curposition: Integer;” pada “global variable declaration” sebagai tambahan untuk menyimpan posisi Speedometer yang sedang dilihat
   
   var Form1: TForm1; ActiveTraffic: TTraffic; AdapterObject: TList; curposition: Integer;

   1 2 3 4 5

   var   Form1: TForm1;   ActiveTraffic: TTraffic;   AdapterObject: TList;   curposition: Integer;

3. DoubleClick komponen Timer,maka isi kode timer akan terbuka
4. Tambahkan kode berikut pada timer, posisinya di area “with ActiveTraffic do”
   
   inval := InPerSec div 1000; if inval < 1 then inval := 1; Speedo.Position := inval; curposition := inval;

   1 2 3 4 5

   inval := InPerSec div 1000;     if inval < 1 then       inval := 1;     Speedo.Position := inval;     curposition := inval;

   Agar tidak terlihat kaku, kita buat loop supaya pergerakannya terlihat tidak patah-patah saat berpindah nilai posisi
   
   inval := InPerSec div 1000; if inval < 1 then inval := 1; if inval > curposition then begin for i:=curposition to inval do begin Speedo.Position := i; end; curposition := inval; end else begin for i:=curposition downto inval do begin Speedo.Position := i; end; curposition := inval; end;

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   inval := InPerSec div 1000;     if inval < 1 then       inval := 1;       if inval > curposition then begin       for i:=curposition to inval do begin         Speedo.Position := i;       end;       curposition := inval;     end     else begin       for i:=curposition downto inval do begin         Speedo.Position := i;       end;       curposition := inval;     end;

   Agar lebih menarik, kita tambahkan “elastic bounce effect” menggunakan loop
   
   inval := InPerSec div 1000; if inval < 1 then inval := 1; if inval > curposition then begin for i:=curposition to inval do begin Speedo.Position := i; end; // START code Elastic Bounce Effect for i:=inval to inval + 20 do begin Speedo.Position := i; end; for i:=inval + 20 downto inval - 7 do begin Speedo.Position := i; end; for i:=inval - 7 to inval do begin Speedo.Position := i; end; // END code Elastic Bounce Effect curposition := inval; end else begin for i:=curposition downto inval do begin Speedo.Position := i; end; curposition := inval; end;

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

   inval := InPerSec div 1000;     if inval < 1 then       inval := 1;         if inval > curposition then begin       for i:=curposition to inval do begin         Speedo.Position := i;       end;              // START code Elastic Bounce Effect       for i:=inval to inval + 20 do begin         Speedo.Position := i;       end;       for i:=inval + 20 downto inval - 7 do begin         Speedo.Position := i;       end;       for i:=inval - 7 to inval do begin         Speedo.Position := i;       end;       // END code Elastic Bounce Effect              curposition := inval;     end     else begin       for i:=curposition downto inval do begin         Speedo.Position := i;       end;       curposition := inval;     end;

Hasil akhir kode dalam Timer menjadi :

procedure TForm1.Timer1Timer(Sender: TObject); var inval, outval: Cardinal; i: Integer; begin ProcessMIBData; if Assigned(ActiveTraffic) then with ActiveTraffic do begin ledAdapterDescription.Text := Description; ledMACAddress.Text := MAC; ledSpeed.Text := BitsToFriendlyString(Speed); ledOctInSec.Text := BytesToFriendlyString(InPerSec); ledPeakInSec.Text := BytesToFriendlyString(PeakInPerSec); ledAvgINSec.Text := BytesToFriendlyString(AverageInPerSec); ledTotalIN.Text := BytesToFriendlyString(InTotal); ledOctOUTSec.Text := BytesToFriendlyString(OutPerSec); ledPeakOUTSec.Text := BytesToFriendlyString(PeakOutPerSec); ledAvgOUTSec.Text := BytesToFriendlyString(AverageOutPerSec); ledTotalOUT.Text := BytesToFriendlyString(OutTotal); self.ledStartedAt.Text := DateTimeToStr(StartedAt); self.ledActiveFor.Text := FriendlyRunningTime; Form1.Caption := IP; inval := InPerSec div 1000; if inval < 1 then inval := 1; if inval > curposition then begin for i:=curposition to inval do begin Speedo.Position := i; end; for i:=inval to inval + 20 do begin Speedo.Position := i; end; for i:=inval + 20 downto inval - 7 do begin Speedo.Position := i; end; for i:=inval - 7 to inval do begin Speedo.Position := i; end; curposition := inval; end else if inval >= 420 then begin for i:=0 to 10 do begin inval := 420; if inval = 420 then begin inval := 410; end else begin inval := 420; end; Speedo.Position := inval; curposition := inval; Sleep(100); end; end else begin for i:=curposition downto inval do begin Speedo.Position := i; end; curposition := inval; end; end;//with end; (*RefreshDisplay*)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

procedure TForm1.Timer1Timer(Sender: TObject); var   inval, outval: Cardinal;   i: Integer; begin   ProcessMIBData;     if Assigned(ActiveTraffic) then     with ActiveTraffic do   begin       ledAdapterDescription.Text := Description;     ledMACAddress.Text := MAC;       ledSpeed.Text := BitsToFriendlyString(Speed);       ledOctInSec.Text := BytesToFriendlyString(InPerSec);     ledPeakInSec.Text := BytesToFriendlyString(PeakInPerSec);     ledAvgINSec.Text := BytesToFriendlyString(AverageInPerSec);     ledTotalIN.Text := BytesToFriendlyString(InTotal);       ledOctOUTSec.Text := BytesToFriendlyString(OutPerSec);     ledPeakOUTSec.Text := BytesToFriendlyString(PeakOutPerSec);     ledAvgOUTSec.Text := BytesToFriendlyString(AverageOutPerSec);     ledTotalOUT.Text := BytesToFriendlyString(OutTotal);         self.ledStartedAt.Text := DateTimeToStr(StartedAt);     self.ledActiveFor.Text := FriendlyRunningTime;       Form1.Caption := IP;       inval := InPerSec div 1000;     if inval < 1 then       inval := 1;         if inval > curposition then begin       for i:=curposition to inval do begin         Speedo.Position := i;       end;       for i:=inval to inval + 20 do begin         Speedo.Position := i;       end;       for i:=inval + 20 downto inval - 7 do begin         Speedo.Position := i;       end;       for i:=inval - 7 to inval do begin         Speedo.Position := i;       end;       curposition := inval;     end     else if inval >= 420 then begin       for i:=0 to 10 do begin         inval := 420;         if inval = 420 then begin           inval := 410;         end         else begin           inval := 420;         end;         Speedo.Position := inval;         curposition := inval;         Sleep(100);       end;     end     else begin       for i:=curposition downto inval do begin         Speedo.Position := i;       end;       curposition := inval;     end;     end;//with   end; (*RefreshDisplay*)