GUI Library 1.12 [DONE]


SP4CEBAR 2021-09-11 10:23 (Edited)

A library of subprograms for GUI elements like buttons, toggle switches, value-setting switches, counters, sliders, and a scrolling page mechanic. It also includes a 2x2 cell 7-segment display, and a cartesian to polar coordinates converter.

You're free to use these in any of your programs.

Play the demo to interact with them for yourself!

Swipe from the right side of the screen to open the side menu


More (technical) information is commented inside the program.

Currently the code (with many comments) uses about 3000 tokens, to save tokens, you could remove the subprograms that you don't need.

Feel free to submit or request new GUI elements.

Also, I'd love to see what you can make with these GUI elements!

version history

GUI Library.nx | Open in app
2021-10-19 13:49
GUI Library.nx | Open in app
2021-10-19 13:46
GUI Library.nx | Open in app
2021-10-18 11:04
GUI Library.nx | Open in app
2021-10-15 16:21
GUI Library.nx | Open in app
2021-10-13 12:34
GUI Library.nx | Open in app
2021-10-08 11:27
GUI Library.nx | Open in app
2021-10-01 15:45
GUI Library.nx | Open in app
2021-09-23 22:01
GUI Library.nx | Open in app
2021-09-23 22:00
GUI Library.nx | Open in app
2021-09-14 17:24
GUI Library.nx | Open in app
2021-09-13 19:39
GUI Library.nx | Open in app
2021-09-13 16:30
GUI Library.nx | Open in app
2021-09-11 11:24
GUI Library.nx | Open in app
2021-09-11 10:23

G-9 2021-09-11 10:41

Wow that’s just awesome work you did
Really nice good job

SP4CEBAR 2021-09-11 11:09 (Edited)


was8bit 2021-09-12 04:07


was8bit 2021-09-14 01:34

Coolio :D

SP4CEBAR 2021-09-23 13:13 (Edited)

I'm currently adding a side-menu with scroll
I've got a bit of a dilemma here:
I want to make this library very functional, but I also want to keep the performance impact, the size of the program, and the amount of modules as low as possible

SP4CEBAR 2021-09-23 13:28 (Edited)

I could make a stock variant of each module, but that would also increase the amount of modules and the size of the program (this library already takes 4000 tokens)

was8bit 2021-09-23 16:41 (Edited)

You might hate me, but I have a few thoughts...

1) many people like to use the first two pages of the graphics for their programs, so to make these able to be added to existing programs easily you might consider keeping all graphics restricted to the third page (fourth page being for the font set)

2) each item should be contained in one SUB so if someone only wanted to use a few items they need only to copy/paste the SUB for what they wanted...

... your GUI sub loads and runs everything.... if each individual SUB could be fed a command like "create", "run" or even "remove" so one could customize what control, where, and when to be used...

To avoid using GLOBAL statements you could use PEEK POKE to retain settings of individual controls, but it might be tricky... you could require the user add a unique control number when the control is created, and use that to determine where in memory that control will store its status... your existing GLOBALS seem to be working fine though, so users would have to be told to add these in order for an individual SUB could work...

These are just a few thoughts.... your GUI is super duper cool as is :D I wouldn't have the time or patience to take on such a big project!

SP4CEBAR 2021-09-23 22:02

I just added the sidebar and the scrolling with velocities and springy limits

SP4CEBAR 2021-09-24 06:13 (Edited)

@was8bit Thanks for the advice
1: good point, I didn't think about that yet
2: it already sort of does send commands: if certain parameters are zero, they are turned off, but maybe I could try to optimize it more, using more if statements to turn blocks of code off, I usually try to use as few if-statements as possible, since If statements are usually a little slower than arithmetic operations, but maybe I really should in this case

The usage of memory to avoid global variables is a good idea

SP4CEBAR 2021-09-24 06:16

I was thinking about making the whole thing file-based, so that I could make an editor for it

was8bit 2021-09-24 06:35


I really need to refocus on my gamebook project.... i get SO distracted....

SP4CEBAR 2021-09-24 08:00 (Edited)

Good luck with that

was8bit 2021-09-24 08:50

Thanks, i will need it!

was8bit 2021-10-01 16:47

Urm... i got distracted...

This project is looking soooo awesome :D

SP4CEBAR 2021-10-01 17:10


Good luck with your gamebook

was8bit 2021-10-02 04:27

I keep putting it off... i really need to focus...

SP4CEBAR 2021-10-15 16:22 (Edited)

Optimizing code is a time-consuming task

Either way, I found a way to make code look a lot more s t r u c t u r a l (hint)

SP4CEBAR 2021-10-17 12:02

It's interesting how code which I thought was already optimized, can still be optimized quite a lot

SP4CEBAR 2021-10-17 12:05

Does someone have a better name for the "holdbuttons" which are a set of buttonswitches of which only one can be turned on at any time, each buttonswitch has a value assigned to it: tapping button one sets the output of the set to one, tapping button two sets the output to two
I find it quite hard to find a name for them that is logical

was8bit 2021-10-17 15:19

I can write some complicated code that i usually have to rewrite into simplier code when my complicated code has errors i cant find ;)

... how about taptapbuttons ?

SP4CEBAR 2021-10-18 09:33 (Edited)

I'm writing an explanation for every line in my code, this makes me think so much about it that I start to optimize it (by removing obsolete if statements and such)

Usually when my code doesn't work reliable, it's usually easier to just start over (that's one of the reasons I'm making this gui library and the chunkloader engine)

SP4CEBAR 2021-10-18 09:38

taptapbuttons is a good suggestion, but if I didn't know what that gui element did, I wouldn't be able to derive the function out of the name

SP4CEBAR 2021-10-18 09:40 (Edited)

What do you think, is it a button, or a switch, or a hybrid between the two?
I could call it a buttonswitch

was8bit 2021-10-18 11:59

Adding "switch" helps alot i think :)

SP4CEBAR 2021-10-18 13:44

Or maybe "setbuttons" would work
Because each button thingy sets a value

was8bit 2021-10-18 15:51

That works too :)

SP4CEBAR 2021-10-19 13:49 (Edited)

I just renamed them to setbuttons

SP4CEBAR 2021-10-19 13:50 (Edited)

I added an explanation for pretty much every line of code in this program
(why does that take soo much time!)

SP4CEBAR 2021-10-19 13:54

The only things that could work better are the scrolling velocity (if you hold your finger on the screen and then scroll it'll register a long press duration which translates to a low velocity) and sidescrolling (which I didn't make, but I just want this to be done)

was8bit 2021-10-19 13:56

Its certainly a fantastic collection :D

SP4CEBAR 2021-10-19 18:21 (Edited)

Thank you! :D

SP4CEBAR 2021-10-30 16:14

I noted that some of the subprograms mentioned in the parameter overview are outdated
Also, the setbuttons are quite inefficient for larger sets of elements, so I made a new one: optiset which sets the palettes of the underlying buttons, but it can't go diagonal

SP4CEBAR 2021-11-05 11:39 (Edited)

Now that I'm using this library to make a better piano roll, I'm finding some bugs and inefficiencies. For example, if you press the background and slide to an element, the element will become active. I also see the need to add or edit some elements (to make for example a multi-state switch). Also, the more settings and parameters a GUI element has, the harder it is to write the call for it.

I may make this gui system file-based at some point, that would allow me to make a gui editor. The parameters could be stored in ROM and the global variables and the in/out variables could be stored in RAM at a variable address.

To call the subs based on a file, I think the best thing I could do is make a loop for each gui sub to CALL the SUB a variable number of times (probably better than if ... else if ... else if ... else if ...)

was8bit 2021-11-05 12:54 (Edited)

My trick is that at the moment of first touch, i imediately set a variable ITOUCH... which remains unchanged until the finger is released... once set, anything else touch is always governed by the initialy set ITOUCH..

If empty space was touched, then until you lift your finger up to reset ITOUCH, everything is ignored

Also, when the finger is lifted, i do a one time reset of ITOUCH, just in case i need to reset some other variables as well... there after, once ITOUCH is reset to 0, nothing else happens until again a finger touches the screen :)

You can also set your ITOUCH to show that the finger that once was touching a control, has left that control... in this case, change ITOUCH to a number that means TOUCH will be ignored until the finger is lifted to reset ITOUCH...

SP4CEBAR 2021-11-06 09:33 (Edited)

My system works very similar to yours, my variable is called "touched" and is set to the ID of the element once it's activated
When making this library I just forgot to add TAP to the IF statement that activates an element (my original piano roll (which was my inspiration for this library) didn't have that problem)

was8bit 2021-11-06 12:22

Ah, cool :)

Log in to reply.