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.

Leave a Reply