定時(shí)器是個(gè)常用的功能,AWTK 串口屏提供了豐富的定時(shí)器函數(shù),用于定時(shí)器的啟動(dòng)、停止、暫停、恢復(fù)、修改和重置等功能,本文以計(jì)時(shí)器的例子來介紹定時(shí)器的基本用法。定時(shí)器也是一個(gè)常用的功能,在 AWTK 串口屏中,可以給每個(gè)控件(包括窗口)創(chuàng)建一個(gè)定時(shí)器,定時(shí)器到點(diǎn)后觸發(fā) v-on:timer 事件。在 AWTK 串口屏中,提供了 6 個(gè)定時(shí)器相關(guān)函數(shù):
- start_timer啟動(dòng)定時(shí)器。
- stop_timer停止定時(shí)器。
- suspend_timer暫停定時(shí)器。
- resume_timer恢復(fù)暫停的定時(shí)器。
- reset_timer重置定時(shí)器。
- modify_timer修改定時(shí)器的時(shí)間。
這些函數(shù)第一個(gè)參數(shù)為控件的名字,如果不指定,則默認(rèn)為當(dāng)前控件。
1. 功能
本文以計(jì)時(shí)器的例子來介紹定時(shí)器的使用方法。在這里例子中,模型(也就是數(shù)據(jù))里只有一個(gè)計(jì)時(shí)變量:
變量名 | 數(shù)據(jù)類型 | 功能說明 |
計(jì)時(shí) | 整數(shù) | 無 |
2. 創(chuàng)建項(xiàng)目
從模板創(chuàng)建項(xiàng)目,將 hmi/template_app 拷貝 hmi/timer 即可。
第一個(gè)項(xiàng)目最好不要放到其它目錄,因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂剑仁煜ぶ笤倏紤]放到其它目錄。路徑中也不要中文和空格,避免不必要的麻煩。
3. 制作界面
用 AWStudio 打開上面 timer 目錄下的 project.json 文件。里面有一個(gè)空的窗口,在上面加入下面的控件:
靜態(tài)文本
- 4 個(gè)按鈕
做出類似下面的界面。
定時(shí)器設(shè)置在靜態(tài)文本上,所以必須給它取一個(gè)在當(dāng)前窗口內(nèi)唯一的名稱,這里就叫 “tick”。
4. 添加綁定規(guī)則
將靜態(tài)文本綁定到計(jì)時(shí)變量。添加自定義的屬性v-data:value,將值設(shè)置為{計(jì)時(shí)}。
綁定屬性 | 綁定規(guī)則 | 說明 |
v-data:value | {計(jì)時(shí)} | 變量要用英文大括號(hào)括起來。 |
v-on:timer | {fscript, Args=set(計(jì)時(shí),計(jì)時(shí)+1)} | 定時(shí)器事件,增加計(jì)時(shí) |
在啟動(dòng)按鈕的點(diǎn)擊事件啟動(dòng)定時(shí)器。
綁定屬性 | 綁定規(guī)則 | 說明 |
v-on:click | {fscript, Args=start_timer(‘tick’, 1000);} | 1000 表示定時(shí)器的時(shí)間間隔為 1000 毫秒。 |
在暫停按鈕的點(diǎn)擊事件暫停定時(shí)器。
綁定屬性 | 綁定規(guī)則 | 說明 |
v-on:click | {fscript, Args=suspend_timer(‘tick’)} | 無 |
在恢復(fù)按鈕的點(diǎn)擊事件恢復(fù)定時(shí)器。
綁定屬性 | 綁定規(guī)則 | 說明 |
v-on:click | {fscript, Args=resume_timer(‘tick’)} | 無 |
在停止按鈕的點(diǎn)擊事件停止定時(shí)器。
綁定屬性 | 綁定規(guī)則 | 說明 |
v-on:click | {fscript, Args=stop_timer(‘tick’);set(計(jì)時(shí),0)} | 停止定時(shí)器,并將計(jì)時(shí)清零 |
同樣指定窗口的模型為 default。
綁定屬性 | 綁定規(guī)則 | 說明 |
v-model | default | default 不需要用大括號(hào)括起來。 |
5. 初始化數(shù)據(jù)
修改資源文件 design/default/data/default_model.json, 將其內(nèi)容改為:
{ "計(jì)時(shí)":0}
注意:
- 如果文件內(nèi)容有中文(非 ASCII 字符),一定要保存為 UTF-8 格式。
- 重新打包資源才能生效。
6. 編譯運(yùn)行
運(yùn)行 bin 目錄下的 demo 程序,啟動(dòng)定時(shí)器后,計(jì)時(shí)自動(dòng)增加。
7. 注意
本項(xiàng)目并沒有編寫界面相關(guān)的代碼,AWStudio 在 src/pages 目錄下生成了一些代碼框架,這些代碼并沒有用到,可以刪除也可以不用管它,但是不能加入編譯。
-
定時(shí)器
+關(guān)注
關(guān)注
23文章
3256瀏覽量
115444 -
開源
+關(guān)注
關(guān)注
3文章
3412瀏覽量
42737 -
串口屏
+關(guān)注
關(guān)注
8文章
546瀏覽量
37599
發(fā)布評(píng)論請先 登錄
相關(guān)推薦
【產(chǎn)品應(yīng)用】用 AWTK 和 AWPLC 快速開發(fā)嵌入式應(yīng)用程序 (3)- 定時(shí)器
![【產(chǎn)品應(yīng)用】用 <b class='flag-5'>AWTK</b> 和 AWPLC 快速<b class='flag-5'>開發(fā)</b>嵌入式應(yīng)用程序 (3)- <b class='flag-5'>定時(shí)器</b>](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
?【AWTK開源智能串口屏方案】方案介紹和工作原理
![?【<b class='flag-5'>AWTK</b><b class='flag-5'>開源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】方案介紹和工作原理](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
AWTK 串口屏開發(fā)(4) - 數(shù)據(jù)采集
![<b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(4) - 數(shù)據(jù)采集](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
AWTK 開源串口屏開發(fā)(9) - 用戶和權(quán)限管理
![<b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(9) - 用戶和權(quán)限管理](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
【AWTK開源智能串口屏方案】MCU SDK使用與編譯運(yùn)行
![【<b class='flag-5'>AWTK</b><b class='flag-5'>開源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】MCU SDK使用與編譯運(yùn)行](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
【AWTK開源智能串口屏方案】設(shè)計(jì)UI界面并上傳到串口屏
![【<b class='flag-5'>AWTK</b><b class='flag-5'>開源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】設(shè)計(jì)UI界面并上傳到<b class='flag-5'>串口</b><b class='flag-5'>屏</b>](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
AWTK 開源串口屏開發(fā)(10) - 告警信息的高級(jí)用法
![<b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(10) - 告警信息的高級(jí)<b class='flag-5'>用法</b>](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
AWTK 開源串口屏開發(fā)(11) - 天氣預(yù)報(bào)
![<b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(11) - 天氣預(yù)報(bào)](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
AWTK 開源串口屏開發(fā)(12) - 記事本應(yīng)用
![<b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(12) - 記事本應(yīng)用](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
AWTK 開源串口屏開發(fā)(16) - 提供 MODBUS 服務(wù)
![<b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(16) - 提供 MODBUS 服務(wù)](https://file.elecfans.com/web2/M00/50/DA/pYYBAGLH6TyAB71EAAAPQ7KgtYA038.png)
評(píng)論