Random

I’ve just realized that all my #ShirtHot entries (1: TNP, 2: TB, 3: TS) involve the core BrewDog beers starting with ‘T’. Huh, I guess my upbringing did something with that*?

(* my other siblings names start with ‘K’ too and all my male cousins in ‘Oz – in families of 3 offspring – have names starting with ‘J’)

Link
Rants

The white man call himself civilized,
Cause he know how to take over,
The white man come to pillage my village,
Now he tell me I have to bend over.

No I don’t like the white man up in me,
He rape my people as he rape my country,
Everything I love and cherish, he try to take away,
We will be rid of him, soon come the day.

NOFX (Kill All The White Man verse lyrics)

Somehow, every budget day here reminds me of this song. Doesn’t help that our local MP is rather complacent about issues relevant to his constituency (since living here I know of 3 pubs permanently shut within town and others through our areas Pints of View newsletter).

The rest of you 99%, bend over

Quote
Random, Rants

Growing up in a fairly metropolitan part of Australia, I consider that I’ve lived a privileged life in a multicultural environment. Surrounded by academics that had more geeky issues pressing their grey matter, I did sometimes find myself in the company of a strangers which small chatter lead to this question:

“But I mean, where are you from, originally? What are you Thai? Malaysian?”

This question was not very common back home, but in certain places it did happen. I felt mildly irritated that in modern times that this was even worth expending the effort in asking. And why do I have the obligation to divulge some of my history – isn’t it (at least borderline) personal information? Even during primary and high school I don’t recall a time when this was asked.

Now in the UK, I came across this beautifully written article by pure accident and all those moments flooded back. Some of those are fresh from last week: volunteering at the local beer festival. And it’s happened in all the festivals I’ve volunteered for. I get it in pubs too. That irritation I feel each time when I get asked – the article explains rather neatly.

So next time you see a short south-east asian woman and ask which part of south-east asia where she’s from, don’t be surprised to get this response “I’m fuckin’ Australian. Any questions?”

Are you fucking kidding me?

Are you fucking kidding me? I don't look like one of the major ethnic groups? No shit!

Link
Web

Note on the title: pun semi-intended! Couldn’t help myself!

Last year for the Letchworth beer festival we got the idea that we should try using some Google-fu into it and derived a map of the breweries featured in a simple mashup. I started off with addresses of the breweries from Quaff Ale then searched with their postcode (to a similar effect, getlatlon but plugging in all of the datapoints.)

Initially it was fine for the test cases but as there are restrictions on the number of geo location queries on Google maps and the asynchronous nature of the plotting we needed to obtain the equivalent lat/lon. At this point, the reigns were added to Yvan and he refined the map in such a way that it even generated a boosted brewery ‘bubble’ that listed the beers the brewery would be on offer. And custom pull-out markers to make the points easier to read.

Now it’s time for the Hitchin 2012 fest, and I thought it was a rather simple matter of taking the old code and switching the values.. Actually, this is almost correct but the tedium in obtaining addresses: how I forgot how long this took! Then the matter of adjusting the markers..

Link
Splash page - Rabbit
Graphic, Web

Flash wins – Integrating interactive SVG into webpages

Splash page - Aliss

Whoa, I started this post in November last year. It’s another long-winded one, so if tl;dr : I played around with SVG and Javascript (again – note it’s not guaranteed to work with all browsers.)

What seems like ages ago I created 2 SVG drawings which I then made manipulatable via ECMA script. Then I hooked it into a webpage and used Javascript to invoke the SVG methods in a simple interactive interface as a basis for an RPG. ‘Post harddrive fire’; being unable to find the original HTML or Javascript I used for that first version, I was just left with the drawings crying out to be used once more. It has been a while between the old version and the new, and though the browser capabilities and available Javascript libraries have definitely improved it seems like not much has truly progressed. The support is still poor, and sometimes incorrect. The Javascript libraries, though making content creation easier, sometimes seems to have strange limitations (probably due to the SVG combination.) Such factors lead to my dismay that to Flash still has a better coverage on capabilities over more textual and non-propriety alternatives like the canvas element.

Below are the steps I used that recreates the interactive SVG/Javascript splash page (which normally is found randomly at the base-level URL).

Begining with SVG

Inkscape was a new thing when I drew the 2 graphics. It was excuse to exercise the tablet too – which wasn’t too old at the time either. I started small: simple drawings and simple shapes, so I can make movement easier to deal with. The first thing was ensuring that sections of the drawing were logically grouped into layers – arms have a layer each and the entire head has one layer.

Inkscape - layers screenshot

Inkscape - layers screenshot

One thing I have not yet figured out back then (and at still haven’t) is if through the Inkscape UI you can create nested layers: after all it employs shape groupings ( items) for layers and object groups. However, as with a plan XML document you can edit the file manually, and I promptly discovered that Inkscape can at least pick up nested layers. This makes things easier for the first interactive function in ECMA you can write: a character flip. If all the layers were inside one root layer then it is just the trivial matter to call the transform function over it.

Woo, remember your matrix transforms? (I don’t, but clearly I did in the past..)

/**
 * This goes in the SVG file itself, in <script></script>
 * What this does is flip the grouping with ID completeheadlayer to the right.
 *
 * I escape all the quotes, unless you put it all in <![CDATA[ CODE HERE ]]>
 */
function headdirection_right()
{
        M = &quot;matrix(&quot;;
        M = M + &quot;1 0 0 1 0 &quot;;
        M = M + &quot;0&quot;;
        M = M + &quot;)&quot;;
        Q = svgDocument.getElementById(&quot;completeheadlayer&quot;);
        Q.setAttribute(&quot;transform&quot;,M);
}

Frame animation

If you are familiar with Javascript, ECMA is like its strict older brother (as seen in the previous example.) Some things are native to both, and thus if you have done frame animation in one it is practically interchangeable.

To kick off the start-up function that starts the timing place in the SVG head tag the attribute onload with value STARTUP_FUNCTION(evt). Here is the example in the Aliss file:

/**
 * Some handy globals
 */
var svgDocument;
var svgRoot;
var running=true;
var animateFrameRate = 100;
 
function startup(evt) {
        O=evt.target
        svgDocument = O.ownerDocument;
        svgRoot = svgDocument.documentElement;
        normalSize(); // a prep function
        animate(); // start the animation timer
}
 
function animate(){
        if (!running) return;
        blink(); // if blinking, do blinking sequence
        walkingstep(); // if walking, do walking sequence
        talkingstep(); // if talking, do talking/expressions sequence
        window.setTimeout(&quot;animate()&quot;, animateFrameRate) // the familiar setTimeout repeat loop
}

Inclusion of drawings in HTML

After all the functions are in place and tested, we can safely consider adding it to a HTML page. It seems – if my memory serves me correctly – things are added a little cleaner than they were in the past, using objects and params.

For the sake of ease of manipulating the position of the SVG files, I placed them in a div. At the beginning, the scene is hidden so it is useful to set the SVG objects as transparent as so:

<div id="aliss" class="character">
        <object id="alisssvg" data="/splash/aliss/aliss.svg" type="image/svg+xml" width="250" height="440" wmode="transparent">
                <param name="wmode" value="transparent">
        </object>
</div>

Now that the SVG is present, we need a way to access the actual object so you can invoke the ECMA functions within. Here is an example of how to retrieve the object then invoke the function doFunction which is assumed to be defined in the SVG file:

function getLoadedSVG(svgID) {
        var ok= true;
        var svgdoc = null;
        var object = document.getElementById(svgID);
        if (object.contentDocument) {
                svgdoc = object.contentDocument; // works in Mozilla
        }
        else {
                try {
                        svgdoc = object.getSVGDocument();
                }
                catch(exception) {
                        // ignore errors
                }
        }
        if (svgdoc!=null) {
                return svgdoc.defaultView;
        }
        return null;
}
 
// Get the SVG object with ID attribute svgID
var svgview = getLoadedSVG('svgID');
if (svgview!=null) svgview.doFunction();

Javascript integration

Now that things are embedded nicely, you can use Javascript to move the SVG elements (via its parent) like any other HTML element. To make this task easier, I used JQuery since it makes accessing the parent elements trivial, with the bonus of introducing a slew of special effects. For example, for the final splash page there is a state where Aliss or the White Rabbit walk from their current position to another point on the X-axis: I invoke the ‘walk’ animation which is embedded in the SVG itself then use the animate JQuery function to move the position (and stop the animation when completed.) Another bonus with JQuery is finding elements of a particular class, so when the splash page is viewed on the root level where it has access to the latest 5 posts some content is added to what Aliss ‘says’.

The applications possible is only limited to your imagination!

..Actually, there are limits..

Bah, if there were no limitations then you would of already seen commercial examples by now. But the actual fact of the matter is that SVG support, and SVG-Javascript implementation is not the same in all (modern) browsers despite the time difference of this and the first incarnation.

The methods I have used are still rather more complex than the standard methods of producing animation, and with the double blow that Flash support is normally pretty spot on for most known browsers it is highly unlikely that the SVG+Javascript+HTML would catch on. But I do like seeing it all in action; and if things change in the future then I can reuse the same old SVG files once again – hopefully not forcefully next time!

Standard
Bird sketch

Bird sketch - waiting for a beer at The Half Moon

Graphic, Random

Waiting sketch

Image
Android, Rants

All I seem to do is complain..

I’ve said long in the past that I’ve developed an AlertMe application for my phone. It’s been a while since I first created it and it has been rather entertaining to observe the cold winter temperatures remotely and comfortably from indoors.. Until now.

7 – huh? The weather service said -minus- 7..

7 ..wtf??

I had thrown in a ‘raw testing’ facility in the application for (my own) giggles, and I was thankful that I was able to use it. It told me from the raw data returned by the API which function was reporting the temperature incorrectly and other functions that weren’t affected – which was surprising that they differed at all.

*sigh* Hopefully the new version doesn’t have any other nasty surprises – I’m used to doing that all on my own!

Standard
Nostalgia, Random

I regret the conversations we never had, the time we did not spend together. I regret that I never told him that he made me happy, when I was in his company. The world was the better for his being in it. These things alone do I now regret: things left unsaid. And he is gone, and I am old.

Neil Gaiman (The Sandman: The Wake)

The quote was what first came to my mind with the abrupt news I received from the other side of the world. It was so sudden and out of the blue; it reminds me that “the best thing the devil accomplished was to convince everyone they had all the time in the world”.

I’m sorry I wasn’t around Em; I hope you knew that you made me happy in your company ever since first meeting you in high school.

Of Regret

Quote