<!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 Copyright (C) Siemens AG 2017. All Rights Reserved. -->

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:hmi-bind--xlink="http://svg.siemens.com/hmi/bind/xlink/"
     xmlns:hmi="http://svg.siemens.com/hmi/"
     xmlns:hmi-bind="http://svg.siemens.com/hmi/bind/"
     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/"
     viewBox="0 0 256 300"
     preserveAspectRatio="none">

	<hmi:self type="widget" displayName="Tank4" name="extended.Tank4" version="1.0.1" performanceClass="L">
		<hmi:paramDef name="BasicColor"        type="HmiColor"  default="0xFFEEEEEE"/>
    <hmi:paramDef name="FillLevelColor"    type="HmiColor"  default="0xFFFFA100"/>
		<hmi:paramDef name="FillLevelValue"    type="number"    default="50"/>
		<hmi:paramDef name="Minimum"           type="number"    default="0"/>
		<hmi:paramDef name="Maximum"           type="number"    default="100"/>
		<!-- <hmi:paramDef name="FluidRotation"     type="number"    default="0"/> -->
		<hmi:paramDef name="DisplayFillLevel"  type="boolean"   default="false"/>
		<hmi:paramDef name="DisplayFillMode"   type="enum"		default="0">
      <hmi:enum-member name ="Filling Bar" value ="0" />
      <hmi:enum-member name ="Filling Reflection" value ="1" />
    </hmi:paramDef>
  </hmi:self>

  <defs>
    <hmi:localDef name="Color"										type="HmiColor" hmi-bind:value="{{ParamProps.BasicColor}}"/>
	  <hmi:localDef name="FillLevelValue"						type="number"		hmi-bind:value="{{Converter.Bounds((ParamProps.FillLevelValue-ParamProps.Minimum)/(ParamProps.Maximum-ParamProps.Minimum), 0.0, 1.0)}}"/>
		<hmi:localDef name="DisplayFillingBar" 				type="boolean"  hmi-bind:value="{{ and( eq(ParamProps.DisplayFillMode, 0), ParamProps.DisplayFillLevel ) }}"/>
		<hmi:localDef name="DisplayFillingReflection" type="boolean"  hmi-bind:value="{{ and( eq(ParamProps.DisplayFillMode, 1), ParamProps.DisplayFillLevel ) }}"/>
		<hmi:localDef name="FluidRotation" 			  		type="number" 	hmi-bind:value="{{0}}"/>	<!-- if FluidRotation is used: hmi-bind:value="{{Converter.Bounds(ParamProps.FluidRotation, -90, 0.0)}}-->
  </defs>
  <g id="Hopper_1_">
    <linearGradient id="Shape_1_" gradientUnits="userSpaceOnUse" x1="-81.8037" y1="165.9463" x2="223.9373" y2="261.4375">
      <stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.353))}}"/>
      <stop offset="7.102013e-02" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.290))}}"/>
      <stop offset="0.2252" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.173))}}"/>
      <stop offset="0.3574" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.102))}}"/>
      <stop offset="0.4515" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.075))}}"/>
      <stop offset="0.534" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.090))}}"/>
      <stop offset="0.6178" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.137))}}"/>
      <stop offset="0.7023" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.220))}}"/>
      <stop offset="0.7872" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.329))}}"/>
      <stop offset="0.8725" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.475))}}"/>
      <stop offset="0.9569" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.647))}}"/>
      <stop offset="1" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.749))}}"/>
    </linearGradient>
    <polygon id="Shape_3_" fill="url(#Shape_1_)" stroke="#8C8C91" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="152.2,297.6 103.7,297.6 2.3,197 253.6,197"/>
    <linearGradient id="Reflection_Gradation_2_" gradientUnits="userSpaceOnUse" x1="96.4253" y1="213.9336" x2="26.5929" y2="271.1239">
      <stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.000))}}"/>
      <stop offset="1" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.516))}}"/>
    </linearGradient>
    <polyline id="Reflection_Gradation_1_" fill="url(#Reflection_Gradation_2_)" stroke="#8C8C91" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="109,297.6 103.7,297.6 2.3,197 28.1,197"/>
    <linearGradient id="Reflection_White_2_" gradientUnits="userSpaceOnUse" x1="101.1479" y1="227.7075" x2="-16.1522" y2="308.0369">
			<stop offset="0" stop-color="#F2F2F2" stop-opacity="0.77"/>
			<stop offset="1" stop-color="#F7F7F7" stop-opacity="0.2"/>
    </linearGradient>
    <polygon id="Reflection_White_1_" fill="url(#Reflection_White_2_)" points="28.1,197.5 108.7,297.1 116.9,297.1 71.1,197.5"/>
  </g>
  <g id="Body_2_">
    <linearGradient id="Shape_4_" gradientUnits="userSpaceOnUse" x1="4.9097" y1="121.1636" x2="250.3933" y2="121.1636">
      <stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.353))}}"/>
      <stop offset="4.758149e-02" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.290))}}"/>
      <stop offset="0.1509" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.173))}}"/>
      <stop offset="0.2395" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.102))}}"/>
      <stop offset="0.3025" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.075))}}"/>
      <stop offset="0.4074" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.090))}}"/>
      <stop offset="0.514" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.137))}}"/>
      <stop offset="0.6214" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.220))}}"/>
      <stop offset="0.7294" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.329))}}"/>
      <stop offset="0.8378" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.475))}}"/>
      <stop offset="0.9452" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.647))}}"/>
      <stop offset="1" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.749))}}"/>
    </linearGradient>
    <rect id="Shape_2_" x="2.3" y="45.3" fill="url(#Shape_4_)" stroke="#8C8C91" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="251.3" height="151.7"/>
    <linearGradient id="Reflection_3_" gradientUnits="userSpaceOnUse" x1="26.4448" y1="120.9902" x2="40.4434" y2="120.9902">
      <stop offset="0" stop-color="#F2F2F2" stop-opacity="0.4"/>
      <stop offset="1" stop-color="#F7F7F7" stop-opacity="0.7"/>
    </linearGradient>
    <path id="Reflection_2_" fill="url(#Reflection_3_)" d="M28.1,45.7c0,31.5,0,133.6,0,150.6H71c0-16.4,0-101,0-150.6H28.1z"/>
  </g>
  <g id="Head">
    <linearGradient id="Shape_5_" gradientUnits="userSpaceOnUse" x1="2.3184" y1="23.8652" x2="253.5723" y2="23.8652">
      <stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.353))}}"/>
      <stop offset="4.758149e-02" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.290))}}"/>
      <stop offset="0.1509" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.173))}}"/>
      <stop offset="0.2395" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.102))}}"/>
      <stop offset="0.3025" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.075))}}"/>
      <stop offset="0.4074" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.090))}}"/>
      <stop offset="0.514" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.137))}}"/>
      <stop offset="0.6214" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.220))}}"/>
      <stop offset="0.7294" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.329))}}"/>
      <stop offset="0.8378" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.475))}}"/>
      <stop offset="0.9452" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.647))}}"/>
      <stop offset="1" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.749))}}"/>
    </linearGradient>
    <path id="Shape" fill="url(#Shape_5_)" stroke="#8C8C91" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M129.3,2.4c-0.5,0-0.9,0-1.3,0c-0.5,0-0.9,0-1.3,0C2.3,2.4,2.3,34.6,2.3,45.3h251.3C253.6,34.6,253.5,2.4,129.3,2.4z"/>
    <linearGradient id="Reflection_4_" gradientUnits="userSpaceOnUse" x1="25.3374" y1="24.3745" x2="48.7673" y2="24.3745">
      <stop offset="0" stop-color="#F2F2F2" stop-opacity="0.4"/>
      <stop offset="1" stop-color="#F7F7F7" stop-opacity="0.7"/>
    </linearGradient>
    <path id="Reflection_1_" fill="url(#Reflection_4_)" d="M71,44.8C71,16,99.9,4,99.9,4S36.2,2.9,28.1,44.8H71z"/>
  </g>
  <g id="FillingGroup">
		<g id="FillingReflection">
			<linearGradient id="Filling_1_" gradientUnits="userSpaceOnUse" x2="0" y2="4" x1="0" y1="297.1" hmi-bind:gradientTransform="rotate({{LocalProps.FluidRotation}}, 0, 0)">
				<stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(ParamProps.FillLevelColor)}}"/>
				<stop hmi-bind:offset="{{LocalProps.FillLevelValue}}" hmi-bind:stop-color="{{Converter.RGBA(ParamProps.FillLevelColor)}}"/>
				<stop hmi-bind:offset="{{LocalProps.FillLevelValue}}"	stop-color="white" stop-opacity="0.0"/>
				<stop offset="1" stop-color="white" stop-opacity="0.0"/>
			</linearGradient>
			<path id="ReflectionFilling" fill="url(#Filling_1_)" hmi-bind:display="{{ and( and( gt( LocalProps.FluidRotation, -90.0 ), gt( LocalProps.FillLevelValue, 0 )), LocalProps.DisplayFillingReflection ) ? 'inline' : 'none'}}" d="M28.1,45.7 L28.1,197.5 108.7,297.1 116.9,297.1 71.1,197.5 71.1,45.7 C71,16,99.9,4,99.9,4S36.2,2.9,28.1,44.8H71z"/>
			<linearGradient id="Filling_1_Vertical" gradientUnits="userSpaceOnUse" x1="0" y1="116" x2="0" y2="28.1" hmi-bind:gradientTransform="rotate({{LocalProps.FluidRotation}}, 0, 0)">
				<stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(ParamProps.FillLevelColor)}}"/>
				<stop hmi-bind:offset="{{LocalProps.FillLevelValue}}" hmi-bind:stop-color="{{Converter.RGBA(ParamProps.FillLevelColor)}}"/>
				<stop hmi-bind:offset="{{LocalProps.FillLevelValue}}"	stop-color="white" stop-opacity="0.0"/>
				<stop offset="1" stop-color="white" stop-opacity="0.0"/>
			</linearGradient>
			<path id="FillingReflectionVertical" fill="url(#Filling_1_Vertical)" hmi-bind:display="{{ and( and( le( LocalProps.FluidRotation, -90.0 ), gt( LocalProps.FillLevelValue, 0 )), LocalProps.DisplayFillingReflection ) ? 'inline' : 'none'}}" d="M28.1,45.7 L 28.1,197.5 108.7,297.1 116.9,297.1 71.1,197.5 71.1,45.7 C71,16,99.9,4,99.9,4S36.2,2.9,28.1,44.8H71z"/>
		</g>
    <path id="Reflection_Lines_1_" fill="none" stroke="#FFFFFF" stroke-width="0.75" stroke-miterlimit="10" d="M2.7,197.4h250.5   M2.7,46.1h250.5"/>
    <path id="Devider_Lines_1_" fill="none" stroke="#646567" stroke-width="0.75" stroke-miterlimit="10" d="M253.2,196.6H2.7   M253.2,45.3H2.7"/>
		<g id="FillingRectangle" transform="translate(30,1)" hmi-bind:display="{{LocalProps.DisplayFillingBar ? 'inline' : 'none'}}">
			<linearGradient id="Frame_1_" gradientUnits="userSpaceOnUse" x1="140.2148" y1="150.01221" x2="40.857803" y2="150.01221">
				<stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.000))}}"/>
				<stop offset="1" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.316))}}"/>
			</linearGradient>
			<path id="Frame" fill="url(#Frame_1_)" stroke="#8C8C91" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="m 88.508937,33.465239 c -0.370891,0 -0.679965,1.571285 -0.679965,3.456828 V 238.12529 c 0,1.88555 0.309074,3.45682 0.679965,3.45682 h 19.533633 c 0.37088,0 0.67997,-1.57127 0.67997,-3.45682 V 37.000631 c 0,-1.885542 -0.30909,-3.456829 -0.67997,-3.456829 H 88.508937 Z"/>
			<linearGradient id="Opening_1_" gradientUnits="userSpaceOnUse" x1="189.2148" y1="150.01221" x2="84.857803" y2="150.01221">
				<stop offset="0" stop-color="#6B6B6A"/>
				<stop offset="1" stop-color="#434343"/>
			</linearGradient>
			<rect id="Opening" x="91.1" y="37.5" fill="url(#Opening_1_)" stroke="#575756" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="14.5" height="200"/>
			<linearGradient id="FillingBar" gradientUnits="userSpaceOnUse" x1="0" y1="237" x2="0"  y2="38" hmi-bind:gradientTransform="rotate({{LocalProps.FluidRotation}}, 0, 0)">
				<stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(ParamProps.FillLevelColor)}}"/>
				<stop hmi-bind:offset="{{LocalProps.FillLevelValue}}"	hmi-bind:stop-color="{{Converter.RGBA(ParamProps.FillLevelColor)}}"/>
				<stop hmi-bind:offset="{{LocalProps.FillLevelValue}}"	stop-color="white" stop-opacity="0.0"/>
				<stop offset="1" stop-color="white" stop-opacity="0.0"/>
			</linearGradient>
			<rect id="FillLevel1" x="91.8" y="38" fill="url(#FillingBar)" hmi-bind:display="{{ and( and( gt( LocalProps.FluidRotation, -90.0 ), gt( LocalProps.FillLevelValue, 0 )), LocalProps.DisplayFillingBar ) ? 'inline' : 'none'}}" width="13.2" height="199"/>
			<linearGradient id="FillingBarVertical" gradientUnits="userSpaceOnUse" x1="0" y1="105" x2="0"  y2="91.8" hmi-bind:gradientTransform="rotate({{LocalProps.FluidRotation}}, 0,0)">
				<stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(ParamProps.FillLevelColor)}}"/>
				<stop hmi-bind:offset="{{LocalProps.FillLevelValue}}"	hmi-bind:stop-color="{{Converter.RGBA(ParamProps.FillLevelColor)}}"/>
				<stop hmi-bind:offset="{{LocalProps.FillLevelValue}}"	stop-color="white" stop-opacity="0.0"/>
				<stop offset="1" stop-color="white" stop-opacity="0.0"/>
			</linearGradient>
			<rect id="OpeningVertical" x="91.8" y="38" fill="ur l(#FillingBarVertical)" hmi-bind:display="{{ and( and( le( LocalProps.FluidRotation, -90.0 ), gt( LocalProps.FillLevelValue, 0 )), LocalProps.DisplayFillingBar ) ? 'inline' : 'none'}}" width="13.2" height="199"/>
		</g>
  </g>
</svg>