L'éditeur visuel LVGL en glisser-déposer.

Comment PicoPixel fonctionne

PicoPixel transforme le développement LVGL d'un processus centré sur le code en un flux de travail visuel en glisser-déposer. Passez d'un canevas vierge à une interface embarquée prête pour la production en quelques minutes — concevez visuellement, prévisualisez avec un simulateur LVGL en direct et exportez du C code propre. Aucune installation requise.

Commencez gratuitement !

De la conception à l'appareil en 6 étapes

01

Concevez votre interface

Ouvrez PicoPixel dans votre navigateur — aucun téléchargement, aucune installation. Faites glisser des widgets LVGL depuis la palette sur un canevas au pixel près et stylisez-les visuellement.

  • • Boutons, libellés, curseurs, interrupteurs, arcs, graphiques, listes déroulantes, molettes, cases à cocher, zones de texte, vues à onglets, conteneurs et images
  • • Définissez la résolution d'affichage cible pour correspondre à votre matériel
  • • Configurez les couleurs, bordures, marges intérieures, polices, opacité, dégradés et ombres
  • • Utilisez les outils d'alignement et de distribution pour positionner les widgets avec précision
  • • Organisez les écrans et les couches pour les interfaces multi-pages
02

Connectez les interactions

Utilisez l'Éditeur visuel d'Événements pour connecter les actions des widgets sans écrire une seule ligne de C code. PicoPixel génère automatiquement les callbacks d'événements LVGL.

  • • Appui sur bouton → naviguer vers un autre écran
  • • Changement de valeur du curseur → mettre à jour un libellé
  • • Basculement de case à cocher → afficher ou masquer un panneau
  • • Sélection de liste déroulante → changer un style ou déclencher une action
  • • Faites glisser des actions sur les widgets — aucun code de callback requis
03

Prévisualisez dans le simulateur en direct

PicoPixel compile LVGL en WebAssembly et l'exécute directement dans votre navigateur. La prévisualisation est le véritable moteur de rendu LVGL — pas une maquette.

  • • Voyez exactement comment votre interface se rend sur le matériel
  • • Testez les interactions tactiles, le défilement et les animations
  • • Les superpositions d'interaction montrent ce qui peut être touché et défilé
  • • Partagez un lien du simulateur avec votre équipe ou client — aucun environnement de développement requis
04

Exportez du code prêt pour la production

Téléchargez votre projet sous forme de fichiers source LVGL C propres. La sortie utilise des appels standard à l'API LVGL sans dépendances propriétaires — intégrez-le dans n'importe quel projet LVGL.

  • • Définitions de widgets et code de mise en page
  • • Déclarations de style
  • • Liaisons des gestionnaires d'événements
  • • Références de polices et de ressources d'images
  • • API standard LVGL 8.x — aucune bibliothèque d'exécution PicoPixel
05

Intégrez et flashez

Ajoutez les fichiers exportés à votre projet ESP-IDF, Arduino ou PlatformIO. Compilez, flashez, et l'interface sur votre appareil correspond au simulateur pixel par pixel.

  • • Fonctionne avec ESP32, STM32, Arduino, Raspberry Pi Pico et toute plateforme compatible LVGL
  • • Incluez l'en-tête UI et appelez ui_init() après la configuration du pilote d'affichage
  • • Aucune modification du système de compilation nécessaire pour la plupart des configurations
  • • Ou confiez le zip à un assistant de code IA et laissez-le gérer l'intégration
06

Collaborez et itérez

Invitez des membres de l'équipe à votre projet. Tout le monde édite le même canevas en temps réel. Utilisez le contrôle de version intégré pour suivre les changements et revenir en arrière si nécessaire.

  • • Édition collaborative en temps réel — curseurs en direct, retours, annotations
  • • Contrôle de version intégré avec historique granulaire de session
  • • Revenez à n'importe quel état précédent et comparez les versions
  • • Partagez des liens du simulateur pour les revues des parties prenantes

Pourquoi le glisser-déposer pour LVGL ?

Construire des interfaces embarquées avec LVGL signifie traditionnellement écrire du C code ligne par ligne — positionner les widgets avec des coordonnées en pixels, appliquer des styles via des appels de fonctions et recompiler après chaque modification. Cela fonctionne, mais la boucle de rétroaction est lente et le code est difficile à visualiser.

L'approche glisser-déposer de PicoPixel remplace ce cycle par un éditeur visuel où vous voyez le résultat instantanément. Faites glisser un bouton sur le canevas, redimensionnez-le, changez sa couleur, ajoutez un libellé — et le simulateur LVGL en direct montre exactement comment il apparaîtra sur votre matériel cible. Quand vous avez terminé, exportez du C code propre qui compile sur ESP32, STM32, Arduino et toute plateforme compatible LVGL.

Le flux de travail visuel est plus rapide pour le prototypage, plus facile pour les équipes (designers et ingénieurs peuvent collaborer en temps réel) et produit le même code LVGL de qualité production que vous écririez à la main. Découvrez toutes les fonctionnalités de PicoPixel ou lisez la comparaison détaillée avec d'autres éditeurs LVGL.

Questions fréquentes

Dois-je installer quelque chose pour utiliser PicoPixel ?

Non. PicoPixel fonctionne entièrement dans votre navigateur. Ouvrez l'URL de l'éditeur, connectez-vous et commencez à concevoir. Il n'y a pas d'application de bureau, pas de plugin et pas de SDK à installer.

Quels widgets LVGL puis-je utiliser dans l'éditeur ?

PicoPixel prend en charge l'ensemble principal de widgets LVGL, y compris les boutons, libellés, curseurs, interrupteurs, listes déroulantes, molettes, arcs, barres, graphiques, images, cases à cocher, zones de texte, vues à onglets, conteneurs et plus encore. Nous ajoutons continuellement le support de widgets supplémentaires.

Quelle est la précision du simulateur en direct ?

Le simulateur exécute le véritable moteur de rendu LVGL compilé en WebAssembly — ce n'est pas une maquette ni une approximation CSS. Ce que vous voyez dans la prévisualisation correspond à votre matériel cible pixel par pixel.

Quel format utilise le code exporté ?

PicoPixel exporte un fichier zip contenant du C code LVGL propre et lisible (fichiers .c et .h). La sortie comprend la création de widgets, le style, la mise en page et la configuration des gestionnaires d'événements — le tout utilisant des appels standard à l'API LVGL sans dépendances propriétaires.

Puis-je utiliser le code exporté avec ESP-IDF, Arduino ou PlatformIO ?

Oui. Le code exporté utilise des appels standard à l'API LVGL, il fonctionne donc avec tout système de compilation prenant en charge LVGL — y compris ESP-IDF, Arduino IDE et PlatformIO. Ajoutez simplement les fichiers à votre projet et appelez ui_init() après la configuration de votre pilote d'affichage. Pour les détails spécifiques à chaque plateforme, consultez notre guide ESP32.

PicoPixel est-il gratuit ?

Oui. PicoPixel est gratuit — y compris pour les projets commerciaux. Aucune carte de crédit requise. À mesure que la plateforme se développe et que davantage d'utilisateurs s'inscrivent, des plans payants pourraient être introduits pour couvrir les coûts de stockage et de service. Il y aura toujours un niveau gratuit.

Concevez votre première interface LVGL — gratuitement

Ouvrez PicoPixel dans votre navigateur, glissez-déposez des widgets LVGL sur le canevas et exportez du C code prêt pour la production en quelques minutes. Aucune installation. Aucune carte de crédit.

Commencez gratuitement !

Gratuit — y compris pour les projets commerciaux. Lire la FAQ · Nous contacter