TextGadgetEx() with colour and text formatting

Share your advanced PureBasic knowledge/code with the community.
User avatar
TI-994A
Addict
Addict
Posts: 2741
Joined: Sat Feb 19, 2011 3:47 am
Location: Singapore
Contact:

TextGadgetEx() with colour and text formatting

Post by TI-994A »

*EDIT (22/2/2021): Updated screenshot links, and now tested on Windows 8.1 Professional, MacOS Catalina, and Linux Ubuntu 20.

Another oft-requested feature, here's yet another simple cross-platform routine (tested on Windows and OSX only) that wraps the functions of a CanvasGadget(), to simulate some extended functionalities of the standard TextGadget().

It is called in the same way as a standard TextGadget(), with options for border, text alignment, foreground and background colours, text formatting like italics, bold, and underlining, and it can also make use of #PB_Any.

As with ButtonGadgetEx(), text formatting is handled with HTML-like tags; <i></i>, <b></b>, <u></u>, with the ability to handle multiple formats in a single caption. The captions will be aligned according to the flags set, although texts longer than the button would not be wrapped. Also, underlining does not seem to render too well with italics, and is supported only on Windows, as stipulated by PureBasic.

It has been tested with v5.21 x86 on WinXP, v5.22 x64 on Win7, and v5.20 x64 on Mac OSX. Here are some screenshots:

Image

(underlining not supported on OSX)
Image

(underlining not supported on Linux)
Image

Here's the code:

Code: Select all

;==============================================================
;
;   TextGadgetEx() enables border settings, text alignment,
;   foreground & background colours, and text formatting 
;   including italics, bold (& underline on Windows only).
;   
;   tested & working on WinXP x86, Win7 x64, OSX x64
;   running PureBasic v5.21, v5.22, v5.20 respectively 
;
;   by TI-994A - free to use, improve, share...
;
;   20th April 2014
;
;==============================================================
;
;   22/2/21: re-tested with PureBasic 5.73 LTS (x64) on:
;   - Windows 8.1 Professional
;   - MacOS Catalina 10.15.5
;   - Linux Ubuntu 20.04.2   
;
;==============================================================

;TextGadgetEx() wrapped into a single procedure
Procedure TextGadgetEx(gadgetNo, txtXPos, txtYPos, txtWidth, txtHeight, caption.s, flags = 0, foreColor = 0, backColor = 16777215)
  If flags & #PB_Text_Border
    border = 1
    borderOffset = 4
  EndIf
  regular = LoadFont(#PB_Any, "Arial", 10)
  bold = LoadFont(#PB_Any, "Arial", 10, #PB_Font_Bold)  
  italics = LoadFont(#PB_Any, "Arial", 10, #PB_Font_Italic)
  underline = LoadFont(#PB_Any, "Arial", 10, #PB_Font_Underline)
  italicBold = LoadFont(#PB_Any, "Arial", 10, #PB_Font_Italic | #PB_Font_Bold)
  boldUnderline = LoadFont(#PB_Any, "Arial", 10, #PB_Font_Bold | #PB_Font_Underline)
  italicUnderline = LoadFont(#PB_Any, "Arial", 10, #PB_Font_Italic | #PB_Font_Underline)
  fullFormat = LoadFont(#PB_Any, "Arial", 10, #PB_Font_Italic | #PB_Font_Bold | #PB_Font_Underline)
  If gadgetNo = #PB_Any 
    gadgetNo = CanvasGadget(gadgetNo, txtXPos, txtYPos, txtWidth, txtHeight, border)
  Else
    CanvasGadget(gadgetNo, txtXPos, txtYPos, txtWidth, txtHeight, border)
  EndIf
  If StartDrawing(CanvasOutput(gadgetNo))
    Box(0, 0, txtWidth, txtHeight, backColor)
    For pass = 1 To 2
      For captionLoop = 1 To Len(caption)
        Select Mid(caption, captionLoop, 3)
          Case "<i>"
            iFlag = 1
            captionLoop + 2
          Case "<b>"
            bFlag = 1
            captionLoop + 2
          Case "<u>"
            uFlag = 1
            captionLoop + 2
          Case "</i"
            iFlag = 0
            captionLoop + 3
          Case "</b"
            bFlag = 0
            captionLoop + 3
          Case "</u"
            uFlag = 0
            captionLoop + 3
          Default
            noFormat = 1
        EndSelect
        If noFormat
          noFormat = 0
          If Not drawFont
            drawFont = FontID(regular)
            DrawingFont(drawFont)
          EndIf
          If pass = 1
            captionWidth + TextWidth(Mid(caption, captionLoop, 1))
          Else
            captionX = DrawText(captionX, captionY, Mid(caption, captionLoop, 1), foreColor, backColor)
          EndIf
        Else
          If iFlag And bFlag And uFlag
            drawFont = FontID(fullFormat)
          ElseIf iFlag And bFlag
            drawFont = FontID(italicBold)
          ElseIf iFlag And uFlag
            drawFont = FontID(italicUnderline)
          ElseIf bFlag And uFlag
            drawFont = FontID(boldUnderline)
          ElseIf iFlag
            drawFont = FontID(italics)
          ElseIf bFlag
            drawFont = FontID(bold)
          ElseIf uFlag 
            drawFont = FontID(underline)
          Else
            drawFont = FontID(regular)
          EndIf
          DrawingFont(drawFont)
        EndIf
      Next captionLoop
      If flags & #PB_Text_Center
        captionX = (txtWidth - captionWidth) / 2
      ElseIf flags & #PB_Text_Right  
        captionX = (txtWidth - captionWidth) - borderOffset
      Else
        captionX = borderOffset
      EndIf
      captionY = 0
      drawFont = 0 : iFlag = 0 : bFlag = 0 : uFlag = 0
    Next pass
    StopDrawing() 
  EndIf
  FreeFont(regular)
  FreeFont(italics)
  FreeFont(bold)
  FreeFont(underline)
  FreeFont(italicBold)
  FreeFont(italicUnderline)
  FreeFont(boldUnderline)
  FreeFont(fullFormat)
  ProcedureReturn gadgetNo
EndProcedure

;demo code
Enumeration 
  #MainWindow
  #txtGadget1
  #txtGadget2
EndEnumeration

wFlags = #PB_Window_SystemMenu | #PB_Window_ScreenCentered
OpenWindow(#MainWindow, #PB_Any, #PB_Any, 500, 220, "TextGadgetEx() by TI-994A", wFlags)

;instantiated with constant - colour parameters and flags not set
TextGadgetEx(#txtGadget1, 175, 30, 150, 30, "<b>Default</b> <i>format</i>")

;instantiated with constant - foreground & background colours and center flag set
formattedCaption.s = "<i>Italics</i>, <b>Bold</b> or <u>Underlined</u>"
TextGadgetEx(#txtGadget2, 125, 75, 250, 30, formattedCaption, #PB_Text_Center, RGB(0, 0, 100), RGB(220, 220, 250))

;instantiated with #PB_Any - foreground & background colours and border flag set
formattedCaption = "<i><b>Italics & Bold</i></b>   or   <i><u>Italics & Underlined</i></u>"
txtGadget3 = TextGadgetEx(#PB_Any, 75, 120, 350, 30, formattedCaption, #PB_Text_Border, RGB(100, 0, 0), RGB(250, 220, 220))

;instantiated with #PB_Any - foreground & background colours and right & border flags set
formattedCaption = "<b><u>Bold & Underlined</b></u>   or   <i><b><u>Italics, Bold & Underlined</i></b></u>"
txtGadget4 = TextGadgetEx(#PB_Any, 25, 165, 450, 30, formattedCaption, #PB_Text_Right | #PB_Text_Border, RGB(0, 100, 0), RGB(200, 250, 220))

While WaitWindowEvent() ! #PB_Event_CloseWindow : Wend
As always, suggestions, feedback, and improvements are most welcome. Thank you. :D
Last edited by TI-994A on Mon Feb 22, 2021 4:42 am, edited 1 time in total.
Texas Instruments TI-99/4A Home Computer: the first home computer with a 16bit processor, crammed into an 8bit architecture. Great hardware - Poor design - Wonderful BASIC engine. And it could talk too! Please visit my YouTube Channel :D
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4954
Joined: Sun Apr 12, 2009 6:27 am

Re: TextGadgetEx() with colour and text formatting

Post by RASHAD »

Not bad TI :P
But this is not a TextGadget foxy
So how about the next snippet with the huge capabilities of HTML
and CSS
- Less code
- Formatted Text
- Can include images and shapes
have fun

Code: Select all

Text$ = "<div style=background-color:SeaShell;width:500px;height:400px;border:1px solid #000>This <b> is </b> a real <i> test </i> with HTML <font size=5 color=red>revolutionary</font>."
Text$ + "<h1>Heading</h1</div> "

OpenWindow(0, 0, 0, 500, 400, "", #PB_Window_ScreenCentered | #PB_Window_SystemMenu | #PB_Window_MinimizeGadget )
ContainerGadget(0,10,10,300,80,#PB_Container_Flat)
  WebGadget(1, -10, -14, 380, 150,"")
  SetGadgetItemText(1, #PB_Web_HtmlCode, Text$)
CloseGadgetList()
DisableGadget(1,1)

Repeat
  Select WaitWindowEvent()
    Case #PB_Event_CloseWindow
      Break
  EndSelect
ForEver
Egypt my love
User avatar
TI-994A
Addict
Addict
Posts: 2741
Joined: Sat Feb 19, 2011 3:47 am
Location: Singapore
Contact:

Re: TextGadgetEx() with colour and text formatting

Post by TI-994A »

RASHAD wrote:Not bad TI :P
But this is not a TextGadget foxy
So how about the next snippet with the huge capabilities of HTML and CSS
- Less code
- Formatted Text
- Can include images and shapes
Hi RASHAD. Very nice and simple, although a WebGadget() seems a little heavy as a TextGadget() replacement. A single instance adds almost 3-4MB to the process.

BTW, what does foxy mean? :?
Texas Instruments TI-99/4A Home Computer: the first home computer with a 16bit processor, crammed into an 8bit architecture. Great hardware - Poor design - Wonderful BASIC engine. And it could talk too! Please visit my YouTube Channel :D
User avatar
TI-994A
Addict
Addict
Posts: 2741
Joined: Sat Feb 19, 2011 3:47 am
Location: Singapore
Contact:

Re: TextGadgetEx() with colour and text formatting

Post by TI-994A »

UPDATE:

Here are some nice tricks from Danilo, davido and RASHAD, to implement rounded corners to gadgets, that can be integrated into the TextGadgetEx():

- using Windows API (procedure-wrapped)
- using PureBasic's drawing functions (cross-platform)
- using Windows API (direct implementation)

Thanks guys! :D
Texas Instruments TI-99/4A Home Computer: the first home computer with a 16bit processor, crammed into an 8bit architecture. Great hardware - Poor design - Wonderful BASIC engine. And it could talk too! Please visit my YouTube Channel :D
Post Reply