FastWeb之SVG组态

1. 说明

  SVG是一种可缩放矢量图形，其使用XML来描述形状特征，关于SVG的说明等信息可参考https://developer.mozilla.org/zh-CN/docs/Web/SVG (opens new window)。由于其矢量图的特性，在进行编辑缩放等相关操作后，图形不失真，可广泛用于图形展示的场合。组态界面由于其图形的特性，非常适合使用SVG来展示。

  通过本范例学习，可以掌握使用SVG来展示组态的界面，并通过控件来实现组态界面的动态显示。

2. 设计明细

  开启FastWeb设计器，分别加入下插图之控件。或者点击左上角的[导入]选择模板文件来打开对应模板。

  1：TUgFSToggle组件，控件名称为UgFSToggle01。

  2：TUgFSToggle组件，控件名称为UgFSToggle02。

  3：TUgFSToggle组件，控件名称为UgFSToggle03。

  4：TUgFSToggle组件，控件名称为UgFSToggle04。

  5：TUgSVGImageList组件，控件名称为UgSVGImageList01。

  6：TUgSVGImageList组件，控件名称为UgSVGImageList02。

  7：TUgMeterLed组件，控件名称为ugMeterLed01。

  8：TUgMeterLed组件，控件名称为ugMeterLed02。

  9：TUgMeterLed组件，控件名称为ugMeterLed03。

  10：TUgMeterLed组件，控件名称为ugMeterLed04。

  11：TUgMeterLed组件，控件名称为ugMeterLed05。

  12：TUgMeterLed组件，控件名称为ugMeterLed06。

  13：TUgMeterLed组件，控件名称为ugMeterLed07。

  14：TUgMeterLed组件，控件名称为ugMeterLed08。

  15：TUgLabel组件，控件名称为UgLabel01。

  16：TUgLabel组件，控件名称为UgLabel02。

  17：TUgLabel组件，控件名称为UgLabel03。

  18：TUgLabel组件，控件名称为UgLabel05。

  19：TUgLabel组件，控件名称为UgLabel06。

  20：TUgLabel组件，控件名称为UgLabel04。

  21：TUgLabel组件，控件名称为UgLabel07。

  22：TUgLabel组件，控件名称为UgLabel08。

• UgWebRunFrame属性设置

  • Height：设置页面高度=650。
  • Width：设置页面宽度=900。

• UgImage01属性设置

  • Align：设置控件的对齐方式，设置为alClient。
  • Picture：设置图片，点击右侧的[√]按钮打开图片编辑器，编辑图片信息。

• 5：UgSVGImageList01属性设置

    双击控件，打开SVG列表编辑器，在编辑器中上传svg文件，上传的文件内容如下，将以下的内容创建为svg文件并上传。

  

<!DOCTYPE svg PUBLIC"-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]><svg version="1.1"id="Layer_1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="64px"height="64px"viewBox="0 0 125.921 121.105"enable-background="new 0 0 125.921 121.105"xml:space="preserve"><g id="Group_OutletPort"><linearGradient id="SVGID_1_"gradientUnits="userSpaceOnUse"x1="119.3706"y1="-412.0227"x2="119.3706"y2="-361.6145"gradientTransform="matrix(1 0 0 -1 0 -360.895)"><stop offset="0"style="stop-color:#4D4D4D"/><stop offset="0.21"style="stop-color:#717171"/><stop offset="0.54"style="stop-color:#A6A6A6"/><stop offset="0.64"style="stop-color:#9F9F9F"/><stop offset="0.79"style="stop-color:#8C8C8C"/><stop offset="0.97"style="stop-color:#6D6D6D"/><stop offset="1"style="stop-color:#666666"/></linearGradient><rect x="112.821"y="0.719"fill="url(#SVGID_1_)"stroke="#B3B3B3"stroke-width="0.5"width="13.101"height="50.408"/><linearGradient id="SVGID_2_"gradientUnits="userSpaceOnUse"x1="83.0708"y1="76.9197"x2="83.0708"y2="115.9207"gradientTransform="matrix(1 0 0 -1 0 122.105)"><stop offset="0"style="stop-color:#4D4D4D"/><stop offset="0.52"style="stop-color:#B2B2B2"/><stop offset="1"style="stop-color:#666666"/></linearGradient><polyline fill="url(#SVGID_2_)"points="53.235,6.184 112.907,6.184 112.907,45.185 102.517,45.185  "/></g><g id="Group_Legs"><linearGradient id="SVGID_3_"gradientUnits="userSpaceOnUse"x1="52.5283"y1="1094.1335"x2="52.5283"y2="1058.2527"gradientTransform="matrix(1 0 0 1 0 -973.75)"><stop offset="0"style="stop-color:#999999"/><stop offset="1"style="stop-color:#666666"/></linearGradient><path fill="url(#SVGID_3_)"stroke="#999999"stroke-width="0.396"d="M11.321,120.384l10.254-35.881h61.908l10.252,35.881H72.966   L52.462,89.497l-20.769,30.887H11.321z"/></g><g id="Group_LegBase"><path fill="#999999"stroke="#B3B3B3"stroke-width="0.5"d="M0.76,115.851h37.533v5.254H0.76V115.851z"/><path fill="#999999"stroke="#B3B3B3"stroke-width="0.5"d="M66.603,115.851h37.929v5.254H66.603V115.851L66.603,115.851z"/></g><g id="Group_PumpBody"><radialGradient id="SVGID_4_"cx="126.48"cy="837.1521"r="51.5659"gradientTransform="matrix(0.9999 0.0069 -0.0069 0.9999 -67.9976 -780.2224)"gradientUnits="userSpaceOnUse"><stop offset="0.18"style="stop-color:#333333"/><stop offset="0.26"style="stop-color:#383838"/><stop offset="0.35"style="stop-color:#454545"/><stop offset="0.44"style="stop-color:#5C5C5C"/><stop offset="0.54"style="stop-color:#7B7B7B"/><stop offset="0.64"style="stop-color:#A4A4A4"/><stop offset="0.72"style="stop-color:#CCCCCC"/><stop offset="0.81"style="stop-color:#B1B1B1"/><stop offset="0.99"style="stop-color:#6B6B6B"/><stop offset="1"style="stop-color:#666666"/></radialGradient><path fill="url(#SVGID_4_)"d="M53.047,6.158c28.477,0.196,51.402,23.439,51.207,51.917c-0.195,28.475-23.438,51.398-51.914,51.204   C23.862,109.086,0.938,85.841,1.133,57.364C1.326,28.889,24.573,5.963,53.047,6.158z"/></g><g id="Group_CenterShade"><radialGradient id="SVGID_5_"cx="52.4468"cy="-418.7268"r="27.2441"gradientTransform="matrix(1 0 0 -1 0 -360.895)"gradientUnits="userSpaceOnUse"><stop offset="0"style="stop-color:#000000"/><stop offset="1"style="stop-color:#333333"/></radialGradient><path fill="url(#SVGID_5_)"d="M38.399,81.168C25.508,73.407,21.35,56.67,29.111,43.78c7.762-12.888,24.502-17.045,37.385-9.285   c12.891,7.761,17.047,24.498,9.289,37.393C68.021,84.769,51.286,88.928,38.399,81.168z"/></g><g id="Group_Impeller"><linearGradient id="SVGID_6_"gradientUnits="userSpaceOnUse"x1="101.9819"y1="125.5398"x2="106.1411"y2="125.5342"gradientTransform="matrix(0.9889 0.1484 0.1484 -0.9889 -69.6528 166.4384)"><stop offset="0.01"style="stop-color:#666666"/><stop offset="0.51"style="stop-color:#B8B8B8"/><stop offset="1"style="stop-color:#666666"/></linearGradient><path fill="url(#SVGID_6_)"d="M51.014,77.055c-0.642,4.14-2.024,7.351-3.166,7.187c-1.139-0.165-1.545-3.651-0.902-7.789   l0.014-0.081l5.874-37.983c0.64-4.139,1.986-7.314,3.125-7.149c1.142,0.163,1.507,3.623,0.866,7.76L51.014,77.055z"/><linearGradient id="SVGID_7_"gradientUnits="userSpaceOnUse"x1="-277.9653"y1="21.0618"x2="-273.8071"y2="21.0562"gradientTransform="matrix(0.6317 -0.7752 -0.7752 -0.6317 243.0495 -142.3917)"><stop offset="0.01"style="stop-color:#666666"/><stop offset="0.51"style="stop-color:#B8B8B8"/><stop offset="1"style="stop-color:#666666"/></linearGradient><path fill="url(#SVGID_7_)"d="M68.625,68.765c3.234,2.659,5.291,5.485,4.57,6.387c-0.724,0.895-3.931-0.533-7.162-3.193   l-0.063-0.053L36.284,47.493c-3.234-2.66-5.28-5.437-4.559-6.333c0.722-0.898,3.884,0.55,7.117,3.21L68.625,68.765z"/><linearGradient id="SVGID_8_"gradientUnits="userSpaceOnUse"x1="216.7651"y1="433.1179"x2="220.9233"y2="433.1123"gradientTransform="matrix(0.4225 0.9064 0.9064 -0.4225 -432.8737 42.0522)"><stop offset="0.01"style="stop-color:#666666"/><stop offset="0.51"style="stop-color:#B8B8B8"/><stop offset="1"style="stop-color:#666666"/></linearGradient><path fill="url(#SVGID_8_)"d="M35.58,67.368c-3.803,1.752-7.245,2.373-7.739,1.332c-0.491-1.041,2.193-3.306,5.994-5.057   l0.076-0.033L68.82,47.527c3.805-1.752,7.195-2.384,7.686-1.345c0.494,1.041-2.188,3.258-5.99,5.008L35.58,67.368z"/><radialGradient id="SVGID_9_"cx="51.9766"cy="64.4246"r="6.541"gradientTransform="matrix(1 0 0 -1 0 122.105)"gradientUnits="userSpaceOnUse"><stop offset="0"style="stop-color:#B8B8B8"/><stop offset="0.47"style="stop-color:#B6B6B6"/><stop offset="0.64"style="stop-color:#AFAFAF"/><stop offset="0.76"style="stop-color:#A3A3A3"/><stop offset="0.85"style="stop-color:#929292"/><stop offset="0.94"style="stop-color:#7D7D7D"/><stop offset="1"style="stop-color:#666666"/></radialGradient><path fill="url(#SVGID_9_)"d="M53.274,51.269c3.543,0.718,5.829,4.168,5.11,7.709c-0.717,3.544-4.167,5.83-7.71,5.113   c-3.536-0.719-5.824-4.171-5.105-7.711C46.284,52.844,49.739,50.552,53.274,51.269z"/></g></svg>

<?xml version="1.0"encoding="UTF-8"standalone="no"?><svg version="1.1"id="Layer_1"width="64px"height="64px"viewBox="0 0 125.921 121.105"enable-background="new 0 0 125.921 121.105"xml:space="preserve"sodipodi:docname="Cool pump 30.svg"inkscape:version="1.1 (c68e22c387, 2021-05-23)"xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"xmlns="http://www.w3.org/2000/svg"xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs122"/><sodipodi:namedview id="namedview120"pagecolor="#ffffff"bordercolor="#666666"borderopacity="1.0"inkscape:pageshadow="2"inkscape:pageopacity="0.0"inkscape:pagecheckerboard="0"showgrid="false"inkscape:zoom="12.984375"inkscape:cx="31.961492"inkscape:cy="32.038508"inkscape:window-width="1920"inkscape:window-height="1017"inkscape:window-x="-8"inkscape:window-y="-8"inkscape:window-maximized="1"inkscape:current-layer="Layer_1"/><g id="Group_OutletPort"><linearGradient id="SVGID_1_"gradientUnits="userSpaceOnUse"x1="119.3706"y1="-412.0227"x2="119.3706"y2="-361.6145"gradientTransform="matrix(1 0 0 -1 0 -360.895)"><stop offset="0"style="stop-color:#4D4D4D"id="stop2"/><stop offset="0.21"style="stop-color:#717171"id="stop4"/><stop offset="0.54"style="stop-color:#A6A6A6"id="stop6"/><stop offset="0.64"style="stop-color:#9F9F9F"id="stop8"/><stop offset="0.79"style="stop-color:#8C8C8C"id="stop10"/><stop offset="0.97"style="stop-color:#6D6D6D"id="stop12"/><stop offset="1"style="stop-color:#666666"id="stop14"/></linearGradient><rect x="112.821"y="0.719"fill="url(#SVGID_1_)"stroke="#B3B3B3"stroke-width="0.5"width="13.101"height="50.408"id="rect17"/><linearGradient id="SVGID_2_"gradientUnits="userSpaceOnUse"x1="83.0708"y1="76.9197"x2="83.0708"y2="115.9207"gradientTransform="matrix(1 0 0 -1 0 122.105)"><stop offset="0"style="stop-color:#4D4D4D"id="stop19"/><stop offset="0.52"style="stop-color:#B2B2B2"id="stop21"/><stop offset="1"style="stop-color:#666666"id="stop23"/></linearGradient><polyline fill="url(#SVGID_2_)"points="53.235,6.184 112.907,6.184 112.907,45.185 102.517,45.185  "id="polyline26"/></g><g id="Group_Legs"><linearGradient id="SVGID_3_"gradientUnits="userSpaceOnUse"x1="52.5283"y1="1094.1335"x2="52.5283"y2="1058.2527"gradientTransform="matrix(1 0 0 1 0 -973.75)"><stop offset="0"style="stop-color:#999999"id="stop29"/><stop offset="1"style="stop-color:#666666"id="stop31"/></linearGradient><path fill="url(#SVGID_3_)"stroke="#999999"stroke-width="0.396"d="M11.321,120.384l10.254-35.881h61.908l10.252,35.881H72.966   L52.462,89.497l-20.769,30.887H11.321z"id="path34"/></g><g id="Group_LegBase"><path fill="#999999"stroke="#B3B3B3"stroke-width="0.5"d="M0.76,115.851h37.533v5.254H0.76V115.851z"id="path37"/><path fill="#999999"stroke="#B3B3B3"stroke-width="0.5"d="M66.603,115.851h37.929v5.254H66.603V115.851L66.603,115.851z"id="path39"/></g><g id="Group_PumpBody"><radialGradient id="SVGID_4_"cx="126.48"cy="837.1521"r="51.5659"gradientTransform="matrix(0.9999 0.0069 -0.0069 0.9999 -67.9976 -780.2224)"gradientUnits="userSpaceOnUse"><stop offset="0.18"style="stop-color:#333333"id="stop42"/><stop offset="0.26"style="stop-color:#383838"id="stop44"/><stop offset="0.35"style="stop-color:#454545"id="stop46"/><stop offset="0.44"style="stop-color:#5C5C5C"id="stop48"/><stop offset="0.54"style="stop-color:#7B7B7B"id="stop50"/><stop offset="0.64"style="stop-color:#A4A4A4"id="stop52"/><stop offset="0.72"style="stop-color:#CCCCCC"id="stop54"/><stop offset="0.81"style="stop-color:#B1B1B1"id="stop56"/><stop offset="0.99"style="stop-color:#6B6B6B"id="stop58"/><stop offset="1"style="stop-color:#666666"id="stop60"/></radialGradient><path fill="url(#SVGID_4_)"d="M53.047,6.158c28.477,0.196,51.402,23.439,51.207,51.917c-0.195,28.475-23.438,51.398-51.914,51.204   C23.862,109.086,0.938,85.841,1.133,57.364C1.326,28.889,24.573,5.963,53.047,6.158z"id="path63"/></g><g id="Group_CenterShade"><radialGradient id="SVGID_5_"cx="52.4468"cy="-418.7268"r="27.2441"gradientTransform="matrix(1 0 0 -1 0 -360.895)"gradientUnits="userSpaceOnUse"><stop offset="0"style="stop-color:#000000"id="stop66"/><stop offset="1"style="stop-color:#333333"id="stop68"/></radialGradient><path fill="url(#SVGID_5_)"d="M38.399,81.168C25.508,73.407,21.35,56.67,29.111,43.78c7.762-12.888,24.502-17.045,37.385-9.285   c12.891,7.761,17.047,24.498,9.289,37.393C68.021,84.769,51.286,88.928,38.399,81.168z"id="path71"/></g><g id="Group_Impeller"transform="rotate(30,52.173848,57.740931)"><linearGradient id="SVGID_6_"gradientUnits="userSpaceOnUse"x1="101.9819"y1="125.5398"x2="106.1411"y2="125.5342"gradientTransform="matrix(0.9889,0.1484,0.1484,-0.9889,-69.6528,166.4384)"><stop offset="0.01"style="stop-color:#666666"id="stop74"/><stop offset="0.51"style="stop-color:#B8B8B8"id="stop76"/><stop offset="1"style="stop-color:#666666"id="stop78"/></linearGradient><path fill="url(#SVGID_6_)"d="m 51.014,77.055 c -0.642,4.14 -2.024,7.351 -3.166,7.187 -1.139,-0.165 -1.545,-3.651 -0.902,-7.789 l 0.014,-0.081 5.874,-37.983 c 0.64,-4.139 1.986,-7.314 3.125,-7.149 1.142,0.163 1.507,3.623 0.866,7.76 z"id="path81"style="fill:url(#SVGID_6_)"/><linearGradient id="SVGID_7_"gradientUnits="userSpaceOnUse"x1="-277.9653"y1="21.0618"x2="-273.8071"y2="21.0562"gradientTransform="matrix(0.6317,-0.7752,-0.7752,-0.6317,243.0495,-142.3917)"><stop offset="0.01"style="stop-color:#666666"id="stop83"/><stop offset="0.51"style="stop-color:#B8B8B8"id="stop85"/><stop offset="1"style="stop-color:#666666"id="stop87"/></linearGradient><path fill="url(#SVGID_7_)"d="m 68.625,68.765 c 3.234,2.659 5.291,5.485 4.57,6.387 -0.724,0.895 -3.931,-0.533 -7.162,-3.193 L 65.97,71.906 36.284,47.493 c -3.234,-2.66 -5.28,-5.437 -4.559,-6.333 0.722,-0.898 3.884,0.55 7.117,3.21 z"id="path90"style="fill:url(#SVGID_7_)"/><linearGradient id="SVGID_8_"gradientUnits="userSpaceOnUse"x1="216.76511"y1="433.11789"x2="220.92329"y2="433.1123"gradientTransform="matrix(0.4225,0.9064,0.9064,-0.4225,-432.8737,42.0522)"><stop offset="0.01"style="stop-color:#666666"id="stop92"/><stop offset="0.51"style="stop-color:#B8B8B8"id="stop94"/><stop offset="1"style="stop-color:#666666"id="stop96"/></linearGradient><path fill="url(#SVGID_8_)"d="m 35.58,67.368 c -3.803,1.752 -7.245,2.373 -7.739,1.332 -0.491,-1.041 2.193,-3.306 5.994,-5.057 L 33.911,63.61 68.82,47.527 c 3.805,-1.752 7.195,-2.384 7.686,-1.345 0.494,1.041 -2.188,3.258 -5.99,5.008 z"id="path99"style="fill:url(#SVGID_8_)"/><radialGradient id="SVGID_9_"cx="51.976601"cy="64.424599"r="6.5409999"gradientTransform="matrix(1,0,0,-1,0,122.105)"gradientUnits="userSpaceOnUse"><stop offset="0"style="stop-color:#B8B8B8"id="stop101"/><stop offset="0.47"style="stop-color:#B6B6B6"id="stop103"/><stop offset="0.64"style="stop-color:#AFAFAF"id="stop105"/><stop offset="0.76"style="stop-color:#A3A3A3"id="stop107"/><stop offset="0.85"style="stop-color:#929292"id="stop109"/><stop offset="0.94"style="stop-color:#7D7D7D"id="stop111"/><stop offset="1"style="stop-color:#666666"id="stop113"/></radialGradient><path fill="url(#SVGID_9_)"d="m 53.274,51.269 c 3.543,0.718 5.829,4.168 5.11,7.709 -0.717,3.544 -4.167,5.83 -7.71,5.113 -3.536,-0.719 -5.824,-4.171 -5.105,-7.711 0.715,-3.536 4.17,-5.828 7.705,-5.111 z"id="path116"style="fill:url(#SVGID_9_)"/></g></svg>

• 6：UgSVGImageList02属性设置

    双击控件，打开SVG列表编辑器，在编辑器中上传svg文件，上传的文件内容如下，将以下的内容创建为svg文件并上传。

  

<svg version="1.1"id="Layer_1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="64px"height="64px"viewBox="0 0 125.921 121.105"enable-background="new 0 0 125.921 121.105"xml:space="preserve"><g id="Group_OutletPort"><linearGradient id="SVGID_1_"gradientUnits="userSpaceOnUse"x1="119.3706"y1="-412.0227"x2="119.3706"y2="-361.6145"gradientTransform="matrix(1 0 0 -1 0 -360.895)"><stop offset="0"style="stop-color:#004C00"/><stop offset="0.21"style="stop-color:#007000"/><stop offset="0.54"style="stop-color:#4BA54B"/><stop offset="0.64"style="stop-color:#3D9E3D"/><stop offset="0.79"style="stop-color:#178B17"/><stop offset="0.97"style="stop-color:#006C00"/><stop offset="1"style="stop-color:#006500"/></linearGradient><rect x="112.821"y="0.719"fill="url(#SVGID_1_)"stroke="#B3B3B3"stroke-width="0.5"width="13.101"height="50.408"/><linearGradient id="SVGID_2_"gradientUnits="userSpaceOnUse"x1="83.0708"y1="76.9197"x2="83.0708"y2="115.9207"gradientTransform="matrix(1 0 0 -1 0 122.105)"><stop offset="0"style="stop-color:#004C00"/><stop offset="0.52"style="stop-color:#63B163"/><stop offset="1"style="stop-color:#006500"/></linearGradient><polyline fill="url(#SVGID_2_)"points="53.235,6.184 112.907,6.184 112.907,45.185 102.517,45.185  "/></g><g id="Group_Legs"><linearGradient id="SVGID_3_"gradientUnits="userSpaceOnUse"x1="52.5283"y1="1094.1335"x2="52.5283"y2="1058.2527"gradientTransform="matrix(1 0 0 1 0 -973.75)"><stop offset="0"style="stop-color:#319831"/><stop offset="1"style="stop-color:#006500"/></linearGradient><path fill="url(#SVGID_3_)"stroke="#999999"stroke-width="0.396"d="M11.321,120.384l10.254-35.881h61.908l10.252,35.881H72.966   L52.462,89.497l-20.769,30.887H11.321z"/></g><g id="Group_LegBase"><path fill="#319831"stroke="#B3B3B3"stroke-width="0.5"d="M0.76,115.851h37.533v5.254H0.76V115.851z"/><path fill="#319831"stroke="#B3B3B3"stroke-width="0.5"d="M66.603,115.851h37.929v5.254H66.603V115.851L66.603,115.851z"/></g><g id="Group_PumpBody"><radialGradient id="SVGID_4_"cx="126.48"cy="837.1521"r="51.5659"gradientTransform="matrix(0.9999 0.0069 -0.0069 0.9999 -67.9976 -780.2224)"gradientUnits="userSpaceOnUse"><stop offset="0.18"style="stop-color:#003200"/><stop offset="0.26"style="stop-color:#003700"/><stop offset="0.35"style="stop-color:#004400"/><stop offset="0.44"style="stop-color:#005B00"/><stop offset="0.54"style="stop-color:#007A00"/><stop offset="0.64"style="stop-color:#47A347"/><stop offset="0.72"style="stop-color:#97CB97"/><stop offset="0.81"style="stop-color:#61B061"/><stop offset="0.99"style="stop-color:#006A00"/><stop offset="1"style="stop-color:#006500"/></radialGradient><path fill="url(#SVGID_4_)"d="M53.047,6.158c28.477,0.196,51.402,23.439,51.207,51.917c-0.195,28.475-23.438,51.398-51.914,51.204   C23.862,109.086,0.938,85.841,1.133,57.364C1.326,28.889,24.573,5.963,53.047,6.158z"/></g><g id="Group_CenterShade"><radialGradient id="SVGID_5_"cx="52.4468"cy="-418.7268"r="27.2441"gradientTransform="matrix(1 0 0 -1 0 -360.895)"gradientUnits="userSpaceOnUse"><stop offset="0"style="stop-color:#000000"/><stop offset="1"style="stop-color:#003200"/></radialGradient><path fill="url(#SVGID_5_)"d="M38.399,81.168C25.508,73.407,21.35,56.67,29.111,43.78c7.762-12.888,24.502-17.045,37.385-9.285   c12.891,7.761,17.047,24.498,9.289,37.393C68.021,84.769,51.286,88.928,38.399,81.168z"/></g><g id="Group_Impeller"><linearGradient id="SVGID_6_"gradientUnits="userSpaceOnUse"x1="101.9819"y1="125.5398"x2="106.1411"y2="125.5342"gradientTransform="matrix(0.9889 0.1484 0.1484 -0.9889 -69.6528 166.4384)"><stop offset="0.01"style="stop-color:#006500"/><stop offset="0.51"style="stop-color:#6FB76F"/><stop offset="1"style="stop-color:#006500"/></linearGradient><path fill="url(#SVGID_6_)"d="M51.014,77.055c-0.642,4.14-2.024,7.351-3.166,7.187c-1.139-0.165-1.545-3.651-0.902-7.789   l0.014-0.081l5.874-37.983c0.64-4.139,1.986-7.314,3.125-7.149c1.142,0.163,1.507,3.623,0.866,7.76L51.014,77.055z"/><linearGradient id="SVGID_7_"gradientUnits="userSpaceOnUse"x1="-277.9653"y1="21.0618"x2="-273.8071"y2="21.0562"gradientTransform="matrix(0.6317 -0.7752 -0.7752 -0.6317 243.0495 -142.3917)"><stop offset="0.01"style="stop-color:#006500"/><stop offset="0.51"style="stop-color:#6FB76F"/><stop offset="1"style="stop-color:#006500"/></linearGradient><path fill="url(#SVGID_7_)"d="M68.625,68.765c3.234,2.659,5.291,5.485,4.57,6.387c-0.724,0.895-3.931-0.533-7.162-3.193   l-0.063-0.053L36.284,47.493c-3.234-2.66-5.28-5.437-4.559-6.333c0.722-0.898,3.884,0.55,7.117,3.21L68.625,68.765z"/><linearGradient id="SVGID_8_"gradientUnits="userSpaceOnUse"x1="216.7651"y1="433.1179"x2="220.9233"y2="433.1123"gradientTransform="matrix(0.4225 0.9064 0.9064 -0.4225 -432.8737 42.0522)"><stop offset="0.01"style="stop-color:#006500"/><stop offset="0.51"style="stop-color:#6FB76F"/><stop offset="1"style="stop-color:#006500"/></linearGradient><path fill="url(#SVGID_8_)"d="M35.58,67.368c-3.803,1.752-7.245,2.373-7.739,1.332c-0.491-1.041,2.193-3.306,5.994-5.057   l0.076-0.033L68.82,47.527c3.805-1.752,7.195-2.384,7.686-1.345c0.494,1.041-2.188,3.258-5.99,5.008L35.58,67.368z"/><radialGradient id="SVGID_9_"cx="51.9766"cy="64.4246"r="6.541"gradientTransform="matrix(1 0 0 -1 0 122.105)"gradientUnits="userSpaceOnUse"><stop offset="0"style="stop-color:#6FB76F"/><stop offset="0.47"style="stop-color:#6BB56B"/><stop offset="0.64"style="stop-color:#5DAE5D"/><stop offset="0.76"style="stop-color:#45A245"/><stop offset="0.85"style="stop-color:#239123"/><stop offset="0.94"style="stop-color:#007C00"/><stop offset="1"style="stop-color:#006500"/></radialGradient><path fill="url(#SVGID_9_)"d="M53.274,51.269c3.543,0.718,5.829,4.168,5.11,7.709c-0.717,3.544-4.167,5.83-7.71,5.113   c-3.536-0.719-5.824-4.171-5.105-7.711C46.284,52.844,49.739,50.552,53.274,51.269z"/></g></svg>

<?xml version="1.0"encoding="UTF-8"standalone="no"?><svg version="1.1"id="Layer_1"width="64px"height="64px"viewBox="0 0 125.921 121.105"enable-background="new 0 0 125.921 121.105"xml:space="preserve"sodipodi:docname="Cool pump 45.svg"inkscape:version="1.1 (c68e22c387, 2021-05-23)"xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"xmlns="http://www.w3.org/2000/svg"xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs122"/><sodipodi:namedview id="namedview120"pagecolor="#ffffff"bordercolor="#666666"borderopacity="1.0"inkscape:pageshadow="2"inkscape:pageopacity="0.0"inkscape:pagecheckerboard="0"showgrid="false"inkscape:zoom="12.984375"inkscape:cx="32.038508"inkscape:cy="32.038508"inkscape:window-width="1920"inkscape:window-height="1017"inkscape:window-x="-8"inkscape:window-y="-8"inkscape:window-maximized="1"inkscape:current-layer="Layer_1"/><g id="Group_OutletPort"><linearGradient id="SVGID_1_"gradientUnits="userSpaceOnUse"x1="119.3706"y1="-412.0227"x2="119.3706"y2="-361.6145"gradientTransform="matrix(1 0 0 -1 0 -360.895)"><stop offset="0"style="stop-color:#004C00"id="stop2"/><stop offset="0.21"style="stop-color:#007000"id="stop4"/><stop offset="0.54"style="stop-color:#4BA54B"id="stop6"/><stop offset="0.64"style="stop-color:#3D9E3D"id="stop8"/><stop offset="0.79"style="stop-color:#178B17"id="stop10"/><stop offset="0.97"style="stop-color:#006C00"id="stop12"/><stop offset="1"style="stop-color:#006500"id="stop14"/></linearGradient><rect x="112.821"y="0.719"fill="url(#SVGID_1_)"stroke="#B3B3B3"stroke-width="0.5"width="13.101"height="50.408"id="rect17"/><linearGradient id="SVGID_2_"gradientUnits="userSpaceOnUse"x1="83.0708"y1="76.9197"x2="83.0708"y2="115.9207"gradientTransform="matrix(1 0 0 -1 0 122.105)"><stop offset="0"style="stop-color:#004C00"id="stop19"/><stop offset="0.52"style="stop-color:#63B163"id="stop21"/><stop offset="1"style="stop-color:#006500"id="stop23"/></linearGradient><polyline fill="url(#SVGID_2_)"points="53.235,6.184 112.907,6.184 112.907,45.185 102.517,45.185  "id="polyline26"/></g><g id="Group_Legs"><linearGradient id="SVGID_3_"gradientUnits="userSpaceOnUse"x1="52.5283"y1="1094.1335"x2="52.5283"y2="1058.2527"gradientTransform="matrix(1 0 0 1 0 -973.75)"><stop offset="0"style="stop-color:#319831"id="stop29"/><stop offset="1"style="stop-color:#006500"id="stop31"/></linearGradient><path fill="url(#SVGID_3_)"stroke="#999999"stroke-width="0.396"d="M11.321,120.384l10.254-35.881h61.908l10.252,35.881H72.966   L52.462,89.497l-20.769,30.887H11.321z"id="path34"/></g><g id="Group_LegBase"><path fill="#319831"stroke="#B3B3B3"stroke-width="0.5"d="M0.76,115.851h37.533v5.254H0.76V115.851z"id="path37"/><path fill="#319831"stroke="#B3B3B3"stroke-width="0.5"d="M66.603,115.851h37.929v5.254H66.603V115.851L66.603,115.851z"id="path39"/></g><g id="Group_PumpBody"><radialGradient id="SVGID_4_"cx="126.48"cy="837.1521"r="51.5659"gradientTransform="matrix(0.9999 0.0069 -0.0069 0.9999 -67.9976 -780.2224)"gradientUnits="userSpaceOnUse"><stop offset="0.18"style="stop-color:#003200"id="stop42"/><stop offset="0.26"style="stop-color:#003700"id="stop44"/><stop offset="0.35"style="stop-color:#004400"id="stop46"/><stop offset="0.44"style="stop-color:#005B00"id="stop48"/><stop offset="0.54"style="stop-color:#007A00"id="stop50"/><stop offset="0.64"style="stop-color:#47A347"id="stop52"/><stop offset="0.72"style="stop-color:#97CB97"id="stop54"/><stop offset="0.81"style="stop-color:#61B061"id="stop56"/><stop offset="0.99"style="stop-color:#006A00"id="stop58"/><stop offset="1"style="stop-color:#006500"id="stop60"/></radialGradient><path fill="url(#SVGID_4_)"d="M53.047,6.158c28.477,0.196,51.402,23.439,51.207,51.917c-0.195,28.475-23.438,51.398-51.914,51.204   C23.862,109.086,0.938,85.841,1.133,57.364C1.326,28.889,24.573,5.963,53.047,6.158z"id="path63"/></g><g id="Group_CenterShade"><radialGradient id="SVGID_5_"cx="52.4468"cy="-418.7268"r="27.2441"gradientTransform="matrix(1 0 0 -1 0 -360.895)"gradientUnits="userSpaceOnUse"><stop offset="0"style="stop-color:#000000"id="stop66"/><stop offset="1"style="stop-color:#003200"id="stop68"/></radialGradient><path fill="url(#SVGID_5_)"d="M38.399,81.168C25.508,73.407,21.35,56.67,29.111,43.78c7.762-12.888,24.502-17.045,37.385-9.285   c12.891,7.761,17.047,24.498,9.289,37.393C68.021,84.769,51.286,88.928,38.399,81.168z"id="path71"/></g><g id="Group_Impeller"transform="rotate(30,52.173848,57.740931)"><linearGradient id="SVGID_6_"gradientUnits="userSpaceOnUse"x1="101.9819"y1="125.5398"x2="106.1411"y2="125.5342"gradientTransform="matrix(0.9889,0.1484,0.1484,-0.9889,-69.6528,166.4384)"><stop offset="0.01"style="stop-color:#006500"id="stop74"/><stop offset="0.51"style="stop-color:#6FB76F"id="stop76"/><stop offset="1"style="stop-color:#006500"id="stop78"/></linearGradient><path fill="url(#SVGID_6_)"d="m 51.014,77.055 c -0.642,4.14 -2.024,7.351 -3.166,7.187 -1.139,-0.165 -1.545,-3.651 -0.902,-7.789 l 0.014,-0.081 5.874,-37.983 c 0.64,-4.139 1.986,-7.314 3.125,-7.149 1.142,0.163 1.507,3.623 0.866,7.76 z"id="path81"style="fill:url(#SVGID_6_)"/><linearGradient id="SVGID_7_"gradientUnits="userSpaceOnUse"x1="-277.9653"y1="21.0618"x2="-273.8071"y2="21.0562"gradientTransform="matrix(0.6317,-0.7752,-0.7752,-0.6317,243.0495,-142.3917)"><stop offset="0.01"style="stop-color:#006500"id="stop83"/><stop offset="0.51"style="stop-color:#6FB76F"id="stop85"/><stop offset="1"style="stop-color:#006500"id="stop87"/></linearGradient><path fill="url(#SVGID_7_)"d="m 68.625,68.765 c 3.234,2.659 5.291,5.485 4.57,6.387 -0.724,0.895 -3.931,-0.533 -7.162,-3.193 L 65.97,71.906 36.284,47.493 c -3.234,-2.66 -5.28,-5.437 -4.559,-6.333 0.722,-0.898 3.884,0.55 7.117,3.21 z"id="path90"style="fill:url(#SVGID_7_)"/><linearGradient id="SVGID_8_"gradientUnits="userSpaceOnUse"x1="216.76511"y1="433.11789"x2="220.92329"y2="433.1123"gradientTransform="matrix(0.4225,0.9064,0.9064,-0.4225,-432.8737,42.0522)"><stop offset="0.01"style="stop-color:#006500"id="stop92"/><stop offset="0.51"style="stop-color:#6FB76F"id="stop94"/><stop offset="1"style="stop-color:#006500"id="stop96"/></linearGradient><path fill="url(#SVGID_8_)"d="m 35.58,67.368 c -3.803,1.752 -7.245,2.373 -7.739,1.332 -0.491,-1.041 2.193,-3.306 5.994,-5.057 L 33.911,63.61 68.82,47.527 c 3.805,-1.752 7.195,-2.384 7.686,-1.345 0.494,1.041 -2.188,3.258 -5.99,5.008 z"id="path99"style="fill:url(#SVGID_8_)"/><radialGradient id="SVGID_9_"cx="51.976601"cy="64.424599"r="6.5409999"gradientTransform="matrix(1,0,0,-1,0,122.105)"gradientUnits="userSpaceOnUse"><stop offset="0"style="stop-color:#6FB76F"id="stop101"/><stop offset="0.47"style="stop-color:#6BB56B"id="stop103"/><stop offset="0.64"style="stop-color:#5DAE5D"id="stop105"/><stop offset="0.76"style="stop-color:#45A245"id="stop107"/><stop offset="0.85"style="stop-color:#239123"id="stop109"/><stop offset="0.94"style="stop-color:#007C00"id="stop111"/><stop offset="1"style="stop-color:#006500"id="stop113"/></radialGradient><path fill="url(#SVGID_9_)"d="m 53.274,51.269 c 3.543,0.718 5.829,4.168 5.11,7.709 -0.717,3.544 -4.167,5.83 -7.71,5.113 -3.536,-0.719 -5.824,-4.171 -5.105,-7.711 0.715,-3.536 4.17,-5.828 7.705,-5.111 z"id="path116"style="fill:url(#SVGID_9_)"/></g></svg>

• 7-14：ugMeterLed01-ugMeterLed08属性设置

  • Height：设置控件的高度，设置为26。
  • Width：设置控件的宽度，设置为26。

• 15：UgLabel01属性设置

  • Caption：设置显示的字幕信息，显示为从动泵1。

• 16：UgLabel02属性设置

  • Caption：设置显示的字幕信息，显示为从动泵2。

• 17：UgLabel03属性设置

  • Caption：设置显示的字幕信息，显示为增压泵组1。

• 18：UgLabel05属性设置

  • Caption：设置显示的字幕信息，显示为泵组1。
  • Font.Color：设置显示的文字的颜色，显示为clWhite。

• 19：UgLabel06属性设置

  • Caption：设置显示的字幕信息，显示为泵组2。
  • Font.Color：设置显示的文字的颜色，显示为clWhite。

• 20：UgLabel04属性设置

  • Caption：设置显示的字幕信息，显示为增压泵组2。

• 21：UgLabel07属性设置

  • Caption：设置显示的字幕信息，显示为泵组3。
  • Font.Color：设置显示的文字的颜色，显示为clWhite。

• 22：UgLabel08属性设置

  • Caption：设置显示的字幕信息，显示为泵组4。
  • Font.Color：设置显示的文字的颜色，显示为clWhite。

• UgSVG属性设置

    双击控件打开SVG管理器，选择使用的图形。部分图形可能需要通过变换获得，可使用inkspace (opens new window)或者FastWeb中的SVG编辑器对SVG进行变换编辑。可在Lines属性中设置。

3. 脚本设计

  点击脚本设计界面右下角的按钮，切换至单元选择界面，勾选需要使用的单元。该程序脚本无需引用额外单元。

3.1. 脚本初始设置

  初始程序，用于在泵组状态更新时刷新增压泵组的状态。

//JScript
function UpdateState()
//增压泵机组的更新
{
  if ((UgSVG39.ThreadEnabled) || (UgSVG37.ThreadEnabled))
  {
    UgSVG32.ThreadEnabled = True;
    UgMeterled03.State = true;
    UgSVG10.ThreadEnabled = True;
    UgMeterled02.State = true;
  }
  Else
  {
    UgSVG32.ThreadEnabled = False;
    UgMeterled03.State = false;
    UgSVG10.ThreadEnabled = False;
    UgMeterled02.State = false;
  }
  if ((UgSVG63.ThreadEnabled) || (UgSVG64.ThreadEnabled))
  {
    UgSVG56.ThreadEnabled = True;
    UgMeterled04.State = true;
    UgSVG03.ThreadEnabled = True;
    UgMeterled01.state = true;  
  }
  Else
  {
    UgSVG56.ThreadEnabled = False;
    UgMeterled04.state = false;
    UgSVG03.ThreadEnabled = False;
    UgMeterled01.state = false;
  }
}

//PasScript
Procedure UpdateState;
//增压泵机组的更新
Begin
  if (UgSVG39.ThreadEnabled) or (UgSVG37.ThreadEnabled) Then
  Begin
    UgSVG32.ThreadEnabled := True;
    UgMeterled03.State := True;
    UgSVG10.ThreadEnabled := True;
    UgMeterled02.State := True;
  End
  Else
  Begin
    UgSVG32.ThreadEnabled := False;
    UgMeterled03.State := False;
    UgSVG10.ThreadEnabled := False;
    UgMeterled02.State := False;
  End;
  if (UgSVG63.ThreadEnabled) or (UgSVG64.ThreadEnabled) Then
  begin
    UgSVG56.ThreadEnabled := True;
    UgMeterled04.State := True;
    UgSVG03.ThreadEnabled := True;
    UgMeterled01.State := True;  
  End
  Else
  begin
    UgSVG56.ThreadEnabled := False;
    UgMeterled04.State := False;
    UgSVG03.ThreadEnabled := False;
    UgMeterled01.State := False;
  End;
End;

// Make sure to add code blocks to your code group

3.2. 事件设置

• 1：UgFSToggle01-OnToggled事件

  点击以开启或者关闭泵组1。

//JScript
function UgFSToggle01OnToggled(value)
//泵组1
{
  if (UgFSToggle01.Toggled)
  {
    UgSVG39.ThreadEnabled = True;
    UgMeterled05.state = true;
  }
  Else
  {
    UgSVG39.ThreadEnabled = False;
    UgMeterled05.state = false;    
  }
  UpdateState();
}

//PasScript
procedure UgFSToggle01OnToggled(const value: boolean);
//泵组1
begin
  if UgFSToggle01.Toggled Then
  Begin
    UgSVG39.ThreadEnabled := True;
    UgMeterled05.State := True;
  End
  Else
  Begin
    UgSVG39.ThreadEnabled := False;
    UgMeterled05.State := False;    
  End;
  UpdateState;
end;

// Make sure to add code blocks to your code group

• 2：UgFSToggle02-OnToggled事件

  点击以开启或者关闭泵组2。

//JScript
function UgFSToggle02OnToggled(value)
//泵组2
{
  if (UgFSToggle02.Toggled)
  {
    UgSVG37.ThreadEnabled = True;
    UgMeterled06.state = true;
  }
  Else
  {
    UgSVG37.ThreadEnabled = False;
    UgMeterled06.state = false;    
  }
  UpdateState();
}

//PasScript
procedure UgFSToggle02OnToggled(const value: boolean);
//泵组2
begin
  if UgFSToggle02.Toggled Then
  Begin
    UgSVG37.ThreadEnabled := True;
    UgMeterled06.State := True;
  End
  Else
  Begin
    UgSVG37.ThreadEnabled := False;
    UgMeterled06.State := False;    
  End;
  UpdateState;
end;

// Make sure to add code blocks to your code group

• 3：UgFSToggle03-OnToggled事件

  点击以开启或者关闭泵组3。

//JScript
function UgFSToggle03OnToggled(value)
//泵组3
{
  if (UgFSToggle03.Toggled)
  {
    UgSVG63.ThreadEnabled = True;
    UgMeterled07.state = true;
  }
  Else
  {
    UgSVG63.ThreadEnabled = False;
    UgMeterled07.state = false;    
  }
  UpdateState();
}

//PasScript
procedure UgFSToggle03OnToggled(const value: boolean);
//泵组3
begin
  if UgFSToggle03.Toggled Then
  Begin
    UgSVG63.ThreadEnabled := True;
    UgMeterled07.State := True;
  End
  Else
  Begin
    UgSVG63.ThreadEnabled := False;
    UgMeterled07.State := False;    
  End;
  UpdateState;
end;

// Make sure to add code blocks to your code group

• 4：UgFSToggle04-OnToggled事件

  点击以开启或者关闭泵组4。

//JScript
function UgFSToggle04OnToggled(value)
//泵组4
{
  if (UgFSToggle04.Toggled)
  {
    UgSVG64.ThreadEnabled = True;
    UgMeterled08.state = true;
  }
  Else
  {
    UgSVG64.ThreadEnabled = False;
    UgMeterled08.state = false;    
  }
  UpdateState();
}

//PasScript
procedure UgFSToggle04OnToggled(const value: boolean);
//泵组4
begin
  if UgFSToggle04.Toggled Then
  Begin
    UgSVG64.ThreadEnabled := True;
    UgMeterled08.State := True;
  End
  Else
  Begin
    UgSVG64.ThreadEnabled := False;
    UgMeterled08.State := False;    
  End;
  UpdateState;
end;

// Make sure to add code blocks to your code group

4. 运行结果

  使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

  当开启机组的开关时，泵的指示灯亮，同时泵的扇叶开始转动。