当前位置：网站首页>Dayu200 experience officer runs the intelligent drying system page based on arkui ETS on dayu200

Dayu200 experience officer runs the intelligent drying system page based on arkui ETS on dayu200

2022-07-06 22:49:00 【51CTO】

Catalog

background
development environment
Specific development process

1. New project
2. Page structure design
3. The code structure
4. Complete code
5. Some materials used
6.Previewer Preview effect

DAYU200 Running effect
gitee Address
Demo video
Follow up development plan

background

ArkUI-eTS At present, it has been able to run a variety of equipment , At the same time, it also provides us with more and more rich component and hardware development capabilities . This time is mainly to write a page of intelligent drying system to DAYU200 Run the test above .
eTS Get started or get eTS official API For documents, please refer to my other post ： ArkUI_eTS Get started with your hands

development environment

DevEco Studio for OpenHarmony3.0.0.900
OpenHarmony edition ：3.1_Release
Development board ：DAYU200 ( be based on openHarmony3.1_Release edition )

Specific development process

1. New project

#DAYU200 Experience Officer # stay DAYU200 Run based on ArkUI-eTS Intelligent drying system page _OpenHarmony

After the creation of the project , The project catalogue is as follows ：

And then , Need to be in “MainAbility” Create under directory “image” The directory is used to store some page material resources .
（ Right click “MainAbility” file name -“New”-“Directory”- Input “image” Create ）
#DAYU200 Experience Officer # stay DAYU200 Run based on ArkUI-eTS Intelligent drying system page _DAYU200_04

After creation , The structure of the project catalogue is as follows ：( At the same time, we know “image” Contents and “resources-base-media” Can store some material resources )
#DAYU200 Experience Officer # stay DAYU200 Run based on ArkUI-eTS Intelligent drying system page _ArkUI-eTS_06

2. Page structure design

Main page structure ：
#DAYU200 Experience Officer # stay DAYU200 Run based on ArkUI-eTS Intelligent drying system page _OpenHarmony_07
Sub page structure ：

3. The code structure

......
  build() {
    Column() {
      Tabs() {
        TabContent() {
          Column() {
            Flex() {
              Text(' The weather  : ' + this.weather)
              Text(' temperature  : ' + this.temp + ' ℃')
              Text(' humidity  : ' + this.humidity + ' RH')
            }

            Flex() {
              Text(this.sub)   #  Environmental conditions 
            }
	    // 1
            Row({ space: 2 }) {
              Button() {
                Column() {
                  Text(' Drying state ')
		  Image($r("app.media.drying"))
                }
              }
              Button() {
                Column() {
                  Text(' Manual adjustment ')
                  Image($r("app.media.hand"))
                }
              }
            }
            // 2
            Row({ space: 2 }) {
              Button() {
                Column() {
                  Text(' Time statistics ')
                  Image($r("app.media.time"))
                }
              }
              Button() {
                Column() {
                  Text(' My device ')
                  Image($r("app.media.IoT"))
                }
              }
            }
            // 3
            Row({ space: 2 }) {
              Button() {
                Column() {
                  Text(' Timed reminder ')
                  Image($r("app.media.clock"))
                }
              }
            }
          }
        }.tabBar({ icon: ("/image/home.png"), text: ' home page ' })
        .backgroundImage('/image/background.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Cover)

        TabContent() {
          Column() {
            Flex() {
              Row({ space: 2 }) {
                Image('/image/user.png')
                Text(this.user_name)
              }
              Image('/image/message.png')
            }

            Flex() {
              Flex(){
                Row({ space: 2 }) {
                  Image('/image/mech.png')
                  Text(' My device ')
                }

                Image('/image/right.png')
              }

              Flex(){
                Row({ space: 2 }) {
                  Image('/image/set.png')
                  Text(' Set up ')
                }.width('50%').height(50)

                Image('/image/right.png')
              }
              Flex(){
                Row({ space: 2 }) {
                  Image('/image/change_user.png')
                  Text(' Switching users ')
                }

                Image('/image/right.png')
              }.width('90%').height(50).margin({top:10})

              Flex(){
                Row({ space: 2 }) {
                  Image('/image/help.png')
                  Text(' Feedback and suggestions ')
                }
                Image('/image/right.png')
              }
            }
          }
        }.tabBar({ icon: $r("app.media.me"), text: ' personal ' })
      }
    }
  }
......

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.

4. Complete code

// @ts-nocheck
@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController()
  private weather: string = ' Fine '
  private temp: number = 20.6
  private humidity: number = 30
  private sub: string = ' Suitable for drying clothes '
  private user_name: string = 'Cool_breeze'

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
              Text(' The weather  : ' + this.weather)
                .fontSize(30)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.White)

              Text(' temperature  : ' + this.temp + ' ℃')
                .fontSize(30)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)
                .margin({ top: 5 })

              Text(' humidity  : ' + this.humidity + ' RH')
                .fontSize(30)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)
                .margin({ top: 5 })
            }
            .height('25%')
            .width('85%')

            Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
              Text(this.sub)
                .fontSize(30)
            }
            .opacity(0.6)
            .backgroundColor(Color.White)
            .width('90%')
            .height(70)
            .borderRadius(10)

            Row({ space: 2 }) {
              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text(' Drying state ')
                    .fontSize(20)
                  Image($r("app.media.drying"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
              .margin({ right: 15 })

              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text(' Manual adjustment ')
                    .fontSize(20)
                  Image($r("app.media.hand"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
            }
            .width('90%')
            .height(180)
            .margin({ left: 10, top: 10})
            //2
            Row({ space: 2 }) {
              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text(' Time statistics ')
                    .fontSize(20)
                  Image($r("app.media.time"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
              .margin({ right: 15 })

              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text(' My device ')
                    .fontSize(20)
                  Image($r("app.media.IoT"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
            }
            .width('90%')
            .height(180)
            .margin({ top: 15, left: '10' })
            //3
            Row({ space: 2 }) {
              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text(' Timed reminder ')
                    .fontSize(20)
                  Image($r("app.media.clock"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
              .margin({ right: 15 })

            }
            .width('90%')
            .height(180)
            .margin({ top: 15, left: '10' })
          }

          .height('100%')
          .width('100%')
        }.tabBar({ icon: ("/image/home.png"), text: ' home page ' })
        .backgroundImage('/image/background.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Cover)

        TabContent() {
          Column() {
            Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
              Row({ space: 2 }) {
                Image('/image/user.png')
                  .clip(new Circle({ width: 50, height: 50 }))
                  .width(50)
                  .height(50)
                  .backgroundColor('#dbdb00')
                  .margin({ left: 5 })
                Text(this.user_name)
                  .fontSize(20)
                  .margin({ left: 5 })
              }.width('50%').height(50)

              Image('/image/message.png')
                .height(40)
                .width(50)
                .margin({ right: 5 })
            }
            .width('90%')
            .height(60)
            .margin({top:10})

            Flex({direction: FlexDirection.Column,alignItems:ItemAlign.Center}) {
              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
                Row({ space: 2 }) {
                  Image('/image/mech.png')
                    .width(30)
                    .height(30)
                    .margin({ left: 5 })
                  Text(' My device ')
                    .fontSize(20)
                    .margin({ left: 10 })
                }.width('50%').height(50)

                Image('/image/right.png')
                  .height(20)
                  .width(15)
                  .margin({ right: 5 })
              }.width('90%').height(50).margin({top:30})

              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
                Row({ space: 2 }) {
                  Image('/image/set.png')
                    .width(30)
                    .height(30)
                    .margin({ left: 5 })
                  Text(' Set up ')
                    .fontSize(20)
                    .margin({ left: 10 })
                }.width('50%').height(50)

                Image('/image/right.png')
                  .height(20)
                  .width(15)
                  .margin({ right: 5 })
              }.width('90%').height(50).margin({top:10})
              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
                Row({ space: 2 }) {
                  Image('/image/change_user.png')
                    .width(30)
                    .height(30)
                    .margin({ left: 5 })
                  Text(' Switching users ')
                    .fontSize(20)
                    .margin({ left: 10 })
                }.width('50%').height(50)

                Image('/image/right.png')
                  .height(20)
                  .width(15)
                  .margin({ right: 5 })
              }.width('90%').height(50).margin({top:10})

              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
                Row({ space: 2 }) {
                  Image('/image/help.png')
                    .width(30)
                    .height(30)
                    .margin({ left: 5 })
                  Text(' Feedback and suggestions ')
                    .fontSize(20)
                    .margin({ left: 10 })
                }.width('50%').height(50)

                Image('/image/right.png')
                  .height(20)
                  .width(15)
                  .margin({ right: 5 })
              }.width('90%').height(50).margin({top:10})
            }
            .height('50%')
            .width('100%')
            .borderRadius(20)
            .margin({top:10})
            .backgroundColor(Color.White)
          }
          .height('100%')
          .width('100%')
        }.tabBar({ icon: $r("app.media.me"), text: ' personal ' })
      }
      .vertical(false)
      .barWidth(300)
      .barHeight(60)
      .backgroundColor('#eeeeee')
      .width('100%')
    }
    .width('100%')
    .height('100%')
  }
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.

5. Some materials used

Background material ：
#DAYU200 Experience Officer # stay DAYU200 Run based on ArkUI-eTS Intelligent drying system page _ArkUI-eTS_09

6.Previewer Preview effect

#DAYU200 Experience Officer # stay DAYU200 Run based on ArkUI-eTS Intelligent drying system page _DAYU200_10

DAYU200 Running effect

#DAYU200 Experience Officer # stay DAYU200 Run based on ArkUI-eTS Intelligent drying system page _OpenHarmony_12

gitee Address

Link to the original version （ Able to run on DAYU200 You can download the resource code at the bottom of this post ）

Demo video

https://ost.51cto.com/show/14309

Follow up development plan

Based on this drying system interface and DAYU200 Development board ,
（1） Connect Hi3861 Smart home kits get real environment data ;
（2） Call weather API, send DAYU200 The weather forecast information can be obtained in real time after networking , So as to better realize the drying function ;
（3） if DAYU200 The camera itself is not allowed , It can be connected to an external camera or used Hi3516 AI Camera The function of the development kit is to monitor the drying status of clothes in real time more intelligently .
（4） Besides the perfect hardware function , Also upgrade some compatibility and functions of the software , It can not only run the program in DAYU200 Development board , Also in all HarmonyOS Run on device .

Want to know more about open source , Please visit ：

51CTO Open source basic software community

https://ost.51cto.com/#bkwz

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/187/202207061533037819.html