NGUI examples

[Marcus]

That's a nice example!

I should probably add some sort of uniform grid container, so that one need not put hboxes in a vbox for these things.


I added an example of vertical and horizontal sliders to the original post for download, also pasting the code here.

Code:

' NGUI - Sliders
' --------------
' It's been a while since I wrote the other ngui examples. I just assume that I explained very well
' how containers worked in those examples. This example shows you how to use horizontal and vertical
' sliders.

include "ngui.n7"

#win32

' Resizable window.
set window "Sliders", 256, 256, false, 0
set redraw off

' Use the default dark mode (same as the "Default dark" setting in NED).
SetDarkMode(true)

' Create a horizontal box for three vertical boxes, where each vertical box contains a slider and
' a label. The sliders will be used to control the background color of many widgets, such as
' buttons.
rgbBox = HBox(SIZE_AUTO, SIZE_AUTO)
rgbBox.SetBorder(1) ' Add a one pixel border to the box.
rgbBox.SetPadding(4) ' Add some padding - distance between the edge of the box and its elements.

' Box with a slider, to control the red color component, and a label.
vbox = VBox(SIZE_AUTO, SIZE_AUTO)
' Use VerticalSlider(height, topValue, bottomValue, actionCallback) to create a vertical slider.
'    Instead of using a static function for the action callback, I just pass an anonymous function
' as argument here.
slider = VerticalSlider(100, 255, 0, function(slider, value)
        ' 'value' will be in the range [0..255], as specified when creating the slider.
        ' Get the color we want to change.
        c = GetColor(COLOR_PRIMARY_BACKGROUND)
        ' Change the color using the value from the slider.
        SetColor(COLOR_PRIMARY_BACKGROUND, value, c[1], c[2])
    endfunc)
' Set the initial value of the slider to the red component of the primary background color.
slider.SetValue(GetColor(COLOR_PRIMARY_BACKGROUND)[0])
' Add the slider and an explaining label to the vbox.
vbox.Add(slider)
vbox.Add(Label("R", SIZE_AUTO, SIZE_AUTO))
' Add the vbox to the rgbBox.
rgbBox.Add(vbox)

' Now create a slider for the green color component.
vbox = VBox(SIZE_AUTO, SIZE_AUTO)
slider = VerticalSlider(100, 255, 0, function(slider, value)
        c = GetColor(COLOR_PRIMARY_BACKGROUND)
        SetColor(COLOR_PRIMARY_BACKGROUND, c[0], value, c[2])
    endfunc)
slider.SetValue(GetColor(COLOR_PRIMARY_BACKGROUND)[1])
vbox.Add(slider)
vbox.Add(Label("G", SIZE_AUTO, SIZE_AUTO))
rgbBox.Add(vbox)

' And the blue color component.
vbox = VBox(SIZE_AUTO, SIZE_AUTO)
slider = VerticalSlider(100, 255, 0, function(slider, value)
        c = GetColor(COLOR_PRIMARY_BACKGROUND)
        SetColor(COLOR_PRIMARY_BACKGROUND, c[0], c[1], value)
    endfunc)
slider.SetValue(GetColor(COLOR_PRIMARY_BACKGROUND)[2])
vbox.Add(slider)
vbox.Add(Label("B", SIZE_AUTO, SIZE_AUTO))
rgbBox.Add(vbox)

' Create another box with a label and a horizontal slider that just outputs its value to the label.
' A horizontal slider works just like a vertical one.
'   HorizontalSlider(width, leftValue, rightValue, actionCallback)
otherBox = VBox(SIZE_AUTO, SIZE_AUTO)
otherBox.SetHalign(ALIGN_CENTER)
visible sillyLabel = Label("0.00", SIZE_AUTO, SIZE_AUTO)
otherBox.Add(sillyLabel)
otherBox.Add(HorizontalSlider(100, -100, 100, function(slider, value)
        ' Use 2 decimal digits.
        sillyLabel.SetText(str(value, 0, 2))
    endfunc))

' Create a root container for the window, center its children and add 16 pixels between them.
root = VBox(SIZE_EXPAND, SIZE_EXPAND)
root.SetHalign(ALIGN_CENTER)
root.SetValign(ALIGN_CENTER)
root.SetSpacing(16)
root.Add(rgbBox)
root.Add(otherBox)

' Enter main loop.
EnterMainLoop(root)