8x32 PI : vitesse de lecture, QR code et affiche, sens de l'image sur la vitrine
- Vitesse de lecture : réglage VITESSE du lecteur et menu « Vitesse » sur la page web (×0,25 à ×2, gardé dans .vitesse.txt du dossier des animations). - QR code d'accès à la page web et affiche A5 (outils/generer_qrcode.py → qrcode/) : une coulée inspirée de « cascade » en haut, une partie de « tetris » en bas, couleurs tirées des animations de l'équipe (qrcode/sources/), titre en pixels de couleur. - Matrice de la vitrine : image retournée d'un demi-tour (INVERSER_X et INVERSER_Y) et nouveau réglage DECALAGE_X / DECALAGE_Y (ici 1 pixel vers la droite). - Doc : README, INTERFACE_WEB.md et CLAUDE.md à jour. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bach
@@ -0,0 +1,328 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
=============================================================================
|
||||
QR CODE ET AFFICHE D'ACCÈS À L'INTERFACE WEB
|
||||
Workshop « Vitrine pixels »
|
||||
=============================================================================
|
||||
|
||||
Fabrique, dans le dossier « qrcode » :
|
||||
- qrcode_interface_web.png : le QR code seul (pour un message, un diaporama) ;
|
||||
- qrcode_interface_web.svg : le même, en vectoriel (pour l'imprimer en grand) ;
|
||||
- affiche_interface_web.svg : une affiche A5 à imprimer et à poser à côté
|
||||
de la vitrine ou dans l'atelier, avec deux
|
||||
compositions inspirées des animations de
|
||||
l'équipe (qrcode/sources : « cascade », « tetris ») ;
|
||||
- affiche_interface_web.pdf : la même, prête à imprimer (si rsvg-convert
|
||||
est installé : paquet « librsvg2-bin »).
|
||||
|
||||
On scanne le QR code avec l'appareil photo du téléphone : la page web de la
|
||||
vitrine s'ouvre. ⚠️ Le téléphone doit être connecté au Wi-Fi de l'école
|
||||
(la page n'est pas sur Internet).
|
||||
|
||||
L'adresse du Pi peut changer (voir INTERFACE_WEB.md) : il suffit alors de
|
||||
relancer ce programme avec la nouvelle adresse :
|
||||
python3 outils/generer_qrcode.py http://172.16.50.27
|
||||
|
||||
Il faut le logiciel « qrencode » :
|
||||
sudo apt install qrencode (Debian, Ubuntu, Raspberry Pi OS)
|
||||
sudo pacman -S qrencode (Arch)
|
||||
brew install qrencode (macOS)
|
||||
"""
|
||||
|
||||
import os
|
||||
import shutil
|
||||
import subprocess
|
||||
import sys
|
||||
|
||||
ICI = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
|
||||
SORTIE = os.path.join(ICI, "qrcode")
|
||||
ADRESSE_PAR_DEFAUT = "http://172.16.50.27"
|
||||
|
||||
|
||||
def modules_du_qrcode(texte):
|
||||
"""Demande à qrencode le QR code en texte : une ligne par rangée,
|
||||
« # » = case noire. Renvoie une liste de lignes de booléens."""
|
||||
# -t ASCII : dessin en caractères (2 caractères par case) ; -m 0 : sans marge ;
|
||||
# -l M : correction d'erreur moyenne (le code reste lisible s'il est un peu abîmé).
|
||||
resultat = subprocess.run(["qrencode", "-t", "ASCII", "-m", "0", "-l", "M", texte],
|
||||
capture_output=True, text=True, check=True)
|
||||
lignes = [l for l in resultat.stdout.splitlines() if l.strip()]
|
||||
return [[ligne[i] == "#" for i in range(0, len(ligne), 2)] for ligne in lignes]
|
||||
|
||||
|
||||
def cases_svg(modules, x0, y0, taille):
|
||||
"""Les cases noires du QR code, en rectangles SVG."""
|
||||
return "".join(
|
||||
f'<rect x="{x0 + x * taille:.2f}" y="{y0 + y * taille:.2f}" '
|
||||
f'width="{taille:.2f}" height="{taille:.2f}"/>'
|
||||
for y, ligne in enumerate(modules) for x, noir in enumerate(ligne) if noir)
|
||||
|
||||
|
||||
def qrcode_svg(modules, marge=4):
|
||||
n = len(modules) + 2 * marge
|
||||
return (f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {n} {n}" '
|
||||
f'width="{n * 10}" height="{n * 10}" shape-rendering="crispEdges">'
|
||||
f'<rect width="{n}" height="{n}" fill="#fff"/>'
|
||||
f'<g fill="#000">{cases_svg(modules, marge, marge, 1)}</g></svg>\n')
|
||||
|
||||
|
||||
# =============================================================================
|
||||
# L'AFFICHE : deux compositions inspirées des animations de l'équipe
|
||||
# =============================================================================
|
||||
#
|
||||
# En haut, une coulée inspirée de « cascade » : un liquide bleu glacier qui
|
||||
# déborde du haut de la page, en strates séparées par de l'écume, avec des
|
||||
# stalactites qui gouttent. En bas, une partie de « tetris » : des pièces de
|
||||
# couleurs vives empilées sur toute la largeur, deux pièces encore en chute.
|
||||
#
|
||||
# Les deux compositions sont dessinées sur une grille de « LED » de 48 colonnes,
|
||||
# et leurs couleurs sont prises dans les fichiers de l'équipe (qrcode/sources).
|
||||
# Le hasard est « graine fixe » : on obtient la même affiche à chaque fois.
|
||||
|
||||
import random
|
||||
|
||||
SOURCES = os.path.join(SORTIE, "sources")
|
||||
COLONNES = 48 # largeur de la grille de pixels de l'affiche
|
||||
PAS = 148 / COLONNES # taille d'un pixel, en mm (≈ 3,1)
|
||||
REMPLISSAGE = 0.88 # un pixel = un carré un peu plus petit que le pas
|
||||
|
||||
BLEUS_CASCADE = [(170, 199, 254), (119, 179, 254), (118, 218, 254)]
|
||||
COULEURS_TETRIS = [(255, 38, 38), (255, 127, 0), (255, 214, 0), (0, 214, 60),
|
||||
(0, 220, 230), (255, 0, 255)]
|
||||
|
||||
|
||||
def couleurs_de(chemin, garder):
|
||||
"""Les couleurs d'une animation de l'équipe, triées par fréquence,
|
||||
filtrées par la fonction « garder ». [] si le fichier est absent."""
|
||||
try:
|
||||
sys.path.insert(0, ICI)
|
||||
import lecteur # noqa: E402
|
||||
compte = {}
|
||||
for image, _ in lecteur.charger(chemin):
|
||||
for c in lecteur.matrice.pixels_de(image):
|
||||
compte[c] = compte.get(c, 0) + 1
|
||||
return [c for c, _ in sorted(compte.items(), key=lambda kv: -kv[1]) if garder(c)]
|
||||
except Exception:
|
||||
return []
|
||||
|
||||
|
||||
def hexa(c):
|
||||
return f"#{c[0]:02x}{c[1]:02x}{c[2]:02x}"
|
||||
|
||||
|
||||
def pixel(x, y, couleur, y0=0.0):
|
||||
"""Un pixel de la grille de l'affiche, en colonne x, rangée y (depuis y0 mm)."""
|
||||
marge = PAS * (1 - REMPLISSAGE) / 2
|
||||
return (f'<rect x="{x * PAS + marge:.2f}" y="{y0 + y * PAS + marge:.2f}" '
|
||||
f'width="{PAS * REMPLISSAGE:.2f}" height="{PAS * REMPLISSAGE:.2f}" rx="0.35" '
|
||||
f'fill="{hexa(couleur) if isinstance(couleur, tuple) else couleur}"/>')
|
||||
|
||||
|
||||
def composition_cascade(bleus):
|
||||
"""Le liquide qui coule du haut de la page (sur fond blanc)."""
|
||||
import math
|
||||
hasard = random.Random(11)
|
||||
clair, moyen, vif = (bleus + BLEUS_CASCADE)[:3]
|
||||
cases = {}
|
||||
# Profondeur du liquide dans chaque colonne : une ondulation lente.
|
||||
profondeur = [int(5.2 + 1.6 * math.sin(x / 6.0) + 0.9 * math.sin(x / 2.7 + 2))
|
||||
for x in range(COLONNES)]
|
||||
for x in range(COLONNES):
|
||||
for y in range(profondeur[x] + 1):
|
||||
distance = profondeur[x] - y # distance au bord du liquide
|
||||
# Deux traits d'écume blancs (des « trous ») qui suivent le bord,
|
||||
# interrompus de temps en temps, comme dans l'animation.
|
||||
if distance in (2, 5) and hasard.random() < 0.8:
|
||||
continue
|
||||
cases[(x, y)] = clair if distance <= 1 else moyen if distance <= 4 else vif
|
||||
# Les coulures : des filets de 1 ou 2 pixels de large, terminés par une goutte.
|
||||
x = hasard.randint(0, 2)
|
||||
while x < COLONNES:
|
||||
largeur = hasard.choice([1, 1, 2])
|
||||
longueur = hasard.choice([1, 2, 2, 3, 4, 5])
|
||||
haut = max(profondeur[min(x + i, COLONNES - 1)] for i in range(largeur)) + 1
|
||||
for i in range(largeur):
|
||||
for y in range(haut, haut + longueur):
|
||||
cases[(x + i, y)] = clair
|
||||
if longueur >= 3: # la goutte, plus large, en bas
|
||||
for i in range(-1, largeur + 1):
|
||||
cases[(x + i, haut + longueur)] = clair
|
||||
for i in range(largeur):
|
||||
cases[(x + i, haut + longueur + 1)] = clair
|
||||
if hasard.random() < 0.35: # une goutte déjà détachée
|
||||
cases[(x, haut + longueur + hasard.randint(3, 4))] = moyen
|
||||
x += largeur + hasard.randint(2, 5)
|
||||
return "".join(pixel(x, y, c) for (x, y), c in cases.items() if 0 <= x < COLONNES)
|
||||
|
||||
|
||||
PIECES = { # les 7 pièces de Tetris, (colonne, rangée) de chaque carré
|
||||
"I": [(0, 0), (1, 0), (2, 0), (3, 0)], "O": [(0, 0), (1, 0), (0, 1), (1, 1)],
|
||||
"T": [(0, 0), (1, 0), (2, 0), (1, 1)], "S": [(1, 0), (2, 0), (0, 1), (1, 1)],
|
||||
"Z": [(0, 0), (1, 0), (1, 1), (2, 1)], "J": [(0, 0), (0, 1), (1, 1), (2, 1)],
|
||||
"L": [(2, 0), (0, 1), (1, 1), (2, 1)],
|
||||
}
|
||||
|
||||
|
||||
def tourner(cases, fois):
|
||||
for _ in range(fois):
|
||||
cases = [(-y, x) for x, y in cases]
|
||||
mx, my = min(x for x, _ in cases), min(y for _, y in cases)
|
||||
return [(x - mx, y - my) for x, y in cases]
|
||||
|
||||
|
||||
def bloc(x, y, couleur, y0):
|
||||
"""Un carré de Tetris : la couleur, avec un petit reflet clair en haut à gauche."""
|
||||
clair = tuple(int(c + (255 - c) * 0.55) for c in couleur)
|
||||
marge = PAS * (1 - REMPLISSAGE) / 2
|
||||
cote = PAS * REMPLISSAGE
|
||||
gx, gy = x * PAS + marge, y0 + y * PAS + marge
|
||||
return (f'<rect x="{gx:.2f}" y="{gy:.2f}" width="{cote:.2f}" height="{cote:.2f}" '
|
||||
f'rx="0.3" fill="{hexa(couleur)}"/>'
|
||||
f'<rect x="{gx + cote * 0.18:.2f}" y="{gy + cote * 0.18:.2f}" width="{cote * 0.28:.2f}" '
|
||||
f'height="{cote * 0.28:.2f}" fill="{hexa(clair)}"/>')
|
||||
|
||||
|
||||
def composition_tetris(couleurs, y_bas):
|
||||
"""Une partie de Tetris sur toute la largeur, le bas de la pile en y_bas (mm)."""
|
||||
hasard = random.Random(5)
|
||||
hauteur_max = 7
|
||||
plateau = {} # (x, y) → couleur ; y = 0 en bas
|
||||
|
||||
def poser(forme, x0, y):
|
||||
return [(x0 + x, y + dy) for x, dy in forme]
|
||||
|
||||
def atterrissage(forme, x0):
|
||||
y = hauteur_max + 4
|
||||
while y > 0 and all(c not in plateau for c in poser(forme, x0, y - 1)):
|
||||
y -= 1
|
||||
return y
|
||||
|
||||
for _ in range(400):
|
||||
forme = tourner(PIECES[hasard.choice(list(PIECES))], hasard.randint(0, 3))
|
||||
forme = [(x, max(y for _, y in forme) - y) for x, y in forme] # y vers le haut
|
||||
largeur = max(x for x, _ in forme) + 1
|
||||
essais = []
|
||||
for x0 in range(COLONNES - largeur + 1):
|
||||
y = atterrissage(forme, x0)
|
||||
cases = poser(forme, x0, y)
|
||||
# Les trous laissés sous la pièce (un bon joueur les évite).
|
||||
trous = sum(1 for (cx, cy) in cases
|
||||
if cy > 0 and (cx, cy - 1) not in plateau and (cx, cy - 1) not in cases)
|
||||
essais.append((y + 3 * trous + hasard.random() * 1.5, x0, cases))
|
||||
_, x0, cases = min(essais)
|
||||
# L'horizon reste dentelé : plus haut au centre-gauche, plus bas ailleurs.
|
||||
limite = hauteur_max - (2 if (x0 // 6) % 3 == 1 else 0)
|
||||
if max(cy for _, cy in cases) >= limite:
|
||||
continue
|
||||
# Une couleur différente de celles des pièces qui la touchent.
|
||||
voisines = {plateau[(cx + dx, cy + dy)] for cx, cy in cases
|
||||
for dx, dy in ((1, 0), (-1, 0), (0, 1), (0, -1))
|
||||
if (cx + dx, cy + dy) in plateau}
|
||||
libres = [c for c in couleurs if c not in voisines] or couleurs
|
||||
couleur = hasard.choice(libres)
|
||||
for c in cases:
|
||||
plateau[c] = couleur
|
||||
|
||||
morceaux = [bloc(x, -y - 1, c, y_bas) for (x, y), c in plateau.items()]
|
||||
# Deux pièces encore en train de tomber, au-dessus de la pile.
|
||||
sommet = max(y for _, y in plateau) + 1
|
||||
for nom, x0, au_dessus, tour, couleur in (("T", 4, 3, 2, couleurs[0]),
|
||||
("L", 41, 4, 1, couleurs[-1])):
|
||||
for x, y in tourner(PIECES[nom], tour):
|
||||
morceaux.append(bloc(x0 + x, -(sommet + au_dessus) + y, couleur, y_bas))
|
||||
return "".join(morceaux)
|
||||
|
||||
|
||||
def titre_en_pixels(texte, y0, taille, couleurs, depart=0):
|
||||
"""Écrit un texte avec la police 5 × 7 des exemples, centré,
|
||||
une couleur par lettre (on fait le tour de la liste « couleurs »)."""
|
||||
sys.path.insert(0, os.path.join(ICI, "outils"))
|
||||
from generer_exemples import POLICE # noqa: E402
|
||||
largeur = sum(len(POLICE[c][0]) + 1 for c in texte) - 1
|
||||
x = (148 - largeur * taille) / 2
|
||||
morceaux, n = [], depart
|
||||
for c in texte:
|
||||
couleur = hexa(couleurs[n % len(couleurs)])
|
||||
if c != " ":
|
||||
n += 1
|
||||
for ligne, motif in enumerate(POLICE[c]):
|
||||
for dx, p in enumerate(motif):
|
||||
if p == "#":
|
||||
morceaux.append(f'<rect x="{x + dx * taille:.2f}" y="{y0 + ligne * taille:.2f}" '
|
||||
f'width="{taille * 0.88:.2f}" height="{taille * 0.88:.2f}" '
|
||||
f'rx="0.2" fill="{couleur}"/>')
|
||||
x += (len(POLICE[c][0]) + 1) * taille
|
||||
return "".join(morceaux)
|
||||
|
||||
|
||||
def affiche_svg(modules, adresse):
|
||||
"""Affiche A5 (148 × 210 mm)."""
|
||||
l, h = 148, 210
|
||||
encre, gris = "#141414", "#6b665d"
|
||||
|
||||
bleus = couleurs_de(os.path.join(SOURCES, "cascade.gif"),
|
||||
lambda c: c[2] > 200 and c[0] < 200) # les bleus
|
||||
vives = couleurs_de(os.path.join(SOURCES, "tetris"),
|
||||
lambda c: max(c) - min(c) > 180) # les saturées
|
||||
# Une couleur par teinte (l'animation en contient des nuances très proches).
|
||||
tetris = []
|
||||
for c in vives + COULEURS_TETRIS:
|
||||
if all(sum(abs(a - b) for a, b in zip(c, t)) > 120 for t in tetris):
|
||||
tetris.append(c)
|
||||
|
||||
y_titre = 49
|
||||
cote_qr = 56
|
||||
x_qr, y_qr = (l - cote_qr) / 2, y_titre + 37
|
||||
taille = cote_qr / len(modules)
|
||||
y_texte = y_qr + cote_qr + 12
|
||||
etapes = ["1. Connectez-vous au Wi-Fi de l'école.",
|
||||
"2. Visez le QR code avec l'appareil photo.",
|
||||
"3. Déposez vos animations, choisissez l'ordre."]
|
||||
textes = (f'<text x="{l / 2}" y="{y_texte}" font-size="7" font-weight="bold" fill="{encre}" '
|
||||
f'text-anchor="middle" font-family="Menlo, Consolas, monospace">'
|
||||
f'{adresse.replace("http://", "")}</text>'
|
||||
+ "".join(f'<text x="{l / 2}" y="{y_texte + 8 + i * 6}" font-size="4.2" '
|
||||
f'fill="{encre}" text-anchor="middle">{e}</text>'
|
||||
for i, e in enumerate(etapes))
|
||||
+ f'<text x="{l / 2}" y="{y_texte + 31}" font-size="3.2" fill="{gris}" '
|
||||
f'text-anchor="middle">Uniquement sur le Wi-Fi de l\'école (pas en 4G / 5G).</text>')
|
||||
|
||||
return f"""<svg xmlns="http://www.w3.org/2000/svg" width="{l}mm" height="{h}mm" viewBox="0 0 {l} {h}"
|
||||
font-family="Helvetica, Arial, sans-serif">
|
||||
<title>Vitrine pixels : accès à l'interface web</title>
|
||||
<rect width="{l}" height="{h}" fill="#fff"/>
|
||||
{composition_cascade(bleus)}
|
||||
{titre_en_pixels("VITRINE", y_titre, 2.0, tetris)}
|
||||
{titre_en_pixels("PIXELS", y_titre + 16, 2.0, tetris, depart=1)}
|
||||
<rect x="{x_qr - 4}" y="{y_qr - 4}" width="{cote_qr + 8}" height="{cote_qr + 8}" fill="#fff"/>
|
||||
<g fill="#000" shape-rendering="crispEdges">{cases_svg(modules, x_qr, y_qr, taille)}</g>
|
||||
{textes}
|
||||
{composition_tetris(tetris, h)}
|
||||
</svg>
|
||||
"""
|
||||
|
||||
|
||||
def main():
|
||||
adresse = sys.argv[1] if len(sys.argv) > 1 else ADRESSE_PAR_DEFAUT
|
||||
if not adresse.startswith("http"):
|
||||
adresse = "http://" + adresse
|
||||
os.makedirs(SORTIE, exist_ok=True)
|
||||
|
||||
modules = modules_du_qrcode(adresse)
|
||||
with open(os.path.join(SORTIE, "qrcode_interface_web.svg"), "w") as f:
|
||||
f.write(qrcode_svg(modules))
|
||||
with open(os.path.join(SORTIE, "affiche_interface_web.svg"), "w") as f:
|
||||
f.write(affiche_svg(modules, adresse))
|
||||
# Le PNG, directement par qrencode : 12 pixels par case, marge de 4 cases.
|
||||
subprocess.run(["qrencode", "-o", os.path.join(SORTIE, "qrcode_interface_web.png"),
|
||||
"-s", "12", "-m", "4", "-l", "M", adresse], check=True)
|
||||
# Le PDF de l'affiche, si l'outil de conversion est là.
|
||||
if shutil.which("rsvg-convert"):
|
||||
subprocess.run(["rsvg-convert", "-f", "pdf",
|
||||
"-o", os.path.join(SORTIE, "affiche_interface_web.pdf"),
|
||||
os.path.join(SORTIE, "affiche_interface_web.svg")], check=True)
|
||||
print(f"QR code pour {adresse} écrit dans {SORTIE}")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
Reference in New Issue
Block a user