GUI

[andrew.lundell]

This gui has been very useful to me.

One question, though. Is there a way to change the font size (or style) of a widget through the layout files?

[ibisum]

In the patch that I will submit this week, we have added the ability to apply a text style to any GUI element .. its not currently possible in the existing version, but is an easy thing to add if you want to DIY instead of wait for our patch.

[joarb]

First of all, thanks Derick for a great framework. Nice job!

I'm implementing moaigui in tandem with the state-manager from the WolfClicker tutorial. It's all pretty sweet so far, however, I've run into a little something that I don't know how to resolve.

Since the state-manager requires me to pass all layers to it in order for it to behave nicely, I've removed the adding of the layer created by gui.GUI to the MOAIRenderMngr to avoid any rendering conflicts. In other words; this is how my refreshRenderTable in moaiguis layermgr.lua looks like:

Code: Select all

1. local function refreshRenderTable(layerList)


2.         --MOAIRenderMgr.setRenderTable(layerList)


3. end

Otherwise, I'm following the samples pretty closely. I've managed to pass in user input from the event loop of the state-manager framework, so buttons are pressed, hovered, etc.

Here's my event loop:

Code: Select all

1. mainMenu.onInput = function ( self )


2.         local x, y, tapCount = inputmgr:getTouch ( )


3.         mainMenu.g:injectMouseMove ( x, y )


4.         if ( inputmgr:down ( ) or inputmgr:isDown ( ) ) then


5.                 mainMenu.g:injectMouseButtonDown ( globalData.inputconstants.LEFT_MOUSE_BUTTON )


6.         else


7.                 mainMenu.g:injectMouseButtonUp ( globalData.inputconstants.LEFT_MOUSE_BUTTON )


8.         end


9. end

where inputmgr is the inputmgr as seen at https://github.com/moai/moai-dev/blob/m ... anager.lua and mainMenu.g is the handle to the initialized gui engine, i.e. the result from gui.GUI.

Unfortunatley, I'm not able to scroll the elements in a widgetlist. (Or more precisely, sometimes the list is scrolled a few pixels, but never by any significant amount - and certainly not like in the samples.) So the question becomes: is it possible to pass to moaigui something similar to moais isDown? Or is there another way to achieve scrolling a widgetlist by dragging of the scrollbar thumb? Any help is greatly appreciated. Thanks!

[ibisum]

I think the problem is you're removing moaigui's layer from the render list. You have to add it, if you've already got one elsewhere, or go in the other direction, and add another Layer array to the RenderTable. Without inclusion in this array, moaiguis layers won't be rendered. And without inclusion in the render loop, updates (such as are necessary in scrolling) won't be visible.

Another thing is the issue of input events and hit-testing, and so on. moaigui needs to be layer 1 in the scene - see the readme.txt for why this is so, and how to retrieve the gui layer when you need it. You can of course add other layers to the RenderMgr, its just that gui has to be layer 1.

[joarb]

Thank you for your answer ibisum! It makes a lot of sense. I take it from your answer that there is no way to get scrolling work from an external event loop. Since I got the injection of position/mouse clicks to work so easily, and subsequently hovering and button clicks to work fairly easy, I was hoping scrolling would be just as easy.

I got the scrolling to work when I added the layer to the moaigui layermgr, so I'm going to explore that avenue a little further. Thanks again!

[ibisum]

Glad you got it sorted joarb! Hope you'll share more details with your progress as you make it.

[andrew.lundell]

Hmm... I seem to have a problem with click detection.

The buttons work fine. But the "WidgetList" usually (but not always) gives me an off-by-one error. (To select, or pass a click event to the 3rd element, I have to click on the 2nd element. One slot above.)

As far as I can tell, _partition:propListForPoint(..) is returning the wrong values, but I can't fathom why.

Is anyone else having this trouble?

[derickdong]

What version of MOAI are you using? In the past, there had been problems with values returned by that function. As far as I can tell, though, the most recent versions are working properly. Also, what version of the GUI are you using? Are you using the project that's included with the MOAI download? I don't recommend using that; instead, download the project using the link in this thread. Are you running the examples that come with the project, or is this some of your own code? If your own, would it be possible to see the code that's giving you the problem?

[andrew.lundell]

I'm using the version of MOAIGui that came with Moai1.1. Haven't upgraded to 1.2 yet.

I'm using my own code. I don't seem to notice the problem in the demos, but I also notice that the demos have a LOT of white space between lines in the list, I wonder if that has anything to do with it.

Here is how I'm adding items to the list ...

Code: Select all

1.         for ii = 1,5 do


2.                 row = wlist:addRow()


3.                 row:getCell(1):setImage( resources.getPath("check box.png"))


4.                 row:setDim(90,5)


5.                 row:getCell(2):setText( "Overdue ToDo item #" .. ii )


6.                 row:getCell(2):setTextAlignment(row:getCell(2).TEXT_ALIGN_LEFT, row:getCell(2).TEXT_ALIGN_CENTER)


7.         end

And in the layout ...

Code: Select all

1.                         widgetlist1 = {


2.                                 widget = "widget list",


3.                                 pos = {0, 0},


4.                                 dim = {100, 90},


5.                                 selectionImage = "selection image.png",


6.                                 maxSelect = 1,


7.                                 rowHeight = 6,


8.                                 columns = {


9.                                         {"X", 5 , "image" },


10.                                         {"Todo List", 65, "label"},


11.                                 },


12.                         },

Thanks for any help.

[andrew.lundell]

Hmm. I'm noticing that text boxes are occasionally showing the same problem. So I may have some larger problem.

[derickdong]

It seems there was a problem with the way the rect was being set for the textboxes used to display text. Frankly, I'm a little surprised text was being displayed at all. Download the project from here, and see if it works for you. I didn't really use 1.1, as it caused too many problems with my other project. It was primarily tested against 1.0, and I've done a bit of testing with 1.2, so I imagine there won't be any problems with 1.1.

https://github.com/derickd/moaigui/downloads

[andrew.lundell]

This fixes a lot! Thank you very much!

One final question, is it possible to make a multi-line edit box?

To be honest, I can't find what's stopping it from being multi-line, so I'm at a loss what change to make.

[ibisum]

Derick: Shouldn't this fix (to text.lua):

Code: Select all

1.  


2. diff --git a/gui/text.lua b/gui/text.lua


3. index b19c1c4..4ebfcab 100644


4. --- a/gui/text.lua


5. +++ b/gui/text.lua


6. @@ -32,6 +32,11 @@


7.         VERSION: 0.2


8.         MOAI VERSION: v1.0 r3


9.  


10. +       UPDATED: 6-18-12


11. +       MOAI VERSION: v1.2


12. +


13. +       - Was not properly setting the rect for textbox in setRect()


14. +


15.         NOTES


16.         - MOAITextBox does not seem to handle setVisible properly, so we blank out the


17.           string when hiding, and restore it when showing.


18. @@ -104,7 +109,7 @@ function _M.Text:setRect(width, align)


19.         if (nil ~= self._textStyle) then


20.                 local scale = self._textStyle:getSize()


21.                 self._height = scale + scale / 6


22. -               self._textBox:setRect(0, self._height, self._width, 0)


23. +               self._textBox:setRect(0, -self._height, self._width, 0)


24.         end


25.  end


26.  

.. be this instead?

Code: Select all

1.  


2.  


3. function _M.Text:setRect(width, align)


4.         self._width = width


5.  


6.         if (nil ~= self._textStyle) then


7.                 local scale = self._textStyle:getSize()


8.                 local lines = self:getLines()


9.                 self._height = scale + scale / 6


10.                 self._textBox:setRect(0, self._height * lines, self._width, 0)


11.         end


12. end


13.  

??

[derickdong]

One final question, is it possible to make a multi-line edit box?.

No, edit boxes do not currently have that capability.

@ibisum
Is the function getLines something you've added? I don't seem to have that in my version. What does it do?

When working on this fix, I turned on textbox debug lines, by adding the following code:

MOAIDebugLines.setStyle ( MOAIDebugLines.TEXT_BOX, 1, 1, 1, 1, 1 )

Previously, the text wasn't inside the debug line box. Instead, the box appeared directly above the text, which is what was screwing up the hit detection. With the change I made, the text now correctly appears inside the debug line box.

[ibisum]

Sorry derick, I've gotten a bit confused with all our changes to moaigui in the last few weeks .. and haven't really sorted out what is original moaigui code and what is stuff that was added by our team as we worked on the Nichtraucher app.

I will prepare a pull request with my changes - including getLines() as well as the loadLayoutFromData() method I mentioned elsewhere (which is very, very useful when dealing with multiple input forms..). Stay tuned, patch is imminent..

[ibisum]

I just wanted to report in that I've submitted a pull request for our changes to the moaigui framework, which includes a number of new features:

* linegraph widget added to the project (you're welcome!
* methods added to allow the loading of a layout and stashing as a data, for ease of switching between multiple gui layouts
* multilayoutdemo.lua added to project to demonstrate a) switching between multiple layouts, and b) the linegraph widget
* textStyle property now added to all widgets - specify a base textstyle, or use a custom one from the theme

Hope this contribution is of use, and I hope you like the pull request derick!

My fork with these changes (until derick merges the pull request) is available here:

https://github.com/seclorum/moaigui