<!DOCTYPE svg PUBLIC "-//SIEMENS//DTD SVG 1.0 TIA-HMI//EN" "http://tia.siemens.com/graphics/svg/1.4/dtd/svg14-hmi.dtd">
<!-- SIMATIC WINCC Custom Widget -->

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:hmi-bind="http://svg.siemens.com/hmi/bind"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:hmi="http://svg.siemens.com/hmi/"
    xmlns:hmi-bind--xlink="http://svg.siemens.com/hmi/bind/xlink"
    xmlns:hmi-element="http://svg.siemens.com/hmi/element"
    xmlns:hmi-feature="http://svg.siemens.com/hmi/feature"
    xmlns:hmi-event="http://svg.siemens.com/hmi/event"
    width="200" height="100"
    viewBox="0 0 200 100">

  <hmi:self type="Widget" name="custom.Value" displayName="Value Display" version="1.0.0" performanceClass="L">
    <hmi:paramDef name="Value" type="number" default="0" />
  </hmi:self>

  <!-- Background -->
  <rect x="0" y="0" width="200" height="100" rx="6" ry="6"
        fill="#1A1A1A" />

  <!-- Test 1: hmi:text with integer format -->
  <text x="10" y="22"
        font-family="Arial, sans-serif" font-size="10"
        fill="#888888">Integer {I}:</text>
  <text x="120" y="22"
        font-family="Arial, sans-serif" font-size="12" font-weight="bold"
        fill="#FFFFFF" text-anchor="start">
    <hmi:text hmi-bind:value="{{ Converter.FormatPattern( ParamProps.Value, '{I}' ) }}" />
  </text>

  <!-- Test 2: hmi:text with 1 decimal format -->
  <text x="10" y="46"
        font-family="Arial, sans-serif" font-size="10"
        fill="#888888">1 dec {F1}:</text>
  <text x="120" y="46"
        font-family="Arial, sans-serif" font-size="12" font-weight="bold"
        fill="#FFFFFF" text-anchor="start">
    <hmi:text hmi-bind:value="{{ Converter.FormatPattern( ParamProps.Value, '{F1}' ) }}" />
  </text>

  <!-- Test 3: hmi:text plain value (no format) -->
  <text x="10" y="70"
        font-family="Arial, sans-serif" font-size="10"
        fill="#888888">Plain:</text>
  <text x="120" y="70"
        font-family="Arial, sans-serif" font-size="12" font-weight="bold"
        fill="#FFFFFF" text-anchor="start">
    <hmi:text hmi-bind:value="{{ ParamProps.Value }}" />
  </text>

  <!-- Test 4: hmi:text with % suffix via string concat -->
  <text x="10" y="94"
        font-family="Arial, sans-serif" font-size="10"
        fill="#888888">With %:</text>
  <text x="120" y="94"
        font-family="Arial, sans-serif" font-size="12" font-weight="bold"
        fill="#FFFFFF" text-anchor="start">
    <hmi:text hmi-bind:value="{{ Converter.FormatPattern( ParamProps.Value, '{F1}' ) }}" />
    <tspan>%</tspan>
  </text>

</svg>
