easylinux/Maison
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganisation fichiers

Browse Source
This commit is contained in:
Serge NOEL
2026-02-13 08:49:53 +01:00
parent ec9957d5b1
commit 758f73bc0e
33 changed files with 977 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

464
PacoMouseCYD/Platformio/SD/LocoEditor.html
View File

File diff suppressed because one or more lines are too long

36
PacoMouseCYD/Platformio/SD/bgr565.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BGR565 Inverted Image Converter</title>
<link rel="stylesheet" href="css/bgr565.css">
</head>
<body>
<h1>BGR565 Inverted Image Converter</h1>
<form id="imageForm">
<input type="file" id="imageInput" accept="image/*">
<br>
<label>Width: <input type="number" id="width" value="190" min="1"></label>
<label>Height: <input type="number" id="height" value="40" min="1"></label>
<button type="button" id="convertBtn">Convert & Download .raw</button>
</form>
<canvas id="canvas" style="display:none;"></canvas>
<div id="preview"></div>
<script src="js/bgr565.js"></script>
</body>
</html>
<!--
How this tool works:
1. Select an image file (any format supported by your browser).
2. Set the desired width and height (default: 190x40).
3. Click "Convert & Download .raw".
4. The image is resized/cropped to the specified size, converted to inverted BGR565 format (matching your display), and a .raw file is downloaded.
5. The .raw file can be copied to your SD card and displayed directly on your ESP32 with your display code.
Technical details:
- Uses HTML5 Canvas to process the image in the browser.
- JavaScript reads pixel data, converts to BGR565, inverts each value, and outputs a binary .raw file.
- No data is uploaded; all processing is local in your browser.
-->
</html>
</html>

32
PacoMouseCYD/Platformio/SD/css/bgr565.css Normal file
View File

@@ -0,0 +1,32 @@
body {
font-family: Arial, sans-serif;
margin: 2em;
background: #f9f9f9;
color: #222;
}
h1 {
color: #005580;
}
form {
margin-bottom: 1em;
}
label {
margin-right: 1em;
}
#preview img {
max-width: 300px;
border: 1px solid #ccc;
margin-top: 1em;
}
button {
padding: 0.5em 1em;
font-size: 1em;
background: #005580;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #0077aa;
}

275
PacoMouseCYD/Platformio/SD/css/style.css Normal file
View File

File diff suppressed because one or more lines are too long

64
PacoMouseCYD/Platformio/SD/image/image.md Normal file
View File

@@ -0,0 +1,64 @@
# 1001.bmp Image Characteristics
- **File Name:** 1001.bmp
- **Location:** SD/image/1001.bmp
- **Format:** Windows 3.x BMP (BMP3)
- **Dimensions:** 190 x 40 pixels
- **Color Depth:** 24-bit (8-bit per channel, sRGB)
- **Image Size:** 22,934 bytes
- **Resolution:** 2834 x 2834 pixels/meter
- **Data Offset:** 54 bytes (header size)
This image is suitable for use with ESP32 projects that support 24-bit BMP files. For optimal performance on microcontrollers, consider converting to a raw or 16-bit (RGB565) format if needed by your display library.
# Converting
For ESP32 with ILIxxx displays, storing images as uncompressed 24-bit BMP (like your current 1001.bmp) is convenient if your display library supports BMP decoding and you have enough storage and RAM. However, for best performance and efficiency, especially on microcontrollers, the most common and recommended format is:
Raw RGB565 (16-bit) format: This matches the color format of most ILIxxx displays, is fast to load, and uses less space than 24-bit BMP.
Why RGB565 Raw is Better:
Directly compatible with ILIxxx displays (no conversion needed at runtime).
Smaller file size (190 × 40 × 2 bytes = 15,200 bytes).
Fastest to read and display.
# How to Convert a Photo or Image:
## Resize and Crop:
Use an image editor (GIMP, Photoshop, or free online tools) to resize your image to 190x40 pixels.
Crop as needed to fit the aspect ratio.
## Convert to RGB565 Raw:
Use a tool or script to convert the image to RGB565 format.
Save as a .raw or .bin file (not BMP, not compressed).
## Copy to SD Card:
Place the .raw file on your SD card.
Read and display it directly using your ESP32 code.
## Example Conversion Tools:
**GIMP**: Export as RGB565 using a plugin or export as raw data.
Python script: Use PIL (Pillow) to convert and save as RGB565.
Online tools: Search for “image to RGB565 converter”.
If you want, I can provide a Python script to automate the conversion from any image to 190x40 RGB565 raw format. Let me know if you need this!
Your display uses an inverted BGR565 format (not standard RGB565), meaning:
The color order is BGR (not RGB).
The 16-bit value is inverted: color = 0xFFFF - standard BGR565.
How to Convert an Image for Your Display
Convert the image to 16-bit BGR565 format.
Invert each 16-bit value (bitwise NOT or subtract from 0xFFFF).
Save as a .raw file (no header, just pixel data).
Can This Be Done in JavaScript (Browser)?
Yes! You can:
Use an HTML <canvas> to load, resize, and crop the image.
Read pixel data with getImageData.
Convert each pixel to BGR565, invert it, and write to a binary buffer.
Offer the result as a downloadable .raw file.
Would you like a ready-to-use JavaScript/HTML tool for this? I can provide a complete example you can run in your browser.

5
PacoMouseCYD/Platformio/SD/index.html Normal file
View File

@@ -0,0 +1,5 @@
<html>
<body>
</body>
</html>

49
PacoMouseCYD/Platformio/SD/js/bgr565.js Normal file
View File

@@ -0,0 +1,49 @@
document.getElementById('convertBtn').onclick = function() {
const fileInput = document.getElementById('imageInput');
const width = parseInt(document.getElementById('width').value, 10);
const height = parseInt(document.getElementById('height').value, 10);
if (!fileInput.files.length) {
alert('Please select an image file.');
return;
}
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const canvas = document.getElementById('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, width, height);
ctx.drawImage(img, 0, 0, width, height);
// Preview
document.getElementById('preview').innerHTML = '';
const previewImg = new Image();
previewImg.src = canvas.toDataURL();
document.getElementById('preview').appendChild(previewImg);
// Get pixel data
const imageData = ctx.getImageData(0, 0, width, height).data;
const buf = new Uint8Array(width * height * 2);
for (let i = 0, j = 0; i < imageData.length; i += 4, j += 2) {
let r = imageData[i];
let g = imageData[i+1];
let b = imageData[i+2];
// Convert to BGR565
let bgr565 = ((b & 0xF8) << 8) | ((g & 0xFC) << 3) | (r >> 3);
// Invert
bgr565 = 0xFFFF - bgr565;
buf[j] = bgr565 & 0xFF;
buf[j+1] = (bgr565 >> 8) & 0xFF;
}
// Download
const blob = new Blob([buf], {type: 'application/octet-stream'});
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = file.name.replace(/\.[^.]+$/, '') + `_${width}x${height}_bgr565inv.raw`;
a.click();
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
};

184
PacoMouseCYD/Platformio/SD/js/loco.js Normal file
View File

@@ -0,0 +1,184 @@
changelanguage();
// Check for Web Browser API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
} else {
alert("File APIs are not fully supported in this browser.");
}
function saveTextAsFile()
{
var textToSave = document.getElementById("inputTextToSave").value;
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
fileNameToSaveAs = fileNameToSaveAs + ".csv";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
function parseCSV()
{
var iconName;
var funcName;
var iconSel;
var textToSave = document.getElementById("inputTextToSave");
var textCSV = textToSave.value;
var lines = textCSV.split("\n");
var information = lines[1].split(";");
var field = document.getElementById("NameLoco");
field.value = information[0];
field = document.getElementById("NumImage");
field.value = information[1];
field = document.getElementById("SpeedMax");
field.value = information[2];
for (let i = 0; i < 29; i++) {
iconName = "iconID" + information[3 + i];
funcName = "F" + i;
iconSel = document.getElementById(funcName);
iconSel.className = iconName;
}
var imgSrc = document.getElementById("imageToShow");
imgSrc.src = "image/" + information[1] + ".bmp";
}
function loadFileAsText()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var loco = document.getElementById("NumLoco");
var locoFileName = fileToLoad.name.split(".");
loco.value = locoFileName[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.onloadend = function(progressEvent)
{
parseCSV();
}
fileReader.readAsText(fileToLoad, "UTF-8");
hideInstrucctions();
}
function loadFileAsImage()
{
var imgSrc = document.getElementById("imageToShow");
var imgNum = document.getElementById("NumImage");
var fileToLoad = document.getElementById("imageToLoad").files[0];
var imgFileName = fileToLoad.name.split(".");
imgNum.value = imgFileName[0];
imgSrc.src = "image/" + imgFileName[0] + ".bmp";
hideInstrucctions();
}
function changeImageLoco()
{
var imgNum = document.getElementById("NumImage");
var imgSrc = document.getElementById("imageToShow");
imgSrc.src = "image/" + imgNum.value + ".bmp";
}
function changelanguage()
{
const languageSelect = document.getElementById('language-select');
elements = document.querySelectorAll(`span[lang]`);
for (let element of elements) {
element.style.display = 'none';
}
var x = languageSelect.selectedIndex;
if (x==0) {elements = document.querySelectorAll(`span[lang="en"]`);}
if (x==1) {elements = document.querySelectorAll(`span[lang="es"]`);}
if (x==2) {elements = document.querySelectorAll(`span[lang="de"]`);}
if (x==3) {elements = document.querySelectorAll(`span[lang="ca"]`); }
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = 'inline-block';
}
};
function selectIcon(value)
{
var allIcon = document.getElementById('iconAll');
allIcon.style.display = 'block';
var funcNum = document.getElementById('NumFunc');
funcNum.value = value;
var iconFunc = document.getElementById('Fx');
const iconText = "F" + value;
iconFunc.innerHTML = iconText;
}
function updateIcon(value)
{
var funcNum = document.getElementById('NumFunc');
const iconName = "iconID" + value;
const funcName = "F" + funcNum.value;
var iconSel = document.getElementById(funcName);
iconSel.className = iconName;
var allIcon = document.getElementById('iconAll');
allIcon.style.display = 'none';
hideInstrucctions();
}
function hideInstrucctions()
{
var showIns = document.getElementById('instruc');
showIns.style.display = 'none';
}
function createTextCSV()
{
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs")
var textToSave = document.getElementById("inputTextToSave");
var textCSV = "Name;Image;Vmax;F0;F1;F2;F3;F4;F5;F6;F7;F8;F9;F10;F11;F12;F13;F14;F15;F16;F17;F18;F19;F20;F21;F22;F23;F24;F25;F26;F27;F28\n";
var loco = document.getElementById("NumLoco");
var field = document.getElementById("NameLoco");
var funcName;
var iconSel;
if (loco.value != "") {
textCSV = textCSV + field.value;
field = document.getElementById("NumImage");
if (field.value == "")
field.value = "0";
textCSV = textCSV + ";" + field.value;
field = document.getElementById("SpeedMax");
if (field.value == "")
field.value = "100";
textCSV = textCSV + ";" + field.value ;
for (let i = 0; i < 29; i++) {
funcName = "F" + i;
iconSel = document.getElementById(funcName).className.split("iconID");
iconSel = iconSel[1];
textCSV = textCSV + ";" + iconSel ;
}
textCSV = textCSV + "\n"
textToSave.value = textCSV;
fileNameToSaveAs.value = loco.value;
saveTextAsFile();
field = document.getElementById('instruc');
field.style.display = 'block';
}
}

31
PacoMouseCYD/Platformio/SD/loco/loco.md Normal file
View File

@@ -0,0 +1,31 @@
From an ESP32 perspective, replacing .csv files with .yaml files for rarely loaded configuration is not costly in terms of performance or memory, as long as:
The YAML files are not excessively large.
You use a lightweight YAML parser (such as arduino-yaml or a minimal C++ YAML parser).
Configuration is only loaded occasionally (not in a tight loop).
Pros of YAML:
More readable and maintainable for complex or nested data.
Supports comments and richer data structures.
Cons:
Slightly more code and memory required for parsing compared to simple CSV.
Fewer lightweight YAML parsers available for microcontrollers than CSV/token-based parsing.
Summary:
If your configuration is not huge and is only loaded at startup or on demand, switching to YAML is reasonable and will not significantly impact ESP32 performance or memory usage. Just choose a minimal YAML parser suitable for embedded systems.
So format will be
```yaml
Name: "Loco name"
Image: "File name"
Vmax: <speed>
Functions:
F0:
F1:
F2:
...
F28:
Decoder:
Brand:
```