NGUI examples

[Marcus]

I must have planned to write some examples for the widget library ngui, for I found a couple in a folder. I've attached the ones I found and I'll try to write some more - there are many widgets to cover.

buttons.n7 is probably a good start.

It can take some seconds to compile a program that includes ngui.n7, because it contains thousands of lines of code (I should put the "larger" widgets in separate files).

[kevin]

Many thanks Marcus... I look forward to playing with these during the week.....

[1micha.elok]

I must have planned to write some examples for the widget library ngui, for I found a couple in a folder. I've attached the ones I found and I'll try to write some more - there are many widgets to cover.

buttons.n7 is probably a good start.
...

I am trying to use NGUI:Button and here it is a Calculator (simplified version) 
Limitation : ... it's my old brain and my little knowledge ...
  - calculation between 1 digit number only e.g : 3 + 4
  - to make a calculation, use 1 type of operator only  e.g : +, -, / or *
  - use equal sign "=" to find the result and to clear the calculator's screen

Code:

'----------------
' INITIALIZATION
'----------------
'#win32 'turn off for debugging purpose
include "ngui.n7" 'GUI library
set window "Calculator simplified",32,85,false,4

visible wRoot           'main container
visible displayLabel    'display result
visible i=0             'counter
visible number = []     'hold the value of button.txt
visible op              'hold the type of math operation

Layout()

'--------------
' MAIN PROGRAM
'--------------
EnterMainLoop(wRoot)

'-----------
' FUNCTIONS
'-----------
function Layout()

    wRoot = VBox(SIZE_EXPAND,SIZE_EXPAND) 'create container

    line0 = HBox(SIZE_EXPAND,SIZE_AUTO)
    wRoot.Add(line0)    'add line0 of HBox to container
    line0.SetPadding(1) 'spacing between HBox and the container
    displayLabel = Label("Hello",SIZE_EXPAND,14)
    line0.Add(displayLabel)

    line1 = HBox(SIZE_EXPAND,SIZE_AUTO)
    wRoot.Add(line1)   
    line1.SetPadding(1);line1.SetSpacing(1)
    line1.Add(TextButton("7",SIZE_EXPAND,14,Operand))
    line1.Add(TextButton("8",SIZE_EXPAND,14,Operand))
    line1.Add(TextButton("9",SIZE_EXPAND,14,Operand))
    line1.Add(TextButton("+",5,14,Operator))

    line2 = HBox(SIZE_EXPAND,SIZE_AUTO)
    wRoot.Add(line2)
    line2.SetPadding(1);line2.SetSpacing(1)
    line2.Add(TextButton("4",SIZE_EXPAND,14,Operand))
    line2.Add(TextButton("5",SIZE_EXPAND,14,Operand))
    line2.Add(TextButton("6",SIZE_EXPAND,14,Operand))
    line2.Add(TextButton("-",SIZE_EXPAND,14,Operator))

    line3 = HBox(SIZE_EXPAND,SIZE_AUTO)
    wRoot.Add(line3)
    line3.SetPadding(1);line3.SetSpacing(1)
    line3.Add(TextButton("1",SIZE_EXPAND,14,Operand))
    line3.Add(TextButton("2",SIZE_EXPAND,14,Operand))
    line3.Add(TextButton("3",SIZE_EXPAND,14,Operand))
    line3.Add(TextButton("x",5,14,Operator))

    line4 = HBox(SIZE_EXPAND,SIZE_AUTO)
    wRoot.Add(line4)
    line4.SetPadding(1);line4.SetSpacing(1)
    line4.Add(TextButton("0",SIZE_EXPAND,14,Operand))
    line4.Add(TextButton("=",SIZE_EXPAND,14,Result))
    line4.Add(TextButton(":",5,14,Operator))

endfunc

function Operand(button)
    pln i 'for debugging purpose
    number[i] = button.txt
    pln number[i] 'for debugging purpose
    displayLabel.SetText(number[i]) 
    i = i+1   
    if i > 2 then displayLabel.SetText("Error")'only allowed 1 digit calculation
endfunc

function Operator(button)
    op =  button.txt
    pln op 'for debuging purpose
    displayLabel.SetText(op)
endfunc

function Result(button)
    pln i 'for debugging purpose
    if i = 2 then
        select case op
            case "+";displayLabel.SetText(int(number[0])+int(number[1]))
            case "-";displayLabel.SetText(int(number[0])-int(number[1]))
            case "x";displayLabel.SetText(int(number[0])*int(number[1]))
            case ":";
                if number[1] > 0 then
                    displayLabel.SetText(int(number[0])/int(number[1]))
                else
                    displayLabel.SetText("Error")
                endif
        endsel
    else
        displayLabel.SetText("")
    endif
    i = 0 'counter reset to zero for the next calculation
endfunc

[Marcus]

Ooh! I'll have a look at your program when I get home from work tomorrow!

And I'll write examples for more widgets as soon as I can. You can also look at ned.n7, tilemap_editor.n7 and ngui_theme_editor.n7 (all in the root of the installation), but they're quite advanced. And there's ofcourse the library itself (lib/ngui.n7), but it's not well commented

[kevin]

Very nice - thanks for sharing the calculator example.

[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)

[1micha.elok]

... You can also look at ned.n7, tilemap_editor.n7 and ngui_theme_editor.n7 ...

In the beginning, I wanted to learn how to code GUI in the tilemap_editor.n7, 
and at the end, I modified the tilemap_editor.n7 into sprite editor (simplified version) [ File : sprite_editor.zip ] 

The converted sprite format is something like this one below : [ File : sprite.txt ]

Code:

[0,0,1,0,0,1,0,0],
[0,0,1,0,0,1,0,0],
[0,1,1,1,1,1,1,0],
[1,1,1,0,0,1,1,1],
[0,0,1,1,1,1,0,0],
[0,1,1,1,1,1,1,0],
[0,1,0,0,0,0,1,0],
[1,0,0,0,0,0,0,1]

Then [ File : demo.n7 ] , it is read by ImageFromMonoData function : ( note : the function which you used in denaalaafender game )

Code:

'----------------
' INITIALIZATION
'----------------
#win32
set window "Pixel Art", 1, 1, false, 10

Sprite1 = ImageFromMonoData([
[0,0,1,0,0,1,0,0],
[0,0,1,0,0,1,0,0],
[0,1,1,1,1,1,1,0],
[1,1,1,0,0,1,1,1],
[0,0,1,1,1,1,0,0],
[0,1,1,1,1,1,1,0],
[0,1,0,0,0,0,1,0],
[1,0,0,0,0,0,0,1]
])

'--------------
' MAIN PROGRAM
'--------------
set color 0, 0, 0; cls; set color 255,255,255'clear screen
draw image Sprite1,0,0
do;wait 1;until keydown(KEY_ESCAPE)'pause

'----------
' FUNCTION
'----------
function ImageFromMonoData(data)
    h = sizeof(data)
    w = sizeof(data[0])
    img = createimage(w, h)
    set image img
    for y = 0 to h - 1  for x = 0 to w - 1
        if data[y][x]  set color 0,168, 0, 255
        else  set color 0, 0, 0, 0
        set pixel x, y
    next
    set image primary
    return img
endfunc

So far so good, but I am still curious, how to read the converted sprite format above directly into my sprite editor ? I know there is something missing and I am not able to strip off these symbols "[", "]",and "," from the file [ File: sprite.txt ]
Could you please help me to correct this piece of code ?   

Code:

            vTilemapEditor.SetMapSize(DEFAULT_MAP_WIDTH,DEFAULT_MAP_HEIGHT)
            tiles = vTilemapEditor.GetTiles()
            for y = 0 to vTilemapEditor.GetMapHeight() - 1
                for x = 0 to vTilemapEditor.GetMapWidth() - 1
                    tiles[x][y].cel = int(fread(f)) - 1
                next
            next

[Marcus]

Quick reply here. If you change your file to:

Code:

[[0,0,1,0,0,1,0,0],
[0,0,1,0,0,1,0,0],
[0,1,1,1,1,1,1,0],
[1,1,1,0,0,1,1,1],
[0,0,1,1,1,1,0,0],
[0,1,1,1,1,1,1,0],
[0,1,0,0,0,0,1,0],
[1,0,0,0,0,0,0,1]]

, it becomes a valid json that you can load with JSON_FromFile if you include the json library. JSON_FromFile will return a 2D array in this case.

Code:

include "json.n7"

data = JSON_FromFile("sprite.txt")
' Get width and height.
h = sizeof(data)
w = sizeof(data[0])
for y = 0 to h - 1
    for x = 0 to w - 1
        ' Access value for x, y.
        value = data[y][x]
    next
next

This code doesn't do anything, it just shows you how to get the value at x, y.

[1micha.elok]

...
, it becomes a valid json that you can load with JSON_FromFile if you include the json library. JSON_FromFile will return a 2D array in this case.
...

Thank you, I am just trying to modify the sprite format into JSON and it can be read with JSON_FromFile ... 

Great. Thank you