Retour

Un tableau de bord d'utilisation de Claude sur le M5Stack Basic — limites de forfait et dépenses API sur votre bureau

Le M5Stack Basic sur le clavier d'un ordinateur portable affichant le tableau de bord — un compte Claude Max à 88 % de sa limite hebdomadaire, la session de 5 heures à 30 %, et 142M de tokens aujourd'hui

J’utilise Claude tous les jours, et la question que je pose le plus souvent ne porte pas sur le code. C’est « combien de ma semaine me reste-t-il ? » L’écran /usage de Claude Code y répond, mais seulement quand je m’arrête pour le taper. Je voulais la réponse sur mon bureau, comme une horloge affiche l’heure.

Le M5Stack Basic est un bon choix. C’est un appareil fini — un écran de 2 pouces 320×240, trois boutons, une batterie et un ESP32 dans un boîtier de 54 mm. Pas de plaque de prototypage, pas de soudure.

Cet article décrit le tableau de bord — ce qu’il affiche, comment les données passent de Claude à l’écran, comment l’appareil se connecte sans aucune configuration, et les étapes pour construire le vôtre. L’interface a été conçue sur le M5Stack Core dans Velxio avant de toucher le matériel, et c’est la voie que je recommande si vous voulez en construire un. Vous pouvez aussi exécuter ce firmware dans votre navigateur, sur des données de démonstration, sans l’appareil.

Le tableau de bord sur l’appareil — regardez-le sur YouTube.

Tout le code, le firmware et le pont PC, est sur GitHub sous licence MIT — velxio/m5claude. La section « Le code, partie par partie » ci-dessous détaille ce que fait chaque fichier.

Le matériel

Le M5Stack Basic v2.7 — un ESP32 avec un écran IPS de 2 pouces 320x240, trois boutons, USB-C, un slot microSD et une batterie de 110 mAh

La carte est le M5Stack Basic Core IoT Development Kit v2.7 :

Rien d’autre n’est nécessaire — le tableau de bord n’utilise que ce qui est dans le boîtier. La carte n’a pas d’IMU, de microphone, de LED ni d’horloge temps réel, donc le tableau de bord utilise tout le reste — l’écran et les boutons, le haut-parleur pour les alertes, le rétroéclairage pour économiser la batterie, et la puce d’alimentation pour afficher la charge.

Ce que l’écran affiche

Le tableau de bord fonctionne avec deux types de comptes Claude, et avec plusieurs de chaque :

Pour les deux, il affiche les tokens par jour sur la dernière semaine, répartis en entrée, sortie, lectures de cache et écritures de cache, et par modèle.

Il y a quatre vues. B passe à la suivante, A et C changent de compte, un appui long sur B demande des données fraîches au PC, et un appui long sur C ouvre les réglages. Voici tous les écrans, avec l’animation que chaque vue joue à son ouverture :

Une visite animée de tous les écrans : la vue d'ensemble avec trois comptes, les vues limites, tokens et répartition, une organisation API, la vue d'ensemble à compte unique, la batterie en charge, les réglages en anglais et en espagnol, l'invite d'approbation et l'écran d'attente

Vue d’ensemble. Une carte par compte. La disposition s’adapte au nombre de comptes : un compte remplit l’écran, deux obtiennent des cartes plus hautes avec une ligne pour l’usage du jour, et trois ou plus deviennent une liste défilante.

La vue d'ensemble avec un compte Claude Max : la limite hebdomadaire sous forme d'anneau, la session de 5 heures et les limites par modèle à droite, et les tokens du jour avec un graphique sur sept jours

La vue d'ensemble avec deux comptes Max et une organisation API : pourcentage hebdomadaire, barres de 5 heures et de 7 jours, heures de réinitialisation, et dépenses sur sept jours pour le compte API

Limites. La limite hebdomadaire sous forme d’anneau, avec la session et les limites par modèle à côté. Les noms de modèles viennent de Claude lui-même, donc les lignes suivent les limites de votre forfait. Les couleurs changent à 60 % (ambre) et 85 % (rouge).

La vue limites : un anneau hebdomadaire à 67 %, la session de 5 heures à 42 %, et les limites hebdomadaires Opus et Sonnet

Tokens. Aujourd’hui, les sept derniers jours, et le montant en dollars, puis les tokens par jour avec une ligne pointillée à la moyenne. Pour un abonnement, le montant en dollars est ce que les mêmes tokens coûteraient aux prix catalogue de l’API. Ce n’est pas une facturation, mais c’est un moyen utile de voir à quel point vous utilisez le forfait.

La vue tokens : 2,84 M de tokens aujourd'hui, 20,8 M sur sept jours, une valeur API de 84,20 $, et un graphique à barres des tokens par jour

La vue tokens sur l'appareil, avec 142 M de tokens aujourd'hui et 296 M sur sept jours

Répartition. Les tokens de la semaine par type et par modèle. Avec Claude Code, les lectures de cache représentent généralement la majeure partie du total.

La vue répartition : une barre empilée des tokens d'entrée, de sortie, de lecture de cache et d'écriture de cache, et la part de chaque modèle

La vue répartition sur l'appareil : presque tous les 296 M de tokens d'une semaine sont des lectures de cache, réparties entre Opus et Fable

Le point à côté de l’horloge indique la liaison : vert quand les données sont fraîches, ambre quand elles sont périmées, rouge quand aucun PC n’est connecté. Les photos montrent mon propre compte. Les captures d’écran utilisent des comptes de démonstration.

Batterie, son et réglages

À côté de l’horloge se trouve la batterie, dessinée comme les téléphones le font : le niveau, et un éclair avec un remplissage qui monte pendant la charge. La puce d’alimentation IP5306 ne rapporte que quatre paliers (25, 50, 75 et 100 %), donc le nombre avance par pas de 25.

L'en-tête pendant la charge : 75 % avec un éclair et une batterie verte, à côté du point de liaison et de l'horloge

Le haut-parleur sert aux alertes. Quand une limite de session ou hebdomadaire dépasse 90 % (ou 80 %, si vous le choisissez), l’appareil joue un court carillon double et indique quel compte et quelle limite. Quand une limite se réinitialise, il joue un carillon montant. Les demandes d’approbation d’un nouvel ordinateur émettent aussi un son. Les clics de bouton sont optionnels.

Un appui long sur C ouvre les réglages. A et C se déplacent, B change une valeur, et un appui long sur B ferme l’écran. Les réglages sont enregistrés sur l’appareil.

L'écran des réglages : langue, luminosité, sons, seuil d'alerte, écran éteint sur batterie, atténuation la nuit, ordinateurs appairés et version du firmware

Les mêmes écrans en espagnol : les réglages et la vue d'ensemble

La vue d'ensemble en espagnol

Faire durer 110 mAh

Le premier firmware vidait la batterie en bien moins d’une heure. Le CPU tournait à 240 MHz, l’écran se redessinait chaque seconde, et la radio émettait à pleine puissance avec un intervalle de connexion de 15 à 30 ms. Rien de tout cela n’est nécessaire pour afficher un nombre qui change une fois par minute. Sur batterie, le firmware fait désormais ceci :

Pour une utilisation toute la journée loin du bureau, le Battery Module 13.2 se fixe sous le Basic et ajoute 1500 mAh.

Comment ça fonctionne

Les données circulent depuis la connexion et les transcriptions de Claude Code et depuis l'API Admin vers le pont Python, puis par USB ou Bluetooth LE vers le M5Stack, qui ne dessine que ce qu'on lui envoie

La règle de conception est que l’appareil ne sait rien. Il ne détient aucun identifiant Claude ni aucun paramètre Wi-Fi. Un petit programme sur le PC, le pont, collecte tout et envoie à l’appareil un instantané à dessiner. Cela garde les secrets hors d’un appareil posé sur un bureau, et cela signifie que changer d’ordinateur ou de réseau ne nécessite aucune reconfiguration.

D’où viennent les données

Le pont fait environ 1 100 lignes de Python avec deux dépendances (pyserial et bleak). Il lit trois sources :

  1. Les limites de forfait, depuis la connexion de Claude Code. Chaque répertoire de configuration de Claude Code (~/.claude, ~/.claude-work, …) contient la connexion d’un compte. Le pont les trouve tous et utilise chaque token pour lire les mêmes limites que celles affichées par l’écran /usage de Claude Code. Il lit seulement le token et ne le rafraîchit jamais, car un rafraîchissement ferait tourner le token et déconnecterait Claude Code.
  2. Les tokens, depuis les transcriptions de Claude Code. Chaque réponse que reçoit Claude Code est écrite dans un fichier JSONL sous projects/, avec son utilisation de tokens et son modèle. Le pont les additionne par jour, supprime les doublons (une session reprise copie les messages précédents dans un nouveau fichier), et les valorise avec la liste de prix de l’API.
  3. Les dépenses des organisations API, depuis l’API Admin Usage and Cost. usage_report/messages donne les tokens par jour et par modèle. cost_report donne la dépense réelle. Les deux nécessitent une clé API Admin (sk-ant-admin01-...).

Deux leçons tirées de son exécution sur de vrais comptes :

L’instantané

Chaque rafraîchissement produit une ligne JSON d’environ 600 octets :

{"v":1,"ts":1792770195,"tz":3600,"acc":[
 {"n":"Personal","p":"Max 20x","k":"sub","ok":1,
  "s":[42,1792778235],"w":[67,1793037195],"x":[["Opus",54,1793037195],["Sonnet",31,1793037195]],
  "td":2840000,"tk":[2310000,1480000,15900000,1120000],"c":84.2,"ct":11.35,
  "d":[1900000,3400000,2600000,4100000,3300000,2670000,2840000],"m":[["Opus",61],["Sonnet",34],["Haiku",5]]}]}

s, w et x sont les limites de session, hebdomadaire et par modèle sous la forme [pourcentage, heure de réinitialisation]. d est le nombre de tokens par jour. ts et tz sont l’horloge du PC et son décalage UTC. Le M5Stack Basic n’a pas d’horloge temps réel ni de base de données de fuseaux horaires, donc l’appareil prend les deux depuis l’instantané et compte les secondes à partir de là. Cela suffit pour « réinitialisation dans 2h 14m » et « mar. 04:00 ».

Se connecter sans configuration

Je ne voulais aucune configuration du tout. Saisir un mot de passe Wi-Fi sur un appareil à trois boutons est désagréable. Enregistrer l’adresse IP du PC sur l’appareil casse dès que vous changez d’ordinateur. L’appareil prend donc en charge deux liaisons, et aucune ne nécessite de réglages.

USB. Branchez le câble. Le pont cherche les ports série dont la puce USB est celle d’un M5Stack (CH9102 ou CP2104). Il ouvre le port sans basculer DTR et RTS, pour que l’ESP32 ne redémarre pas, et attend un message d’accueil. Le firmware envoie {"hello":"m5claude",...} toutes les deux secondes jusqu’à ce que des données arrivent. Si aucun message d’accueil n’arrive dans les quelques secondes, le pont libère le port et le laisse tranquille un moment, pour que les autres cartes ESP32 et les outils de flashage ne soient pas affectés.

Bluetooth LE. Le firmware annonce un service GATT avec deux caractéristiques : une dans laquelle le PC écrit des lignes, et une sur laquelle l’appareil envoie des notifications. Le pont recherche l’UUID du service et se connecte. Il n’y a pas de boîte de dialogue d’appairage Windows, et rien à choisir dans une liste.

Comme n’importe quel ordinateur à portée pourrait trouver l’appareil, chaque nouveau PC est approuvé une fois, sur l’appareil :

L'invite d'approbation : « Nouvel ordinateur, DESKTOP-STUDIO. L'autoriser à envoyer des données d'utilisation ? » avec Refuser sur le bouton A et Autoriser sur le bouton C

L'échange d'appairage : hello depuis l'appareil, le nom et l'id stable du PC depuis le pont, une réponse en attente, l'invite à l'écran, puis ok, une demande de rafraîchissement et les instantanés

Le pont conserve un id aléatoire dans ~/.m5claude/pc_id. L’appareil stocke les ids de jusqu’à quatre PC approuvés dans la NVS. Un PC connu est accepté immédiatement, et maintenir A à l’allumage les oublie tous. Un appareil déjà connecté en USB est ignoré en Bluetooth, pour qu’il ne soit pas invité à approuver deux fois le même PC.

Tant que le pont ne tourne pas, l’appareil affiche quoi faire :

L'écran d'attente : « En attente de votre PC. Lancez m5claude-bridge sur votre ordinateur. Il se connecte automatiquement par USB ou Bluetooth. »

Le firmware

Le firmware est un sketch Arduino compilé avec arduino-cli sur le cœur arduino-esp32 2.0. Il utilise trois bibliothèques :

Le code de l’interface ne dépend pas du matériel. Il dessine dans une cible LovyanGFX et lit les trois boutons. Tout ce qui est spécifique à la carte (l’écran, l’USB, le BLE, la NVS) vit dans le sketch.

Quelques détails qui lui donnent l’air d’un produit plutôt que d’une démo :

Dessiner sans PSRAM, et les traînées diagonales

Une image complète de 320×240 en couleur 16 bits fait 150 Ko. Le plus grand bloc de mémoire libre de l’ESP32, avec le Bluetooth en marche, est plus petit que cela. L’interface est donc dessinée quatre fois par image dans une bande de 320×60 (38 Ko). Chaque passe dessine tout décalé vers le haut de l’offset de la bande, et les parties qui tombent hors de la bande sont découpées.

La première fois que cela a tourné sur la carte, l’écran affichait des traînées diagonales, et les boutons de l’invite d’approbation apparaissaient deux fois, en haut et en bas. La configuration de l’écran était mon premier suspect. Je l’ai réécrite à la main d’après la documentation de M5Stack, et rien n’a changé. La cause était ailleurs :

Avec un seul tampon, la bande suivante est dessinée dans le tampon pendant que le DMA l'envoie encore. Avec deux tampons, l'un est dessiné pendant que l'autre est envoyé, et le CPU attend la fin du transfert avant de réutiliser un tampon

LovyanGFX envoie un sprite à l’écran avec le DMA, en arrière-plan. Ma boucle commençait à dessiner la bande suivante dans le même tampon pendant que la précédente était encore en cours d’envoi, donc l’écran recevait la moitié d’une bande et la moitié de la suivante. Le correctif utilise deux tampons à tour de rôle et attend le transfert précédent avant de pousser :

for (int y = 0, k = 0; y < 240; y += 60, k ^= 1) {
  LGFX_Sprite& band = bands[k];
  band.fillScreen(BG);
  draw_ui(band, /*offset_y=*/y);   // runs while the other buffer is still being sent
  lcd.waitDMA();                    // the other buffer's transfer has finished
  band.pushSprite(&lcd, 0, y);      // starts this buffer's transfer
}
lcd.waitDMA();

Cela coûte un tampon de 38 Ko de plus, sur environ 275 Ko de RAM libre.

Le code, partie par partie

Téléchargez le code avec git clone https://github.com/velxio/m5claude.git, ou sous forme de ZIP depuis le bouton Code du dépôt. Il comporte deux moitiés qui ne partagent que le protocole : bridge/ s’exécute sur le PC, et firmware/ plus src/ s’exécutent sur le M5Stack.

Sur le M5Stack

firmware/m5claude/m5claude.ino : tout ce qui est spécifique à la carte.

src/app/app.cpp : le protocole, indépendant de la liaison.

src/model/ : les données.

src/ui/ : les écrans.

Sur le PC

Le pont se trouve dans bridge/m5claude_bridge/. Ses seules dépendances sont pyserial et bleak. Les appels HTTPS utilisent la bibliothèque standard.

__main__.py : la ligne de commande et la boucle principale.

autostart.py enregistre le pont pour qu’il démarre à l’ouverture de session sans fenêtre : la clé de registre Run avec pythonw sous Windows, un LaunchAgent sous macOS, une unité utilisateur systemd sous Linux.

config.py : les comptes.

sources/ : un fichier par source de données.

pricing.py contient les tarifs catalogue de l’API par famille de modèles. Il estime la valeur de l’utilisation d’un abonnement.

snapshot.py : construit l’instantané.

hub.py conserve l’instantané le plus récent et le fournit à chaque appareil connecté. Une liaison lente ne reçoit que le dernier, jamais un arriéré.

transports/ : un fichier par liaison.

Le README du dépôt propose le même tour d’horizon sous forme de tableaux, ainsi qu’une section de dépannage.

Créez le vôtre

L’ordre que je recommande : concevez les écrans dans Velxio, puis flashez la carte, puis connectez le pont.

1. Exécutez-le et modifiez-le sur le M5Stack Core dans Velxio

Velxio simule le M5Stack Core avec son écran 320×240, les boutons A, B et C et la puce de batterie. Aménager un écran de 2 pouces, c’est beaucoup de petits ajustements (une étiquette deux pixels trop bas, un nombre qui ne rentre pas dans sa carte), et chacun prend quelques secondes dans le navigateur au lieu d’un cycle de flashage.

Le tableau de bord se trouve dans la galerie d’exemples de Velxio, avec les mêmes fichiers sources que le dépôt :

  1. Ouvrez M5Stack Core: Claude usage dashboard (m5claude) et cliquez sur le bouton de lecture. Aucune inscription n’est nécessaire. Il démarre sur les comptes de démonstration de cet article.
  2. Cliquez sur A et C pour choisir un compte et sur B pour parcourir les vues. Le simulateur exécute le firmware plus lentement que la carte, donc pour ouvrir les paramètres, maintenez C pendant quelques secondes.
  3. Pour voir vos propres chiffres, exécutez m5claude-bridge snapshot sur votre PC et collez la ligne qu’il affiche dans le moniteur série. Le premier commentaire du sketch contient un exemple de ligne que vous pouvez modifier.
  4. Modifiez les écrans dans ui.cpp et relancez. Quand ils vous conviennent, flashez la carte.

Deux choses diffèrent de la carte : Velxio n’a pas de Bluetooth, donc cette liaison est omise et le moniteur série est la seule liaison, et le code du haut-parleur utilise les appels du noyau ESP32 Arduino plus récent. Chaque changement est signalé dans le sketch.

Pour démarrer votre propre tableau de bord à partir d’un écran vide, M5Stack Core: Hello LCD + Buttons est l’exemple le plus simple. Il utilise M5GFX de M5Stack, qui est construit sur LovyanGFX et partage son API de dessin, donc le code passe de l’un à l’autre.

2. Flashez le firmware

git clone https://github.com/velxio/m5claude.git && cd m5claude
arduino-cli core install esp32:esp32
arduino-cli lib install LovyanGFX NimBLE-Arduino ArduinoJson

./firmware/build.sh /dev/ttyUSB0      # Linux / macOS
.\firmware\build.ps1 -Upload          # Windows, finds the COM port by itself

Les scripts compilent pour le M5Stack Core avec un schéma de partitions qui laisse de la place pour une grande application (PartitionScheme=no_ota). Le firmware fait environ 820 Ko. Deux réglages m’ont posé problème :

3. Lancez le pont

pip install -e bridge                # from the repository root; installs pyserial and bleak
m5claude-bridge accounts             # which accounts it found
m5claude-bridge autostart on         # start now, and at every login

autostart on enregistre le pont pour qu’il démarre à votre connexion, sans fenêtre. Sous Windows, il ajoute une valeur sous la clé de registre Run de l’utilisateur qui lance pythonw. Sous macOS, il installe un LaunchAgent, et sous Linux un service utilisateur systemd. autostart status indique s’il est en cours d’exécution et les dernières lignes de son journal, dans ~/.m5claude/bridge.log. Un seul pont s’exécute à la fois : un second entrerait en concurrence pour le port USB et la connexion Bluetooth, il se termine donc avec un message. Lancer m5claude-bridge seul le maintient au premier plan, avec le journal dans le terminal.

Les comptes Pro et Max sont trouvés à partir des répertoires de configuration de Claude Code. Pour ajouter un second abonnement, connectez-le sous son propre répertoire :

$env:CLAUDE_CONFIG_DIR = "$HOME\.claude-work"; claude    # then /login

Les organisations API nécessitent une clé Admin API, depuis la Claude Console sous Settings → Admin keys :

m5claude-bridge add-api "Acme API" --key-env ACME_ADMIN_KEY

4. Connectez

Branchez le câble USB, ou laissez l’appareil sur le bureau et laissez le Bluetooth le trouver. La première fois en Bluetooth, appuyez sur C sur l’appareil pour approuver le PC. Les données apparaissent en quelques secondes.

Mises en garde

Et ensuite

Le code est sur github.com/velxio/m5claude. Les issues et les pull requests sont les bienvenues.

Merci à M5Stack pour une carte prête à l’emploi dès la sortie de la boîte, et aux auteurs de LovyanGFX, NimBLE-Arduino, ArduinoJson et bleak.

Les liens vers la boutique M5Stack sur cette page sont des liens d’affiliation : si vous achetez par leur intermédiaire, Velxio perçoit une petite commission sans coût supplémentaire pour vous, et cela aide à garder le simulateur gratuit.


Partager sur :
David Montero

Écrit par

David Montero

Creator of Velxio, the open-source circuit and Arduino simulator.

GitHub velxio.dev

Articles liés


Article précédent
Cute Desktop Robot — un visage à l'écoute sur l'ESP-VoCat, avec son émulateur dans votre navigateur
Article suivant
Raspberry Pi 4 et 5 dans le navigateur — mode basique et mode Linux, étape par étape