button text + picture

Just starting out? Need help? Post your questions and find answers here.
robin52
Posts: 7
Joined: Tue Apr 09, 2019 2:28 pm

button text + picture

Post by robin52 »

hello,


I would have liked to know what was the best way to make a button containing an image and a text.

there is the buttonGadget for text and buttonImageGadget for picture, but I would like a button that can do both.

Is it possible ?
Peter53
Posts: 12
Joined: Thu Mar 28, 2019 2:58 pm

Re: button text + picture

Post by Peter53 »

Use canvas and roll your own.
Here's a small example to work with.

Code: Select all


DeclareModule ButtonGad
  Enumeration
    #ButtonStretch
    #ButtonTopLeft
    #ButtonTopCenter
    #ButtonTopRight
    #ButtonMiddleLeft
    #ButtonMiddleCenter
    #ButtonMiddleRight
    #ButtonBottomLeft
    #ButtonBottomCenter
    #ButtonBottomRight
  EndEnumeration
  
  Declare.i CreateButton(GadID.i = #PB_Any, X.i = 0, Y.i = 0, Width.i = 100, Height.i = 30, Text.s = "Button", Image.i = -1)
  Declare.i InsertImage(GadID.i, image.i, Position.i = #ButtonStretch)
  Declare.i ChangeImagePosition(GadID.i, Position.i = #ButtonStretch)
  Declare.i GetImagePosition(GadID.i)
  Declare.i ChangeTextPosition(GadID.i, Position.i = #ButtonMiddleCenter)
  Declare.i GetTextPosition(GadID.i)
  Declare.i SetBackColor(GadID.i, Color.i = $AAAAAA)
  Declare.i SetForeColor(GadID.i, Color.i = $0)
  Declare.i SetFont(GadID.i, FontID.i)
  Declare.i Borders(GadID.i, TrueFalse.i = #True)
  
EndDeclareModule

Module ButtonGad
  Structure _Button
    id.i
    x.i
    y.i
    w.i
    h.i
    im.i
    tx.s
    fo.i
    iPos.i
    tPos.i
    bc.i
    fc.i
    bo.i
  EndStructure
  Global NewList b._Button()
  Declare.i ReDraw(*g._Button)
  
  Procedure.i CreateButton(GadID.i = #PB_Any, X.i = 0, Y.i = 0, Width.i = 100, Height.i = 30, Text.s = "Button", Image.i = -1)
    Protected ret.i
    AddElement(b())
    With b()
      \fc = $0
      \bc = $AAAAAA
      \fo = -1
      \x = X
      \y = Y
      \w = Width
      \h = Height
      \tx = Text
      \iPos = #ButtonMiddleCenter
      \tPos = #ButtonBottomLeft
      \bo = #True
      If GadID = #PB_Any
        \id = CanvasGadget(#PB_Any, \x, \y, \w, \h, #PB_Canvas_Keyboard)
        ret = \id
      Else
        \id = GadID
        ret = CanvasGadget(\id, \x, \y, \w, \h, #PB_Canvas_Keyboard)
      EndIf
      ReDraw(b())
    EndWith
    
    ProcedureReturn ret
  EndProcedure
  
  Procedure.i Borders(GadID.i, TrueFalse.i = #True)
    ForEach b()
      If b()\id = GadID
        b()\bo = TrueFalse
        ReDraw(b())
        Break
      EndIf
    Next 
  EndProcedure
  
  Procedure.i ReDraw(*g._Button)
    Protected x.i = 2, y.i = 2, w.i, h.i
    With *g
      StartDrawing(CanvasOutput(*g\id))
      w = OutputWidth() - 4 : h = OutputHeight() - 4
      Box(0, 0, OutputWidth(), OutputHeight(), *g\bc)
      If IsImage(\im)
        Select \iPos
          Case  #ButtonStretch
            DrawImage(ImageID(\im), x, y, w, h)
          Case  #ButtonTopLeft
            DrawImage(ImageID(\im), x, y)
          Case  #ButtonTopCenter
            DrawImage(ImageID(\im), w/2 - ImageWidth(\im)/2, y)
          Case  #ButtonTopRight
            DrawImage(ImageID(\im), w-ImageWidth(\im), 0)
          Case  #ButtonMiddleLeft
            DrawImage(ImageID(\im), x, h/2 - ImageHeight(\im)/2)
          Case  #ButtonMiddleCenter
            DrawImage(ImageID(\im), w/2 - ImageWidth(\im)/2, h/2 - ImageHeight(\im)/2)
          Case  #ButtonMiddleRight
            DrawImage(ImageID(\im), w-ImageWidth(\im), h/2 - ImageHeight(\im)/2)
          Case  #ButtonBottomLeft
            DrawImage(ImageID(\im), x, h-ImageHeight(\im)/2)
          Case  #ButtonBottomCenter
            DrawImage(ImageID(\im), w/2 - ImageWidth(\im)/2, h-ImageHeight(\im))
          Case  #ButtonBottomRight
            DrawImage(ImageID(\im), w - ImageWidth(\im), h - ImageHeight(\im))
        EndSelect
      EndIf
      If *g\tx <> ""
        If IsFont(\fo) : DrawingFont(FontID(\fo)) : EndIf
        DrawingMode(#PB_2DDrawing_Transparent)
        Select *g\tPos
          Case  #ButtonStretch ;Won't work, so we draw it as default location Center
            DrawText(w/2 - TextWidth(\tx)/2, h/2 - TextHeight(\tx)/2, \tx, \fc)
          Case  #ButtonTopLeft
            DrawText(x, y, \tx, \fc)
          Case  #ButtonTopCenter
            DrawText(w/2 - TextWidth(\tx)/2, y, \tx, \fc)
          Case  #ButtonTopRight
            DrawText(w-TextWidth(\tx), y, \tx, \fc)
          Case  #ButtonMiddleLeft
            DrawText(x, h/2 - TextHeight(\tx)/2, \tx, \fc)
          Case  #ButtonMiddleCenter
            DrawText(w/2 - TextWidth(\tx)/2, h/2 - TextHeight(\tx)/2, \tx, \fc)
          Case  #ButtonMiddleRight
            DrawText(w - TextWidth(\tx), h/2 - TextHeight(\tx)/2, \tx, \fc)
          Case  #ButtonBottomLeft
            DrawText(x, h - TextHeight(\tx), \tx, \fc)
          Case  #ButtonBottomCenter
            DrawText(w/2 - TextWidth(\tx)/2, h - TextHeight(\tx), \tx, \fc)
          Case  #ButtonBottomRight
            DrawText(w - TextWidth(\tx), h - TextHeight(\tx), \tx, \fc)
        EndSelect
      EndIf
      If \bo = #True
        LineXY(1, 1, 1, OutputHeight(), $FFFFFF)
        LineXY(1, 1, OutputWidth(), 1, $FFFFFF)
        LineXY(OutputWidth()-1, 1, OutputWidth()-1, OutputHeight(), $888888)
        LineXY(1, OutputHeight()-1, OutputWidth(), OutputHeight()-1, $888888)
      EndIf
      StopDrawing()
    EndWith
    
  EndProcedure
  
  Procedure.i InsertImage(GadID.i, image.i, Position.i = #ButtonStretch)
    ForEach b()
      If b()\id = GadID
        b()\im = image
        b()\iPos = Position
        ReDraw(b())
        Break
      EndIf
    Next 
  EndProcedure
  
  Procedure.i ChangeImagePosition(GadID.i, Position.i = #ButtonStretch)
    ForEach b()
      If b()\id = GadID
        b()\iPos = Position
        ReDraw(b())
        Break
      EndIf
    Next 
  EndProcedure
  
  Procedure.i GetImagePosition(GadID.i)
    Protected pos.i 
    ForEach b()
      If b()\id = GadID
        pos = b()\iPos
        Break
      EndIf
    Next 
    ProcedureReturn pos
  EndProcedure
  
  Procedure.i ChangeTextPosition(GadID.i, Position.i = #ButtonMiddleCenter)
    ForEach b()
      If b()\id = GadID
        b()\tPos = Position
        ReDraw(b())
        Break
      EndIf
    Next 
  EndProcedure
  
  Procedure.i GetTextPosition(GadID.i)
    Protected pos
    ForEach b()
      If b()\id = GadID
        pos = b()\tPos
        Break
      EndIf
    Next 
    ProcedureReturn pos
  EndProcedure
  
  Procedure.i SetBackColor(GadID.i, Color.i = $AAAAAA)
    ForEach b()
      If b()\id = GadID
        b()\bc = Color
        ReDraw(b())
        Break
      EndIf
    Next 
  EndProcedure
  
  Procedure.i SetForeColor(GadID.i, Color.i = $0)
    ForEach b()
      If b()\id = GadID
        b()\fc = Color
        ReDraw(b())
        Break
      EndIf
    Next 
  EndProcedure
  
  Procedure.i SetFont(GadID.i, FontID.i)
    ForEach b()
      If b()\id = GadID
        b()\fo = FontID
        ReDraw(b())
        Break
      EndIf
    Next 
  EndProcedure
  
EndModule

Declare.i RandomPositions()

Global b1
im = CreateImage(#PB_Any, 20, 20)
StartDrawing(ImageOutput(im))
Box(0, 0, 20, 20, $FF00FF)
StopDrawing()
OpenWindow(0, 0, 0, 800, 600, "Buttons", #PB_Window_SystemMenu)
b1 = ButtonGad::CreateButton(#PB_Any, 10, 10, 200, 50, "Button")
ButtonGad::ChangeTextPosition(b1, ButtonGad::#ButtonMiddleCenter)
ButtonGad::InsertImage(b1, im, ButtonGad::#ButtonMiddleLeft)
BindGadgetEvent(b1, @RandomPositions(), #PB_EventType_LeftClick)


Procedure.i RandomPositions()
  ButtonGad::ChangeTextPosition(b1, Random(8))
  ButtonGad::ChangeImagePosition(b1, Random(8))
  ButtonGad::SetForeColor(b1, RGB(Random(255,60), Random(255, 60), Random(255)))
EndProcedure
robin52
Posts: 7
Joined: Tue Apr 09, 2019 2:28 pm

Re: button text + picture

Post by robin52 »

thanks peter, your exemple will be helpfull =)
Post Reply