<!--[doc]
Surge skins to date have rendered the labels in SVGs as paths. Surge does install the Lato font with
an installation, though, and in Surge 1.8, you can use that font to draw labels anywhere on the UI.
This would allow you, in theory, to have text-free graphical assets for the background and render
labels as strings. Button assets would still require text-in-SVGs for now.

In Surge 1.8, there is minimal control over the positioning of the modulation section in the UI.
You can adjust the x and y position of the entire panel, or the color of an individual element
using the mechanism described in Tutorial 02 and 03 and the labels from the skin inspector.
In Surge 1.9, we expect to expand the ability to reponsition modulation source controls.
[doc]-->
<surge-skin name="05 Labels And Modulators" category="Tutorials" author="Surge Synth Team" authorURL="https://surge-synth-team.org/" version="2">
  <globals>
    <image id="ramen" resource="SVG/ramen.svg"/>
  </globals>
  <component-classes>
  </component-classes>
  <controls>
    <!--[doc]
    Adding a label is simple, though. Simply add a label control at a position with text and properties. Here is a full example
    [doc]-->

    <label x="10" y="30" w="150" h="30"
           font_size="24" font_style="bold" color="#004400"
           bg_color="#AAFFAA488" frame_color="#FFFFFF"
           text="I Am Green"/>

    <!--[doc]
    We can also set labels to have slider text values (as of Surge 1.9)
    where if instead of "text" you set "control_text" you end up getting
    the same label which is on the slider. Here we also disable the text on the
    second slider as an example.
    [doc]-->

    <label x="10" y="80" w="150" h="30"
           font_size="24" font_style="bold"
           color="#00FF00" bg_color="#FF9000AA"
           frame_color="#FFFFFF"
           control_text="osc.param_1"/>
    <label x="10" y="110" w="150" h="20"
           font_size="15" font_style="bold"
           color="#00FF00" bg_color="#FF9000AA"
           frame_color="#FFFFFF"
           control_text="osc.param_2"/>
    <control ui_identifier="osc.param_2" hide_slider_label="true"/>

    <!--[doc]
    Finally a label can also have an image rather than text. In 1.9 for images
    (1) the frame color and the like are not used, just the image alone is
    painted and (2) the w and h give the area the ui element takes, but the
    image is not scaled.
    [doc]-->
    <label x="140" y="10" w="40" h="40" image="ramen"/>


  </controls>
</surge-skin>
