## [Library] DOMy - A DOM-like GUI framework

Karai17
Party member
Posts: 909
Joined: Sun Sep 02, 2012 10:46 pm

### [Library] DOMy - A DOM-like GUI framework

I am currently looking for testers!

DOMy is a DOM-like GUI framework designed from the ground up to be pleasant and intuitive to use. DOMy enables users to build functional GUIs outside of your game using a custom markup, style, and script API written in pure Lua.

Current Features
• Markup API
• Style API
• Script API
• Box Model
• Built-in Common Element Types
• Callback System
• Widget System
• Physical Inputs from mice, keyboards, and gamepads
Planned Features
• Flexible Box Model
• GUI Animations & Transforms
• Virtual Inputs from code
• Density/Scale Independent Pixels (dp/sp)
This project was created for the LÖVE community and I would like to hear any questions, concerns, feature requests, etc. You can post here or on the official GitHub repo.

The documentation for DOMy can be found here. It is currently quite sparse, but I will be updating it over time.
Last edited by Karai17 on Sat May 02, 2015 12:40 pm, edited 14 times in total.
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé
Party member
Posts: 135
Joined: Fri Oct 15, 2010 10:58 am

### Re: [Request] Input on design spec of new GUI library

A HTML like GUI could work but I think its one magnitude of complexity too high for me. On the other hand people are used to HTML. I don't have much input on its design.

I also am working on a GUI library, I don't have a spec but I have a workflowy insanity map (beware he who enters here!).

The idea behind it is best described by step by step process.
First the usual require,load, draw with some interesting features we will talk about later. What is important is load must have the path to the GUI graphics.
Once you do that when you fire the game by using Ctrl+Shift+U you enter the editor mode. The editor has two phases the resource phase, and the design phase.

In the Resource phase it will import graphics from your folders do some sorting and throws it on screen, The graphics elements can be moved about to arrange them in place.
Then you select a basic element(image,button,bar,panel,etc) from the left side tool panel and drag select all the graphics part of that element, configure how that element works and add more graphics for different states(default,hover,pressed,etc)
Once you do this you will have a list of basic elements on the right side panel.

You then go to the design phase here you use the basic elements to make more complex elements like spinners(Text area,arrows,maybe a scroll bar?), combobox ,inventory and generally make your interface. The elements will be arranged in a hierarchical list.
You can use controllers to manage your interface like horizontal lines to align your elements too or arrays,grids,corners. They are also part of the hierarchy so you can make it as global or local to the element as you like.
Th basic elements can be stretched and handles scaling to the resolution you want without filtering. Everything is relative to its parent element or controller.

After you make the interface you want and exit the edit mode it will generate a new script with all the classes you made, including setting the default resources for the basic classes from the first phase.

In the main game code you simply initialize the generated class you want with screen = GenClass:new(). It will add it to a global hierarchy table.
It will automatically initialize children instances by the name it had in edit mode element hierarchy list.

To program the interface you can either modify the classes from the generated script or use the instances to override the functions.
You can even script the interface programmatically without the visual editor.

For handling mouse/keyboard focus, draws or updates you either use the default library function for the whole global hierarchy or use individual elements that are their own branch.

For example in library.draw(branch) the branch can either be a table full of elements, a element that has its own children, or a bunch of arguments with either tables or elements. Or you can modify the global hierarchy to handle that.
All elements can be disabled in which case they don't get evaluated and their children.

That is pretty much it, if you find some interesting things I hope it helps your project, if anyone is interested I will make another thread since I don't want to derail this thread, otherwise I will make slow(crawling) steady(ha!) progress(since I am lazy and incompetent with code).
I use Workflowy but you can check out Dynalist as its the better offer.
Germanunkol
Party member
Posts: 712
Joined: Fri Jun 22, 2012 4:54 pm
Contact:

### Re: [Request] Input on design spec of new GUI library

Off the top of my head, things I'd like to see (I've only skimmed through what you wrote, maybe I missed something that's already in there - if so, sorry!):
• When defining a new button or function, let the user define a "shortcut" function, which triggers the event of that button when the given key is pressed.
• Input box should work with all unicode characters.
• (Maybe) "Table" object, which allows columns and rows with other widgets (usually text boxes) inside.
• (Maybe) A "generic" "select next object" kind of functionality, that automatically switches to the next button on some keyboard input. For example: When I press "right" or "D", I would like the next button to get selected. This would make keyboard based menus and UIs very simple to build.
As for the design:
Some people like adding widgets from within their code, others like to use some sort of xml files or similar. For the latter, I would suggest looking at what other libraries have done and use something similar, because that's what people are used to. MyGUI is a popular framework, for example - they use XML, iirc.

Either way, one design pattern I liked was one I once saw (I think it was in an Ogre3D UI library) where integer positions would define a position as a fixed pixel position and floating point values between 0 and 1 would define relative positions, within the parent widget. Both setups allowed "autoresizing", i.e. adapting to the parent's widget's size when it's resized.

Good luck with this! If we can contribute more (maybe write code for some widgets once you've got the basics down), let us know!
trAInsported - Write AI to control your trains
Bandana (Dev blog) - Platformer featuring an awesome little ninja by Micha and me
GridCars - Our jam entry for LD31
Germanunkol.de
Karai17
Party member
Posts: 909
Joined: Sun Sep 02, 2012 10:46 pm

### Re: [Request] Input on design spec of new GUI library

@adrix89: What do you mean by one magnitude of complexity too high? My initial thinking is that the UI could be written in some form of Lua markup OR scripted programatically (or a mixture of both).

@Germanunkol:

1) What do you mean by "shortcut function"?
2) That depends on LOVE's implementation of Unicode, but I absolutely agree.
3) A table/grid would allow for other UI elements inside, yes.
4) If you mean tab-indexing, I plan to allow for both defined (programmer decides which order objects are in) and undefined (system tries to smartly decide). Tab indexing should work for all four directions, not just a single linear path.
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé
Party member
Posts: 135
Joined: Fri Oct 15, 2010 10:58 am

### Re: [Request] Input on design spec of new GUI library

Karai17 wrote:What do you mean by one magnitude of complexity too high?
If I have to write more then two lines to make a button and add functionality to it its probably too much.
Well that is not really true,I would have to see examples where you handle a real interface.

Which reminds me, how about having a rough mockup on how a user would use your library?
For example how a user would create a character screen with inventory and stats?(the big one that is most requested)
How a user could make a custom spinner(text with validated numbers, arrow buttons) if they don't have them as default?
How a user can create a load bar that has multiple fills of different color for different parts?
This are examples I use to give me an idea of what strange things a user may require.

Also a GUI should be able to use all graphic elements from this
I use Workflowy but you can check out Dynalist as its the better offer.
Karai17
Party member
Posts: 909
Joined: Sun Sep 02, 2012 10:46 pm

### Re: [Request] Input on design spec of new GUI library

If you check out the markup.lua file in the repo, it gives an example of what LOVE's homepage would look like in my syntax. Not the best example, but it's something. If you want to show me a screen you'd like an example of, I can try to write one up. A screenshot from any game would do.

Edit: It's worth noting that with LoveFrames, you need to programatically define every non-default property of every individual object you create. So if you want to create 20 buttons with a width of 300px, that's going to be a minimum of 40 LOC.

My current spec suggests 20 LOC + a defined style in a styles.lua file that all buttons can inherit. I have not yet defined the scripts spec but it will be pure Lua with some GUI bindings. This will allow the following:

Code: Select all

local styles = require "styles"
local strings = require "strings"
local button_list = dom.get_object_by_id("ButtonList")

for i=1, 20 do
local button = { "button", class="NewButton", on_click=function() end, strings.buttons[i] }
button_list.append(button)
end

This would reduce LoveFrame's 40 LOC and my markup's 20 LOC to 4 LOC and some overhead.
Last edited by Karai17 on Sun Jan 11, 2015 8:10 pm, edited 1 time in total.
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé
Party member
Posts: 135
Joined: Fri Oct 15, 2010 10:58 am

### Re: [Request] Input on design spec of new GUI library

Recreating the examples from these two would be a good start.

http://opengameart.org/content/golden-u ... er-edition
http://opengameart.org/content/golden-ui
I use Workflowy but you can check out Dynalist as its the better offer.
Foxcraft
Prole
Posts: 49
Joined: Sat Mar 22, 2014 8:56 pm

### Re: [Request] Input on design spec of new GUI library

I've been thinking of trying out some of the available GUI libraries and haven't really yet, but something that can be done more simply and easily regardless is definitely welcome in my mind. I just know that when I was first looking around at them when I first started using LÖVE, I ended up just writing up my own stuff. (Though admittedly, I seem to have a preference of just making my own things so that I know them like the back of my hand. Trying to break that and maybe make life a little easier. )

I think the idea of allowing a more Lua way and also an HTML-like way is interesting. It reminds me of how JavaFX works. You could write the GUI in Java or in FXML. I don't think I'd particularly use the latter option, but if the work for it is willing to be done and someone might use it, that's cool.

I like adrix89's idea of having a GUI interface that helps you make your own interface and then spits out the code you need. It'd also be awesome if it could load such code back into itself. Even if it wouldn't allow you to edit it, to just be able to easily view what you make entirely by hand or simply with some added code adjustments would be nice.
Karai17
Party member
Posts: 909
Joined: Sun Sep 02, 2012 10:46 pm

### Re: [Request] Input on design spec of new GUI library

A GUI tool to define and export markup would be interesting but I believe that is a bit out of scope, at least for now. I want to nail down the specification for this before I even consider implementing anything.
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé
Foxcraft
Prole
Posts: 49
Joined: Sat Mar 22, 2014 8:56 pm

### Re: [Request] Input on design spec of new GUI library

Yeah, probably a bit too early for that much. One step at a time.

### Who is online

Users browsing this forum: No registered users and 10 guests