New JS Library: QuickSettings

Oct 17 2015 Published by under Components, JavaScript

Let’s recall the glory days of Flash and ActionScript. Initially, ActionScript was a scripting language with built in graphics and animation capabilities. There was a simple button object, but no other high level ui controls built in to the language.

movie_clip_new_symbol

Before long though, people figured out how to code them and all kinds of UI component libraries popped up. Macromedia created their own component set, which eventually evolved into Flex.

components

A stumbling block with virtually every ui component set created was styling and skinning, that is, making the controls look the way you wanted them to. This involved assigning multiple bitmaps to individual controls or classes of controls, or some kind of half-baked, compiled-in pseudo-CSS, and in many cases, in order to style a control, you had to subclass it and override the rendering methods.

For the most part, ui controls are fairly simple. Until you get into lists and data grids, and calendars, they’re all pretty straightforward views that respond to input and trigger events. But the styling aspect tended to bloat these component libraries all out of proportion to their usefulness and complicate them beyond belief.

ss3

I was doing a lot of experiments with math and physics,that often involved changing parameters at run time. I needed some simple buttons and sliders and checkboxes and a few other things that I could create quickly and easily to be able to do this. But I wasn’t happy with anything out there. So I created MinimalComps.

light_theme

This was my own UI component set. It was designed to be drop dead simple to use. Generally, you could create and configure any control with a single line of code. Create it, pass in the parameters and an event callback. An important aspect of them was that I totally ignored all styling considerations. I gave them what I consider was a fairly attractive minimal look, and that’s what you got. Later I added support for dark and light themes, but that’s as far as that went.

dark_theme

MinimalComps were not designed to build websites or enterprise applications with. They were designed as an easy and very lightweight way to add standard user interaction to some kind of experimental, art or engineering piece. And they were hugely successful. People tell me they still use them to this day. They wound up being used in games and sites and all kinds of apps. If you do a Google image search for “MinimalComps”, you’ll see a bunch of examples. They were even spotted in an Adidas video for the Megalizer app made with them.

In short, they filled a niche and even outgrew that niche.

It’s been a long time since I’ve even touched Flash, and some years since I did any recreational programming with ActionScript. I do all that stuff with JavaScript and HTML5’s Canvas now. But I’ve always missed the ease of MinimalComps in JavaScript. I know that there are a few similar libraries out there, but if you know anything about me, you know that I like to create my own tools from the ground up.

I made several attempts to port MinimalComps to JavaScript, using Canvas and custom elements to make the components. But I was never happy with the result. A big difference between HTML and Flash is that HTML does have its own UI controls built in. It didn’t feel right to reinvent the wheel.

However, going into the HTML, creating a control and configuring it, then going back into the JavaScript and getting reference to it and adding listeners was always enough of a pain that I just never did it. Instead I just tried to get by with straight up mouse or keyboard handlers that I could do in code alone. The invisible user interface. Not ideal.

Finally, I decided to try to combine the two approaches. Make a JavaScript library that creates the HTML controls for you. So you say, “give me a slider with these parameters and this callback.” And bang, it exists and it works. One line of JavaScript code.

So I did it. And with that long-winded intro, I present QuickSettings.js

I consider QuickSettings the JavaScript spiritual successor to MinimalComps. It is not anywhere near what you’d consider a port, but it fulfills many of the same original purposes. It probably won’t fulfill many of the extended purposes that MinimalComps evolved to have.

Rather than going through a long explanation of how to use them, I’ll just refer you to the github page, where the readme outlines all of the main methods.

https://github.com/bit101/quicksettings

And here’s a demo of the QuickSettings panel in use.

http://htmlpreview.github.io/?https://github.com/bit101/quicksettings/blob/master/demos/demo.html

I’m also working on a video that will walk through the process, though honestly, it’s drop dead simple.

3 responses so far. Comments will be closed after post is one year old.

  • Matt Cook says:

    Been following your blog for a while, love your work. First thought on this one: is it significantly different from dat.gui? http://workshop.chromeexperiments.com/examples/gui/

    • keith says:

      I’m somewhat familiar with dat.gui, and there are definitely similarities. The differences I see are:

      1. dat.gui creates its own custom controls, whereas quicksettings uses standard, existing HTML controls.
      2. dat.gui has a kind of binding system. you set a property of an object and it infers what kind of control to make based on the type of that property and automatically updates that property on that object when it changes. With quicksettings, you tell it what you want, and you get a callback when the control changes, which you can then do whatever you want with.

      So, based on those two differences, I’d say dat.gui is more sophisticated, but also much more complex. quicksettings is very lightweight and simple. It’s really just a shortcut to creating HTML controls and listening to their events.

  • Alec Sabic says:

    There i have learn lot of think about flash programing and js library.
    I have make some games with action scripting you can test them at:
    http://scarymazegame.club/