π
<-

## GUI toolkit under development

C, C++, ASM...

### Re: GUI toolkit under development

Hello,
I would be delighted to use your great tool which looks great.
Unfortunately I don't own a Ti-Nspire so I don't program on this calculator.
Secondly, I just started learning C so I don't know how to program in C++.
Sorry, because your tool looks really good.

#### Tous mes programmes sont disponibles ici

Mon comte Instagram :
_raph.bob_

BobbProgrammeur

Niveau 10: GR (Guide de Référence)
Level up: 48.5%

Posts: 181
Joined: 19 Apr 2020, 12:37
Location: Morbihan
Gender:
Calculator(s):
Class: Première Générale

### Re: GUI toolkit under development

Looks like I missed the discussion of this a couple weeks ago, but I'll clear some things up. VYSION 1.0.0, which is the one currently available on the TI-Planet archives and the only public release of the program, used a GUI library called OPTIX 2, which did not support stacking window management, but was able to handle menus, text input, and also had an alternate cursor-based GUI mode. VYSION 2, which I'm currently working on, and which represents a complete rewrite of ALL of the code of the first, including OPTIX, the GUI system, will be much more versatile, with a stacking window manager, object-based layout, and much more ease of use and versatility. It is available on as well.

epsilon5Programmeur

Niveau 2: MI2 (Membre Initié)
Level up: 66.7%

Posts: 3
Joined: 20 Jun 2019, 01:01
Gender:

### Re: GUI toolkit under development

Hello

Long time no write, I took some days off programming because of especially long working days ...
And also changed my coding machine, now having a significantly more powerful one. I took that opportunity also to change my working configuration, from a Ubuntu on a virtual machine, now to a Ubuntu on WSL . It took me some time to have everything working well just as before, but now that's done, and everything is correctly setup. I can now return to coding...

epsilon5 : nice to hear that the code of the OPTIX GUI is open, I will have a look to it. It may give me some ideas to improve the GUI Toolkit.

Short term plan for me is to finish the menu system (that is now 80% done) and work intensively on debugging/optimising cause I am experiencing some memory leaks and slowdowns for massive applications. So when the menus will be fixed, this will become priority #1.

Hope to come soon with the next release.

Ciao

Slu
Developing the GUI Toolkit for nSpire
see current revision here : https://github.com/SlyVTT/Widget-for-TI-NSpire

SlyVTTProgrammeur

Niveau 8: ER (Espèce Rare: nerd)
Level up: 39.5%

Posts: 96
Images: 0
Joined: 19 Jan 2021, 09:41
Gender:
Calculator(s):

### Re: GUI toolkit under development

Hello,
I am delighted to see that your library is open-source, it is really good, thank you very much.

#### Tous mes programmes sont disponibles ici

Mon comte Instagram :
_raph.bob_

BobbProgrammeur

Niveau 10: GR (Guide de Référence)
Level up: 48.5%

Posts: 181
Joined: 19 Apr 2020, 12:37
Location: Morbihan
Gender:
Calculator(s):
Class: Première Générale

### Re: GUI toolkit under development

Dear All,

After some weeks without posting, please find below some news of the project. I took some days off , far from programming, but during the last days, I restarted working on the project. So now I am proud to show some new functionnalities of the toolkit .

First, and this is not visible when looking at the pictures, I made some housekeeping in the code to make it more smooth and quick, in particular, I switched all the class to use the
std::list
container rather than the
std::vector
container. This means that there is no more "FPS" drop when the whole widget collection is relocated somewhere in the memory to have a fully continuous allocated area. It tooks some days to rewrite everything accordingly, but now this is done and works fine.

Second, I worked on the menu system that is now functional (there is still one small bug to be corrected, but nothing important). I also added the possibility to add an iconbar either to the windows or to the desktop (same for menus).

Menus are composed of types of widgets :
-
that is the main menu container, which contains
that can be clicked to open a
.
- MenuPaneWidget is also a container that can include MenuItemWidgets that can be clicked to open a sub MenuPaneWidgets (in that case a red mark appears in the menu to indicate a sub-menu).

IconBarWidget
(the containers) where we can add
IconItemWidget
(the button with the icon). Enabled ones are colorfull while the disabled one are greyish.

As usual pictures of the current state :

The next step is to correct the small bug here :

As you can see, a portion of the menu is not correctly undropped, when the window is activated. Just need to spend some hours on debugging to understand the path followed by the code to reach that situation .

In term of next milestones, I need to implement the following widgets that are missing :
- FolderListBox and FileListBox to navigate through files and folders
- MultilineTextBox
- possibly "rich text" MultilineTextBox, but I need to evaluate the complexity of doing this later widget

Hope it serves some projects ...

Ciao

Sly
Developing the GUI Toolkit for nSpire
see current revision here : https://github.com/SlyVTT/Widget-for-TI-NSpire

SlyVTTProgrammeur

Niveau 8: ER (Espèce Rare: nerd)
Level up: 39.5%

Posts: 96
Images: 0
Joined: 19 Jan 2021, 09:41
Gender:
Calculator(s):

### Re: GUI toolkit under development

Hello,
Even though I won't use your tool because I don't have a Ti-Nspire, I follow the project and suggest some things because it looks very good.
I think your project will become very useful for many people, and allow them to do quickly very beautiful programs with GUI.
A multiline text widget is a good idea, and associated with the folder list box, can be used to do very easily a text editor with many features.
If it's not already made, you could also add a "canvas" widget, to write rectangles, circles, and others.
Good luck,
Bobb

P-S : sorry for my bad english

#### Tous mes programmes sont disponibles ici

Mon comte Instagram :
_raph.bob_

BobbProgrammeur

Niveau 10: GR (Guide de Référence)
Level up: 48.5%

Posts: 181
Joined: 19 Apr 2020, 12:37
Location: Morbihan
Gender:
Calculator(s):
Class: Première Générale

### Re: GUI toolkit under development

Hello Bobb

Bobb wrote:Hello,
A multiline text widget is a good idea, and associated with the folder list box, can be used to do very easily a text editor with many features.

This is exactly what I have in mind, a multiline text widget permits to have many utilities, from debugging console to text editors.
When rich text formatting is implemented (meaning all the stuff managed by the font manager, i.e. text color, underlining or emphasing ...) it becomes possible to have much more powerfull features for example for code editors/parsers.

Bobb wrote:If it's not already made, you could also add a "canvas" widget, to write rectangles, circles, and others.
Good luck,

This is also in my roadmap, this is called GC (Graphic Context). This is something I would like also to implement in future revisions, for exemple to display picture or to let the user draw something in a window. As I am using the SDL library, I think it should not be that tough to code as there are already some possibility to render in surfaces/memory and then we can use clipping/resizeing function of the library to adjust to the right portion of the screen.

if you want to know what are the plans for the next steps, you can have a look there : https://github.com/SlyVTT/Widget-for-TI-NSpire/projects/1

Ciao

Sly
Developing the GUI Toolkit for nSpire
see current revision here : https://github.com/SlyVTT/Widget-for-TI-NSpire

SlyVTTProgrammeur

Niveau 8: ER (Espèce Rare: nerd)
Level up: 39.5%

Posts: 96
Images: 0
Joined: 19 Jan 2021, 09:41
Gender:
Calculator(s):

### Re: GUI toolkit under development

Hello All Followers,

some news of this week of developments dedicated to the GUI Toolkit for the TI nSpire.

The development was focused on the implementation of two main features :
- constrained positioning of widget thanks to the containers (vertical, i.e. "ContainerVWidget" component, or horizontal, i.e. "ContainerHWidget" component)
- creation of the FileDialogWindowWidget component, allowing the user to navigate through folders and and select files.

First, the constrained positioning feature. It allows adding some constraint to a given widget to force the positioning, size calculation. Two types of constraints are implemented yet :
- absolute size in pixels giving directly the size of the widget in the corresponding dimension.
- relative size in percentage of remaining available space in the parent container.

Let's compare "non constrained automatic positioning", i.e. just like before, with the following code :
Code: Select all
        WindowWidget *window4 = new WindowWidget( (char*) "Simple Constrained Window", 80, 85, 150, 90, desktop );        window4->setminimaldimensions( 90, 75 );            ContainerVWidget *containerVcons = new ContainerVWidget( (char*) "container", 1, 1, 1, 1, window4 );                    ButtonWidget *but1 = new ButtonWidget( (char *) "Button 10px high", 1, 1, 1, 1, containerVcons );                    ButtonWidget *but2 = new ButtonWidget( (char *) "Button 20px high", 1, 1, 1, 1, containerVcons );                    ButtonWidget *but3 = new ButtonWidget( (char *) "Button 30% of remaining space", 1, 1, 1, 1, containerVcons );                    ContainerHWidget *containerHcons = new ContainerHWidget( (char*) "containerH", 1, 1, 1, 1, containerVcons );                            ButtonWidget *but4 = new ButtonWidget( (char *) "Button 30% width", 1, 1, 1, 1, containerHcons );                            ButtonWidget *but5 = new ButtonWidget( (char *) "Button 70% width", 1, 1, 1, 1, containerHcons );            window4->adjust();

which give the following window in normal size and "fullscreen" mode :

With the new version, which integrate the constraints of the parent containers :
Code: Select all
        WindowWidget *window4 = new WindowWidget( (char*) "Simple Constrained Window", 80, 85, 150, 90, desktop );        window4->setminimaldimensions( 90, 75 );            ContainerVWidget *containerVcons = new ContainerVWidget( (char*) "container", 1, 1, 1, 1, window4 );                    ButtonWidget *but1 = new ButtonWidget( (char *) "Button 10px high", 1, 1, 1, 1, containerVcons );                    containerVcons->addconstraint( 10, (char *) "px" );                    ButtonWidget *but2 = new ButtonWidget( (char *) "Button 20px high", 1, 1, 1, 1, containerVcons );                    containerVcons->addconstraint( 20, (char *) "px" );                    ButtonWidget *but3 = new ButtonWidget( (char *) "Button 30% of remaining space", 1, 1, 1, 1, containerVcons );                    containerVcons->addconstraint( 30, (char *) "%" );                    ContainerHWidget *containerHcons = new ContainerHWidget( (char*) "containerH", 1, 1, 1, 1, containerVcons );                    containerVcons->addconstraint( 70, (char *) "%" );                                ButtonWidget *but4 = new ButtonWidget( (char *) "Button 30% width", 1, 1, 1, 1, containerHcons );                                containerHcons->addconstraint( 30, (char *) "%" );                                ButtonWidget *but5 = new ButtonWidget( (char *) "Button 70% width", 1, 1, 1, 1, containerHcons );                                containerHcons->addconstraint( 70, (char *) "%" );            window4->adjust();

which give the following window in normal size, while resizing and "fullscreen" mode :

Second, a new component has been developped: FileDialogBoxWidget, which permits to select files and navigate through files and folders. It is a composite widget based on existing (but improved) widgets. Here are some screenshots taken while using the widget. The listbox on the left is for folder selection while the list box on the right is for file selection. The path is "simplified" to its canonical form before being put in the input box (for example "/documents/Widget/./../ndless/../pyWrite/" is simplified to "/documents/pyWrite/" to avoid too long useless path names). Of course it uses the constraint positioning to achieve good visuals.

Final selection (when validated by the "OK" button) can be obtained through methods of the FileDialogBoxWidget :
- the path of the selected file can be obtained through the FileDialogBoxWidget::getselectedpath() method (returns a (char*))
- the name of the selected file can be obtained through the FileDialogBoxWidget::getselectedfilename() method (returns a (char*))
- the fullname (meaning path + name) of the selected file can be obtained through the FileDialogBoxWidget::getselectedfullname() method (returns a (char*))

This is just a picture taken after validating a FileDialogBowWidget and reinjecting the previous values to a simple window for checking everything is correct :

For Bisam, I know you are not a great fan of the pink color for the file selection, so you can choose different themes, as usual :

It is very easy to define new ones (user can define its own theme and color scheme for its application by adding a theme through a theme file).

This is for this week.

Now working on the MultiLineTextBox and MultiLineTextInput features + GraphicContext. When all this will be done, I plan to propose the first "Release Candidate".

Ciao

Sly
Developing the GUI Toolkit for nSpire
see current revision here : https://github.com/SlyVTT/Widget-for-TI-NSpire

SlyVTTProgrammeur

Niveau 8: ER (Espèce Rare: nerd)
Level up: 39.5%

Posts: 96
Images: 0
Joined: 19 Jan 2021, 09:41
Gender:
Calculator(s):

### Re: GUI toolkit under development

Nice

Quick question, why the (char *) cast before the strings? It should probably be const char* anyway, for both sides... ?

Niveau 16: CC2 (Commandeur des Calculatrices)
Level up: 57.3%

Posts: 13370
Images: 1093
Joined: 01 Jun 2007, 00:00
Location: France
Gender:
Calculator(s):
Class: (ingénieur)

### Re: GUI toolkit under development

unfortunately not, the cast is to avoid warnings from the compiler. But clearly I don't think it is satisfactory. The methods of the widgets are written to wait for a (char*) and if we call them with a (const char*), I got a warning. So that's why a put a (char *) cast before the strings.

To be clear, without the cast, it works, but each time the compiler finds such a mismatching, it raises a warning. It is always better to avoid such situation.

While discussing with Vogtinator on memory freeing process, I think I will switch all the (char*) to (std::string). It will solve a lot of issues that I had to manage one by one with local "conversion patches".

So right now the main goal is to reach a working point with all needed widgets, and second, from this starting point, to optimise and clean the code.

I hope my explanations are clear

Ciao

Sly
Developing the GUI Toolkit for nSpire
see current revision here : https://github.com/SlyVTT/Widget-for-TI-NSpire

SlyVTTProgrammeur

Niveau 8: ER (Espèce Rare: nerd)
Level up: 39.5%

Posts: 96
Images: 0
Joined: 19 Jan 2021, 09:41
Gender:
Calculator(s):

PreviousNext

### Who is online

Users browsing this forum: No registered users and 6 guests

-
Search
-
Social
-
Featured topics
1234
-
For more contests, prizes, reviews, helping us pay the server and domains...

Discover the the advantages of a donor account !

-
Stats.
534 utilisateurs:
>526 invités
>3 membres
>5 robots
Record simultané (sur 6 mois):
6892 utilisateurs (le 07/06/2017)

-
Other interesting websites
Texas Instruments Education
Global | France
(English / Français)
Banque de programmes TI
ticalc.org
(English)
La communauté TI-82
tout82.free.fr
(Français)