,
controller: WebController
} | - | JavaScript object to be injected into the window. Methods of this object can be invoked in the window. The parameters in this attribute cannot be updated.
**object** indicates the object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.
**name** indicates the name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.
**methodList** indicates the methods of the JavaScript object to be registered at the application side.
**controller** indicates the controller.|
+| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. |
+| mixedMode | [MixedMode](#mixedmode) | MixedMode.None | Whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled.|
+| onlineImageAccess | boolean | true | Whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled.|
+| zoomAccess | boolean | true | Whether to enable zoom gestures. By default, zoom gestures are enabled. |
+| overviewModeAccess | boolean | true | Whether to use the overview mode to load web pages. By default, this mode is used. |
+| databaseAccess | boolean | false | Whether to enable database access. By default, this feature is disabled. |
+| cacheMode | [CacheMode](#cachemode) | CacheMode.Default | Cache mode. |
+| textZoomAtio | number | 100 | Text zoom ratio of the page. The default value is **100**, which indicates 100%. |
+| userAgent | string | - | User agent. |
+
+> **NOTE**
>
> Only the following universal attributes are supported: [width](ts-universal-attributes-size.md#Attributes), [height](ts-universal-attributes-size.md#Attributes), [padding](ts-universal-attributes-size.md#Attributes), [margin](ts-universal-attributes-size.md#Attributes), and [border](ts-universal-attributes-border.md#Attributes).
-- MixedMode
-
- | Name | Description |
- | ---------- | ---------------------------------------- |
- | All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded. |
- | Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. |
- | None | HTTP and HTTPS hybrid content cannot be loaded. |
## Events
-Universal events are not supported.
+The universal events are not supported.
-| Name | Description |
-| ---------------------------------------- | ---------------------------------------- |
-| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when **alert()** is invoked to display an alert dialog box on the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can invoke the system dialog box capability (allows only the confirm operation) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: notifies the **\** component of the user's operation.
|
-| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when the current page is about to exit after the user refreshes or closes the page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can invoke the system dialog box capability (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: notifies the **\** component of the user's operation.
|
-| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when **confirm()** is invoked to display a confirmation dialog box on the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can invoke the system dialog box capability (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: notifies the **\** component of the user's operation.
|
+| Name | Description |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when **alert()** is invoked to display an alert dialog box on the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows only the confirm operation) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.
|
+| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when the current page is about to exit after the user refreshes or closes the page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.
|
+| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when **confirm()** is invoked by the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.
|
| onConsole(callback: (event?: { message: [ConsoleMessage](#consolemessage) }) => boolean) | Triggered when the host application is notified of a JavaScript console message.
**message**: console message.
|
| onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | Triggered when a download task starts on the web page.
**url**: URL for the download task.
**userAgent**: name of the user agent (UA) for the download task.
**contentDisposition**: Content-Disposition response header returned by the server, which may be empty.
**mimetype**: content media type (MIME) returned by the server.
**contentLength**: length of the file returned by the server.
|
| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), error: [WebResourceError](#webresourceerror) }) => void) | Triggered when an error occurs during web page loading.
For better results, simplify the implementation logic in the callback.
**request**: encapsulation of a web page request.
**error**: encapsulation of a web page resource loading error.
|
| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), response: [WebResourceResponse](#webresourceresponse) }) => void) | Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.
**request**: encapsulation of a web page request.
**response**: encapsulation of a web page response.
|
-| onPageBegin(callback: (event?: { url: string }) => void) | Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content.
**url**: URL of the page.
|
-| onPageEnd(callback: (event?: { url: string }) => void) | Triggered when the web page loading is complete. This API is triggered only for the main frame content.
**url**: URL of the page.
|
+| onPageBegin(callback: (event?: { url: string }) => void) | Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content.
**url**: URL of the page.
|
+| onPageEnd(callback: (event?: { url: string }) => void) | Triggered when the web page loading is complete. This API is triggered only for the main frame content.
**url**: URL of the page.
|
| onProgressChange(callback: (event?: { newProgress: number }) => void) | Triggered when the web page loading progress changes.
**newProgress**: new loading progress. The value is an integer ranging from 0 to 100.
|
| onTitleReceive(callback: (event?: { title: string }) => void) | Triggered when the document title of the web page is changed.
**title**: document title.
|
+| onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | Triggered when loading of the web page is complete. This callback function is used by an application to update the historical link it accessed.
**url**: URL to be accessed.
**isRefreshed**: whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.
|
+| onRenderExited(callback: (event?: { renderExitReason: [RenderExitReason](#renderexitreason) }) => void) | Triggered when the rendering process exits abnormally.
**renderExitReason**: cause for the abnormal exit of the rendering process.
|
+| onShowFileSelector(callback: (event?: { result: [FileSelectorResult](#fileselectorresult), fileSelector: [FileSelectorParam](#fileselectorparam) }) => void) | Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.
**result**: file selection result to be sent to the web component.
**fileSelector**: information about the file selector.
|
+| onUrlLoadIntercept(callback: (event?: { data:string \| [WebResourceRequest](#webresourcerequest) }) => boolean) | Triggered before the **\** component loads the URL to determine whether to block the access. The callback returns **true** if the access is blocked, and **false** otherwise.
**data**: URL information.
|
### ConsoleMessage
- APIs
- | Name | Description |
- | ------------------------------- | ---------------------------------------- |
- | getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
- | getMessage(): string | Obtains the log information of the **ConsoleMessage**. |
- | getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**. |
- | getSourceId(): string | Obtains the path and name of the web page source file. |
+ | Name | Description |
+ | ------------------------------- | ---------------------- |
+ | getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
+ | getMessage(): string | Obtains the log information of the **ConsoleMessage**.|
+ | getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**.|
+ | getSourceId(): string | Obtains the path and name of the web page source file. |
- MessageLevel enums
- | Name | Description |
- | ----- | :----------------- |
- | Debug | Debug level. |
- | Error | Error level. |
- | Info | Information level. |
- | Log | Log level. |
- | Warn | Warning level. |
+ | Name | Description |
+ | ----- | :---- |
+ | Debug | Debug level.|
+ | Error | Error level.|
+ | Info | Information level.|
+ | Log | Log level.|
+ | Warn | Warning level. |
### JsResult
-Represents the result returned to the **\** component to indicate the operation performed in the dialog box.
+Provides the result returned to the **\** component to indicate the user operation performed in the dialog box.
- APIs
- | Name | Description |
- | --------------------- | ---------------------------------------- |
- | handleCancel(): void | Notifies the **\** component that the user touches the Cancel button in the dialog box.
|
- | handleConfirm(): void | Notifies the **\** component that the user touches the Confirm button in the dialog box.
|
+ | Name | Description |
+ | --------------------- | ----------------------- |
+ | handleCancel(): void | The user's cancel operation in the dialog box.
|
+ | handleConfirm(): void | The user's confirm operation in the dialog box.
|
### WebResourceError
- APIs
- | Name | Description |
- | ---------------------- | ---------------------------------------- |
+ | Name | Description |
+ | ---------------------- | ------------ |
| getErrorCode(): number | Obtains the error code for resource loading. |
- | getErrorInfo(): string | Obtains error information about resource loading. |
+ | getErrorInfo(): string | Obtains error information about resource loading.|
### WebResourceRequest
- APIs
- | Name | Description |
- | ---------------------------------------- | ---------------------------------------- |
- | getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
- | getRequestUrl(): string | Obtains the URL of the resource request. |
- | isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
- | isRedirect(): boolean | Checks whether the resource request is redirected by the server. |
- | isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap). |
+ | Name | Description |
+ | ---------------------------------------- | -------------------- |
+ | getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
+ | getRequestUrl(): string | Obtains the URL of the resource request. |
+ | isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
+ | isRedirect(): boolean | Checks whether the resource request is redirected by the server. |
+ | isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap).|
### Header
-Describes the request/response header object returned by the **\** component.
+Describes the request/response header returned by the **\** component.
- Parameters
- | Name | Type | Description |
- | ----------- | ------ | ------------------------------------- |
- | headerKey | string | Key of the request/response header. |
- | headerValue | string | Value of the request/response header. |
+ | Name | Type | Description |
+ | ----------- | ------ | ------------- |
+ | headerKey | string | Key of the request/response header. |
+ | headerValue | string | Value of the request/response header.|
### WebResourceResponse
- APIs
- | Name | Description |
- | ---------------------------------------- | ---------------------------------------- |
- | getReasonMessage(): string | Obtains the status code description of the resource response. |
- | getResponseCode(): number | Obtains the status code of the resource response. |
- | getResponseData(): string | Obtains the data in the resource response. |
- | getResponseEncoding(): string | Obtains the encoding of the resource response. |
- | getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
- | getResponseMimeType(): string | Obtains the media (MIME) type of the resource response. |
+ | Name | Description |
+ | ---------------------------------------- | ------------------ |
+ | getReasonMessage(): string | Obtains the status code description of the resource response. |
+ | getResponseCode(): number | Obtains the status code of the resource response. |
+ | getResponseData(): string | Obtains the data in the resource response. |
+ | getResponseEncoding(): string | Obtains the encoding of the resource response. |
+ | getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
+ | getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.|
+
+### RenderExitReason
+
+Explains why the rendering process exits.
+
+| Name | Description |
+| -------------------------- | ----------------- |
+| ProcessAbnormalTermination | The rendering process exits abnormally. |
+| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated.|
+| ProcessCrashed | The rendering process crashes due to a segmentation error or other errors. |
+| ProcessOom | The program memory is running low. |
+| ProcessExitUnknown | Other reason. |
+
+### MixedMode
+
+| Name | Description |
+| ---------- | ---------------------------------- |
+| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded.|
+| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. |
+| None | HTTP and HTTPS hybrid content cannot be loaded. |
+
+### CacheMode
+| Name | Description |
+| ------- | ------------------------------------ |
+| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.|
+| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. |
+| Online | The cache is not used to load the resources. All resources are obtained from the Internet. |
+| Only | The cache alone is used to load the resources. |
+
+### FileSelectorResult
+Notifies the **\** component of the file selection result.
+
+- APIs
+
+ | Name | Description |
+ | ---------------------------------------------- | ------------------------------------------------------------ |
+ | handleFileList(fileList: Array\): void | Instructs the **\** component to select a file.
**fileList**: list of files to operate. |
+
+### FileSelectorParam
+- APIs
+
+ | Name | Description |
+ | -------------------------------- | ------------ |
+ | getTitle(): string | Obtains the title of the file selector. |
+ | getMode(): FileSelectorMode | Obtains the mode of the file selector. |
+ | getAcceptType(): Array\ | Obtains the file filtering type. |
+ | isCapture(): boolean | Checks whether multimedia capabilities are invoked.|
+
+### FileSelectorMode
+| Name | Description |
+| -------------------- | ---------- |
+| FileOpenMode | Open and upload a file. |
+| FileOpenMultipleMode | Open and upload multiple files. |
+| FileOpenFolderMode | Open and upload a folder.|
+| FileSaveMode | Save a file. |
## WebController
@@ -179,15 +237,15 @@ Indicates whether a specific number of steps forward or backward can be performe
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
- | ---- | ------ | --------- | ------------- | ---------------------------------------- |
- | step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ---- | ------ | ---- | ---- | --------------------- |
+ | step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward.|
- Return value
- | Type | Description |
- | ------- | ---------------------------------------- |
- | boolean | Whether to go forward or backward from the current page. |
+ | Type | Description |
+ | ------- | --------- |
+ | boolean | Whether to go forward or backward from the current page.|
### backward
@@ -203,9 +261,9 @@ Deletes a specific application JavaScript object that is registered with the win
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
- | ---- | ------ | --------- | ------------- | ---------------------------------------- |
- | name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ---- | ------ | ---- | ---- | ---------------------------------------- |
+ | name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side.|
### forward
@@ -221,16 +279,15 @@ Obtains the element type of the area being clicked.
- HitTestType enums
- | Name | Description |
- | ------------- | ---------------------------------------- |
- | EditText | Editable area. |
- | Email | Email address. |
- | HttpAnchor | Hyperlink where **src** is **http**. |
- | HttpAnchorImg | Image with a hyperlink, where **src** is **http**. |
- | Img | HTML::img tag. |
- | Map | Geographical address. |
- | PhoneNumber | Phone number. |
- | Unknown | Unknown content. |
+ | Name | Description |
+ | ------------- | ------------------------ |
+ | EditText | Editable area. |
+ | Email | Email address. |
+ | HttpAnchor | Hyperlink where **src** is **http**. |
+ | HttpAnchorImg | Image with a hyperlink, where **src** is **http**.|
+ | Img | HTML::img tag. |
+ | Map | Geographical address. |
+ | Unknown | Unknown content. |
### loadData
@@ -244,13 +301,13 @@ If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be proces
- options
- | Name | Type | Mandatory | Default Value | Description |
- | ---------- | ------ | --------- | ------------- | ---------------------------------------- |
- | data | string | Yes | - | Character string obtained after being Base64 or URL encoded. |
- | mimeType | string | Yes | - | Media type (MIME). |
- | encoding | string | Yes | - | Encoding type, which can be Base64 or URL. |
- | baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\** component to **window.origin**. |
- | historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ---------- | ------ | ---- | ---- | ---------------------------------------- |
+ | data | string | Yes | - | Character string obtained after being Base64 or URL encoded. |
+ | mimeType | string | Yes | - | Media type (MIME). |
+ | encoding | string | Yes | - | Encoding type, which can be Base64 or URL. |
+ | baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\** component to **window.origin**.|
+ | historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty.|
### loadUrl
@@ -260,14 +317,14 @@ Loads a URL using the specified HTTP header.
The object injected through **loadUrl** is valid only in the current document. It will be invalid on a new page navigated to through **loadUrl**.
-Objects injected through **registerJavaScriptProxy** are still valid on a new page navigated to through **loadUrl**.
+The object injected through **registerJavaScriptProxy** is still valid on a new page navigated to through **loadUrl**.
- options
- | Name | Type | Mandatory | Default Value | Description |
- | ------- | -------------------------- | --------- | ------------- | ---------------------------------------- |
- | url | string | Yes | - | URL to load. |
- | headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ------- | ------------------------------ | ---- | ---- | -------------- |
+ | url | string | Yes | - | URL to load. |
+ | headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL.|
### onActive
@@ -295,24 +352,24 @@ Injects a JavaScript object into the window and invokes the methods of the objec
- options
- | Name | Type | Mandatory | Default Value | Description |
- | ---------- | --------------- | --------- | ------------- | ---------------------------------------- |
- | object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type. |
- | name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side. |
- | methodList | Array\ | Yes | - | Methods of the JavaScript object to be registered at the application side. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ---------- | --------------- | ---- | ---- | ---------------------------------------- |
+ | object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.|
+ | name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.|
+ | methodList | Array\ | Yes | - | Methods of the JavaScript object to be registered at the application side. |
### runJavaScript
runJavaScript(options: { script: string, callback?: (result: string) => void }): void
-Asynchronously executes a JavaScript script. This API uses a callback to return the script execution result.**runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be executed in **onPageEnd**.
+Asynchronously executes a JavaScript script. This API uses a callback to return the script execution result. **runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be executed in **onPageEnd**.
- options
- | Name | Type | Mandatory | Default Value | Description |
- | -------- | ------------------------ | --------- | ------------- | ---------------------------------------- |
- | script | string | Yes | - | JavaScript script. |
- | callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
+ | script | string | Yes | - | JavaScript script. |
+ | callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned.|
### stop
@@ -320,9 +377,50 @@ stop(): void
Stops page loading.
+### clearHistory
+
+clearHistory(): void
+
+Clears the browsing history.
+
+### getCookieManager
+
+getCookieManager(): WebCookie
+
+Obtains the cookie management object of the **\** component.
+- Return value
+ | Type | Description |
+ | --------- | ---------------------------------------- |
+ | WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).|
+## WebCookie
+Manages behavior of cookies in **\** components. All **\** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
+### setCookie
+setCookie(url: string, value: string): boolean
+
+Sets the cookie. This API is synchronous.
+
+- Parameters
+
+ | Name | Type | Mandatory | Default Value | Description |
+ | ----- | ------ | ---- | ---- | ----------------- |
+ | url | string | Yes | - | URL of the cookie to set.|
+ | value | string | Yes | - | Value of the cookie to set. |
+- Return value
+ | Type | Description |
+ | ------- | ------------- |
+ | boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
+
+### saveCookieSync
+saveCookieSync(): boolean
+
+Saves this cookie in the memory to the disk. This API is synchronous.
+- Return value
+ | Type | Description |
+ | ------- | -------------------- |
+ | boolean | Returns the operation result.|
## Example
-```
+```ts
// webComponent.ets
@Entry
@Component
@@ -344,7 +442,7 @@ struct WebComponent {
}
}
```
-```
+```html
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
index f8e557dac894954cdef0c4fa0f9b5a6c336cedc2..3a90aab90084be24746bba23aa9b224b15b2b99f 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
@@ -1,6 +1,6 @@
# XComponent
- >  **NOTE**
+ > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\** can accept and display the EGL/OpenGLES and media data input.
@@ -19,20 +19,20 @@
- Name
- | Name | Type | Mandatory| Description |
- | ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
- | id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. |
- | type | string | Yes | Type of the component. The options are as follows:
-**surface**: The content of this component is displayed individually, without being combined with that of other components.
-**component**: The content of this component is displayed after having been combined with that of other components.
This API is defined but not implemented in OpenHarmony 3.1 Release. It will be available for use in OpenHarmony 3.1 MR.|
- | libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. |
+ | Name | Type | Mandatory | Description |
+ | ----------- | --------------------------------------- | --------- | ------------------------------------------------------------ |
+ | id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. |
+ | type | string | Yes | Type of the component. The options are as follows:
- **surface**: The content of this component is displayed individually, without being combined with that of other components.
- **component**: The content of this component is displayed after having been combined with that of other components. |
+ | libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. |
| controller | [XComponentController](#XComponentController) | No | Controller bound to the component, which can be used to invoke methods of the component. |
## Events
-| Name | Description |
+| Name | Description |
| ------------------------------- | ------------------------ |
-| onLoad(context?: object) => void | Triggered when the plug-in is loaded.|
-| onDestroy() => void | Triggered when the plug-in is destroyed.|
+| onLoad(context?: object) => void | Triggered when the plug-in is loaded. |
+| onDestroy() => void | Triggered when the plug-in is destroyed. |
## XComponentController
@@ -52,9 +52,9 @@ Obtains the ID of the surface held by the **\**. The ID can be used
- Return value
- | Type | Description |
+ | Type | Description |
| ------ | --------------------------- |
- | string | ID of the surface held by the **\**.|
+ | string | ID of the surface held by the **\**. |
### setXComponentSurfaceSize
@@ -64,10 +64,10 @@ Sets the width and height of the surface held by the **\**.
- Parameters
- | Name | Type| Mandatory| Default Value| Description |
+ | Name | Type | Mandatory | Default Value | Description |
| ------------- | -------- | ---- | ------ | ----------------------------- |
- | surfaceWidth | number | Yes | - | Width of the surface held by the **\**.|
- | surfaceHeight | number | Yes | - | Height of the surface held by the **\**.|
+ | surfaceWidth | number | Yes | - | Width of the surface held by the **\**. |
+ | surfaceHeight | number | Yes | - | Height of the surface held by the **\**. |
### getXComponentContext
@@ -85,7 +85,8 @@ Obtains the context of an **\** object.
Provide a surface-type **\** to support capabilities such as camera preview.
-```
+```ts
+// xxx.ets
import camera from '@ohos.multimedia.camera';
@Entry
@Component
diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index d6c76db8635c77b616b0fe09484abe45349d86a6..7b91e7865dd58ad62ceedf02afc37944f54cf89e 100644
--- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -1,11 +1,11 @@
# CanvasRenderingContext2D
->  **NOTE**
+> **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-Use **RenderingContext** to draw rectangles, text, images, and other objects on a canvas.
+The **\** component is used to draw rectangles, text, images, and other objects on a canvas.
## APIs
@@ -15,7 +15,7 @@ CanvasRenderingContext2D(setting: RenderingContextSetting)
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ------- | ---------------------------------------- | --------- | ------------- | ----------------------------- |
- | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See RenderingContextSettings. |
+ | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See [RenderingContextSettings](#renderingcontextsettings). |
### RenderingContextSettings
@@ -34,15 +34,15 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
| Name | Type | Default Value | Description |
| ---------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- |
-| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.
- When the type is **<color>**, this attribute indicates the fill color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
+| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.
- When the type is **<color>**, this attribute indicates the fill color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
| [lineWidth](#linewidth) | number | - | Line width. |
-| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.
- When the type is **<color>**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
-| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
-| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.
- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
+| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.
- When the type is **<color>**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
+| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
+| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.
- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
-| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
-| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
>  **NOTE**
> In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. |
-| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
+| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
+| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
**NOTE**
In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. |
+| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
| [globalAlpha](#globalalpha) | number | - | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. |
| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
@@ -53,14 +53,14 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
| imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
->  **NOTE**
+> **NOTE**
> The value of the **<color>** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.
### fillStyle
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct FillStyleExample {
@@ -89,8 +89,8 @@ struct FillStyleExample {
### lineWidth
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineWidthExample {
@@ -119,8 +119,8 @@ struct LineWidthExample {
### strokeStyle
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct StrokeStyleExample {
@@ -151,8 +151,8 @@ struct StrokeStyleExample {
### lineCap
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineCapExample {
@@ -185,8 +185,8 @@ struct LineCapExample {
### lineJoin
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineJoinExample {
@@ -220,8 +220,8 @@ struct LineJoinExample {
### miterLimit
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct MiterLimit {
@@ -255,8 +255,8 @@ struct MiterLimit {
### font
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct Font {
@@ -285,8 +285,8 @@ struct Font {
### textAlign
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CanvasExample {
@@ -330,8 +330,8 @@ struct CanvasExample {
### textBaseline
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TextBaseline {
@@ -375,8 +375,8 @@ struct TextBaseline {
### globalAlpha
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GlobalAlpha {
@@ -408,8 +408,8 @@ struct GlobalAlpha {
### lineDashOffset
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineDashOffset {
@@ -453,8 +453,8 @@ struct LineDashOffset {
| copy | Displays the new drawing and neglects the existing drawing. |
| xor | Combines the new drawing and existing drawing using the XOR operation. |
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GlobalCompositeOperation {
@@ -491,8 +491,8 @@ struct GlobalCompositeOperation {
### shadowBlur
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowBlur {
@@ -523,8 +523,8 @@ struct ShadowBlur {
### shadowColor
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowColor {
@@ -555,8 +555,8 @@ struct ShadowColor {
### shadowOffsetX
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowOffsetX {
@@ -588,8 +588,8 @@ struct ShadowOffsetX {
### shadowOffsetY
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowOffsetY {
@@ -620,8 +620,8 @@ struct ShadowOffsetY {
### imageSmoothingEnabled
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ImageSmoothingEnabled {
@@ -668,7 +668,8 @@ Fills a rectangle on the canvas.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct FillRect {
@@ -710,7 +711,8 @@ Draws an outlined rectangle on the canvas.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct StrokeRect {
@@ -751,7 +753,8 @@ Clears the content in a rectangle on the canvas.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct ClearRect {
@@ -793,7 +796,8 @@ Draws filled text on the canvas.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct FillText {
@@ -834,7 +838,8 @@ Draws a text stroke on the canvas.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct StrokeText {
@@ -883,7 +888,8 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct MeasureText {
@@ -923,7 +929,8 @@ Strokes a path.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Stroke {
@@ -960,7 +967,8 @@ Creates a drawing path.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct BeginPath {
@@ -1005,7 +1013,8 @@ Moves a drawing path to a target position on the canvas.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct MoveTo {
@@ -1048,7 +1057,8 @@ Connects the current point to a target position using a straight line.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct LineTo {
@@ -1085,7 +1095,8 @@ Draws a closed path.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct ClosePath {
@@ -1130,7 +1141,8 @@ Creates a pattern for image filling based on a specified source image and repeti
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CreatePattern {
@@ -1177,7 +1189,8 @@ Draws a cubic bezier curve on the canvas.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct BezierCurveTo {
@@ -1222,7 +1235,8 @@ Draws a quadratic curve on the canvas.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
@@ -1313,7 +1327,8 @@ Draws an arc based on the radius and points on the arc.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct ArcTo {
@@ -1362,7 +1377,8 @@ Draws an ellipse in the specified rectangular region.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CanvasExample {
@@ -1406,7 +1422,8 @@ Creates a rectangle.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CanvasExample {
@@ -1441,7 +1458,8 @@ Fills the area inside a closed path.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Fill {
@@ -1476,7 +1494,8 @@ Sets the current path to a clipping path.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Clip {
@@ -1519,7 +1538,8 @@ Rotates a canvas clockwise around its coordinate axes.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Rotate {
@@ -1560,7 +1580,8 @@ Scales a canvas based on scale factors.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Scale {
@@ -1594,7 +1615,7 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
->  **NOTE**
+> **NOTE**
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
>
> - x' = scaleX \* x + skewY \* y + translateX
@@ -1613,7 +1634,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Transform {
@@ -1664,7 +1686,8 @@ Resets the existing transformation matrix and creates a new transformation matri
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct SetTransform {
@@ -1708,7 +1731,8 @@ Moves the origin of the coordinate system.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Translate {
@@ -1738,18 +1762,18 @@ Moves the origin of the coordinate system.
### drawImage
-drawImage(image: ImageBitmap, dx: number, dy: number): void
+drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void
-drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void
+drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void
-drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
+drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
Draws an image.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
- | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Image resource. For details, see ImageBitmap |
+ | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes | null | Image resource. For details, see ImageBitmap or PixelMap. |
| sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sWidth | number | No | 0 | Target width to crop the source image. |
@@ -1762,7 +1786,8 @@ Draws an image.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct ImageExample {
@@ -1812,12 +1837,24 @@ Creates an **ImageData** object. For details, see [ImageData](ts-components-canv
| --------- | ------ | --------- | ------------- | ---------------------------------------- |
| imagedata | Object | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object. |
+### getPixelMap
+
+getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
+
+Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas.
+- Parameters
+ | Name | Type | Mandatory | Default Value | Description |
+ | ---- | ------ | ---- | ---- | --------------- |
+ | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.|
+ | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.|
+ | sw | number | Yes | 0 | Width of the output area. |
+ | sh | number | Yes | 0 | Height of the output area. |
### getImageData
getImageData(sx: number, sy: number, sw: number, sh: number): Object
- Creates an [ImageData](ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas.
+Creates an **[ImageData](ts-components-canvas-imagebitmap.md)** object with pixels in the specified area on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
@@ -1831,7 +1868,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void
-Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular area on the canvas.
+Puts the **[ImageData](ts-components-canvas-imagebitmap.md)** onto a rectangular area on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
@@ -1846,7 +1883,8 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct PutImageData {
@@ -1887,7 +1925,8 @@ Restores the saved drawing context.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CanvasExample {
@@ -1919,7 +1958,8 @@ Saves the current drawing context.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CanvasExample {
@@ -1959,7 +1999,8 @@ Creates a linear gradient.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CreateLinearGradient {
@@ -2008,7 +2049,8 @@ Creates a linear gradient.
- Example
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CreateRadialGradient {
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
index e7b2846ba9c5d98806745dcfc25a8c3234ce43bc..5efa02368bf4eb70bca06a7e6a71473853692571 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
@@ -1,7 +1,7 @@
# Image Effect Configuration
->  **NOTE**
+> **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -25,7 +25,7 @@ None
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
| colorBlend 8+ | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
-| hueRotate | Angle | 0deg | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated one ore more circles. |
+| hueRotate | number \| string | '0deg' |Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated for one more circle. In other words, the value **370deg** has the same effect as **10deg**.|
## Example
diff --git a/en/device-dev/quick-start/Readme-EN.md b/en/device-dev/quick-start/Readme-EN.md
index 2afa83a8d1a6e0ea5e79f97018044f86e1be3a1f..4078afd7efd1c4c7a25760fcd7fa1f4c3437402e 100644
--- a/en/device-dev/quick-start/Readme-EN.md
+++ b/en/device-dev/quick-start/Readme-EN.md
@@ -28,7 +28,7 @@
- Running a Hello World Program
- Hi3861 Development Board
- [Setting Up the Hi3861 Development Board Environment](quickstart-lite-steps-hi3861-setting.md)
- - [Writing a Hello World Program](quickstart-lite-steps-hi3861-application-framework.md)
+ - [Writing a Hello World Program](quickstart-lite-steps-hi3861-helloworld.md)
- [Building](quickstart-lite-steps-hi3861-building.md)
- [Burning](quickstart-lite-steps-hi3861-burn.md)
- [Networking](quickstart-lite-steps-hi3861-netconfig.md)
@@ -36,7 +36,7 @@
- [Running](quickstart-lite-steps-hi3861-running.md)
- Hi3516 Development Board
- [Setting Up the Hi3516 Development Board Environment](quickstart-lite-steps-hi3516-setting.md)
- - [Writing a Hello World Program](quickstart-lite-steps-hi3516-application-framework.md)
+ - [Writing a Hello World Program](quickstart-lite-steps-hi3516-helloworld.md)
- [Building](quickstart-lite-steps-hi3516-building.md)
- [Burning](quickstart-lite-steps-hi3516-burn.md)
- [Running](quickstart-lite-steps-hi3516-running.md)
@@ -75,7 +75,7 @@
- [Setting Up Environments for Standard System](quickstart-standard-env-setup.md)
- Running a Hello World Program
- Hi3516 Development Board
- - [Writing a Hello World Program](quickstart-standard-running-hi3516-create.md)
+ - [Writing a Hello World Program](quickstart-std-3516-create.md)
- [Building](quickstart-standard-running-hi3516-build.md)
- [Burning](quickstart-standard-running-hi3516-burning.md)
- [Running](quickstart-standard-running-hi3516-running.md)
diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001266887264.png b/en/device-dev/quick-start/figures/en-us_image_0000001266887264.png
new file mode 100644
index 0000000000000000000000000000000000000000..f931e2cfba06791a3891248c5d8e6a9f0e86bf0e
Binary files /dev/null and b/en/device-dev/quick-start/figures/en-us_image_0000001266887264.png differ
diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001271354693.png b/en/device-dev/quick-start/figures/en-us_image_0000001271354693.png
index 02f74a108d5223682d57dc2e18aaefc3d31e6518..3e4d31eb90fc63376f511d0fb5320a69ee7af150 100644
Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001271354693.png and b/en/device-dev/quick-start/figures/en-us_image_0000001271354693.png differ
diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001307019009.png b/en/device-dev/quick-start/figures/en-us_image_0000001307019009.png
new file mode 100644
index 0000000000000000000000000000000000000000..cee1d83517ee1fced5373f51cefb12e91346e947
Binary files /dev/null and b/en/device-dev/quick-start/figures/en-us_image_0000001307019009.png differ
diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001312778829.png b/en/device-dev/quick-start/figures/en-us_image_0000001312778829.png
new file mode 100644
index 0000000000000000000000000000000000000000..15791ccc963502062bd54537567db8876d9d7b63
Binary files /dev/null and b/en/device-dev/quick-start/figures/en-us_image_0000001312778829.png differ
diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001312780249.png b/en/device-dev/quick-start/figures/en-us_image_0000001312780249.png
new file mode 100644
index 0000000000000000000000000000000000000000..33827bef0cfc3dd949fd165883b05b7ca47dafb7
Binary files /dev/null and b/en/device-dev/quick-start/figures/en-us_image_0000001312780249.png differ
diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001312898911.png b/en/device-dev/quick-start/figures/en-us_image_0000001312898911.png
new file mode 100644
index 0000000000000000000000000000000000000000..b048f3fda0aa3d64edffdd26948ef732bad31b17
Binary files /dev/null and b/en/device-dev/quick-start/figures/en-us_image_0000001312898911.png differ
diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001312912501.png b/en/device-dev/quick-start/figures/en-us_image_0000001312912501.png
new file mode 100644
index 0000000000000000000000000000000000000000..550b0aed6cef3be1fed799052e78442335f92562
Binary files /dev/null and b/en/device-dev/quick-start/figures/en-us_image_0000001312912501.png differ
diff --git a/en/device-dev/quick-start/figures/en-us_image_000000131299335.png b/en/device-dev/quick-start/figures/en-us_image_000000131299335.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cc4a4837e321d0d13f8fa456194931874a4477a
Binary files /dev/null and b/en/device-dev/quick-start/figures/en-us_image_000000131299335.png differ
diff --git a/en/device-dev/quick-start/quickstart-docker-lite.md b/en/device-dev/quick-start/quickstart-docker-lite.md
deleted file mode 100644
index 666b1510ff7b2346251cea45601e990ff5100d3e..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-docker-lite.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Getting Started with Mini and Small Systems (Installation Package Mode)
-
-
-
-- **[Mini and Small System Overview](quickstart-lite-overview.md)**
-
-- **[Setting Up Environments for the Mini and Small Systems](quickstart-lite-env-setup.md)**
-
-- **[Running a Hello World Program](quickstart-lite-steps.md)**
-
-- **[FAQs](quickstart-lite-env-setup-faqs.md)**
-
-- **[Appendix](quickstart-lite-appendix.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-appendix.md b/en/device-dev/quick-start/quickstart-ide-lite-appendix.md
deleted file mode 100644
index 0f1cbeb874d3e95c5e15881892b3c09bd1e9facc..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-lite-appendix.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Appendix
-
-
-
-- **[Introduction to Development Boards](quickstart-ide-lite-board-introduction.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-board-introduction.md b/en/device-dev/quick-start/quickstart-ide-lite-board-introduction.md
deleted file mode 100644
index 9ebaa5683f1a0102675883058586145478e04f1e..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-lite-board-introduction.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Introduction to Development Boards
-
-
-
-- **[Introduction to the Hi3861 Development Board](quickstart-ide-lite-introduction-hi3861.md)**
-
-- **[Introduction to the Hi3516 Development Board](quickstart-ide-lite-introduction-hi3516.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-create-project.md b/en/device-dev/quick-start/quickstart-ide-lite-create-project.md
index 37002b081cb5f699498cd8114ad89ee3a32ecece..48c917609e0edf4c194aa7e3d13c3c2d02c7ef19 100644
--- a/en/device-dev/quick-start/quickstart-ide-lite-create-project.md
+++ b/en/device-dev/quick-start/quickstart-ide-lite-create-project.md
@@ -1,4 +1,4 @@
-# Creating a Source Code Project
+# Importing a Source Code Project
After [setting up the Windows+Ubuntu hybrid development environment](../quick-start/quickstart-ide-lite-env-setup-win-ubuntu.md) and [obtaining source code](../quick-start/quickstart-ide-lite-sourcecode-acquire.md), perform the following steps to create a source code project in Windows:
@@ -15,7 +15,7 @@ After [setting up the Windows+Ubuntu hybrid development environment](../quick-st

-3. If you select to open the OpenHarmony source code, a message will be displayed indicating that the project is not a DevEco Device Tool project. Click **Import** to continue.
+3. If this is the first time you import a project, a message will be displayed indicating that the project is not a DevEco Device Tool project. Click **Import** to continue.

diff --git a/en/device-dev/quick-start/quickstart-ide-lite-env-setup-win-ubuntu.md b/en/device-dev/quick-start/quickstart-ide-lite-env-setup-win-ubuntu.md
index f274a5f0ee452334be8fa93eac3844c62c79e73c..1a9929dbdb0820f71c9ab5b0bc02808896319b44 100644
--- a/en/device-dev/quick-start/quickstart-ide-lite-env-setup-win-ubuntu.md
+++ b/en/device-dev/quick-start/quickstart-ide-lite-env-setup-win-ubuntu.md
@@ -11,15 +11,18 @@ In the Windows+Ubuntu hybrid development environment, you can enjoy the benefits
- Windows: Windows 10 (64-bit)
-- Ubuntu: Ubuntu 20.04 or later; recommended memory: 16 GB or higher.
+- Ubuntu: Ubuntu 20.04 or later; recommended memory: 16 GB or higher
-- User name: cannot contain Chinese characters
+- User name (Ubuntu): cannot contain Chinese characters
- DevEco Device Tool: 3.0 Release
## Setting Up the Ubuntu Development Environment
+>  **NOTE**
+> If the Ubuntu system has not been set up yet, set it up on a virtual machine running Windows. Then, configure the Ubuntu basic environment.
+
1. Make sure the Ubuntu shell environment is **bash**.
1. Run the following command and check whether the command output is **bash**. If the command output is not **bash**, go to step 2.
@@ -55,14 +58,15 @@ In the Windows+Ubuntu hybrid development environment, you can enjoy the benefits
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.401.sh** indicates the installation file name.
- >  **NOTE**
- > During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
-
-
```
sudo ./devicetool-linux-tool-3.0.0.401.sh
```
-
+ >  **NOTE**
+ > During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
+ >
+ > During the installation, the page for agreeing to the user agreement and privacy statement is displayed. Read and agree to the user agreement and privacy statement.
+ >
+ > If this page is not displayed and the installation exits, run the apt-get install whiptail command, then the installation command.
Wait until the "Deveco Device Tool successfully installed." message is displayed.

@@ -76,7 +80,7 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits
2. Decompress the DevEco Device Tool package, double-click the installer, and then click **Next**.
-3. Set the installation path of DevEco Device Tool and click **Next**. You are advised to install DevEco Device Tool in a non-system drive.
+3. Set the installation path of DevEco Device Tool to a path that does not contain any Chinese characters, and then click **Next**. You are advised to install DevEco Device Tool in a non-system drive.
>  **NOTE**
> If you have installed DevEco Device Tool 3.0 Beta2 or earlier, the earlier version will be uninstalled before you install a new version. If the following error message is displayed during the uninstallation, click **Ignore** to continue the installation. This error does not affect the installation of the new version.
@@ -101,11 +105,14 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits

-5. In the dialog box shown below, click **Next** to download and install the tools..
+5. In the dialog box shown below, click **Next**.

-6. Wait for the DevEco Device Tool setup wizard to automatically install DevEco Device Tool. After the installation is complete, click **Finish** to close the setup wizard.
+6. Read the user agreement and privacy statement carefully, select I accept the licenses, and click **Next**.
+
+ 
+7. Wait for the DevEco Device Tool setup wizard to automatically install DevEco Device Tool. After the installation is complete, click **Finish** to close the setup wizard.

@@ -174,29 +181,9 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits

5. In the displayed dialog box, select **Linux**, select **Continue**, and enter the password for logging in to the remote computer.
+ >  **NOTE**
+ > To eliminate the need for frequently entering the password for logging in to the remote computer, set an SSH public key.

After the connection is successful, the plug-in is automatically installed in the .vscode-server folder on the remote computer. After the installation is complete, reload Visual Studio Code in Windows as prompted. Then you can develop, compile, and burn source code in DevEco Device Tool on Windows.
-
-
-### Registering the Public Key for Accessing the Ubuntu Environment
-
-After the preceding operations are complete, you can remotely connect to the Ubuntu environment through Windows for development. However, you need to frequently enter the remote connection password. To eliminate this need, you can use the SSH public key.
-
-1. Open the Git bash CLI and run the following command to generate an SSH public key. During command execution, perform operations as prompted. Set **username** and **ip** to the user name and IP address you use for connecting to the Ubuntu system.
-
- ```
- ssh-keygen -t rsa
- ssh-copy-id -i ~/.ssh/id_rsa.pub username@ip
- ```
-
- 
-
-2. In Visual Studio Code, click the remote connection setting button and open the **config** file.
-
- 
-
-3. In the **config** file, add the SSK key file information, as shown below. Then save the file.
-
- 
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-env-setup.md b/en/device-dev/quick-start/quickstart-ide-lite-env-setup.md
deleted file mode 100644
index e7461bde3df8da9ca14f7c3cbac5c36d1a37b6c5..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-lite-env-setup.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Environment Preparation
-
-
-
-- **[Setting Up the Windows+Ubuntu Hybrid Development Environment](quickstart-ide-lite-env-setup-win-ubuntu.md)**
-
-- **[Obtaining Source Code](quickstart-ide-lite-sourcecode-acquire.md)**
-
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-introduction-hi3861.md b/en/device-dev/quick-start/quickstart-ide-lite-introduction-hi3861.md
index b32ea6e794af6c80dcd9059d70cbe8816906f1a7..7c7152e314a778176e2f51aaddaf3b87ac7eed44 100644
--- a/en/device-dev/quick-start/quickstart-ide-lite-introduction-hi3861.md
+++ b/en/device-dev/quick-start/quickstart-ide-lite-introduction-hi3861.md
@@ -7,7 +7,7 @@ Hi3861 is a 2 x 5 cm development board. It is a 2.4 GHz WLAN SoC chip that highl
**Figure 1** Hi3861 development board
- 
+
The Hi3861 development board can also be connected to the Hi3861 mother board to expand its peripheral capabilities. The following figure shows the Hi3861 mother board.
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-overview.md b/en/device-dev/quick-start/quickstart-ide-lite-overview.md
index f23028f755bd48bb7c7f6ce8f1c05370551565ab..2b3ee5c0f0257ec2c4a3d29c41a922a62114923a 100644
--- a/en/device-dev/quick-start/quickstart-ide-lite-overview.md
+++ b/en/device-dev/quick-start/quickstart-ide-lite-overview.md
@@ -10,7 +10,7 @@ To accommodate different developer habits, OpenHarmony provides two modes for ge
- IDE mode: DevEco Device Tool is used for one-stop development, covering dependency installation, building, burning, and running.
- Installation package mode: Dependency download and installation as well as building operations are performed using commands. Burning and running are performed in DevEco Device Tool.
- OpenHarmony also provides the [Docker environment](../get-code/gettools-acquire.md), which can significantly simplify the environment configuration before compilation. You can build your source code in the Docker environment if you are more accustomed to using the installation package mode.
+ OpenHarmony also provides the [Docker environment](https://gitee.com/openharmony/docs/blob/master/en/device-dev/get-code/gettools-acquire.md), which can significantly simplify the environment configuration before compilation. You can build your source code in the Docker environment if you are more accustomed to using the installation package mode.
This document exemplifies how to use the IDE mode. For details about the installation package mode, see [Getting Started with Mini and Small Systems (Installation Package Mode)](../quick-start/quickstart-lite-overview.md).
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-sourcecode-acquire.md b/en/device-dev/quick-start/quickstart-ide-lite-sourcecode-acquire.md
index f3fa19d7af0f3a2bec21a1dcf1116d5b005c4982..585abbbd7a71e674fe1b9f545b459d59db7d172b 100644
--- a/en/device-dev/quick-start/quickstart-ide-lite-sourcecode-acquire.md
+++ b/en/device-dev/quick-start/quickstart-ide-lite-sourcecode-acquire.md
@@ -10,7 +10,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
2. Register an SSH public key for access to Gitee.
-3. Install the git client and git-lfs.
+3. Install the git client and git-lfs if they are unavailable.
Update the software source:
@@ -18,14 +18,14 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
sudo apt-get update
```
- Run the following command to install the tools:
-
+ Run the following command to install the tools:
+
```
sudo apt-get install git git-lfs
```
4. Configure user information.
-
+
```
git config --global user.name "yourname"
git config --global user.email "your-email-address"
@@ -33,7 +33,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
```
5. Run the following commands to install the **repo** tool:
-
+
```
curl https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 -o /usr/local/bin/repo # If you do not have the access permission to this directory, download the tool to any other accessible directory and configure the directory to the environment variable.
chmod a+x /usr/local/bin/repo
@@ -58,7 +58,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
Method 2: Use the **repo** tool to download the source code over HTTPS.
-
+
```
repo init -u https://gitee.com/openharmony/manifest.git -b master --no-repo-verify
repo sync -c
@@ -70,10 +70,10 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
For details about how to obtain the source code of an OpenHarmony release, see the [Release-Notes](../../release-notes/Readme.md).
-## Running prebuilts
+### Running prebuilts
+
+Go to the root directory of the source code and run the following script to install the compiler and binary tool:
- Go to the root directory of the source code and run the following script to install the compiler and binary tool:
-
```
bash build/prebuilts_download.sh
```
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-burn.md b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-burn.md
index 36a19432f9e567609a7c7a3b92d006d71a91ef2b..3368ed019c26a482af6ae90de4602c23a59a9a45 100644
--- a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-burn.md
+++ b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-burn.md
@@ -1,70 +1,68 @@
# Burning
+Burning is the process of downloading compiled program files to a development board to provide a basis for subsequent debugging. With the one-click burning function of DevEco Device Tool, you can burn images on development boards quickly and efficiently.
+
+
Hi3516D V300 supports burning through the USB port, network port, and serial port. This document describes how to burn source code through the USB port. The operations are performed in Windows.
1. Connect the computer and the target development board through the serial port and USB port. For details, see [Introduction to the Hi3516D V300 Development Board](https://gitee.com/openharmony/docs/blob/master/en/device-dev/quick-start/quickstart-lite-introduction-hi3516.md).
+ >  **NOTE**
+ > If you are using the remote access mode (Windows + Ubuntu on the local VM), disable the USB control of the VM as follows to ensure that the development board is connected to the USB port of the host:
+ >
+ > - VMware: Configure the device to connect to the host under **Preferences** > **USB** and remove the USB controller from the VM settings.
+ >
+ > - VirtualBox: Deselect **Enable USB Controller** in the USB device options under Ubuntu settings.
-2. In DevEco Device Tool, choose **REMOTE DEVELOPMENT** > **Local PC** to check the connection status between the remote computer (Ubuntu development environment) and the local computer (Windows development environment).
+2. If your computer does not have the USB port driver or USB-to-serial driver, install it by following the instructions in [Installing the USB Port Driver on the Hi3516D V300 or Hi3518E V300 Development Board](Installing the USB Port Driver on the Hi3516D V300 or Hi3518E V300 Development Board) or [Installing the Serial Port Driver on the Hi3516D V300 or Hi3518E V300 Development Board](https://device.harmonyos.com/en/docs/documentation/guide/hi3516_hi3518-drivers-0000001050743695), depending on the missing driver.
+3. In DevEco Device Tool, choose **REMOTE DEVELOPMENT** > **Local PC** to check the connection status between the remote computer (Ubuntu build environment) and the local computer (Windows build environment).
- If  is displayed on the right of **Local PC**, the remote computer is connected to the local computer. In this case, no further action is required.
- If  is displayed, click the connect icon.

- >  **NOTE**
- > This operation is required only in remote access mode (in the Windows+Ubuntu hybrid development environment). If the local access mode (Windows or Ubuntu development environment) is used, skip this step.
+ >  **NOTE**
+ > This operation is required only in remote access mode (in the Windows+Ubuntu hybrid build environment). If the local access mode (Windows or Ubuntu build environment) is used, skip this step.
-3. Check the serial port number in **QUICK ACCESS** > **DevEco Home** > **Device** in DevEco Device Tool.
+4. Check the serial port number in **QUICK ACCESS** > **DevEco Home** > **Device** in DevEco Device Tool.

- >  **NOTE**
- > If the serial port number is not displayed correctly, follow the steps described in [Installing the Serial Port Driver on the Hi3516 or Hi3518 Series Development Boards](https://device.harmonyos.com/en/docs/documentation/guide/hi3516_hi3518-drivers-0000001050743695).
-
-4. Choose **QUICK ACCESS** > **DevEco Home** > **Projects**, and then click **Settings**.
+5. Choose **QUICK ACCESS** > **DevEco Home** > **Projects**, and then click **Settings**.

-5. On the **hi3516dv300** tab page, set the burning options.
-
+6. On the **hi3516dv300** tab page, set the burning options.
- **upload_partitions**: Select the file to be burnt. By default, the **fastboot**, **kernel**, **rootfs**, and **userfs** files are burnt at the same time.
- **upload_port**: Select the serial port number obtained.
- **upload_protocol**: Select the burning protocol **hiburn-usb**.

-6. Check the preset information of the files to be burnt and modify them when necessary. The files to be burnt include **fastboot**, **kernel**, **rootfs**, and **userfs**.
-
- 1. On the **hi3516dv300_fastboot** tab, select the items to be modified in **New Option**, such as **partition_bin**, **partition_addr**, and **partition_length**.
-
- 
-
- 2. In **Partition Options**, modify the items selected in the preceding step.
-
- >  **NOTE**
- > Set the start address and length of the partition based on the size of the files to be burnt. Make sure the size of the partition is greater than that of the files to be burnt and the partition addresses of the files to be burnt do not overlap.
+7. In **Partitions**, check the preset burning settings of the files to be burnt.
- 
+ 
- 3. Follow the same procedure to modify the information about the **kernel**, **rootfs**, and **userfs** files.
+ To modify the burning settings for a specific file, click  next to the file.
+ >  **NOTE**
+ > Set the start address and length of the partition based on the size of the files to be burnt. Make sure the size of the partition is greater than that of the files to be burnt and the partition addresses of the files to be burnt do not overlap.
-7. When you finish modifying, click **Save** on the top.
+ 
-8. Go to **hi3516dv300** > **Upload** to start burning.
+8. When you finish modifying, click **Save** on the top.
- >  **NOTE**
- > If this is the first time you burn source code to the Hi3516D V300 or Hi3518E V300 board, the message "not find the Devices" may be displayed. In this case, follow the steps in [Installing the USB Port Driver on the Hi3516D V300 or Hi3518E V300 Development Board](https://device.harmonyos.com/en/docs/documentation/guide/usb_driver-0000001058690393) and start burning again.
+9. Go to **hi3516dv300** > **Upload** to transfer the files to be burnt from Ubuntu to Windows. When the "Operation paused, Please press Enter key to continue" message is displayed, which indicates that the transfer is complete, press **Enter** to start burning.
- 
+ 
-9. When the following information is displayed in the Terminal window, press and hold the reset button, remove and insert the USB cable, and release the reset button to start burning.
+10. When the following information is displayed in the **TERMINAL** window, press and hold the reset button within 15 seconds, remove and insert the USB cable, and release the reset button to start burning.
- 
+ 
- If the following message is displayed, it indicates that the burning is successful.
+ If the following message is displayed, it indicates that the burning is successful.
- 
+ 
-10. When the burning is successful, perform the operations in Running an Image to start the system.
+11. When the burning is successful, perform the operations in Running to start the system.
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-application-framework.md b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-helloworld.md
similarity index 100%
rename from en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-application-framework.md
rename to en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-helloworld.md
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-running.md b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-running.md
index a12915d4e335fc2f520812f8ea988a126128ed4d..1aeccedcc5bdef184f7b27cb2f95940cd6699e18 100644
--- a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-running.md
+++ b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-running.md
@@ -30,13 +30,13 @@ After burning is completed, you need to configure the bootloader to run the Open
After the system is started, perform the following steps to run the Hello World program:
1. Go to the **bin** directory on the startup page.
-
+
```
cd bin
```
2. Run the following command to run the **helloworld** program:
-
+
```
./helloworld
```
@@ -48,4 +48,4 @@ After the system is started, perform the following steps to run the Hello World
## Next
-Congratulations! You have finished all steps! Proceed to [develop a sample camera with a screen](https://gitee.com/openharmony/docs/blob/master/en/device-dev/guide/device-camera.md) to better familiarize yourself with OpenHarmony development.
+Congratulations! You have finished all steps! Proceed to [develop a sample camera with a screen](../guide/device-camera-control-overview.md) to better familiarize yourself with OpenHarmony development.
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516.md b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516.md
deleted file mode 100644
index 30a1760dc180b69e062eb15d51e825422c246b46..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Hi3516 Development Board
-
-
-
-- **[Writing a Hello World Program](quickstart-ide-lite-steps-hi3516-application-framework.md)**
-
-- **[Building](quickstart-ide-lite-steps-hi3516-building.md)**
-
-- **[Burning](quickstart-ide-lite-steps-hi3516-burn.md)**
-
-- **[Running](quickstart-ide-lite-steps-hi3516-running.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861-burn.md b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861-burn.md
index 72a07f63239b0a79da9958a8b1dc77fe964e51ab..aa19ccf3d77feb92aa41c127887d9a66ecadacc6 100644
--- a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861-burn.md
+++ b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861-burn.md
@@ -1,12 +1,15 @@
# Burning
+Burning is the process of downloading compiled program files to a development board to provide a basis for subsequent debugging. With the one-click burning function of DevEco Device Tool, you can burn images on development boards quickly and efficiently.
Hi3861 V100 supports burning through the serial port. To burn source code through the serial port in Windows, perform the following steps:
1. Connect the computer and the target development board through the serial port and USB port. For details, see [Introduction to the Hi3861 V100 Development Board](https://gitee.com/openharmony/docs/blob/master/en/device-dev/quick-start/quickstart-lite-introduction-hi3861.md).
-2. In DevEco Device Tool, choose **REMOTE DEVELOPMENT** > **Local PC** to check the connection status between the remote computer (Ubuntu development environment) and the local computer (Windows development environment).
+2. If your computer does not have the USB-to-serial driver, install it by following the instructions in [Installing the Serial Port Driver on Hi3861 V100](https://device.harmonyos.com/en/docs/documentation/guide/hi3861-drivers-0000001058153433).
+
+3. In DevEco Device Tool, choose **REMOTE DEVELOPMENT** > **Local PC** to check the connection status between the remote computer (Ubuntu development environment) and the local computer (Windows development environment).
- If  is displayed on the right of **Local PC**, the remote computer is connected to the local computer. In this case, no further action is required.
- If  is displayed, click the connect icon.
@@ -16,18 +19,17 @@ Hi3861 V100 supports burning through the serial port. To burn source code throug
>  **NOTE**
> This operation is required only in remote access mode (in the Windows+Ubuntu hybrid development environment). If the local access mode (Windows or Ubuntu development environment) is used, skip this step.
-3. Check the serial port number in **QUICK ACCESS** > **DevEco Home** > **Device** in DevEco Device Tool.
+4. Check the serial port number in **QUICK ACCESS** > **DevEco Home** > **Device** in DevEco Device Tool.

- >  **NOTE**
- > If the serial port number is not displayed correctly, follow the steps described in [Installing the Serial Port Driver on Hi3861 V100](https://device.harmonyos.com/en/docs/documentation/guide/hi3861-drivers-0000001058153433).
+
-4. Choose **QUICK ACCESS** > **DevEco Home** > **Projects**, and then click **Settings**.
+5. Choose **QUICK ACCESS** > **DevEco Home** > **Projects**, and then click **Settings**.

-5. On the **hi3861** tab page, set the burning options.
+6. On the **hi3861** tab page, set the burning options.
- **upload_port**: Select the serial port number obtained.
- **upload_protocol**: Select the burning protocol **hiburn-serial**.
@@ -35,22 +37,24 @@ Hi3861 V100 supports burning through the serial port. To burn source code throug

-6. Check the preset information of the files to be burnt and modify them when necessary.
+7. In **Partitions**, check the preset burning settings of the files to be burnt.
+
+ 
- On the **hi3861_app** tab page, select **partition_bin** from **New Option**, and set the path of the file to be burnt.
+ To modify the burning settings for a specific file, click  next to the file.
- 
+ 
-7. When you finish modifying, click **Save** on the top.
+8. When you finish modifying, click **Save** on the top.
-8. Click **Open** to open the project file. Then, choose **PROJECT TASKS** > **hi3861** > **Upload** to start burning.
+9. Click **Open** to open the project file. Then, choose **PROJECT TASKS** > **hi3861** > **Upload** to start burning.

-9. When the following information is displayed, press the RST button on the development board to restart it.
+10. When the following information is displayed, press the RST button on the development board within 15 seconds to restart it.

-10. Wait until the burning is complete. When the following message is displayed, the burning is successful.
+ When the following message is displayed, the burning is successful.
- 
\ No newline at end of file
+ 
\ No newline at end of file
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861-application-framework.md b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861-helloworld.md
similarity index 100%
rename from en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861-application-framework.md
rename to en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861-helloworld.md
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861.md b/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861.md
deleted file mode 100644
index 76066f541d0deb0be63aa4906d7edcfe6cf4f769..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Hi3861 Development Board
-
-
-
-- **[Writing a Hello World Program](quickstart-ide-lite-steps-hi3861-application-framework.md)**
-
-- **[Building](quickstart-ide-lite-steps-hi3861-building.md)**
-
-- **[Burning](quickstart-ide-lite-steps-hi3861-burn.md)**
-
-- **[Networking](quickstart-ide-lite-steps-hi3861-netconfig.md)**
-
-- **[Debugging and Verification](quickstart-ide-lite-steps-hi3861-debug.md)**
-
-- **[Running](quickstart-ide-lite-steps-hi3861-running.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-lite-steps.md b/en/device-dev/quick-start/quickstart-ide-lite-steps.md
deleted file mode 100644
index 65831aac645d6edc634eb405a6c1e15cfc55543c..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-lite-steps.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Running a Hello World Program
-
-
-
-- **[Hi3861 Development Board](quickstart-ide-lite-steps-hi3861.md)**
-
-- **[Hi3516 Development Board](quickstart-ide-lite-steps-hi3516.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-lite.md b/en/device-dev/quick-start/quickstart-ide-lite.md
deleted file mode 100644
index 46a6f375f13c4f6d751e9c5cab62e7671bddb63f..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-lite.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Getting Started with Mini and Small Systems (IDE Mode)
-
-
-
-- **[Mini and Small System Overview](quickstart-ide-lite-overview.md)**
-
-- **[Environment Preparation](quickstart-ide-lite-env-setup.md)**
-
-- **[Creating a Source Code Project](quickstart-ide-lite-create-project.md)**
-
-- **[Running a Hello World Program](quickstart-ide-lite-steps.md)**
-
-- **[Appendix](quickstart-ide-lite-appendix.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-standard-appendix.md b/en/device-dev/quick-start/quickstart-ide-standard-appendix.md
deleted file mode 100644
index 6df76026c9e35f243e192e909e2bfefd441c8a74..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-standard-appendix.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Appendix
-
-
-
-- **[Introduction to Development Boards](quickstart-ide-standard-board-introduction.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-standard-board-introduction.md b/en/device-dev/quick-start/quickstart-ide-standard-board-introduction.md
deleted file mode 100644
index a0ed1297124e19198467f2e0479f276a8622e052..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-standard-board-introduction.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Introduction to Development Boards
-
-
-
-- **[Introduction to the Hi3516 Development Board](quickstart-ide-standard-board-introduction-hi3516.md)**
-
-- **[Introduction to the RK3568 Development Board](quickstart-ide-standard-board-introduction-rk3568.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-standard-create-project.md b/en/device-dev/quick-start/quickstart-ide-standard-create-project.md
index 3ac2873105b2f43ad674ea99d4b698a5f5940451..b9e8bb5ad690c6bdf8ffca8711e786d19fc433cf 100644
--- a/en/device-dev/quick-start/quickstart-ide-standard-create-project.md
+++ b/en/device-dev/quick-start/quickstart-ide-standard-create-project.md
@@ -1,4 +1,4 @@
-# Creating a Source Code Project
+# Importing a Source Code Project
After [setting up the Windows+Ubuntu hybrid development environment](../quick-start/quickstart-ide-standard-env-setup-win-ubuntu.md) and [obtaining source code](../quick-start/quickstart-ide-standard-sourcecode-acquire.md), perform the following steps to create a source code project in Windows:
diff --git a/en/device-dev/quick-start/quickstart-ide-standard-env-setup.md b/en/device-dev/quick-start/quickstart-ide-standard-env-setup.md
deleted file mode 100644
index 8faf2853a5d319958d0ebb4eeb6ebf1268cb0be0..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-standard-env-setup.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Environment Preparation
-
-
-
-- **[Setting Up the Windows+Ubuntu Hybrid Development Environment](quickstart-ide-standard-env-setup-win-ubuntu.md)**
-
-- **[Obtaining Source Code](quickstart-ide-standard-sourcecode-acquire.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-standard-running-hi3516.md b/en/device-dev/quick-start/quickstart-ide-standard-running-hi3516.md
deleted file mode 100644
index 32080c7b30f6aae5e5c41f49f132408b2f949905..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-standard-running-hi3516.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Hi3516 Development Board
-
-
-
-- **[Writing a Hello World Program](quickstart-ide-standard-running-hi3516-create.md)**
-
-- **[Building](quickstart-ide-standard-running-hi3516-build.md)**
-
-- **[Burning](quickstart-ide-standard-running-hi3516-burning.md)**
-
-- **[Running](quickstart-ide-standard-running-hi3516-running.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-standard-running-rk3568.md b/en/device-dev/quick-start/quickstart-ide-standard-running-rk3568.md
deleted file mode 100644
index 8ffc858557242c87460d2476a3aa26f2649d9304..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-standard-running-rk3568.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# RK3568 Development Board
-
-
-
-- **[Writing a Hello World Program](quickstart-ide-standard-running-rk3568-create.md)**
-
-- **[Building](quickstart-ide-standard-running-rk3568-build.md)**
-
-- **[Burning](quickstart-ide-standard-running-rk3568-burning.md)**
-
-- **[Running](quickstart-ide-standard-running-rk3568-running.md)**
diff --git a/en/device-dev/quick-start/quickstart-ide-standard-running.md b/en/device-dev/quick-start/quickstart-ide-standard-running.md
deleted file mode 100644
index 2a3ff8023f3508de5314490099c7be73b44ba098..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-ide-standard-running.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Running a Hello World Program
-
-
-
-- **[Hi3516 Development Board](quickstart-ide-standard-running-hi3516.md)**
-
-- **[RK3568 Development Board](quickstart-ide-standard-running-rk3568.md)**
diff --git a/en/device-dev/quick-start/quickstart-lite-appendix.md b/en/device-dev/quick-start/quickstart-lite-appendix.md
deleted file mode 100644
index e63539f9355627c8da77419114f565b28fb908a1..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-lite-appendix.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Appendix
-
-
-
-- **[Introduction to Development Boards](quickstart-lite-board-introduction.md)**
-
-- **[Reference](quickstart-lite-reference.md)**
diff --git a/en/device-dev/quick-start/quickstart-lite-board-introduction.md b/en/device-dev/quick-start/quickstart-lite-board-introduction.md
deleted file mode 100644
index 30c06d28ebcb235c3677f625173e769ec8411c0b..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-lite-board-introduction.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Introduction to Development Boards
-
-
-
-- **[Introduction to the Hi3861 Development Board](quickstart-lite-introduction-hi3861.md)**
-
-- **[Introduction to the Hi3516 Development Board](quickstart-lite-introduction-hi3516.md)**
diff --git a/en/device-dev/quick-start/quickstart-lite-env-setup-faqs.md b/en/device-dev/quick-start/quickstart-lite-env-setup-faqs.md
deleted file mode 100644
index ff4411ade6d31c0a3e283c532a25235a41c51561..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-lite-env-setup-faqs.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# FAQs
-
-
-
-- **[Fixing hb Installation Issues](quickstart-lite-faq-hb.md)**
-
-- **[Fixing Compilation Issues](quickstart-lite-faq-compose.md)**
-
-- **[Fixing Burning Issues](quickstart-lite-faq-burning.md)**
diff --git a/en/device-dev/quick-start/quickstart-lite-steps-hi3516-burn.md b/en/device-dev/quick-start/quickstart-lite-steps-hi3516-burn.md
index cd0b1434eb03b1f237c69eb3dc1b4a5a66382dbb..9e453a954d7a3ee8a1e8ec5676c39e8ef30d0ca1 100644
--- a/en/device-dev/quick-start/quickstart-lite-steps-hi3516-burn.md
+++ b/en/device-dev/quick-start/quickstart-lite-steps-hi3516-burn.md
@@ -1,7 +1,7 @@
# Burning
-Hi3516D V300 supports burning through the USB port, network port, and serial port. This document describes how to burn source code through the USB port. The operations are performed in Windows.
+Burning is the process of downloading compiled program files to a development board to provide a basis for subsequent debugging. With the one-click burning function of DevEco Device Tool, you can burn images on development boards quickly and efficiently.
### Importing Source Code
diff --git a/en/device-dev/quick-start/quickstart-lite-steps-hi3516-application-framework.md b/en/device-dev/quick-start/quickstart-lite-steps-hi3516-helloworld.md
similarity index 100%
rename from en/device-dev/quick-start/quickstart-lite-steps-hi3516-application-framework.md
rename to en/device-dev/quick-start/quickstart-lite-steps-hi3516-helloworld.md
diff --git a/en/device-dev/quick-start/quickstart-lite-steps-hi3516.md b/en/device-dev/quick-start/quickstart-lite-steps-hi3516.md
deleted file mode 100644
index 0f6d8e0c88d63e24187add3cc4478b673179c174..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-lite-steps-hi3516.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Hi3516 Development Board
-
-
-
-- **[Setting Up the Hi3516 Development Board Environment](quickstart-lite-steps-hi3516-setting.md)**
-
-- **[Writing a Hello World Program](quickstart-lite-steps-hi3516-application-framework.md)**
-
-- **[Building](quickstart-lite-steps-hi3516-building.md)**
-
-- **[Burning](quickstart-lite-steps-hi3516-burn.md)**
-
-- **[Running](quickstart-lite-steps-hi3516-running.md)**
diff --git a/en/device-dev/quick-start/quickstart-lite-steps-hi3861-application-framework.md b/en/device-dev/quick-start/quickstart-lite-steps-hi3861-helloworld.md
similarity index 100%
rename from en/device-dev/quick-start/quickstart-lite-steps-hi3861-application-framework.md
rename to en/device-dev/quick-start/quickstart-lite-steps-hi3861-helloworld.md
diff --git a/en/device-dev/quick-start/quickstart-lite-steps-hi3861.md b/en/device-dev/quick-start/quickstart-lite-steps-hi3861.md
deleted file mode 100644
index 0f637821f518c0edcced32f369eb09eb594990c7..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-lite-steps-hi3861.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Hi3861 Development Board
-
-
-
-- **[Setting Up the Hi3861 Development Board Environment](quickstart-lite-steps-hi3861-setting.md)**
-
-- **[Writing a Hello World Program](quickstart-lite-steps-hi3861-application-framework.md)**
-
-- **[Building](quickstart-lite-steps-hi3861-building.md)**
-
-- **[Burning](quickstart-lite-steps-hi3861-burn.md)**
-
-- **[Networking](quickstart-lite-steps-hi3861-netconfig.md)**
-
-- **[Debugging and Verification](quickstart-lite-steps-hi3861-debug.md)**
-
-- **[Running](quickstart-lite-steps-hi3861-running.md)**
-
diff --git a/en/device-dev/quick-start/quickstart-lite-steps.md b/en/device-dev/quick-start/quickstart-lite-steps.md
deleted file mode 100644
index 06ff9266b6e141eba935c90c690fc0405f4dae28..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-lite-steps.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Running a Hello World Program
-
-
-
-- **[Hi3861 Development Board](quickstart-lite-steps-hi3861.md)**
-
-- **[Hi3516 Development Board](quickstart-lite-steps-hi3516.md)**
diff --git a/en/device-dev/quick-start/quickstart-standard-appendix.md b/en/device-dev/quick-start/quickstart-standard-appendix.md
deleted file mode 100644
index 12642666b4a8b2a5000900fe078ad57805e8bc07..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-standard-appendix.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Appendix
-
-
-
-- **[Introduction to Development Boards](quickstart-standard-board-introduction.md)**
-
-- **[Reference](quickstart-standard-reference.md)**
diff --git a/en/device-dev/quick-start/quickstart-standard-board-introduction.md b/en/device-dev/quick-start/quickstart-standard-board-introduction.md
deleted file mode 100644
index c339e4d8b9ad0f5df373b6a9a0d12099f1df9dcf..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-standard-board-introduction.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Introduction to Development Boards
-
-
-
-- **[Introduction to the Hi3516 Development Board](quickstart-standard-board-introduction-hi3516.md)**
-
-- **[Introduction to the RK3568 Development Board](quickstart-standard-board-introduction-rk3568.md)**
diff --git a/en/device-dev/quick-start/quickstart-standard-docker.md b/en/device-dev/quick-start/quickstart-standard-docker.md
deleted file mode 100644
index 9c3eee01247037c1b019d260d7e09068045f0013..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-standard-docker.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Getting Started with Standard System (Using the Installation Package)
-
-
-
-- **[Standard System Overview](quickstart-standard-overview.md)**
-
-- **[Setting Up Environments for Standard System](quickstart-standard-env-setup.md)**
-
-- **[Running a Hello World Project](quickstart-standard-running.md)**
-
-- **[FAQs](quickstart-standard-faqs.md)**
-
-- **[Appendix](quickstart-standard-appendix.md)**
diff --git a/en/device-dev/quick-start/quickstart-standard-faqs.md b/en/device-dev/quick-start/quickstart-standard-faqs.md
deleted file mode 100644
index e4c33d7f1f467dbf995cfab823281b0791a45c64..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-standard-faqs.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# FAQs
-
-
-
-- **[Fixing hb Installation Issues](quickstart-standard-faq-hb.md)**
-
-- **[Fixing Compilation Issues](quickstart-standard-faq-compose.md)**
-
-- **[Fixing Burning Issues](quickstart-standard-faq-burning.md)**
-
diff --git a/en/device-dev/quick-start/quickstart-standard-ide.md b/en/device-dev/quick-start/quickstart-standard-ide.md
deleted file mode 100644
index 034c53890ad98ed1bbad80cfadc6a8a971d5f397..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-standard-ide.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Getting Started with Standard System (IDE Mode)
-
-
-
-- **[Standard System Overview](quickstart-ide-standard-overview.md)**
-
-- **[Environment Preparation](quickstart-ide-standard-env-setup.md)**
-
-- **[Creating a Source Code Project](quickstart-ide-standard-create-project.md)**
-
-- **[Running a Hello World Program](quickstart-ide-standard-running.md)**
-
-- **[Appendix](quickstart-ide-standard-appendix.md)**
diff --git a/en/device-dev/quick-start/quickstart-standard-running-hi3516.md b/en/device-dev/quick-start/quickstart-standard-running-hi3516.md
deleted file mode 100644
index e85603a4bcf66366ee435fe6ffc744c2f4385691..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-standard-running-hi3516.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Hi3516 Development Board
-
-
-
-- **[Writing a Hello World Program](quickstart-standard-running-hi3516-create.md)**
-
-- **[Building](quickstart-standard-running-hi3516-build.md)**
-
-- **[Burning](quickstart-standard-running-hi3516-burning.md)**
-
-- **[Running](quickstart-standard-running-hi3516-running.md)**
diff --git a/en/device-dev/quick-start/quickstart-standard-running-rk3568.md b/en/device-dev/quick-start/quickstart-standard-running-rk3568.md
deleted file mode 100644
index c13877b26bb7cd3b50ec6e9970d3238db6c59bc1..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-standard-running-rk3568.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# RK3568 Development Board
-
-
-
-- **[Writing a Hello World Program](quickstart-standard-running-rk3568-create.md)**
-
-- **[Building](quickstart-standard-running-rk3568-build.md)**
-
-- **[Burning](quickstart-standard-running-rk3568-burning.md)**
-
-- **[Running](quickstart-standard-running-rk3568-running.md)**
diff --git a/en/device-dev/quick-start/quickstart-standard-running.md b/en/device-dev/quick-start/quickstart-standard-running.md
deleted file mode 100644
index 7bde76093cd3c045e32170c48de635388bcd7e0d..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart-standard-running.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Running a Hello World Program
-
-
-
-- **[Hi3516 Development Board](quickstart-standard-running-hi3516.md)**
-
-- **[RK3568 Development Board](quickstart-standard-running-rk3568.md)**
diff --git a/en/device-dev/quick-start/quickstart-standard-running-hi3516-create.md b/en/device-dev/quick-start/quickstart-std-3516-create.md
similarity index 100%
rename from en/device-dev/quick-start/quickstart-standard-running-hi3516-create.md
rename to en/device-dev/quick-start/quickstart-std-3516-create.md
diff --git a/en/device-dev/quick-start/quickstart.md b/en/device-dev/quick-start/quickstart.md
deleted file mode 100644
index 13fe6384e1491db3a347b4ef5784e37a75fd37a9..0000000000000000000000000000000000000000
--- a/en/device-dev/quick-start/quickstart.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Getting Started
-
-
-
-- **[Getting Started with Mini and Small Systems](quickstart-lite.md)**
-
-- **[Getting Started with Standard System](quickstart-standard.md)**
diff --git a/en/device-dev/website.md b/en/device-dev/website.md
index f25a0df2ed4ddc61221c2f6bd2880f466c3a8f51..2f47be6bc81699ec1075c34ad3dbd34d935cf16b 100644
--- a/en/device-dev/website.md
+++ b/en/device-dev/website.md
@@ -11,13 +11,13 @@
- [Obtaining Source Code](quick-start/quickstart-ide-lite-sourcecode-acquire.md)
- - [Creating a Source Code Project](quick-start/quickstart-ide-lite-create-project.md)
+ - [Importing a Source Code Project](quick-start/quickstart-ide-lite-create-project.md)
- Running a Hello World Program
- Hi3861 Development Board
- - [Writing a Hello World Program](quick-start/quickstart-ide-lite-steps-hi3861-application-framework.md)
+ - [Writing a Hello World Program](quick-start/quickstart-ide-lite-steps-hi3861-helloworld.md)
- [Building](quick-start/quickstart-ide-lite-steps-hi3861-building.md)
@@ -31,7 +31,7 @@
- Hi3516 Development Board
- - [Writing a Hello World Program](quick-start/quickstart-ide-lite-steps-hi3516-application-framework.md)
+ - [Writing a Hello World Program](quick-start/quickstart-ide-lite-steps-hi3516-helloworld.md)
- [Building](quick-start/quickstart-ide-lite-steps-hi3516-building.md)
@@ -57,7 +57,7 @@
- [Setting Up the Hi3861 Development Board Environment](quick-start/quickstart-lite-steps-hi3861-setting.md)
- - [Writing a Hello World Program](quick-start/quickstart-lite-steps-hi3861-application-framework.md)
+ - [Writing a Hello World Program](quick-start/quickstart-lite-steps-hi3861-helloworld.md)
- [Building](quick-start/quickstart-lite-steps-hi3861-building.md)
@@ -73,7 +73,7 @@
- [Setting Up the Hi3516 Development Board Environment](quick-start/quickstart-lite-steps-hi3516-setting.md)
- - [Writing a Hello World Program](quick-start/quickstart-lite-steps-hi3516-application-framework.md)
+ - [Writing a Hello World Program](quick-start/quickstart-lite-steps-hi3516-helloworld.md)
- [Building](quick-start/quickstart-lite-steps-hi3516-building.md)
@@ -109,7 +109,7 @@
- [Obtaining Source Code](quick-start/quickstart-ide-standard-sourcecode-acquire.md)
- - [Creating a Source Code Project](quick-start/quickstart-ide-standard-create-project.md)
+ - [Importing a Source Code Project](quick-start/quickstart-ide-standard-create-project.md)
- Running a Hello World Program
@@ -723,28 +723,24 @@
- Peripheral Driver Usage
+ - [Audio](driver/driver-peripherals-audio-des.md)
+ - [Camera](driver/driver-peripherals-camera-des.md)
+ - [Face_auth](driver/driver-peripherals-face_auth-des.md)
- [LCD](driver/driver-peripherals-lcd-des.md)
-
- - [Touchscreen](driver/driver-peripherals-touch-des.md)
-
+ - [Light](driver/driver-peripherals-light-des.md)
+ - [Pin_auth](driver/driver-peripherals-pinauth-des.md)
- [Sensor](driver/driver-peripherals-sensor-des.md)
-
- - [WLAN](driver/driver-peripherals-external-des.md)
-
- - [Audio](driver/driver-peripherals-audio-des.md)
-
+ - [Touchscreen](driver/driver-peripherals-touch-des.md)
- [USB](driver/driver-peripherals-usb-des.md)
-
- - [Camera](driver/driver-peripherals-camera-des.md)
-
+ - [User_auth](driver/driver-peripherals-user-auth-des.md)
- [Vibrator](driver/driver-peripherals-vibrator-des.md)
-
- - [Light](driver/driver-peripherals-light-des.md)
+ - [WLAN](driver/driver-peripherals-external-des.md)
- Compilation and Building
- [Building Mini and Small Systems](subsystems/subsys-build-mini-lite.md)
- [Building the Standard System](subsystems/subsys-build-standard-large.md)
- [Build System Coding Specifications and Best Practices](subsystems/subsys-build-gn-coding-style-and-best-practice.md)
- [Building the Kconfig Visual Configuration](subsystems/subsys-build-gn-kconfig-visual-config-guide.md)
+ - [HAP Build Guide](subsystems/subsys-build-gn-hap-compilation-guide.md)
- [Distributed Remote Startup](subsystems/subsys-remote-start.md)
- Graphics
- [Graphics Overview](subsystems/subsys-graphics-overview.md)