Example

GUI Library 2.3 [FILE]

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

this project is continued here: EZ GUI - make GUIs in GFX designer

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

Details

• push buttons

  • output: press duration

• toggle switches

  • output: the on (-1) or off (0) state

• value-setting switches (aka HoldButtons)

  • you can draw multiple of these switches with one subprogram
  • settings:
    • flex mode: this'll make the switch respond even if you don't touch it's cells
  • output: the value of the switch that is currently on

• counters

  • settings:
    • max value
    • loop around at overflow (on/off)
    • press duration (in frames) until it starts repeatedly incrementing or decrementing
    • repeating speed (duration in frames)
  • output: the counting value

• sliders (faders)

  • you can draw multiple sliders with one subprogram
  • settings
    • pixel step (aka pixstep) this is the amount of pixels to step before snapping to a new value
    • lower and higher boundaries (so you can drag a bigger portion of the screen to set the slider value)
    • flex mode: this'll make the slider respond even if you don't touch it's cells
    • character and sprite number for the slider sprite
    • reset value: slider resets to this value on release
  • output: the slider value

• XY Pads

  • a 2 dimensional slider
  • output: two slider values

• Swipers

  • it calculates the swipe angle
  • settings
    • drag distance: distance to drag before activating
    • angle count: amount of sections that you can swipe to
    • startangle: the angle of the first section
  • output: one of the predefined sections

• sidebar

• scroller

  • calculates touch velocity by sampling the touch coordinates and the time, two times
  • updates the position each frame based on the velocity
  • reduces the speed depending on "friction"
  • does rubber banding at the end

• polar coordinates converter

  • takes normal coordinates
  • generates polar coordinates

• chunk loader

  • refreshes the BG with chunks of new data so that you can keep scrolling

• Arrow Draw

  • draws a 2x2 arrow in one of four directions

• 7-segment displays

• swipe animation

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

• In version 1.1 I added flexmode to the value-setting switches
• It's version 1.2 where we have XY pads (2D faders) and spring-loaded faders
• An now it's version 1.3 with swipers that find the swipe angle whenever you swipe the swiper
• This is version 1.4, I changed the sliders to have adjustable boundaries, now you can make small sliders that use a bigger portion of the screen to set a value
• 1.5 with sidemenus and scrolling
• 1.6 has chunk loading implemented for scrolling
• 1.7 were all characters are moved to the third page
• 1.8 comments are more organized, palettes can be customized (or turned off), and basicbutton is removed
• 1.9 code optimizations and comments to make the code clearer and easier to read
• 1.10 more code optimizations and comments that explain every line of code (WIP, 7 elements to go)
• 1.11 all code is explained, why does it take so long!
• 1.12 "holdbutton"s are renamed to "setbutton"s
• VERSION 2 can be found in the comments

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)

Thanks

was8bit 2021-09-12 04:07

Suuupeerb!!!

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

Thanks!

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

SP4CEBAR 2022-06-20 11:47 (Edited)

making GUI's in code is always time-consuming
So, I think I'm going to make a GUI DESIGNER program based on this program

It will produce a BG file that stores a "gui element" byte for each cell (320 bytes in total)
This way, touch coordinates can be linked to a GUI element without checking every single one of them

I've got one paradox: I want the GUI designer program to write it's own GUI

SP4CEBAR 2022-06-22 09:00 (Edited)

Here's a sneak peek on the GUI designer (press "+" to add elements)

GUI Designer.nx | Open in app

2022-06-22 09:00

was8bit 2022-06-22 10:58

Cool :)

SP4CEBAR 2022-06-23 12:21 (Edited)

After a lot of work, I added a somewhat tree-like data structure
I first tried to store addresses in RAM, to make it easy to read, but that soon turned out to be really annoying: whenever an item is added, I can shift all the data that comes after it using "copy" to make a gap where I can safely write the item, but then all the addresses are outdated, and they all needed to be updated

So I stored file sizes instead which also gives a smaller file size, but it does mean that the program needs to index the file first (and after each added item) (or it has to keep searching through it), but it seems to work well

SP4CEBAR 2022-07-04 08:20 (Edited)

I solved the paradox!
Making the GUI file that is written by a GUI editor which is made in the GUI file doesn't work very well, so I'm going to make a GUI editor that is written by editing the code (with DATA 0,0, ...) that would be enough to get me started making GUIs easily

SP4CEBAR 2022-07-05 12:20 (Edited)

It's tricky to make because there are so many components that have to work together:
- data source (GUI designer)
- data storage (File Tree)
- GUI reader
- GUI elements

SP4CEBAR 2022-07-06 23:19 (Edited)

Step 1 is done!
the tree file structure works reliably!

SP4CEBAR 2022-07-08 17:34 (Edited)

I kinda wasted some time, I put my DOS, my plans, my GUI elements, and my previous attempt in one program, which worked, I then tried to load some data from NX's "DATA" functions, and I tried to load a preset folder structure I made, which just wouldn't show up (on its own, my DOS works great),

I'm a little frustrated so I'm going to leave this mess behind, duplicate my DOS and take an extremely organized approach,

And by organized I mean simply reusing the entire DOS with code like:
DATA -1,"MKDIR 0"

SP4CEBAR 2022-07-20 18:27 (Edited)

Performance update! (V2.0)

I've implemented the GUI designer performance features without all the complicated file stuff, it was really easy!
Before this update, all elements of a menu would be loaded each loop, which is wasteful because you only ever need to use one element at a time
The CPU usage on menu zero of the the demo GUI went from 17% to 3%, so I call that a huge win!

This update includes:

• a byte map to convert the cell touch coordinates to the correct GUI element number
• an element selector which calls the GUI element of that number
• a display selector which is called by GUI elements or other displays with a display number, the display selector finds that display and calls it. Note: for the lack of a better name, a counter is classified as a display too

I purposely did not modify any GUI's, because that would make me need to rewrite many of them, they work fine and they wouldn't get much faster if I changed them

SP4CEBAR 2022-07-22 12:52 (Edited)

V2.1

GUI touch maps are now generated automatically from a list of touch zones

SP4CEBAR 2022-07-24 18:23

I unironically made a subprogram named "GETRECT"

SP4CEBAR 2022-07-24 19:41 (Edited)

V2.2

Size and position parameters (X1,Y1,X2,Y2 zones) and repeats (DX,DY,N) are now loaded from RAM, both when generating a map, and when running a GUI element You now need at least four to seven parameters less to call a GUI file These parameters could be generated by a tool program (dragging boxes is faster than typing coordinates) I'm using predictable files with fixed block sizes which are just great, they are so simple to use, even though the data usage may not be as efficient

SP4CEBAR 2022-07-24 21:06

Features still missing:
- multi-menu support for the performance version
- a little tool to drag boxes to write the zone parameters

SP4CEBAR 2022-07-25 00:13 (Edited)

V2.3

multi-menu support is here, and the code has been cleaned up

was8bit 2022-07-25 10:52

Wowzers! :D

SP4CEBAR 2022-07-30 11:05 (Edited)

I just released the beta version of GUI designer!

Gui designer is a tool you can use to draw the touch zones on top of a background, this is far easier than typing coordinates by hand

SP4CEBAR 2022-09-11 14:29

GUIs are still a pain to make: I made a full API of the NX sound system, but I still struggle with making a GUI for it, but I just got an idea to change that:
Cell-GUIs:
- a program gets the character of the touched cell, and finds out what GUI element it resembles, and it may be able to derive some additional information, this means less manual work of defining all the positions and data, maybe I could use a BG file for activated characters and palettes

SP4CEBAR 2022-09-19 09:46 (Edited)

It works, it can detect GUI elements from a BG file, this is going to make GUIs so much easier to make!

was8bit 2022-09-19 11:41

Clever :D

SP4CEBAR 2022-09-22 11:56

Just for the record, here's the final GUI system: EZ GUI - make GUIs in GFX designer