【技術分享】AWTK開源串口屏開發(8)-系統設置

系統設置是一個必需的功能，AWTK?串口屏的默認模型提供一些系統設置相關的屬性和命令，實現系統設置非常簡單。本文介紹一下音量、背光、時間和觸屏音等常見系統設置的實現方法。

1. 功能

• 內置屬性

• 內置命令

2. 創建項目

從模板創建項目，將 hmi/template_app 拷貝 hmi/settings 即可。

3. 制作界面

里面有一個空的窗口，在上面加入下面的控件，并調節位置和大小，做出類似下面的界面。

3. 添加綁定規則

3.1?主界面?(home_page)

• 將?基本設置?按鈕的?點擊?事件綁定到?navigate?命令。添加自定義的屬性?v-on:click，將值設置為?{navigate, Args=basic}。

• 將?時間設置?按鈕的?點擊?事件綁定到?navigate?命令。添加自定義的屬性?v-on:click，將值設置為?{navigate, Args=rtc}。

• 將?背光滑動條?綁定到?backlight?變量。添加自定義的屬性?v-data:value，將值設置為?{backlight}。

• 將音量滑動條?綁定到?audio_volume?變量。添加自定義的屬性?v-data:value，將值設置為?{audio_volume}。

• 將?開啟屏幕音?綁定到?ui_feedback?變量。添加自定義的屬性?v-data:value，將值設置為?{ui_feedback}。

• 讓?確定?按鈕的?點擊?事件執行命令 “{save}”。添加自定義的屬性?v-on:click，將值設置為：

{save, CloseWindow=true}

• 同樣指定窗口的模型為 default。

• 將?年 編輯器?綁定到?rtc_year?變量。添加自定義的屬性?v-data:value，將值設置為?{rtc_year}。

• 將?月 編輯器?綁定到?rtc_month?變量。添加自定義的屬性?v-data:value，將值設置為?{rtc_month}。

• 將?日 編輯器?綁定到?rtc_day?變量。添加自定義的屬性?v-data:value，將值設置為?{rtc_day}。

• 將?時 編輯器?綁定到?rtc_hour?變量。添加自定義的屬性?v-data:value，將值設置為?{rtc_hour}。

• 將?分 編輯器?綁定到?rtc_minute?變量。添加自定義的屬性?v-data:value，將值設置為?{rtc_minute}。

• 將?秒 編輯器?綁定到?rtc_second?變量。添加自定義的屬性?v-data:value，將值設置為?{rtc_second}。

• 讓?獲取時間?按鈕的?點擊?事件執行命令 “{get_rtc}”。添加自定義的屬性?v-on:click，將值設置為：

{get_rtc}

• 讓?設置時間?按鈕的?點擊?事件執行命令 “{set_rtc}”。添加自定義的屬性?v-on:click，將值設置為：

{set_rtc}

• 讓?返回?按鈕的?點擊?事件執行命令 “{nothing}”。添加自定義的屬性?v-on:click，將值設置為：

{nothing, CloseWindow=true}

• 同樣指定窗口的模型為 default。

4. 初始化數據

{ ?"ui_feedback":true, ?"audio_volume":60, ?"backlight":60}

• 如果文件內容有中文（非 ASCII 字符），一定要保存為 UTF-8 格式。
• 重新打包資源才能生效。

5. 描述需要持久化的數據

{ ? ?"name": "hmi_settings", ? ?"persistent": { ? ? ? ?"ui_feedback": true, ? ? ? ?"audio_volume": true, ? ? ? ?"backlight": true ? ?}}

• 如果文件內容有中文（非 ASCII 字符），一定要保存為 UTF-8 格式。
• 重新打包資源才能生效。

6. 編譯運行

7. 注意

??產品推薦

??技術交流群