Select slot where to download the program

[maehw]

Is your feature request related to a problem? Please describe.
Currently, programs are only downloaded to program slot #0.

See also a comment in the code:

        const programNumber = 0; // TODO: make program slot selectable
        let success = await downloadProgram(programNumber, rcxBinary);

Describe the solution you'd like
A UI element to select the program slot when (or before) requesting a program download.

[maehw]

Hi @Jonnhey, tagging you here as this might interest you.

First draft of the (local) changes in the UI for program slot selection (to be tested):

diff --git a/src/ide/index.html b/src/ide/index.html
index 4ef3c56..f463976 100644
--- a/src/ide/index.html
+++ b/src/ide/index.html
@@ -12,7 +12,14 @@
       <button id="compileBtn">🧱 Build</button>
       <!-- <button id="usbConnectBtn">🔗 USB Connect</button> -->
       <button id="serialConnectBtn">🔗 Serial Connect</button>
-      <button id="downloadBtn">⬇️ Download program to RCX</button>
+      <button id="downloadBtn">⬇️ Download program to RCX slot </button>
+      <select id="programNumber">
+        <option value="0" selected>0</option>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+      </select>
       <a href="../nqc/blocknqc/index.html" target="_blank">↗️🧱 Try BlockNQC</a>
     </div>
     <button id="clearLogBtn">🧹 Clear log</button>

diff --git a/src/ide/main.js b/src/ide/main.js
index 9254d85..ddaec25 100644
--- a/src/ide/main.js
+++ b/src/ide/main.js
@@ -26,6 +26,7 @@ const clearLogBtn = document.getElementById('clearLogBtn');
 const codeArea = document.getElementById('codeArea');
 const logArea = document.getElementById('logArea');
 const lineNumbers = document.querySelector('.line-numbers');
+const programNumberSelection = document.getElementById('programNumber');
 
 let codeModified = true; // code modified after build?
 let serialConnected = false;
@@ -241,7 +242,7 @@ async function clickProgramDownload() {
           showInfoMsg("❗ Code has been modified after last build. Consider re-building the current version of the code!");
         }
 
-        const programNumber = 0; // TODO: make program slot selectable
+        let programNumber = programNumberSelection.value;
         let success = await downloadProgram(programNumber, rcxBinary);
         if(success) {
             showInfoMsg("️✅ Download of program succeeded! 🎉 " +

diff --git a/src/ide/styles.css b/src/ide/styles.css
index a6eb285..23a3d56 100644
--- a/src/ide/styles.css
+++ b/src/ide/styles.css
@@ -137,3 +137,16 @@ footer {
 .footer-links a:last-child {
   margin-right: 30px;
 }
+
+#programNumber {
+  border: none;
+  background-color: #ffdb00;
+  color: #333;
+  border: none;
+  padding: 0px 2px;
+  margin-right: 10px;
+}
+
+.left-buttons #downloadBtn {
+  margin-right: 0px;
+}

diff --git a/src/communication/rcxCommon.js b/src/communication/rcxCommon.js
index 80803fe..645a065 100644
--- a/src/communication/rcxCommon.js
+++ b/src/communication/rcxCommon.js
@@ -415,7 +415,7 @@ async function downloadProgram(programNumber, rcxBinary) {
     }
 
     if(success) {
-        showInfoMsg("🛠️ Preparing program download...");
+        showInfoMsg("🛠️ Preparing program #" + programNumber + " download...");
 
         success = await selectProgram(programNumber);

When I find time and access rights, I'll push this to a new branch.

I think we need to discuss if the slots should be labeled 0..4 or 1..5.
Internally, they are called 0..4 - but this may be confusing for the user.
IIRC the RCX' display shows 1..5.

---

Edit: preview of what this looks like in my Chrome browser:

[Jonnhey]

I prefer 1 to 5, 0 to 4 might confuse the user, and thanks for the update!

[maehw]

Changed to 1..5.

Should be fixed in 460bcd2 (main branch this time) - but only in the English version so far.

Tested in the IDE with two different sounds:

E.g. build and download to slot #3:

task main() {
  PlaySound(SOUND_UP);
}

E.g. build and download to slot #4:

task main() {
  PlaySound(SOUND_DOWN);
}

E.g. build and download to slot #5:

task main() {
  PlaySound(SOUND_LOW_BEEP);
}

You can then cycle through the programs and running them plays the different sounds.