HGui Showcase

[Allanon]

Hello guys!
After more then 4 years of development I'm really near to a release of the ScuiLib successor: HGui.

I'm posting this news to check out how much interest could be in a commercial release, and if there is enough interest I will start to write tutorials and a comprehensive developer guide for people who will decide to support this project. Writing docs is a big job because the library offer many features and documenting all the stuff supported will require a lot of work. Along with the docs and tutorials I will offer support through e-mail or through forum and of course bug fixing.

I'd like to release HGui in two versions:
- Hollywood applet + tutorials + developer guide.
- Hollywood source code + tutorials + developer guide.
Along with the HGui library you will get additional libraries required by HGui that could be useful for you and your projects.
Prices will be defined later depending on how much feedback and interest will be around this project.

:: CURRENT DEVELOPMENT STATE ::
At the current state HGui is usable and stable, I'm using it for various projects, you can check and test by yourself with the provided demo at the end of this post.
I need to complete some planned features and a couple of missing classes. I've also to fix some small bugs.

:: FEATURES ::
GENERAL FEATURES
- Object Oriented Programming
- Flexible and multi-layered skin system
- Easy of use
- Fast
- Scalable (tuning the cache system and the theme)
Since HGui does not depend on any system specific command/library all developed projects can be compiled for any system supported by Hollywood, your GUIs will be the same on every platform, exactly the same.

WINDOWS SYSTEM
- Each window you create supports the following events:
- OnClose
- OnMove
- OnActivate
- OnDeactivate
- OnHide
- OnShow
- OnSize
- User definable minimum and maximum sizes
- Automatic control of the window's order
- Methods to control/edit on the fly the created windows
- Various background type supported
- Special windows to build up quickly progress indicator and/or messages for long operations.
- Window's menu (not the ones available with Hollywood but a custom one that allow you to include any gadget type into it.
- Functions to find window objects by name, by Hollywood ID, and to check if a window exists or not.
- Ability to attach hotkeys to any window to execute specific tasks when a keypress occurs.

GADGETS SYSTEM
- Supported gadget classes
- Box
- Vertical Divider
- Horizontal Divider
- Label
- Group (Generic, Radio, Check)
- Button
- Switch
- Scrollbar (Vertical/Horizontal)
- Slider (Vertical/Horizontal)
- ProgressBar
- Knob
- Text (for user input)
- ListView
- TreeView
- DropDown
- Image
- Virtual Area
- Planned gadget classes
- Spin
- Tabs
- Ability to switch the cache system on or off
- On: each gadget state will be cached, faster but more memory required
- Off: each gadget state will be rendered directly, slower but with a lower memory footprint.
- Each gadget can be skinned individually
- Each gadget class can be skinned globally
- Support for icons inside gadgets with custom alignment and text adjustment
- Flying tips for some gadgets
- Sounds on some actions (OnOver, OnOut, OnPushed, OnDown)
- Supported actions:
- OnPushed
- OnDown
- OnOver
- OnOut
- OnDrop
- OnDropOut
Some classes can have additional actions
- Functions to search buttons by their names
- Methods to control and modify on the fly existing gadgets
- Gadgets drag and drop (planned)
- Ability to attach a right-mouse action or a pop up menu (planned)

LAYOUT SYSTEM
- Gadgets can be arranged using the MUI concept, you define some gadgets that will be grouped inside another gadget, this way your GUI is represented by a tree where the tree root is a special gadget called 'rootGadget' already created for you when a window is created.
- Supported layout are:
- Vertical
- Horizontal
- Grid
- When you define child gadgets you can define the following properties:
- Gadget weights (percentual variable, percentual fixed, pixel variable, pixel fixed)
- Borders (top, bottom, left, right) from the father gadget
- Gap between childs in pixel

:: WHAT'S MISSING/NEED MORE LOVE ::
- Some little glitches to be fixed
- Keyboard navigation system
- Gadget's hotkeys
- Gadget's drag & drop
- ListView/TreeView column resize using the mouse
- Tabs class
- Spin class
- Documentation
- Tutorials
- Global theme management functions are not completed
- Support for XML Gui definition

:: FINAL WORDS ::
Below you can find some screenshots of HGui in action and a demo that show all supported classes in action for every supported platform.
Just download the version you want to try along with the directory <HGui_ShowCaseResources>.
MacOS users does not need the resource folder because it's already included in the .app drawer.

I really hope that this work will help Hollywood to get even more users and more applications, I also hope to get some feedback from you despite my english!
Please let me know if you have problems with the demo or if you notice some bugs.
Do not forget to say if you are interested in a commercial release as I've explained at the beginning of this post.

Screenshots:



Dropbox Link:
Click!

[Bugala]

By quicklook i didnt get what is the purpose of this program? By pictures it looks like another Royal MUI? Except that it would work on all platforms. Is that the idea, or is it something else?

[Allanon]

Hi Bugala,
HGui is a framework that allow Hollywood users to build interfaces and GUIs easily, the root concept is like MUI but as you have noticed with this library GUI development became available an all Hollywood supported platforms while MUIRoyale can be used only on Amiga-like systems.
Moreover the skin system is very flexible and allow the creation of complex skins with multiple layers, so, for example, you can easily skin a button using an image with:
- first layer : a gradient
- second layer : a image with an alpha channel (so you can see the gradient in the previous layer
- third layer : a bevel box with transparent fill color to give a 3d effect.
This is just an example because a skin can be composed by only a single layer. Using the cache system all this stuff will not be rendered each time a gadget is refreshed but will be cached into a brush to speed up drawing operations and keep the interface as fast and reactive as possible.

Here is an example of the code used to build the main menu of the demo application I've published in the previous post:

Code: Select all

  Global app = {}
  app.Windows = {}
  app.Gadgets = {}
  app.Windows.Main = HGui.Window:new(
    { title    = "HGui Showcase (19.03.2015)",
      name     = "main",
      position = { x = #CENTER, y = #CENTER },
      size     = { w = 320, h = 480 },
      sizemax  = { w = 320, h = 1024 }
      })

  HGui.SetAutoRendering(False)
  app.Gadgets.labTitle = HGui.Gadget:new(#HGUI_IMAGE_GADGET, { Source = "HGui_ShowCaseResources/showcase.png", Alpha = #NONE, Mode = 4, Align = #CENTER, BorderColor = $DDDDDD })
  app.Gadgets.GrpTop   = HGui.Gadget:new(#HGUI_GROUP_GADGET, { Caption = { "Demos" }, Group_LabelGap = 10, Group_LabelSide = #HGUI_ALIGN_LEFT })
  app.Gadgets.butTestWindows1 = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Some colorful windows", Actions = { OnPushed = HGui.Test_Windows_01 } })
  app.Gadgets.butTestWindows2 = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Show window background types",      Actions = { OnPushed = HGui.Test_Windows_02 } })
  app.Gadgets.butTestGadgets1 = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Show [color=#RED]all[/color] supported classes (800x600)", Actions = { OnPushed = HGui.Test_GUI } })
  app.Gadgets.GrpBot   = HGui.Gadget:new(#HGUI_GROUP_GADGET, { Caption = { "Benchmarks" }, Group_LabelGap = 10, Group_LabelSide = #HGUI_ALIGN_LEFT })
  app.Gadgets.butTestBox1 = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Box class", Actions = { OnPushed = HGui.Test_BoxTesting } })
  app.Gadgets.butTestHDiv1 = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "HDivider class", Actions = { OnPushed = HGui.Test_HDividerTesting } })
  app.Gadgets.butTestVDiv1 = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "VDivider class", Actions = { OnPushed = HGui.Test_VDividerTesting } })
  app.Gadgets.butTestLab1  = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Label class", Actions = { OnPushed = HGui.Test_LabelTesting } })
  app.Gadgets.butTestGrp1  = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Group class", Actions = { OnPushed = HGui.Test_GroupTesting } })
  app.Gadgets.butTestGrpC  = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Checkbox Group class", Actions = { OnPushed = HGui.Test_GroupCheckBox } })
  app.Gadgets.butTestGrpR  = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Radio Group class", Actions = { OnPushed = HGui.Test_GroupRadio } })
  app.Gadgets.butTestButt  = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Button class", Actions = { OnPushed = HGui.Test_ButtonTesting } })
  app.Gadgets.butTestSwit  = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Switch class", Actions = { OnPushed = HGui.Test_SwitchTesting } })
  app.Gadgets.butTestScrB  = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Scrollbar class", Actions = { OnPushed = HGui.Test_ScrollbarTesting } })
  app.Gadgets.butTestProgW = HGui.Gadget:new(#HGUI_BUTTON_GADGET, { Caption = "Progress Window shortcut", Actions = { OnPushed = HGui.Test_ProgressWindow } })
  
  app.Gadgets.GrpTop:layoutSet(
    { gadgets = { app.Gadgets.butTestWindows1,
                  app.Gadgets.butTestWindows2,
                  app.Gadgets.butTestGadgets1 },
      gap     = 2,
      borders = { top = 2, bottom = 2, left = 2, right = 2 } }, True)

  app.Gadgets.GrpBot:layoutSet(
    { gadgets = { app.Gadgets.butTestBox1,
                  app.Gadgets.butTestHDiv1,
                  app.Gadgets.butTestVDiv1,
                  app.Gadgets.butTestLab1,
                  app.Gadgets.butTestGrp1,
                  app.Gadgets.butTestGrpC,
                  app.Gadgets.butTestGrpR,
                  app.Gadgets.butTestButt,
                  app.Gadgets.butTestSwit,
                  app.Gadgets.butTestScrB,
                  app.Gadgets.butTestProgW },
      gap     = 2,
      borders = { top = 2, bottom = 2, left = 2, right = 2 } }, True)
      
  app.Windows.Main.RootGadget:layoutSet(
    { gadgets = { app.Gadgets.labTitle, 
                  app.Gadgets.GrpTop,
                  app.Gadgets.GrpBot },
      weights = { -0.15, 0.20, 0.65 },
      gap     = 2,
      borders = { top = 2, bottom = 2, left = 2, right = 2 } }, True)
  HGui.SetAutoRendering(True)
  
  app.Windows.Main:render()

While the interface has been initialized all incoming events will be detected and handled in a Repeat/Forever loop where a WaitEvent() command has been placed.

If you need more informations just ask

[Bugala]

Basically why i havent even tried MUI royale, have been its lack of support for other but Amiga platforms. Hence this could interest me.

One thing that interests me if it can how easily be used with hollywood. As example. Lets say that I make a monopoly board game with Hollywood, and it plays in full screen. However, one thing I could see where this could be useful is if i would want to have a history log in that game. That player could at any point in game display (as well as save) a text file, which would be showing every move that have been made during the game.

Now would this be easy to make with this HGui in such case that it looks like it is integrated into the game? Instead of looking like, say when you use "RequestFile()" command, you can see that it is using outside command that was not implemented by programmer to the game as it looks so different and clumsy.

Also, I suppose you do have things like textfields etc. that end user can both write to, as well as click on middle of word to get the cursor to the middle of word to fix hes mispelling?

Or by other words, there could be option to open text files to be edited with the simple, move where ever you want in the text, and add new characters where ever you want in the text, instead of only to end or beginning or something else not so convenient?

[airsoftsoftwair]

I've just had a look at it and it's really an impressive toolkit and an excellent solution for creating platform-independent GUIs with Hollywood because they'll look and feel the same on every platform. It could also be used on embedded systems like the Raspberry Pi for straight-forward and portable GUI solutions.

@Allanon: You should also post this at amigaworld.net to spread the word and get some more attention which this project truly deserves. Keep up the good work!

[Allanon]

@Bugala
sorry but I have not completely understood your request, HGui actually have editable text fields, single o multiline but does not (yet) react to mouse click to position the cursor, but already have all other features like text selection, copy, cut and paste. For sure you can build borderless requsters with a skin that is coherent with your game style.
From your last sentences I've think you are looking for a text edit control, well, as I've said above some features are missing but it's only a question of time, the module that handle text fields is separated so maybe you could be interested only on this part.

@airsoftsoftwair
Thank you for the feedback, and for the suggestion

[airsoftsoftwair]

And maybe also post about it on the Hollywood mailing list

[Bugala]

Sounds like something i would be interested in, and even willing to pay something for it.

The main thoughts that come to my mind where i would have use are following:

1. In a game, you could use this to let players enter their names. Right now this is a shortcoming in Hollywood, that you either can do it easily the ugly way "RequestString()", or then you have to take a whole load of trouble to creating input system yourself.

2. I have been having this idea about making so called passion test, and one reason why i havent done it is, that basically it would be somewhat simple to make, except for the lack of suitable things. For example one part of the test is basically to write up "write your 50th birthday party speech". Now this is something that would need some simple notepad kind of thing, or in HTML terms, TEXTAREA field that you can also at later point edit, for example remove some sentence from middle, or add more to the middle of text. Sounded to me like you are anyway in future planning to add this kind of TEXTAREA kind of thing at later point, right?

3. I have lately been moving more and more towards making my own simple scripting languages in my programs. For example instead of giving enemies small scripting language that thye follow: as example could be:

Code: Select all

normal:
MOVE right(100)
MOVE down(100)
MOVE left(100)
MOVE up(100)

encounter:
SHOOT

So far i have always been thinking of using these simply by using notepad(or any other simple text editor) to write these, but sounds to me that with help from your HGui it would make it possible for me to make an actual Graphic editor where i would use mouse to move enemies to their start locations, then by double clicking one of the enemies, it would open this small editor window where i could write my script for that specific enemy.

Have i understood right? And did you understand what i was asking?

[Allanon]

Sounds like something i would be interested in, and even willing to pay something for it.

The main thoughts that come to my mind where i would have use are following:

1. In a game, you could use this to let players enter their names. Right now this is a shortcoming in Hollywood, that you either can do it easily the ugly way "RequestString()", or then you have to take a whole load of trouble to creating input system yourself.

Yes, you can do it creating an HGui window and adding a text gadget and "OK" and "CANCEL" buttons.

2. I have been having this idea about making so called passion test, and one reason why i havent done it is, that basically it would be somewhat simple to make, except for the lack of suitable things. For example one part of the test is basically to write up "write your 50th birthday party speech". Now this is something that would need some simple notepad kind of thing, or in HTML terms, TEXTAREA field that you can also at later point edit, for example remove some sentence from middle, or add more to the middle of text. Sounded to me like you are anyway in future planning to add this kind of TEXTAREA kind of thing at later point, right?

Yes, actually as I said, there is action with the mouse in the text gadget but I will add it, I've also planned to add optional line numbers, a scrollbar and a basic syntax hilightingwill be available as optional features.

3. I have lately been moving more and more towards making my own simple scripting languages in my programs. For example instead of giving enemies small scripting language that thye follow: as example could be:

Code: Select all

normal:
MOVE right(100)
MOVE down(100)
MOVE left(100)
MOVE up(100)

encounter:
SHOOT

So far i have always been thinking of using these simply by using notepad(or any other simple text editor) to write these, but sounds to me that with help from your HGui it would make it possible for me to make an actual Graphic editor where i would use mouse to move enemies to their start locations, then by double clicking one of the enemies, it would open this small editor window where i could write my script for that specific enemy.

Another gadget class that was not mentioned in the main post, but that I will include in the toolkit is the canvas gadget, with this one you will be able to draw objects freely inside of it, this gadget will listen to mouse and keyboard events and will call functions attached to it so people can do whatever they want. So it will be possible for you to add your graphic objects and move accordingly to the user input.

[Bugala]

Sounds like something i would be interested in paying something even. I would say, that right now I would be willing to pay at least 20 euros. When I get the idea better etc. then I could be willing to pay more, even much more.