Skip to content

Fluid GUI API

Paul Manias edited this page May 3, 2024 · 1 revision

The GUI API provides a number of functions to perform common tasks like colour conversion and simplifying interaction with the scene graph.

It can be loaded with the line:

require 'gui'

Constants

When the GUI API is initialised for the first time, it will construct a set of constants that are particular to the user's environment. Some values may be adjustable by the user directly, while others may be inherited by the user's choice of theme.

To give you a direct insight into the variables in the gui table, the following is cut straight from the API code:

fonts = {
  -- Use percentages for scalable sizes, where 100% is equivalent to the value of gui.interface.fontSize
  default  = { face='Noto Sans,Source Sans 3', size='100%' },
  window   = { face='Noto Sans,Source Sans 3', size='100%' }, -- For text that is not inside a widget
  button   = { face='Noto Sans,Source Sans 3', size='100%' }, -- Text inside buttons
  icon     = { face='Noto Sans,Source Sans 3', size='100%' }, -- Text at the bottom of icons
  menu     = { face='Noto Sans,Source Sans 3', size='100%' }, -- Menu item text
  titlebar = { face='Noto Sans', size='100%' }, -- Window titlebar text
  small    = { face='Tiny', size='60%' }, -- Recommended text for small sizes
  large    = { face='Noto Sans,Source Sans 3', size='130%' }, -- Recommended text for headers
  widget   = { face='Noto Sans,Source Sans 3', size='100%' }, -- Text inside widgets (e.g. combobox)
  label    = { face='Noto Sans,Source Sans 3::bold', size='100%' } -- Text for labels and outside widgets
},
colours = {
  -- These are all fills, so any SVG compliant fill value can potentially be used to define a 'colour'.
  widgetText   = 'rgb(255,255,255)',
  widgetBkgd   = 'rgb(0,0,0,100)',
  widgetStroke = 'rgb(255,255,255,60)',
  widgetStrokeFocus    = 'rgb(255,255,255,160)',
  widgetStrokeDisabled = 'rgb(255,255,255,60)',
  shadow        = 'rgb(0,0,0,100)', -- Base colour/alpha value for stroked shadows
  highlight     = 'rgb(255,255,255,150)', -- Base colour/alpha value for stroked highlights
  button        = 'rgb(230,230,230)', -- Button background (raised)
  buttonClick   = 'rgb(200,200,200)', -- Button background when clicked (depressed)
  menubar       = 'rgb(190,190,190)', -- Menubar background fill
  menu          = 'rgb(240,240,240)', -- Menu background fill
  border        = 'rgb(144,144,144)', -- Standard border for any area filled with 'background'
  borderFocus   = 'rgb(160,160,160)', -- Colour to use when 'border' has the user's focus
  menuborder    = 'rgb(200,200,200)', -- Menu border
  desktop       = 'rgb(160,160,160)', -- Background colour for the desktop
  recess        = 'rgb(160,160,160)', -- Background colour for recessed areas with no content.
  background    = 'rgb(255,255,255)', -- Standard background for hosting text & paper-based layouts
  textHighlight = 'rgb(224,224,240)', -- Background fill for text that is highlighted
  window        = 'rgb(220,220,220)', -- Background fill for windows
  windowText    = 'rgb(0,0,0)'        -- Colour for text that is drawn directly to the window
},
interface = {
  inputBorder   = 1,  -- Stroke size for borders that receive keyboard input
  outputBorder  = 1,  -- Stroke size for borders containing immutable content
  widgetMargin  = 5,  -- Recommended internal margin for widgets (px)
  widgetGap     = 6,  -- Recommended gap between widgets (px)
  fontSize      = 11, -- Default font-size for everything (pt)
  sliderSize    = 16, -- Max size for slider widgets (px)
  scrollSize    = 18, -- Max size for scroll widgets (px)
  scrollOpacity = 100, -- Opacity for scrollbar background fills
  iconTheme     = 'Default',
  iconSize      = 20   -- Recommended default size for icons (px) and should be linked to fontSize
},
iconThemes = {
   default = { first={ r=90,g=90,b=90 }, last={ r=70,g=70,b=110 } },
   carbon  = { first={ r=90,g=90,b=90 }, last={ r=70,g=70,b=110 } },
   yellow  = { first={ r=0xec,g=0xef,b=0x9e }, last={ r=0xd6,g=0x87,b=0x10 }, stroke={ r=60, g=30, b=30, a=90 } },
   orange  = { first={ r=0xFD,g=0xC8,b=0x30 }, last={ r=0xF3,g=0x73,b=0x35 } },
   blue    = { first={ r=0x4b,g=0x6c,b=0xb7 }, last={ r=0x18,g=0x28,b=0x48 } },
   ocean   = { first={ r=0xA8,g=0xC0,b=0xFF }, last={ r=0x3F,g=0x2B,b=0x96 } },
   green   = { first={ r=0x7e,g=0x9d,b=0x13 }, last={ r=0x00,g=0x65,b=0x32 } },
   red     = { first={ r=0xf5,g=0xaf,b=0x19 }, last={ r=0xf1,g=0x27,b=0x11 } },
   indigo  = { first={ r=0xad,g=0x53,b=0x89 }, last={ r=0x3c,g=0x10,b=0x53 } },
   rose    = { first={ r=0xff,g=0xc3,b=0xa0 }, last={ r=0xFF,g=0xAF,b=0xBD } },
   pink    = { first={ r=0xff,g=0xdd,b=0xe1 }, last={ r=0xee,g=0x9c,b=0xa7 } },
   grey    = { first={ r=100,g=100,b=100 }, last={ r=70,g=70,b=70 } },
   pearl   = { first={ r=250,g=249,b=248 }, last={ r=210,g=211,b=212 } }
}

Functions

gui.applyFill()

gui.applyFill(Vector, Fill)

Apply Fill to every fill attribute for Vector, its siblings and children, except in cases where the fill is already set to none. If a vector has a stroke defined, that is also changed to match Fill.

gui.createIcon()

gui.createIcon(Scene, Path, Size, Theme, [Name])

Build an icon sourced from Path, styled with the given Theme, and register it as a VectorPattern under Name. The Size is applied to the VectorPattern's PageWidth and PageHeight values, and affects the size of the pre-rendered bitmap cache. If Name is not given, the Path is used to name the pattern.

The geenerated pattern can be used as a fill, i.e. url(#Name). The pattern can be used in two ways: As a fill in a VectorRectangle, which is akin to a cached bitmap (fast); or applied to a VectorViewport for live rendering (higher quality transforms).

The resulting Icon table will only be returned if this is the first initialisation of the icon registered under Name. Otherwise the function returns immediately with nil. The Icon table consists of size, pattern, svg

This function is designed to throw an exception if an error occurs.

gui.forVector()

gui.forVector(Vector, Function)

Call Function for each vector in a tree under the provided Vector.

The synopsis for Function is Function(Vector) where Vector is a direct obj reference to the new vector that has been discovered.

gui.getFontHeight()

LineSpacing, Height = gui.getFontHeight({ face='Face', size=PointSize })

Returns the line spacing and height values for a given font, which is identified by face and size values.

gui.pixel()

gui.pixel(Value)

Reads a style value such as 60pt and returns it as a number of pixel units. Supported units are px, in, mm, pt and dp.

gui.simpleGradient()

gui.simpleGradient(Scene, Name, Colours, X1, Y1, X2, Y2, [Units], [IgnoreClashes])

Generate a simple linear gradient fill for vectors belonging to Scene. The fill will start at (X1,Y1) and stop at (X2,Y2). The Units will default to boundingbox if not set to userspace. The resulting fill can be referenced as url(#Name).

The Colours table must consist of at least two RGB table entries, for instance { { r=176,g=178,b=183,a=255 }, { r=212,g=211,b=215,a=255 } }. The colour stops will be evenly distributed through the gradient if there are more than two.

Colour Management

gui.hsvToRGB()

RGB = gui.hsvToRGB(HSV)

Convert an HSV table to RGB.

gui.interpolateRGB()

RGB = gui.interpolateRGB(RGB, RGB)

Interpolate two RGB colours, returning a new RGB table.

gui.interpolateHSV()

HSV = gui.interpolateHSV(HSV, HSV)

Interpolate two HSV colours, returning a new HSV table.

gui.rgbToSVG()

svgColour = gui.rgbToSVG(RGB)

Convert an RGB table to a SVG colour string in the format rgb(r,g,b,a).

gui.strToRGB()

gui.strToRGB(Value)

Convert an RGB string to an RGB table. Value can be in the format #RRGGBBAA

gui.rgbValue()

V = gui.rgbValue(RGB)

Returns the light value of an RGB colour (i.e. the V in HSV)

gui.rgbToHSV()

HSV = gui.rgbToHSV(RGB)

Convert an RGB table to HSV table.