## **自美前端顯示** > 自美系統顯示界面采用：HTML方式，支持HTML5、CSS3等最新的前端顯示方式，前端文件存放位置如下： 以默認鏡像方式安裝位置：`/keyicx/python/webroot/desktop/mojing/`目錄中 ## **顯示端使用技術** 1. HTML+ CSS + DIV 頁面布局技術，具體可閱讀：[菜鳥教程中HTML教程](https://www.runoob.com/html/html-tutorial.html) 2. JavaScript（簡稱：JS）腳本語言技術，具體可閱讀：[菜鳥教程中JavaScript教程](https://www.runoob.com/html/html-tutorial.html) 3. jQuery（簡稱JQ）JavaScript庫技術，具體可閱讀：[菜鳥教程中jQuery教程]([https://www.runoob.com/jquery/jquery-tutorial.html](https://www.runoob.com/jquery/jquery-tutorial.html)) ## **前端顯示與Python通訊方式** 自美系統前端與后端Python通訊采用兩種方式，一種是被動顯示和主動請求： 1. 被動顯示采用`websocket`技術，以達到實時性; 2. 主動請求，采用直接調用python文件方式，得到顯示結果（注：這種方式后期可能會廢棄） #### **被動顯示方式介紹** 被動顯示即前端顯示一直處于等待顯示數據接收狀態，我們采用的是NodeJS技術將前端設置為`websocket`服務器，Python通過socket技術向前端發送信息，具體代碼可參考：`/keyicx/app/resources/app/control.js`文件中： ``` start_websocket: function(){ ... } ``` 部分代碼。