Version 1.3.0 – Standalone Executables

This post is a bit late, as this was done at the beginning of the week, but anyway, GLC is now delivered as a standalone executable program for Windows, Linux, and OSX. This means that it is a regular program, not a page that runs in your browser.

Technically it is still a page that run in a browser, but it’s packaged up with Electron. This is a packager that creates native programs from web apps. If you’ve ever used The Atom code editor, it is made with Electron (and by the same people). Other apps made with Electron include Slack, Visual Studio Code and Pixate.

In addition to just wrapping the browser and app, it gives you access to native functionality, such as the file system, menus, external processes, etc. So now GLC can load and save code files as well as animations and screenshots just like a real program.

It also runs the app with an external nodejs server, so you get a lot of security issues that you have in a browser. The biggest impact this has is that we can now have an image object in GLC. This was impossible before because once you have drawn an external image to a canvas, you cannot access that canvas’s image data to create the gif. Not a problem in the standalone version. Check out the docs for the new image object. It’s fun.

There’s no need to install the program. Just download the version from your platform at https://github.com/bit101/gifloopcoder/releases and unzip it (or untar it for Linux). For Windows and Linux, you’ll get a folder with a bunch of crud in it, but there will be one file named “GIFLoopCoder.exe” (Windows) or just “GIFLoopCoder” (Linux). On OSX, all you’ll see is the “GIFLoopCoder.app” file and maybe a couple license files. Just run that file and you’re good to go.

If you still want to run the web version, you’ll have to check out the full source and use the “app” folder in there. Currently you’ll need to do that if you want to use an external editor. But I have some improvements coming up that will fix all that too.

The current builds also don’t include the docs and the examples, but you should have those kicking around from a previous install, or just use the online docs and get the examples from github.

Again, more things coming on this soon, but wanted to get this post out of the way now.

Version 1.2.0 – Snippets

https://github.com/bit101/gifloopcoder/releases

This feature just kind of fell into my lap. I was looking at the CodeMirror API and realized that the replaceSelection function could be used to programatically insert code into the editor. I’d been using Phrase Express (a text expander type program) on Windows to automate my own snippets, but saw how easily this could be built in to the program. So now there are snippets.

1.1

On the far right you’ll see two dropdowns and buttons. The first has every possible object you can create in GLC. The second has a few useful snippets I’ve come up with.

Move your cursor to somewhere in the code, select a snippet, click the appropriate insert button, and there you go.

For the object snippets, I didn’t include every possible property, but tried to include the ones I thought would be most needed, with some obvious values. Let me know if there’s anything you think should be changed there.

For the other snippets, I included a few that I’ve found useful myself. I’d like to add to this list. Feel free to send me any you think would be useful. Eventually, I’d like to get to the point where you can define your own snippets, at least in some kind of external file.

Version 1.1.0 – New UI

Well, that was an ambitious update. I ripped the whole Quicksettings library out of the project and rewrote the entire UI and all connecting code from scratch.

1.1

Important to note is that all of the core code – the renderer, scheduler, encoder, etc. all stayed 99% intact. Some minor interface changes to get it to work with the new UI arrangement, but no deep changes.

I’m not a big frameworks guy, so it’s all straight JavaScript, require.js modules that mostly act as controllers. Separate view modules for the UI pieces, all wired together with a master controller. All the UI is created with JavaScript. Not even templates, because… because. Because I wanted to do it that way. Not saying that’s how it should be done, or that you should do it that way, or that it’s best, or even that I’d do it that way again. It’s all about the journey. It was fun.

Anyway, that’s for the one or two of you who actually even look at the source code. For everyone else, I hope that it’s a cleaner, nicer UI to use. Personally, I love the way it looks and runs now. I love the integrated editor WAY more than I ever imagined I would. It’s all about instant feedback. Type some code, Control-Enter, see the result. Just like… well… you know where I’m going with this… Flash 3.

Speaking of instant feedback, I know some of you noticed that if you added a lot of objects to the list, there would be a LONG lag before the animation started. Sometimes, the browser could even time out on it. This bugged me too. I tried to think of what could be causing it. Could object creation really be taking such a toll on the CPU??? It seemed very odd to me. Failing at finding any solution by staring at the ceiling imagining what MIGHT be doing it, I finally broke down and LOOKED at the code.

What was going on was that every time a new object was added to the list, GLC was rendering the canvas. That was on purpose, so that if you didn’t have glc.loop() in your script, it would still render when the script was loaded. But hundreds of renders was NOT on purpose. I threw in a little setTimeout delay in there, so there was only a single render after ALL the objects were added. Now you can add tons of objects and it renders nearly instantly. Yay!

I was sad to see Quicksetting go, but overall, I’m super happy with Quicksettings. It totally, 100% did its job of allowing me to quickly prototype the app, creating the logic and getting everything working and not having to worry about layout and view code. Basically, I was happy with all of the logic and functionality of GLC. This update is almost totally confined to swapping out the UI. It was nice to be able to do it like that.

The last piece I had to remove was the output panel. I toyed with the idea of opening a new browser window. Not good. Or creating some new kind of internal popup similar to a Quicksettings panel. In the end, I went for a lighttable-like overlay. I think it looks pretty good.

1.12

As with the previous update, the new GLC plays very nice with external editors. There’s a config option in the HTML that shuts off the integrated editor and hides the tool bar buttons related to it. And a spot to link to your externally-edited content. Here’s the UI with no editor:

5.10

This was an important update for GLC. The next phase will be creating a standalone, cross-platform executable app using http://electron.atom.io/. I’ve already gotten most of this working. It really needed the improved UI though. Now that that’s there, I can move on to working on better OS hooks, such as real file system integration like you’d expect in a real app, but is impossible via the browser. Stuff like load, save, save as, recent file list, saving images and animations without right clicking, hopefully. Also, hopefully I’ll be able to get an image object in there – where you can load an image, position it, size it, rotate it, animate it, etc. I actually have this fully working, but due to security issues, the browser will not allow the canvas to be rendered to a gif once an image is drawn to it. I’m hopeful that running the app through electron will get rid of that problem.