Problem with visualizing process data on BananaPI

[gromar]

Hello!

My visualization shows booking status of seats in the bus. You can see whole bus with seats which should change colours and also numbers of free/ busy seats below the main picture. For example: at first there are 42 free green seats so we can see text: "42 free"; "0 busy". Let's say 2 people will sit on two seats. Main pic will change: there will be 40 seats green and 2 red one. Same with the text below: "40 free" and "2 busy".

I managed to synchronize signals from module box (CAN bus line) to BananaPi using TI SN65HVD230D transceiver. I got information from each ID seat section per one frame (seats 1-32 , 33-64 and status of each seat - free, taken, error and not available). I attach image example of frames I get using ./receive command with can4linux and table content of all ID frames. I wonder how I can next visualize all the process in Delphi. How should I attribute exact frame (from RX/TX signals of BananaPI gpio) to a correct colour and number of seat graphic icon. Thank you in advance for each tip

Example:

0.167986     938/0x000003aa : bD  ( 8 ): 00 fc ff ff ff ff ff 3f - noone is sitting
0.167963     938/0x000003aa : bD  ( 8 ): 01 fc ff ff ff ff ff 3f - seat no 1 is taken/ busy
0.167972     938/0x000003aa : bD  ( 8 ): 04 fc ff ff ff ff ff 3f - seat no 2 is taken/ busy
0.167973     938/0x000003aa : bD  ( 8 ): 10 00 fc ff ff ff ff 3f - seat no 3 is taken/busy
0.167973     938/0x000003aa : bD  ( 8 ): 40 00 fc ff ff ff ff 3f - seat no 4 is taken/busy
0.167981     938/0x000003aa : bD  ( 8 ): 00 01 fc ff ff ff ff 3f - seat no 5 is taken/busy
0.168021     938/0x000003aa : bD  ( 8 ): 00 04 fc ff ff ff ff 3f - seat no 6 is taken/busy
0.167986     938/0x000003aa : bD  ( 8 ): 00 10 fc ff ff ff ff 3f - seat no 7 is taken/busy
0.167988     938/0x000003aa : bD  ( 8 ): 00 40 fc ff ff ff ff 3f - seat no 8 is taken/busy
0.168017     938/0x000003aa : bD  ( 8 ): 00 00 fd ff ff ff ff 3f - seat no 9 is taken/busy

0.168023      938/0x000003aa : bD  ( 8 ): 00 00 fc ff ff ff ff 7f - seat no 32 is taken/busy
0.167001      939/0x000003ab : bD  ( 8 ): ff ff ff ff ff fc ff ff - seat no 53 is free
0.167023      939/0x000003ab : bD  ( 8 ): ff ff ff ff ff fd ff ff - seat no 53 is taken/busy

0.167992      938/0x000003aa : bD  ( 8 ): 00 01 fc ff ff ff ff 7f - seat no 5 & 32 are taken/ busy
0.167986      938/0x000003aa : bD  ( 8 ): 05 00 fc ff ff ff ff 3f - seat no 1 & 2 are taken/ busy
0.167965      938/0x000003aa : bD  ( 8 ): 40 01 fc ff ff ff ff 3f - seat no 4 & 5 are taken/ busy

0.167971      938/0x000003aa : bD  ( 8 ): 50 01 fc ff ff ff ff 3f - seat no 3, 4 and 5 are taken/busy

In link below I send my actual version of my project.
http://speedy.sh/2fxCC/bus-seats201505061219.tar

[serbod]

BananaPi and Cubieboard is powerful enough to draw standard GUI controls in realtime. You can use multiple TImage on form and assign pictures from TImageList.

Code: [Select]

  FormMain.ImageList16.GetBitmap(IconIndex, ImageN.Bitmap);

 It very easy and reliable, but can be tricky sometimes. LCL take considerable time to create visual controls (about 0.5-1 seconds for 40+ controls), but updates them fast afterwards.

Better way is using TPaintBox and drawing directly on TPaintBox.Canvas inside OnPaint event. It works fast and smooth, but take bit more time to implement.

For diagnostic and debugging purposes, use TEventLog (write diagnostic messages to file or syslog) or http://wiki.freepascal.org/DebugServer - they allow monitoring events inside program in separate window or from remote machine.

For getting icon with number - just draw icon, then draw number over it. For example, some of my old code.  vc - visual cell structure, it stores cell position and status.

Code: [Select]

  C:=PaintBox1.Canvas;

  if PanelType=1 then // old panel style
  begin
    // draw cell rect
    C.Pen.Color:=clBlack;
    C.Pen.Style:=psSolid;
    C.Pen.Width:=2;
    if vc.Selected then
    begin
      C.Pen.Color:=clGreen;
      C.Pen.Style:=psDash;
    end;
    C.Brush.Color:=clSilver;
    C.FillRect(vc.Rect);
    C.Rectangle(vc.Rect);
    // draw cell name in center of cell
    w:=C.TextWidth(vc.CellName);
    h:=C.TextHeight(vc.CellName);
    x:=((vc.Rect.Right-vc.Rect.Left) div 2) - (w div 2);
    C.TextOut(vc.Rect.Left+x, vc.Rect.Top+h, vc.CellName);
  end


[gromar]

Hello - thank you for fast respond

Still I don't know and I don't understand how should I assign that data/ frames to visualization. Could someone provide me an example since I'm newbie in Delphi programming and I'm sure it would help me a lot (or maybe improve the project which I attached above). Thank you in advance for any information!