Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Graphic User Interfaces — Gideros Forum

Graphic User Interfaces

antixantix Member
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.
+1 -1 (+3 / -0 )Share on Facebook

Comments

  • Will you be making it open source?
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • @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 =))
    +1 -1 (+2 / -0 )Share on Facebook
  • 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.

    Likes: simwhi

    My Gideros games: www.totebo.com
    +1 -1 (+1 / -0 )Share on Facebook
  • @totebo - how do you handle lists, checkboxes, radiobuttons, textscrollers, etc etc?
  • @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).

    Likes: antix, totebo

    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
    +1 -1 (+2 / -0 )Share on Facebook
  • @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. :)
    My Gideros games: www.totebo.com
    +1 -1 (+2 / -0 )Share on Facebook
  • @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.
  • 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.

    Likes: antix, rolfpancake

    +1 -1 (+2 / -0 )Share on Facebook
  • @simwhi - InkScape has the ability to edit interfaces? Does your 9-patch code use btimaps or meshes?
  • @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.

  • @simwhi - thanks. I suppose I should look into path2D at some stage. That will render vector graphics straight from InkScape?
  • antixantix Member
    edited 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 :>

    Likes: hgy29, keszegh, talis

    +1 -1 (+3 / -0 )Share on Facebook
  • nice

    Likes: antix

    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
    +1 -1 (+1 / -0 )Share on Facebook
  • antixantix Member
    edited 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 ~:>

    Likes: SinisterSoft, pie

    +1 -1 (+2 / -0 )Share on Facebook
  • 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.
  • antixantix Member
    edited 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.
    +1 -1 (+3 / -0 )Share on Facebook
  • test29test29 Member
    edited 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)?
  • antixantix Member
    @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.
  • test29test29 Member
    I don't need framework, just JSON file generated from your GUI editor (then I read from JSON and use my own buttons, labels ...)
  • antixantix Member
    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.
  • test29test29 Member
    I have not used it a long time ago, but I would like to have a look.

    Thanks.
  • antixantix Member
    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.
    zip
    zip
    ResizableDemo.zip
    3M
  • 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.
  • 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
  • hgy29hgy29 Maintainer
    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...
    +1 -1 (+2 / -0 )Share on Facebook
Sign In or Register to comment.