[docs] better words

This commit is contained in:
Matthias Richter 2018-06-21 23:46:58 +02:00
parent 2f479ba30a
commit 0a723777ed
2 changed files with 49 additions and 25 deletions

View file

@ -5,7 +5,7 @@ Before actually getting started, it is important to understand the motivation
and mechanics behind SUIT: and mechanics behind SUIT:
- **Immediate mode is better than retained mode** - **Immediate mode is better than retained mode**
- **Layout does not care about widgets** - **Layout should not care about content**
- **Less is more** - **Less is more**
Immediate mode? Immediate mode?
@ -68,11 +68,11 @@ to design a user interface.
SUIT is not a complete GUI library: It does not take control of the runtime. SUIT is not a complete GUI library: It does not take control of the runtime.
You have to do everything yourself [1]_. You have to do everything yourself [1]_.
**SUIT is not good at word processors!** **SUIT is not good at processing words!**
Hello, World Hello, World!
------------ -------------
SUITing up is is straightforward: Define your GUI in ``love.update()``, and SUITing up is is straightforward: Define your GUI in ``love.update()``, and
draw it in ``love.draw()``:: draw it in ``love.draw()``::
@ -96,15 +96,19 @@ draw it in ``love.draw()``::
suit.draw() suit.draw()
end end
This will produce this UI (after clicking the button): This will produce this UI:
.. image:: _static/hello-world.gif .. image:: _static/hello-world.gif
As written above, the two widgets are each created by a function call The two widgets (the button and the label) are each created by a function call
(:func:`suit.Button <Button>` and :func:`suit.Label <Label>`). The first (:func:`suit.Button <Button>` and :func:`suit.Label <Label>`). The first
argument to a widget function is always the "payload" of the widget, and the argument to a widget function always defines the *payload* of the widget.
last four arguments define the position and dimension of the widget. The Different widgets expect different payloads.
function returns a table that indicates the UI state of the widget. Here, both :func:`suit.Button <Button>` and :func:`suit.Label <Label>` expect a
string.
The last four arguments of a widget function define the position and dimension
of the widget.
The function returns a table that indicates the UI state of the widget.
Here, the state ``hit`` is used to figure out if the mouse was clicked and Here, the state ``hit`` is used to figure out if the mouse was clicked and
released on the button. See :doc:`Widgets <widgets>` for more info on widget released on the button. See :doc:`Widgets <widgets>` for more info on widget
states. states.
@ -112,8 +116,8 @@ states.
Mutable state Mutable state
------------- -------------
Widgets that mutate some state - input boxes, checkboxes and sliders - receive Widgets that mutate some state - input boxes, checkboxes and sliders - expect
a table argument as payload, e.g.:: a table as their payload, e.g.::
local slider = {value = 1, min = 0, max = 2} local slider = {value = 1, min = 0, max = 2}
function love.update(dt) function love.update(dt)
@ -131,8 +135,7 @@ Options
------- -------
You can define optional, well, options after the payload. Most options affect You can define optional, well, options after the payload. Most options affect
how the widget is drawn. For example, to align the label text to the left in how the widget is drawn. For example, to align the label text to the left::
the above example, you would write::
local slider = {value = 1, max = 2} local slider = {value = 1, max = 2}
function love.update(dt) function love.update(dt)
@ -148,8 +151,8 @@ the theme. See :doc:`Widgets <widgets>` for more info on widget options.
Keyboard input Keyboard input
-------------- --------------
The :func:`input widget <Input>` requires that you forward the ``keypressed`` The :func:`Input` widget requires that you forward the ``keypressed`` and
and ``textinput`` events to SUIT:: ``textinput`` events to SUIT::
local input = {text = ""} local input = {text = ""}
function love.update(dt) function love.update(dt)
@ -168,7 +171,7 @@ and ``textinput`` events to SUIT::
.. image:: _static/keyboard.gif .. image:: _static/keyboard.gif
The slider widget can also react to keyboard input. The mouse state is The :func:`Slider` widget can also react to keyboard input. The mouse state is
automatically updated, but you can provide your own version of reality if you automatically updated, but you can provide your own version of reality if you
need to. See the :doc:`Core functions <core>` for more details. need to. See the :doc:`Core functions <core>` for more details.
@ -185,7 +188,7 @@ you can directly pass as the final four arguments to the widget functions.
If you have ever dabbled with `Qt's <http://qt.io>`_ ``QBoxLayout``, you If you have ever dabbled with `Qt's <http://qt.io>`_ ``QBoxLayout``, you
already know 89% [2]_ of what you need to know. already know 89% [2]_ of what you need to know.
The first example can be written as follows:: Hello, World! can be rewritten as follows::
suit = require 'suit' suit = require 'suit'
@ -234,10 +237,10 @@ Refer to the :doc:`Layout <layout>` documentation for more information.
Widget ids Widget ids
---------- ----------
Each widget is identified by an ``id`` [4]_. Internally, this ``id`` is used t Each widget is identified by an ``id`` [4]_. Internally, this ``id`` is used to
figure out which widget should handle user input like mouse clicks and keyboard figure out which widget should handle user input like mouse clicks and keyboard
presses. presses.
Unless specified otherwise, the ``id`` is the same as the first argument, i.e., Unless specified otherwise, the ``id`` is the same as the payload, i.e.,
the ``id`` of ``Button("Hello, World!", ...)`` will be the string the ``id`` of ``Button("Hello, World!", ...)`` will be the string
``"Hello, World!"``. ``"Hello, World!"``.
In almost all of the cases, this will work fine and you don't have to worry about In almost all of the cases, this will work fine and you don't have to worry about
@ -332,10 +335,10 @@ You can also do minimally invasive surgery::
GUI Instances GUI Instances
------------- -------------
Sometimes you might feel the need to separate parts of the GUI. Maybe the Sometimes you might feel the need to separate parts of the GUI. Maybe certain
widgets should have a different theme, maybe certain should always be drawn should always be drawn before or after other UI elements, or maybe you don't
before or after other UI elements, or maybe you don't want the UI state to want the UI state to "leak" (e.g., from a stacked pause gamestate to the main
"leak" (e.g., from a stacked pause gamestate to the main gamestate). gamestate).
For this reason, SUIT allows you to create GUI instances:: For this reason, SUIT allows you to create GUI instances::

View file

@ -12,14 +12,35 @@ You may also download the sourcecode as a `zip
<http://github.com/vrld/SUIT/zipball/master>`_ or `tar <http://github.com/vrld/SUIT/zipball/master>`_ or `tar
<http://github.com/vrld/SUIT/tarball/master>`_ file. <http://github.com/vrld/SUIT/tarball/master>`_ file.
Using `Git <http://git-scm.com>`_, you can clone the project by running:: Otherwise, use `Git <http://git-scm.com>`_::
git clone git://github.com/vrld/SUIT git clone git://github.com/vrld/SUIT
Once done, you can check for updates by running:: Update::
git pull git pull
Hello, Suit::
suit = require 'suit'
local show_message = false
function love.update(dt)
-- Put a button on the screen. If hit, show a message.
if suit.Button("Hello, World!", 100,100, 300,30).hit then
show_message = true
end
-- if the button was pressed at least one time, but a label below
if show_message then
suit.Label("How are you today?", 100,150, 300,30)
end
end
function love.draw()
suit.draw()
end
Read on Read on
------- -------