WebPictureButton for Xojo Web

This is something I'm still actively working on. If there's interest in it, I may release it.

WebPictureButton is my attempt at a robust, reusable control for Xojo Web that allows you to have pictures in a button, with a bit more control than you have on standard buttons.

It supports both text captions and images with customizable

appearance options and alignment settings. You can optionally use Font Awesome icons instead of image files, and override most of the CSS with your own code if you really want to customize it.

This whole project is based on Tim Dietrich's incredible CodeInjector framework. I've created quite a few components with this framework, including a HTMLViewer that adds the sorely-needed Desktop executeInXojo/JavascriptRequest features into the WebHTMLViewer control.

Here's a few samples of what the buttons can look like and how they behave:

As you can see, that MessageBox is displayed by a standard Clicked event, but Clicked also gives you the x and y coordinates of the click in case you need them.

Text/Appearance Properties:

• Caption: Text to display on the button

• CaptionAlign: Alignment of the caption text (Left, Center, Right)

• Indicator: Bootstrap style indicator (Primary, Secondary, Success, etc.)

• Outlined: Whether to use the outlined style variant

• Enabled: Enables or disables the button

• Roundness: Border radius for the button corners (in pixels or percent)

• TextColor: Custom text color (overrides Bootstrap indicator)

• TextHoverColor: Text color on hover (overrides Bootstrap indicator)

• CustomColor: Custom background color (overrides Bootstrap indicator)

• CustomHoverColor: Background color on hover (overrides Bootstrap indicator)

• AutoFitText: Automatically shrink text to fit within button boundaries

• TextCSS: Custom CSS properties to apply to the button text (for fonts, font-weight, etc.)

Image Properties:

• Picture: Xojo WebPicture property (write-only), automatically converted to PictureURL

• HoverPicture: Xojo WebPicture property (write-only), automatically converted to HoverPictureURL

• PictureURL: URL of the button image

• HoverPictureURL: URL of the image to display when hovering over the button

• PictureAlign: Position of image relative to text (LeftOfText, RightOfText,

  AboveText, BelowText, Left, Right, Center)

• ScaleImageToFit: Whether to scale the image to fit button dimensions (default: True)

• MaintainProportions: Whether to maintain image aspect ratio when scaling (default: True)

• ImageCaptionPadding: Space between image and caption, can be in pixels or percentage (default: "5px")

• ButtonOverrideCSS: Raw CSS to fully customize button appearance (overrides all other styling)

Font Awesome Icon Properties:

• FontAwesomeIcon: Font Awesome icon class (e.g., "fa-solid fa-house", "fa-home"). You can also include complete HTML code with additional stylistic elements (e.g., "<i class="fa-solid fa-hotdog fa-shake" style="color: #ff5cb3;"></i>")

• FontAwesomeIconHover: Font Awesome icon class to display on hover

• AutoFontAwesomeSize: Automatically size icons to fit the button (default: True)

• ManualFontAwesomeSize: Manual icon size when AutoFontAwesomeSize is False

• FontAwesomeKitCodeLink: URL for Font Awesome Pro kit (uses FA6 Free if empty)

Events:

• Clicked(x As Integer, y As Integer):

  • Triggered when the button is clicked

  • Provides the click coordinates relative to the button

  • Can be used to create custom click behaviors based on location