gilles/ipwatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ipwatch

Browse Source
This commit is contained in:
gilles soulier
2026-02-07 16:57:37 +01:00
parent 8383104454
commit dff1b03e42
129 changed files with 19769 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

588
architecture.md Normal file
View File

@@ -0,0 +1,588 @@
# Architecture réseau (draft)
Date: 2025-12-25
## Vision générale
- Modèle principal: boîtes imbriquées (composition) + liaisons (graph).
- Objectifs: représenter la topologie physique/logique et les relations réseau.
## Composition (boîtes imbriquées)
- Exemple de hiérarchie:
- World (Internet)
- Maison
- Livebox
- Switch
- Borne Wi‑Fi
- Laptop
- Smartphone
- Server Proxmox
- VM Debian
- Docker
- Service
- Raspberry Pi
- Service(s)
- IoT Hub
- Service(s)
## Liaisons (graph)
- Les boîtes peuvent être reliées entre elles indépendamment de la hiérarchie.
- Exemples:
- Service -> Docker -> VM -> Server -> Switch -> Livebox -> Maison -> World
- AP (Wi‑Fi) -> Laptop / Smartphone
- Style des liaisons:
- LAN: trait plein
- Wi‑Fi: trait pointillé
## Ports
- Nombre de ports ajustable.
- Plusieurs connexions possibles sur un même port.
## Objets composés
- Un objet peut contenir des enfants.
- Enfants positionnés par rapport au parent (coordonnées locales).
- Types possibles d’enfants: icône, forme, texte, badge, objet complet.
## Redimensionnement
- Les conteneurs sont redimensionnables pour inclure d’autres objets.
- À décider:
- Taille des enfants figée ou proportionnelle au parent lors du resize.
## Modèle de données (à préciser)
- Node (id, type, label, size, children[], ports[])
- Port (id, label, capacity)
- Edge (from, to, kind: LAN/Wi‑Fi)
## Modèle d’objet (draft)
- Parent optionnel + enfants multiples.
- Types d’objets: rectangle, icône, image, table, texte, lien, commande, connecteur.
- Propriétés communes:
- id, name, parentId, children[]
- category
- position: x, y (locales au parent), zIndex
- size: width, height
- rotation: degrés
- keep_ratio: true | false
- visible
- anchor: free | edge, edgeSide: 1|2|3|4
- style: fillColor, strokeColor, opacity
- font: family, size, weight (normal|bold), style (normal|italic), color
- state: libre | accroché | en bordure
- command: texte/commande associée (optionnel)
- connecteurs: liste d’IDs d’objets connecteur
### Image
- formats: png, jpg, svg, webp
- size: width, height
- anchor: position d’accrochage
- state: libre | accroché | en bordure
- storage: fichier sur disque + chemin (`src`) dans JSON/DB (pas d’image brute)
- displayName: nom lisible optionnel
- naming: conserver le nom lisible + suffixe unique (ex: `livebox_7f3a.png`)
- upload:
- création d’un nouveau fichier avec métadonnées
- réduction de poids possible à l’upload et après (optimize)
- library:
- images ajoutées dans une bibliothèque
- metadata category obligatoire
### Table
- size: width, height
- position: x, y (locales au parent)
- parentId, children[]
- grid: rows, cols
- headers: title1, title2, title3...
- style spécifique:
- borderColor, fillColor, headerColor, textColor
- fontWeight (normal|bold), fontStyle (normal|italic), fontSize, fontFamily
- anchor: x, y, zIndex
- connecteurs: liste d’IDs d’objets connecteur
### Connecteur
- Objet à part entière:
- id, name, parentId, children[]
- endpoints: connecteur1 -> targetId, connecteur2 -> targetId
## Exemple Mermaid (boîtes imbriquées + liaisons)
```mermaid
flowchart TB
%% Boîtes imbriquées
subgraph World["World (Internet)"]
subgraph Maison["Maison"]
Livebox["Livebox"]
Switch["Switch"]
subgraph Server["Server Proxmox"]
VM["VM Debian"]
subgraph Docker["Docker"]
Service["Service"]
end
end
Laptop["Laptop"]
Smartphone["Smartphone"]
end
end
%% Liaisons (réseau/logique)
Service --> Docker
Docker --> VM
VM --> Server
Server --> Switch
Switch --> Livebox
Livebox --> Maison
Maison --> World
```
## Exemple JSON (draft)
```json
{
"nodes": [
{
"id": "world",
"type": "rectangle",
"name": "World",
"parentId": null,
"children": ["maison"],
"position": { "x": 0, "y": 0 },
"zIndex": 0,
"visible": true,
"anchor": "free",
"edgeSide": null,
"style": {
"fillColor": "#2B2D2A",
"strokeColor": "#8F8F7A",
"opacity": 1
},
"font": {
"family": "Space Grotesk",
"size": 14,
"weight": "bold",
"style": "normal",
"color": "#E6DB74"
},
"state": "libre",
"command": null,
"connecteurs": []
},
{
"id": "maison",
"type": "rectangle",
"name": "Maison",
"parentId": "world",
"children": ["livebox", "server"],
"position": { "x": 40, "y": 40 },
"zIndex": 1,
"visible": true,
"anchor": "free",
"edgeSide": null,
"style": {
"fillColor": "#3A3D39",
"strokeColor": "#A6E22E",
"opacity": 0.95
},
"font": {
"family": "Space Grotesk",
"size": 12,
"weight": "bold",
"style": "normal",
"color": "#E6DB74"
},
"state": "libre",
"command": null,
"connecteurs": []
},
{
"id": "livebox",
"type": "image",
"name": "Livebox",
"category": "network",
"parentId": "maison",
"children": [],
"position": { "x": 20, "y": 30 },
"size": { "width": 48, "height": 48 },
"rotation": 0,
"keepRatio": true,
"zIndex": 2,
"visible": true,
"anchor": "free",
"edgeSide": null,
"style": {
"fillColor": "#272822",
"strokeColor": "#F92672",
"opacity": 1
},
"font": {
"family": "Space Grotesk",
"size": 11,
"weight": "normal",
"style": "normal",
"color": "#F8F8F2"
},
"state": "libre",
"command": null,
"connecteurs": ["c-livebox"],
"image": {
"format": "svg",
"src": "livebox.svg",
"displayName": "Livebox",
"category": "network",
"sizeBytes": 12456,
"width": 48,
"height": 48
}
},
{
"id": "server",
"type": "rectangle",
"name": "Server Proxmox",
"parentId": "maison",
"children": ["vm-debian"],
"position": { "x": 140, "y": 30 },
"zIndex": 2,
"visible": true,
"anchor": "free",
"edgeSide": null,
"style": {
"fillColor": "#2F3130",
"strokeColor": "#66D9EF",
"opacity": 1
},
"font": {
"family": "Space Grotesk",
"size": 11,
"weight": "bold",
"style": "normal",
"color": "#E6DB74"
},
"state": "libre",
"command": "ssh root@server",
"connecteurs": ["c-server"]
},
{
"id": "vm-debian",
"type": "rectangle",
"name": "VM Debian",
"parentId": "server",
"children": ["docker"],
"position": { "x": 16, "y": 36 },
"zIndex": 3,
"visible": true,
"anchor": "free",
"edgeSide": null,
"style": {
"fillColor": "#1F2A2A",
"strokeColor": "#A6E22E",
"opacity": 1
},
"font": {
"family": "Space Grotesk",
"size": 10,
"weight": "normal",
"style": "normal",
"color": "#E6DB74"
},
"state": "libre",
"command": null,
"connecteurs": []
},
{
"id": "docker",
"type": "rectangle",
"name": "Docker",
"parentId": "vm-debian",
"children": ["service-web"],
"position": { "x": 12, "y": 28 },
"zIndex": 4,
"visible": true,
"anchor": "free",
"edgeSide": null,
"style": {
"fillColor": "#263238",
"strokeColor": "#F8F8F2",
"opacity": 1
},
"font": {
"family": "Space Grotesk",
"size": 10,
"weight": "normal",
"style": "normal",
"color": "#F8F8F2"
},
"state": "libre",
"command": "docker ps",
"connecteurs": []
},
{
"id": "service-web",
"type": "text",
"name": "Service Web",
"parentId": "docker",
"children": [],
"position": { "x": 10, "y": 18 },
"zIndex": 5,
"visible": true,
"anchor": "free",
"edgeSide": null,
"style": {
"fillColor": "transparent",
"strokeColor": "transparent",
"opacity": 1
},
"font": {
"family": "Space Grotesk",
"size": 10,
"weight": "normal",
"style": "italic",
"color": "#A6E22E"
},
"state": "libre",
"command": null,
"connecteurs": ["c-service"]
}
],
"connecteurs": [
{
"id": "c-livebox",
"name": "LAN Livebox",
"parentId": "livebox",
"children": [],
"endpoints": [
{ "name": "c1", "targetId": "c-server" },
{ "name": "c2", "targetId": "world" }
]
},
{
"id": "c-server",
"name": "LAN Server",
"parentId": "server",
"children": [],
"endpoints": [
{ "name": "c1", "targetId": "c-livebox" },
{ "name": "c2", "targetId": "c-service" }
]
},
{
"id": "c-service",
"name": "Service Link",
"parentId": "service-web",
"children": [],
"endpoints": [
{ "name": "c1", "targetId": "c-server" },
{ "name": "c2", "targetId": "docker" }
]
}
],
"edges": [
{ "from": "c-livebox", "to": "c-server", "kind": "lan" },
{ "from": "c-livebox", "to": "world", "kind": "lan" }
]
}
```
## UML (tables SQLite - draft)
```mermaid
classDiagram
class diagram {
+id TEXT
+name TEXT
+created_at TEXT
+updated_at TEXT
+version TEXT
}
class node {
+id TEXT
+diagram_id TEXT
+type TEXT
+name TEXT
+category TEXT
+parent_id TEXT
+x REAL
+y REAL
+width REAL
+height REAL
+rotation REAL
+keep_ratio INTEGER
+z_index INTEGER
+visible INTEGER
+anchor TEXT
+edge_side INTEGER
+state TEXT
}
class node_style {
+node_id TEXT
+fill_color TEXT
+stroke_color TEXT
+opacity REAL
+font_family TEXT
+font_size REAL
+font_weight TEXT
+font_style TEXT
+font_color TEXT
}
class node_command {
+node_id TEXT
+command_text TEXT
}
class node_media {
+node_id TEXT
+media_type TEXT
+src TEXT
+format TEXT
+display_name TEXT
+category TEXT
+size_bytes INTEGER
+width REAL
+height REAL
}
class node_text {
+node_id TEXT
+content TEXT
}
class node_link {
+node_id TEXT
+url TEXT
+label TEXT
}
class node_table {
+node_id TEXT
+rows INTEGER
+cols INTEGER
+width REAL
+height REAL
+header_color TEXT
+header_text_color TEXT
+border_color TEXT
+cell_color TEXT
+font_family TEXT
+font_size REAL
+font_weight TEXT
+font_style TEXT
}
class node_table_header {
+node_id TEXT
+col_index INTEGER
+title TEXT
}
class connector {
+id TEXT
+diagram_id TEXT
+name TEXT
+parent_id TEXT
+x REAL
+y REAL
+z_index INTEGER
+visible INTEGER
}
class connector_endpoint {
+id TEXT
+connector_id TEXT
+name TEXT
+target_id TEXT
}
class edge {
+id TEXT
+diagram_id TEXT
+from_id TEXT
+to_id TEXT
+kind TEXT
+style TEXT
+label TEXT
+color TEXT
}
class port {
+id TEXT
+node_id TEXT
+name TEXT
+capacity INTEGER
+x REAL
+y REAL
+anchor TEXT
+edge_side INTEGER
}
diagram "1" --> "many" node
diagram "1" --> "many" connector
diagram "1" --> "many" edge
node "1" --> "0..1" node : parent
node "1" --> "0..1" node_style
node "1" --> "0..1" node_command
node "1" --> "0..1" node_media
node "1" --> "0..1" node_text
node "1" --> "0..1" node_link
node "1" --> "0..1" node_table
node "1" --> "many" node_table_header
node "1" --> "many" port
connector "1" --> "many" connector_endpoint
```
## Frontend (UI - draft)
- Panneau gauche: **Édition** (mode édition activable).
- Palette d’objets: carré, rectangle, rond, ovale, pilule, image, texte, table, commande.
- Liaisons: ligne, connexion, flèche, spline.
- Boutons:
- Supprimer un objet du monde (avec choix de cascade):
- supprimer les enfants
- relier les enfants au grand‑parent
- Importer un objet (bibliothèque) + enfants (JSON).
- Bibliothèque:
- stockage local (JSON)
- export/import possible
- Panneau droit: **Propriétés** (ex‑Actions).
- Propriétés organisées par sections (plus lisible).
- Parent/enfants configurables depuis Propriétés.
- Image: afficher poids + catégorie.
- Afficher rotation + dimensions (avec poignées de resize/rotation activables).
- Barre d’outils dépliable (outils courants):
- couper, copier, coller, supprimer, cloner
- palette couleurs (trait / intérieur)
- police (liste déroulante) + taille (boutons + / -)
- zoom (loupe + / -)
- épaisseur de trait
## Stockage des ressources (arborescence proposée)
```
architecture/
backend/
app/
diagrams/
world.json
database/
resources/
toolbars/
editbar.json
prop_bar.json
outils.json
images/
originals/
optimized/
thumbs/
police/
palettes/
commandes/
library/
objects.json
simple_objects.json
images.json
tables.json
commands.json
palettes.json
fonts.json
exports/
imports/
```
Descriptions:
- backend/: API + logique serveur pour l’éditeur.
- app/: code UI + logique front.
- diagrams/: fichiers de diagrammes (world.json, etc.).
- database/: base SQLite locale.
- resources/toolbars/: définitions des barres d’outils.
- resources/images/: images sources, optimisées, miniatures.
- resources/police/: polices disponibles.
- formats acceptés: ttf (support initial), woff/woff2 possibles plus tard.
- resources/palettes/: palettes de couleurs.
- resources/commandes/: commandes prêtes à l’emploi.
- library/: bibliothèque d’objets réutilisables.
- exports/: exports (JSON, images, etc.).
- imports/: imports.
- Les deux volets sont repliés par défaut; un bouton en haut permet de les déplier.
- Drag & drop depuis Édition vers l’arbre réseau:
- crée un nouvel objet dans le monde avec paramètres par défaut.
- Mode lecture:
- édition désactivée = pas de déplacement ni de modification.