Drawing Gridlines

[Mark Dunham]

In looking at another program that I am refactoring I wanted added a grid to it to make it easier to lineup tiles on the screen. The code below shows the Subroutine I am going to implement into my existing program.

nomainwin

WindowWidth = 800
WindowHeight = 600
UpperLeftX = int((DisplayWidth - WindowWidth)/2)
UpperLeftY = int((DisplayHeight - WindowHeight)/2)

graphicbox #Grid.GB, 0,0, 640,480

open "Grid" for window_nf as #Grid
   #Grid, "trapclose Quit"

   call DrawGrid

wait


'SUBROUTINES AND FUNCTIONS
sub Quit handle$
   close #handle$
   end
end sub

sub DrawGrid
   'DRAW LINES ON THE X AXIS
   #Grid.GB, "down; size 1"
   for i = 1 to 20
       #Grid.GB, "place "; i*32; " 0; north; turn 180; go 480"
   next i
   'DRAW LINES ON THE Y AXIS
   for i = 1 to 15
       #Grid.GB, "place 0 "; i*32; "; north; turn 90; go 640"
   next i
   'MAKE THE DRAWING STICK
   #Grid.GB, "flush"
end sub


[Brandon Parker]

Mark,
    Will the DrawGrid Subroutine be call only once when the window is opened or will there be instances where the grid will be redrawn by calling the DrawGrid Subroutine again?



{:0)

Brandon Parker

[Mark Dunham]

Apr 13, 2018 14:21:58 GMT -5 Brandon Parker said:

Mark,
    Will the DrawGrid Subroutinebe call only once when the window is opened or will there be instances where the grid will be redrawn by calling the DrawGrid Subroutine again?



{:0)

Brandon Parker

Brandon,

Later on in my program when you start a new instance I will need to call the subroutine again. I will also need to add a case statement to the program I am going to add it to because there are 7 window widths that the user can choose from. This subroutine will be added to the level editor that I have also posted on this forum.

[Brandon Parker]

Mark,

    In that case I might do something a little different.  Check out this routine below and see if it works for your needs.  Study the code as it might not be initially that intuitive, but it give you options and re-usability so the subroutine can be used with multiple GraphicBoxes.  It also creates/ destroys the drawing segment that is flushed to that GraphicBox.

Just a heads up the gBoxWidth, gBoxHeight, xLineLength, and yLineLength are shorter than the actual control's parameters to account for the type of boarder you have.  This could be different for various reason so....


nomainwin

WindowWidth = 800
WindowHeight = 600
UpperLeftX = int((DisplayWidth - WindowWidth)/2)
UpperLeftY = int((DisplayHeight - WindowHeight)/2)

graphicbox #Grid.GB, 0,0, 640,480

open "Grid" for window_nf as #Grid
   #Grid, "trapclose Quit"

   'call DrawGrid
   Call DrawGrid2 "#Grid.GB", 638, 478, 15, 638, "Black", 1, 20, 478, "Black", 1
wait


'SUBROUTINES AND FUNCTIONS
sub Quit handle$
   close #handle$
   end
end sub

sub DrawGrid
   'DRAW LINES ON THE X AXIS
   #Grid.GB, "down; size 1"
   for i = 1 to 20
       #Grid.GB, "place "; i*32; " 0; north; turn 180; go 480"
   next i
   'DRAW LINES ON THE Y AXIS
   for i = 1 to 15
       #Grid.GB, "place 0 "; i*32; "; north; turn 90; go 640"
   next i
   'MAKE THE DRAWING STICK
   #Grid.GB, "flush"
end sub

Sub DrawGrid2 handle$, gBoxWidth, gBoxHeight, xLines, xLineLength, xColor$, xSize, yLines, yLineLength, yColor$, ySize
   #handle$ "DelSegment TileGrid";handle$
   'DRAW LINES ON THE X AXIS
   #handle$, "Down; Color ";xColor$;"; Size ";xSize
   For i = 1 To xLines
       #handle$, "Place 0 ";(i * (gBoxHeight/ (xLines + 1)))
       #handle$, "GoTo ";xLineLength;" ";(i * (gBoxHeight/ (xLines + 1)))
   Next i

   'DRAW LINES ON THE Y AXIS
   #handle$, "Color ";yColor$;"; Size ";ySize
   For i = 1 To yLines
       #handle$, "Place ";(i * (gBoxWidth/ (yLines + 1)));" 0"
       #handle$, "GoTo ";(i * (gBoxWidth/ (yLines + 1)));" ";yLineLength
   Next i
   'MAKE THE DRAWING STICK
   #handle$, "Flush TileGrid";handle$
End Sub


{:0)


Brandon Parker

[tsh73]

Ok, what about making program read graphicbox dimensions instead of coding select case?

sub DrawGrid cellSize
   'DRAW LINES ON THE X AXIS
   #Grid.GB, "down; size 1"
   #Grid.GB "home; posxy cx cy"    'cx, cy gives us center, so doubled it will be width, height
   for i = 1 to 2*cx/ cellSize
       #Grid.GB, "line "; i*cellSize; " 0 "; i*cellSize;" ";cy*2
   next i
   'DRAW LINES ON THE Y AXIS
   for i = 1 to 2*cy/ cellSize
       #Grid.GB, "line 0 "; i*cellSize; " ";cx*2;" "; i*cellSize
   next i
   'MAKE THE DRAWING STICK
   #Grid.GB, "flush"
end sub


[Mark Dunham]

Apr 13, 2018 15:08:56 GMT -5 Brandon Parker said:

Mark,

    In that case I might do something a little different.  Check out this routine below and see if it works for your needs.  Study the code as it might not be initially that intuitive, but it give you options and re-usability so the subroutine can be used with multiple GraphicBoxes.  It also creates/ destroys the drawing segment that is flushed to that GraphicBox.

Just a heads up the gBoxWidth, gBoxHeight, xLineLength, and yLineLength are shorter than the actual control's parameters to account for the type of boarder you have.  This could be different for various reason so....


nomainwin

WindowWidth = 800
WindowHeight = 600
UpperLeftX = int((DisplayWidth - WindowWidth)/2)
UpperLeftY = int((DisplayHeight - WindowHeight)/2)

graphicbox #Grid.GB, 0,0, 640,480

open "Grid" for window_nf as #Grid
   #Grid, "trapclose Quit"

   'call DrawGrid
   Call DrawGrid2 "#Grid.GB", 638, 478, 15, 638, "Black", 1, 20, 478, "Black", 1
wait


'SUBROUTINES AND FUNCTIONS
sub Quit handle$
   close #handle$
   end
end sub

sub DrawGrid
   'DRAW LINES ON THE X AXIS
   #Grid.GB, "down; size 1"
   for i = 1 to 20
       #Grid.GB, "place "; i*32; " 0; north; turn 180; go 480"
   next i
   'DRAW LINES ON THE Y AXIS
   for i = 1 to 15
       #Grid.GB, "place 0 "; i*32; "; north; turn 90; go 640"
   next i
   'MAKE THE DRAWING STICK
   #Grid.GB, "flush"
end sub

Sub DrawGrid2 handle$, gBoxWidth, gBoxHeight, xLines, xLineLength, xColor$, xSize, yLines, yLineLength, yColor$, ySize
   #handle$ "DelSegment TileGrid";handle$
   'DRAW LINES ON THE X AXIS
   #handle$, "Down; Color ";xColor$;"; Size ";xSize
   For i = 1 To xLines
       #handle$, "Place 0 ";(i * (gBoxHeight/ (xLines + 1)))
       #handle$, "GoTo ";xLineLength;" ";(i * (gBoxHeight/ (xLines + 1)))
   Next i

   'DRAW LINES ON THE Y AXIS
   #handle$, "Color ";yColor$;"; Size ";ySize
   For i = 1 To yLines
       #handle$, "Place ";(i * (gBoxWidth/ (yLines + 1)));" 0"
       #handle$, "GoTo ";(i * (gBoxWidth/ (yLines + 1)));" ";yLineLength
   Next i
   'MAKE THE DRAWING STICK
   #handle$, "Flush TileGrid";handle$
End Sub


{:0)


Brandon Parker

Brandon,

Thanks for the example it gets the gears turning. I like the addition and see the benefits right away.

[Brandon Parker]

Following Anatoly's example above you could shorten my subroutine to remove the passing of the GraphicBox Width/ Height.  I still like the idea of passing the line lengths though just for flexibility.



Call DrawGrid2 "#Grid.GB", 15, 600, "Green", 1, 20, 478, "Black", 1

Sub DrawGrid2 handle$, xLines, xLineLength, xColor$, xSize, yLines, yLineLength, yColor$, ySize
   #handle$ "Home; PosXY midx midy"
   gBoxWidth = (midx * 2)
   gBoxHeight = (midy * 2)
   #handle$ "DelSegment TileGrid";handle$
   'DRAW LINES ON THE X AXIS
   #handle$, "Down; Color ";xColor$;"; Size ";xSize
   For i = 1 To xLines
       #handle$, "Place 0 ";(i * (gBoxHeight/ (xLines + 1)))
       #handle$, "GoTo ";xLineLength;" ";(i * (gBoxHeight/ (xLines + 1)))
   Next i

   'DRAW LINES ON THE Y AXIS
   #handle$, "Color ";yColor$;"; Size ";ySize
   For i = 1 To yLines
       #handle$, "Place ";(i * (gBoxWidth/ (yLines + 1)));" 0"
       #handle$, "GoTo ";(i * (gBoxWidth/ (yLines + 1)));" ";yLineLength
   Next i
   'MAKE THE DRAWING STICK
   #handle$, "Flush TileGrid";handle$
End Sub


{:0)

Brandon Parker

[Mark Dunham]

Apr 13, 2018 15:16:28 GMT -5 tsh73 said:

Ok, what about making program read graphicbox dimensions instead of coding select case?

sub DrawGrid cellSize
   'DRAW LINES ON THE X AXIS
   #Grid.GB, "down; size 1"
   #Grid.GB "home; posxy cx cy"    'cx, cy gives us center, so doubled it will be width, height
   for i = 1 to 2*cx/ cellSize
       #Grid.GB, "line "; i*cellSize; " 0 "; i*cellSize;" ";cy*2
   next i
   'DRAW LINES ON THE Y AXIS
   for i = 1 to 2*cy/ cellSize
       #Grid.GB, "line 0 "; i*cellSize; " ";cx*2;" "; i*cellSize
   next i
   'MAKE THE DRAWING STICK
   #Grid.GB, "flush"
end sub


tsh73,

Thanks for the sample code. I was thinking earlier how I could make it more flexible. I need to do more with the pen commands that LB offers this is the first project that I have really used them on.