Ingénieur logiciel fullstack freelance à Marseille.

While writing Framer code overrides, I got sidetracked after misunderstanding the logic for accessing and modifying components' variables.

# Where to apply the code override from

Let's say I have a component that has two variables : 

![Pasted image 20260406184514.png](https://demisel.space/garage/uploads/Pasted_image_20260406184514_82b694295c.png)

I added a code override to the component, and tried to see if I could read the variables from the component's `props`: 
```
import { forwardRef, type ComponentType } from "react"


export function withTransition(Component): ComponentType {

	return forwardRef((props, ref) => {
		console.log(props)
		return (
			<Component
				{...props}
			/>

		)

	})

}
```

That did not seem to work, the logged object never contained the variables. I figured it out after a bit of tinkering and hair-pulling :

- You need to apply the override **from the parent** that instantiates the component to be allowed to play with the component's variables

So I removed the code-override in the component definition, and added it _on the component, from the page that uses it_.


# Modifying `color` variables

I did not get it right on the second try either. Here's what I tried to do : 
```
import { forwardRef, type ComponentType } from "react"


export function withTransition(Component): ComponentType {
 return forwardRef((props, ref) => {

 return (
 <Component
 {...props}
 dynamicBgColor="#ff0000ff"
 dynamicTextColor="#00ff00ff"
 />
 )
 })
}
```

No reason why this shouldn't work, right ? Well it seems like color variables must be defined in `rgba(r,g,b,a)` format to work properly in Framer ! 
So after a small tweak, I was able to control the variable value from the code override : 
```
import { forwardRef, type ComponentType } from "react"


export function withTransition(Component): ComponentType {
 return forwardRef((props, ref) => {

 return (
 <Component
 {...props}
 dynamicBgColor="rgba(255,0,0,1)"
 dynamicTextColor="rgba(0,255,0,1)"
 />
 )
 })
}
```


Here's the component I was actually building by the way, it's applied to the navbar so that it switches to white background, black text color when the scroll position reaches 150 (px, em, centimeters? no idea)
```
import { forwardRef, useEffect, type ComponentType } from "react"
import { useScroll, useMotionValue, animate } from "framer-motion"

export function withTransition(Component): ComponentType {
 return forwardRef((props, ref) => {
 const { dynamicBgColor, dynamicTextColor } = props
 const { scrollY } = useScroll()
 const textColor = useMotionValue(dynamicTextColor)
 const backgroundColor = useMotionValue(dynamicBgColor)

 const transition = {
 ease: "easeInOut",
 }

 const onScrollChange = () => {
 if (scrollY.get() > 150) {
 animate(textColor, "rgba(0, 0, 0, 1)", transition)
 animate(backgroundColor, "rgba(255,255,255, 1)", transition)
 } else {
 animate(textColor, dynamicTextColor, transition)
 animate(backgroundColor, dynamicBgColor, transition)
 }
 }

 useEffect(() => {
 onScrollChange()
 return scrollY.onChange(onScrollChange)
 }, [])

 return (
 <Component
 {...props}
 ref={ref}
 dynamicBgColor={backgroundColor}
 dynamicTextColor={textColor}
 />
 )
 })
}


```

Modifying component variables from Framer code overrides

A force d'en voir dans des installations d'art numérique, j'ai fini par avoir envie d'avoir ma propre imprimante thermique, histoire de voir ce qu'on peut faire avec.

Je tombe sur une Epson TM-T20II à 35 euros sur Leboncoin. Après une ou deux recherches sur internet j'apprends que : 
- Le protocole ESC/POS a l'air d'être le standard pour contrôler les imprimantes thermiques
- Il y a une [librairie python](https://github.com/python-escpos/python-escpos) qui a l'air bien maintenue qui sait faire de l'ESC/POS par usb
- L'Epson TM-T20II gère ce protocole et a une prise USB

Ça me suffit, je la prends.

# Parler à l'imprimante

J'ai reçu l'imprimante, maintenant comment est-ce que je fait pour lui parler ? 
python-escpos est plutôt bien documenté, je suis [les instructions d'installation](https://python-escpos.readthedocs.io/en/latest/user/installation.html) : je commence par ignorer les instructions à propos des règles udev -> ça ne fonctionne pas -> je décide de ne pas ignorer les instructions à propos des règles udev :

- Je repère le vendorId et le productId de mon imprimante avec `lsub`: 
```
 $ lsusb
(...)
Bus 001 Device 008: ID 04b8:0e15 Seiko Epson Corp. TM-T20II
(...)
```

- Dans `/etc/udev/rules.d/50-myusb.rules`, j'écris : 
```
SUBSYSTEM=="usb", ATTRS{idVendor}=="04b8", ATTRS{idProduct}=="0e15" GROUP="users", MODE="0666", SYMLINK+="usbtm20"
```

Ensuite, un coup de `sudo service udev restart`

Et je me retrouve avec un script python qui parvient à imprimer du texte sur l'imprimante : 
```
from escpos.printer import Usb

text = "..."

device = Usb(0x04B8, 0xE15, 0, profile="TM-T20II")
device.textln(text)
device.cut()
```



![IMG_4171.JPG](https://demisel.space/garage/uploads/IMG_4171_4730b6665b.JPG)

Ok ça a l'air de fonctionner, mais pourquoi ça n'imprime pas sur toute la largeur de mon rouleau de 80mm ? On dirait que la machine crois que je lui ai chargé un rouleau de 58mm ? 

# Modifier la largeur de la zone d'impression

Epson publie une [documentation plutôt détaillée](https://download4.epson.biz/sec_pubs/pos/reference_en/escpos/index.html) (mais pas forcément évidente à naviguer) sur le protocole ESC/POS et le support de ses commandes par son matériel.
Je finis par tomber sur [`GS ( E <fn=5>`](https://download4.epson.biz/sec_pubs/pos/reference_en/escpos/gs_lparen_ce_fn05.html) : 
![GS-E-fn5.png](https://demisel.space/garage/uploads/GS_E_fn5_87a89c0867.png)
A priori, avec `a=3`, je peux configurer la largeur du papier : 
![params_gs-e-a_3.png](https://demisel.space/garage/uploads/params_gs_e_a_3_22e2442898.png)

La documentation précise que cette fonction n'a un effet que si l'appareil est en mode "user settings" :
![gs-e-note-settings-mode.png](https://demisel.space/garage/uploads/gs_e_note_settings_mode_b89f5c4247.png)

Dans le cas de la fonction [`GS ( E <fn=1>`](https://download4.epson.biz/sec_pubs/pos/reference_en/escpos/gs_lparen_ce_fn01.html), l'imprimante n'entre pas directement dans le mode user setting. Il faut attendre qu'elle transmette la valeur `0x372000` avant de lui envoyer de nouvelles commandes.
![gs-e-change-notice.png](https://demisel.space/garage/uploads/gs_e_change_notice_3f4227468c.png)
En fouillant un peu, on trouve la fonction [`GS ( E <fn=2>`](https://download4.epson.biz/sec_pubs/pos/reference_en/escpos/gs_lparen_ce_fn02.html) qui permet de sortir du mode "user setting". 
Je termine avec ce bout de code qui permet de changer la taille du papier configurée dans l'imprimante : 
```
from escpos.printer import Usb
from time import sleep

def enter_settings_mode(d):
 # Enter user setting mode
 # GS ( E <Function 1>
 enter = bytes.fromhex("1D2845030001494E")
 d._raw(enter)
 # Await confirmation from printer
 # that we entered user setting mode
 for i in range(100):
 res = d._read()
 if(len(res) == 0):
 sleep(.1)
 continue
 elif(res[0] == 55 and res[1] == 32):
 break

def exit_settings_mode(d):
 # Exit user setting mode
 # GS ( E <Function 2>
 exit = bytes.fromhex("1D28450400024F5554")
 d._raw(exit)

def change_paper_size():
 d = Usb(0x04b8,0x0e15, 0, profile="TM-T20II")


 enter_settings_mode(d)
 
 # Switch to 80mm paper width
 # Set config value
 # GS ( E <Function 5>
 # Set paper width
 paper_width = bytes.fromhex("1D2845040005030600")
 d._raw(paper_width)

 exit_settings_mode()
```
Les impressions occupent maintenant toute la largeur du papier. 
![IMG_4172.JPG](https://demisel.space/garage/uploads/IMG_4172_cae745d946.JPG)


# Imprimer des images

Il y a déjà les fonctions nécessaires pour imprimer des images dans python-escpos : 
```
from PIL import Image
from escpos.printer import Usb

im = Image.open("(...)")
d = Usb(0x04b8,0x0e15, 0, profile="TM-T20II")
d.image(
 im,
 center=True
 )
d.cut()
```

Je suis content, ça imprime mon image, mais il y a des traits qui gachent un peu tout :
![IMG_4173.JPG](https://demisel.space/garage/uploads/IMG_4173_3973936494.JPG)

En fouillant dans la doc epson, je finis par tomber sur [une page qui parle de l'impression d'images](https://download4.epson.biz/sec_pubs/pos/reference_en/epos_print/ref_epos_print_xml_en_xmlforcontrollingprinter_image.html#i875697) à partir de... je sais pas trop, des fichiers xml qu'on mettrait dans un logiciel particulier ? Bref, sur cette page on lit : 

```
If you set to print a raster image in grayscale, the amount of data of the image increases and may be printed intermittently, which causes white streaks on printout. 
```

Donc... s'il y a trop de données à imprimer, l'imprimante pourrait décider de faire de petites pauses, qui entrainent l'apparition de traits blancs. Ça a tout l'air de correspondre au problème qu'on rencontre !
Dans la documentation de la commande [`ESC *`](https://download4.epson.biz/sec_pubs/pos/reference_en/escpos/esc_asterisk.html), on remarque qu'un paramètre permet de sélectionner les densités d'impression horizontales et verticales. En mettant le nez dans le code de python-escpos, on remarque les paramètres `high_density_vertical` et `high_density_horizontal`, qui agissent justement sur ces paramètres d'`ESC *`. 
Après de petites modifications sur le code d'esc_pos pour redimensionner l'image pour l'impression en faible densité, on imprime une image sans lignes qui gâchent tout !
![IMG_4174.JPG](https://demisel.space/garage/uploads/IMG_4174_6ad15a90dd.JPG)
C'est mieux ! Mais on perd quand même énormément en qualité d'impression... Et en plus il y a encore des lignes parasites.

Mais en fait, la documentation dit que "the amount of data of the image increases and may be printed intermittently". Ça veut dire que l'imprimante a besoin de respirer lorsqu'on lui envoie beaucoup de données ? Peut-être que ça se passerait mieux si on imprimait plus doucement ? 

On retourne à la commande [`GS ( E <fn=5>`](https://download4.epson.biz/sec_pubs/pos/reference_en/escpos/gs_lparen_ce_fn05.html), puisqu'elle permet aussi de définir une vitesse d'impression ! On fait ça avec ce bout de code : 
```
def change_print_speed():
 d = get_device()

 enter_settings_mode(d)

 speed = bytes.fromhex("1D2845040005060100")
 d._raw(speed)

 exit_settings_mode(d)
```

Ça imprime bien moins rapidement, mais l'image rend beaucoup mieux.

![IMG_4176.JPG](https://demisel.space/garage/uploads/IMG_4176_409e262228.JPG)

Imprimer des images sur imprimante thermique avec python

Je me suis retrouvé à vouloir envoyer des fichiers depuis une carte Arduino vers un ordinateur, sans brancher de fil ni configurer une connexion réseau. Le bluetooth semble être une bonne option.

```
🚧 Il y a sûrement des méthodes moins "bricolage" pour envoyer des fichiers en BLE, 
mais j'ai décidé de foncer sans trop faire de recherches.
```

# Petite introduction au BLE GATT

Le BLE (Bluetooth Low Energy), c'est comme le bluetooth mais en mieux (?). Peut-être que ça sert pas à la même chose ? Je sais pas trop mais "Low Energy" ça sonne bien donc j'ai choisi de partir là dessus.

Il y a déjà assez de ressources en ligne pour comprendre en quoi ça consiste (comme [ici](https://www.oreilly.com/library/view/getting-started-with/9781491900550/ch04.html), ou [là](https://www.bluetooth.com/bluetooth-resources/intro-to-bluetooth-gap-gatt/), encore par [là](https://embeddedcentric.com/lesson-2-ble-profiles-services-characteristics-device-roles-and-network-topology/)). Pour résumer ce que j'ai compris du BLE, il y a :
- Des Serveurs, qui ont 
 - Des Services, qui ont 
 - Des Caractéristiques, qui ont
 - Une valeur, qui peut changer
 - La capacité d'émettre un évènement pour prévenir que leur valeur a changé
- Des Clients, qui
 - Se connectent à des serveurs et
 - Parcourent leurs services et
 - Parcourent leurs Caractéristiques et
 - Lisent leur valeur
 - Peuvent s'abonner aux évènements, ou quelque chose dans le genre.

# Ce qui est utilisé

## Le serveur
Dans mon cas j'utilisais un [EmotiBit](https://www.emotibit.com/). L'idée était qu'il prenne des mesures pendant un certain temps, puis les transmette à une machine immobile à la fin de la journée.
L'Emotibit repose sur l'[Adafruit HUZZAH32](https://www.adafruit.com/product/3405), c'est une carte ESP32 qui sait faire du bluetooth et un tas d'autres choses. Il y a [cette librairie](https://github.com/espressif/arduino-esp32/tree/master/libraries/BLE) qui fonctionne bien sur cette carte pour faire du BLE.

## Le client
J'ai écrit le client en python, en utilisant la librairie [Bleak](https://github.com/hbldh/bleak). Initiallement je comptais utiliser [pybluez](https://github.com/pybluez/pybluez), mais la dernière release avait 3 ans, ça m'a effrayé.

## L'objectif

L'objectif c'est d'atteindre un système qui fonctionne comme ça : 
1. Si rien n'est connecté au serveur on ne fait rien de spécial côté BLE
2. Si quelque chose est connecté, la valeur de la caractéristique contient le nombre de fichiers disponibles
3. Une fois que le nombre de fichier a été lu par un client, et s'il y a un fichier à envoyer : 
 a. La valeur de la caractéristique prend la valeur des 256 prochains octets du fichier
 - s'il n'y a plus rien à lire dans le fichier, on le supprime et retour à l'étape **2**
 b. Une fois que la valeur a été lue, on retourne à l'étape **3.a**


# Le code

## Côté arduino/esp32

```
🚧 Je ne maitrise pas du tout le C++, ça se sent dans mon code mais il a le mérite de fonctionner.
```
### On met en place le BLE
Créer le service, les caractéristiques

```
#include <BLEDevice.h>
#include <BLEUtils.h>
#include <BLEServer.h>
#include <BLECharacteristic.h>
#include <BLE2902.h>

#define SERVICE_UUID "4fafc201-1fb5-459e-8fcc-c5c9c331914b"
#define CHARACTERISTIC_UUID "beb5483e-36e1-4688-b7f5-ea07361b26a8"

BLECharacteristic* strCharacteristic = NULL;
void setup() 
{
...

//Setup BLE
 BLEDevice::init("Mon device BLE");
 BLEServer *pServer = BLEDevice::createServer();
 BLEService *pService = pServer->createService(SERVICE_UUID);
 strCharacteristic = pService->createCharacteristic(
 CHARACTERISTIC_UUID,
 BLECharacteristic::PROPERTY_READ |
 BLECharacteristic::PROPERTY_INDICATE
 );
 strCharacteristic->addDescriptor(new BLE2902());
 pService->start();
 BLEAdvertising *pAdvertising = BLEDevice::getAdvertising();
 pAdvertising->addServiceUUID(SERVICE_UUID);
 pAdvertising->setScanResponse(true);
 pAdvertising->setMinPreferred(0x06); // functions that help with iPhone connections issue
 pAdvertising->setMinPreferred(0x12);
 BLEDevice::startAdvertising();
...

}
```

En fouillant un peu je me suis rendu compte qu'on peut mettre en place des callbacks, ça a l'air pratique ! Donc on les défini :

```
class MyBLEServerCallbacks: public BLEServerCallbacks {
 void onConnect(BLEServer* pServer){
 bleState = CONNECTED; // ça je l'explique plus tard, c'est pour une state machine
 fileTransferState = NO_FILE; // ça je l'explique plus tard, c'est pour une state machine
 currentFile = SD.open("jexistepas");
 }

 void onDisconnect(BLEServer* pServer){
 onClientLost();
 BLEDevice::startAdvertising();
 }
};

class ContentCharacteristicCallbacks: public BLECharacteristicCallbacks {
 void onStatus(BLECharacteristic* pCharacteristic, Status s, uint32_t code){
 if(s == Status::SUCCESS_INDICATE){
 if(fileTransferState == FILE_DONE) // ça je l'explique plus tard, c'est pour une state machine
 fileTransferState = FILE_DONE_CONFIRMED; // ça je l'explique plus tard, c'est pour une state machine
 else
 fileTransferState = FILE_PART_RECEIVED; // ça je l'explique plus tard, c'est pour une state machine
 //TODO delete file if FILE_DONE_CONFIRMED
 }
 else
 if(s == Status::ERROR_NO_CLIENT){
 onClientLost();
 }
 }
};
```
Et ensuite on les ajoute à notre serveur et à la caractéristique dans la fonction `setup`.

```
 ...
 BLEDevice::init("Mon device BLE");
 BLEServer *pServer = BLEDevice::createServer();
 pServer->setCallbacks(new MyBLEServerCallbacks());
 BLEService *pService = pServer->createService(SERVICE_UUID);
 strCharacteristic = pService->createCharacteristic(
 CHARACTERISTIC_UUID,
 BLECharacteristic::PROPERTY_READ |
 BLECharacteristic::PROPERTY_WRITE |
 BLECharacteristic::PROPERTY_INDICATE
 );
 strCharacteristic->setCallbacks(new ContentCharacteristicCallbacks());
 ...
```


### Machine à état, et logique d'envoi de fichiers
Reste encore à mettre en place la logique pour envoyer le fichier.

```
🚧 Si on était sérieux on mettrai en place un peu de chiffrement lors du transfert des données, 
peut-être même des logiques de contrôle d'intégrité, mais là 
👏 j'ai 👏 pas 👏 envie 👏 de 👏 m'embêter 👏.
```

Déjà une machine à état (deux en fait) pour savoir où on en est. 
```
enum BleState {
 NOT_CONNECTED = 0,
 CONNECTED = 1
};

enum FileTransferState {
 NO_FILE = 9999,
 FILE_AVAILABLE = 10000,
 SENDING_FILE_PART = 10001,
 FILE_PART_RECEIVED = 10002,
 FILE_DONE = 10003,
 FILE_DONE_CONFIRMED = 10004,
 SENDING_AVAILABLE_FILE = 10005
};

BleState bleState = NOT_CONNECTED; // L'état initial
FileTransferState fileTransferState = NO_FILE; // L'état initial


```

Ensuite, dans le `void loop` on peut se mettre en place un truc comme ça :
``` 
if(bleState == CONNECTED)
 {
 if(fileTransferState == NO_FILE || fileTransferState == FILE_AVAILABLE || fileTransferState == FILE_DONE_CONFIRMED){
 String valueStr = String(fileTransferState)+"|"+String(bleFilesCount());
 strCharacteristic->setValue(valueStr.c_str());
 strCharacteristic->indicate();
 }
 else {
 if(fileTransferState == SENDING_FILE_PART || fileTransferState == FILE_DONE){
 // On appelle indicate pour prévenir le client qu'il a quelque chose à lire
 strCharacteristic->indicate();
 }
 if(fileTransferState == FILE_PART_RECEIVED){
 bleFileNext();
 }
 }

 delay(10);
 }
``` 

Il manque la partie où on modifie la caractéristique BLE pour envoyer le fichier _pour de vrai_ par paquets de 256 octets, en fait ça se passe dans la fonction `bleFileNext` :

```
bool bleFileNext(){
 if(!currentFile){
 currentFile = emotibit.getFirstFile();
 }
 if(!currentFile){
 fileTransferState = NO_FILE;
 return false;
 }
 byte buffer [256];
 int bytesRead = currentFile.read(buffer, 256);
 String data = String(bytesRead)+"|";
 
 if(0 == bytesRead){
 currentFile.close();
 //TODO delete the file if that was read
 currentFile = SD.open("jexistepas"); // un petit bricolage parce que je maitrise pas trop le C++
 fileTransferState = FILE_DONE;
 strCharacteristic->setValue(data.c_str());
 return false;
 }

 for(int i = 0 ; i < bytesRead ; i++){
 data += (char) buffer[i];
 }
 strCharacteristic->setValue(data.c_str());
 fileTransferState = SENDING_FILE_PART;
 return true;
}
```

Il manque aussi la fonction `bleFilesCount`, qui lit le nombre de fichiers à envoyer et transitionne la machine à état en conséquence : 
```
int bleFilesCount(){
 int count = combienYATIlDeFichiersDansMaCarteSD(); // en fait j'ai pas encore implémenté ça
 if(count > 0){
 fileTransferState = FILE_AVAILABLE;
 } else {
 fileTransferState = NO_FILE;
 }
 
 return count;
}
```

## Un client en python

En python c'était plus simple, 

On commence par reporter les différents 'statuts' qu'on a prévu dans les valeurs de la caractéristique bluetooth : 
```
class StartValues(str, Enum):
 NO_FILE = "9999"
 FILE_AVAILABLE = "10000"
 SENDING_FILE_PART = "10001"
 FILE_PART_RECEIVED = "10002"
 FILE_DONE = "10003"
 FILE_DONE_CONFIRMED = "10004"
 SENDING_AVAILABLE_FILE = "10005"
```

### Lister les appareils à proximité : 

```
>>> from bleak import BleakScanner
>>> import asyncio
>>> loop = asyncio.new_event_loop()
>>> loop.run_until_complete(BleakScanner.discover())
[BLEDevice(666AFE17-6931-F308-9D7F-452FC325A891, A5 Emotibit), BLEDevice(FB8EE2A1-2B7C-CD5E-11D5-26BBE9B7C141, iPhone de Elias)]
>>> 
```

### Se connecter 

Et un peu de logique pour se connecter et écouter les messages :
```python
class BluetoothDeviceObserver:

 def __init__(self, device_id):
 self.device_id = device_id
 self.lib_device = None
 self.client: BleakClient = None
 self.is_observing = False
 self.files = {}
 self.current_file = None

 @property
 def is_connected(self):
 if self.client is None:
 return False
 else:
 return self.client.is_connected

 async def connect(self):
 if self.client is None:
 self.lib_device = await BleakScanner.find_device_by_address(
 self.device_id
 )
 if self.lib_device is None:
 raise Exception("Could not find requested device")
 else:
 self.client = BleakClient(self.lib_device)
 if not self.is_connected:
 await self.client.connect()

 async def disconnect(self):
 await self.client.disconnect()

 def get_device(self) -> BluetoothDevice:
 return BluetoothDevice.from_ble_device(self.lib_device)

 async def start_observing(self):
 services = await self.client.get_services()
 char = services.get_characteristic(
 "beb5483e-36e1-4688-b7f5-ea07361b26a8"
 )
 self.is_observing = True
 await self.client.start_notify(
 char,
 self.on_char_notif
 )
```

Et une fonction qui lit les valeurs successives de la caractéristique bluetooth :

```python
 async def on_char_notif(self, char, v):
 str_value = v.decode("utf-8").split("|")
 start_value = str_value[0]
 actual_value = "|".join(str_value[1:])
 if start_value == StartValues.NO_FILE and actual_value == "false":
 await self.stop_observing()
 if start_value in [
 StartValues.SENDING_AVAILABLE_FILE,
 StartValues.FILE_DONE_CONFIRMED
 ] and actual_value != "false":
 if actual_value not in self.files:
 self.files[actual_value] = ""
 self.current_file = actual_value
 if start_value not in [e.value for e in StartValues]:
 if self.current_file in self.files:
 self.files[self.current_file] += actual_value
```

Jusqu'ici on garde les fichiers en mémoire vive. On peut les écrire sur le disque dans une autre fonction.

```python
 async def stop_observing(self):
 self.is_observing = False
 print("Stopped observing")
 await self.client.stop_notify("beb5483e-36e1-4688-b7f5-ea07361b26a8")
 await self.disconnect()
 if self.files:
 for k, v in self.files.items():
 with open(f".tmp/{k}", "w") as out_file:
 print(f"{k} => {v}")
 out_file.write(v)
 print("Done retrieving files")
```

Ensuite on peut l'utiliser comme ça : 
```
>>> from features.bluetooth.repository import BluetoothDeviceObserver
>>> observer = BluetoothDeviceObserver("666AFE17-6931-F308-9D7F-452FC325A891")
>>> loop.run_until_complete(observer.connect())
>>> loop.run_until_complete(observer.start_observing())
>>> observer.files
{'file_12202200123.csv': '1 [...] 11235,11229‘},
>>> loop.run_until_complete(observer.stop_observing())
```


# Petit bilan

C'est pas super optimisé, ça pourrait sûrement être plus rapide et safe, mais j'ai au moins un genre de POC. Je note ça ici parce que ça pourrait toujours servir plus tard.

Envoyer des fichiers depuis Arduino en bluetooth low energy

## 

[https://ciechanow.ski/](https://ciechanow.ski/)

[https://www.joelonsoftware.com/](https://www.joelonsoftware.com/)

[https://garden.bradwoods.io/](https://garden.bradwoods.io/) 

[https://bradfrost.com/blog/](https://bradfrost.com/blog/) 

[https://www.garbageday.email/](https://www.garbageday.email/)

[http://cromagnontech.blogspot.com/](http://cromagnontech.blogspot.com/)

[https://bryce.co/](https://bryce.co/)

[https://taylor.town/](https://taylor.town/)

[https://greg.technology/](https://greg.technology/)


Sites que j'aime

Un outil nodal de composition graphique en temps réel, qui fonctionne dans le navigateur. Des noeuds custom peuvent être écrits en javascript dans l'IDE intégré, les graphes sont enregistrés dans l'URL pour pouvoir les partager via des QR codes.
<a href="https://frame.demisel.space/?patch=CbZLRboQgEEX_ZZ7pRhTX6h_0B_piDEHBxlRho9jUGP-9IOx2Nu2Lmcm99zAw7vCl5mUwGipKQBupFqjqHQYJFXRiAgJS9W--47yfxaT4oG-r5dwp31C9UJoT2KBi7CAxZlb7FHM9SpQsDYHXR0BzigKLadUYvIzS05vSEplTZO6Vkq3oPuM0LNiTgsDNzPZdjKu_0A4rnwZnSC4sI66RqhObb4trfiB0htDtqLSMcxTJCc7Kv1wxmVVbz8o9eXJP6BoMZQhqZ6GX3sxTAKfpfeJ_yNYP7Jl2i4XQH6OK9dIJX9NLcj2OhrhluYH98ur4RGEN4fhBQ0Pq2NwFigWKhOwUaFQypHhu355C-Dmw8GD9JsI3Cs-JcEgCTXP8AA" rel="noopener" target="_blank">Essayez celui-ci</a>
<a href="https://frame.demisel.space/?patch=CrVTbbts4EP2VgM9SQvEuvxVtHgJsuwG6WGwRFAZFDi01smRIdJsi8L8vZcqJpFyaxfbFsDicc2YOz8w9-g5dX7UNWmUJaloLPVrd3KPKohVq9x4lyIK7Gr7W6_C92_v1OhzehfsyzxP0E60EOyRjRrPOyCTFVT7eTbPjTcUStGs7_7eu9wPRPfpRWV8OEDhBJVSb0qMVFeFjv96GYgLLYQrOJuBw5zttfNoW38CMPIRHIpLzBPW-q5rN9YzvFkIU1eA8mgHzXwAzqY7AFMvXgKvGwt0cWTyD3Oy3BXQRWQgZS6ZPxHG6rgttbtEKH15j_TljJHjCaNqm97oZu8gJG-URS67vw7-BaIqUzZ7fdXoL66qZeCBlOHogk2KaODVBZWFlXa6wJS4lgtmUZZKlyuEi1ZhaKgqS59aOruKEjjUuSzz5Y14jnVDZqt_V2sAIhXksLs3IE23366AnNBtf_hMQz7FkyeTsy3A2sx6ZWs-UXbvVvjKpDu_YhX9hgCInldGBVJGXKdGKD2y62dRPNOf_QzoanzdT6m3aPefNmetVbIaJV8fJl8HPcw_KX7hekjhPjMrf5Hq10E07QqQoXCoVlymz3KSFcjYlNheZU4IZzccuo0toxg5fE2R0UR-X4M1p4cQ1OC6Jo_3R1-TmdPAQFcuomESPQxlnLEaPs_WQS465pxCeJg6h8fXmmesfj7lxjS7i5WN8DkCX-FVDTjEyjfFZWexp6JQ204kslSAzJeQyKpe482ofRY6_DwVls1qHpvp23xl4MXxaD1to_LOXyMvwbCbFYLZSN7aPErPl089Sh8vVVm9CYcFfHWxbDx9bu6-jm9885MMK6epg79L7Xb-6uDgu5P7cwrbqoT7vd6G3i9Bi5S_CJJx_649bqdR9WDgoL7hxnApBJfAs58BtQbEAawADWGWMLbAyDIgoMlA50c4Qaix3OVjChlco9o2t4VMgDXgfLj9efb784-z6z6tPf519vn73_vIMnAu7o0dhbt88gm_rahA7HdbILXRpoXt4pkNlTRCLWVk4w7RlGBRRGbZYcRe6Ak4sBUpBQBZ6LFSRYVkwwLlxuRZY_acOD4d_AQ&#x26;mode=view" rel="noopener" target="_blank">Voyez comment celui-ci réagit en voyant votre main gauche</a>

large_Screenshot from 2026-03-29 01-05-10.png

medium_Screenshot from 2026-03-29 01-05-10.png

small_Screenshot from 2026-03-29 01-05-10.png

thumbnail_Screenshot from 2026-03-29 01-05-10.png

Screenshot from 2026-03-29 01-05-10.png

recording-1774743215135.webm

large_Screenshot from 2026-07-01 00-09-25.png

medium_Screenshot from 2026-07-01 00-09-25.png

small_Screenshot from 2026-07-01 00-09-25.png

thumbnail_Screenshot from 2026-07-01 00-09-25.png

Screenshot from 2026-07-01 00-09-25.png

small_frame-1782857652546.png

thumbnail_frame-1782857652546.png

frame-1782857652546.png

A node-based real-time graphics composition tool that runs in the browser. Custom nodes can be written in javascript in the integrated IDE, node-graphs are persisted in the URL, thus shareable through QR Codes.

[Try this one](https://frame.demisel.space/?patch=CbZLRboQgEEX_ZZ7pRhTX6h_0B_piDEHBxlRho9jUGP-9IOx2Nu2Lmcm99zAw7vCl5mUwGipKQBupFqjqHQYJFXRiAgJS9W--47yfxaT4oG-r5dwp31C9UJoT2KBi7CAxZlb7FHM9SpQsDYHXR0BzigKLadUYvIzS05vSEplTZO6Vkq3oPuM0LNiTgsDNzPZdjKu_0A4rnwZnSC4sI66RqhObb4trfiB0htDtqLSMcxTJCc7Kv1wxmVVbz8o9eXJP6BoMZQhqZ6GX3sxTAKfpfeJ_yNYP7Jl2i4XQH6OK9dIJX9NLcj2OhrhluYH98ur4RGEN4fhBQ0Pq2NwFigWKhOwUaFQypHhu355C-Dmw8GD9JsI3Cs-JcEgCTXP8AA)

[See how this one reacts to your right hand](https://frame.demisel.space/?patch=CrVTbbts4EP2VgM9SQvEuvxVtHgJsuwG6WGwRFAZFDi01smRIdJsi8L8vZcqJpFyaxfbFsDicc2YOz8w9-g5dX7UNWmUJaloLPVrd3KPKohVq9x4lyIK7Gr7W6_C92_v1OhzehfsyzxP0E60EOyRjRrPOyCTFVT7eTbPjTcUStGs7_7eu9wPRPfpRWV8OEDhBJVSb0qMVFeFjv96GYgLLYQrOJuBw5zttfNoW38CMPIRHIpLzBPW-q5rN9YzvFkIU1eA8mgHzXwAzqY7AFMvXgKvGwt0cWTyD3Oy3BXQRWQgZS6ZPxHG6rgttbtEKH15j_TljJHjCaNqm97oZu8gJG-URS67vw7-BaIqUzZ7fdXoL66qZeCBlOHogk2KaODVBZWFlXa6wJS4lgtmUZZKlyuEi1ZhaKgqS59aOruKEjjUuSzz5Y14jnVDZqt_V2sAIhXksLs3IE23366AnNBtf_hMQz7FkyeTsy3A2sx6ZWs-UXbvVvjKpDu_YhX9hgCInldGBVJGXKdGKD2y62dRPNOf_QzoanzdT6m3aPefNmetVbIaJV8fJl8HPcw_KX7hekjhPjMrf5Hq10E07QqQoXCoVlymz3KSFcjYlNheZU4IZzccuo0toxg5fE2R0UR-X4M1p4cQ1OC6Jo_3R1-TmdPAQFcuomESPQxlnLEaPs_WQS465pxCeJg6h8fXmmesfj7lxjS7i5WN8DkCX-FVDTjEyjfFZWexp6JQ204kslSAzJeQyKpe482ofRY6_DwVls1qHpvp23xl4MXxaD1to_LOXyMvwbCbFYLZSN7aPErPl089Sh8vVVm9CYcFfHWxbDx9bu6-jm9885MMK6epg79L7Xb-6uDgu5P7cwrbqoT7vd6G3i9Bi5S_CJJx_649bqdR9WDgoL7hxnApBJfAs58BtQbEAawADWGWMLbAyDIgoMlA50c4Qaix3OVjChlco9o2t4VMgDXgfLj9efb784-z6z6tPf519vn73_vIMnAu7o0dhbt88gm_rahA7HdbILXRpoXt4pkNlTRCLWVk4w7RlGBRRGbZYcRe6Ak4sBUpBQBZ6LFSRYVkwwLlxuRZY_acOD4d_AQ&mode=view)


Svelte

WebGL

Claude

Detecting people with ultralytics YOLOv5, segmenting with metaopensource segment-anything, and drawing over them with OpenGL.

large_vlcsnap-2025-09-10-02h36m59s615.png

medium_vlcsnap-2025-09-10-02h36m59s615.png

small_vlcsnap-2025-09-10-02h36m59s615.png

thumbnail_vlcsnap-2025-09-10-02h36m59s615.png

vlcsnap-2025-09-10-02h36m59s615.png

large_vlcsnap-2025-09-10-02h38m08s261.png

medium_vlcsnap-2025-09-10-02h38m08s261.png

small_vlcsnap-2025-09-10-02h38m08s261.png

thumbnail_vlcsnap-2025-09-10-02h38m08s261.png

vlcsnap-2025-09-10-02h38m08s261.png

large_vlcsnap-2025-09-10-02h37m37s831.png

medium_vlcsnap-2025-09-10-02h37m37s831.png

small_vlcsnap-2025-09-10-02h37m37s831.png

thumbnail_vlcsnap-2025-09-10-02h37m37s831.png

vlcsnap-2025-09-10-02h37m37s831.png

Detecting people with ultralytics YOLOv5, segmenting with metaopensource segment-anything, and drawing over them with OpenGL.

Python

OpenGL

OpenCV

pydub

Segment Anything

YoloV5

Un moteur de simulation multi-agents dans lequel les agents évoluent sur des images. En ajustant leur comportement, on fait varier le rendu de l'image qu'ils finissent par reproduire.

small_RepaingAg1.PNG

thumbnail_RepaingAg1.PNG

RepaingAg1.PNG

medium_RepaintAgBat.PNG

small_RepaintAgBat.PNG

thumbnail_RepaintAgBat.PNG

RepaintAgBat.PNG

A multi-agent simulation engine in which the agents' environment is an image. By adjusting their behavior, the final style of the image they'll eventually reproduce is altered.

SFML

(offline) Asian Restaurant Finder
A device packed with 8,000 Asian restaurant locations across metropolitan and overseas France.
The additional compass is here because the main one loses its accuracy due to the electronics inside of the box 🙃
Data sourced from openstreetmap

large_P8311083.jpg

medium_P8311083.jpg

small_P8311083.jpg

thumbnail_P8311083.jpg

P8311083.jpg

(offline) Asian Restaurant Finder

A device packed with 8,000 Asian restaurant locations across metropolitan and overseas France.

The additional compass is here because the main one loses its accuracy due to the electronics inside of the box 🙃

Data sourced from openstreetmap

Arduino

large_P4221449.jpg

medium_P4221449.jpg

small_P4221449.jpg

thumbnail_P4221449.jpg

P4221449.jpg

large_P8300112.jpg

medium_P8300112.jpg

small_P8300112.jpg

thumbnail_P8300112.jpg

P8300112.jpg

large_P4060289.jpg

medium_P4060289.jpg

small_P4060289.jpg

thumbnail_P4060289.jpg

P4060289.jpg

large_P8253293.jpg

medium_P8253293.jpg

small_P8253293.jpg

thumbnail_P8253293.jpg

P8253293.jpg

Un calendrier et un système permettant de quantifier les émotions, pour les mesurer et conserver un historique.

medium_cam2.png

small_cam2.png

thumbnail_cam2.png

cam2.png

medium_cam3.png

small_cam3.png

thumbnail_cam3.png

cam3.png

large_cam1.png

medium_cam1.png

small_cam1.png

thumbnail_cam1.png

cam1.png

A calendar and a system for quantifying emotions, to measure and track them over time.

flubber

medium_cir1.png

small_cir1.png

thumbnail_cir1.png

cir1.png

large_cir2.png

medium_cir2.png

small_cir2.png

thumbnail_cir2.png

cir2.png

large_cir3.png

medium_cir3.png

small_cir3.png

thumbnail_cir3.png

cir3.png

GLFW

medium_vlcsnap-2025-09-10-02h43m59s134.png

small_vlcsnap-2025-09-10-02h43m59s134.png

thumbnail_vlcsnap-2025-09-10-02h43m59s134.png

vlcsnap-2025-09-10-02h43m59s134.png

Fragment Shaders

large_3d.png

medium_3d.png

small_3d.png

thumbnail_3d.png

3d.png

large_3d1.png

medium_3d1.png

small_3d1.png

thumbnail_3d1.png

3d1.png

Je fluidifie le lien entre les équipes métier et techniques en assurant une communication honnête et adaptée à chaque partie.
Avec (au moins) 100 000 lignes de code écrites (au doigt mouillé), probablement le triple effacées, et encore le double (soyons fous) de revues, je sais identifier les forces et faiblesses d'une codebase : je m'assure de les expliciter auprès des développeurs et je les concilie avec les besoins business.

I bridge the gap between business and technical teams by ensuring honest communication adapted to each party.

With (at least) 100,000 lines of code written (give or take), probably three times as many deleted, and twice as many code reviews (while we're at it), I know how to identify a codebase's strengths and weaknesses: I make sure to clearly explain them to developers and reconcile them with business needs.

Tech Lead

PME, start-ups et grands groupes, je contribue au développement backend de vos projets :
<ul>
<li>Développement de services from scratch</li>
<li>Maintenance et mise en oeuvre de fonctionnalités</li>
<li>Identification et résolution de dette technique</li>
</ul>

Whether you are an SME, a start-up, or a large corporation, I contribute to the backend development of your projects:

- Developing services from scratch
- Maintaining and implementing features
- Identifying and resolving technical debt 

Backend Engineering

Ingénierie Backend

Je mobilise mes années d'expérience pro, je les croise avec mes années de bidouille pour apporter une dimension numérique à des productions culturelles :
<ul>
<li>Objets connectés, "intelligents"</li>
<li>Interfaces interactives</li>
<li>Outils de création</li>
</ul>

I draw on my years of professional experience and combine them with my years of tinkering to bring a digital dimension to cultural productions:
- Connected, "smart" objects
- Interactive interfaces
- Creative tools

Creative Coding

Code créatif

🏠	Marseille
Par mail	contact@eliassebbar.info

Elias Sebbar

Services

Tech Lead

Ingénierie Backend

Code créatif

Notes

Portfolio créatif

frame.demisel.space

Out of the picture

Painting agents

🍙

📷

Mood Calendar

|

🌫️

\