OXT Cloud IDE v0.00000001

by **OpenXTalkPaul** » Tue Oct 22, 2024 2:19 am

It's just occurred to me that JavaScript can make iFrames elements and set the contents of them 'on the fly', which I suppose is a bit like having a 'browser widget' inside of a web page.

If you paste this into OXT Playground web stack 'input' text area, and then click 'Do Console Text as Javascript' inside the stack, you'll get the idea of what I'm going on about:

Code: Select all

const iframe = document.createElement("iframe");
iframe.src = "https://openxtalk-org.github.io/OpenXTalk-Playground/";
iframe.width = 1000 ;
iframe.height = 1000 ;
iframe.id = 'subpage' ;
document.body.appendChild(iframe);

That creates a new frame in the web page and loads a second instance of the web stack into that frame (but since it's of the same origin site, it doesn't need to re-download the 28mb Emscripten Engine)

Then it occurred to me that HyperSim's Engine could be embedded into our Emscripten powered 'web-stack' and then 'HCSim' based 'web-stacks' could be generated and previewed while both kinds of 'web-stacks' are live inside frames of a single browser window, which offers the chance at building a web-app-standalone-IDE for HCSim. That means no server back-end would be required in order to create HTML5/HCsim based 'web-stacks' and it would be usable on just about anything that has a modern web-browser, and the outputs 'stacks' are HTML/JS pages, which could then be wrapped in an offline web-app-to-desktop-app wrapper like Electron if you wanted an off-line desktop app. HCSim is smaller and loads faster than our Emscripten Engine.

Using this instead of the previous code creates a new frame and writes new web-page content into that frame:

Code: Select all

const iframe = document.createElement("iframe");
iframe.width = 1000 ;
iframe.height = 1000 ;
iframe.id = 'subpage' ;
document.body.appendChild(iframe);
document.getElementById('subpage').contentWindow.document.write("<html><body>Hello world</body></html>");

I know HyperSim already is its own IDE of sorts, but I'd really like to see if I could push that well beyond being a HyperCard-simulation. Being built more on web standards (at least compared to the Emscripten engine being a JS port of a 30+ year old UNIX app) means that a LOT could be done with it. I think it would be fairly easy to add things like an HTML5 video 'player control' (there's already a video on one of the cards of Dan's HCSim intro 'Home' stack). And of course the web already has full support for things like SVG (animated!), and unicode support ready for the odd ancient-Sumerian web-fonts

As much as I still want the direct 'bare-metal' hardware and OS API access of a 'real' desktop app, there's also a hell of a lot on the 'plus' side to 'piggy-backing' an xTalk 'engine' on top of JS+HTML5. Now days with JavaScript on the desktop there's quite a large ecosystem of things like Node.js , React Native, JSX (JavaScript for Automation), offline-WebAssembly, etc. Web-app-wrappers can be less 'sand-boxed' than running inside a web-browser, for example 'Electron' apps can run shell scripts (Electron was developed by GitHub for 'hackable' code editor Atom, now called 'Pulsar').

by **OpenXTalkPaul** » Thu Oct 17, 2024 12:14 am

OpenXTalkPaul wrote: ↑Wed Jul 03, 2024 5:57 pm https://openxtalk-org.github.io/OpenXTalk-Playground/

Now it plays the HyperCard sound BOING!
Not only that but it plays it pitch-shifted multiple times to form a chord, and does so using only plain web-audio API.

I wrote a lengthy post about having updated this earlier today, but I guess I got side-tracked by RL and never posted it?

Sigh...
Updated this afternoon:
https://openxtalk-org.github.io/OpenXTalk-Playground/

: Screenshot 2024-10-16 at 8.12.27 PM.png (568.66 KiB) Viewed 2722 times

So with the Emscripten engine having an xTalk<>Javascript bridge thereby enabling polyglot programming mixing the two, not only can we use it to access all of HTML5 APIs, like using web audio API to pitch-shift sound samples for use as musical notes, but now, at the low low cost of an additional 40Kb of downloading, the on-screen Piano actually outputs sound, in real-time (or close enough to it so as to be useful) using webaudio-tinySynth.js and thanks to a snippet from General Music library you can change programs (Musical Instrument Sounds) too. Webaudio-tinySynth.js is a fully functional MIDI playback synthesizer engine with 128 instrument sound bank. But don't expect it to sound like a $10K Moog, tinySynth sounds like late 1980s 16 bit Game console quality (think 16bit SEGA), and that's on it's good' setting, and on it's low-quality setting it sounds like early 1980s 'chip-tunes' 8bit game console music. But it works, it can play MIDI file data (so I can get playSentence/'PlayPMD' working on the web), and it's really tiny and self contained.
https://github.com/g200kg/webaudio-tinysynth

There's a slight lag (latency) and it could be a variety of things.
I wonder if it could be smoother without graphics compositing. You see I noticed after deploying that the Piiano's keys highlight color is actually set to be semi-transparent, you can see the background objects blending though it while the 'keys' are pressed, but needn't be. That's comes at cost of extra processing for rendering.

This code will play a MIDI file

Code: Select all

synth.loadMIDI('https://upload.wikimedia.org/wikipedia/commons/5/55/MIDI_sample.mid');
synth.playMIDI('https://upload.wikimedia.org/wikipedia/commons/5/55/MIDI_sample.mid');

there's also the method .loadMIDIurl() which will play a data URL (which is what I want for passing created MIDI data)

by **OpenXTalkPaul** » Wed Jul 03, 2024 5:57 pm

https://openxtalk-org.github.io/OpenXTalk-Playground/

Now it plays the HyperCard sound BOING!
Not only that but it plays it pitch-shifted multiple times to form a chord, and does so using only plain web-audio API.

by **tperry2x** » Wed Jul 03, 2024 6:12 am

I love the progress on this, and I'm following along too.
I don't have anything constructive to add, so that's why I'm quiet on this topic - however I do find it interesting.

by **OpenXTalkPaul** » Tue Jul 02, 2024 9:51 pm

TerryL wrote: ↑Tue Jul 02, 2024 6:50 pm Paul, please continue with your online IDE experiment and online dictionary. I'm following your progress.

Cool, glad to know that I'm not just talking to myself, haha!

by **TerryL** » Tue Jul 02, 2024 6:50 pm

Paul, please continue with your online IDE experiment and online dictionary. I'm following your progress.

by **OpenXTalkPaul** » Tue Jul 02, 2024 6:19 pm

Import for Text data and image is working.
And Save to file for text in the fld works

by **OpenXTalkPaul** » Tue Jul 02, 2024 2:14 am

Over the weekend I started to clean up this demo stack's UI, and I did some more tinkering around with Web Speech API via Emscripten Engine:
https://openxtalk-org.github.io/OpenXTalk-Playground/

Now you can pick a voice from list retrieved via Web Speech API.
This list may be different depending on the Browser engine and version.

Even if I can't get the thing to save changes to a stack file, I still want at least some IDE functionality, I've added some of he old MetaCard IDE (because that was mostly self-contained) just to play around with this idea. You can make and navigate to new cards in the main stack, create image controls and draw on them, use menu to copy text to the browsers clipboard, and of course the previous xT and JS demo scripts (now placed into menus), but not too much else so far.

: Screenshot 2024-07-01 at 10.17.44 PM.png (242.23 KiB) Viewed 9841 times

FYI: As mentioned previously, there are ways to run the Emscripten Engine without any of the files being 'online',
All the major Browsers all have some sort of method for developers to do this, and you don't even need to run a local HTTP server to do it. And of course there are a few WebApp->DektopApp wrappers around (Electron/V8/Node etc.)

by **OpenXTalkPaul** » Fri Jun 28, 2024 12:51 am

I put up a new version of the OpenXTalk web playground that has some of MetaCard IDE included in it.

https://openxtalk-org.github.io/OpenXTalk-Playground/

Of course IDE tools do us no good if we cannot save/export our edited stack files!

by **OpenXTalkPaul** » Thu Jun 27, 2024 4:42 am

I also want to look into IDBFS FS.sync function, maybe that needs to be called in order to actually write the bytes of a files in memory to an Emscripten attached IDBFS virtual file system?

IDBFS

Note
This file system is only for use when running code inside a browser.

The IDBFS file system implements the FS.syncfs() interface, which when called will persist any operations to an IndexedDB instance.

This is provided to overcome the limitation that browsers do not offer synchronous APIs for persistent storage, and so (by default) all writes exist only temporarily in-memory.

by **OpenXTalkPaul** » Wed Jun 26, 2024 1:28 pm

tperry2x wrote: ↑Wed Jun 26, 2024 5:51 am
OpenXTalkPaul wrote: ↑Wed Jun 26, 2024 2:43 am It's also a productive way to distract myself from doom-scrolling the news feed.
Yeah, Sorry about that. I'll stick to trying to externalise functions and working on other things.

Huh? You've got nothing to be sorry about, quite the opposite, your participltion has been inspiring!

...
Back to the topic:
Unfortunately it seems I spoke too soon about being able to save stacks.

The 'save stack as' command DOES work in Emscripten as long as you save to writeable /tmp/ directory, however it only really saves the changes 'in-memory" (violtile memory), but does NOT save the bytes to the virtual disk's /tmp/ folder, when running in browser. The stack file does show up in the directory's listing but when I read it back byte for byte it is the stack is same as before I made changes. The changes only live on in the copy of the stack that is still in memory, but not in the copy on the virtual disk. If I make a brand-new stack (not from 'template' stack data), I can indeed 'save as' to /tmp/ and it shows in a files listing, but when I try to read it back as a byte stream 'with read from file for binary update', I get zero bytes.

What does work as expected is the open file/write to file/close file pattern, however I have no way to get the bytes of the copy of the stack with the changes I made that exists only in memory in order to pass it to 'write to file'. This is extremely frustrating. It really makes me wish we had that system of 'script-only' for GUI stacks, or an XML-based UI mark-up that I've talked about in the past, because it's no problem at all to import/export plain old text.

It does appears that Emscripten may be set-up to use Node.js File APIs (which can do direct access to a real file-system) when it's running in that environment, but I haven't tested that yet. I'm much more interested in running in a web browser (since we have desktop IDEs already).

I need to do more tests using URL syntax methods, but I think that will yield similar results.

The Emscripten JS that our OXT Engine is encapsulated inside of needs to be updated to newer Emscripten, and it may also need to be modified (use other browser-based virtual file system?) in order to fix this issue, otherwise there's not really any way to do a proper Web IDE with this engine because such a thing would be limited to working on 'script-only' stacks, no binary stack format.

by **tperry2x** » Wed Jun 26, 2024 5:51 am

OpenXTalkPaul wrote: ↑Wed Jun 26, 2024 2:43 am It's also a productive way to distract myself from doom-scrolling the news feed.

Yeah, Sorry about that. I'll stick to trying to externalise functions and working on other things.

by **OpenXTalkPaul** » Wed Jun 26, 2024 2:43 am

FourthWorld wrote: ↑Wed Jun 26, 2024 1:17 am
OpenXTalkPaul wrote: ↑Tue Jun 25, 2024 8:43 pm Have you ever checked out ///_HyperScript + HTMX ?
Briefly. The problem is I don't mind JavaScript, and I haven't been able to figure out a business case for an xTalk-to-web solution, so I just keep on doing what I'm doing and watch others do what they do.

Figure out a business case, I guess that's always been the problem hasn't it?
xTalk is a "solution in search of a problem" (-- IIRC, Bill Atkison said that back in the late 80s).

Personally I do mind JS (and CSS). I've never liked it. I'd rather use Lua or Python (both of which have multiple ports to WASM), than JS. But the reality is that despite being thrown together in five days, a quarter of a century later JS is ubiquitous and not just on the web anymore, so I've wound up having to use it a bit, like or not. But there's never been a programming language I've enjoyed using like I do with xTalk script (not even the somewhat related AppleScript, which I used a lot)

In general, I guess use cases would be the same as any other language that's been written for or ported to web (and there seems to be a helluva lot of them lately)

The use cases I'm interested in (besides an xTalk IDE that runs on web-browser engines), are games, multimedia, and sound & music applications in particular, mostly traditionally "client-side" offline/desktop app sorts of things, but thanks to WASM we're starting to really be able to do desktop-style apps in a browser at acceptable speeds.

There are several stacks, virtual bass guitar, step-writing MIDI composing things. I'd really like to have online. runable from inside web browsers virually anywhere. I don't really care if I use our OXT Emscripten Engine to do it and if I have to load some additional JS libraries to do it (I will), then so be it.

I was also thinking I should deploy Meme-maker as web stack that uses my "GIFArray" library for doing things with animated GIFs. That's not exactly a business use-case. lol.

But that's the thing, I'm into this for fun, learning, keeping my brain active. It's also a productive way to distract myself from doom-scrolling the news feed.

by **FourthWorld** » Wed Jun 26, 2024 1:17 am

OpenXTalkPaul wrote: ↑Tue Jun 25, 2024 8:43 pm Have you ever checked out ///_HyperScript + HTMX ?

Briefly. The problem is I don't mind JavaScript, and I haven't been able to figure out a business case for an xTalk-to-web solution, so I just keep on doing what I'm doing and watch others do what they do.

by **OpenXTalkPaul** » Wed Jun 26, 2024 12:55 am

Here's HyperWordle built with _HyperScript:
https://arhamjain.com/hyperwordle/

by **OpenXTalkPaul** » Tue Jun 25, 2024 8:43 pm

FourthWorld wrote: ↑Tue Jun 25, 2024 5:33 am Direct translation, xTalk to JS, would likely take less than ten years.

Moving xTalk layouts to HTML/CSS doesn't take long at all.

I agree that an xTalk engine for running on the web really doesn't need to have any UI kit of its own. We really only need an xTalk interpreter that speaks Document Object Model. There is a bidirectional bridge in the Emscripten engine so you can use whatever JS APIs you might want, manipulate DOM objects, etc. but yeah it is riding a-top of another engine (the JS engine), and it certainly has it's failings (could be more complete, faster, smaller, less JS more .wasm etc.), but I do want to know all I can about what the OXT emscripten engine can and can't do anyway since it's has been left to the community as-is, and it is the only version of OXT Engine that should run on ANY platform that has a modern web engine.

I'm not at all against the idea of working on some sort of JS<>xTalk transpiler project as well as the OXT IDE, sign me up!
I really don't think it would take as long as 10 years either, but if it did, well I got ten years left in me (hopefully).

In fact, I think it could be built on some existing project that's already geared that way, like HyperCard Sim.
I was able to easily add to that 'engine' some of the missing syntax from our OXT dialect. I even started making sort-of a mini-IDE for creating a 'html standalones' which packs HCS's JS 'engine' + SimScript along with the 'stack'/page.

Have you ever checked out ///_HyperScript + HTMX ? That's another xTalk project that I find very interesting.
I think that is basically the thing you're talking about.

A python <> xTalk transpiler would be great too.
I would absolutely love it if xTalk could rise to the level of the Python ecosystem.

by **FourthWorld** » Tue Jun 25, 2024 5:33 am

OpenXTalkPaul wrote: ↑Tue Jun 25, 2024 12:45 am (WebAssembly IS 'native' web tech now).

Always has been. It's in the name.

But xTalk engines aren't.

They're all about events and objects, the two things WASM doesn't do.

But even C++ to JS seems overkill for xTalks, an engine running inside of an engine next to another engine just to run some scripts on objects.

Browsers natively have scriptable objects.

Direct translation, xTalk to JS, would likely take less than ten years.

Moving xTalk layouts to HTML/CSS doesn't take long at all.

by **OpenXTalkPaul** » Tue Jun 25, 2024 2:03 am

Emscripten was indeed around back in 2013 (compiling to asm.js https://en.wikipedia.org/wiki/Asm.js because WebAssembly 1.0 wasn't introduced until 2017), From Unreal Wikipedia Page:
"In 2013, Epic teamed-up with Mozilla to bring Unreal Engine 3 to the web; using the asm.js sublanguage and Emscripten compiler, they were able to port the engine in four days."

It should probably also be mention that .wasm bitcode modules can be used off line outside of a browser.
And also that nowadays it seems that Emscripten is not the only game in town to compile to .wasm
http://schellcode.github.io/webassembly ... emscripten

I've become a fan of WASM and the whole idea of compiling to platform agnostic byte code.

One more link (saving for myself later)...
This site lists a bunch of stuff that was made portable to web via Emscripten and/or WASM:
https://madewithwebassembly.com

by **OpenXTalkPaul** » Tue Jun 25, 2024 12:45 am

FourthWorld wrote: ↑Mon Jun 24, 2024 8:51 pm
OpenXTalkPaul wrote: ↑Mon Jun 24, 2024 8:12 pm
FourthWorld wrote: ↑Mon Jun 24, 2024 3:45 pm Browser local storage from HTML 5 forward offers at least 5MB of persistent space:
https://www.w3schools.com/html/html5_webstorage.asp
Yes, the more persistent storage the better, that may come in handy as well, but Emscripten does its own thing.
...in so many ways.

Ten years in, I'm thinking there's a reason so few (any?) others are attempting to use Emscripten to deploy a rich-media GUI app dev tool in a browser.

Native web tech is quite good, and possibly simpler to translate to.

I didn't even realize that Emscripten was that old but I guess it is (from Wikipedia: "In December 2014, the Internet Archive launched a DOSBox emulator compiled in Emscripten to provide browser-based access to thousands of archived MS-DOS and PC programs.")
Emscripten is a "complete Open Source compiler toolchain" to WebAssembly (and to 'asm.js' before WASM happened).
WASM has certainly been widely used in a lot of different (and pretty darn cool) ways including a .wasm port of media power-house app FFMPEG.
https://ffmpegwasm.netlify.app
Not to mention for entire virtual machines of classic OS(s) running inside browsers!
https://infinitemac.org/1994/NeXTSTEP%203.3
There's even a port of open-source Quake2 to WASM: https://quake2.m-h.org.uk
OprnFrameworks is really cool too https://openframeworks.cc/examples/
I beleive it can only get better.

As far as data storage goes, I'll try to use whatever API is 'least expensive" or most compatible for the task at hand.
I'm also not against incorporating any OTHER 'native' web tech (WebAssembly IS 'native' web tech now). The OXT "WebPlayground" is already using the Web Speech API to do TTS (since revSpeak doesn't work) and also using web/CSS API for changing the cursor (since it seems 'set cursor' doesn't work either).

by **FourthWorld** » Mon Jun 24, 2024 8:51 pm

OpenXTalkPaul wrote: ↑Mon Jun 24, 2024 8:12 pm
FourthWorld wrote: ↑Mon Jun 24, 2024 3:45 pm Browser local storage from HTML 5 forward offers at least 5MB of persistent space:
https://www.w3schools.com/html/html5_webstorage.asp
Yes, the more persistent storage the better, that may come in handy as well, but Emscripten does its own thing.

...in so many ways.

Ten years in, I'm thinking there's a reason so few (any?) others are attempting to use Emscripten to deploy a rich-media GUI app dev tool in a browser.

Native web tech is quite good, and possibly simpler to translate to.

OXT Cloud IDE v0.00000001

Post a reply

Expand view Topic review: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001

Re: OXT Cloud IDE v0.00000001