<?xml version="1.0"?>
<root>

  <!--brush icon-->
  <layout id="tpl-brush-icon">
    <button-custom width="50" height="50" margin="1" pad="2" align="center" justify="center">
      <image width="100%" height="100%"/>
    </button-custom>
  </layout>

  <!--layer template-->
  <layout id="tpl-layer">
    <border height="30" border-color="1" thickness="1" color=".4" dir="col" margin="1 0 1 0">
      <node dir="row" height="30">
        <node width="30" pad="1">
          <checkbox id="cb" icon="data/ui/check-layer-visibility.png"/>
        </node>
        <node width="1" grow="1" justify="center" pad="5">
          <text id="label"/>
        </node>
      </node>
    </border>
  </layout>
  
  <!--layers panel template-->
  <layout id="tpl-panel-layers">
    <node width="250" margin="0 0 10 0" rtl="ltr">
      <border height="30" color=".5" align="center" justify="center" margin="0 0 0 0">
        <text text="Layers" color="1 1 1 1"/>
      </border>
      
      <border height="35" color=".5" dir="row" align="center" flood-events="1" pad="0 0 5 0">
        <checkbox id="alpha-lock" icon="data/ui/check-lock-transparency.png" width="30" margin="0 5 0 5"/>
        <combobox id="blend-mode" width="100" height="30" margin="0 5 0 0" combo-list="Normal,-,Multiply,Screen,-,Color Dodge,Overlay"/>
        <slider-h id="opacity" value="1" grow="1" width="1" margin="0 5 0 0"/>
      </border>

      <border id="layers-container" pad="5" color=".4" dir="col" flood-events="1">
        <!--layers list-->
      </border>
      
      <border height="40" color=".5" dir="row" align="center" flood-events="1">
        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
          <icon width="30" icon="add"/>
        </button-custom>
        <button-custom id="btn-duplicate" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
          <icon width="30" icon="page_copy"/>
        </button-custom>
        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_arrow_up"/>
        </button-custom>
        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_arrow_down"/>
        </button-custom>
        <node grow="1"></node>
        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
          <icon width="30" icon="bin_closed"/>
        </button-custom>
      </border>
    </node>
  </layout>
    
  <!--brush-presets panel-->
  <layout id="tpl-panel-brush-preset">
    <node rtl="ltr">
      <scroll id="brushes" color=".4" pad="5 20 5 5" dir="col" wrap="0" flood-events="1" grow="1" height="1"/>
      <border height="40" color=".5" dir="row" align="center" flood-events="1">
        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
          <icon width="30" icon="add"/>
        </button-custom>
        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_arrow_up"/>
        </button-custom>
        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_arrow_down"/>
        </button-custom>
        <button-custom id="btn-save" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_disk"/>
        </button-custom>
        <node grow="1"></node>
        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
          <icon width="30" icon="bin_closed"/>
        </button-custom>
      </border>
    </node>
  </layout>
  <!--brush-presets-item icon-->
  <layout id="tpl-brush-preset">
    <button-custom width="300" height="70" margin="1" pad="5" align="center" justify="center" dir="row">
      <border color="1" width="40" height="60" align="center" justify="center" dir="col">
        <image id="thumb" width="40" height="40"/>
        <text id="caption-size" text="000" color="0" margin="3 0 0 0"/>
      </border>
      <stroke-preview id="canvas" width="1" grow="1" height="60"/>
    </button-custom>
  </layout>

  <!--brushes panel-->
  <layout id="tpl-panel-brushes">
    <node rtl="ltr">
      <scroll id="brushes" color=".4" pad="5" dir="row" wrap="1" flood-events="1" grow="1" height="1"/>
      <border height="40" color=".5" dir="row" align="center" flood-events="1">
        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
          <icon width="30" icon="add"/>
        </button-custom>
        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_arrow_up"/>
        </button-custom>
        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_arrow_down"/>
        </button-custom>
        <button-custom id="btn-save" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_disk"/>
        </button-custom>
        <node grow="1"></node>
        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
          <icon width="30" icon="bin_closed"/>
        </button-custom>
      </border>
    </node>
  </layout>

  <!--color panel-->
  <layout id="tpl-panel-color">
    <node width="250" margin="0 0 10 0" rtl="ltr">
      <border height="30" color=".5" align="center" justify="center">
        <text text="Colors" color="1 1 1 1"/>
      </border>
      <border color=".3" pad="5" dir="row" height="250">
        <color-quad id="quad" color="1 0 0 1" height="100%" grow="1"/>
        <node width="30" dir="col" pad="0 0 0 5"><slider-hue id="hue"/></node>
      </border>
    </node>
  </layout>

  <!--stroke panel-->
  <layout id="tpl-panel-stroke">
    <node width="250" margin="0 0 10 0" rtl="ltr">
      <border height="30" color=".5" align="center" justify="center" dir="row">
        <node align="center" width="1" grow="1">
          <text text="Brush Settings"/>
        </node>
        <button id="button-unfold-all" width="30" height="18" text="+" margin="0 5 0 0"/>
      </border>
      <border color=".3" pad="5" dir="col" width="100%">

        <!-- PREVIEW -->

        <button-custom id="preset-button" color=".2" pad="5" margin="0 0 0 0"> 
          <stroke-preview id="canvas" width="100%" height="100"/>
        </button-custom>

        <!-- PRESET AND SHAPE -->

        <node dir="row">
          <node width="36%" dir="col">
            <!--<node height="20" justify="center" margin="5 0 5 0"><text text="Shade"/></node>-->
            <node height="40" justify="center" margin="5 0 0 0">
              <text text="Shape"/>
            </node>
            <node height="20" justify="center" margin="5 0 0 0">
              <text text="Aspect"/>
            </node>
          </node>
          <node dir="col" align="center" grow="1" width="1" flood-events="1">
            <!--<node height="20" pad="1" width="100%" margin="5 0 5 0"><slider-h id="tip-shade" value="1"/></node>-->
            <node dir="row" margin="5 0 0 0">
              <button-custom id="tip-change" width="40" height="40" dir="row" pad="4">
                <image id="tip-change-thumb" width="32" height="100%"/>
              </button-custom>
              <node width="1" grow="1" height="40">
                <node align="center" dir="row">
                  <checkbox id="tip-invert" width="20" height="19"/>
                  <text text="invert value"/>
                </node>
                <node align="center" dir="row">
                  <checkbox id="tip-flipx" width="20" height="19"/>
                  <text text="flipX"/>
                  <checkbox id="tip-flipy" width="20" height="19" margin="0 0 0 5"/>
                  <text text="flipY"/>
                </node>
              </node>
            </node>
            <node height="20" dir="row" pad="1" width="100%" margin="5 0 0 0">
              <slider-h id="tip-aspect" width="1" grow="1" value="0.5"/>
              <button-custom id="tip-aspect-reset" width="20" height="20" margin="0 0 0 5">
                <icon icon="arrow_rotate_clockwise"/>
              </button-custom>
            </node>
          </node>
        </node>

        <!-- COLOR -->

        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
          <node align="center" width="1" grow="1">
            <text text="Color"/>
          </node>
          <button id="button-unfold-color" width="30" height="18" text="+"/>
        </border>
        <node id="fold-color" dir="row">
          <node width="36%" dir="col">
            <!--labels-->
            <node height="30" justify="center" margin="0 0 5 0">
              <text text="Blend"/>
            </node>
            <node height="20" justify="center" margin="0 0 20 0">
              <text text="Flow"/>
            </node>
            <node height="20" justify="center">
              <text text="Opacity"/>
            </node>
          </node>
          <node dir="col" align="center" grow="1" width="1">
            <!--controls-->
            <node height="30" pad="1" width="100%" dir="row" margin="0 0 5 0">
              <combobox id="blend-mode" text="Normal" width="100%" height="28" combo-list="Normal,-,Multiply,Screen,-,Color Dodge,Overlay"/>
            </node>
            <node height="40" pad="1" width="100%" dir="col">
              <slider-h id="tip-flow" height="19" value=".5"/>
              <node align="center" dir="row">
                <checkbox id="tip-flow-pressure" width="20" height="19"/>
                <text text="flow pressure"/>
              </node>
            </node>
            <node height="40" pad="1" width="100%" dir="col">
              <slider-h id="tip-opacity" height="19" value="1"/>
              <node align="center" dir="row">
                <checkbox id="tip-opacity-pressure" width="20" height="19"/>
                <text text="opacity pressure"/>
              </node>
            </node>
          </node>
        </node>

        <!-- METRICS -->

        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
          <node align="center" width="1" grow="1">
            <text text="Metrics"/>
          </node>
          <button id="button-unfold-metrics" width="30" height="18" text="+"/>
        </border>
        <node id="fold-metrics" dir="row">
          <node width="36%" dir="col">
            <!--labels-->
            <node height="20" justify="center" margin="0 0 20 0">
              <text text="Size"/>
            </node>
            <node height="20" justify="center">
              <text text="Spacing"/>
            </node>
            <node height="20" justify="center" margin="0 0 40 0">
              <text text="Angle"/>
            </node>
            <node height="20" justify="center">
              <text text="Smoothing"/>
            </node>
          </node>
          <node dir="col" align="center" grow="1" width="1">
            <!--controls-->
            <node height="40" pad="1" width="100%" dir="col">
              <slider-h id="tip-size" height="19" value=".25"/>
              <node align="center" dir="row">
                <checkbox id="tip-size-pressure" width="20" height="19"/>
                <text text="size pressure"/>
              </node>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="tip-spacing" value=".25"/>
            </node>
            <node height="60" pad="1" width="100%" dir="col">
              <slider-h id="tip-angle" height="19"/>
              <node align="center" dir="row">
                <checkbox id="tip-angle-init" width="20" height="19"/>
                <text text="initial direction"/>
              </node>
              <node align="center" dir="row">
                <checkbox id="tip-angle-follow" width="20" height="19"/>
                <text text="follow direction"/>
              </node>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="tip-angle-smooth" value="0"/>
            </node>
          </node>
        </node>
        
        <!-- PATTERN -->

        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
          <checkbox id="pattern-enabled" width="20" height="20"/>
          <node align="center" width="1" grow="1">
            <text text="Pattern"/>
          </node>
          <button id="button-unfold-pattern" width="30" height="18" text="+"/>
        </border>
        <node id="fold-pattern" dir="row">
          <node width="36%" dir="col">
            <!--labels-->
            <node height="40" justify="center" margin="0 0 5 0">
              <text text="Pattern"/>
            </node>
            <node height="30" justify="center" margin="0 0 5 0">
              <text text="Blend"/>
            </node>
            <!--
            <node height="30" justify="center" margin="0 0 5 0">
              <text text="Projection"/>
            </node>
            -->
            <node height="20" justify="center">
              <text text="Apply"/>
            </node>
            <node height="20" justify="center">
              <text text="Offset"/>
            </node>
            <node height="20" justify="center">
              <text text="Depth"/>
            </node>
            <node height="20" justify="center">
              <text text="Scale"/>
            </node>
            <node height="20" justify="center">
              <text text="Brightness"/>
            </node>
            <node height="20" justify="center">
              <text text="Contrast"/>
            </node>
          </node>
          <node dir="col" grow="1" width="1">
            <!--controls-->
            <node dir="row" margin="0 0 5 0">
              <button-custom id="pattern-change" width="40" height="40" dir="row" pad="4">
                <image id="pattern-change-thumb" width="32" height="100%"/>
              </button-custom>
              <node width="1" grow="1" height="40">
                <node align="center" dir="row">
                  <checkbox id="pattern-invert" width="20" height="19"/>
                  <text text="invert value"/>
                </node>
                <node align="center" dir="row">
                  <checkbox id="pattern-flipx" width="20" height="19"/>
                  <text text="flipX"/>
                  <checkbox id="pattern-flipy" width="20" height="19" margin="0 0 0 5"/>
                  <text text="flipY"/>
                </node>
              </node>
            </node>
            <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
              <combobox id="pattern-blend-mode" width="100%" height="28" combo-list="Normal,-,Multiply,Subtract,Darken,Overlay,Color Dodge,Color Burn,Linear Burn,Hard Mix,-,Linear Height,Height"/>
            </node>
            <!--
            <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
              <combobox id="pattern-proj-mode" width="100%" height="28" combo-list="Cube,Screen"/>
            </node>
            -->
            <node align="center" dir="row">
              <checkbox id="pattern-eachsample" height="20" width="20"/>
              <text text="each sample"/>
            </node>
            <node align="center" dir="row">
              <checkbox id="pattern-rand-offset" height="20" width="20"/>
              <text text="randomize"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="pattern-depth" value="1"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="pattern-scale" value=".25"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="pattern-brightness" value=".5"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="pattern-contrast" value=".5"/>
            </node>
          </node>
        </node>

        <!-- DUAL BRUSH -->

        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
          <checkbox id="dual-enabled" width="20" height="20"/>
          <node align="center" width="1" grow="1">
            <text text="Dual Brush"/>
          </node>
          <button id="button-unfold-dualbrush" width="30" height="18" text="+"/>
        </border>
        <node id="fold-dualbrush" dir="row">
          <node width="36%" dir="col">
            <!--labels-->
            <node height="40" justify="center" margin="0 0 5 0">
              <text text="Shape"/>
            </node>
            <node height="30" justify="center" margin="0 0 5 0">
              <text text="Blend"/>
            </node>
            <node height="20" justify="center">
              <text text="Flip"/>
            </node>
            <node height="20" justify="center">
              <text text="Size"/>
            </node>
            <node height="20" justify="center">
              <text text="Flow"/>
            </node>
            <node height="20" justify="center">
              <text text="Opacity"/>
            </node>
            <node height="20" justify="center">
              <text text="Spacing"/>
            </node>
            <node height="20" justify="center" margin="0 0 20 0">
              <text text="Scatter"/>
            </node>
            <node height="20" justify="center">
              <text text="Rotate"/>
            </node>
          </node>
          <node dir="col" grow="1" width="1">
            <!--controls-->
            <node dir="row" margin="0 0 5 0">
              <button-custom id="dual-change" width="40" height="40" dir="row" pad="4">
                <image id="dual-change-thumb" width="32" height="100%"/>
              </button-custom>
              <node width="1" grow="1" height="40">
                <node align="center" dir="row">
                  <checkbox id="dual-invert" width="20" height="19"/>
                  <text text="invert value"/>
                </node>
                <node align="center" dir="row">
                  <checkbox id="dual-flipx" width="20" height="19"/>
                  <text text="flipX"/>
                  <checkbox id="dual-flipy" width="20" height="19" margin="0 0 0 5"/>
                  <text text="flipY"/>
                </node>
              </node>
            </node>
            <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
              <combobox id="dual-blend-mode" width="100%" height="28" combo-list="Normal,-,Multiply,Subtract,Darken,Overlay,Color Dodge,Color Burn,Linear Burn,Hard Mix,-,Linear Height,Height"/>
            </node>
            <node align="center" dir="row">
              <checkbox id="dual-randflip" height="20" width="20"/>
              <text text="random flips"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="dual-size" value=".25"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="dual-flow" value=".75"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="dual-opacity" value="1"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="dual-spacing" value=".25"/>
            </node>
            <node height="40" pad="1" width="100%" dir="col">
              <slider-h id="dual-scatter" height="19" value="0"/>
              <node align="center" dir="row">
                <checkbox width="20" height="19" id="dual-scatter-bothaxis"/>
                <text text="both axis"/>
              </node>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="dual-rotate" value=".25"/>
            </node>
          </node>
        </node>

        <!-- MEDIUM -->

        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
          <node align="center" width="1" grow="1">
            <text text="Medium"/>
          </node>
          <button id="button-unfold-medium" width="30" height="18" text="+"/>
        </border>
        <node id="fold-medium" dir="row">
          <node width="36%" dir="col">
            <!--labels-->
            <node height="20" justify="center">
              <text text="Mixer"/>
            </node>
            <node height="20" justify="center">
              <text text="Wet"/>
            </node>
            <node height="20" justify="center">
              <text text="Noise"/>
            </node>
          </node>
          <node dir="col" align="center" grow="1" width="1">
            <!--controls-->
            <node height="20" pad="1" width="100%">
              <slider-h id="tip-mix"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="tip-wet"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="tip-noise"/>
            </node>
          </node>
        </node>

        <!-- COLOR VARIATIONS -->

        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
          <node align="center" width="1" grow="1">
            <text text="Pressure Variations"/>
          </node>
          <button id="button-unfold-colorvar" width="30" height="18" text="+"/>
        </border>
        <node id="fold-colorvar" dir="row">
          <node width="36%" dir="col">
            <!--labels-->
            <node height="20" justify="center">
              <text text="Hue"/>
            </node>
            <node height="20" justify="center">
              <text text="Sat"/>
            </node>
            <node height="20" justify="center">
              <text text="Val"/>
            </node>
          </node>
          <node dir="col" align="center" grow="1" width="1">
            <!--controls-->
            <node height="20" pad="1" width="100%">
              <slider-h id="tip-hue"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="tip-sat"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="tip-val"/>
            </node>
          </node>
        </node>

        <!-- JITTER -->

        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
          <node align="center" width="1" grow="1">
            <text text="Jitter"/>
          </node>
          <button id="button-unfold-jitter" width="30" height="18" text="+"/>
        </border>
        <node id="fold-jitter" dir="row">
          <node width="36%" dir="col">
            <node height="20" justify="center">
              <text text="Flip"/>
            </node>
            <node height="20" justify="center">
              <text text="Scale"/>
            </node>
            <node height="20" justify="center">
              <text text="Angle"/>
            </node>
            <node height="20" justify="center" margin="0 0 20 0">
              <text text="Aspect"/>
            </node>
            <node height="20" justify="center" margin="0 0 25 0">
              <text text="Scatter"/>
            </node>
            <node height="20" justify="center">
              <text text="Flow"/>
            </node>
            <node height="20" justify="center" margin="0 0 5 0">
              <text text="Opacity"/>
            </node>
            <node height="20" justify="center">
              <text text="Hue"/>
            </node>
            <node height="20" justify="center">
              <text text="Sat"/>
            </node>
            <node height="20" justify="center">
              <text text="Val"/>
            </node>
          </node>
          <node dir="col" grow="1" width="1">
            <node align="center" dir="row">
              <checkbox id="tip-randflipx" width="20" height="19"/>
              <text text="X axis"/>
              <checkbox id="tip-randflipy" width="20" height="19" margin="0 0 0 10"/>
              <text text="Y axis"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="jitter-scale"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="jitter-angle"/>
            </node>
            <node height="40" pad="1" width="100%" dir="col">
              <slider-h id="jitter-aspect" height="19" value="0"/>
              <node align="center" dir="row">
                <checkbox width="20" height="19" id="jitter-aspect-bothaxis"/>
                <text text="both axis"/>
              </node>
            </node>
            <node height="40" pad="1" width="100%" dir="col" margin="0 0 5 0">
              <slider-h id="jitter-scatter" height="19" value="0"/>
              <node align="center" dir="row">
                <checkbox width="20" height="19" id="jitter-scatter-bothaxis"/>
                <text text="both axis"/>
              </node>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="jitter-flow"/>
            </node>
            <node height="20" pad="1" width="100%" margin="0 0 5 0">
              <slider-h id="jitter-opacity"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="jitter-hue"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="jitter-sat"/>
            </node>
            <node height="20" pad="1" width="100%">
              <slider-h id="jitter-val"/>
            </node>
          </node>
        </node>
        
      </border>
    </node>
  </layout>

  <!--grids panel-->
  <layout id="tpl-panel-grid">
    <node width="250" margin="0 0 10 0" rtl="ltr">
      <border height="30" color=".5" align="center" justify="center">
        <text text="Grids" color="1 1 1 1"/>
      </border>
      <border color=".3" pad="5" dir="col" width="100%">
        
        <node dir="row">
          <node width="36%" dir="col">
            <node height="20" justify="center"><text text="Opacity"/></node>
            <node height="20" justify="center"><text text="Value"/></node>
            <node height="20" justify="center"><text text="Offset"/></node>
            <node height="30" justify="center" margin="5 0 0 0"><text text="Resolution"/></node>
          </node>
          <node dir="col" align="center" grow="1" width="1" flood-events="1">
            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-opacity"/></node>
            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-value" value="0.0"/></node>
            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-offset" value="0.25"/></node>
            <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
              <combobox id="grid-ground-resolution" width="100%" height="30" combo-list="0.1,0.5,1,2,4,8" default="2"/>
            </node>
          </node>
        </node>
        <node height="5"/>
        <border color=".2" height="20" justify="center" align="center"><text text="Heightmap"/></border>
        <border color="1" align="center" pad="5" margin="0 0 5 0">
          <image-texture id="grid-heightmap-preview" width="100%" grow="1" height="100" aspect-ratio="1"/>
        </border>
        <node dir="row">
          <node width="36%" dir="col">
            <node height="30" justify="center"><text text="File"/></node>
            <node height="30" justify="center" margin="5 0 0 0"><text text="Shading"/></node>
            <node height="20" justify="center" margin="5 0 0 0"><text text="Wireframe"/></node>
            <!--<node height="20" justify="center"><text text="Thickness"/></node>-->
            <node height="20" justify="center"><text text="Height"/></node>
            <node height="20" justify="center"><text text="Light Yaw"/></node>
            <node height="20" justify="center"><text text="Light Pitch"/></node>
            <node height="20" justify="center"><text text="Ambient"/></node>
            <node height="20" justify="center"><text text="Radius"/></node>
            <node height="30" justify="center" margin="5 0 0 0"><text text="Samples"/></node>
            <node height="30" justify="center" margin="5 0 0 0"><text text="Tex Res."/></node>
          </node>
          <node dir="col" align="center" grow="1" width="1" flood-events="1" color=".3" >
            <node height="30" width="100%" dir="row" pad="0 1 0 1">
              <node width="20" grow="1" pad="0" dir="row">
                <button id="grid-heightmap-load" text="Open" grow="1" width="52" height="30" margin="0 2 0 0"/>
                <button id="grid-heightmap-clear" text="Clear" grow="1" width="55" height="30" margin="0 2 0 0"/>
                <button-custom id="grid-heightmap-reload" pat="2">
                  <icon icon="arrow_rotate_clockwise" width="30" height="30"/>
                </button-custom>
              </node>
            </node>
            <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
              <combobox id="grid-heightmap-shading" width="100%" height="30" combo-list="Transparent,Flat,Solid,Textured" default="0"/>
            </node>
            <node height="20" pad="1" width="100%" margin="5 0 0 0"><slider-h id="grid-heightmap-wireframe" value="1.0"/></node>
            <!--<node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-thickness" value="0.5"/></node>-->
            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-height" value="0.25"/></node>
            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-lyaw" value="0.5"/></node>
            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-lpitch" value="0.1"/></node>
            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-ambient" value="0.0"/></node>
            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-radius" value="0.25"/></node>
            <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
              <combobox id="grid-heightmap-samples" width="100%" height="30" combo-list="1,4,8,16,32,64,128" default="2"/>
            </node>
            <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
              <combobox id="grid-heightmap-texres" width="100%" height="30" combo-list="256,512,1024,2048,4096" default="1"/>
            </node>
          </node>
        </node>
        <button id="grid-render" text="Render Lightmap" height="30" margin="5 0 0 0"/>
        <button id="grid-commit" text="Commit to Layer" height="30" margin="5 0 0 0"/>
      
    </border>
    </node>
  </layout>
  
  <layout id="message-box">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3">
        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text id="title" text="Just a test message"></text>
        </border>
        <border width="400" color="0 0 0 .9" pad="10" dir="col">
          <text id="message" text-wrap-width="380" text="Longer description for the error or the message."></text>
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
          </node>
        </border>
      </border>
    </border>
  </layout>

  <layout id="progress-bar">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3">
        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text id="title" text="Just a test message"></text>
        </border>
        <border width="400" color="0 0 0 .9" pad="10" dir="col">
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <border width="50" height="30" grow="1" margin="0 10 0 0" color=".2">
              <border id="progress" width="50%" color="1 0 0 1" height="30"/>
            </border>
            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
          </node>
        </border>
      </border>
    </border>
  </layout>

  <!-- Color Picker Dialog -->
  <layout id="color-picker">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
      <border thickness="1" border-color=".2" pad="3">
        <border width="300" height="30" color=".2 .2 .2 .9" dir="row" align="center">
          <node grow="1" width="10" align="center">
            <text id="title" text="Color Picker"/>
          </node>
          <!--<combobox justify="flex-end" pad="5" margin="0 5 0 0" text="Triangle" combo-list="Triangle,Square" default="0"/>-->
        </border>
        <border width="300" color=".5 .5 .5 .9" pad="10" dir="col">
          <colorwheel id="wheel" width="100%" aspect-ratio="1"/>
          <border color="1" pad="5" dir="row" margin="10 0 0 0">
            <border border-color="0 0 0 1" thickness="1" id="color-cur" height="30" grow="1" color="1"/>
            <border border-color="0 0 0 1" thickness="1" id="color-old" height="30" grow="1" color="0"/>
            <border border-color="0 0 0 1" thickness="1" id="color-old1" height="30" grow="1" color="0"/>
            <border border-color="0 0 0 1" thickness="1" id="color-old2" height="30" grow="1" color="0"/>
          </border>
          <node width="100%" pad="2" height="20" dir="row" align="center" margin="10 0 0 0">
            <node width="20"><text text="H"/></node>
            <slider-h id="hsv-h" width="10" grow="1" value="1"/>
          </node>
          <node width="100%" pad="2" height="20" dir="row" align="center">
            <node width="20"><text text="S"/></node>
            <slider-h id="hsv-s" width="10" grow="1" value="1"/>
          </node>
          <node width="100%" pad="2" height="20" dir="row" align="center">
            <node width="20"><text text="V"/></node>
            <slider-h id="hsv-v" width="10" grow="1" value="1"/>
          </node>
          <node width="100%" pad="2" height="20" dir="row" align="center" margin="5 0 0 0">
            <node width="20"><text text="R"/></node>
            <slider-h id="rgb-r" width="10" grow="1" value="1"/>
            <node width="15" margin="0 0 0 5"><text text="G"/></node>
            <slider-h id="rgb-g" width="10" grow="1" value="1"/>
            <node width="15" margin="0 0 0 5"><text text="B"/></node>
            <slider-h id="rgb-b" width="10" grow="1" value="1"/>
          </node>

        </border>
        <node height="33" dir="row" align="flex-end" justify="flex-end">
          <button id="btn-ok" text="Reset" width="60" height="30" margin="0 10 0 0"/>
          <button id="btn-select" text="Select color" width="100" height="30"/>
        </node>
      </border>
    </border>
  </layout>

  <!-- Dialog Rename Layer -->
  <layout id="dialog-layer-rename">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3">
        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="Rename Layer"></text>
        </border>
        <border width="400" color="0 0 0 .9" pad="10" dir="col">
          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
            <text text="New name: " margin="0 5 0 5"/>
            <text-input id="txt-input" align="center" pad="5" grow="1" height="30" color=".3"/>
          </border>
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <button id="btn-ok" text="Rename Layer" width="110" height="30" margin="0 10 0 0"/>
            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
          </node>
        </border>
      </border>
    </border>
  </layout>

  <!-- Dialog Resize -->
  <layout id="dialog-resize">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3">
        <border width="500" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="Resize Document Resolution"></text>
        </border>
        <border width="500" color="0 0 0 .9" pad="10" dir="col">
          <text text="This action is permanent and cannot be undone.\nAll of the history will be cleared." margin="0 5 10 5"/>
          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
            <node grow="1"><text id="current-res" text="Current: 2K" margin="0 5 0 5"/></node>
            <text text="New Resolution:" margin="0 5 0 5"/>
            <combobox id="resolution" width="100" height="30" text="2K" combo-list="2K,4K,6K,8K,16K,32K" default="1"/>
          </border>
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <button id="btn-ok" text="Resize" width="70" height="30" margin="0 10 0 0"/>
            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
          </node>
        </border>
      </border>
    </border>
  </layout>

  <!-- Browse Dialog Popup -->

  <layout id="dialog-browse-item">
    <border dir="col" color=".4 .4 .4 .8" pad="4" height="120" width="100" margin="1 1 1 1" grow="1" align="center">
      <image-texture id="thumb-tex" width="100%" grow="1" height="1" aspect-ratio="1"/>
      <text id="title" text="File Name" margin="5 0 0 0"/>
    </border>
  </layout>
  <layout id="dialog-browse">
    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border id="form" thickness="1" border-color=".2" pad="3" width="90%" height="90%" dir="col">
        <border id="title-bar" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="Browse PanoPainter Projects"></text>
        </border>
        <border width="100%" height="100" color="0 0 0 .9" pad="10" dir="row" grow="1">
          <scroll id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="0 20 0 0" color=".2 .2 .2 1">
          </scroll>
        </border>
        <node dir="row">
          <node grow="1"><text os="win,osx" id="path" text="Workind dir: path" text-wrap-width="470" margin="10 5 10 10"/></node>
          <button os="win,osx" id="btn-path" text="Set destination dir" width="140" height="30" margin="0 10 0 0"/>
        </node>
        <node id="footer" height="50" dir="row" align="flex-end" justify="flex-end" pad="10">
          <node grow="1"><button id="btn-delete" text="Delete Project" width="100" height="30" margin="0 10 0 0" color="1 0 0 1"/></node>
          <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
          <button id="btn-cancel" text="Cancel" width="60" height="30"/>
        </node>
      </border>
    </border>
  </layout>

  <!-- Cloud Browse Dialog Popup -->

  <layout id="dialog-cloud-item">
    <border dir="col" color=".4 .4 .4 .8" pad="4" height="120" width="100" margin="1 1 1 1" grow="1" align="center">
      <image-texture id="thumb-tex" width="100%" grow="1" height="1" aspect-ratio="1"/>
      <text id="title" text="File Name" margin="5 0 0 0"/>
    </border>
  </layout>
  
  <layout id="dialog-cloud">
    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border id="form" thickness="1" border-color=".2" pad="3" width="90%" height="90%" dir="col">
        <border id="title-bar" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="Browse PanoPainter Projects"></text>
        </border>
        <border width="100%" height="100" color="0 0 0 .9" pad="10" dir="row" grow="1">
          <scroll id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="0 20 0 0" color=".2 .2 .2 1">
          </scroll>
        </border>
        <node id="footer" height="50" dir="row" align="flex-end" justify="flex-end" pad="10">
          <node grow="1" os="win,osx"><button id="btn-path" text="Set destination dir" width="130" height="30" margin="0 10 0 0"/></node>
          <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
          <button id="btn-cancel" text="Cancel" width="60" height="30"/>
        </node>
      </border>
    </border>
  </layout>

  <!-- Open Dialog Popup -->

  <layout id="dialog-open-item">
    <border dir="row" color=".4 .4 .4 .8" pad="4" height="30" margin="1 0 1 0" align="center">
      <!--<image-texture id="thumb-tex" width="64" height="64"/>-->
      <text id="title" text="Title"/>
    </border>
  </layout>
  <layout id="dialog-open">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3">
        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="Open PanoPainter Project"></text>
        </border>
        <border width="400" color="0 0 0 .9" pad="10" dir="col">
          <node dir="row">
            <scroll id="files-list" dir="col" flood-events="1" grow="1" height="250" margin="0 10 0 0" pad="0 20 0 0" color=".2 .2 .2 1"/>
            <!--
            <node dir="col" grow="1" margin="0 0 0 10">
              <border height="20" align="center" justify="center" color=".2 .2 .2 1"><text id="info-title" text="Title"/></border>
              <text id="info-data" text="Title"/>
            </node>
            -->
            <image-texture id="thumb-tex" aspect-ratio="1" width="150" height="150"/>
          </node>
          <!--<text-input width="100" height="100" color=".3"/>-->
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <node grow="1"><button id="btn-delete" text="Delete Project" width="100" height="30" margin="0 10 0 0" color="1 0 0 1"/></node>
            <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
          </node>
        </border>
      </border>
    </border>
  </layout>
  
  <!-- Save Dialog Popup -->
  <layout id="dialog-save">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3">
        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="Save Pano Project"></text>
        </border>
        <border width="400" color="0 0 0 .9" pad="10" dir="col">
          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
            <text text="Project name: " margin="0 5 0 5"/>
            <text-input id="txt-input" align="center" pad="5" grow="1" height="30" color=".3"/>
          </border>
          <text os="win,osx" id="path" text="Workind dir: path" text-wrap-width="470" margin="10 5 10 5"/>
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <node grow="1" os="win,osx"><button id="btn-path" text="Set working dir" width="120" height="30" margin="0 10 0 0"/></node>
            <button id="btn-ok" text="Save Project" width="100" height="30" margin="0 10 0 0"/>
            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
          </node>
        </border>
      </border>
    </border>
  </layout>
  
  <!-- NewDoc Dialog Popup -->
  <layout id="dialog-newdoc">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3">
        <border width="500" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="Create New Pano Project"></text>
        </border>
        <border width="500" color="0 0 0 .9" pad="10" dir="col">
          <text text="Note: resolution is measured in K-pixels, so a 2K document produces\na 2048x1024 equirectangular output." margin="0 5 10 5"/>
          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
            <text text="Project name: " margin="0 5 0 5"/>
            <text-input id="txt-input" align="center" pad="5" grow="1" height="30" color=".3"/>
            <combobox id="resolution" width="100" height="30" text="2K" combo-list="2K,4K,6K,8K,16K,32K" default="1"/>
          </border>
          <text os="win,osx" id="path" text="Workind dir: path" text-wrap-width="470" margin="10 5 10 5"/>
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <node grow="1" os="win,osx"><button id="btn-path" text="Set working dir" width="120" height="30" margin="0 10 0 0"/></node>
            <button id="btn-ok" text="Create Project" width="110" height="30" margin="0 10 0 0"/>
            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
          </node>
        </border>
      </border>
    </border>
  </layout>

  <!--settings window-->
  <layout id="settings">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3" width="80%" min-width="400">
        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="Global Settings"></text>
        </border>
        <border width="100%" color="0 0 0 .9" pad="10" dir="col">
          <!--window content-->
          <node dir="row">
            <!--sidebar-->
            <node width="100" flood-events="1">
              <border height="30" width="100%" color=".2" pad="0 0 0 10" align="flex-begin" justify="center">
                <text text="Viewport"/>
              </border>
              <button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
                <text text="Registers"/>
              </button-custom>
              <button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
                <text text="Toolbar"/>
              </button-custom>
              <button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
                <text text="Panorama"/>
              </button-custom>
            </node>
            <!--settings tab-->
            <border color=".2" width="100%" height="200"></border>
          </node>
          <!--footer buttons-->
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
            <button text="Cancel" width="60" height="30"/>
          </node>
        </border>
      </border>
    </border>
  </layout>

  <!--About window-->
  <layout id="about">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="1">
      <border thickness="1" border-color=".2" pad="3" max-width="650">
        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="About PanoPainter"></text>
        </border>
        <border width="100%" color="0 0 0 .9" pad="10" dir="col">
          <!--window content-->
          <border color=".2" width="100%" height="300">
            <scroll pad="10" margin="5" color=".3 .3 .3 .4" height="100%" dir="col" wrap="0" shrink="1">
              <text margin="0 0 0 5" text=
"
--------------------------------------------------- ABOUT PANOPAINTER -----------------------------------------------------
PanoPainter - Copyright 2018 OmixLab Ltd
  Thanks for using PanoPainter.
  My name is Omar Mohamed Ali Mudhir and I'm the developer of this unique application.
  In the late 2016 Facebook started to make it possible for users to post 360 content
  captured from the first 360 cameras born after the advent of the VR to the market.
  
  That's where me and a bunch or artists started to wonder about making art in 360.
  I then started coding in my spare time to create something that would have helped 
  artists in the long process of creating a panoramic painting (panopainting).
  
  Today this software has evolved a lot and reached a mature version ready for early 
  adopters that want to break the rules of traditional digital art and get into the 
  future of immersive painting.
  
  Feel free to follow me on:
  - Instagram: @panopainter
  - Twitter: @panopainter
  - Facebook: fb.me/panopainter
  - Reddit: reddit.com/r/panopainter
  
                      
------------------------------------------------- FREE SOFTWARE LICENSES -------------------------------------------------
Free brushes:
  The free brushes are provided by the freely available Brush Pack v3 from Fenris31
  Link: https://www.deviantart.com/fenris31/art/Brush-Pack-v3-549566626
  
Roboto Font License:
  Copyright 2018 OmixLab Ltd
  Licensed under the Apache License, Version 2.0 (the 'License');
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
      http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an 'AS IS' BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License."/>
            </scroll>
          </border>
          <!--footer buttons-->
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <button id="btn-ok" text="Ok" width="100" height="30" margin="0 10 0 0"/>
          </node>
        </border>
      </border>
    </border>
  </layout>

  <!--Changelog window-->
  <layout id="changelog">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3" max-width="650">
        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="What's new in PanoPainter"></text>
        </border>
        <border width="100%" color="0 0 0 .9" pad="10" dir="col">
          <!--window content-->
          <border color=".2" width="100%" height="400">
            <scroll pad="10" margin="5" color=".3 .3 .3 .4" dir="col" shrink="1">
              <text margin="0 0 0 5" font-size="30" text="0.1.6"/>
              <text margin="10 0 0 5" text=
"- [FIX] Set system message box on top when recovery
- [FIX] Skip Apple Pencil first samples to overcome the initial pressure spike
- [WIN] Add initial VR support with openvr
- [FIX] Layer delete order bug
- [FIX] Improve brush preview during the stroke
- Add import flat images
- Add copy/cut and transform selection
- Add camera reset menu in Layers
- Add share button on iOS and MacOS
"/>
              <text margin="20 0 0 5" font-size="30" text="0.1.4"/>
              <text margin="10 0 0 5" text=
"- [WIN] Add: Windows Store package installer
- [OSX] Quick Look plugin for thumbnail generation
- [FIX] Browse Dialog crashing at empty files
- Implement a Fail-safe two-stage save document
- [IOS,OSX] Add: Crash Recovery routine, which saves a recovery.ppi after crashing
- [IOS,OSX] Add: HockeyApp crash report
- Add: Resize document, allows to change resolution after the document creation
- Internal: Text node wrap text per-char
- [OSX] Open File System Dialog for PPI files
- Add: text cursor caret for a better UX
- Add: Current working directory workflow, allows you to change the current
  open/save/export directory
"/>
              <text margin="20 0 0 5" font-size="30" text="0.1.3"/>
              <text margin="10 0 0 5" text=
"- [OSX] Fix: use the right extension when exporting a .jpg
"/>
              <text margin="20 0 0 5" font-size="30" text="0.1.2"/>
              <text margin="10 0 0 5" text=
"- [OSX] Fix: fixed permissions issue preventing to import images
"/>
              <text margin="20 0 0 5" font-size="30" text="0.1.1"/>
              <text margin="10 0 0 5" text="First public release!"/>
              <!--<text margin="10 0 0 5" text=
"This is the first public release of PanoPainter. It's important to note this is an early
access to the software, so be aware it may crash or behave in unexpected ways.
Always save your work. It comes with a lot of features that will be improved over time.
Here's a list of what's available in this release.
- Immersive 360° panoramic canvas
- High-Performance GPU Accelerated Paint Engine
- Intuitive gestures to navigate
- Dynamic cross-platform User Interface
- Native Apple Pencil support
- Native Sonar Pen support
- Massive resolution up to 8K panorama
- Highly customizable brushes
- Cloud Storage for device interoperability
- Timelapse
- Layers
"/>-->
            </scroll>
          </border>
          <!--footer buttons-->
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <button id="btn-ok" text="Ok" width="100" height="30" margin="0 10 0 0"/>
          </node>
        </border>
      </border>
    </border>
  </layout>
  
    <!--UserManual window-->
  <layout id="usermanual">
    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border thickness="1" border-color=".2" pad="3" max-width="650">
        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="PanoPainter User Manual"></text>
        </border>
        <border width="100%" color="0 0 0 .9" pad="10" dir="col">
          <!--window content-->
          <border color=".2" width="100%" height="500">
            <scroll pad="10" margin="5" color="1" dir="col" shrink="1">
              <node align="center" margin="10 0 10 0"><text color="0" font-size="30" text="Getting started with PanoPainter"/></node>
              <image path="data/doc/images/panopainter-doc-overview.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="Brush Settings"/></node>
              <image path="data/doc/images/panopainter-doc-brush-settings.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="Layers Settings"/></node>
              <image path="data/doc/images/panopainter-doc-layers.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="File Menu"/></node>
              <image path="data/doc/images/panopainter-doc-menu-file.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="Layers Menu"/></node>
              <image path="data/doc/images/panopainter-doc-menu-layers.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="Timelapse Menu"/></node>
              <image path="data/doc/images/panopainter-doc-menu-timelapse.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
              <node height="40" margin="0 0 40 0"></node>
            </scroll>
          </border>
          <!--footer buttons-->
          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
            <button id="btn-ok" text="Ok" width="100" height="30" margin="0 10 0 0"/>
          </node>
        </border>
      </border>
    </border>
  </layout>

  
  <!--popup menu-->
  <layout id="popup-menu">
    <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text text="Snapshot" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="layers" width="20"/>
        <text text="Layers" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_white" width="20"/>
        <text text="New Layer" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_white_paste" width="20"/>
        <text text="Paste" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_white_stack" width="20"/>
        <text text="Copy" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>

  <!--file menu-->
  <layout id="file-menu">
    <popup-menu positioning="absolute" position="100 100" width="210" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <!--
      <button-custom height="30" align="center" color=".2" pad="0 20 0 10" dir="row">
        <checkbox width="20" height="20"/>
        <node pad="5" width="100%">
          <slider-h/>
        </node>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 20 0 10" dir="row">
        <icon icon="page_add" width="20"/>
        <node pad="5" width="100%">
          <slider-h/>
        </node>
      </button-custom>
      -->
      <button-custom id="file-newdoc" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_add" width="20"/>
        <text text="New Pano" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-N" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <button-custom id="file-import" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="image_add" width="20"/>
        <text text="Import" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <!--
      <button-custom id="file-open" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_add" width="20"/>
        <text text="Open" grow="1" margin="0 0 0 5"/>
      </button-custom>
      -->
      <button-custom id="file-browse" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="images" width="20"/>
        <text text="Browse" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-Shift-O" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <button-custom id="file-open" os="osx,win" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="image" width="20"/>
        <text text="Open Path" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-O" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <button-custom id="file-save" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="disk" width="20"/>
        <text text="Save" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-S" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <button-custom id="file-save-as" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="disk_multiple" width="20"/>
        <text text="Save As.." grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-save-ver" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="disk_multiple" width="20"/>
        <text text="Save Version" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-Shift-S" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <node dir="row">
        <button-custom id="file-export" height="40" align="center" color=".2" pad="0 0 0 10" dir="row" grow="1">
          <icon icon="picture_go" width="20"/>
          <text text="Export JPG" grow="1" margin="0 0 0 5"/>
        </button-custom>
        <button-custom id="file-export-tick" height="40" width="40" align="center" justify="center" color=".2" dir="row">
          <icon icon="resultset_next" width="20"/>
        </button-custom>
      </node>
      <button-custom id="file-share" os="osx,ios" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="picture_go" width="20"/>
        <text text="Share" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-resize" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="arrow_out" width="20"/>
        <text text="Resize Document" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <!--
      <button-custom id="file-export-cubes" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_white_stack" width="20"/>
        <text text="Export Cubes" grow="1" margin="0 0 0 5"/>
      </button-custom>
      -->
      <button-custom id="file-cloud-upload" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="weather_clouds" width="20"/>
        <text text="Cloud Publish" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-cloud-browse" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="weather_clouds" width="20"/>
        <text text="Cloud Browse" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <!--<button-custom height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon width="20"/>
        <text text="Quit" grow="1" margin="0 0 0 5"/>
      </button-custom>-->
    </popup-menu>
  </layout>
  
  <!--file submenu - export-->
  <layout id="file-submenu-export">
    <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom id="file-submenu-export-png" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="PNG" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-submenu-export-layers" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="Separate Layers" grow="1" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>
  
  <!--edit menu-->
  <layout id="edit-menu">
    <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_add" width="20"/>
        <text text="New Panodoc" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="disk" width="20"/>
        <text text="Save" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="disk_multiple" width="20"/>
        <text text="Save as.." margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>

  <!--layers menu-->
  <layout id="layers-menu">
    <popup-menu positioning="absolute" position="100 100" width="270" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom id="layer-clear" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="cancel" width="20"/>
        <text id="menu-label" text="Clear layer" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="clear-grids" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="bin" width="20"/>
        <text text="Clear grids" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="layer-rename" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="application_edit" width="20"/>
        <text id="menu-label" text="Rename Layer" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="layer-merge" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="application_edit" width="20"/>
        <text id="menu-label" text="Merge with" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="camera-reset" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="arrow_rotate_clockwise" width="20"/>
        <text id="menu-label" text="Reset Camera" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>

  <!-- timelapse menu -->
  <layout id="timelapse-menu">
    <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom id="timelapse-start" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text id="menu-label" text="Start Recording" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="timelapse-clear" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="bin" width="20"/>
        <text id="menu-label" text="Clear Frames" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="timelapse-export" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="film_save" width="20"/>
        <text id="menu-label" text="Export MP4" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>

  <!-- about menu -->
  <layout id="about-menu">
    <popup-menu positioning="absolute" position="100 100" width="200" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom id="about-doc" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="help" width="20"/>
        <text id="menu-label" text="Help Guide" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="about-app" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="application_view_gallery" width="20"/>
        <text id="menu-label" text="About PanoPainter" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="about-news" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="bug" width="20"/>
        <text id="menu-label" text="What's new?" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="about-crash" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="bug" width="20"/>
        <text id="menu-label" text="Induce crash" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="about-perf" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="bug" width="20"/>
        <text id="menu-label" text="Performance test" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>

  <!--main-->
  <layout id="main">
    <canvas id="paint-canvas" positioning="absolute" width="100%" height="100%" grow="1"/>
    <node dir="col" wrap="0" width="100%" height="100%" pad="0">
      <!-- content panel -->
      <!-- menu bar -->
      <border flood-events="1" margin="0 0 0 0" pad="0 0 0 0" color=".1" width="100%" height="30" dir="row" align="center" mouse-capture="true">
        <!--
        <button-custom id="menu-file" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="File"/>
        </button-custom>
        <button-custom id="menu-edit" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="Edit"/>
        </button-custom>
        <button-custom id="menu-layers" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="Layers"/>
        </button-custom>
        -->
        <text id="txt-docname" text="Panodoc: no-name" margin="0 20 0 10" color=".6 .6 .6 1"/>
        <node height="100%" color="1" grow="1" align="center" justify="flex-end" dir="row">
          <text id="txt-rec" text="" margin="0 10 0 0" color=".6 .6 .6 1"/>
          <text id="txt-memory" text="History memory: 0.00 Mb" margin="0 5 0 0" color=".6 .6 .6 1"/>
          <button-custom id="btn-clean-memory" margin="0 20 0 0">
            <icon icon="cancel" width="20"/>
          </button-custom>
          <text id="version" text="PanoPainter" margin="0 10 0 0" color=".2 .5 1 1"/>
          <border id="ext-fbf" height="20" width="30" color="0 0 0 1" align="center" justify="center" margin="0 5 0 0">
            <text id="txt-rec" text="FbF" color="0 0 0 1"/>
          </border>
        </node>
      </border>
      <!-- toolbar -->
      <border id="toolbar" height="50" width="100%" pad="5" dir="row" color=".2 .2 .2 .6" mouse-capture="true">
        <!--
        <button id="btn-open" width="50" height="100%" margin="0 5 0 0" text="Open"/>
        <button id="btn-save" width="50" height="100%" margin="0 5 0 0" text="Save"/>
        <button id="btn-export" width="50" height="100%" margin="0 5 0 0" text="Export"/>
        <button id="btn-clear" width="50" height="100%" margin="0 5 0 15" text="Clear"/>
        -->
        <button-custom id="menu-file" width="50" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="File"/>
        </button-custom>
        <!--
        <button-custom id="menu-edit" width="50" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="Edit"/>
        </button-custom>
        -->
        <button-custom id="menu-layers" width="60" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="Layers"/>
        </button-custom>
        <button-custom id="menu-timelapse" width="80" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="Timelapse"/>
        </button-custom>
        <button-custom id="menu-about" width="60" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="About"/>
        </button-custom>
        <!--<button id="btn-anim" width="70" height="100%" margin="1 0 0 10" text="Animate"/>-->
        <node dir="row" justify="center" grow="1">
          <button-custom id="btn-pen" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/pen.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button-custom id="btn-pick" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/picker.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>

          <button-custom id="btn-erase" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/eraser.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>

          <button id="btn-cam" width="70" height="100%" margin="0 0 0 5" text="Parallax"/>
          
          <button-custom id="btn-line" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/line.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button id="btn-grid" width="40" height="100%" margin="0 0 0 5" text="Grid"/>
          <button id="btn-copy" width="40" height="100%" margin="0 0 0 5" text="Copy"/>
          <button id="btn-cut" width="40" height="100%" margin="0 0 0 5" text="Cut"/>
          <!-- <button id="btn-fill" width="50" height="100%" margin="0 0 0 0" text="Fill"/> -->
          <button-custom id="btn-mask-free" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/sel-free.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button-custom id="btn-mask-line" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/sel-poly.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>

          <button-custom id="btn-bucket" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/bucket.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button-custom id="btn-touchlock" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/notouch.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
        </node>
        <button-custom id="btn-undo" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
          <image path="data/ui/undo.png" width="100%" height="100%" align="center" justify="flex-end"/>
        </button-custom>
        <button-custom id="btn-redo" width="40" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
          <image path="data/ui/redo.png" width="100%" height="100%" align="center" justify="flex-end"/>
        </button-custom>
        <!--
        <button-custom id="btn-layer" width="50" height="100%" margin="0 5 0 0" thickness="1" border-color="0 0 0 1" pad="6" align="center" justify="center">
          <icon width="100%" height="100%" icon="disk"/>
        </button-custom>
        -->
      </border>
      <!-- central row -->
      <node grow="1" dir="row" wrap="1" height="0" id="central-row">
        <border width="60" color=".2 .2 .2 .6" margin="0 0 0 0" dir="col" pad="4" flood-events="1" justify="center" mouse-capture="true">
          <!--panel togglers-->
          <button-custom id="btn-stroke" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/stroke.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <!--<button id="btn-brush-preset" width="50" height="50" margin="0 0 5 0" text="Preset" thickness="1" border-color=".1" pad="2"/>-->
          <!--
          <button-custom id="btn-brush" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/brushes.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          -->
          <button-custom id="btn-color" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/palette.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button-custom id="btn-layer" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/layers.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          
          <button-custom id="btn-grids-panel" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/grid.png" width="100%" height="100%" align="center" justify="flex-end" mips="true"/>
          </button-custom>
          
        </border>
        <!-- side bar -->
        <node height="100%" dir="row" shrink="1">
          <scroll id="panels" pad="5 5 5 5" margin="0 0 0 0" color=".3 .3 .3 .4" height="100%" dir="col" wrap="0" shrink="1">
            <!--Stroke-->
            <panel-stroke id="panel-stroke"/>
            <!--Brushes-->
            <!--<panel-brush id="panel-brush"/>-->
            <!--Layers-->
            <!--<panel-layer id="panel-layer"/>-->
            <!--Colors-->
            <!--<panel-color id="panel-color"/>-->
            <!--Grids-->
            <!--<panel-grid/>-->
          </scroll>
        </node>
        <!-- timeline -->
        <!--
        <node height="100%" width="1" grow="1" dir="col" justify="flex-start" rtl="ltr">
          <border color=".3 .3 .3 .4" height="50" width="100%" pad="10" dir="row">
            <text text="Timeline: " margin="8 10 0 0"/>
            <slider-h id="frames-slider" width="1" grow="1" margin="0 10 0 0"></slider-h>
            <node width="30" margin="5 10 0 10">
              <text id="timeline-frame" text="00" font-size="30"/>
            </node>
          </border>
        </node>
        -->
        
        <!--<node height="100%" width="1" grow="1" dir="col" align="center" justify="flex-start" rtl="ltr">
          <border border-color="0 0 0 0" thickness="2" color=".2 .2 .2 .6" pad="10" dir="row" margin="2 0 0 0">
            <node dir="col">
              <node dir="row" align="center" margin="0 0 2 0">
                <slider-h id="pitch-slider" value="0.5" width="200" height="15"></slider-h>
                <text text="Pitch" margin="0 0 0 10"/>
              </node>
              <node dir="row" align="center" margin="0 0 2 0">
                <slider-h id="yaw-slider" value="0.5" width="200" height="15"></slider-h>
                <text text="Yaw" margin="0 0 0 10"/>
              </node>
              <node dir="row" align="center">
                <slider-h id="roll-slider" value="0.5" width="200" height="15"></slider-h>
                <text text="Roll" margin="0 0 0 10"/>
              </node>
            </node>
            <button-custom margin="0 0 0 10" thickness="1" border-color=".1" pad="5" justify="center">
              <text text="Apply"/>
            </button-custom>
          </border>
        </node>-->
      
      </node>
      <!-- status bar -->
      <!--<border height="30" width="100%" color=".15" border-color=".3" dir="row" pad="0 0 0 10" align="center">
        --><!--<text-input width="100" height="100%" color=".3"/>--><!--
        <text text="Status Bar: nothing to show here."/>
        <text text="#opengl #fromscratch #c++" margin="0 0 0 10" color=".2 .5 1 1"/>
      </border>-->
    </node>
    <!--
    <border color="1 1 1 1" positioning="absolute" position="0 0" width="500" height="400">
      <image-texture id="tex-debug" width="100%" height="100%"></image-texture>
    </border>
    -->
    <!-- <color-picker/> -->
</layout>
</root>
