Intégration de composants frontend

Présentation basique

Présentation des composants frontend

Les composants frontend de DJI FlightHub 2 incluent : la création d’itinéraires de vol, l’éditeur d’itinéraire de vol, le cockpit virtuel et le projet/la carte. Ces composants prennent en charge les thèmes et styles personnalisés. Ce manuel présentera comment intégrer ces composants dans votre propre système à partir de zéro.

Préparation avant de commencer

Pile technologique : React, Vue et HTML + CSS sont tous pris en charge.
Exigences matérielles : reportez-vous au Manuel de déploiement de DJI FlightHub 2 version On-Premises pour effectuer le déploiement.

Démarrage rapide

La version actuelle offre principalement les composants et les collections de fonctionnalités correspondantes suivants. Vous pouvez télécharger la démo et vous référer à ce manuel pour la configuration et le débogage.

Les composants publiés sont les suivants :

Composant	Collection de fonctionnalité	Capture d’écran de la fonctionnalité
Création d’itinéraire de vol	Types d’itinéraires de vol : - Itinéraire waypoint - Itinéraire de zone - Itinéraire en pente - Itinéraire géométrique - Itinéraire Smart 3D Capture Personnalisation du Style
Éditeur d’itinéraire de vol	Types d’itinéraires de vol : - Itinéraire waypoint - Itinéraire de zone - Itinéraire en pente - Itinéraire géométrique - Itinéraire Smart 3D Capture Fonctions d’itinéraire de vol : - Modification de l’itinéraire de vol et enregistrement - Annotations de carte - Ouverture Cesium - Annotations de point, ligne et zone - Chargement de modèle Personnalisation du Style
Cockpit virtuel	Fonctions de la radiocommande : - Décollage en un clic - Diffusion en direct - Vol manuel et affichage de la trajectoire en appuyant sur les touches WASD - RTH en un clic Personnalisation du Style
Projet/Carte	Données de la carte du projet : - Annotations de point, ligne et zone - Planification d’itinéraire et de trajectoire de vol - Zone de tâche personnalisée, Zone restreinte personnalisée - Liste des appareils du projet - Appareil du dock - Appareil de vol manuel

Tutoriel

Ajouter les styles et dépendances Requis

Après avoir terminé le déploiement de FlightHub 2 version On-Premises, vous recevrez une adresse IP privée. Saisissez cette adresse IP privée ou ce nom de domaine et ce port dans la section HEAD du bloc de code.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://Private IP or domain name/paas.js" fh2></script>
    <title>Demo</title>
  </head>
  <body>
  </body>
</html>

Informations de conformité des composants frontend

Les composants frontend dépendent des capacités fournies par FlightHub 2 version On-Premises, il est donc nécessaire d’obtenir le projectToken et le prjId de FlightHub 2 version On-Premises. Les méthodes pour obtenir ces informations sont les suivantes :

projectToken : accédez FlightHub 2 version On-Premises, allez dans Mon organisation (nom de domaine FlightHub 2 déployé/Centre utilisateur#/Mon organisation) > Paramètres de l’organisation > FlightHub Sync pour obtenir la clé d’organisation. Cette valeur de clé d’organisation est projectToken.
prjId : accédez à FlightHub 2 version On-Premises, cliquez sur la liste des projets, sélectionnez un projet et trouvez l’ID du projet dans l’URL. Par exemple : https://deployed FlightHub 2 domain name/organization/4bf0039f-6434-44a8-b891-8d7b6b7ff132/project/aa9c7a78-4e97-4ced-8953-2cea96c07c00, où 4bf0039f-6434-44a8-b891-8d7b6b7ff132 est l’orgId, et aa9c7a78-4e97-4ced-8953-2cea96c07c00 est le prjId.

Exemple :

window.FH2.initConfig({
    serverUrl: 'http://Enter the domain name and backend service port here. Default port number is 30812',
    wssUrl: 'ws://Enter the domain name and backend service port here. Default port number is 30812/duplex/web',
    hostUrl: 'http://Enter the IP or domain name of the web page and the port number here',
 
    // Copy prjId value and paste here
    prjId: 'cdca2736-8096-4729-9bc7-497ad5b60d5e',
    // Copy projectToken value and paste here
    projectToken: 'MTczMDg4NDI1NHx1NUR3RWxNajc5VnF4QWJuY1BvZmxUenlwYzdnRnBUazFSQnRhMXZOODlPSlVrdFhQekdFTjJKb0I1UkNNUlhtaFR0M3k2WllBdWNJTFVGNDZ4eHp3aWJnSnZ0TjVhNDdNMDUtcUlNQmZRUEtKYjNHeWIyLVZNTm80Qzd6TnMyTUNNSmFsWjZVQ0tkVWtEOU1tWVB5cDNSeWhLQW1NUXJrSzhnQkJhVl9saW5Bazhwbl9KQzg2b2FmWUVULWJoMWowbWh2aEV5X1BtZW9pZm1sRGJmajNoa1QxN280emluNDk1eUFaTUw4ZEJMRmljczIxY0twVmZBNVhiMU81b3Y2UmlNY3dZazFHLTY4Q3ljdFJVdWZuUmVxUUo1VGxEcnJrYkFZNGlpTGVjdC1jNnprYU5nSkFpLWdRbXJ5M2JraEVGUlJJY3YwUUk1TUlDMzZDd2tRc2dlOHNIblFVaHNwb1ozVFJ2MmtoenhZa1pMN0RCbVk4QkVNOVNvaVN1NmszVGRBTE1MMWVLRE5wMFY5VmFrN0FJSzgtcjZaaUstaThwNU9yd0E0V05iNE15eWswc1lXRnFVUzJGZm1wdG0xR0k5WXB0TzRZZUpMeHhCNGVBNEZKZkdaTC1NUV9iRGtXR3EwNXBpOUlBSUd2WFBnYl8tbEJ0NV9qRTRtZG45SDJBZkdpUFZJSktrOFhhSkdqNHEtOUxaUXdvT2NSV0FhUklnQXdINFdFRHR3TGhrPXwr7HTdhghvb4TN9rYRlDyCE9Mzc4Q89m4H3_B24WRKVg=='
})

Remarque

Assurez-vous que l’appel de window.FH2 est exécuté après le chargement complet de la page (load). Par exemple, vous pouvez utiliser addEventListener(’load’, cb) pour définir une fonction de rappel cb et appeler la méthode window.FH2 dans ce rappel.

Ajouter un conteneur pour le composant

Par exemple, pour ajouter un éditeur d’itinéraire, insérez le code suivant dans la section de votre code où vous souhaitez que l’éditeur d’itinéraire soit affiché :

<div class="fh2-container">
    <div id="wayline-header"></div>
    <div class="project-details">
        <div id="project-app-container"></div>
        <div id="project-middle-container"></div>
        <div id="project-right-micro-app" class="right-micro-app">
            <div class="maps-micro-app">
                <div id="project-map-app-placeholder" class="map-app-placeholder">
                    <div id="map-app-global" class="map-app-container"></div>
                </div>
            </div>
            <div id="wayline-app-container"></div>
        </div>
    </div>
</div>

Ajouter le style du conteneur de composant

Ci-dessous se trouvent les styles de conteneur recommandés, qui peuvent être directement utilisés dans la zone de code cible. S’il existe d’autres exigences personnalisées, vous pouvez modifier le code de style vous-même.

<!DOCTYPE html>
<html>
  <head>
    <!-- start -->
    <style>
        .fh2-container {
            display: flex;
            flex-direction: column;
            /* Set the width and height of the container where you want to load the component */
            height: 100vh;
            width: 100vw;
        }
 
        #project-app-container>div, .map-app-container>div {
            width: 100%;
            height: 100%;
        }
 
        .project-details {
            position: relative;
            width: 100%;
            display: flex;
            flex: 1;
            overflow: auto;
        }
 
        .project-details .right-micro-app {
            position: relative;
            display: flex;
            flex: 1;
        }
 
        .project-details .right-micro-app .maps-micro-app {
            display: flex;
            flex: 1;
        }
 
        .project-details .right-micro-app .map-app-placeholder {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
        }
 
        .project-details .right-micro-app .map-app-container {
            height: 100%;
        }
 
        .project-details .right-micro-app #wayline-app-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
    </style>
    <title>Demo</title>
  </head>
  <body>
  </body>
</html>

Charger les composants frontend

En prenant l’éditeur d’itinéraire de vol comme exemple, vous pouvez charger le composant en transmettant l’id et le wayline_id correspondant à la méthode. Reportez-vous au Interface Tutorial du manuel pour plus de détails.

window.FH2.loadWayline("wayline-app-container", {
      wayline_id: 'bded3cf1-c924-4cd0-95d0-4bd642ddda09',
})

Personnaliser les éléments de carte (facultatif)

En prenant le texte de carte personnalisé comme exemple, vous pouvez cliquer sur Customize Map en haut de wayline.html et dézoomer la carte pour voir l’effet.

<!DOCTYPE html>
<html>
  <head>
    <link href="./custom-style.css" rel="stylesheet">
  </head>
  <body>
    <div class="btn-bar">
        <button id="CesiumMapBtn" onclick="addCustomCesiumData()">Customize Map</button>
    </div>
    <script>
        const CesiumMapBtn = document.getElementById('CesiumMapBtn')
        CesiumMapBtn.style.display = 'none'
        window.addEventListener('load', function () {
            // Wait until the map instance is ready, and then display the map customization button
            window.FH2.subscribe('cesium-viewer-change', (key) => {
                if (window.FH2.cesiumViewer.global) {
                    CesiumMapBtn.style.display = 'inline-block'
                }
            })
        })
        
        // Example: Customize the map, adding custom text to the map
        function addCustomCesiumData () {
            for (const key in window.FH2.cesiumViewer) {
                if (Object.prototype.hasOwnProperty.call(window.FH2.cesiumViewer, key)) {
                    const ins = window.FH2.cesiumViewer[key].entities.add({
                        position: window.Cesium.Cartesian3.fromDegrees(113.93,  22.57, 50),
                        label: {
                            text: "User custom text",
                        },
                    })
                }
            }
        }
    </script>
  </body>
</html>

Personnaliser le thème (facultatif)

Le fichier de démonstration présente la capacité à personnaliser les styles. Vous pouvez modifier les styles de thème correspondants dans custom-style.css et voir immédiatement les effets sur les quatre fichiers HTML, y compris wayline.html. custom-style.css est écrit en utilisant CSS, donc si votre projet utilise également CSS, vous pouvez directement ajuster les variables de style custom-style au sein de votre projet.

<!DOCTYPE html>
<html>
  <head>
    <link href="./custom-style.css" rel="stylesheet">
  </head>
  <body>
    <div class="btn-bar">
        <button onclick="changeTheme()">Customize Style</button>
    </div>
    <script>
        function changeTheme () {
            document.body.className = document.body.className ? '' : 'set-change-color'
        }
    </script>
  </body>
</html>

Ajouter un écouteur d’événements (facultatif)

En prenant l’éditeur d’itinéraire de vol comme exemple, vous pouvez vous abonner au bouton d’enregistrement et recevoir les invites correspondantes lors de l’enregistrement ou de l’annulation de l’itinéraire de vol.

window.FH2.subscribe('wayline-cancel', () => {
    console.log('Canceled saving flight route')
})
window.FH2.subscribe('wayline-save', () => {
    console.log('Flight route saved')
})

Tutoriel d’interface

Instance : window.FH2

Méthode : validateToken

Paramètre	Type	Requis	Description
token	string	true	Renvoie le résultat de la validation du token : true/false

Méthode : initConfig

Paramètre	Type	Requis	Description
serverUrl	string	true	Adresse du service HTTP backend
wssUrl	string	true	Adresse du service duplex backend
hostUrl	string	true	Adresse d’accès web frontend
prjId	string	true	ID de projet
projectToken	string	true	Jeton d’authentification OpenAPI

Méthode : loadWaylineCreation

Paramètre	Type	Requis	Description
domId	string	true	Le frontend tiers fournit l’ID du nœud DOM
props	Object<WaylineCreationConfig>	false	Pour une description détaillée des paramètres, voir le tableau ci-dessous : WaylineCreationConfig

Description des paramètres de WaylineCreationConfig :

Paramètre	Type	Requis	Description
folder_id	string	false	Le dossier où est stockée l’itinéraire de vol créé. La valeur est l’ID du dossier. S’il n’est pas fourni, ce sera le dossier par défaut.

Méthode : destroyWaylineCreation

Paramètre	Type	Requis	Description
-	-	-	Détruire l’instance du composant de création d’itinéraire de vol

Méthode : loadWayline

Paramètre	Type	Requis	Description
domId	string	true	Le frontend tiers fournit l’ID du nœud DOM
props	Object<WaylineConfig>	true	Pour les descriptions détaillées des paramètres, voir le tableau ci-dessous : WaylineConfig.

Description des paramètres de WaylineConfig :

Paramètre	Type	Requis	Description
wayline_id	string	true	ID de Wayline

Méthode : destroyWayline

Paramètre	Type	Requis	Description
isEffect	boolean	false	Détruire l’instance de l’éditeur d’itinéraire de vol. S’il y a plusieurs composants sur la page actuelle, passer sur true pour détruire l’instance n’affectera pas les autres composants chargés. Si aucun paramètre n’est passé, la valeur par défaut est false.

Méthode : loadCockpit

Paramètre	Type	Requis	Description
domId	string	true	Le frontend tiers fournit l’ID du nœud DOM
props	Object<CockpitConfig>	true	Pour une description détaillée des paramètres, voir le tableau ci-dessous : CockpitConfig

Description des paramètres de CockpitConfig :

Paramètre	Type	Requis	Description
gatewaySn	string	true	N° de série de la passerelle
droneSn	string	true	N° de série de l’appareil
map	boolean	false	Charger la carte ou non. La valeur par défaut est true. Définir le paramètre de la méthode sur false empêche le chargement de la carte.

Méthode : destroyCockpit

Paramètre	Type	Requis	Description
isEffect	boolean	false	Détruire l’instance du cockpit virtuel. S’il y a plusieurs composants sur la page actuelle, passer sur true pour détruire l’instance n’affectera pas les autres composants chargés. Si aucun paramètre n’est passé, la valeur par défaut est false.

Méthode : loadProject

Paramètre	Type	Requis	Description
domId	boolean	true	Charger la carte du projet

Méthode : destroyProject

Paramètre	Type	Requis	Description
-	-	-	Détruire la carte de projet

Méthode : loadFlightPath

Paramètre	Type	Requis	Description
domId	string	true	ID du nœud DOM fourni par le frontend tiers
params	IFlightPathParams	true	Voir le tableau ci-dessous pour plus de détails sur les paramètres : IFlightPathParams

Description des paramètres IFlightPathParams :

Paramètre	Type	Requis	Description
flight_path_id	string	true	ID de la trajectoire de vol

Méthode : destroyFlightPath

Paramètre	Type	Requis	Description
-	-	-	Décharger l’enregistrement de vol

Méthode : subscribe

Paramètre	Type	Requis	Description
eventName	string	true	S’abonner aux événements : - wayline-save : déclenché lors de l’enregistrement d’un itinéraire de vol, et le paramètre de rappel est l’ID de l’itinéraire de vol enregistré avec succès - wayline-cancel : déclenché lors de l’annulation de l’enregistrement d’un itinéraire de vol, et le paramètre de rappel est l’ID de l’itinéraire de vol - wayline-back : déclenché lors du clic sur le bouton de retour sur le composant d’édition d’itinéraire de vol, et le paramètre de rappel est l’ID de l’itinéraire de vol - wayline-creation-saved : déclenché lors de l’enregistrement d’un composant de création d’itinéraire de vol, et le paramètre de rappel est l’ID de l’itinéraire de vol enregistré avec succès - wayline-creation-cancel : déclenché lors de l’annulation de l’enregistrement d’un composant de création d’itinéraire de vol - cesium-viewer-change : déclenché lorsque des modifications sont détectées dans le chargement de chaque carte Cesium - flight-path-back : déclenché lors du retour depuis l’enregistrement de vol
callback	string	false	Passer l’ID de l’itinéraire de vol actuel

Méthode : cesiumViewer

Type	Explication
{ [key: string]: CesiumViewer }	Cette méthode permet d’accéder à toutes les instances de Cesium Viewer sur la page actuelle. Les valeurs clés incluent actuellement : - global : carte principale - wayline_editor_support : carte auxiliaire dans le composant d’édition d’itinéraire de vol.

Instance : window.Cesium

Les objets Cesium natifs peuvent être accédés directement via l’objet window, les utilisateurs n’ont donc pas besoin d’importer cesium.js eux-mêmes.

FAQ

Pourquoi l’appel de FH2 entraîne-t-il une erreur « propriété non définie » ?

Assurez-vous d’appeler la méthode window.FH2 après le chargement de la page (load). Vous pouvez également utiliser pour définir une fonction de rappel et appeler window.FH2 au sein de cette fonction de rappel.

Pourquoi la couleur de fond du corps de la page web devient-elle blanche après le chargement du composant FlightHub 2 ?

Actuellement, le chargement du composant FlightHub 2 applique un style global à la couleur de fond du corps, ce qui peut remplacer le style original du site web. Dans ce cas, vous devez définir un style de priorité plus élevée pour la couleur d’arrière-plan du site web, par exemple en utilisant le style !important.

Pourquoi l’utilisation du composant FlightHub 2 entraîne-t-elle un positionnement imprécis de certains éléments d’interface ?

Par exemple, lors de l’ajout de waypoints, d’annotations et d’invites de message dans l’éditeur d’itinéraire de vol, le positionnement de certains éléments est imprécis. Solution : assurez-vous que le conteneur du composant et ses conteneurs parents n’ont pas les propriétés de style suivantes : 1. transform ou perspective n’est pas none ; 2. filter n’est pas none ; 3. will-change est transform ou perspective ; 4. contain est paint

Comment effectuer l’inférence TypeScript ?

Reportez-vous au code suivant :

export type eventName = 'wayline-save' | 'wayline-cancel' | 'cesium-viewer-change'
export interface IWaylineParams {
  wayline_id: string;
}
 
export interface ICockpitParams {
  gateway_sn: string;
  drone_sn: string;
}
 
export interface IFH2Config {
  userId: string;
  orgId: string;
  prjId: string;
  serverUrl: string;
  wssUrl: string;
  hostUrl: string;
  token?: string;
}
export interface FH2 extends Record<string, any> {
  validateToken: (token: string) => boolean;
  initConfig: (config: IFH2Config) => void;
  subscribe: (eventName: eventName, callback: (...args: any[]) => void) => void;
  unsubscribe: (eventName: eventName) => void;
  destroyWayline: () => void;
  loadWayline: (domId: string, routerName: string, params?: IWaylineParams) => void;
  updateWayline: (routerName: string, params?: IWaylineParams) => void;
}

Intégration de composants frontend

# Présentation basique

# Présentation des composants frontend

# Préparation avant de commencer

# Démarrage rapide

# Tutoriel

# Ajouter les styles et dépendances Requis

# Informations de conformité des composants frontend

#

# Ajouter un conteneur pour le composant

# Ajouter le style du conteneur de composant

# Charger les composants frontend

# Personnaliser les éléments de carte (facultatif)

# Personnaliser le thème (facultatif)

# Ajouter un écouteur d’événements (facultatif)

# Tutoriel d’interface

# Instance : window.FH2

# FAQ