Tutorial
DSP
KUIML
How-to
Scripts
KUIMLTutorialDisplaying text
March 30, 2021

Displaying text

So let's output some text in our GUI. We do it like this:

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <SKIN>
  3. <TEXT value="Hello world!" />
  4. <TEXT value="I'm happy to be here!" />
  5. <TEXT value="This is a nice place!" />
  6. </SKIN>

Here and in the examples below, we're saving this code as .kuiml with the same base name as our DSP script file. We're using LM Skin, but these examples should work in the default skin as well.

We can also place several TEXT elements in a single line like this:

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <SKIN>
  3. <ROW>
  4. <TEXT value="This" />
  5. <TEXT value=" is " font_escapement="90" v_offset="3" font_size="+4" text_color="#11AA00"/>
  6. <TEXT value="great!" font_weight="bold" text_color="#CC5500" font_face="Lato" font_size="25" v_offset="-2" />
  7. </ROW>
  8. </SKIN>

TEXT element inherits text/font properties from the CELL, so you can check it out to see what attributes for the text are available.

The ROW element is a shortcut for <CELL layout_type="row">. There are three layout types: column (default), row, and layer_stack (which put elements one over another like layers). Every CELL element is in one of these modes. 

SKIN is like a CELL element also, so instead of adding ROW in our example we could just add layout_type="row" to the SKIN. But let's make an example with a layer_stack instead:

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <SKIN layout_type="layer_stack">
  3. <TEXT value="GREAT" font_weight="bold" text_color="#CC5500" font_face="Arial Black" font_size="80" />
  4. <TEXT value="it is" font_size="20" text_color="#FFFFFF" />
  5. </SKIN>

Note about multiline text

In official KUIML examples, you can find attributes like "multiline" or "word_break", supposed to make your text multilined. However, they were deprecated along the way, and don't work in modern KUIML. 

For multilined text, we have to use some tricks that we hopefully discuss later. 

Changing text on the fly

Comments