Editor Save icon

[cicciocb]

Following the requests received recently, I implemented some improvements of the Editor Page in the version 1.53.1

• Introduced a visual cue: the "save" icon now appears with a distinctive red background when code modifications occur without saving.
• Implemented a confirmation message prompt when attempting to run modified but unsaved code.
• Implemented a confirmation message prompt when attempting to switch to the other tabs (Output, Config, or File Manager) after modifying but not saving the code.

This is the "normal" icon

image.png

And this is the icon when the text has been modified but not yet saved

image.png

This message is shown when trying to run a program not saved

image.png

And this message is shown when trying to leave the editor before saving the program

image.png

Please test it and give me your feedback / suggestions

p.s.
Do not ask me to change the text of the message shown when the page changes as this is imposed by the WEB browser.

[bedesign]

Some years ago I made a web app (that I use daily)
it includes a toggle pop-up notepad,
where the save button is visible only if
new/changed text is present in the editor field.

Attached are some extracted related fragments
of the code, in case it could add any more ideas.

Code: [Local Link Removed for Guests]

#storeBut {
               float: left;
               background:#eae9ca;
               color: #008300;
             }

<div id="buttLine">
  <button id="storeBut">&#x1F4CC; Save</button>
  <button id="recallBut">Recall from saved</button>
  <button id="delFieldBut">Erase text field</button>
  <button id="deleteBut">Erase everything saved</button>
</div>


<script>

// these events activates logic for button display
document.getElementById("pad").addEventListener("keyup", checkStore_TfieldStatus);
document.getElementById("pad").addEventListener("touchend", checkStore_TfieldStatus);

var txtCont;
var storCont;

function retrieveStored() {

         // if stored data exist, show
            if (localStorage.padkey !== "") {
                storCont = localStorage.padkey;
                document.getElementById("pad").innerHTML = storCont;
            }

             // faul-fix, there is a more proper way to prevent realtime thread runaway
             TimeFix();
          };

function TimeFix() {
    setTimeout(checkStore_TfieldStatus, 45);
    };

// decide what buttons to show
    function checkStore_TfieldStatus() {
             storCont = localStorage.padkey;
             txtCont = document.getElementById("pad").innerHTML;


             // do not show the Save button if the text-field and stored content is equal,
             // or if the text-field is emty
             
             if (storCont == txtCont || txtCont == "")
                 { document.getElementById("storeBut").style.visibility = "hidden";
                 }

            else { document.getElementById("storeBut").style.visibility = "visible";
                 }


// --------------- Other optional buttons to show/not show --------------

                // if stored data exist and the text-field is empty,
                // show button for recall of stored data -
                // (the textfield has to be empty before a recall)
               
                  if (storCont !== "" && txtCont == "")
                      { document.getElementById("recallBut").style.visibility = "visible";
                      }

                else { document.getElementById("recallBut").style.visibility = "hidden";
                     }

              // if the text-field is not empty, show the button for its erase
              if (txtCont !== "")
                      { document.getElementById("delFieldBut").style.visibility = "visible";
                      }

             else { document.getElementById("delFieldBut").style.visibility = "hidden";
                  }

               // if the data store is not empty, show the button for its erase
              if (storCont !== "")
                      { document.getElementById("deleteBut").style.visibility = "visible";
                      }

             else { document.getElementById("deleteBut").style.visibility = "hidden";
                  }

             if (document.getElementById("pad").innerHTML == "undefined")
                 {
                   localStorage.padkey = "";
                   document.getElementById("pad").innerHTML = "Intro info in the text-field ...";

                 }
     };

// --------------------------------------------


// -------- Button Actions --------

// Save
document.getElementById("storeBut").addEventListener("click", function() {
localStorage.padkey = document.getElementById("pad").innerHTML;
checkStore_TfieldStatus();
});


// Show Stored Data
document.getElementById("recallBut").addEventListener("click", function() {
document.getElementById("pad").innerHTML = localStorage.padkey;
checkStore_TfieldStatus();
});

// Erase the Text-field
document.getElementById("delFieldBut").addEventListener("click", function() {
document.getElementById("pad").innerHTML = "";
checkStore_TfieldStatus();
});


// Erase Stored Data
document.getElementById("deleteBut").addEventListener("click", function() {
if (confirm("Warnings ....") !== true) {
  checkStore_TfieldStatus();
} else {
  localStorage.padkey = "";
}

checkStore_TfieldStatus();
});

</script>

[Electroguard]

Thanks for the Editor improvements, Francesco.
I've lost count of how many times I've loaded the latest saved script success to progress it further, but then from habit have saved edits back over the top, resulting in a broken disaster instead of the earlier success I had started with.

Having just upgraded to 1.53.2, it was a pleasant surprise to be warned that a newly-loaded script had not been saved, which is a very welcome improvement that I know will save much frustration and inconvenience.

[Jan Volk]

Thank you Francesco for the improvement in the editor.
Perhaps I wasn't the only one where the code was lost after shutdown?
It is very noticeable now, but it is also important.

Jan

[Electroguard]

You definitely are not the only one who has lost code Jan, but you were the only one willing to admit it !
But now, no more muscle-memory clicking Save just before brain thinks "don't forget to change filename before sav... arrghh, too late again".

[cicciocb]

You definitely are not the only one who has lost code Jan, but you were the only one willing to admit it !
But now, no more muscle-memory clicking Save just before brain thinks "don't forget to change filename before sav... arrghh, too late again".

Maybe a local autosave mechanism could be useful?

[Jan Volk]

That would also be nice, automatically with an adjustable time if necessary, taking into account that flash memory is subject to aging when writing.
And as for capturing Font by clicking the Wlog location and Ctrl + Shift + F3 works well. If I clean up my computer, these settings will disappear afterwards.
And as far as the background colors (dark mode) are concerned, it works excellently. It takes some searching for the right colors. I disable this mode by changing annex32.css to annex32.css.bas and make my own notes in this document.

Jan

[cicciocb]

That would also be nice, automatically with an adjustable time if necessary, taking into account that flash memory is subject to aging when writing.

The autosave that I imagine is on the local disk so you could store as much backup you want.
The idea is, as soon as you save on the module, a local copy is downloaded at the same time that will be automatically renamed by the browser

And as for capturing Font by clicking the Wlog location and Ctrl + Shift + F3 works well. If I clean up my computer, these settings will disappear afterwards.

The setup is stored using the browser local storage so if you clean the browser (cookies, cache, ...) this setting is lost

[Electroguard]

Auto-save might be a useful option for some, but its the opposite of my problem.
To avoid working on 'stale' browser content (which I have done countless times) I am trying to get into the habit of keep re-LOADing the latest file.
But unless I remember to change the file name straight afterwards, subconscious muscle-memory clicks Save after new edits, before brain remembers to increment the filename... causing the original to be overwritten and lost (which I have also done countless times).
It is very frustrating and annoying to remember and undo all the edits, just to try to get back to yesterday.

So I would not want to auto-save new edits unless the filename could be automatically incremented to prevent overwriting.
But just the ability to optionally auto-increment the filename with every Save would be wonderful by itself.

I do try to remember to periodically update the filename in a first line comment, but I don't remember often enough.
The script can read its current filename and esp date and time which can be sent to wlog, but that is lost with browser disconnect.
I cannot think of a way to get that info automatically into the script, and there is no point saving to BAS.RTCMEM$ which will be lost.
BUT...if the filename (and other info) could be saved to EEROM$ it could be read back at startup to ensure always working on the latest script.
Is just vague thoughts at the moment, though.

[cicciocb]

My idea is to download the file automatically (and renamed automatically, eventually with date/time) on the PC every time you save on the module. This means that you'll have always a copy of the file on the PC (and not on the module otherwise it will be very fast saturated)