PINOCCHIO

Personal Life Stats Dashboard

Node.js v22 REST + SSE OSC / UDP SQLite / sql.js Vanilla JS 800 × 600 CRT

01 — PRÉSENTATION

Pinocchio est un dashboard web personnel au style rétro LCD / cyberpunk, conçu pour visualiser des statistiques de vie en temps réel — inspiré des jeux Sims et RPG.

Les données arrivent depuis des scripts Python ou Node.js via le protocole OSC (Open Sound Control, UDP), ou directement via l'API REST. Le dashboard se met à jour instantanément grâce aux Server-Sent Events (SSE) — zéro rechargement de page, zéro dépendance frontend.

Un moteur de règles permet de configurer des conditions de déclenchement (ex : faim < 25) qui envoient automatiquement un broadcast OSC et déclenchent une animation plein écran sur tous les clients connectés.

L’écran principal met l’accent sur Personal Core, Action Catalog et Avatar Console. Les domaines apartment, world et VJ restent exposés par l’API, OSC et SSE (matrix, glitch, overlay level-up) ; les domaines apartment/world/VJ n'ont pas de panneau dédié dans l'index (code legacy supprimé).

PERSONAL CORE
Faim · Sommeil · Énergie
Hydratation · Humeur · stats complètes

Barres 0–100, couleur adaptative, boutons +/−, alertes automatiques
ACTION CATALOG
Actions bénéfiques / toxiques
effets sur personal, apartment, world

Liste scrollable, déclenchement via API
AVATAR CONSOLE
Personnage animé sur Canvas 2D
4 états selon bien-être moyen

Guitare, magie, chapeau — même logique que le wizard

02 — DÉMONSTRATION RAPIDE

DÉMARRAGE

# Installation (une seule fois)
$ cd D:\VFG_PT__\Pinocchio
$ npm install && cd backend && npm install && cd ..

# Seed base de données (première fois)
$ npm run seed

# Lancement avec icône barre des tâches
$ npm run tray
→ Dashboard : http://localhost:3001 → Admin : http://localhost:3000/didoumanoufg → OSC UDP : port 9000

ENVOYER DES DONNÉES VIA OSC (Python)

from pythonosc import udp_client

client = udp_client.SimpleUDPClient("127.0.0.1", 9000)

# Mettre à jour la faim
client.send_message("/personal/hunger", 35.0)

# Ajouter des XP
client.send_message("/world/xp/add", 100)

# Test de connectivité
client.send_message("/ping", 1)

ENVOYER VIA API REST (curl)

# Mise à jour apartment
$ curl -X POST localhost:3001/api/apartment \
  -H "Content-Type: application/json" \
  -d '{"temperature":28,"light_level":80}'

# Level-up XP
$ curl -X POST localhost:3001/api/world/xp/add \
  -d '{"amount":500}' -H "Content-Type: application/json"

CRÉER UNE RÈGLE DE DÉCLENCHEMENT

$ curl -X POST localhost:3001/api/rules \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Faim Critique",
    "stat_category": "personal",
    "stat_name": "hunger",
    "operator": "<",
    "threshold": 25,
    "osc_address": "/alerts/hunger",
    "cooldown_ms": 60000
  }'
→ Règle créée. Désormais, hunger < 25 déclenche OSC + glitch overlay.

03 — ARCHITECTURE

┌────────────────────────────────────────────────────────────────┐ │ PINOCCHIO SYSTEM │ ├────────────────────────────────────────────────────────────────┤ │ │ │ Sources de données │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │ │ │ Script OSC │ │ curl / REST │ │ Dashboard +/- │ │ │ │ Python/Node │ │ HTTP POST │ │ boutons clics │ │ │ └──────┬───────┘ └──────┬───────┘ └────────┬─────────┘ │ │ │ UDP :9000 │ HTTP :3001 │ │ │ ┌──────▼───────────────────▼─────────────────────▼─────────┐ │ │ │ packages/api (api-server.js) Express :3001 │ │ │ │ │ │ │ │ bridges/osc-server → handlers → core/db.js (sql.js) │ │ │ │ routes/personal|apartment|world|vj │ │ │ │ │ │ │ │ │ core/rule-engine.js │ │ │ │ (évalue règles après chaque write) │ │ │ │ │ │ │ │ │ core/bus.js (EventEmitter) │ │ │ │ │ │ │ │ │ api/routes/events.js (SSE) │ │ │ └────────────────────┬──────────────────────────────────────┘ │ │ │ SSE text/event-stream │ │ ┌────────────────────▼──────────────────────────────────────┐ │ │ │ packages/dashboard (Vanilla JS) │ │ │ │ │ │ │ │ main.js ─── panels/personal, actions, world (overlay) │ │ │ │ └── wizard.js · matrix.js · glitch-overlay.js │ │ │ │ └── panels/ (personal, actions, world overlay) │ │ │ │ didoumanoufg.js ─── rule builder UI ─── trigger log │ │ │ │ matrix.js (fond animé Katakana) │ │ │ └───────────────────────────────────────────────────────────┘ │ │ │ │ Broadcast OSC (quand règle déclenche) → IP:port configurable │ └────────────────────────────────────────────────────────────────┘

STRUCTURE DES FICHIERS

VFG Hero/
├── package.json                # workspaces, start, tray, dev, seed, test
├── specs/                      # schémas techniques
│
├── packages/core/
│   ├── src/db.js, bus.js, config.js, rule-engine.js, artnet-client.js
│   ├── config.json             # ports, OSC, ArtNet, Telegram
│   └── src/data/pinocchio.db   # SQLite local (gitignore)
│
├── packages/api/
│   ├── src/api-server.js       # REST + SSE, port 3001
│   └── src/routes/             # personal, apartment, world, vj, events, rules…
│
├── packages/launcher/
│   ├── src/web-server.js       # statique + /env.js, port 3000
│   ├── src/launcher.js         # systray + spawn api + web
│   └── src/ngrok-detector.js
│
├── packages/bridges/
│   ├── src/osc-server.js       # UDP OSC
│   └── src/telegram-bot.js
│
└── packages/dashboard/
    ├── index.html              # dashboard 800×600
    ├── didoumanoufg.html
    ├── docs.html               # cette page
    ├── css/
    └── js/
        ├── main.js, api.js, matrix.js, wizard.js, glitch-overlay.js, didoumanoufg.js
        ├── panels/             # personal, actions, world.js (level-up)
        └── ui/                 # clock, ticker, stat-bar

04 — TECHNOLOGIES

RUNTIME
Node.js v22
Pas de transpilation. CommonJS (packages Node) + ES Modules natifs (dashboard).
SERVEUR HTTP
Express 4
REST API + Server-Sent Events + fichiers statiques (packages/dashboard).
BASE DE DONNÉES
sql.js (SQLite WASM)
Pas de compilation native. Persistance sur disque via db.export().
PROTOCOLE OSC
node-osc
Serveur UDP port 9000 (receive) + Client UDP pour broadcast règles.
TEMPS RÉEL
Server-Sent Events
Bus EventEmitter interne → SSE push → DOM update sans polling.
FRONTEND
Vanilla JS + Canvas 2D
Zéro framework, zéro bundler. Matrix rain + wizard + glitch en Canvas.
ICÔNE SYSTÈME
systray2
Binaire Go compilé. Menu : Ouvrir / Redémarrer / Paramètres / Quitter.
FONTS
Press Start 2P — titres pixel art
VT323 — corps texte terminal rétro

05 — API REST (port 3001)

STATS

GET
/api/personal
État actuel (hunger, sleep, energy, hydration, mood)
POST
/api/personal
Mise à jour partielle. Body : {"hunger": 40, "sleep": 30}
PATCH
/api/personal/:stat
Mise à jour d'un seul champ. Body : {"value": 55}
GET
/api/apartment
temperature, light_level, tidiness, air_quality
POST
/api/apartment
Mise à jour partielle
GET
/api/world
level, xp, xp_to_next, quests_done, quests_active, title
POST
/api/world/xp/add
Ajoute des XP, déclenche level-up auto. Body : {"amount": 100}

TEMPS RÉEL

GET
/api/events
SSE stream — événements : stat-update, rule-triggered, heartbeat
GET
/api/events/log
20 derniers événements de l'event_log (JSON)

RÈGLES

GET
/api/rules
Toutes les règles
POST
/api/rules
Créer une règle
PATCH
/api/rules/:id
Modifier partiellement (enabled, threshold, name…)
DEL
/api/rules/:id
Supprimer une règle
POST
/api/rules/:id/test
Déclencher manuellement (ignore le cooldown)
GET
/api/rules/osc-config
Lire la cible OSC broadcast (IP + port)
POST
/api/rules/osc-config
Sauvegarder la cible OSC broadcast

ADMINISTRATION

GET
/api/admin/status
httpPort, oscPort, uptime
POST
/api/admin/config
Changer les ports — redémarre automatiquement via launcher

06 — PROTOCOLE OSC (UDP port 9000)

OSC (Open Sound Control) est un protocole de communication UDP utilisé dans les installations artistiques, la domotique et les outils de live coding. Pinocchio l'utilise pour recevoir des mises à jour depuis n'importe quel script, logiciel ou capteur qui supporte OSC.

Adresse OSCTypePlageDescription
/personal/hungerf0–100Niveau de faim
/personal/sleepf0–100Niveau de sommeil
/personal/energyf0–100Énergie
/personal/hydrationf0–100Hydratation
/personal/moodf0–100Humeur
/apartment/temperaturef°CTempérature
/apartment/lightf0–100Luminosité
/apartment/tidinessf0–100Propreté
/apartment/airf0–100Qualité de l'air
/world/leveli≥ 1Niveau du joueur
/world/xpi≥ 0XP absolu
/world/xp/addianyAjoute des XP (level-up auto)
/world/quests/donei≥ 0Quêtes terminées
/world/quests/activei≥ 0Quêtes actives
/world/titlesstringTitre du joueur
/pinganyTest de connectivité

COMPATIBILITÉ

Python
python-osc
pip install python-osc
Node.js
node-osc
npm install node-osc
Max/MSP & Pure Data
Support OSC natif via udpsend/udpreceive
TouchOSC / Lemur
Apps mobiles OSC — configurer IP + port 9000

07 — MOTEUR DE RÈGLES

Après chaque écriture de stat (REST ou OSC), le moteur évalue toutes les règles actives pour cette catégorie. Quand une condition est vérifiée et que le cooldown est écoulé :

  1. Un paquet OSC UDP est envoyé à la cible broadcast configurée
  2. L'événement est loggé dans event_log
  3. Un événement SSE rule-triggered est envoyé à tous les clients connectés
  4. L'animation Glitch Overlay s'affiche sur chaque onglet/écran ouvert
ChampTypeDescription
namestringNom affiché dans l'overlay et le log
stat_categorypersonal | apartment | worldCatégorie de la stat
stat_namestringEx: hunger, sleep, temperature, level
operator< > <= >= == !=Opérateur de comparaison
thresholdnumberValeur seuil
osc_addressstringAdresse OSC envoyée au trigger
osc_valuenumberValeur OSC envoyée
cooldown_msintegerDélai minimum entre deux déclenchements (ms)
enabled0 | 1Activer / désactiver sans supprimer

08 — DESIGN & PALETTE

4 couleurs signature + rouge alerte. Résolution fixe 800 × 600 (style écran CRT).

#39ff14 — PERSONAL / Interface
#5ce1ff — APARTMENT
#ff7cff — WORLD / OSC
#ff2020 — ALERTES / CRITIQUE
#ffb000 — AVERTISSEMENT (25–49%)

EFFETS VISUELS

MATRIX RAIN
Canvas 800×600, Katakana + hex, tête blanche, opacity 0.45
SCANLINES CRT
Overlay CSS position:fixed, repeating-gradient, z-index 9999
LOGO GLITCH
::before cyan / ::after rose, clip-path animé, flicker 60s
GLITCH OVERLAY
Canvas bruit TV + screen shake + RGB split texte + barres distorsion

09 — DIAGRAMMES

FLUX DE DONNÉES

SOURCE BACKEND FRONTEND Script Python ─UDP→ osc-server.js │ handler() ▼ curl REST ─HTTP→ routes/personal.js │ writePersonal() ▼ Dashboard +/- ─HTTP→ db.js (SQLite) │ ├── rule-engine.evaluate() │ │ │ condition vraie ? │ │ oui │ sendOSC() → broadcast target │ bus.emit('rule-triggered') │ │ ├── bus.emit('stat-update') │ ▼ routes/events.js │ SSE push ▼ EventSource (browser) main.js / didoumanoufg.js │ ┌────┴────────────┐ ▼ ▼ Panel update triggerGlitch() DOM render animation plein écran

CYCLE DE VIE SSE

Browser Server GET /api/events ──────────────────▶ res.setHeader('text/event-stream') clients.add(res) ◀────────────────── event: heartbeat (toutes les 30s) [stat change] bus.emit('stat-update', data) ◀────────────────── event: stat-update\ndata: {...} Personal.update() [règle déclenchée] bus.emit('rule-triggered', data) ◀────────────────── event: rule-triggered\ndata: {...} triggerGlitch() [déconnexion] req.on('close') ──────────────────▶ clients.delete(res)

10 — PERSPECTIVES

RÉALISÉ — v1.0

Dashboard 800×600 CRT : Personal Core, Action Catalog, Avatar Console ; matrix rain, double ticker, SSE ; données apartment/world/VJ exposées par API+SSE, sans panneau dédié.

RÉALISÉ — v1.1

Moteur de règles OSC, page admin, glitch overlay plein écran, icône barre des tâches systray2

FUTUR — Capteurs physiques

Intégration de capteurs IoT (ESP32 + MicroPython) : température réelle, luminosité ambiante, qualité d'air CO₂ via OSC WiFi

FUTUR — Historique & graphes

Graphes time-series des stats sur 7/30 jours. Détection de tendances (ex : sommeil qui diminue sur la semaine)

FUTUR — Règles avancées

Conditions multi-critères (AND/OR), actions multiples, planification horaire (ex : alerte si énergie < 30 après 22h)

FUTUR — Intégrations

Webhooks sortants (Discord, ntfy.sh), import automatique depuis Google Fit / Apple Health, plugin Obsidian pour journaling

FUTUR — Mobile

PWA avec affichage adaptatif, widget d'accueil Android/iOS, notifications push via règles