• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

Save files in HTML5

Javi400

New member
Joined
Jan 21, 2023
Messages
14
Hi!
I am making a map editor in HTML5 target. How can I do so that the user can save the map on his computer? Can I open a savedialog type window?
 
Nothing build into CX. I have to study how other web base editors do it.
 
It's super easy in Cerberus-X. Look here.

Mind you that i have not checked Safari yet it might need uncheck safety checks or you might go around it using a modification.

This works on Chrome and Firefox amongst others though.

Example
Code:
' Save a string on the HTML5 target

Import mojo2

Import "save.js"
Extern
Function saveString(content:String)
Public

Function Main()
    New MyApp
End

Global canvas:Canvas

Class MyApp Extends App

    Method OnCreate()
        canvas=New Canvas
        SetUpdateRate 0
        saveString "It works!"
    End Method
   
    Method OnUpdate()
        If MouseHit(0) Then saveString "It works!"
    End Method
   
    Method OnRender()
        canvas.Clear
        canvas.Flush
    End
   
End Class
save.js
Code:
function saveString(content){
    uriContent = "data:application/octet-stream," + encodeURIComponent(content);
    window.open(uriContent,"Download File");
}

function loadFile(file, buf){
    var reader = new FileReader();
    reader.onloadend = function (){
        var rawData = reader.result;
        if (rawData == null){return;}
        buf._Init(rawData);
    }
    reader.readAsArrayBuffer(file);
    return buf
}
 
If you want to add that file requester you need to know that is a feature provided by the browser and not the JavaScript language itself so this is as far as you can get using state of the art web coding.

You can upload using a requester often that is supplied by the browser but not download. The user might be confused and acciendelty overwrite important files, so this is why they choose to do that. Everything goes to a "download folder", set by the browser, and any filenames that are the same gets chane so they are neveer overwritten. This functinality is inbuilt in all platforms.

EDIT If you are super into getting a file requester there is hope on Chrome they are developing a new API for that. But it is still in development so I would not use it yet. It's interesting progress.
 
Last edited:
Update that works also with Safari browser:

Code:
function saveString(content) {
    const blob = new Blob([content], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'filename.txt');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }
 
Hey!, thank you very much for your help, I understood it very well with the example, I'll try it :)
 
Back
Top Bottom