In the property Tag the x and y coordinate is stored. We use that value to recalculate the coordinates of x and y when some clicks on a LED on the screen.

This is done in the procedure LedOnClick.

TMainForm.LedOnClick procedure (Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
var w, x1, y1: integer;
begin
  w:=TShape (Sender).Tag;
  x1:=w div 10; 
  y1:=w-x1*10;

  Label1.Caption:='X'+IntToStr(x1)+'Y:'+IntToStr(y1);
  SetPixel(x1,y1,not GetPixel(x1,y1));
  m8x8.Display;
end;

Pixel on and off

If you want to control not only the real LED matrix but also a visual one on the screen, you can do it with a common function.

Instead of the existing variants DrawPixel and ClearPixel I introduce two new elements in the sample app.

The function GetPixel(x,y) , which returns as a result the status (LED on or off) as a boolean value.

function TMainForm.GetPixel(x, y: integer): boolean;
begin
  result:=false;
  if x>7 then exit;
  if x<0 then exit;
  if y>7 then exit;
  if y<0 then exit;

  if TShape(Led[x,y]).Brush.Color=clRed then result:=true 
  else result:=false; 
end;

And the procedure SetPixel (x, y, status) , which sets the status of the LED as a boolean value.

procedure TMainForm.SetPixel(x, y: integer; LedOn: boolean);
begin
  if x>7 then exit;
  if x<0 then exit;
  if y>7 then exit;
  if y<0 then exit;

  if LedOn=true then
    begin
      TShape(Led[x,y]).Brush.Color:=clRed; 
      m8x8.DrawPixel(x,y);
    end
  else
    begin
      TShape(Led[x,y]).Brush.Color:=clWhite; 
      m8x8.ClearPixel(x,y);
    end;
end;

Manipulate LEDs or pixels

With this function and procedure, it is now very easy to perform simple manipulations in the real and visual matrix.

The matrix can be passed through with two loops.

E.g. to clear the matrix.

for x:=0 to 7 do
  for y:=0 to 7 do
    SetPixel(x,y,false);

8x8.Display;

It is important to know that the real matrix is only updated after you use the command Display. So this must be the command at the end of each manipulation.

Just as easy is it to invert the matrix.

    SetPixel(x,y,not GetPixel(x,y));

Another manipulation could be to move the LED image to the left.

for x:=0 to 6 do
  for y:=0 to 7 do
    SetPixel(x,y,GetPixel(x+1,y));

for y:=0 to 7 do
  SetPixel(7,y,false);

m8x8.Display;

For the other three directions, have a look in the source code of the sample app.

Now gets animated!

Animate means to us in this case that we previously have to save a matrix image. For this we transform the states of the LEDs (ON = 1 and OFF = 0) in a 64-character string and store it in a TListBox component.

The implementation of the code works just over two loops. Is a LED on, is added a 1 to a string s. If the LED is off, the string s is expanded with a 0. Finished!

if GetPixel(x,y)=true then s:=s+'1'
else s:=s+'0';

To display the matrix picture again, a reverse procedure is missing. The 64-character string is again broken down piece by piece in an x ​​and y coordinate, and turned on the LED:

procedure TMainForm.StrToMatrix8x8(value : string);
var x, y: integer;
begin
  for x:=0 to 7 do
    for y:=0 to 7 do
      if copy(value,x*8+y+ 1,1)='1' then SetPixel(x,y,true)
      else SetPixel(x,y,false);
  m8x8.Display;
end;

The actual animation takes place via a timer component. At each timer event a global variable is incremented and the next “image” from the listbox with procedure StrToMatrix8x8 is displayed.

That was it! In the sample app a few more functions are implemented: to change the order of images and to open and save the animation.

Have fun trying!

animation example

Animation sample: matrix and screen

Download

symbol_download

Source code of the sample app mini animation
use tar xfvz en.tar.gz

Links

Website of TMS software: https://www.tmssoftware.com/site/tmslclhwpack.asp

TMS package on github: https://github.com/tmssoftware/TMS-LCL-HW-Pack-for-Raspberry-Pi