Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 a8a0bf45 编写于 作者: K king_he 提交者： Gitee
浏览文件
操作

update en/device-dev/guide/device-clock-guide.md. 

Signed-off-by: Nking_he <6384784@qq.com>
Signed-off-by: Nking_he <6384784@qq.com>
上级 f148a0ef
隐藏空白更改
内联 并排
Showing with 38 addition and 40 deletion
en/device-dev/guide/device-clock-guide.md
浏览文件 @ a8a0bf45
...@@ -2,38 +2,38 @@ ...@@ -2,38 +2,38 @@
## Overview<a name="section11522349121115"></a> ## Overview<a name="section11522349121115"></a>
This document describes how to quickly set up a development environment \(using the Hi3516D V300 development board\) and develop a clock app running on OpenHarmony. You can click [here](https://gitee.com/openharmony/app_samples/tree/master/common/Clock) to obtain the sample code. This document describes how to quickly set up a development environment \(using the Hi3516D V300 development board\) and develop a clock app running on OpenHarmony. You can click [here](https://gitee.com/openharmony/app_samples/tree/master/common/Clock) to obtain the sample code.
The clock app displays the current time, as shown in the following figure. The clock app displays the current time, as shown in the following figure.
**Figure 1** Clock display effect<a name="fig7763172132019"></a> **Figure 1** Clock display effect<a name="fig7763172132019"></a>
![](figures/clock.png) ![](figures/clock.png)
## Preparations<a name="section6592121861218"></a> ## Preparations<a name="section6592121861218"></a>
Download and install DevEco Studio. For details, see the [HUAWEI DevEco Studio User Guide](../../application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md). Download and install DevEco Studio. For details, see the [HUAWEI DevEco Studio User Guide](../../application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md).
## How to Develop<a name="section19901741111312"></a> ## How to Develop<a name="section19901741111312"></a>
The Clock app displays the current time through a clock face and numbers. The clock app displays the current time through a clock face and numbers.
As shown in [Figure 1 Clock display effect](#fig7763172132019), the UI consists of two parts: As shown in [Figure 1](#fig7763172132019), the UI consists of two parts:
- Clock face area: displays a dynamic analog clock whose hands rotate accurately. - Clock face area: displays a dynamic analog clock whose hands rotate accurately.
- Digital time area: displays the current time in numerals. - Digital time area: displays the current time in numerals.
To build such an app, we can create a page that has a flexible layout with two rows vertically arranged. The development procedure is as follows: To build such an app, we can create a page that has a flexible layout with two rows vertically arranged. The development procedure is as follows:
1. Add a root component **<div\>** to the **.hml** file. Note that each **.hml** file can contain only one root component. The sample code is as follows: 1. Add a root component **<div\>** to the **.hml** file. Note that each **.hml** file can contain only one root component. The sample code is as follows:
``` ```
<div class="container"> <div class="container">
</div> </div>
``` ```
**class="container"** indicates the style used by the component. The **container** is a style class defined in the **index.css** file. **class="container"** indicates the style used by the component. The **container** is a style class defined in the **index.css** file.
``` ```
.container { .container {
...@@ -45,9 +45,9 @@ To build such an app, we can create a page that has a flexible layout with two r ...@@ -45,9 +45,9 @@ To build such an app, we can create a page that has a flexible layout with two r
} }
``` ```
The height and width of the root component **<div\>** are set in the style class. Note that the height and width must be explicitly specified \(except for some components, such as **<text\>**\). Otherwise, the component may fail to display. In the **container** style class, the **flex-direction** attribute is set to **column**, which means that child components of **<div\>** are vertically arranged from top to bottom for implementing the flexible page layout. The height and width of the root component **<div\>** are set in the style class. Note that the height and width must be explicitly specified \(except for some components, such as **<text\>**\). Otherwise, the component may fail to display. In the **container** style class, the **flex-direction** attribute is set to **column**, which means that child components of **<div\>** are vertically arranged from top to bottom for implementing the flexible page layout.
2. Implement clock hand rotation using the **<stack\>** component. The **<stack\>** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one. 2. Implement clock hand rotation using the **<stack\>** component. The **<stack\>** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
Add a stack container to the root component. The sample code is as follows: Add a stack container to the root component. The sample code is as follows:
...@@ -56,7 +56,7 @@ To build such an app, we can create a page that has a flexible layout with two r ...@@ -56,7 +56,7 @@ To build such an app, we can create a page that has a flexible layout with two r
<stack class="stack"> <stack class="stack">
<image src="/common/clock_bg.png" class="clock-bg"></image> <!--Set the clock face image.--> <image src="/common/clock_bg.png" class="clock-bg"></image> <!--Set the clock face image.-->
<image src="/common/hour_hand.png" class="clock-hand" <image src="/common/hour_hand.png" class="clock-hand"
style="transform : rotate({{ hour * 30 + minute / 2 }}deg);"></image> <!--Set the hour hand image. (hour * 30) indicates that the hour hand rotates 30 degrees every hour. (minute / 2) indicates the rotation degrees per minute.--> style="transform : rotate({{ hour * 30 + minute / 2 }}deg);"></image> <!--Set the hour hand image. (hour * 30) indicates that the hour hand rotates 30 degrees every hour. (minute / 2) indicates the rotation degrees per minute.-->
<image src="/common/minute_hand.png" class="clock-hand" <image src="/common/minute_hand.png" class="clock-hand"
style="transform : rotate({{ minute * 6 + second / 10 }}deg);"></image> <!--Set the minute hand image. (minute * 6) indicates that the minute hand rotates 6 degrees every minute. (second / 10) indicates the rotation degrees per second.--> style="transform : rotate({{ minute * 6 + second / 10 }}deg);"></image> <!--Set the minute hand image. (minute * 6) indicates that the minute hand rotates 6 degrees every minute. (second / 10) indicates the rotation degrees per second.-->
<image src="/common/second_hand.png" class="clock-hand" <image src="/common/second_hand.png" class="clock-hand"
...@@ -65,7 +65,7 @@ To build such an app, we can create a page that has a flexible layout with two r ...@@ -65,7 +65,7 @@ To build such an app, we can create a page that has a flexible layout with two r
</div> </div>
``` ```
**style="transform: rotate\(\{\{ second \* 6 \}\}deg\)** sets the rotation event of a component. **transform** translates, rotates, or scales an image. **rotate** rotates an image. You can set an image to rotate around its x-axis or y-axis. **style="transform: rotate\(\{\{ second \* 6 \}\}deg\)** sets the rotation event of a component. **transform** translates, rotates, or scales an image. **rotate** rotates an image. You can set an image to rotate around its x-axis or y-axis.
Set attributes, such as the height, width, and position, of the stack component in the CSS file. The sample code is as follows: Set attributes, such as the height, width, and position, of the stack component in the CSS file. The sample code is as follows:
...@@ -99,7 +99,7 @@ To build such an app, we can create a page that has a flexible layout with two r ...@@ -99,7 +99,7 @@ To build such an app, we can create a page that has a flexible layout with two r
} }
``` ```
Add a timer in the **index.js** file to update the hour, minute, and second variables in real time so that the time can be automatically updated on the app UI. The sample code is as follows: Add a timer in the **index.js** file to update the hour, minute, and second variables in real time so that the time can be automatically updated on the app UI. The sample code is as follows:
``` ```
export default { export default {
...@@ -132,13 +132,13 @@ To build such an app, we can create a page that has a flexible layout with two r ...@@ -132,13 +132,13 @@ To build such an app, we can create a page that has a flexible layout with two r
} }
``` ```
3. Display the current time in numerals under the analog clock. Add the text component at the end of the root layout. The following example shows the UI structure: 3. Display the current time in numerals under the analog clock. Add the text component at the end of the root layout. The following example shows the UI structure:
``` ```
<text class="digit-clock"> {{ hour }}:{{ minute }}:{{ second }}</text> <text class="digit-clock"> {{ hour }}:{{ minute }}:{{ second }}</text>
``` ```
class=**"digit-clock"** sets the height, width, and font size of the component. The sample code is as follows: class=**"digit-clock"** sets the height, width, and font size of the component. The sample code is as follows:
``` ```
.digit-clock { .digit-clock {
...@@ -150,7 +150,7 @@ To build such an app, we can create a page that has a flexible layout with two r ...@@ -150,7 +150,7 @@ To build such an app, we can create a page that has a flexible layout with two r
``` ```
4. Set the style, animation effect, and dynamic data binding for all components. The complete sample code is as follows: 4. Set the style, animation effect, and dynamic data binding for all components. The complete sample code is as follows:
- **index.hml** - **index.hml**
``` ```
<div class="container"> <div class="container">
...@@ -167,7 +167,7 @@ To build such an app, we can create a page that has a flexible layout with two r ...@@ -167,7 +167,7 @@ To build such an app, we can create a page that has a flexible layout with two r
</div> </div>
``` ```
- **index.css** - **index.css**
``` ```
.container { .container {
...@@ -206,9 +206,9 @@ To build such an app, we can create a page that has a flexible layout with two r ...@@ -206,9 +206,9 @@ To build such an app, we can create a page that has a flexible layout with two r
} }
``` ```
- **index.js** - **index.js**
A **.js** file is used to implement logic interactions of the clock app. The following **.js** file implements the function of periodically obtaining the system time. A **.js** file is used to implement logic interactions of the clock app. The following **.js** file implements the function of periodically obtaining the system time.
``` ```
export default { export default {
...@@ -247,33 +247,33 @@ To build such an app, we can create a page that has a flexible layout with two r ...@@ -247,33 +247,33 @@ To build such an app, we can create a page that has a flexible layout with two r
## Signing and Packaging<a name="section10601181101516"></a> ## Signing and Packaging<a name="section10601181101516"></a>
After finishing writing the app code, you need to sign and package the app before running it on a real device. For details, see [Signing and Packaging Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section17660437768). After finishing writing the app code, you need to sign and package the app before running it on a real device. For details, see [Signing and Packaging Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section17660437768).
## Running on the Real Device<a name="section092721731511"></a> ## Running on the Real Device<a name="section092721731511"></a>
Before you install the app and run it on the development board, install the DevEco Device Tool by following operations provided in [HUAWEI DevEco Device Tool User Guide](https://device.harmonyos.com/en/docs/ide/user-guides/service_introduction-0000001050166905). Burn OpenHarmony into the development board, and run it on the board. For details about how to build, burn, and run an image, see . After the image is running normally and the system is started properly, perform the following steps to install or uninstall the app: Before you install the app and run it on the development board, install the DevEco Device Tool by following operations provided in [HUAWEI DevEco Device Tool User Guide](https://device.harmonyos.com/en/docs/ide/user-guides/service_introduction-0000001050166905). Burn OpenHarmony into the development board and run it. For details about how to build, burn, and run an image, see [Standard System Overview](../quick-start/quickstart-standard-overview.md). After the image is running normally and the system is started properly, perform the following steps to install or uninstall the app:
1. Obtain the HDC client from the following path: 1. Obtain the HDC client from the following path:
``` ```
developtools/hdc_standard/prebuilt/windows/hdc_std.exe developtools/hdc_standard/prebuilt/windows/hdc_std.exe
``` ```
Change the HDC client name to **hdc.exe** and add the path above to the system environment variable **path**. Change the HDC client name to **hdc.exe** and add the path above to the system environment variable **path**.
2. Open the **cmd** window, and run the following commands to push the HAP file to the device directory, and install it: 2. Open the **cmd** window, and run the following commands to push the HAP file to the device directory, and install it:
``` ```
hdc install clock.hap hdc install clock.hap
``` ```
3. Run the following command to start the app. **ohos.samples.clock** indicates the app package name, and **MainAbility** indicates the ability started by the app. 3. Run the following command to start the app. **ohos.samples.clock** indicates the app package name, and **MainAbility** indicates the ability started by the app.
``` ```
hdc shell aa start -d 123 -a ohos.samples.clock.MainAbility -b ohos.samples.clock hdc shell aa start -d 123 -a ohos.samples.clock.MainAbility -b ohos.samples.clock
``` ```
4. \(Optional\) Run the following command to uninstall the app. **ohos.samples.clock** indicates the app package name. 4. \(Optional\) Run the following command to uninstall the app. **ohos.samples.clock** indicates the app package name.
``` ```
hdc shell bm uninstall -n ohos.samples.clock hdc shell bm uninstall -n ohos.samples.clock
...@@ -284,33 +284,31 @@ Before you install the app and run it on the development board, install the DevE ...@@ -284,33 +284,31 @@ Before you install the app and run it on the development board, install the DevE
### hdc\_std Fails to Connect to a Device<a name="section1922725151614"></a> ### hdc\_std Fails to Connect to a Device<a name="section1922725151614"></a>
- **Symptom** - **Symptom**
**\[Empty\]** is displayed in the output after the **hdc\_std list targets** command is run. **\[Empty\]** is displayed in the output after the **hdc\_std list targets** command is run.
- **Possible Causes and Solutions** - **Possible Causes and Solutions**
1. The device fails to be identified. - The device fails to be identified.
Check whether **HDC Device** exists in the universal serial bus device of the device manager. If **HDC Device** does not exist, the device cannot be connected. In this case, remove and then insert the device or burn the latest image for the device. Check whether **HDC Device** exists in the universal serial bus device of the device manager. If **HDC Device** does not exist, the device cannot be connected. In this case, remove and then insert the device or burn the latest image for the device.
2. hdc\_std works improperly. - hdc\_std works improperly.
Run the **hdc kill** or **hdc start -r** command to kill or restart the HDC service, and then run the **hdc list targets** command to check whether device information is obtained. Run the **hdc kill** or **hdc start -r** command to kill or restart the HDC service, and then run the **hdc list targets** command to check whether device information is obtained.
3. hdc\_std does not match the device. - hdc\_std does not match the device.
If the latest image is burnt for the device, hdc\_std must also be of the latest version. As hdc\_std is updated continuously, obtain hdc\_std of the latest version from the **developtools\_hdc\_standard** repository in the **prebuilt** directory. If the latest image is burnt for the device, hdc\_std must also be of the latest version. As hdc\_std is updated continuously, obtain hdc\_std of the latest version from the **developtools\_hdc\_standard** repository in the **prebuilt** directory.
### hdc\_std Fails to Run<a name="section15657547131615"></a> ### hdc\_std Fails to Run<a name="section15657547131615"></a>
- **Symptom** - **Symptom**
The **hdc\_std.exe** file does not run after being clicked. The **hdc\_std.exe** file does not run after being clicked.
- **Possible Causes and Solutions**
**hdc\_std.exe** requires no installation and can be directly used on a disk. It can also be added to environment variables. Open the **cmd** window and run the **hdc\_std** command to use **hdc\_std.exe**.
- **Possible Causes and Solutions**
**hdc\_std.exe** requires no installation and can be directly used on a disk. It can also be added to environment variables. Open the **cmd** window and run the **hdc\_std** command to use **hdc\_std.exe**.
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或