locked
Coloured buttons in Small Basic RRS feed

  • Question

  • I have created an awesome Paints program on Small Basic. It has password protection and functions like Import Image and Create Custom Colour. But the only thing that's preventing me from publishing it is that I can't get any colour on the buttons. Does anyone know how to add colours to buttons?
    Friday, September 6, 2013 12:56 PM

Answers

  • Something like this??

    GraphicsWindow.BrushColor = "Black"
    Button = Controls.AddButton("Hope!",50,50)
    GraphicsWindow.BrushColor = "Black"
    Button2 = Controls.AddButton("Hope!",200,50)

    Controls.SetSize(Button,100,40)
    Controls.SetSize(Button2,100,40)

    GraphicsWindow.BrushColor = "#80FF0000"
    GraphicsWindow.PenColor = "#00FF0000"
    Shape = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape,50,50)

    GraphicsWindow.BrushColor = "#8000FF25"
    Shape2 = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape2,200,50)


    It is written: "'As surely as I live,' says the Lord, 'every knee will bow before me; every tongue will acknowledge God.'" Romans 14:11

    Friday, September 6, 2013 3:11 PM
    Answerer
  • Something like Zock's idea may be possible, but as it is you can't then click the colored buttons.  Add the following to the code to see the issue.

    Controls.ButtonClicked = OnButtonClicked
    Sub OnButtonClicked
      GraphicsWindow.ShowMessage("Clicked","Information")
    EndSub

    You could also use an extension, like the mine (perhaps also others) to put an image on a button, but the image needs the text on it, unlike your avatar image used below.

    img = ImageList.LoadImage("http://i1.social.s-msft.com/profile/u/avatar.jpg?displayname=aditya_sxcs&size=extralarge&version=00000000-0000-0000-0000-000000000000")
    LDShapes.SetImage(Button,img)
    LDShapes.SetImage(Button2,img)

    The difficulty adding brush colour to buttons is all the automatic hover changes etc which cause strange behavior, hence the image option I used.

    EDIT, perhaps like this, a bit complicated, but could be coded in a subroutine better.

    GraphicsWindow.BrushColor = "#80FF0000"
    GraphicsWindow.PenColor = "#00FF0000"
    Shape = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape,50,50)
    
    GraphicsWindow.BrushColor = "#80FF0000"
    GraphicsWindow.PenColor = "#00FF0000"
    Shape = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape,50,50)
    GraphicsWindow.BrushColor = "Black"
    Txt = Shapes.AddText("Hope!")
    Shapes.Move(Txt,82,62)
    
    GraphicsWindow.BrushColor = "#8000FF25"
    Shape2 = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape2,200,50)
    GraphicsWindow.BrushColor = "Black"
    Txt = Shapes.AddText("Hope!")
    Shapes.Move(Txt,232,62)
    
    GraphicsWindow.BrushColor = "Black"
    Button = Controls.AddButton("Hope!",50,50)
    Shapes.SetOpacity(Button,0)
    GraphicsWindow.BrushColor = "Black"
    Button2 = Controls.AddButton("Hope!",200,50)
    Shapes.SetOpacity(Button2,0)
    
    Controls.SetSize(Button,100,40)
    Controls.SetSize(Button2,100,40)
    
    Controls.ButtonClicked = OnButtonClicked
    Sub OnButtonClicked
      GraphicsWindow.ShowMessage("Clicked","Information")
    EndSub

    Friday, September 6, 2013 5:53 PM
  • Yeah the buttons have some limits in terms of full control over their formatting and captions.

    Another alternative is making your own.

    Here's a sample of a calculator I found on the web. This is not my code. Here's a link to the author and the  smallbasic.com link.  It's really good code (I reckon), worth a look.

    https://www.simple-talk.com/iwritefor/articlefiles/958-SmallBasicCalc.htm

    or published:  http://smallbasic.com/program/?SNG664

    You should be able to use shapes as well using this technique.

    Here's the link to the author: https://www.simple-talk.com/dotnet/.net-tools/microsoft-small-basic-for-.net/
    Friday, September 6, 2013 7:21 PM
  • As some Operations from the Controls <-> Shapes  objects are interchangeable eg. Controls<->Shapes  .Move works for Shapes<->Controls etc. i always use Shapes.SetOpacity to make Controls transparent and so show Background -Drawings or -Images in Buttons, (MultiLine)TextBoxes or LDControls from LitDev's great Extension.

    Sample Import: KTT596

    You can even show animated Shapes behind/under Controls, rotate Buttons (if makes sense or just for fun), overlay Buttons or make Buttons the whole GW-Size aso.

    Sample Import: NSQ830

    Lookin forward to your PAINTs Proggy. Publishing ?

    Thursday, September 12, 2013 7:33 PM
    Answerer

All replies

  • Something like this??

    GraphicsWindow.BrushColor = "Black"
    Button = Controls.AddButton("Hope!",50,50)
    GraphicsWindow.BrushColor = "Black"
    Button2 = Controls.AddButton("Hope!",200,50)

    Controls.SetSize(Button,100,40)
    Controls.SetSize(Button2,100,40)

    GraphicsWindow.BrushColor = "#80FF0000"
    GraphicsWindow.PenColor = "#00FF0000"
    Shape = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape,50,50)

    GraphicsWindow.BrushColor = "#8000FF25"
    Shape2 = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape2,200,50)


    It is written: "'As surely as I live,' says the Lord, 'every knee will bow before me; every tongue will acknowledge God.'" Romans 14:11

    Friday, September 6, 2013 3:11 PM
    Answerer
  • Something like Zock's idea may be possible, but as it is you can't then click the colored buttons.  Add the following to the code to see the issue.

    Controls.ButtonClicked = OnButtonClicked
    Sub OnButtonClicked
      GraphicsWindow.ShowMessage("Clicked","Information")
    EndSub

    You could also use an extension, like the mine (perhaps also others) to put an image on a button, but the image needs the text on it, unlike your avatar image used below.

    img = ImageList.LoadImage("http://i1.social.s-msft.com/profile/u/avatar.jpg?displayname=aditya_sxcs&size=extralarge&version=00000000-0000-0000-0000-000000000000")
    LDShapes.SetImage(Button,img)
    LDShapes.SetImage(Button2,img)

    The difficulty adding brush colour to buttons is all the automatic hover changes etc which cause strange behavior, hence the image option I used.

    EDIT, perhaps like this, a bit complicated, but could be coded in a subroutine better.

    GraphicsWindow.BrushColor = "#80FF0000"
    GraphicsWindow.PenColor = "#00FF0000"
    Shape = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape,50,50)
    
    GraphicsWindow.BrushColor = "#80FF0000"
    GraphicsWindow.PenColor = "#00FF0000"
    Shape = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape,50,50)
    GraphicsWindow.BrushColor = "Black"
    Txt = Shapes.AddText("Hope!")
    Shapes.Move(Txt,82,62)
    
    GraphicsWindow.BrushColor = "#8000FF25"
    Shape2 = Shapes.AddRectangle(100,40)
    Shapes.Move(Shape2,200,50)
    GraphicsWindow.BrushColor = "Black"
    Txt = Shapes.AddText("Hope!")
    Shapes.Move(Txt,232,62)
    
    GraphicsWindow.BrushColor = "Black"
    Button = Controls.AddButton("Hope!",50,50)
    Shapes.SetOpacity(Button,0)
    GraphicsWindow.BrushColor = "Black"
    Button2 = Controls.AddButton("Hope!",200,50)
    Shapes.SetOpacity(Button2,0)
    
    Controls.SetSize(Button,100,40)
    Controls.SetSize(Button2,100,40)
    
    Controls.ButtonClicked = OnButtonClicked
    Sub OnButtonClicked
      GraphicsWindow.ShowMessage("Clicked","Information")
    EndSub

    Friday, September 6, 2013 5:53 PM
  • Yeah the buttons have some limits in terms of full control over their formatting and captions.

    Another alternative is making your own.

    Here's a sample of a calculator I found on the web. This is not my code. Here's a link to the author and the  smallbasic.com link.  It's really good code (I reckon), worth a look.

    https://www.simple-talk.com/iwritefor/articlefiles/958-SmallBasicCalc.htm

    or published:  http://smallbasic.com/program/?SNG664

    You should be able to use shapes as well using this technique.

    Here's the link to the author: https://www.simple-talk.com/dotnet/.net-tools/microsoft-small-basic-for-.net/
    Friday, September 6, 2013 7:21 PM
  • well, i made this program... does this help? (you can change message and colors)

    GraphicsWindow.MouseMove=move
    GraphicsWindow.MouseDown=down
    GraphicsWindow.BrushColor="Black"
    GraphicsWindow.FontSize=50
    GraphicsWindow.DrawText(190,30,"EXIT")
    GraphicsWindow.PenColor="Black"
    GraphicsWindow.drawRectangle(10,10,500,100)
    Sub move
      if GraphicsWindow.MouseX>10 and GraphicsWindow.MouseX<500 and GraphicsWindow.MouseY>10 And GraphicsWindow.MouseY<100 Then
        GraphicsWindow.BrushColor="Red"
        GraphicsWindow.PenColor="Black"
        GraphicsWindow.FillRectangle(10,10,500,100)
        GraphicsWindow.BrushColor="Black"
        GraphicsWindow.FontSize=50
        GraphicsWindow.DrawText(190,30,"EXIT")
      Else
        GraphicsWindow.BrushColor="White"
        GraphicsWindow.PenColor="Black"
        GraphicsWindow.FillRectangle(10,10,500,100)
        GraphicsWindow.BrushColor="Black"
        GraphicsWindow.FontSize=50
        GraphicsWindow.DrawText(190,30,"EXIT")
      EndIf
    EndSub  

    Sub down
      if mouse.IsLeftButtonDown and GraphicsWindow.MouseX>10 and GraphicsWindow.MouseX<1000 and GraphicsWindow.MouseY>10 And GraphicsWindow.MouseY<100 Then
        Sound.PlayClick()
        Program.Delay(20)
        Program.End()
      EndIf
    EndSub


    I wish to move the world forward in ways unimaginable.

    Saturday, September 7, 2013 3:05 AM
  • As some Operations from the Controls <-> Shapes  objects are interchangeable eg. Controls<->Shapes  .Move works for Shapes<->Controls etc. i always use Shapes.SetOpacity to make Controls transparent and so show Background -Drawings or -Images in Buttons, (MultiLine)TextBoxes or LDControls from LitDev's great Extension.

    Sample Import: KTT596

    You can even show animated Shapes behind/under Controls, rotate Buttons (if makes sense or just for fun), overlay Buttons or make Buttons the whole GW-Size aso.

    Sample Import: NSQ830

    Lookin forward to your PAINTs Proggy. Publishing ?

    Thursday, September 12, 2013 7:33 PM
    Answerer
  • @ Pappa Lapub - good suggestions.

    In the light of this I also added some extension options to LitDev extension in release 1.0.0.80:

    • BrushColour, BrushGradientShape and PenColour implemented for buttons - set backgrounds etc for these
    • General events for shapes added (see ShapeEvents sample) - make a shape a button with mouse events
    Thursday, September 12, 2013 7:44 PM
  • Hi LitDev,

    I know your extension very well till latest version 1.0.0.80. And maybe you dont know, but i'm always the first how downloads it ;-) when new version gets released and translate it to german. If you are interested here's the latest LitDev.De.xml and an extended SmallBasicLibrary.de.xml with additional infos in german.

    www.file-upload.net/download-8071468/LitDevDe.zip.html

    Thursday, September 12, 2013 11:37 PM
    Answerer
  • Thanks very much Pappa, have added to the zip for the next upload.
    Friday, September 13, 2013 5:30 PM
  • ' pseudo button background properties 
    ' You must get the z order correct or the mouse and cursor is blocked from the control
    ' 1) draw colored box behind control
    ' 2) then place the control on top of the box 
    ' 3) change control opacity to 60% so box shows through

    GraphicsWindow.Title = "Graphic control - pseudo button background properties"
    GraphicsWindow.DrawText(70, 20, "Pseudo button background properties")

    GraphicsWindow.BrushColor = "red"  ' button 1 background
    GraphicsWindow.PenColor = "red"
    bt1bkg = Shapes.AddRectangle(100,40)
    Shapes.Move(bt1bkg,50,50)

    GraphicsWindow.BrushColor = "green" ' button 2 background
    GraphicsWindow.PenColor = "green"
    bt2bkg = Shapes.AddRectangle(100,40)
    Shapes.Move(bt2bkg,200,50)

    GraphicsWindow.BrushColor = "darkred" ' button 1 at 60% opacity
    Button1 = Controls.AddButton("Button 1",50,50)
    Shapes.SetOpacity(Button1, 60)

    GraphicsWindow.BrushColor = "darkgreen" ' button 2 at 60% opacity
    Button2 = Controls.AddButton("Button 2",200,50)
    Shapes.SetOpacity(Button2, 60)

    Controls.SetSize(Button1,100,40) ' size buttons to match colored boxes
    Controls.SetSize(Button2,100,40)


    • Edited by jwzumwalt1 Wednesday, September 6, 2017 5:01 PM
    Wednesday, September 6, 2017 4:48 PM