Units
On this page you find information on how BagaWork handles sizes used in the GUI.
Introduction
Many numbers that you pass to GUI components represent a size of some kind, such as:
- The
radius
passed tocornerRadius()
- The
thickness
passed toborder()
- The
amount
passed topadding()
- The
size
passed toFont.size()
- Etc.
These numbers need to be associated with a unit to have any meaning. If you don't specify which unit to use, then the mm
(millimeter) unit will be used by default.
The mm
unit
The mm
unit is short for MilliMeter and it is the default unit used if you don't indicate which unit to use. This unit is good to use when you want something on all screens to have one and the same specific size, no matter how wide the screen is that the app is running on.
Resize the screen in this example, and see that the size of the app title is the same, no matter how wide the screen is.
class StartPage extends Page{
createGui(){
return Rows.children(
Text.text(`The App Title`).font(Font.size(10)),
Text.text(`The app content...`)
)
}
}
Also note that in this example, since the app title uses the mm
unit (since no unit has been explicitly used), the width of the user's screen decides if the app title is shown on 1, 2 or 3 lines.
The sw
unit
The sw
unit is short for ScreenWidth, and it represents a percentage of the screen width. So, if the screen your app is running on is 40 millimeters wide, then:
1sw
= 0.4 millimeters50sw
= 20 millimeters100sw
= 40 millimeters
However, you never think of it as a conversion to millimeters like this. Instead, you rather think of it like this:
1sw
= a hundredth of the screen width50sw
= half of the screen width100sw
= the entire screen width
The sw
unit is great to use when you want the size of something to be related to the width of the screen your app is running on.
To use the sw
unit, just pass wrap your number in a call to the sw()
function.
Resize the screen in this example, and see that the size of the app title changes with the width of the screen. So in this case, we can be sure the title of the app always is shown on a single line, no matter how wide the screen is that our app is running on.
class StartPage extends Page{
createGui(){
return Rows.children(
Text.text(`The App Title`).font(Font.size(sw(15))),
Text.text(`The app content...`)
)
}
}
If you would change The App Title
to something longer, let's say, This Is My App Title
, then it would always be displayed on 2 lines, and you would need to decrease the size from 15
to something lower to be sure it is always displayed on a single line.
class StartPage extends Page{
createGui(){
return Rows.children(
Text.text(`This Is My App Title`).font(Font.size(sw(15))),
Text.text(`The app content...`)
)
}
}