Button with round corners

[DeanH]

I have begun translating HTML pages I made up a few years ago into SB. One page is a menu with large size buttons with rounded corners, an icon on the left and text. Below is a fragment of code for one button. The CSS class 'buttonfont' is Arial, 16 pt, blue, bold. No doubt this is a ham-fisted approach and there may well be cleaner ways to do it without resorting to an image button.

<table width='300' height='60' cellpadding='0' cellspacing='0' bgcolor='#f0f0f0' style='border-radius:12px; border:1px solid #888888; rules=none'>
<tr>
<td width='50' valign='center' align='right'><img src="stock/catalog.ico" width='32' height='32'></td>
<td valign='center' align='center'class='buttonfont'>AddEdit items</td>
<td width='20'>&nbsp;</td>
</tr>
</table>

I would like to produce a similar type of button in SB. I have tried this in SB using a canvas (like I do in Pure Basic), inside of which I draw a round cornered box and then draw the text. It does work, but the border on the button is more blurred compared to the HTML variety.

Is there another way to do this?

[plouf]

Since html via css support round corners
I think ideal is to use a button gadget (or even textgadget) and play with css

[Peter]

Code: Select all

Enumeration
  #Window
  #Button1
  #Button2
  #Button3
  #Button4
EndEnumeration

Procedure SetButtonBorderRadius(GadgetID, BorderRadius)
  ! $(v_gadgetid.div).find("[role='presentation']").css("border-radius", v_borderradius);
EndProcedure

OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 150, 500, "Button-Test", #PB_Window_ScreenCentered)

ButtonGadget(#Button1, 10, 10, 100, 100, "Button 1")
SetButtonBorderRadius(GadgetID(#Button1), 10)

ButtonGadget(#Button2, 10, 120, 100, 100, "Button 2")
SetButtonBorderRadius(GadgetID(#Button2), 20)

ButtonGadget(#Button3, 10, 230, 100, 100, "Button 3")
SetButtonBorderRadius(GadgetID(#Button3), 30)

ButtonGadget(#Button4, 10, 340, 100, 100, "Button 4")
SetButtonBorderRadius(GadgetID(#Button4), 40)

[Fred]

Be sure to enable the DPI aware flag if you don't want blurred canvas

[DeanH]

Thank you, Fred. I tried that. Made no difference.

Peter, the round-corner procedure works but I also would like to include a different icon in each button, left of the text. I am trying to do this without having to resort to images for each button. It will also eventually allow the user to choose colours, too, which is what they can already do in the PB program. Where does the code for the SetButtonBorderRadius come from? Looks like jquery, of which I am unfamiliar. I know html and a bit of js and another bit of css and that's it. Got a lot of it work work that way but it is a terribly hard slog coding. Hoping SB will make the job a bit easier and quicker.

[Peter]

SpiderBasic is very powerful. But in order to be able to use functionalities that go beyond the standard SpiderBasic commands, you need to familiarise yourself a little with HTML, CSS and JavaScript.

You can specify any valid HTML code as ButtonGadgetText. This means you can also insert an HTML table in the style of your original post. For the sake of simplicity, I have used FontAwesome icons here. Of course you can also use your own images. Furthermore, you can also colour the buttons (with a small hack):

Code: Select all

Enumeration
  #Window
  #Button1
  #Button2
  #Button3
EndEnumeration

! // Save the original function
! const originalSpiderButtonGadget = window.spider_ButtonGadget;
!
! // Overwrite the function with additional functionalities
! window.spider_ButtonGadget = function(...args) {
!
!   // Call the original function and save the result
!   const result = originalSpiderButtonGadget(...args);
!
!   // console.log(result);
! 
!   // Add additional functionalities (after calling the original function)
!
!   result["SetColor"] = function(a, b) {
!
!     switch (a) {
!       case 1:
!         $(result.div).find("[role='button']").css('color', spider_helper_ColorToHtml(b)); 
!         break;
!       case 2:
!         $(result.div).find("[role='button']").css('background-color', spider_helper_ColorToHtml(b)); 
!         break;
!     }
!
!   }
!     
!   // Return the result
!   return result;
!
! };


Procedure SetButtonBorderRadius(GadgetID, BorderRadius)
  ! $(v_gadgetid.div).css("border-radius", v_borderradius);
  ! $(v_gadgetid.div).find("[role='presentation']").css("border-radius", v_borderradius);
EndProcedure

Procedure.s GetHtml(ButtonText.s, FontAwesomeIcon.s)
  ProcedureReturn "<table style='width: 100%;'>" + 
                  " <tr>" + 
                  "   <td style='width:10px'></td>" + 
                  "   <td style='vertical-align: middle; width: 30px'>" + 
                  "     <i class='" + FontAwesomeIcon + "' aria-hidden='true'></i>"+
                  "   </td>" + 
                  "   <td style='text-align: left; vertical-align: middle;'>" + 
                  ButtonText +
                  "   </td>" + 
                  " </tr>" + 
                  "</table>" 
EndProcedure

OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 200, 200, "Button-Test", #PB_Window_ScreenCentered)

ButtonGadget(#Button1, 10, 10, 120, 50, GetHtml("New", "fa fa-file-o fa-2x"))
SetButtonBorderRadius(GadgetID(#Button1), 20)

ButtonGadget(#Button2, 10, 70, 120, 50, GetHtml("Edit", "fa fa-pencil-square-o fa-2x"))
SetButtonBorderRadius(GadgetID(#Button2), 20)

ButtonGadget(#Button3, 10, 130, 120, 50, GetHtml("Delete", "fa fa-trash-o fa-2x"))
SetButtonBorderRadius(GadgetID(#Button3), 20)
SetGadgetColor(#Button3, #PB_Gadget_FrontColor, #White)
SetGadgetColor(#Button3, #PB_Gadget_BackColor, #Red)

[DeanH]

Thank you Peter. That looks like it'll work for me. Embedding html/css styles is a neat trick I didn't know was possible with SB.

I am pretty familiar with HTML, having used it for over 25 years. I know enough css to be dangerous and just enough js functions I've found and modified, which aren't many.

Is it possible to set up some css classes like is done between <style> and </style>? I can only see reference to loading a style sheet file in the SB doc, not how to do it manually. Then it could be called by class.

[DeanH]

Sorry. Ran into a little problem. If I change the button background colour to white or $F0F0F0, the corners of the border are wiped. #Red, #Green, and most other darker colours seem ok. #Yellow isn't.

Code: Select all

CloseDebugOutput()

Enumeration
  #Window
  #Button1
EndEnumeration

! // Save the original function
! const originalSpiderButtonGadget = window.spider_ButtonGadget;
!
! // Overwrite the function with additional functionalities
! window.spider_ButtonGadget = function(...args) {
!
!   // Call the original function and save the result
!   const result = originalSpiderButtonGadget(...args);
!
!   // console.log(result);
! 
!   // Add additional functionalities (after calling the original function)
!
!   result["SetColor"] = function(a, b) {
!
!     switch (a) {
!       case 1:
!         $(result.div).find("[role='button']").css('color', spider_helper_ColorToHtml(b)); 
!         break;
!       case 2:
!         $(result.div).find("[role='button']").css('background-color', spider_helper_ColorToHtml(b)); 
!         break;
!     }
!
!   }
!     
!   // Return the result
!   return result;
!
! };


Procedure SetButtonBorderRadius(GadgetID, BorderRadius)
  ! $(v_gadgetid.div).css("border-radius", v_borderradius);
  ! $(v_gadgetid.div).find("[role='presentation']").css("border-radius", v_borderradius);
EndProcedure

Procedure.s GetHtml(ButtonText.s, Icon.s)
  ProcedureReturn "<table style='width: 100%;'>" + 
                  " <tr>" + 
                  "   <td style='width:10px'></td>" + 
                  "   <td style='vertical-align: middle; width: 30px'>" + 
                  "     <img src='" + Icon + "' width='32' height='32'>"+
                  "   </td>" + 
                  "   <td style='text-align: left; vertical-align: middle;'>" + 
                  ButtonText +
                  "   </td>" + 
                  " </tr>" + 
                  "</table>" 
EndProcedure

Arial20b=FontID(LoadFont(#PB_Any,"Arial",20,#PB_Font_Bold))

OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 350, 280, "Button-Test", #PB_Window_ScreenCentered)

ButtonGadget(#Button1, 24, 64, 286, 66, GetHtml("Circulation", "http://bookmark.central.sa.edu.au/bookmark/icons/circ.ico"))
SetGadgetFont(#Button1,Arial20b)
SetButtonBorderRadius(GadgetID(#Button1), 20)
SetGadgetColor(#Button1, #PB_Gadget_FrontColor, #Blue)
SetGadgetColor(#Button1, #PB_Gadget_BackColor, #White)