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功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  當開啟機組的開關時，泵的指示燈亮，同時泵的扇葉開始轉動。