Sego (SDL Euphoria GUI objects)

October 9, 2006

Mark K. Akita - mkakita@juno.com

 


 

Table of Contents

 

1.      Introduction

 

2.      Programs and Files

 

3.      The Sego Library

 

3.1.   Objects

 

3.1.1.      Button

3.1.2.      Text Box

3.1.3.      Rbutton

3.1.4.      Check Box

3.1.5.      Progress Bar

3.1.6.      Slider

3.1.7.      Menu

 

3.2.   Routines

 

3.2.1.      Sego_Init

3.2.2.      Sego_SetSelColor

3.2.3.      Sego_GetSelColor

3.2.4.      Sego_SetCurColor

3.2.5.      Sego_GetCurColor

3.2.6.      Sego_SetLastObj

3.2.7.      Sego_GetLastObj

3.2.8.      Sego_LoadFont

3.2.9.      Sego_NumberFonts

3.2.10.  Sego_SetFontStyle

3.2.11.  Sego_ClearFonts

3.2.12.  Sego_LoadBitmap

3.2.13.  Sego_SetBitmapTrans

3.2.14.  Sego_NumberBitmaps

3.2.15.  Sego_ClearBitmaps

3.2.16.  Sego_Create

3.2.17.  Sego_SetAttr

3.2.18.  Sego_GetAttr

3.2.19.  Sego_SetState

3.2.20.  Sego_GetState

3.2.21.  Sego_SetDraw

3.2.22.  Sego_GetDraw

3.2.23.  Sego_NumberObjects

3.2.24.  Sego_ClearObjects

3.2.25.  Sego_Redraw

3.2.26.  Sego_Update

3.2.27.  Sego_Quit

 

4.      Epilogue and Coda

 


1. Introduction

 

Sego SDL is a simple GUI library written for Euphoria.  You can use Sego to draw and receive input from various elements including buttons, text boxes, sliders (horizontal and vertical), check boxes and menus.  Sego arose from my frustration over finding that almost all of the other GUI libraries available for SDL were written for C++ and not easily transportable to Euphoria.

 

SDL was written by Sam Lantinga and is distributed under the GNU Lesser Public License.

SDL_TTF and SDL_GFX are distributed under the GNU Lesser Public License.

 

The official SDL website http://www.libsdl.org contains more information both general and specific.    

 


2. Programs and Files

 

The following files are included with this SDL wrapper package:

 

README.RTF - this file in rich text form

README.HTML - this file in HTML form

SDL_TTF.DLL – the SDL True Type font library

SDL_GFX.DLL – the SDL Graphics library

SDL_WRAP.EW - The SDL Euphoria include file

SDL_TTF.EW - The SDL_TTF include file

SDL_GFX.EW - The SDL_GFX include file

BITMAPS - a folder containing the images used by the demo programs

FONTS - a folder containing the images used by the demo programs

Test_Sego01 – a test program, showing how to use all the Sego objects

 


 

 

3. The Sego Library

 

The Sego library is comprised of objects (the widgets such as buttons and text boxes) and routines.  This section describes each the Sego object types and routines.


 

 

3.1. Objects

 

The attributes (location, color, size, etc.) of Sego objects are Euphoria sequences.  The sequence that defines an object is specified when you create the object using the Sego_Create function.


 

 

3.1.1. Type: Button

 

Description:  A rectangular push button.

 

Attribute Sequence: {x position, y position, width, height, color, highlight color, shadow color, itmap number, font number, label, text color, text x offset, text y offset, text horizontal alignment, text vertical alignment, border type}

 

Definitions:

 

x position         Integer            

y position         Integer             The x and y positions of the upper left corner of the button

width                Integer

height              Integer             The width and height of the button in pixels

color                Sequence        The button face color, in RBGA format.

                                                Where R=Red, B=Blue, G=Green, and A=Alpha

                                                R, G, B and A range from 0-255

highlight color  Sequence        The color of top and left edges of the button in RGBA format

                                                Used for a 3D effect, it’s switched with the shadow color

                                                when the button is pressed.

shadow color  Sequence        The color of the bottom and right edges of the button in RGBA

format.

bitmap number  Integer           A bitmap number to be used as the button face instead of a solid  color.

font number     Integer             The font number used for the label lettering

label                 Sequence        A text label that will appear on the button

text color         Sequence        The text label color in RGBA format

text x offset      Integer             The number of pixels to shift the text label left or right

text y offset      Integer             The number of pixels to shift the text label up or down

                                                Offsets are useful for changing the appearance of a button label

text horizontal alignment         Left, Right, or Center

text vertical alignment             Up, Down, or Center

                                                The text alignment value determines where the button text will be
                                                displayed on the button face.

border type                              Squared, Round, or None.

                                                The border type determines whether the button will have square

                                                square corners, round corners, or no border.

 


 

 

3.1.2. Type: Text Box

 

Description:  A rectangular text box, which can be edited.

 

Attribute Sequence: {x position, y position, width, height, color, border color, editable, bitmap number, font number, label, text color, text x offset, text y offset, text horizontal alignment, text vertical alignment, border type, maximum text length}

 

Definitions:

 

x position         Integer            

y position         Integer             The x and y positions of the upper left corner of the text box

width                Integer

height              Integer             The width and height of the text box in pixels

color                Sequence        The text box face color, in RBGA format.

border color     Sequence        The text box border color, in RBGA format.

editable                                    Yes or No

                                                If a text box is editable, you can key in changes to the text inside    

bitmap number  Integer           A bitmap number to be used as the text box face instead of a solid  color.

font number     Integer             The font number used for the label lettering

label                 Sequence        A text label that will appear on the text box

text color         Sequence        The text label color in RGBA format

text x offset      Integer             The number of pixels to shift the text label left or right

text y offset      Integer             The number of pixels to shift the text label up or down

                                                Offsets are useful for changing the appearance of a text box label

text horizontal alignment         Left, Right, or Center

text vertical alignment             Up, Down, or Center

                                                The text alignment value determines where the text box text will be
                                                displayed on the text box face.

border type                              Squared, Round, or None.

                                                The border type determines whether the text box will have square

                                                square corners, round corners, or no border

max text length  Integer           The maximum length of the label text in characters

 


 

 

3.1.3. Type: RButton

 

Description:  A small round button.

 

Attribute Sequence: {x position, y position, outer radius, inner radius, outer color, inner color, font number, label, text color, text x offset, text y offset, text horizontal alignment, text alignment}

 

Definitions:

 

x position         Integer            

y position         Integer             The x and y positions of the center of the button

outer radius     Integer             The radius in pixels of the button

inner radius     Integer             The radius of the smaller circle in the button

outer color       Integer             The outer button color in RGBA format

inner color       Integer             The inner button color in RGBA format

font number     Integer             The font number used for the button

label                 Sequence        A text label that will appear on either side of the button

text color         Sequence        The text label color in RGBA format

text x offset      Integer             The number of pixels to shift the text label left or right

text y offset      Integer             The number of pixels to shift the text label up or down

                                                Offsets are useful for changing the appearance of a button label

text alignment                          Left or Right

The text alignment value determines whether the text label will appear to the left or right of the button

 


 

 

3.1.4. Type: CheckBox

 

Description:  A small check box.

 

Attribute Sequence: {x position, y position, size, color, font number, label, text color, text x offset, text y offset, text horizontal alignment, text alignment}

 

Definitions:

 

x position         Integer            

y position         Integer             The x and y positions of the upper left corner of the box

size                Integer             The size of the check box in pixels.  A check box is always square

color               Integer             The box color in RGBA format

font number     Integer             The font number used for the box

label                 Sequence        A text label that will appear on either side of the box

text color         Sequence        The text label color in RGBA format

text x offset      Integer             The number of pixels to shift the text label left or right

text y offset      Integer             The number of pixels to shift the text label up or down

                                                Offsets are useful for changing the appearance of a box label

text alignment                          Left or Right

The text alignment value determines whether the text label will appear to the left or right of the box

 


 

 

3.1.5. Type: Progress Bar

 

Description:  A progress bar

 

Attribute Sequence: {x position, y position, width, height, color, border color, bitmap number}

 

Definitions:

 

x position         Integer            

y position         Integer             The x and y positions of the upper left corner of the bar

width               Integer            

height             Integer             the width and height of the bar in pixels

color               Integer             The bar color in RGBA format

border color     Integer             The bar border color in RGBA format

bitmap number  Integer           A bitmap number to be used for the bar instead of a solid  color.

 


 

 

3.1.6. Type: Slider

 

Description:  A horizontal or vertical slider control

 

Attribute Sequence: {x position, y position, width, height, slide size, color, highlight color, shadow color, back color, arrow color, alignment, arrow increment, slide increment}

 

Definitions:

 

x position         Integer            

y position         Integer             The x and y positions of the upper left corner of the slider

width               Integer            

height             Integer             the width and height of the slider in pixels

slider size        Integer             The size of the slider center (height or length) in pixels

color               Integer             The slider color in RGBA format

highlight color  Sequence        The color of top and left edges of the slider in RGBA format

shadow color  Sequence        The color of the bottom and right edges of the slider in RGBA

format.

back color       Integer             The slider back color in RGBA format

arrow color      Integer             The color of the scroll button arrows in RGBA format

alignment                                Horizontal or Vertical

arrow increment                      How much to increase or decrease the slider when an arrow button is pressed    

slide increment                       How much to increase or decrease the slider when the blank area on either side of the slider center button is pressed

 


 

 

3.1.7. Type: Menu

 

Description:  A menu control

 

Attribute Sequence: {x position, y position, width, height, entry height, color, highlight color, shadow color, select color, font number, label sequence, text color, text x offset, text y offset, text horizontal alignment, text vertical alignment}

 

Definitions:

 

x position         Integer            

y position         Integer             The x and y positions of the upper left corner of the menu

width               Integer            

height             Integer             the width and height of the menu in pixels

entry height     Integer             the height of each menu line in pixels

color               Integer             The menu color in RGBA format

highlight color  Sequence        The color of top and left edges of the menu in RGBA format

shadow color  Sequence        The color of the bottom and right edges of the menu in RGBA

format.

select color     Integer             The selected menu item color in RGBA format

font number     Integer             The font number used for the menu

label sequence  Sequence     Sequence containing all of the menu entries as strings.

text color         Sequence        The menu text color in RGBA

text select color           Integer The selected menu item text color in RGBA format

text x offset      Integer             The number of pixels to shift the text label left or right

text y offset      Integer             The number of pixels to shift the text label up or down

text horizontal alignment         Left, Right, or Center

text vertical alignment             Up, Down, or Center


 

 

3.2. Routines

 

The Sego routines perform specified operations on objects.


 

 

3.2.1. Sego_Init

 

Syntax:  Sego_Init()

 

Description:  Initialize the Sego Library.  Call this procedure once near the start of your program.

 


 

 

3.2.2. Sego_SetSelColor

 

Syntax:  Sego_SetSelColor(s)

 

Description:  Set the selected object color (the color that appears around an object when it’s been clicked).  The color sequence is in RGBA format.

 


 

 

3.2.3. Sego_GetSelColor

 

Syntax:  s=Sego_GetSelColor()

 

Description:  Returns the selected object color.  The color sequence is in RGBA format.

 


 

 

3.2.4. Sego_SetCurColor

 

Syntax:  Sego_SetCurColor(s)

 

Description:  Set the cursor color for editable text boxes.  The color sequence is in RGBA format.

 


 

 

3.2.5. Sego_GetCurColor

 

Syntax:  s=Sego_GetcurColor()

 

Description:  Returns the cursor color for text boxes.  The color sequence is in RGBA format.

 


 

 

3.2.6. Sego_SetLastObj

 

Syntax:  Sego_SetLastOb(i)

 

Description:  Set the last object number that was clicked.  This value is used to determine which object will have the “selcted” box drawn around it

 


 

 

3.2.7. Sego_GetLastObj

 

Syntax:  i=Sego_GetLastObj()

 

Description:  Returns the object number of the last object clicked.

 


 

 

3.2.8. Sego_LoadFont

 

Syntax:  Sego_LoadFont(s,i)

 

Description:  Loads a TTF font file.  The font path/name in string form and point-size is required.

 


 

 

3.2.9. Sego_NumberFonts

 

Syntax:  i=Sego_NumberFonts()

 

Description:  Returns the number of fonts that have been loaded.

 


 

 

3.2.10. Sego_SetFontStyle

 

Syntax:  Sego_SetFontStyle(i,a)

 

Description:  Set the font style.  Requires the font number and style as arguments.

 


 

 

3.2.11. Sego_ClearFonts

 

Syntax:  Sego_ClearFonts()

 

Description:  Clear all the previously loaded fonts.

 


 

 

3.2.12. Sego_LoadBitmap

 

Syntax:  Sego_LoadBitmap(s)

 

Description:  Load a bitmap file in BMP format.  The filename/path is a required argument.

 

 

3.2.13. Sego_SetBitMapTrans

 

Syntax:  Sego_SetBitMapTrans(i1,a,i2,i3,i4)

 

Description:  Set the transparency color for a bitmap.  The bitmap number, format, red, green and blue color values are required.

 

3.2.14. Sego_NumberBitmaps

 

Syntax:  i=Sego_NumberBitmaps()

 

Description: Returns the number of bitmaps that have been loaded.

 

3.2.15. Sego_ClearBitmaps

 

Syntax:  Sego_ClearBitmaps()

 

Description: Clear all previously loaded bitmaps.

 

3.2.16. Sego_Create

 

Syntax:  i=Sego_Create(i1, s, i2, i3)

 

Description: Create a new object of type i1, with attributes contained in sequence s, state value in i2, and draw value in i3.  Returns an object number for the newly created object.

 

3.2.17. Sego_SetAttr

 

Syntax:  Sego_SetAttr(i, s)

 

Description: Change the attributes in object i with sequence s.  

 

3.2.18. Sego_GetAttr

 

Syntax:  s=Sego_GetAttr(i)

 

Description: Returns the attributes for object i.  

 

3.2.19. Sego_SetState

 

Syntax:  Sego_SetState(i1, i2)

 

Description: Change the state of object i1. 


 

 

3.2.20. Sego_GetState

 

Syntax:  i2=Sego_GetState(i1)

 

Description: Returns the state of object i1.  

3.2.21. Sego_SetDraw

 

Syntax:  Sego_SetDraw(i1, i2)

 

Description: Change the drawing flag of object i1.  If the drawing flag is set to “On” (or 1) then the object will be drawn in the Sego_Redraw procedure.    

 

3.2.22. Sego_GetDraw

 

Syntax:  i2=Sego_GetDraw(i1)

 

Description: Returns the drawing flag of object i1.  

 

3.2.23. Sego_NumberObjects

 

Syntax:  i=Sego_NumberObjects()

 

Description: Returns the number of objects that have been created.  

 

3.2.24. Sego_ClearObjects

 

Syntax:  Sego_ClearObjects()

 

Description: Clears (deletes) all of the objects that have been created.  

 

3.2.25. Sego_Redraw

 

Syntax:  Sego_Redraw(i)

 

Description: Redraws all the objects.  Use the Sego_Setdraw routine to hide an object.

 

3.2.26. Sego_Update

 

Syntax:  s=Sego_Update(i)

 

Description: Returns a sequence containing the number and state of the last object touched.

 

3.2.27. Sego_Quit

 

Syntax:  s=Sego_Quit(i)

 

Description: Clear all objects and close SDL.


4. Epilogue and Coda

 

There are a few necessary omissions from this first version that I simply didn’t have the time or skills to include.  First off, the code could’ve been more modular to accommodate new object types.  The update/redraw loops work fairly well, but a more elegant way would’ve been to use SDL user events.  I’ll try to address those issues in the next Sego version.

 

Send comments & feedback to mkakita@juno.com