Angular Mixer

A coupe of years ago, whilst working away from home, I started writing a sound mixer in MooTools. All went went, until I hit looping bug in Firefox and then my l-system project caught my eye again…

Now I’m looking for something to work on with Angular, shortly after being handed a bunch of mp3 tracks split from a Logic session, so …

Why Angular?

In 1997 I wrote a clone of PacMan for Netscape Navigator, moving DIV elements with CSS. Although I have largely earned my living as a server-side developer since then, I have written many JavaScript applications, using MooTools, jQuery, and avoiding libraries altogether: at every hand-over meeting, I have had to spend hours explaining what have become to me fundamental concepts in JS, borrowed from my server-side work, such a views, bindings, injection, controllers, routes — and to those who are familiar with these concepts, I have had to explain my own implementations of these. I’m actually quite proud of my own implementations: they’re clean and efficient, but repeatedly explaining them is a bit of a drag. A library that can do the same things, and more, as well as offering reasonable documentation and community support, removes from me the burden of general documentation and education, as well saving a lot of start-up time.

Where to start

My last, and first, Angular project was a single-page application to add subtitles to video files. It took a couple of half-days to write, and served as a great introduction to the way Angular works. But it rook me hours to find a clean entrance, and the chosen Angular seed on GitHub modularised in a way I didn’t find constructive for my project, being functional rather than conceptual, rather at odds with the OO approach I prefer.

When recently spent some time updating some code for Symbox in the UK, I came across a Backbone project that used grunt and bbb. Since the last release of bbb was some years ago, I brought the project’s gruntfile up to date, which negated the need for bbb, but did show me that Yeoman had finally taken off. So this time, I’ll start with Yeoman.


From the Yeoman homepage, set-up looks quite straight forward:

npm install -g generator-angular  # install generator
yo angular                        # scaffold out a AngularJS project
grunt test                        # test your app
grunt serve                       # preview your app (formerly `grunt server`)

Looks like we get bonus HTML5 boiler plate, and a reasonable staring point in js files. Now I can think about my application.

Application Requirements

Other than being testable, package-able, and easy to read, the application needs to:

  • play multiple audio files
  • play local or remote audio
  • start and stop playing individual tracks at discrete points
  • loop specific points in tracks for specific periods
  • muting of tracks
  • changes to pan
  • changes to volume
  • recording and playback of mute/pan/volume events

In Agile style, best to start simple, with an object representing a single audio track.

In my previous attempt, I had a container for tracks that visually represented time, but found — as in any sequencer — milliseconds an unnatural unit for music. So this time, I’ll work in units based on the size of audio files, placing the burden of timing on the creator of the audio files. After all, the intention is to remix existing multi-track recordings.

Prototype, Trains, Marketing

I was asked the other day if I’d ever used Prototype.js, and I completely forgot that I had used it in Train Game — the library is such a natural extension to JavaScript that its use did not stick in my mind. Although, having now looked again, I do wonder what it is doing with my error messages….

The reason I forgot Train Game is that I never got past the round of development. The idea is simple — allow a child to build a train track, with points, and watch the trains — this could keep a three- or four-year old boy amused for an hour, and it’s not hard to program, as it is all grid-based.

Thing is, I then thought about extending the game to allow varied size pieces of track, and selling the software to those who make the Thomas And Friends tracks. It’s a great idea — design your layout from track in their catalogue, and order online with a single click: so simple, a three- or four-year old child could do it.

But I have no idea how to sell this, where or how to raise capital: all I know is how to program, hire a and run a development team, apply graphics. I think I could even have a selected number of track pieces lay themselves out in a number of patterns dreamt up by the computer.

It would take six months to publication.


JavaScript Poster Text

A year or so ago, I wrote some client-side JavaScript to allow allow input text to flow around images — it worked perfectly, and was optimized through a server-side process that produced a mask map from the image, which could be sent as JSON with the choice of image being mapped. Whilst optimised, it was non-dynamic — there were no uploads of user-supplied images, nor any provision in the client to analayse such images, tough that would be only a few lines of code. The purpose of the project was to allow users to create their own type-wrapped postcards, and that worked perfectly.

The next version of the library will have a version that allows not the wrapping of text to an image, but the automated sizing of text such that every line is fully justified (flush from margin to margin), with lines of less characters generally using bigger font sizes to till the line.

The user will be able to enter text with or without manual line breaks, and real-time editing should be supported.

It should be easy to program all of this within a day, perhaps two. My only concern would be cross-platform DOM manipulation, because I have used MooTools, jQuery and such libraries for so long now, that my DOM API is rusty. Then again, there are few places where node creation is actually necessary, so it will not be long-winded enough to justify use of any library.

Day two

Cards - 2013-10-22_14.46.35This morning I managed to tweak the existing e-card code to automatically scale free text, preserving line breaks. This afternoon, I should break it away from the input UI.


My First Facebook Applicaiton

This Timeline Word Cloud is my first Facebook application, written in about 16 hours — most of which were spent dealing with horrendous problems within the Facebook JavaScript SDK.

On the whole, it is a pleasant SDK, with clear documentation and plenty of Stack Overflow examples (some ugly, some neat).

What did bugged me was that WebKit-based browsers get very upset when Facebook’s ‘Login’ button/dialogue inserts an IFRAME with an https scheme when its images are hosted on a server with an http scheme. This would have been less of an issue had OSX Chrome actually reported the issue.

(JPEG Image, 519 × 519 pixels)

After writing my own Facebook log-in routine, everything worked like a charm — up to converting the beautiful d3 word cloud SVG to PNG, when Chrome freaked out that I was manipulating Blob and Object URIs. I updated my use of the word cloud to render directly to a canvas from which I could gather pixels to create a URI for my image.

I would have liked to have written the app to use a Facebook ‘canvas’ — to appear within the Facebook site itself — but my host, Vision Internet, require a modest £50 a year for a usable SSL certificate, which this application really doesn’t justify, yet.

I was pleased enough with the results to use the Graph API to produce word clouds of friend lists activities, too — which took about two hours.

What’s the point?

I’ve learnt how to tie-in with Facebook, which was no big deal. I’ve learnt how tight Chrome is, which was news.

Can it pay? No, I doubt it — but when I was developing the first prototype (an hour’s code), I was using d3 bubble graphs, and it might be interesting to see those bubbles filled with images from a paying agency — particularly if the agency had a friend list of news providers: instant and up-to-date promotional posters for current affairs. That would be fun.

PHP Ain’t So Bad, and Paula’s New Homepage

Paula wanted to update her website last month, so I actually spent some money buying a photographer’s WordPress scheme — what a waste. There were no docs, and the implementation was as unintuitive as I could imagine, so I hand-coded her site single-page JS application.

I finally gave up on MooTools and used jQuery for DOM manipulation, and wrote the rest as a collection of ‘pure JS’ classes — slideshow, portfolio, news section, very straight-forward, and quite good fun.

One Interesting Thing

Paula’s quite good with the machine, but doesn’t like fiddling, so I wanted an easy way for her to upload and manage her images.

The simplest I could come up with was for her to title them in a human-readable, sensible manner, and produce 200px thumbnails with the same title, plus a suffix of ‘_thumb.’ She then FTPs the lot into a directory on the host, and adds a single empty div to the single HTML page of the app — specifying the images’ directory URI in a ‘data-‘ attribute.  Apache’s mod_autoindex directory index is then requested, parsed, and used to generate the portfolios and slideshows.

I’m very pleased with this simplicity.

The Other Interesting Thing

The other interesting thing was that I found it took only two hours to turn this code into a WordPress plugin, and that WordPress can be made to work with OO PHP — great news, considering how much PHP work there is out there. It is almost as ugly as Perl, and nowhere near as sweet as JavaScript can be, but still…


Angularjs Subtitles

I watch a lot of Scandinavian video files, which means a lot of subtitles. Being a fussy sort of a fellow, I do get irked by badly timed and badly typed subtitles, so for some months have been contemplating writing a subtitle editor. I’ve combined that urge with my curiosity about AngularJS. I have been irritated by JavaScript since version 1.0, and have so far been unimpressed with everything but MooTools. Yet the weight of Google, and its usually intelligent solutions, is encouraging.

Starting from scratch it took about eight hours to create an SRT viewer from scratch in ‘the Angular way.’  That has involved very little new ideas — a blurry MVC, more of an MVP; mustach-style templates that mix presentation, backbone views — but some nice dependency injection, and a huge pile of patterns to choose from (which will probably be a PITA, if the TMTOWTDI motto of Perl is anything to go by).

Eight hours to produce an SRT viewer, which is a task I’d usually accomplish in two hours.

I am hoping the investment in time will pay a return now that I set to work on the editing controls. Currently, Angular’s two-way data-binding allows me to edit subtitles — moving them as a mass, and adding new entries, is coming up.

One thing I do find encouraging is the community, which is very helpful, and not snooty like the Perl community, who seem to be slowly drifting away in the Perl6 pipe smoke. Angular’s API seems to change quite often (not a bad thing), and these changes are regularly pointed out on Stack Overflow.

One thing that really annoys me is the need to $scope.$apply — so hard to avoid.

What really pisses me off, though, is that the tutorial is not up to date with the tools. There is little more off-putting than starting a tutorial and having to reconfigure everything. Surely Google have the resources…?

What’s the alternative?

But the two libraries do things very differently. Ractive.js is designed to have as few surprises as possible – no mysterious $scope.$apply() or dependency injection minification headaches! You can master Ractive.js in an hour or two, just by following the interactive tutorials.

So claims Reactive.js — and it has to be worth a look.

On ‘Han-shan, Nanzen-ji’

From a lofty summit
The panorama extends forever
I sit alone unknown
The lone moon lights Cold Spring
The moon isn’t in the Spring
The moon is in the sky
I sing this solitary song
But the song isn’t zen.

Han-shan, Nanzen-ji

Can I ask about this? Or rather, can I ask about it and get a reply?

I’ve never been very ‘good’ with poetry, despite having a good “Bachelors” degree in English. What am I supposed to take from the poem? That might sound like silly, naive question, considering I mentioned having graduated in this subject, and should surely know full well that one is not intended by any one to take anything from a text. But, I mean: are not at least some (I’d like to call them ‘great’) authors aware of this when writing, and so make the writing more than a stream of ego, a stream of consciousness or self-consciousness? Might not these authors construct their work with the complexity of linguistic expression in mind, and so form their work in such a way as to attempt to clarify the inherent vagueness of linguistic communication?

Seems to me that this poem does intend to cause an effect.

It opens gently, depicting a tranquil and removed scene in restrained tone, but with evocative nouns — the first action is not until the third of eight lines, a quarter of the way into the poem, and that action comes from the verb ‘sit,’ which is almost as passive as it gets. Then a distinct and attention-grabbing images:

The lone moon lights Cold Spring

The capitalisation of Cold Spring makes it read as a proper name, presumably a place name (if it were to refer to a person, it would be the introduction of a mechanism so-far unused in the poem, and would make the former imagery seem redundant). A place name composed of two descriptors: one of time, and one of feeling, both that match the imagery of the previous lines, all of which suggests this is the name of place in which the poem is set, from whose tense we can ascertain is the present moment, and whose location is either the place Cold Spring, or a place like the depicted place the reader has visited and recalls, or a cold place in the spring, which thanks to Ana happens to be there here and now for many of us.  Or a place that has the attributes listed, in the imagination of a generous, ‘open’ reader.

Then this nonsense:

The moon isn’t in the Spring

Reading this reminded me of Hakuin’s scalding commentaries on the Heart Sutra. What utter rot, to say that the moon is not in a season! But then I recall the narrator mentioned Cold Spring, so presume this lines inherent meaning is just a statement of the bleeding obvious (to use the Basil Fawlty-like vernacular): that the moon is not in the town. This irks me: the poet made work for that, and I imagine that was intentional, as my next thought, after ‘the moon is obviously not in the town’, I thought, ‘the moon is in the sky, obviously’. My feeling of being ‘irked’ was naturally somewhat mitigated by the next line, for its obviousness:

The moon is in the sky

I was at this point in my initial reading at once irked and soothed — and soothed by that which irked me. This poet is clever — though I am not sure I actually ‘like’ clever.

I sing this solitary song
But the song isn’t zen.

By the time I reached this final couplet, I felt resolved on my reading of the poem — the postulation of a thing that is and is not: just as the moon itself is not in the world, but its light is; the song is a product of that here termed ‘zen’, the singing is not itself ‘zen.’

I wonder if there is any point addressing directly the imagery?

Having written all this, I’m not sure I really want a reply — I’ve had enough of this poem. Perhaps I will come back to it, or perhaps it is as ephemeral as the moment it depicts? Still don’t like poetry.

JavaScript and Perl Object-orientation: a small comparison

I began programming Perl in 1997, as my university did not
run Netscape Live Server – the original server-side JavaScript –
and I wanted to access to a database.

So many years later, it looks as if JavaScript is back in
a serious way: despite limitations in the implimentations
of ECMA Script, the standard of which JS is now a subset,
the language is more powerful than the average Perl
developer is lead to believe.

Perl programmers tend to frown on JS as a toy language,
the way C++ devlopers look down on Perl developers.
Yet Perl and JavaScript have an awful lot in common:
both are easy to exten, bothd in their own syntax and
in the C; both are regularly extended with library
frameworks (Moose, MooTools).

Whilst both have a slightly unusual approach to OO,
the main conceptual difference is that JavaScript is
OO to a much great extent than Perl. For example, whereas
Perl has a length() function, JS objects have a length() method.
More interestingly, JavaScript’s object orientation is
prototype-based – there are no classes, only objects and
object instances, based on functions that operate upon a
built-in “this” variable, and which are used to generate
instances of custom objects when called with the “new” keyword.


This page contains JavaScript which
is documented, in comparison with Perl:
A comparison between
common OO features of Perl and JavaScript

Rotary Control for MooTools

Knob control for MooTools

Yesterday I wrote, and today extended, a rotary control for MooTools, with WIA-ARIA compliance and keyboard controls to augment the mouse ragging of Logic-type controls.

It’s on GitHub