Initialisation dépot

2026-02-13 11:29:36 +01:00
parent 6575e6010d
commit cd8f382ed4
69 changed files with 8937 additions and 0 deletions
--- a/SD/LocoEditor.html
+++ b/SD/LocoEditor.html
@@ -0,0 +1,186 @@
+<html>
+
+<!DOCTYPE html> 
+<html lang="en">
+<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<title>PacoMouseCYD Loco Editor</title>
+<link rel="stylesheet" href="css/style.css">
+
+</head>
+<body>
+
+<div class="headertxt">
+<b>PacoMouseCYD Loco Editor</b>
+</div>
+
+<div class="dropdown dropdown-dark">
+<span lang="es"><img class='spanish'></span>
+<span lang="ca"><img class='catalan'></span>
+<span lang="en"><img class='english'></span>
+<span lang="de"><img class='deutsch'></span>
+
+<select id="language-select" class="dropdown-select" onchange="changelanguage();">
+  <option value="en">English</option>
+  <option value="es">Castellano</option>
+  <option value="de">Deutsch</option>
+  <option value="ca">Catal&agrave;</option>
+</select>
+</div>
+
+<div class="labeltxt">
+<table border='0' cellspacing='0' cellpadding='3' width="100%">
+<tr><td>
+  <span lang="es">Locomotora:</span>
+  <span lang="ca">Locomotora:</span>
+  <span lang="en">Locomotive:</span>
+  <span lang="de">Lokomotive:</span>
+</td><td> <input type="text" id="NumLoco" class="texttxt" placeholder="?"></td></tr>
+<tr><td>
+
+  <span lang="es">Nombre:</span>
+  <span lang="ca">Nom:</span>
+  <span lang="en">Name:</span>
+  <span lang="de">Name:</span>
+
+</td><td> <input type="text" id="NameLoco" class="texttxt" ></td></tr>
+<tr><td>
+  <span lang="es">Vel. max.:</span>
+  <span lang="ca">Vel. max.:</span>
+  <span lang="en">Speed max.:</span>
+  <span lang="de">Geschw.max.:</span>
+</td><td> <input type="text" id="SpeedMax" class="texttxt"> km/h</td></tr>
+<tr><td><br></td></tr>
+<tr><td>
+  <span lang="es">Archivo CSV:</span>
+  <span lang="ca">Arxiu CSV:</span>
+  <span lang="en">CSV File:</span>
+  <span lang="de">CSV-Datei:</span>
+</td><td>loco/  <input type="file" id="fileToLoad" class="texttxt"></td> </tr>
+<tr><td></td><td><button class="buttontxt" onclick="loadFileAsText()">
+  <span lang="es">Cargar ...</span>
+  <span lang="ca">Carregar ...</span>
+  <span lang="en">Load ...</span>
+  <span lang="de">Laden ...</span>
+</button><td></tr>
+</table>
+</div>
+
+<div class="labeltxt">
+<table border='0' cellspacing='0' cellpadding='3' width="100%">
+<tr><td>
+  <span lang="es">Imagen:</span>
+  <span lang="ca">Imatge:</span>
+  <span lang="en">Image:</span>
+  <span lang="de">Bild:</span>
+</td><td> <input type="text" id="NumImage" class="texttxt" placeholder="?" onChange="changeImageLoco();"></td></tr>
+<tr><td><br><br><br></td><td><img src="image/0.bmp" id="imageToShow" width="190" height="40"></td></tr>
+<tr><td>
+  <span lang="es">Archivo BMP:</span>
+  <span lang="ca">Arxiu BMP:</span>
+  <span lang="en">BMP File:</span>
+  <span lang="de">BMP-Datei:</span>
+</td><td>image/ <input type="file" id="imageToLoad" class="texttxt"></td> </tr>
+<tr><td></td><td><button class="buttontxt" onclick="loadFileAsImage()">
+  <span lang="es">Cargar ...</span>
+  <span lang="ca">Carregar ...</span>
+  <span lang="en">Load ...</span>
+  <span lang="de">Laden ...</span>
+</button><td></tr>
+</table>
+</div>
+
+<div class="labeltxt">
+  <span lang="es">Funciones:</span>
+  <span lang="ca">Funcions:</span>
+  <span lang="en">Functions:</span>
+  <span lang="de">Funktionen:</span>
+  <hr>
+<table>
+<tr><td>F0</td><td>F1</td><td>F2</td><td>F3</td><td>F4</td><td>F5</td><td>F6</td><td>F7</td><td>F8</td><td>F9</td></tr>
+<tr><td><img id="F0" class="iconID3" onClick="selectIcon(0);"></td><td><img id="F1" class="iconID2" onClick="selectIcon(1);"></td><td><img id="F2" class="iconID2" onClick="selectIcon(2);"></td>
+    <td><img id="F3" class="iconID2" onClick="selectIcon(3);"></td><td><img id="F4" class="iconID2" onClick="selectIcon(4);"></td><td><img id="F5" class="iconID2" onClick="selectIcon(5);"></td>
+	<td><img id="F6" class="iconID2" onClick="selectIcon(6);"></td><td><img id="F7" class="iconID2" onClick="selectIcon(7);"></td><td><img id="F8" class="iconID2" onClick="selectIcon(8);"></td>
+	<td><img id="F9" class="iconID2" onClick="selectIcon(9);"></td></tr>
+<tr><td>F10</td><td>F11</td><td>F12</td><td>F13</td><td>F14</td><td>F15</td><td>F16</td><td>F17</td><td>F18</td><td>F19</td></tr>
+<tr><td><img id="F10" class="iconID2" onClick="selectIcon(10);"></td><td><img id="F11" class="iconID2" onClick="selectIcon(11);"></td><td><img id="F12" class="iconID2" onClick="selectIcon(12);"></td>
+    <td><img id="F13" class="iconID2" onClick="selectIcon(13);"></td><td><img id="F14" class="iconID2" onClick="selectIcon(14);"></td><td><img id="F15" class="iconID2" onClick="selectIcon(15);"></td>
+	<td><img id="F16" class="iconID2" onClick="selectIcon(16);"></td><td><img id="F17" class="iconID2" onClick="selectIcon(17);"></td><td><img id="F18" class="iconID2" onClick="selectIcon(18);"></td>
+	<td><img id="F19" class="iconID2" onClick="selectIcon(19);"></td></tr>	
+<tr><td>F20</td><td>F21</td><td>F22</td><td>F23</td><td>F24</td><td>F25</td><td>F26</td><td>F27</td><td>F28</td></tr>
+<tr><td><img id="F20" class="iconID2" onClick="selectIcon(20);"></td><td><img id="F21" class="iconID2" onClick="selectIcon(21);"></td><td><img id="F22" class="iconID2" onClick="selectIcon(22);"></td>
+    <td><img id="F23" class="iconID2" onClick="selectIcon(23);"></td><td><img id="F24" class="iconID2" onClick="selectIcon(24);"></td><td><img id="F25" class="iconID2" onClick="selectIcon(25);"></td>
+	<td><img id="F26" class="iconID2" onClick="selectIcon(26);"></td><td><img id="F27" class="iconID2" onClick="selectIcon(27);"></td><td><img id="F28" class="iconID2" onClick="selectIcon(28);"></td>
+	</tr>
+</table>  
+
+<div id="iconAll" style="display:none">
+<hr>
+<table>
+<tr><td>
+  <span lang="es">Icono para</span>
+  <span lang="ca">Icona per a</span>
+  <span lang="en">Icon for</span>
+  <span lang="de">Symbol f&uuml;r</span>
+</td><td id="Fx">F</td></tr>
+</table>
+<br>
+<table>
+<tr><td><img id="icon1" class="iconID1" onClick="updateIcon(1);"></td><td><img id="icon2" class="iconID2" onClick="updateIcon(2);"></td><td><img id="icon3" class="iconID3" onClick="updateIcon(3);"></td>
+    <td><img id="icon4" class="iconID4" onClick="updateIcon(4);"></td><td><img id="icon5" class="iconID5" onClick="updateIcon(5);"></td><td><img id="icon6" class="iconID6" onClick="updateIcon(6);"></td>
+    <td><img id="icon7" class="iconID7" onClick="updateIcon(7);"></td><td><img id="icon8" class="iconID8" onClick="updateIcon(8);"></td><td><img id="icon9" class="iconID9" onClick="updateIcon(9);"></td>
+    <td><img id="icon10" class="iconID10" onClick="updateIcon(10);"></tr>
+
+<tr><td><img id="icon11" class="iconID11" onClick="updateIcon(11);"></td><td><img id="icon12" class="iconID12" onClick="updateIcon(12);"></td><td><img id="icon13" class="iconID13" onClick="updateIcon(13);"></td>
+    <td><img id="icon14" class="iconID14" onClick="updateIcon(14);"></td><td><img id="icon15" class="iconID15" onClick="updateIcon(15);"></td><td><img id="icon16" class="iconID16" onClick="updateIcon(16);"></td>
+    <td><img id="icon17" class="iconID17" onClick="updateIcon(17);"></td><td><img id="icon18" class="iconID18" onClick="updateIcon(18);"></td><td><img id="icon19" class="iconID19" onClick="updateIcon(19);"></td>
+    <td><img id="icon20" class="iconID20" onClick="updateIcon(20);"></tr>
+
+<tr><td><img id="icon21" class="iconID21" onClick="updateIcon(21);"></td><td><img id="icon22" class="iconID22" onClick="updateIcon(22);"></td><td><img id="icon23" class="iconID23" onClick="updateIcon(23);"></td>
+    <td><img id="icon24" class="iconID24" onClick="updateIcon(24);"></td><td><img id="icon25" class="iconID25" onClick="updateIcon(25);"></td><td><img id="icon26" class="iconID26" onClick="updateIcon(26);"></td>
+    <td><img id="icon27" class="iconID27" onClick="updateIcon(27);"></td><td><img id="icon28" class="iconID28" onClick="updateIcon(28);"></td><td><img id="icon29" class="iconID29" onClick="updateIcon(29);"></td>
+    <td><img id="icon30" class="iconID30" onClick="updateIcon(30);"></tr>
+	
+<tr><td><img id="icon31" class="iconID31" onClick="updateIcon(31);"></td><td><img id="icon32" class="iconID32" onClick="updateIcon(32);"></td><td><img id="icon33" class="iconID33" onClick="updateIcon(33);"></td>
+    <td><img id="icon34" class="iconID34" onClick="updateIcon(34);"></td><td><img id="icon35" class="iconID35" onClick="updateIcon(35);"></td><td><img id="icon36" class="iconID36" onClick="updateIcon(36);"></td>
+    <td><img id="icon37" class="iconID37" onClick="updateIcon(37);"></td><td><img id="icon38" class="iconID38" onClick="updateIcon(38);"></td><td><img id="icon39" class="iconID39" onClick="updateIcon(39);"></td>
+    <td><img id="icon40" class="iconID40" onClick="updateIcon(40);"></tr>
+</table>
+</div>
+</div>
+
+<div id="instruc" class="labeltxt" style="display:none">
+<center>
+<span lang="es">Copia el archivo .csv de la carpeta <b>Descargas</b> del ordenador a la carpeta <b>loco</b> de la SD</span>
+<span lang="ca">Copia el fitxer .csv de la carpeta <b>Desc&agrave;rregues</b> de l'ordinador a la carpeta <b>loco</b> de la targeta SD</span>
+<span lang="en">Copy the .csv file from the <b>Downloads</b> folder on your computer to the <b>loco</b> folder on your SD card</span>
+<span lang="de">Kopieren Sie die .csv-Datei aus dem <b>Download</b>-Ordner auf Ihrem Computer in den Ordner <b>loco</b> auf Ihrer SD-Karte.</span>
+</center>
+</div>
+
+<div id="saveCSV">
+<center>
+<table><tr>
+<td>
+<button class="buttontxt"  style="font-size: 40px;padding: 20px 60px;" onclick="createTextCSV()">
+  <span lang="es">Guardar ...</span>
+  <span lang="ca">Desar ...</span>
+  <span lang="en">Save ...</span>
+  <span lang="de">Speichern ...</span>
+</button>
+</td><td>
+<img class='paco'>
+</td></tr>
+</table>
+</center>
+</div>
+
+
+ <div  style="display:none">
+<textarea id="inputTextToSave" cols="80" rows="5"></textarea>
+<input id="inputFileNameToSaveAs"></input>
+ <input type="text" id="NumFunc" value="2" style="display:block">
+</div>
+ 
+<script src="js/loco.js"></script> 
+</body>
+</html>
--- a/SD/acc/panel.csv
+++ b/SD/acc/panel.csv
@@ -0,0 +1,18 @@
+Nombre
+Panel 0
+Panel 1
+Panel 2
+Panel 3
+Panel 4
+Panel 5
+Panel 6
+Panel 7
+Panel 8
+Panel 9
+Panel 10
+Panel 11
+Panel 12
+Panel 13
+Panel 14
+Panel 15
+
--- a/SD/bgr565.html
+++ b/SD/bgr565.html
@@ -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>
--- a/SD/css/bgr565.css
+++ b/SD/css/bgr565.css
@@ -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; 
+}
--- a/SD/css/style.css
+++ b/SD/css/style.css
--- a/SD/image/0.bmp
+++ b/SD/image/0.bmp
--- a/SD/image/1.bmp
+++ b/SD/image/1.bmp
--- a/SD/image/1000.bmp
+++ b/SD/image/1000.bmp
--- a/SD/image/1001.bmp
+++ b/SD/image/1001.bmp
--- a/SD/image/1002.bmp
+++ b/SD/image/1002.bmp
--- a/SD/image/1003.bmp
+++ b/SD/image/1003.bmp
--- a/SD/image/1004.bmp
+++ b/SD/image/1004.bmp
--- a/SD/image/1005.bmp
+++ b/SD/image/1005.bmp
--- a/SD/image/1006.bmp
+++ b/SD/image/1006.bmp
--- a/SD/image/1007.bmp
+++ b/SD/image/1007.bmp
--- a/SD/image/1008.bmp
+++ b/SD/image/1008.bmp
--- a/SD/image/1009.bmp
+++ b/SD/image/1009.bmp
--- a/SD/image/1010.bmp
+++ b/SD/image/1010.bmp
--- a/SD/image/1011.bmp
+++ b/SD/image/1011.bmp
--- a/SD/image/1012.bmp
+++ b/SD/image/1012.bmp
--- a/SD/image/1013.bmp
+++ b/SD/image/1013.bmp
--- a/SD/image/1014.bmp
+++ b/SD/image/1014.bmp
--- a/SD/image/1015.bmp
+++ b/SD/image/1015.bmp
--- a/SD/image/1016.bmp
+++ b/SD/image/1016.bmp
--- a/SD/image/1017.bmp
+++ b/SD/image/1017.bmp
--- a/SD/image/2.bmp
+++ b/SD/image/2.bmp
--- a/SD/image/3.bmp
+++ b/SD/image/3.bmp
--- a/SD/image/4.bmp
+++ b/SD/image/4.bmp
--- a/SD/image/5.bmp
+++ b/SD/image/5.bmp
--- a/SD/image/6.bmp
+++ b/SD/image/6.bmp
--- a/SD/image/7.bmp
+++ b/SD/image/7.bmp
--- a/SD/image/8.bmp
+++ b/SD/image/8.bmp
--- a/SD/image/9.bmp
+++ b/SD/image/9.bmp
--- a/SD/image/image.md
+++ b/SD/image/image.md
@@ -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.
--- a/SD/image/logo.bmp
+++ b/SD/image/logo.bmp
--- a/SD/index.html
+++ b/SD/index.html
@@ -0,0 +1,5 @@
+<html>
+    <body>
+        
+    </body>
+</html>
--- a/SD/js/bgr565.js
+++ b/SD/js/bgr565.js
@@ -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);
+};
--- a/SD/js/loco.js
+++ b/SD/js/loco.js
@@ -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';
+	}
+}
+  
+
+  
--- a/SD/loco/15.csv
+++ b/SD/loco/15.csv
@@ -0,0 +1,2 @@
+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
+Ce 6/8 III;1012;75;3;6;16;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/2000.csv
+++ b/SD/loco/2000.csv
@@ -0,0 +1,2 @@
+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
+Talgo;1006;160;3;6;17;9;10;14;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/242.csv
+++ b/SD/loco/242.csv
@@ -0,0 +1,2 @@
+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
+242F-2209;1008;100;3;6;17;9;10;15;7;8;20;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/252.csv
+++ b/SD/loco/252.csv
@@ -0,0 +1,2 @@
+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
+252 Altaria;1009;140;3;6;17;9;10;15;7;8;20;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/3.csv
+++ b/SD/loco/3.csv
@@ -0,0 +1,2 @@
+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
+Platanito;1004;120;3;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/319.csv
+++ b/SD/loco/319.csv
@@ -0,0 +1,2 @@
+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
+319-309 Taxi;1003;120;3;6;17;10;9;4;5;8;14;15;20;12;15;16;18;19;2;13;11;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/321.csv
+++ b/SD/loco/321.csv
@@ -0,0 +1,2 @@
+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
+321 025-9 Taxi;1017;120;3;6;16;17;14;5;33;32;30;6;16;36;26;26;23;28;29;6;6;9;19;2;2;2;2;2;2;2;2
--- a/SD/loco/4.csv
+++ b/SD/loco/4.csv
@@ -0,0 +1,2 @@
+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
+Vapor 003;1001;80;3;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/5.csv
+++ b/SD/loco/5.csv
@@ -0,0 +1,2 @@
+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
+269 Cercanias;1000;140;3;2;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/6.csv
+++ b/SD/loco/6.csv
@@ -0,0 +1,2 @@
+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
+Camello Cercan.;1005;140;3;4;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/79.csv
+++ b/SD/loco/79.csv
@@ -0,0 +1,2 @@
+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
+Mikado;1002;80;3;2;4;6;8;10;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2;2
--- a/SD/loco/99.csv
+++ b/SD/loco/99.csv
@@ -0,0 +1,2 @@
+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
+Villacanas;1007;85;3;4;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1
--- a/SD/loco/loco.md
+++ b/SD/loco/loco.md
@@ -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:
+```