Provide "copy as base64" option in uploaded assets

[chinchang]

Yes, I'd be looking for at a minimum images to be inlined; Kaboom does accept base64 strings in loadSprite and that is how I was using the npm inlining package to do so. I don't know how you've currently got Web Maker set up to inline its javascript when downloading a Web Maker project, but the inlining package I use (and I think most of the npm inlining packages I looked at) automatically converts src attributes for css, js, and img tags to base 64. I would then do:

loadSprite("bean", document.getElementByID('idOfImgSource').src)

or something similar.

If Web Maker converted html audio tags that would be a bonus and could loadSound() similarly.

Alternatively, if Web Maker somehow just converted any Asset I uploaded to a base64 dataURL (perhaps by identifying the proper daraURL format by the uploaded file's extension?) and then let me know how I could access the dataURL in the javascript section of my Web Maker project that even be a better solution (e.g.: upload oceanSounds.wav to Web Maker 'assets' and then access that sound file by inserting an alias like dataURLoceanSounds into a function by writing something like:

loadSound("ocean", dataURLoceanSounds)

A Web Maker user could then load other Assets into Kaboom the same way and use it to upload Assets into projects containing non-Kaboom libraries to be inlined in other Web Maker projects.

PS,

On a related request, would you also consider (perhaps in 'settings') enabling an option to inline the kaboom.js engine itsel into the downloaded single-file html instead of a http: url to download the kaboom.engine? Would enlarge the size of the download single-file html but enables Web Maker to be my 'one' IDE to create web apps that don't require any internet connection at all to run.

😊

Originally posted by @SugarRayLua in https://github.com/chinchang/web-maker/issues/554#issuecomment-2100770608

[SugarRayLua]

Great, thank you so much, @chinchang for considering this! 😊

[chinchang]

@SugarRayLua Launched first attempt at this -> https://x.com/webmakerApp/status/1809870040700784948 HTML assets are all inlined now! Let me know how it works for you.

[SugarRayLua]

Great, thank you very much, @chinchang. Are the html inlined assets then only part of the pro plan?

[chinchang]

No no, it is there for everyone :)

[SugarRayLua]

Thanks, @chinchang, at your convenience, can you explain more how to add the assets to be inlined? I presumed I should click on the "assets" tab at the top but that button said it was only available with Pro membership.

[chinchang]

I linked the demo tweet above. But here it is

https://github.com/chinchang/web-maker/assets/379918/44dc5074-90b0-4919-8c8b-d5713d216868

[SugarRayLua]

Thanks, @chinchang, that's how I figured it would work and was simple enough but the asset button is locked for me without PRO account (see attached pic)

[chinchang]

Yup, Assets hosting is part of PRO plan. HTML inline feature is available in free plan. Note: Asset inline doesn't just work with Asset hosting only. Any external remote asset is inlined. And if you want to host within Web Maker itself, you can get the PRO plan.

[SugarRayLua]

That all sounds very reasonable-- thanks for clarifying! Have a good rest of your week.