Installation

Installation

Librairie firmware + éditeur web (aucun npm requis).

Firmware library + web editor (no npm required).

Arduino IDE

Dossier du repo → Documents/Arduino/libraries/Lucarne

Repo folder → Documents/Arduino/libraries/Lucarne

PlatformIO

lib/Lucarne/ ouor lib_deps

Lucarne Studio

Servez editor/ (Live Server, python -m http.server…) et ouvrez index.html. Le projet se sauvegarde dans le navigateur ; Save / Load pour un fichier .lucarne.json.

Serve editor/ (Live Server, python -m http.server…) and open index.html. Project auto-saves in the browser; Save / Load for a .lucarne.json file.

Sans Studio (code direct)

Without Studio (code only)

#include <Lucarne.h>
using namespace lucarne;
ST7789 display;

void setup() {
  DisplayPins pins;
  pins.cs = 1; pins.dc = 2; pins.rst = 3;
  pins.mosi = 4; pins.sclk = 5;
  DisplayOptions opt;
  opt.panelWidth = 240; opt.panelHeight = 280;
  opt.spiMode = 3; opt.invert = true;
  BufferOptions buf; buf.mode = BufferMode::Full;
  display.begin(pins, opt, buf);
  display.fillScreen(0);
  display.print("Hello");
  display.display();
}

Lucarne Studio

Éditeur visuel : blueprint → designer → simulate → export.

Visual editor: blueprint → designer → simulate → export.

1. Blueprint Ajoutez des écrans (+ Screen). Reliez les entrées de menu d'un écran à un autre en tirant un lien. Double-clic = ouvrir le designer. Add screens (+ Screen). Drag menu item links between screens. Double-click = open designer.
2. Designer Placez widgets (palette à gauche), déplacez, redimensionnez. Templates prêts à l'emploi. Calques = ordre d'affichage. Place widgets (left palette), move, resize. Ready-made templates. Layers = draw order.
3. Onglets droits Right tabs Theme couleurs · Fonts polices · Assets images/icônes · Data clés (temp, wifi…) Theme colors · Fonts · Assets images/icons · Data keys (temp, wifi…)
4. Simulate Flèches ou pad = menu. Clic sur boutons/switches. Teste les transitions. Arrows or pad = menu. Click buttons/switches. Tests transitions.

Barre du haut

Top bar

Export Arduino

Arduino export

Studio génère le UI ; vous gardez le câblage SPI dans le .ino.

Studio generates the UI; you keep SPI wiring in the .ino.

1. Export .h dans Studio → copier ou télécharger. in Studio → copy or download.
2. Projet.h (+ éventuellement Projet_fonts.h, Projet_images.h, Projet_icons.h) à côté du .ino.Projet.h (+ optional Projet_fonts.h, Projet_images.h, Projet_icons.h) next to .ino.
3. Câblez le display dans setup() — l'export ne connaît pas vos broches.Wire the display in setup() — export does not know your pins.

#include <Lucarne.h>
#include "Projet.h"
using namespace lucarne;
ST7789 display;
UI ui(display);

void setup() {
  // vos broches SPI ici
  display.begin(pins, options, buffer);
  projet::build(ui);
  projet::attachInput(ui);
  ui.begin();
}

void loop() {
  projet::update();
  ui.setFloat("temp", readSensor());
  ui.update();
  switch (ui.pollMenuAction()) {
    case projet::ACTION_OPEN_SETTINGS: break;
  }
}

Entrées (menu sur un écran)

Input (screen with menu)

Inspecteur projet : Buttons (haut/bas/OK/retour), Encoder (A/B/btn), ou Touch → vous appelez projet::input.feed(x,y,pressed) au lieu de projet::update().

Project inspector: Buttons (up/down/OK/back), Encoder (A/B/btn), or Touch → call projet::input.feed(x,y,pressed) instead of projet::update().

Callbacks menu / bouton

Menu / button callbacks

Dans Studio, action « Callback » + un ID → constante projet::ACTION_MON_ID dans Projet.h. Lisez-la dans loop() avec ui.pollMenuAction().

In Studio, action « Callback » + an ID → projet::ACTION_MY_ID in Projet.h. Read it in loop() with ui.pollMenuAction().

Widgets

Ajoutez-les dans le Designer ou en C++. Liez les valeurs via l'onglet Data (ui.setFloat("temp", …)).

Add in Designer or C++. Bind values via Data tab (ui.setFloat("temp", …)).

Label(x, y, "Hello", TextAlign::Center);

Metric(x,y,w,h, "Temp", "temp", "C");

Bar(x,y,w,h, "level", 0, 100);

Icon(x, y, "chart", 1);

Image(x,y,w,h, &Img_photo);

menu.addItem("Home", "home", &screen);
menu.addCallbackItem("Off", "power", ACTION_ID);

Button(x,y,w,h, "Start");
btn.setNavigate(&screen);
btn.setCallback(ACTION_ID);

Switch(x,y,w,h, "Wi-Fi", "wifi");

Slider(x,y,w,h, "brightness", 0, 100);

chart.setKey(0, "temp");
chart.setKey(1, "hum");

Gauge(x,y,w,h, "Speed", "speed", 0, 100);

list.addItem("Settings");

Icônes intégrées

Built-in icons

home settings wifi bluetooth battery thermo drop fan bell chart power sun lock check cross arrow_up arrow_down arrow_left arrow_right play pause plus minus

Transitions

SlideLeft, Fade, Push… — nécessitent BufferMode::Full. back() inverse les slides. Splash : écran START + durée dans l'inspecteur nœud.

SlideLeft, Fade, Push… — need BufferMode::Full. back() reverses slides. Splash: START screen + duration in node inspector.

Câblage

Wiring

Écran SPI + entrées optionnelles.

SPI display + optional inputs.

Écran SPI

SPI display

options.spiMode = 3;    // souvent requis ST7789
options.invert = true;  // couleurs correctes

Boutons

Buttons

Vers GND, pull-up interne. Haut/bas = menu, OK = valider, retour = back.

To GND, internal pull-up. Up/down = menu, OK = select, back = back.

Encodeur

Encoder

Tourner = haut/bas. Clic court = OK. Clic long = back.

Rotate = up/down. Short click = OK. Long press = back.

Tactile

Touch

Votre pilote appelle touch.feed(x, y, pressed). Menu = sélection ; hors menu = boutons/switches.

Your driver calls touch.feed(x, y, pressed). Menu = select; elsewhere = buttons/switches.

Live Preview

Voir le design sur la vraie carte en USB — sans reflasher à chaque changement de widget.

See the design on real hardware over USB — no reflash per widget change.

1. FlasherFlash examples/LucarnePreview/LucarnePreview.ino — ESP32-S3 : USB CDC On Boot activé. Pas de Serial.print. — ESP32-S3: USB CDC On Boot on. No Serial.print.
2. ConnecterConnect

   

   Chrome/Edge : bouton Live dans la barre du haut → choisir le port. Fermez le moniteur série Arduino. Chrome/Edge: Live button in the top bar → pick the port. Close the Arduino serial monitor.
3. Designer ou SimulateDesigner or Simulate = ce qui s'affiche sur l'écran. = what appears on the panel.

Polices & exemples

Fonts & examples

Polices

Fonts

Inclus : LucarneFontBody et LucarneFontTitle (Fira Sans, anti-aliasé). Studio → Fonts : Google ou TTF → assigner dans Theme → export Projet_fonts.h.

Included: LucarneFontBody and LucarneFontTitle (Fira Sans, anti-aliased). Studio → Fonts: Google or TTF → assign in Theme → exports Projet_fonts.h.

Exemples Arduino

Arduino examples

API

Référence C++ Lucarne : namespace lucarne, classes UI/display, widgets, export projet.

Lucarne C++ reference: lucarne namespace, UI/display classes, widgets, projet export.

Namespace lucarne

lucarne namespace

Classe UI

UI class

Display

Display

Store & Screen

Store & Screen

Export projet

projet export

Entrées

Input

Widgets

Widgets

Icônes

Icons

Arduino (hors Lucarne)

Arduino (not Lucarne)

FAQ & remerciements

FAQ & acknowledgements

Réponses aux questions fréquentes et crédits des ressources utilisées.

Answers to common questions and credits for bundled resources.

Remerciements & licences

Acknowledgements & licenses

• Fira Sans Police par défaut (corps et titre). SIL Open Font License 1.1 — Mozilla Foundation. Default body and title font. SIL Open Font License 1.1 — Mozilla Foundation.
• Tabler Icons Pack d'icônes optionnel dans Studio. MIT License — Tabler. Optional icon pack in Studio. MIT License — Tabler.
• Streamline & Glyphs packs Icônes couleur 32×32 embarquées dans l'éditeur. Voir les licences des packs respectifs dans le dépôt distributeur. 32×32 color icons embedded in the editor. See respective pack licenses in the distribution repo.
• Arduino & ESP32 Toolchains et cores utilisés pour compiler les exemples — non inclus dans Lucarne. Toolchains and cores used to build examples — not bundled with Lucarne.

Lucarne est un projet open source. Contributions et retours bienvenus sur le dépôt GitHub.

Lucarne is an open source project. Contributions and feedback welcome on the GitHub repository.