The code in this demo should be very straight forward and easy to follow. When I pull my car up to the pump, assume my wallet is full and the tank is empty. As I pump the gas, the tank begins to fill while the wallet begins to empty.

I used only one STATICTEXT for the two labels, and positioned them above the graphicbox they represent by filling the STATICTEXT with SPACE$(n). No need placing two controls when one will do the job.

Just Basic draws boxes in two steps: (a) Position the pen at the upper left corner where you want the box (the PLACE command works for me, but you could use the GOTO command), then (b) Enter the x y coordinates for the lower right corner of the box using the BOXFILLED command. I used -1 for the UL origin of the BOXFILLED to prevent having a 1 pixel line drawn down the left side of the box. The level of the fuel and the money remaining in the wallet are incremented or decremented with each iteration of the DO/LOOP until money>=120, the height of the graphicbox.

NOTE: Because location is measured from the top of the graphicbox, the upper origin of money counts up with each loop, and prints the box lower with each iteration. Gas, on the other hand, begins printing at the bottom of the graphicbox and counts down with each iteration, raising the level of the fuel.

'When I Fill the Gas Tank
'by Welo, 02/17/06
NOMAINWIN
WindowWidth=200
WindowHeight=200
UpperLeftX=INT((DisplayWidth-WindowWidth)/2)
UpperLeftY=INT((DisplayHeight-WindowHeight)/2)
GRAPHICBOX #win.gb1, 25, 25, 40, 120
GRAPHICBOX #win.gb2, 125, 25, 40, 120
STATICTEXT #win.st1, SPACE$(7)+"Tank"+SPACE$(24)+"Wallet",_
10, 5, 180, 20
BUTTON #win.btn1, "Start", [begin], UL, 75, 140, 40, 20
OPEN "Gas vs. Wallet" FOR WINDOW AS #win
PRINT #win, "trapclose [quit]"
PRINT #win.gb1, "DOWN" 'Ready to print in graphicbox 1
PRINT #win.gb2, "DOWN; FILL 120 255 190" 'The wallet begins as full
WAIT
[begin]
money=0 'Initial money in wallet (it's full to the top)
gas=120 'Initial fuel in tank (it's empty to the bottom)
DO
'Begin filling the tank
PRINT #win.gb1, "FILL white" 'Clear the background
PRINT #win.gb1, "BACKCOLOR 130 130 255" 'Set the color of money
PRINT #win.gb1, "PLACE -1 "; gas 'UL corner of the box
PRINT #win.gb1, "BOXFILLED 40 120" 'LR corner of the box
'Emptying the wallet at the same time
PRINT #win.gb2, "FILL white" 'Clear the background
PRINT #win.gb2, "BACKCOLOR 120 255 190" 'Set the color of fuel
PRINT #win.gb2, "PLACE -1 "; money 'UL corner of the box
PRINT #win.gb2, "BOXFILLED 40 120" 'LR corner of the box
TIMER 100, [cont]
WAIT
[cont]
TIMER 0
gas=gas-1 'Increase the level of the gas tank
money=money+2 'Decrease the level of the wallet
PRINT #win.gb1, "FLUSH"
PRINT #win.gb2, "FLUSH"
LOOP WHILE money<120 'Keep running as long as we have money left
WAIT
[quit]
CLOSE #win
END

Generally, I prefer to put TIMER loops in a SUB or GOSUB, but the method in this routine should be easily understood by any coder beginning with JB and will not return an error if the user closes the window while running.

As in real life, my wallet usually goes empty before the tank is full, but you can change the values for gas and money.