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 · Hardware broches SPI/SD/entrées · Assets images/icônes · Data clés (temp, wifi…) Theme colors · Fonts · Hardware SPI/SD/input pins · 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 et Projet_setup.h (broches, SD). Copiez les binaires SD sur la carte.

Studio generates the UI and Projet_setup.h (pins, SD). Copy SD binaries to the card.

1. Export dans Studio → onglets Headers et Files (SD). in Studio → Headers and Files (SD) tabs.
2. Headers : Projet.h, Projet_setup.h, éventuellement Projet_fonts.h, Projet_images.h, Projet_icons.h à côté du .ino.Headers: Projet.h, Projet_setup.h, optional Projet_fonts.h, Projet_images.h, Projet_icons.h next to .ino.
3. Files (SD) : copiez assets/*.rgb565 sur carte FAT32 (voir SD_MANIFEST.txt).Files (SD): copy assets/*.rgb565 to FAT32 card (see SD_MANIFEST.txt).
4. Broches SPI / SD : onglet Studio Hardware → réglages dans Projet_setup.h.SPI / SD pins: Studio Hardware tab → settings in Projet_setup.h.

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

void setup() {
  BufferOptions buffer;
  buffer.mode = BufferMode::Full;
  projet::initSpiBus();
  display.begin(projet::displayPins(), projet::displayOptions(), buffer, &SPI);
  projet::mountSdCard();
  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)

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

Studio Hardware tab → Navigation input: 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, carte SD optionnelle, entrées navigation.

SPI display, optional SD card, navigation inputs.

Écran SPI

SPI display

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

Carte SD (images)

SD card (images)

Bus SPI partagé : MOSI, MISO, SCLK communs ; CS séparés pour écran et SD. Montez la SD avant ui.begin(). Copiez les fichiers export Files (SD) sur la carte (FAT32).

Shared SPI bus: common MOSI, MISO, SCLK; separate CS for display and SD. Mount SD before ui.begin(). Copy Files (SD) export onto the card (FAT32).

projet::initSpiBus();
display.begin(projet::displayPins(), projet::displayOptions(), buffer, &SPI);
projet::mountSdCard();

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.