Graphic User Interfaces

antix · February 2016

Hey all,

Some recent questions on the forum made me wonder what other people use for their GUI's. Do you roll your own? Do you use one you found online? Was it free or did you purchase it?

And what do you use to actually edit your GUI's with? Do you use some editor or do you enter GUI data manually?

I know @SinisterSoft has started making his own GUI system which looks very flexible. What does everyone else do?

Currently I'm working on my own GUI system (loosely based on Widget Candy) and am also making an editor for it.

EDIT: The latest version of my GUI Editor can be found in this post.

Version 1.0.1
- Fixed some minor issues with exporting the wrong types (oops).
- HScrollBar and VScrollBar are now exported with the same name "ScrollBar) to fit in with my own GUI system.
- When starting, the editor now remembers the last folder it was in.
- Added "Export JSON" feature so you can now export the GUI as a JSON file or LUA source.

SinisterSoft · February 2016

Will you be making it open source?

antix · February 2016

@SinisterSoft - I could probably release the editor but the GUI system is maybe 10-15% comprised of Widget Candy code so there might be some issues there. The only other issue with releasing my code to everyone is that they will see how badly I code

)

totebo · February 2016

I tend to hardcode all UI, with the help of a pretty solid Button class I've made. This works well, but I wish there was a way to create a nice UI implementation without tons and tons of code.

I come from a Flash background, and one of the strengths were the Flash IDE which gives you full manual control of UIs with its built-in editor. I wish there was something like that for Gideros. A simple 9-scale class for buttons and panels would be a start to reduce code, as would a simple animation system for "presenting" a scene and "hiding" a scene (having each individual object appear and disappear individually, rather than a "swipe").

Waffle over.

antix · February 2016

@totebo - how do you handle lists, checkboxes, radiobuttons, textscrollers, etc etc?

SinisterSoft · February 2016

@totebo - I wrote a 9-scale image routine in my ui. I posted the code on the forum (or at least a link to it).

totebo · February 2016

@antix, I don't handle those things. I make games!

I made a checkbox class actually for Miner Z's option screen. I tend to make them as simple as possible, with graphics completely separated from the code.

@sinistersoft, not for the first time you remind me of your already shared code.

antix · February 2016

@totebo - heheh, fair enough. I think even for games however you are at some stage going to need more complex GUI components than buttons :P

SinisterSoft makes use of meshes in his windowing system. It's pretty cool and maybe I'll adopt such a strategy one day if I ever decide to revamp my own GUI system.

simwhi · February 2016

I've written my own 9-patch class and I use a custom button class. The rest of the UI is hand coded or created using inkscape.

It would be nice to be able to have some standard classes to help speed up the process a bit more.

antix · February 2016

@simwhi - InkScape has the ability to edit interfaces? Does your 9-patch code use btimaps or meshes?

simwhi · February 2016

@antix I use bitmaps at the moment, but we'll move to using path2D when it's fully functional. I use Inkscape to create parts of my UI. For example, if I create a 9-patch I use the set clip feature to create each part. You could achieve the same thing by splicing the bitmap using GIMP but Inkscape is much easier.

antix · February 2016

@simwhi - thanks. I suppose I should look into path2D at some stage. That will render vector graphics straight from InkScape?

antix · February 2016

Hey all,

I really have no idea if this will be of any use to anyone at all but here is my attempt at making a GUI Editor. Let me know what you think?

The types of widget that can be created and manipulated in the editor are..

- Window
- Button
- CheckBox
- RadioButton
- TextView
- Panel
- Image
- Label
- Log
- List
- TextInput
- HScrollBar
- VScrollBar

NOTES:
- Its Windows only and runs fine on my laptop which (Windows 8.1 64-bit). sorry, I don't own any apple things

- The editor saves .gui files which are just text files containing multiple encoded JSON objects. In theory you could just use this as data for your GUI system.

- The editor can export data in multiline or singleline mode. It can pad the output however you like.

- Exported data will look familiar to Widget Candy owners. I cannot promise it will work with that system however.

- How you interpret the exported data is up to you, no GUI system is included here.

- Setting a windows textAlign property to left, right, above, or below will cause the caption to not be drawn in the editor. This is because Windows Form Controls cannot render outside their bounding boxes. The property will still export okay.

- During development I discovered that Panels and Labels are essentially the same thing with different names. I have left both in anyway.

- color, alpha, imageRotation, scaleX, and scaleY do not currently have any visible effect in the editor. They can be modified and exported however.

- Backdrop and Atlas settings are not saved.

- I'm sure there are other things I forgot.. If you find something strange just ask :>

SinisterSoft · February 2016

nice

antix · March 2016

Hey all, I don't know if anyone is even using this but..

- Added a Snap To Grid feature to make it easier to align widgets when dragging them about.

- Exported property names can now be mapped. If you wanted to use "LeftEdge" instead of "X", or "numLines" instead of "visibleLines", etc etc. This should make the exported code easier to digest for your own GUI systems.

- Exported properties can now be exported as different types so you can export integers as integers, floats, strings, or even bools. This feature is limited so if your property doesn't get exported as the type you wanted.. it's not possible ~:>

rolfpancake · March 2016

It would be nice to be able to have some standard classes to help speed up the process a bit more.

Sign. L-)
It is the first and till now the only thing I'm missing in the Gideros package.

antix · March 2016

I've updated the Editor. See the first post. I've also removed my old attachments and the latest version will always be attached to my first post.

test29 · July 2016

@antix I just tried your GUI editor and it's great.

I have a question: How to change button (label, textinput...) height, it's locked to 48?

Also there are other elements that have locked height or width or both. Is there a way to resize that elements to my custom size (possibility to resize image element and the picture will resize with it)?

antix · July 2016

@test29, I haven't looked at the editor for a while. Whilst it functions it is kind of buggy and I will sometime soon give it an overhaul.

Some controls in my GUI editor are locked to certain dimensions because of the way they are rendered (both in the windows application and my Gideros apps). I will have a think about that.

@n1cke is working on a GUI framework that he will be releasing sometime in the future.

test29 · July 2016

I don't need framework, just JSON file generated from your GUI editor (then I read from JSON and use my own buttons, labels ...)

antix · July 2016

Yep I get that but it also I s restricted by the way everything is drawn inside the editor. How are you with visual basic? I'm happy to share my source if you would like to have a look.

test29 · July 2016

I have not used it a long time ago, but I would like to have a look.

Thanks.

antix · July 2016

Okay here is the source. I hope you can make it do what you want. I'm happy to answer any questions you have too.

keszegh · September 2018

so i will revive this topic as i think this gui editor could be a great starting point to make a perfect gideros gui editor.
1. it would be great to have multiple options to 'stick items' (count coordinate from top-left of parent widget or bittom-left or etc.; also count coordinate in percentage of full width/height of full-coordinate). this needs to be thought over, i wonder if there is any editor around (for other sdks etc.) which allows such thing, i have no experience.
2. and then there should be a possibility to resize the 'screen' in the editor (freely and to some defaults, like gideros player) and then it would be easy to check how the gui we made will show on different windows.

pie · September 2018

I don't know where to start building it, but after some time using Layout I think a gui to build at least a "manual grid" should be feasible: it's all a matter of adding values to some keywords:
cols, rows, cellRelW, cellRelH to spilt the screen in a grid, and then define the positions of other layer objects specifying their col and row values.

Grids made with Layout already scale to different resolutions and screen sizes

hgy29 · September 2018

I have posted by attempt at a grid based ui editor on gideros slack group a few days ago. Still a very early thing, and I kind of stopped working on it due to lack of time...

keszegh · September 2018

how appropriate timing:
https://www.humblebundle.com/books/ui-ux-books?hmb_source=humble_home&hmb_medium=product_tile&hmb_campaign=mosaic_section_2_layout_index_1_layout_type_threes_tile_index_2

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Graphic User Interfaces

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Graphic User Interfaces

Comments