Introducing LocoPad, a web-based code editor for CPC devs

Hi everyone,

Something I’ve been working on, following the discussion on BASIC Hovercards.

I’m happy to share LocoPad, a web-based code editor, scratchpad, and interactive firmware reference tool crafted specifically for writing Locomotive BASIC and developing for the Amstrad CPC directly in your browser.

This was put together after the bulk of the job was done on the firmware and BASIC commands for embedding in the forum.

  • One-Click Run in CPC Emulator: Hit Run in CPC (►) and LocoPad immediately compiles your active project files into an AMSDOS 40-track .DSK image and boots straight into an emulated Amstrad CPC 6128 (RVMPlayer, just like on the forum and the Wiki) running your program.
  • Instant AMSDOS .DSK & .BAS Export: Export standard .BAS files or complete multi-file .DSK disk images ready to go
  • Integrated Help Deck & Complete CPC Reference (498 Symbols):
    • BASIC & Firmware Inspector: Hover over or search any of the 187 Locomotive BASIC commands or 311 CPC Firmware Jumpblock vectors (&BB00–&BD5D) to view real-time syntax, entry/exit register requirements, corrupted registers, and code templates.
    • 27-Color CPC Hardware Palette: Interactive color swatch picker with 1-click PEN, PAPER, and INK code snippet generator (just because I like the label on the 6128 drive).
  • Multi-File Project Management: Organize multi-part BASIC programs, data tables, and text docs with automatic local browser save and resizable sidebars (Ctrl+B).
  • Dual Editor Engine: Choose between a lightweight, ultra-responsive CodeMirror 6 engine (default) or the Monaco Editor (VS Code engine).
  • Local only. Your work is saved automatically locally in your browser storage. Nothing gets uploaded anywhere.

LocoPad is completely client-side, lightweight, and requires no account:

https://www.cpcwiki.eu/locopad/

Let me know how it works for you, if you’d like to see any other features, if there are any bugs or if its complete and utter shite.

Oh this is awesome. I always wanted to have something like that!

One thing: the download/upload icons seem to be swapped. What I would expect to be the download is actually the upload and vice versa.

Thanks for the feedback :slight_smile: I honestly didn’t don’t know if it would be of use to anyone. BASin seems to be popular in the Speccy community and, although it is of course a much more advanced program it lacks some niceties and simple workflow.

Regarding the buttons - they’re not upload/download, but import/export instead so the logic is correct, but if people want it the other way around, it’s a 10-second job :smiley:

Got it… So it depends what you see as a target and what as a source. I can live with it :wink: No worries.

Not sure how often I will use it but I definitely will every now and then. It seems to be great to quickly try out things and be able to copy/paste or save.

And when I developed my game Cameronne it would have helped a lot for the refactoring I had to do every now and then..

Cheers. Well, if you do use it properly, do let me know if you have any feature requests and I’ll try to implement them (no promises)!

Excellent!

And the welcome project to test it quickly.

The sample project seems to run so quick. Is the emulation accelerated?

One nitpick: since a click is required on the “Play” button, it would be best if the emulator starts right away without showing the “RVM” add and requiring the usual click.

(And, thinking about it, the same thing happens on other web pages where the emulator happens.)

Small bug: if you have run the emulator and then click on the cross to close it, the emulator still runs and has keyboard focus. You can e.g. type letters and then press up or down arrow and hear the CPC beep.

Also if you press the “play” button again, it looks like another emulator is launched, as host system load increases even more.

Oh, this is really a nice feature!

And you should have seen my face when I discovered that the run button compiles your code and launches the emulator… :joy:

On the subject of the import/export buttons, I think they are really reversed and I’ll add that you can see that the icon for “Download Standard ASCII .BAS file” has the arrow pointing up, while the same icon is used here in the forum with the opposite function (the Share button).

So sharing and importing are the same thing, you’re sending things out from your computer to other programs, while exporting/downloading, well… DOWNloads the files to your computer and should have the icon with the arrow pointing down.

Cheers,

Rob

No, it’s as it runs out of the box!

That’s how RVM Player works, I don’t have an option to skip that (…I think?

That’s interesting, I didn’t get that behavior. Browser?

Yeah the first time I got it working it felt so nice for me as well!

Yeah yeah ok, ok. I’ll switch the buttons and phrasing :joy:

Awesome.

PS. Do you think it would be better to make the line numbers on the left a slightly different color than the main text? Because they look like they’re blending together since they’re next to the basic line numbers.

  • Emulator exiting fixed (that was really stupid on my part; I cleared the <div> but didn’t check to make sure the emulator stopped working in the background…)

  • Import/export buttons swapped (there, fixed it)

  • Gutter line numbers adjusted (and also color-coded the BASIC line numbers while I was at it):

Keep the suggestions coming :slight_smile:

Nice preference panel with relevant options.

I don’t remember what the default font was

Retro CRT Monitor Effects:

Good to allow plain basic pixel rendering.

A very faithful monitor emulation is good for really advanced graphic work, like Sylvestre Amstrad CPC - Technique graphique (7-épaisseur & luminosité des pixels). But for most other tasks, including BASIC development I consider monitor effects totally useless and a hindrance.

But … it seems to be ignored? The emulator always start with effects on.

This website just gets better and better.

What a fantastic facility!

I tried to keep it simple; I think the current implementation is easy on the eye, juuuust enough.

Indeed the emulator starts with effects on, if people are bothered by it I can disable it, IIRC.

Much appreciated :slight_smile:

Thank you so much for this tool. It’s an incredible amount of fun!!

Thanks - and welcome!

Nice effort @Gryzor ! :+1:
From what I have seen, this is already a very mature project!
IMO One important distinction may be missing: BASIC 1.0 versus BASIC 1.1.
It could be helpful to identify which instructions are unavailable on the Amstrad CPC 464. Please take note that I’m not asking you to add BASIC 1.0 support; I would just like users to be made aware of any requirements that are specific to BASIC 1.1. :stuck_out_tongue:
Again, cool stuff, congrats!

Aaaaargh!!! And I was ready to push the next version! :grinning_face_with_smiling_eyes:

That’s a very valid suggestion, and yes I think I can easily do it because the info is already there.

So, by filtering my json files I have these commands as marked 1.1:

FRAME, FILL, SWAP, ROUND, MASK, GRAPHICS PEN, GRAPHICS PAPER, DEC$, COPYCHR$, CURSOR, REMAIN, DERR, WINDOW SWAP, and the three ON BREAK statements (CONT, GOSUB, STOP). I hope I’m not missing anything?

We can try adding compatibility awareness for this into LocoPad:

  1. Linter CPC 464 Hints: If you use any of these 16 instructions, the linter flags a compatibility hint with the stock 464 workaround (e.g. suggesting CALL &BD19 for FRAME, or variable swapping for SWAP).
  2. Inspector Badges: The Symbol Inspector and dock can highlight something like [BASIC 1.1 Only (CPC 664/6128)] and provide the equivalent 464 syntax where applicable.

That’s just two more conditions to add - no, actually make it one. I also have to build a table of equivalence, of course. Any source for that?

Thanks for your kind words, it means so much coming from you!