<!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 101 300"
     preserveAspectRatio="none">

	<hmi:self type="widget" displayName="Silo" name="extended.Silo" 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="Silo_1_">
    <linearGradient id="Shape_1_" gradientUnits="userSpaceOnUse" x1="3.3535" y1="167.5557" x2="97.2862" y2="167.5557">
      <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_7_" x="2.4" y="45.8" fill="url(#Shape_1_)" stroke="#8C8C91" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="96.1" height="243.6"/>
    <linearGradient id="Reflection_1_" gradientUnits="userSpaceOnUse" x1="11.5947" y1="167.5332" x2="16.9509" y2="167.5332">
      <stop offset="0" stop-color="#F2F2F2" stop-opacity="0.4"/>
      <stop offset="1" stop-color="#F7F7F7" stop-opacity="0.7"/>
    </linearGradient>
    <path id="Reflection_10_" fill="url(#Reflection_1_)" d="M12.2,46.2c0,13.1,0,235.7,0,242.7h16.4c0-6.8,0-222.1,0-242.7H12.2z"/>
  </g>
  <linearGradient id="Base_1_" gradientUnits="userSpaceOnUse" x1="3.3882" y1="293.499" x2="96.473" y2="293.499">
    <stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.602))}}"/>
    <stop offset="4.742068e-02" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.525))}}"/>
    <stop offset="0.1305" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.412))}}"/>
    <stop offset="0.2017" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.339))}}"/>
    <stop offset="0.2524" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.316))}}"/>
    <stop offset="0.3942" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.331))}}"/>
    <stop offset="0.5382" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.378))}}"/>
    <stop offset="0.6834" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.459))}}"/>
    <stop offset="0.8292" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.571))}}"/>
    <stop offset="0.9744" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.712))}}"/>
    <stop offset="1" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.741))}}"/>
  </linearGradient>
  <rect id="Base" x="2.4" y="289.4" fill="url(#Base_1_)" stroke="#646567" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="96.1" height="8.3"/>
  <g id="Head">
    <linearGradient id="Shape_2_" gradientUnits="userSpaceOnUse" x1="3.3535" y1="24.0137" x2="97.2862" y2="24.0137">
      <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_9_" fill="url(#Shape_2_)" stroke="#8C8C91" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M98.5,45.8c0,0,0-43.5-48.6-43.5c-47.5,0-47.6,39-47.6,43.5H98.5z"/>
    <linearGradient id="Reflection_2_" gradientUnits="userSpaceOnUse" x1="11.3394" y1="24.248" x2="16.6289" y2="24.248">
      <stop offset="0" stop-color="#F2F2F2" stop-opacity="0.4"/>
      <stop offset="1" stop-color="#F7F7F7" stop-opacity="0.7"/>
    </linearGradient>
    <path id="Reflection_11_" fill="url(#Reflection_2_)" d="M28.6,45.6c0-37.5,18.2-42.7,18.2-42.7S15.3,2.7,12.2,45.6H28.6z"/>
    <path id="Devider_Lines_1_" fill="none" stroke="#8C8C91" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M40.6,45.8c0-42.6,9.3-43.5,9.3-43.5 M49.8,2.2c0,0-25.8,0.9-25.8,43.5 M49.7,2.2c0,0-40.3,0.9-40.3,43.5 M59,45.8   c0-42.6-9.3-43.5-9.3-43.5 M75.6,45.8c0-42.6-25.8-43.5-25.8-43.5 M90.2,45.8c0-42.6-40.3-43.5-40.3-43.5"/>
  </g>
  <g id="FillingGroup">
		<g id="FillingReflection">
			<linearGradient id="Filling_1_" gradientUnits="userSpaceOnUse" x2="0" y2="4" x1="0" y1="288.7" 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="M12.2,46.2c0,13.1,0,235.7,0,242.7h16.4c0-6.8,0-222.1,0-242.7 c0-37.5,18.2-42.7,18.2-42.7S15.3,2.7,12.2,45.6H28.6z"/>
			<linearGradient id="Filling_1_Vertical" gradientUnits="userSpaceOnUse" x1="0" y1="43" x2="0" y2="12.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="M12.2,46.2c0,13.1,0,235.7,0,242.7h16.4c0-6.8,0-222.1,0-242.7 c0-37.5,18.2-42.7,18.2-42.7S15.3,2.7,12.2,45.6H28.6z"/>
		</g>
		<path id="Reflection_Lines" fill="none" stroke="#FFFFFF" stroke-width="0.75" stroke-miterlimit="10" d="M2.8,46.5h95.3 M2.8,66.8  h95.3 M2.8,87.1h95.3 M2.8,107.4h95.3 M2.8,127.7h95.3 M2.8,148h95.3 M2.8,168.3h95.3 M2.8,188.5h95.3 M2.8,208.8h95.3 M2.8,229.1  h95.3 M2.8,249.4h95.3 M2.8,269.7h95.3 M2.8,290.1h95.3"/>
    <path id="Devider_Lines" fill="none" stroke="#646567" stroke-width="0.75" stroke-miterlimit="10" d="M98.1,45.8H2.8 M98.1,66.1  H2.8 M98.1,86.4H2.8 M98.1,106.6H2.8 M98.1,126.9H2.8 M98.1,147.2H2.8 M98.1,167.5H2.8 M98.1,187.8H2.8 M98.1,208.1H2.8 M98.1,228.4  H2.8 M98.1,248.7H2.8 M98.1,269H2.8"/>
		<g id="FillingRectangle" transform="translate(-48, 16)" 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.533761,33.49179 c -0.369949,0 -0.678238,1.789227 -0.678238,3.9363 v 229.11066 c 0,2.14708 0.308289,3.9363 0.678238,3.9363 h 19.483989 c 0.36994,0 0.67823,-1.78922 0.67823,-3.9363 V 37.517551 c 0,-2.147072 -0.30829,-3.9363 -0.67823,-3.9363 H 88.533761 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="229.4"/>
			<linearGradient id="FillingBar" gradientUnits="userSpaceOnUse" x1="0" y1="266.4" 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.3" height="228.4"/>
			<linearGradient id="FillingVertical" gradientUnits="userSpaceOnUse" x1="0" y1="105.1" 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="url(#FillingVertical)" hmi-bind:display="{{ and( and( le( LocalProps.FluidRotation, -90.0 ), gt( LocalProps.FillLevelValue, 0 )), LocalProps.DisplayFillingBar ) ? 'inline' : 'none'}}" width="13.3" height="228.4"/>
		</g>
  </g>
</svg>