Drawing on layers - Now with Code!

[Rook Zimbabwe]

I am interested if we can draw on layers in the 2D functions... Vector is possible so I think my idea is pretty OK there but can we draw on layers?

I am attempting to make a floormap editor for my POS program as people have asked for this tool aand it seems kind of straightforward... but I want to add or subtract gridlines to the map without redrawing EVERYTHING!

Will post code soonest...

[Kaeru Gaman]

draw one layer on an Image, the other on a second Image, draw both Images to the Output.
redraw only the layer you want.

... on a Screen you would normally use sprite and re-display every single thing every frame.
sprites are helluvalot faster than any drawing.
with sprites, you would draw nothing but only leave out what you don't want.

[Rook Zimbabwe]

Having a little tiny problem with that.

I amde the layer a BMP and it is RGB(0,0,0) but itt is not clear... I should see WHITE square in the iimage gadget... I plan to draw colored lines on the BLACK (invisible one) and see what goes from there.

images are here:
http://www.bluemesapc.com/Downloads/BLAH.zip

Code: Select all

Enumeration
  #Window_0
EndEnumeration

Enumeration
  #ButtonImage_POLE2
  #ButtonImage_POLE1
  #ButtonImage_UNDO
  #Text_3
  #Text_2
  #Text_1
  #Text_0
  #Button_SAVEIMAGE
  #Button_OPENIMAGE
  #ButtonImage_ERASER
  #ButtonImage_TEXT
  #Image_FILL
  #Image_OUTLINE
  #ButtonImage_WAIT
  #ButtonImage_DOOR
  #ButtonImage_WALL
  #ButtonImage_TABLE2
  #ButtonImage_TABLE1
  #ButtonImage_BOOTH
  #Combo_HIGH
  #Combo_WIDE
  #CheckBox_SHOWLINES
  #Image_MAP
  #Image_LAYER1
  #Image_LAYER2
EndEnumeration

Structure VisualDesignerGadgets
  Gadget.l
  EventFunction.l
EndStructure

Global NewList EventProcedures.VisualDesignerGadgets()

UsePNGImageDecoder()

Global Image1, Image10, Image11, Image12, Image15
Global Image16, Image17, Image18, Image19, Image30
Global Image13, Image14, Image20, Image21
Global setFILL ; fill shape color value
Global setLINE ; outline color value

Image1= CatchImage(#PB_Any, ?Image1)
Image10= CatchImage(#PB_Any, ?Image10)
Image11= CatchImage(#PB_Any, ?Image11)
Image12= CatchImage(#PB_Any, ?Image12)
Image13= CatchImage(#PB_Any, ?Image13)
Image15= CatchImage(#PB_Any, ?Image15)
Image16= CatchImage(#PB_Any, ?Image16)
Image17= CatchImage(#PB_Any, ?Image17)
Image18= CatchImage(#PB_Any, ?Image18)
Image19= CatchImage(#PB_Any, ?Image19)
Image20= CatchImage(#PB_Any, ?Image20)
Image14= CatchImage(#PB_Any, ?Image14)
Image21= CatchImage(#PB_Any, ?Image21)
Image30= CatchImage(#PB_Any, ?Image30)

DataSection
  Image1:
  IncludeBinary "backmap.png"
  Image10:
  IncludeBinary "FONT.png"
  Image11:
  IncludeBinary "ERASE.png"
  Image12:
  IncludeBinary "UNDO.png"
  Image13:
  IncludeBinary "BOOTH.png"
  Image15:
  IncludeBinary "TABLE1.png"
  Image16:
  IncludeBinary "TABLE2.png"
  Image17:
  IncludeBinary "DOOR.png"
  Image18:
  IncludeBinary "WAIT.png"
  Image19:
  IncludeBinary "WALL.png"
  Image20:
  IncludeBinary "POLE1.png"
  Image14:
  IncludeBinary "POLE2.png"
  Image21:
  IncludeBinary "LAYER.bmp"
  Image30:
  IncludeBinary "BLAH.png"
EndDataSection

;-
Procedure Button_SAVEIMAGE_Event(Window, Event, Gadget, Type)
  Debug "#Button_SAVEIMAGE"
EndProcedure

Procedure Button_OPENIMAGE_Event(Window, Event, Gadget, Type)
  Debug "#Button_OPENIMAGE"
EndProcedure
;-
Procedure ButtonImage_POLE2_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_POLE2"
EndProcedure

Procedure ButtonImage_POLE1_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_POLE1"
EndProcedure

Procedure ButtonImage_UNDO_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_UNDO"
EndProcedure

Procedure ButtonImage_ERASER_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_ERASER"
EndProcedure

Procedure ButtonImage_TEXT_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_TEXT"
EndProcedure

Procedure ButtonImage_WAIT_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_WAIT"
EndProcedure

Procedure ButtonImage_DOOR_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_DOOR"
EndProcedure

Procedure ButtonImage_WALL_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_WALL"
EndProcedure

Procedure ButtonImage_TABLE1_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_TABLE1"
EndProcedure

Procedure ButtonImage_TABLE2_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_TABLE2"
EndProcedure

Procedure ButtonImage_BOOTH_Event(Window, Event, Gadget, Type)
  Debug "#ButtonImage_BOOTH"
EndProcedure
;-
Procedure Combo_HIGH_Event(Window, Event, Gadget, Type)
  Debug "#Combo_HIGH"
EndProcedure
;-
Procedure Combo_WIDE_Event(Window, Event, Gadget, Type)
  Debug "#Combo_WIDE"
EndProcedure

Procedure CheckBox_SHOWLINES_Event(Window, Event, Gadget, Type)
  Debug "#CheckBox_SHOWLINES"
EndProcedure
;-
Procedure Image_FILL_Event(Window, Event, Gadget, Type)
  Debug "#Image_FILL"
  CurrenttColor = setFILL
  Color = ColorRequester(CurrentColor)
  Debug "color is: "+Str(Color)
  setFILL = Color
  SetGadgetColor(#Image_FILL, #PB_Gadget_BackColor, Color)
EndProcedure

Procedure Image_OUTLINE_Event(Window, Event, Gadget, Type)
  Debug "#Image_OUTLINE"
  CurrentOUTLINE = setLINE
  Color = ColorRequester(CurrentColor)
  setLINE=Color
  
EndProcedure
;-
Procedure Image_MAP_Event(Window, Event, Gadget, Type)
  Debug "#Image_MAP"
EndProcedure

Procedure Image_LAYER1_Event(Window, Event, Gadget, Type)
  Debug "#Image_LAYER1"
EndProcedure
;-
Procedure RegisterGadgetEvent(Gadget, *Function)
  
  If IsGadget(Gadget)
    AddElement(EventProcedures())
    EventProcedures()\Gadget        = Gadget
    EventProcedures()\EventFunction = *Function
  EndIf
  
EndProcedure

Procedure CallEventFunction(Window, Event, Gadget, Type)
  
  ForEach EventProcedures()
    If EventProcedures()\Gadget = Gadget
      CallFunctionFast(EventProcedures()\EventFunction, Window, Event, Gadget, Type)
      LastElement(EventProcedures())
    EndIf
  Next
  
EndProcedure
;-
Procedure Open_Window_0()
  
  If OpenWindow(#Window_0, 0, 0, 800, 585, "TABLEmap IMAGE MAKER 1.0",  #PB_Window_SystemMenu | #PB_Window_SizeGadget | #PB_Window_TitleBar )
    
    ImageGadget(#Image_MAP, 0, 0, 640, 578, ImageID(Image1), #PB_Image_Border)
    RegisterGadgetEvent(#Image_MAP, @Image_MAP_Event())
    ImageGadget(#Image_LAYER1, 0, 0, 640, 578, ImageID(Image21)) ; the layer that will have lines drawn
    RegisterGadgetEvent(#Image_LAYER1, @Image_LAYER1_Event())
    ImageGadget(#Image_LAYER2, 0, 0, 640, 578, ImageID(Image21)) ; the layer for drawing items
    
    
    CheckBoxGadget(#CheckBox_SHOWLINES, 650, 15, 140, 20, "SHOW GRIDLINES")
    RegisterGadgetEvent(#CheckBox_SHOWLINES, @CheckBox_SHOWLINES_Event())
    
    ComboBoxGadget(#Combo_WIDE, 655, 40, 60, 25)
    RegisterGadgetEvent(#Combo_WIDE, @Combo_WIDE_Event())
    ComboBoxGadget(#Combo_HIGH, 735, 40, 60, 20)
    RegisterGadgetEvent(#Combo_HIGH, @Combo_HIGH_Event())
    
    ButtonImageGadget(#ButtonImage_BOOTH, 650, 100, 45, 45, ImageID(Image13))
    RegisterGadgetEvent(#ButtonImage_BOOTH, @ButtonImage_BOOTH_Event())
    ButtonImageGadget(#ButtonImage_TABLE1, 700, 100, 45, 45, ImageID(Image15))
    RegisterGadgetEvent(#ButtonImage_TABLE1, @ButtonImage_TABLE1_Event())
    ButtonImageGadget(#ButtonImage_TABLE2, 750, 100, 45, 45, ImageID(Image16))
    RegisterGadgetEvent(#ButtonImage_TABLE2, @ButtonImage_TABLE2_Event())
    ButtonImageGadget(#ButtonImage_WALL, 650, 150, 45, 45, ImageID(Image19))
    RegisterGadgetEvent(#ButtonImage_WALL, @ButtonImage_WALL_Event())
    ButtonImageGadget(#ButtonImage_DOOR, 700, 150, 45, 45, ImageID(Image17))
    RegisterGadgetEvent(#ButtonImage_DOOR, @ButtonImage_DOOR_Event())
    ButtonImageGadget(#ButtonImage_WAIT, 750, 150, 45, 45, ImageID(Image18))
    RegisterGadgetEvent(#ButtonImage_WAIT, @ButtonImage_WAIT_Event())
    ButtonImageGadget(#ButtonImage_TEXT, 650, 250, 45, 45, ImageID(Image10))
    RegisterGadgetEvent(#ButtonImage_TEXT, @ButtonImage_TEXT_Event())
    ButtonImageGadget(#ButtonImage_ERASER, 750, 250, 45, 45, ImageID(Image11))
    RegisterGadgetEvent(#ButtonImage_ERASER, @ButtonImage_ERASER_Event())
    ButtonImageGadget(#ButtonImage_UNDO, 700, 250, 45, 45, ImageID(Image12))
    RegisterGadgetEvent(#ButtonImage_UNDO, @ButtonImage_UNDO_Event())
    ButtonImageGadget(#ButtonImage_POLE1, 650, 200, 45, 45, ImageID(Image20))
    RegisterGadgetEvent(#ButtonImage_POLE1, @ButtonImage_POLE1_Event())
    ButtonImageGadget(#ButtonImage_POLE2, 700, 200, 45, 45, ImageID(Image14))
    RegisterGadgetEvent(#ButtonImage_POLE2, @ButtonImage_POLE2_Event())
    
    ImageGadget(#Image_OUTLINE, 650, 395, 35, 30, ImageID(Image30), #PB_Image_Border)
    RegisterGadgetEvent(#Image_OUTLINE, @Image_OUTLINE_Event())
    
    ImageGadget(#Image_FILL, 650, 430, 35, 30, ImageID(Image30), #PB_Image_Border)
    RegisterGadgetEvent(#Image_FILL, @Image_FILL_Event())
    
    ButtonGadget(#Button_OPENIMAGE, 650, 470, 140, 40, "OPEN IMAGE")
    RegisterGadgetEvent(#Button_OPENIMAGE, @Button_OPENIMAGE_Event())
    ButtonGadget(#Button_SAVEIMAGE, 650, 515, 140, 40, "SAVE IMAGE")
    RegisterGadgetEvent(#Button_SAVEIMAGE, @Button_SAVEIMAGE_Event())
    
    TextGadget(#Text_0, 660, 65, 50, 15, "WIDE")
    TextGadget(#Text_1, 735, 65, 55, 15, "HIGH")
    TextGadget(#Text_2, 690, 395, 90, 15, "LINE COLOR")
    TextGadget(#Text_3, 690, 430, 90, 15, "FILL COLOR")
    
    
  EndIf
EndProcedure

Open_Window_0()

Repeat
  
  Event  = WaitWindowEvent()
  Gadget = EventGadget()
  Type   = EventType()
  Window = EventWindow()
  
  Select Event
  Case #PB_Event_Gadget
    CallEventFunction(Window, Event, Gadget, Type)
    
  EndSelect
  
Until Event = #PB_Event_CloseWindow

End

Still working on the rest of it... I am really just asking for help to do the lines and layer for now!

[gnasen]

What about this way: Take your current drawing and, if wanted, overdraw it with gridlines. Otherwise let it in its current state.

Code: Select all

EnableExplicit

Procedure.i grid(image.i,gridsize.i)
  
  Protected image_grid.i
  Protected width.i
  Protected height.i
  Protected x.i
  Protected y.i
  
  image_grid = CopyImage(image,#PB_Any)
  
  If gridsize > 0
    width  = ImageWidth(image)
    height = ImageHeight(image)
    
    StartDrawing(ImageOutput(image_grid))
    
    While x < width
      LineXY(x,0,x,height)
      x + gridsize
    Wend
    While y < height
      LineXY(0,y,width,y)
      y + gridsize
    Wend
    
    StopDrawing()
    
  EndIf
   
  ProcedureReturn image_grid
  
EndProcedure

Define image_current.i
image_current = CreateImage(#PB_Any,200,200)

StartDrawing(ImageOutput(image_current))
  Box(0,0,200,200,RGB(255,0,0))
StopDrawing()

OpenWindow(0,0,0,200,230,"test")
ImageGadget(0,0,0,200,200,ImageID(image_current),#PB_Image_Border)
CheckBoxGadget(1,0,210,200,20,"grid")

Define Event.i
Define Gadget.i
Define Type.i
Define Window.i

Repeat
  
  Event  = WaitWindowEvent()
  Gadget = EventGadget()
  Type   = EventType()
  Window = EventWindow()
  
  Select Event
    Case #PB_Event_Gadget
      If Gadget = 1 ;checkbox
        Define image_output.i
        If GetGadgetState(1) = #true
          image_output = grid(image_current,10)
        Else
          image_output = image_current
        EndIf
        SetGadgetState(0,ImageID(image_output))
      EndIf
      
  EndSelect
  
Until Event = #PB_Event_CloseWindow

By the way: Your "gadget-coding" style is very interesting, thanks for that idea

[Rook Zimbabwe]

@Gnasen: GREAT IDEA!!! I have adapted that into my code thank you!!! (FYI it works fine in 4.4X as well!)

I am on to the funner stuff like how to reclor an image and I am going to adapt that lines code to do that.

Then add items... I think I will atempt to do that as sprites so they can be dragged and rotated and resized more easy...

Will keep apprised!

[gnasen]

However be careful with memory leaks. In my example I did not free the temporary output image. To simplify matters I returned with every grid() call a new image. In an application you should use one output image which is freed (does this word exist!?) on top of every grid() call before its "overdrawn".