在线观看www成人影院-在线观看www日本免费网站-在线观看www视频-在线观看操-欧美18在线-欧美1级

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

AWTK 開源串口屏開發(fā)(14) - 界面重用

ZLG致遠(yuǎn)電子 ? 2024-03-23 08:23 ? 次閱讀

AWTK串口屏支持同一個(gè)界面綁定不同的數(shù)據(jù),本文以家居控制為例,介紹一下界面重用的方法。在家居控制應(yīng)用中,我們演示了空調(diào)和咖啡機(jī)界面。現(xiàn)在我們來想一想,如果有多個(gè)空調(diào)怎么辦呢?當(dāng)然最直觀的方法,就是把界面再拷貝一份。但是如果界面有多份,維護(hù)是一件麻煩的事情。今天我來介紹一下界面重用的問題。


1. 功能

用同一個(gè)空調(diào)界面實(shí)現(xiàn)兩臺(tái)空調(diào)的設(shè)置。

有兩臺(tái)空調(diào)

a027045a-e8ab-11ee-9118-92fbcf53809c.png

  • 客廳空調(diào)

a02f2752-e8ab-11ee-9118-92fbcf53809c.png

  • 臥室空調(diào)

a03319ac-e8ab-11ee-9118-92fbcf53809c.png

2. 創(chuàng)建項(xiàng)目

從模板創(chuàng)建項(xiàng)目,將 hmi/template_app 拷貝 hmi/ui_reuse 即可。

第一個(gè)項(xiàng)目最好不要放到其它目錄,因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂剑仁煜ぶ笤倏紤]放到其它目錄。路徑中也不要中文和空格,避免不必要的麻煩。

3. 制作界面

界面重用 demo_home2 的界面,這里不再細(xì)說。

4. 添加綁定規(guī)則

4.1 空調(diào)界面

空調(diào)界面除了空調(diào)_位置之外,其它的變量都是一樣的,所以我們只需要添加空調(diào)_位置的綁定規(guī)則即可。

綁定屬性

綁定規(guī)則

說明

v-data:value

{空調(diào)_位置}

4.2 主窗口

4.2.1 客廳空調(diào)

綁定屬性

綁定規(guī)則

說明

v-data:value

{navigate, Args=air_win?prefix=living_room}

變量要用英文大括號(hào)括起來。

和之前的不同的是,我們加了參數(shù)prefix=living_room,表示獲取 living_room 下面的數(shù)據(jù)。

4.2.2 臥室空調(diào)

綁定屬性綁定規(guī)則說明
v-data:value{navigate, Args=air_win?prefix=bed_room}

變量要用英文大括號(hào)括起來。

和之前的不同的是,我們加了參數(shù)prefix=bed_room,表示獲取 living_room 下面的數(shù)據(jù)。


5. 初始化數(shù)據(jù)

修改資源文件 design/default/data/default_model.json, 將其內(nèi)容改為:

{ "coffee": { "咖啡_開關(guān)": false, "咖啡_類型": 1, //類型 (0: 卡布奇諾;1: 拿鐵;2: 美式;3: 意式) "咖啡_溫度": 60, //溫度(0-100) "咖啡_口味": 1, //口味 (0: 濃郁;1: 絲滑;2: 清淡;3: 平衡;4: 溫和) "咖啡_熱奶": 1, //熱奶 (0: 少量;1: 較少;2: 較多;3: 大量) "咖啡_奶泡": 1, //奶泡 (0: 少量;1: 較少;2: 較多;3: 大量) "咖啡_水量": 150, //水量 (50-350ml) "咖啡_剩余時(shí)間": 200, //單位秒,格式化為 分鐘:秒 "咖啡_開始制作": false }, "bed_room":{ "空調(diào)_開關(guān)": false, "空調(diào)_位置":"臥室", "空調(diào)_模式": 3, //空調(diào)模式 (0: 制冷;1: 制熱;2: 送風(fēng);3: 除濕;4: 自動(dòng) "空調(diào)_風(fēng)速": 3, //空調(diào)風(fēng)速 (0: 自動(dòng);1: 低速;2: 中速;3: 高速) "空調(diào)_垂直風(fēng)向": 1, //垂直風(fēng)向 (0: 自動(dòng);1:上;2:中;3:下) "空調(diào)_水平風(fēng)向": 1, //水平風(fēng)向 (0: 自動(dòng);1:左;2:中;3:右) "空調(diào)_溫度": 25, //溫度(0-40) }, "living_room":{ "空調(diào)_開關(guān)": false, "空調(diào)_位置":"客廳", "空調(diào)_模式": 3, //空調(diào)模式 (0: 制冷;1: 制熱;2: 送風(fēng);3: 除濕;4: 自動(dòng) "空調(diào)_風(fēng)速": 3, //空調(diào)風(fēng)速 (0: 自動(dòng);1: 低速;2: 中速;3: 高速) "空調(diào)_垂直風(fēng)向": 1, //垂直風(fēng)向 (0: 自動(dòng);1:上;2:中;3:下) "空調(diào)_水平風(fēng)向": 1, //水平風(fēng)向 (0: 自動(dòng);1:左;2:中;3:右) "空調(diào)_溫度": 25, //溫度(0-40) }}

之前我們介紹的數(shù)據(jù)只有一級(jí),現(xiàn)在我們的數(shù)據(jù)有兩級(jí),所以我們需要加上 prefix 參數(shù),來訪問 prefix 參數(shù)下的數(shù)據(jù)。

注意:

如果文件內(nèi)容有中文(非 ASCII 字符),一定要保存為 UTF-8 格式。

重新打包資源才能生效。


6. 數(shù)據(jù)持久化


7. 編譯運(yùn)行

a03c8456-e8ab-11ee-9118-92fbcf53809c.gif

8. 注意

本項(xiàng)目并沒有編寫界面相關(guān)的代碼,AWStudio 在 src/pages 目錄下生成了一些代碼框架,這些代碼并沒有用到,可以刪除也可以不用管它,但是不能加入編譯。

  • 完整示例請(qǐng)參考:demo_home2。

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 開源
    +關(guān)注

    關(guān)注

    3

    文章

    3634

    瀏覽量

    43611
  • 串口屏
    +關(guān)注

    關(guān)注

    8

    文章

    578

    瀏覽量

    38183
  • awtk
    +關(guān)注

    關(guān)注

    0

    文章

    50

    瀏覽量

    361
收藏 人收藏

    評(píng)論

    相關(guān)推薦
    熱點(diǎn)推薦

    AWTK 開源智能串口方案

    AWTK開源智能串口方案發(fā)布,旨在解決傳統(tǒng)串口諸多痛點(diǎn),為用戶提供更開放、更易用、更強(qiáng)大的
    的頭像 發(fā)表于 12-02 08:24 ?1368次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案

    ?【AWTK開源智能串口方案】方案介紹和工作原理

    串口方案,本系列文章介紹如何從零開發(fā)HMI程序,包括搭建開發(fā)環(huán)境、創(chuàng)建HMI運(yùn)行時(shí)工程、修改應(yīng)用界面以及
    的頭像 發(fā)表于 12-21 08:24 ?1422次閱讀
    ?【<b class='flag-5'>AWTK</b><b class='flag-5'>開源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】方案介紹和工作原理

    AWTK 串口開發(fā)(3) - 告警信息

    告警信息是一個(gè)常用的功能。在AWTK開源串口中,內(nèi)置告警信息模型,只需設(shè)計(jì)用戶界面即可實(shí)現(xiàn)告警信息的顯示和管理。1.功能告警信息是一個(gè)常用
    的頭像 發(fā)表于 12-23 08:24 ?708次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(3) - 告警信息

    AWTK 串口開發(fā)(4) - 數(shù)據(jù)采集

    數(shù)據(jù)采用是一個(gè)常用的功能。在AWTK開源串口中,內(nèi)置數(shù)據(jù)采樣模型,只需設(shè)計(jì)用戶界面即可實(shí)現(xiàn)采樣數(shù)據(jù)的顯示和管理。1.功能數(shù)據(jù)采集是一個(gè)常用
    的頭像 發(fā)表于 12-30 08:24 ?637次閱讀
    <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ù)采集

    AWTK 串口開發(fā)(5) - MCU端 SDK 用法

    AWTK開源智能串口,不但開放了串口端全部源碼,還提供了MCU端SDK,大大加快MCU軟件的
    的頭像 發(fā)表于 01-06 08:24 ?670次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(5) - MCU端 SDK 用法

    AWTK 開源串口開發(fā)(6) - 定時(shí)器的用法

    定時(shí)器是個(gè)常用的功能,AWTK串口提供了豐富的定時(shí)器函數(shù),用于定時(shí)器的啟動(dòng)、停止、暫停、恢復(fù)、修改和重置等功能,本文以計(jì)時(shí)器的例子來介紹定時(shí)器的基本用法。定時(shí)器也是一個(gè)常用的功能,在AWTK
    的頭像 發(fā)表于 01-13 08:24 ?858次閱讀
    <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>(6) - 定時(shí)器的用法

    AWTK開源智能串口方案】HMI端程序移植編譯及運(yùn)行

    -HMI是基于AWTKAWTK-MVVM開發(fā)的低代碼智能串口方案,本系列文章介紹如何從零開發(fā)
    的頭像 發(fā)表于 01-18 08:24 ?1388次閱讀
    【<b class='flag-5'>AWTK</b><b class='flag-5'>開源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】HMI端程序移植編譯及運(yùn)行

    AWTK 開源串口開發(fā)(9) - 用戶和權(quán)限管理

    AWTK串口中,內(nèi)置用戶管理和權(quán)限控制的模型,無需編碼即可實(shí)現(xiàn)登錄、登出、修改密碼、權(quán)限控制、創(chuàng)建用戶、刪除用戶等功能,本文介紹一下用戶管理和權(quán)限控制的基本用法。用戶管理和權(quán)限控制是一個(gè)常用
    的頭像 發(fā)表于 02-19 12:10 ?768次閱讀
    <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)限管理

    AWTK開源智能串口方案】MCU SDK使用與編譯運(yùn)行

    代碼智能串口方案,本系列文章介紹如何從零開發(fā)HMI程序,包括搭建開發(fā)環(huán)境、創(chuàng)建HMI運(yùn)行時(shí)工程、修改應(yīng)用界面以及
    的頭像 發(fā)表于 02-19 12:11 ?1733次閱讀
    【<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)行

    AWTK開源智能串口方案】設(shè)計(jì)UI界面并上傳到串口

    本篇文章將介紹如何使用AWStudio設(shè)計(jì)串口端的UI界面和添加綁定規(guī)則,以及怎么將資源文件上傳到串口端。引言:
    的頭像 發(fā)表于 02-22 08:24 ?1307次閱讀
    【<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><b class='flag-5'>屏</b>

    AWTK 開源串口開發(fā)(11) - 天氣預(yù)報(bào)

    常用的功能,在很多設(shè)備上都有這個(gè)功能。實(shí)現(xiàn)天氣預(yù)報(bào)的功能,不能說很難但是也絕不簡(jiǎn)單,首先需要從網(wǎng)上獲取數(shù)據(jù),再解析數(shù)據(jù),最后更新到界面上。在AWTK串口中,內(nèi)置
    的頭像 發(fā)表于 03-05 08:24 ?640次閱讀
    <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)

    AWTK 開源串口開發(fā)(12) - 記事本應(yīng)用

    傳統(tǒng)的的串口中,開發(fā)一個(gè)記事本應(yīng)用,即使可能,也是非常麻煩的事情。在AWTK串口中,內(nèi)置文件
    的頭像 發(fā)表于 03-09 08:23 ?582次閱讀
    <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)用

    AWTK 開源串口開發(fā)(13) - 計(jì)算器應(yīng)用

    計(jì)算器是一個(gè)常見的應(yīng)用程序,在AWTK串口中,利用fscript表達(dá)式計(jì)算函數(shù),無需編寫一行傳統(tǒng)的代碼,即可實(shí)現(xiàn)一個(gè)簡(jiǎn)單的計(jì)算器應(yīng)用程序。1.功能計(jì)算器是一個(gè)很常見的應(yīng)用,比如在電子秤中,可能
    的頭像 發(fā)表于 03-16 08:23 ?1.2w次閱讀
    <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>(13) - 計(jì)算器應(yīng)用

    AWTK 開源串口開發(fā)(16) - 提供 MODBUS 服務(wù)

    AWTK串口內(nèi)置MODBUS從站模型,不用編寫一行代碼即可讓串口提供MODBUS服務(wù),讓遠(yuǎn)程設(shè)備通過MODBUS協(xié)議訪問
    的頭像 發(fā)表于 04-13 08:24 ?718次閱讀
    <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ù)

    【插針機(jī)HMI開發(fā)】用AWTK開發(fā)人機(jī)界面

    插針機(jī)中有兩個(gè)重要的部件HMI和PLC,HMI提供用戶操作和界面顯示,而PLC則控制電機(jī)的運(yùn)動(dòng)邏輯。致遠(yuǎn)電子的ZTP800和AWTK-HMI解決方案可以快速開發(fā)插針機(jī)或其他設(shè)備的HMI界面
    的頭像 發(fā)表于 04-19 08:23 ?874次閱讀
    【插針機(jī)HMI<b class='flag-5'>開發(fā)</b>】用<b class='flag-5'>AWTK</b><b class='flag-5'>開發(fā)人機(jī)界面</b>
    主站蜘蛛池模板: 深爱五月激情 | 天天插视频 | 丝袜美女被c | 色婷婷5月 | 亚洲免费一区二区 | 日本三级视频在线观看 | 8050午夜网 | 香蕉色网 | 女人张开腿男人桶 | 天天射天天射天天干 | 美女网站一区二区三区 | 久久国产乱子伦精品免费午夜 | 天天天天射 | 国产女乱淫真高清免费视频 | 国产午夜精品久久久久免费视 | 丁香花在线观看免费观看 | 97午夜理伦片在线影院 | 久久性妇女精品免费 | 性性欧美| 日韩在线三级视频 | 亚洲国产精品国产自在在线 | 激情福利网 | 亚洲图片综合区另类图片 | 天天综合天天射 | 性xxxxbbbb免费播放视频 | 色网站免费| 天天在线精品视频在线观看 | 一级看片免费视频囗交 | 久草视频一区 | 久久久久久免费观看 | 久久天天躁狠狠躁夜夜不卡 | 精品久久久久久久久久 | 国产欧美亚洲精品第二区首页 | 国产黄色视屏 | 成人黄色免费看 | 国产午夜亚洲精品 | 四虎永久在线精品国产 | 欧美日韩a| 国产性夜夜性夜夜爽91 | 在线 | 一区二区三区四区 | 久久人精品 |