---
# System prepended metadata

title: FUXA usage

---

# FUXA usage

- 使用前先具備的知識
    - [TCP/IP](https://support.microsoft.com/zh-tw/help/164015/understanding-tcp-ip-addressing-and-subnetting-basics)
    - [藉由router理解外網內網](https://www.youtube.com/watch?v=8A4_IhgqoAs&t=257s)
- device setting
![](https://i.imgur.com/D91Whwf.png)
    - 設定device名稱、address、Type、port(通訊埠)、slot(插槽)
        - Type(通訊傳輸的類型、協定)
            - [SiemensS7](https://blog.csdn.net/lcb411/article/details/101147181)
            - [OPC UA](https://tttt-note.blogspot.com/2018/08/opc-ua.html)
            - [ModbusRTU](https://zh.wikipedia.org/wiki/Modbus)
            - [ModbusTCP](https://zh.wikipedia.org/wiki/Modbus)
        - what is slot?
        ![](https://i.imgur.com/whUBN7r.jpg)
        
- controls 的 property 設定
    - Property(Name、Device、Variable)
- Proc. Eng. 的 property 設定
    - Property(Name、Device、Variable)
    - Events(Type、Action)
    - Actions(Device、Variable)、Type(Hide、show)

- controls
    - 編輯數值
    ![](https://i.imgur.com/Csmf4VK.png =150x100)
    - 顯示數值
    ![](https://i.imgur.com/r9i0b7s.png =150x100)
    - 按鈕
    ![](https://i.imgur.com/2yyZGnR.png =150x100)
    - 選擇數值
    ![](https://i.imgur.com/MSKMypo.png =150x100)
    - 進度條(ex:0%~100%)
    ![](https://i.imgur.com/X3yDxpE.png =150x100)
    - 狀態顯示
    ![](https://i.imgur.com/hIhMRtv.png =100x100)
    - 圖表
    ![](https://i.imgur.com/8mBoVFV.png =150x100)
    - 數值儀表板
    ![](https://i.imgur.com/gtlGrUt.png =100x100)
    - 管線
    ![](https://i.imgur.com/rmpCRcL.png =100x100)
    - 滑桿
    ![](https://i.imgur.com/EXcHPXC.png =100x100)
    
- component usage problem
    - button click 後需更新網頁才能更新數值(無法及時更新)
- proc. eng.
    - centrifugal(離心機)
    ![](https://i.imgur.com/lEGSEvi.png =100x100)
    - diaph(流量孔版)
    ![](https://i.imgur.com/URbRIQ6.png =100x100)
    - pump hidra
    ![](https://i.imgur.com/dwCa5fU.png =100x100)
    - pump jet
    ![](https://i.imgur.com/vQJ8o0I.png =100x100)
    - pump gear
    ![](https://i.imgur.com/VNGpzhm.png =100x100)
    - motor simb
    ![](https://i.imgur.com/SNiiFlp.png =100x100)
    - pump turbi
    ![](https://i.imgur.com/wUAT6Jv.png =150x100)
    - pump centri1
    ![](https://i.imgur.com/gtERa08.png =100x100)
    - pump vacuum
    ![](https://i.imgur.com/W87t4ST.png =150x100)
    - pump centri2
    ![](https://i.imgur.com/ygNPZvX.png =100x100)
    - pump screew
    ![](https://i.imgur.com/Q3aPyA6.png =200x70)
    - pump blower
    ![](https://i.imgur.com/oAbb3lN.png =150x130)
    - pump gear2
    ![](https://i.imgur.com/WXKMgMu.png =100x170)
    - pump horizo
    ![](https://i.imgur.com/cqEUUbW.png =100x100)
    - pump screew2
    ![](https://i.imgur.com/7oPJ7hN.png =100x100)
    - pump peris
    ![](https://i.imgur.com/oZBArRs.png =100x100)
    - pump feed
    ![](https://i.imgur.com/CkrEh0y.png =170x100)
    - compressor void
    ![](https://i.imgur.com/GAWEagO.png =100x100)
    - compressor fan
    ![](https://i.imgur.com/G5kmVjL.png =100x100)
    - compressor piston
    ![](https://i.imgur.com/FaO1kUf.png =100x100)
    - comp ring
    ![](https://i.imgur.com/RSv8agW.png =100x100)
    - comp ejector
    ![](https://i.imgur.com/1ZQmxVB.png =100x100)
    - comp diaph
    ![](https://i.imgur.com/G3wd5HB.png =100x100)
    - comp rotary
    ![](https://i.imgur.com/DZze1Kk.png =100x100)
    - comp screw(25)
    ![](https://i.imgur.com/ZF8pKiN.png)
    - comp air(空壓機)
    ![](https://i.imgur.com/p6gtEpq.png =150x100)
    - comp reci
    ![](https://i.imgur.com/7U4gSTQ.png =150x100)
    - comp reci2
    ![](https://i.imgur.com/h7U8kiJ.png =100x100)
    - comp silecne
    ![](https://i.imgur.com/oLfArUf.png =150x100)
    - comp turbo
    ![](https://i.imgur.com/oMXP6T0.png =150x100)
    - comp rotary
    ![](https://i.imgur.com/9u1foLW.png =100x100)
    - comp ring
    ![](https://i.imgur.com/1oWGKmR.png =100x100)
    - valve-ax(閥門)
    ![](https://i.imgur.com/z9zgCyq.png =100x100)
    - valve-bx(閥門)
    ![](https://i.imgur.com/CXsMu8E.png =100x100)
    - valve-cx(閥門)
    ![](https://i.imgur.com/Gzcm6fC.png =100x100)
    - exchanger tube
    ![](https://i.imgur.com/1wmrPYw.png =100x60)
    - agigator-prop
    ![](https://i.imgur.com/hajVngn.png =100x100)
    - agigator-turbo
    ![](https://i.imgur.com/cgIMSDy.png =100x100)
    - agigator-disc
    ![](https://i.imgur.com/M0aWH3J.png =100x100)
    - agigator-paddle
    ![](https://i.imgur.com/nVKzRdK.png =100x100)
    - centrifuge1
    ![](https://i.imgur.com/q5YRiga.png =100x100)
    - centrifuge2
    ![](https://i.imgur.com/7tW0rYV.png =100x100)
    - centrifuge3
    ![](https://i.imgur.com/mN8vcZ9.png =100x100)
    - centrifuge4
    ![](https://i.imgur.com/r1OhGrq.png =100x100)
    - crusher1
    ![](https://i.imgur.com/JTQRAJ3.png =100x100)
    - crusher2
    ![](https://i.imgur.com/erKYYAx.png =100x100)
    - crusher3
    ![](https://i.imgur.com/CppeTJz.png =100x100)
    - crusher4
    ![](https://i.imgur.com/5QOhQHA.png =100x100)
    - crusher5
    ![](https://i.imgur.com/VCu1HnJ.png =100x100)
    - crusher6(50)
    ![](https://i.imgur.com/WiefP2d.png =100x100)
    - Mill(Vibration)
    ![](https://i.imgur.com/dTmwsDg.png =100x100)
    - Drier
    ![](https://i.imgur.com/kNqTTBl.png =100x100)
    - Rotary Drum drier,Tumbling Drier
    ![](https://i.imgur.com/RRKysu0.png =100x100)
    - Drier(Fluidized Bed)
    ![](https://i.imgur.com/IH1CKjI.png =100x100)
    - Drier(Roller Conveyor Belt)
    ![](https://i.imgur.com/RrpZBfl.png =100x100)
    - Turbo Drier,Disc Drier,Moving Shelf Drier
    ![](https://i.imgur.com/ECGDnoj.png =100x100)
    - nozzle
    ![](https://i.imgur.com/sPjw6gH.png =100x60)
    - nozzle2
    ![](https://i.imgur.com/YJuZyJA.png =100x100)
    - Proportional Feeder(Rotary Value)
    ![](https://i.imgur.com/zhhrqAr.png =100x100)
    - Proportional Feeder
    ![](https://i.imgur.com/GoQKLq8.png =100x100)
    - feeder3
    ![](https://i.imgur.com/rRvJ3nh.png =100x60)
    - Filter
    ![](https://i.imgur.com/IjTN5VK.png =100x100)
    - Gas Filter
    ![](https://i.imgur.com/s9JqGFn.png =100x100)
    - Press Filter
    ![](https://i.imgur.com/j1P9sUG.png =100x100)
    - Self-Operating Release Valve
    ![](https://i.imgur.com/hWPLubg.png =100x100)
    - Turbine
    ![](https://i.imgur.com/QAYJmuA.png =100x100)
    - fitting3
    ![](https://i.imgur.com/7XfPwFF.png =100x100)
    - fitting4
    ![](https://i.imgur.com/AlfUbxv.png =100x100)
    - Rupture Disc
    ![](https://i.imgur.com/NOomTXd.png =100x100)
    - Silencer
    ![](https://i.imgur.com/QRSv5Pr.png =100x100)
    - Venturi
    ![](https://i.imgur.com/Kd5m4zL.png =100x100)
    - Weir
    ![](https://i.imgur.com/Ro9JfIu.png =100x100)
    - Flow Nozzle
    ![](https://i.imgur.com/N4dFLso.png =100x100)
    - fitting10
    ![](https://i.imgur.com/aZyapbU.png =100x100)
    - fitting11
    ![](https://i.imgur.com/rsjDVm7.png =100x100)
    - fitting12
    ![](https://i.imgur.com/J3tyl4o.png =100x100)
    - fitting13
    ![](https://i.imgur.com/at2MQdC.png =100x60)
    - misc1
    ![](https://i.imgur.com/ZvgaL4s.png =100x100)
    - misc2
    ![](https://i.imgur.com/mW0JAnS.png =100x100)
    - misc3
    ![](https://i.imgur.com/HTHliDw.png =100x150)
    - misc4
    ![](https://i.imgur.com/uyD8Ov6.png =100x60)
    - misc5
    ![](https://i.imgur.com/b1Cma4n.png =100x100)
    - misc6
    ![](https://i.imgur.com/SZLoQ8z.png =100x100)
    - misc7
    ![](https://i.imgur.com/venDcGv.png =100x100)
    - misc8
    ![](https://i.imgur.com/DTr8uKl.png =100x100)
    - tank1
    ![](https://i.imgur.com/zFnsWZA.png =100x100)
    - tank2
    ![](https://i.imgur.com/2IMeolx.png =100x100)
    - tank3
    ![](https://i.imgur.com/n955HUJ.png =100x100)
    - tank4
    ![](https://i.imgur.com/UgLXDcZ.png =100x100)
    - tank5
    ![](https://i.imgur.com/943tXyt.png =100x100)
    - tank6
    ![](https://i.imgur.com/Qs9Y0ed.png =100x100)
    - tank7
    ![](https://i.imgur.com/pdZrotx.png =100x100)
    - tank8
    ![](https://i.imgur.com/7mHE0ST.png =100x100)
    - tank9
    ![](https://i.imgur.com/xpTAeHS.png =100x100)
    - exchanger1
    ![](https://i.imgur.com/ZGQ97MD.png =100x60)
    - exchanger2
    ![](https://i.imgur.com/wy0qBLZ.png =100x60)
    - exchanger3
    ![](https://i.imgur.com/tc3RLzq.png =140x100)
    - exchanger4
    ![](https://i.imgur.com/ebvOQ56.png =140x100)
    - exchanger5
    ![](https://i.imgur.com/ffPfeWa.png =140x100)
    - exchanger6
    ![](https://i.imgur.com/FuOLK65.png =100x100)
    - exchanger7
    ![](https://i.imgur.com/YMw6QcD.png =150x70)
    - exchanger8
    ![](https://i.imgur.com/xN08Xuo.png =150x70)
    - exchanger9
    ![](https://i.imgur.com/NyDMCj6.png =100x100)
    - exchanger-filter
    ![](https://i.imgur.com/4A1v2HT.png =100x100)
    - pipi1
    ![](https://i.imgur.com/kdd0au3.png =130x100)
    - pipi2
    ![](https://i.imgur.com/bvr0lId.png =130x100)
    - pipi4
    ![](https://i.imgur.com/7QVf8WF.png =100x100)
    - pipi5
    ![](https://i.imgur.com/RqiTMqA.png =100x100)
    - pipi6
    ![](https://i.imgur.com/QtSkAC5.png =100x60)
    - pipi7
    ![](https://i.imgur.com/X8IhB05.png =100x60)

- Component combine example
![](https://i.imgur.com/Zzt8s3n.gif)
- FUXA 的前端採用 Angular.js 
    - [MVC 架構](https://ithelp.ithome.com.tw/articles/10157402)
- FUXA 的後端採用 Node.js
    - 主要處理 WebServer 和 WebApi(ex. [Restful API](https://medium.com/itsems-frontend/api-%E6%98%AF%E4%BB%80%E9%BA%BC-restful-api-%E5%8F%88%E6%98%AF%E4%BB%80%E9%BA%BC-a001a85ab638)) 之間的溝通
- 每個元件背後都有 JavaScript or TypeScript 控制
    - 基本上每個元件都會牽連到 Property 裡的 Device、Variable
        - Angular 的雙向綁定，資料會互相流通
        - 此為Angular  [Component](https://medium.com/coding-neutrino-blog/what-is-angular5-63b9a8f0c39b) 所包含的東西，控制元件的邏輯也都寫在裡面
        - ex. device 的 MVC 都寫在這，其他的設定以此類推
        ![](https://i.imgur.com/XWxMeuM.png =200x350)

- 如何客製化元件
    - 注重在如何讓使用者方便設計 .svg 圖，其餘的 ts 控制都是已經原本就寫好的東西
    ![](https://i.imgur.com/phv5I3A.png)


        




















































    
    




