Network Plan

La fonctionnalité Network Plan crée une visualisation interactive du diagramme réseau des appareils, caméras et connexions de votre projet. Elle génère automatiquement un diagramme structuré montrant comment tous les composants réseau sont connectés, avec des options de disposition, de style et d’exportation personnalisables. Vous pouvez ajuster manuellement la position des appareils, ajouter des étiquettes de texte personnalisées, configurer l’apparence visuelle et exporter le diagramme en JPG ou PDF pour la documentation et les présentations.

Network Plan inclut des outils de conception puissants pour créer des diagrammes professionnels : sélection multiple et outils d’alignement pour un positionnement précis, affichage de grille avec alignement magnétique pour un espacement cohérent, contrôles de visibilité des icônes pour se concentrer sur des segments réseau spécifiques, et menus contextuels au clic droit pour des actions rapides. Toutes les connexions se mettent automatiquement à jour lorsque des appareils sont déplacés, et les appareils masqués masquent également automatiquement leurs connexions.

Quand l’utiliser

• Lorsque vous devez créer un diagramme réseau visuel montrant tous les appareils et leurs connexions
• Lors de la préparation de la documentation réseau pour les équipes d’installation ou les clients
• Lorsque vous souhaitez visualiser la topologie du réseau et les flux de données de votre système
• Lorsque vous devez exporter des diagrammes réseau professionnels pour des propositions ou de la documentation technique
• Lorsque vous souhaitez personnaliser la disposition et l’apparence de votre diagramme réseau

Ouverture de Network Plan

Pour accéder à la fonctionnalité Network Plan :

1. Cliquez sur l’icône Network diagram (fa fa-network-wired) dans la barre d’outils de gauche.
2. L’interface Network Plan s’ouvre, affichant une zone de dessin avec votre diagramme réseau et une barre latérale avec des options de configuration.

S’il s’agit de la première ouverture de Network Plan pour votre projet, le système disposera automatiquement tous les appareils et caméras à l’aide de l’algorithme de disposition automatique.

Disposition automatique

La fonctionnalité de disposition automatique organise automatiquement tous les appareils et caméras dans votre diagramme réseau. Elle crée une structure claire et ordonnée qui montre nettement les connexions entre appareils.

• Auto Layout button – Cliquez pour réorganiser automatiquement tous les appareils et caméras sur la zone de dessin
• Orientation – Choisissez la direction de la disposition :
  • Left-Right (LR) – Les appareils s’enchaînent de gauche à droite
  • Right-Left (RL) – Les appareils s’enchaînent de droite à gauche
  • Top-Bottom (TB) – Les appareils s’enchaînent de haut en bas (par défaut)
  • Bottom-Top (BT) – Les appareils s’enchaînent de bas en haut

L’algorithme de disposition automatique prend en compte toutes les connexions entre appareils et les organise de manière à minimiser les chevauchements et à créer une hiérarchie visuelle claire. Après l’exécution de la disposition automatique, vous pouvez toujours ajuster manuellement la position des appareils en les faisant glisser sur la zone de dessin.

Taille des icônes

Le curseur de taille des icônes contrôle la taille des icônes d’appareils et de caméras dans le diagramme réseau :

• Ajustez le curseur pour modifier la taille des icônes de 5 à 30 pixels
• Des icônes plus grandes rendent les appareils plus visibles mais occupent plus d’espace
• Des icônes plus petites permettent de faire tenir davantage d’appareils sur la zone de dessin
• La taille affecte de la même manière les icônes d’appareils et de caméras

Icônes en couleur

L’interrupteur Icons Colored détermine si les icônes d’appareils s’affichent en couleur ou sous forme de simples cercles blancs :

• Enabled – Les icônes s’affichent dans leurs couleurs configurées (couleurs d’icône d’appareil ou couleurs par défaut selon le type)
• Disabled – Toutes les icônes s’affichent comme des cercles blancs avec des bordures noires

Les icônes colorées aident à distinguer visuellement les différents types d’appareils, tandis que les icônes monochromes offrent une apparence plus épurée et uniforme.

Grille

La fonctionnalité de grille fournit des repères visuels d’alignement et un alignement magnétique pour vous aider à créer des diagrammes réseau précis et organisés :

• Grid toggle – Activez ou désactivez l’affichage de la grille sur la zone de dessin
• Snap to grid – Lorsqu’il est activé, l’alignement des icônes sur les lignes de la grille se fait automatiquement lors du glisser-déposer
• Grid size – Ajustez l’espacement de la grille de 10 à 100 pixels (par défaut : 40 px)

La grille apparaît sous forme de lignes discrètes sur la zone de dessin, chaque 5e ligne étant légèrement plus sombre pour faciliter le repérage. Lorsque l’alignement magnétique est activé, faire glisser une icône la positionnera automatiquement à l’intersection de grille la plus proche, garantissant un alignement et un espacement cohérents dans tout votre diagramme.

Orientation de la page

Définissez l’orientation du diagramme réseau exporté :

• Portrait – Orientation verticale (plus haut que large)
• Landscape – Orientation horizontale (plus large que haute)

L’orientation affecte à la fois la vue de la zone de dessin et le fichier PDF/JPG exporté.

Format de page

Sélectionnez le format de papier pour l’exportation de votre diagramme réseau :

• A4, A3, A2, A1, A0 – Tailles de papier ISO standard
• Letter, Legal, Tabloid – Tailles de papier nord-américaines

Le format de page sélectionné détermine les dimensions de la zone de dessin et du fichier exporté. Les grandes tailles (A2, A1, A0) sont utiles pour les réseaux complexes avec de nombreux appareils, tandis que les petites tailles (A4, Letter) conviennent aux réseaux plus simples ou à l’affichage numérique.

Visibilité des icônes

Le panneau Icon Visibility (réduit par défaut) vous permet d’afficher ou de masquer individuellement des appareils et des caméras dans votre diagramme réseau :

• Expand/Collapse – Cliquez sur l’icône en chevron dans l’en-tête du panneau pour développer ou réduire la liste de visibilité
• Show all / Hide all – Boutons d’action rapide pour afficher ou masquer toutes les icônes en une fois
• Filter – Saisissez du texte dans la zone de recherche pour filtrer la liste par nom d’appareil
• Toggle visibility – Utilisez l’interrupteur à côté de chaque appareil pour l’afficher ou le masquer

Lorsqu’une icône est masquée :

• L’icône et son étiquette ne sont pas affichées sur la zone de dessin
• Toutes les connexions vers cet appareil sont également masquées automatiquement
• Les éléments masqués apparaissent estompés dans la liste de visibilité pour une identification facile

Cette fonctionnalité est utile pour se concentrer sur des parties spécifiques de votre réseau, créer des vues simplifiées pour des présentations, ou retirer temporairement des appareils du diagramme sans les supprimer.

Légende

La fonctionnalité de légende affiche un guide visuel montrant tous les types de connexions utilisés dans votre diagramme réseau :

• Legend toggle – Activez ou désactivez l’affichage de la légende
• Legend position – Choisissez l’emplacement de la légende :
  • Top Left – Coin supérieur gauche
  • Top Right – Coin supérieur droit
  • Bottom Left – Coin inférieur gauche
  • Bottom Right – Coin inférieur droit

La légende montre chaque type de connexion avec son style de ligne, sa couleur et sa largeur correspondants, ce qui facilite la compréhension de ce que représente chaque ligne de connexion dans votre diagramme. La légende est déplaçable, ce qui vous permet de la repositionner si nécessaire.

Textes personnalisés

Vous pouvez ajouter des étiquettes de texte personnalisées à votre diagramme réseau pour des annotations, des titres ou des informations supplémentaires :

• Add Text button – Cliquez pour ajouter un nouvel objet texte au diagramme
• Text input – Saisissez ou modifiez le contenu textuel de chaque objet texte
• Styling button – Cliquez sur l’icône de crayon pour ouvrir les options de style d’un objet texte

Style du texte

Lorsque vous cliquez sur le bouton de style d’un objet texte, une boîte de dialogue superposée apparaît avec des options de style :

• Color – Choisissez la couleur du texte à l’aide du sélecteur de couleur
• Font size – Définissez la taille de police de 8 à 72 pixels
• Apply to all texts – Bouton pour appliquer le style actuel à tous les objets texte du diagramme

Les objets texte sont déplaçables sur la zone de dessin, ce qui vous permet de les positionner n’importe où sur le diagramme. Vous pouvez sélectionner plusieurs objets texte (voir Sélection multiple ci-dessous) et les déplacer ensemble ou les aligner à l’aide de la barre d’outils d’alignement.

Type de fichier

Choisissez le format d’exportation de votre diagramme réseau :

• JPG – Format image adapté à un usage numérique et aux présentations
• PDF – Format de document idéal pour l’impression et la documentation professionnelle

La sélection du type de fichier détermine le format du fichier exporté lorsque vous cliquez sur le bouton Export.

Interaction avec la zone de dessin

La zone de dessin de Network Plan est entièrement interactive, ce qui vous permet de manipuler le diagramme :

• Faire glisser des appareils – Cliquez et faites glisser une icône d’appareil ou de caméra pour la repositionner sur la zone de dessin
• Faire glisser des étiquettes – Cliquez et faites glisser les étiquettes d’appareil pour les repositionner par rapport à leurs appareils
• Faire glisser des textes – Cliquez et faites glisser les objets texte personnalisés pour les déplacer n’importe où sur la zone de dessin
• Faire glisser la zone de dessin – Cliquez et faites glisser les zones vides de la zone de dessin pour déplacer la vue
• Zoom – Utilisez la molette de la souris pour zoomer et dézoomer (de 0,1x à 2x)
• Gestes tactiles – Sur les appareils mobiles, utilisez le pincement pour zoomer et le défilement à deux doigts pour déplacer la vue

La zone de dessin empêche automatiquement de faire glisser des appareils ou des étiquettes sur des lignes de connexion ou sur d’autres appareils afin de maintenir la clarté du diagramme.

Sélection multiple et alignement

Vous pouvez sélectionner plusieurs éléments (appareils, caméras, étiquettes ou textes personnalisés) et les manipuler ensemble :

Sélection d’éléments

• Clic simple – Cliquez sur une icône, une étiquette ou un texte pour le sélectionner (désélectionne la sélection précédente)
• Ctrl/Cmd/Maj + clic – Maintenez Ctrl (Windows/Linux) ou Cmd (Mac) ou Maj en cliquant pour ajouter des éléments à votre sélection
• Sélection rectangulaire – Cliquez et faites glisser sur une zone vide pour tracer un rectangle de sélection qui sélectionne tous les éléments qu’il contient
• Touche Échap – Appuyez sur Échap pour effacer toutes les sélections

Les éléments sélectionnés sont mis en évidence avec une bordure bleue et un contour en tirets. Lorsque vous sélectionnez 2 éléments ou plus, une barre d’outils d’alignement flottante apparaît en haut de la zone de dessin.

Déplacement multiple

Lorsque plusieurs éléments sont sélectionnés, faire glisser l’un d’eux déplace tous les éléments sélectionnés ensemble de la même distance. Cela conserve les positions relatives tout en vous permettant de repositionner simultanément des groupes entiers d’appareils, d’étiquettes ou de textes.

Barre d’outils d’alignement

La barre d’outils d’alignement apparaît lorsque 2 éléments ou plus sont sélectionnés, offrant des options rapides d’alignement et de distribution :

• Align Left – Aligne tous les éléments sélectionnés sur la position la plus à gauche
• Align Right – Aligne tous les éléments sélectionnés sur la position la plus à droite
• Align Top – Aligne tous les éléments sélectionnés sur la position la plus haute
• Align Bottom – Aligne tous les éléments sélectionnés sur la position la plus basse
• Align Center Horizontal – Centre tous les éléments verticalement (même coordonnée Y)
• Align Center Vertical – Centre tous les éléments horizontalement (même coordonnée X)
• Distribute Horizontal – Espacie uniformément les éléments horizontalement entre les éléments le plus à gauche et le plus à droite
• Distribute Vertical – Espacie uniformément les éléments verticalement entre les éléments le plus haut et le plus bas
• Deselect all – Efface la sélection (également disponible via la touche Échap)

La barre d’outils d’alignement fonctionne avec n’importe quelle combinaison d’appareils, de caméras, d’étiquettes et de textes personnalisés, vous permettant de créer des diagrammes parfaitement alignés et organisés.

Étiquettes d’appareil

Chaque appareil et caméra dans le diagramme réseau affiche une étiquette générée automatiquement indiquant :

• Type d’appareil – Le type d’appareil (par ex., Routeur, Commutateur, Caméra)
• Nom – Le nom d’affichage de l’appareil ou le modèle de la caméra
• Adresse IP – L’adresse IP de l’appareil (si configurée)

Les étiquettes sont positionnées automatiquement pour éviter le chevauchement avec les lignes de connexion. Vous pouvez ajuster manuellement la position des étiquettes en les faisant glisser, et le système mémorisera vos positions personnalisées.

Ligne de connexion de l’étiquette

Lorsqu’une étiquette est sélectionnée ou déplacée, une subtile ligne pointillée bleue apparaît, reliant l’étiquette à l’icône de son appareil. Ce repère visuel vous aide à voir à quel appareil appartient chaque étiquette, en particulier lorsque les étiquettes sont positionnées loin de leurs icônes. La ligne de connexion inclut un petit point d’ancrage du côté de l’étiquette pour une référence visuelle claire.

Sélection d’étiquettes et sélection multiple

Les étiquettes peuvent être sélectionnées indépendamment de leurs icônes d’appareil :

• Cliquer sur l’étiquette – Sélectionne l’étiquette (et non l’icône)
• Cliquer sur l’icône – Sélectionne l’icône (et non l’étiquette)
• Sélection multiple d’étiquettes – Utilisez Ctrl/Cmd/Maj + clic ou la sélection rectangulaire pour sélectionner plusieurs étiquettes
• Déplacement multiple d’étiquettes – Lorsque plusieurs étiquettes sont sélectionnées, en faire glisser une déplace toutes les étiquettes sélectionnées ensemble

Les étiquettes peuvent être incluses dans les opérations d’alignement avec les appareils, caméras et textes personnalisés.

Menu contextuel au clic droit

Un clic droit sur une icône d’appareil ou de caméra ouvre un menu contextuel avec des actions rapides :

• Hide icon / Show icon – Bascule la visibilité de l’appareil ou de la caméra sélectionné(e). Lorsqu’il est masqué, l’icône, son étiquette et toutes ses connexions sont retirées du diagramme
• Reset label position – Réinitialise la position de l’étiquette à sa position calculée automatiquement, en supprimant tout positionnement personnalisé

Le menu contextuel affiche le nom de l’appareil et le type d’icône en haut pour une identification facile. Cliquez n’importe où en dehors du menu pour le fermer.

Exportation

Pour exporter votre diagramme réseau :

1. Configurez tous les paramètres (format de page, orientation, taille des icônes, etc.)
2. Disposez les appareils et ajoutez les textes personnalisés nécessaires
3. Cliquez sur le bouton Export en bas de la barre latérale
4. Le diagramme sera exporté dans le format sélectionné (JPG ou PDF) et téléchargé sur votre ordinateur

L’exportation inclut :

• Tous les appareils et caméras avec leurs positions actuelles
• Toutes les lignes de connexion avec leurs styles configurés
• Les objets texte personnalisés
• La légende (si activée)
• Les paramètres de format et d’orientation de la page

Conseils

• Utilisez d’abord la disposition automatique pour obtenir une bonne base, puis ajustez manuellement les positions au besoin
• Choisissez l’orientation (TB, LR, etc.) qui correspond le mieux à la structure de votre réseau avant d’affiner les positions
• Utilisez des icônes plus grandes pour les présentations et des icônes plus petites pour la documentation détaillée
• Activez les icônes colorées lorsque vous devez identifier rapidement les types d’appareils, utilisez le monochrome pour un rendu plus épuré
• Ajoutez des textes personnalisés pour nommer des segments de réseau, ajouter des titres ou fournir un contexte supplémentaire
• Placez la légende dans un coin qui n’interfère pas avec votre diagramme réseau
• Utilisez des formats A3 ou A2 pour les réseaux complexes avec de nombreux appareils afin d’assurer la lisibilité de l’ensemble
• N’oubliez pas que les étiquettes d’appareil peuvent être repositionnées si elles se chevauchent avec des connexions
• Exportez en PDF pour l’impression et en JPG pour les présentations numériques ou le partage par e‑mail
• Activez la grille lorsque vous avez besoin d’un alignement précis – elle aide à créer des diagrammes professionnels et organisés
• Utilisez l’alignement magnétique (snap-to-grid) pour un espacement cohérent entre les appareils, en particulier lors de créations de dispositions structurées
• Sélectionnez plusieurs appareils à l’aide de la sélection rectangulaire ou de Ctrl+clic pour aligner ou répartir rapidement des groupes d’appareils
• Utilisez la barre d’outils d’alignement pour créer des lignes ou des colonnes d’appareils parfaitement alignées
• Masquez les appareils inutilisés à l’aide du panneau Icon Visibility ou du menu au clic droit pour vous concentrer sur des segments réseau spécifiques
• Sélectionnez les étiquettes indépendamment des icônes pour peaufiner leur positionnement sans déplacer les appareils
• Utilisez le déplacement multiple pour déplacer des groupes entiers d’appareils tout en conservant leurs positions relatives
• Cliquez avec le bouton droit sur les icônes pour accéder rapidement aux fonctions de masquage/affichage et de réinitialisation des étiquettes
• Combinez les outils d’alignement avec l’alignement magnétique pour des mises en page au pixel près

Sujets associés

• Création de connexions
• Export to PDF/JPG
• Barre latérale des appareils
• Barre latérale des caméras