Developing a Traffic Management Large Screen with a Template

Scenario

A traffic large screen monitors the city traffic, such as vehicles entering and leaving, road conditions, and traffic indexes, as shown in Figure 1. This section shows how to quickly build a traffic management large screen using a template.

Figure 1 A traffic large screen

Procedure

Figure 2 demonstrates the large screen development.

Figure 2 Developing a large screen

1. Step 1: Registering an Account

   Register a HUAWEI ID. If you already have one, skip this step.

2. Step 2: Purchasing an Instance

   Purchase an instance first. An instance is an independent resource space. Resources of different instances are isolated from each other. If you have not purchased an instance, you can apply for a free one-month trial of Huawei Cloud Astro Canvas basic edition.

3. Step 3: Creating a Large Screen and PC Project

   Before creating a page, you need to create a project. A project can be regarded as a collection of service scenarios. A project can have multiple pages.

4. Step 4: Creating a Page

   You can use the traffic management template to quickly create a large screen.

5. Step 5: Previewing and Publishing the Page

   Preview your page to ensure the development and editing match the final published effect. If the preview meets your expectations, you can publish the page directly and check the city traffic online.

Step 1: Registering an Account

Before using this service, you need to register a HUAWEI ID and perform real-name authentication. If you already have a HUAWEI ID, skip the following operations.

1. Visit the Huawei Cloud official website and click Sign Up in the upper right corner.
2. Complete registration by referring to Signing up for a HUAWEI ID and Enabling Huawei Cloud Services.

Step 2: Purchasing an Instance

An instance is an independent resource space. Resources of different instances are isolated from each other. If you have not purchased an instance, you can apply for a free one-month trial of Huawei Cloud Astro Canvas basic edition. This document uses the purchase of a basic instance as an example.

1. Purchase a Huawei Cloud Astro Canvas instance.
2. Select the basic edition, set the required duration, and click Pay Now.
   Figure 3 Purchasing an instance
   

3. Choose a payment method and then click to confirm your payment.
   Figure 4 Paying for the order
   

4. After you pay for the order, click the button to return to the Huawei Cloud Astro Canvas console.
   Figure 5 Returning to the console
   

   On the console, you can view the status of the instance. If the instance status is Running, it has been installed and is ready for use.

   Figure 6 Console
   

Step 3: Creating a Large Screen and PC Project

Before creating a page, you need to create a project. A project can be regarded as a collection of service scenarios. A project can have multiple pages.

1. On the Huawei Cloud Astro Canvas console, click Go to Homepage.
2. On the Projects page, click Create Project.
   Figure 7 New project page
   

3. On the displayed page, select Large Screens and PCs, enter a project name (for example, "Traffic Management"), and click Create.
   The project name can contain 1 to 64 characters, including letters, digits, and underscores (_), but cannot start or end with an underscore (_).

   Figure 8 Creating a large screen and PC project
   

   The created project page is displayed, as shown in Figure 9.

   Figure 9 Large screen and PC project page
   

Step 4: Creating a Page

Reusable pages are provided as preset and custom templates for creating new pages, reducing workload and improving efficiency. This section uses the traffic management template to quickly build a page.

1. On the Large Screens and PCs project, click Create.
2. In the preset templates, select and use the traffic management template.
   Figure 10 Selecting the traffic management template
   

3. Enter a page title (for example, "Traffic Management Analysis Screen for City A") and click Create.
   Figure 11 Setting the page title
   

   The large screen development page, for example, Figure 12, is displayed. You can directly use this page or perform secondary development based on service requirements.

   Figure 12 Large screen development page
   

4. Click in the upper part of the page.

Step 5: Previewing and Publishing the Page

Preview your page to ensure the development and editing match the final published effect. If the preview meets your expectations, you can publish the page directly and check the city traffic online.

1. On the created page, click in the upper part of the page to preview the page.

   If the preview effect does not meet your expectations, you can modify the page.

2. Click and turn on the link publishing switch to obtain the page link.
   Figure 13 Turning on the link publishing switch
   

   Click to generate a new link. The original link will be invalid. Click to copy the link.

3. Set access control.
   For new projects, set access control for the published link using share code or token authentication. Without this, the link will not be accessible in the runtime environment. The following describes how to set a share code.

   Figure 14 Share code settings
   

   • Share code: After setting a page share code, only that code can be used to access the page.
   • Token authentication: With this function, you can perform signature authentication on the parameters transmitted during large screen interaction, preventing the URL parameters of the large screen from being modified.
   • Content security policy: Enable this function if a large screen page is embedded into a third-party system (for example, in iframe mode) and cross-domain access is involved. This function reduces and reports XSS attacks and mitigates cross-site scripting attacks. In addition to restricting the domains that can load content, you can also specify the protocols that can be used to mitigate packet sniffing attacks.

4. After setting up, open the link in your browser, enter the share code, and click to see the city traffic status online.
   Figure 15 Entering the share code