PureBasic Forums - English

http://www.purebasic.com
https://www.purebasic.fr/english/

Drawing on layers - Now with Code!

https://www.purebasic.fr/english/viewtopic.php?t=41421

Page 1 of 1

Drawing on layers - Now with Code!

Posted: Thu Mar 11, 2010 1:06 am
by 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... :D

Re: Drawing on layers

Posted: Thu Mar 11, 2010 1:59 am
by 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.

Re: Drawing on layers

Posted: Thu Mar 11, 2010 5:43 am
by 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!

Re: Drawing on layers - Now with Code!

Posted: Thu Mar 11, 2010 9:58 am
by 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 ;)

Re: Drawing on layers - Now with Code!

Posted: Thu Mar 11, 2010 5:57 pm
by 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! :mrgreen:

Re: Drawing on layers - Now with Code!

Posted: Thu Mar 11, 2010 10:46 pm
by 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".
All times are UTC+01:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited