Espruino Pico received

I was awaiting it for some time, until yesterday. It is amazing easy to play with hardware with espruino. It is easy to transfer my daily web workflow onto hardware. Still lots of thing to learn, hence I feel the the learning curve of Espruino is a very rewarding one ;-). See below for my first very small tinkering project with the Espruino Pico.

Controlling servo with distance sensor

IMG_6468

Code

var servo = require("servo").connect(B7);

var sensor = require("HC-SR04").connect(B3,B4,function(dist) {
  //module output in cm
  if(dist <= 20){
    servo.move(0.5, 500);
  }
  if(dist >= 30){
    servo.move(1, 500);
  }
});
setInterval(function() {
  //send pulse
  sensor.trigger(); 
}, 500);

As you can see the code is very compact. The possibility to console.log sensor reading in the console is priceless!

Audio visualisation with WebGL and webkitAudioContext

Get the source at Github

For a while I wanted to experiment with audio visualisation in the browser, with the new functionality in Chrome. My graduation project concerned the other way around, namely the sonification of the dom of any webpage. To create this demo I mainly used, some html5rocks info

Example

Check the “chrome only” demo

WebGl audio visualisation

Parts explained

The workhorse of the visualisation is the “webkitAudioContext” currently available in Chrome. With the webkitAudioContext it is possible to create an audio analysis. The following snippet is the setup for the analysis .

     // create the analyser
     var context = new webkitAudioContext();
     var analyser = context.createAnalyser();

    //initialize
    function onLoad(e) {
                startThreeJs();
                var source = context.createMediaElementSource(audio);
                source.connect(analyser);
                analyser.connect(context.destination);
                rafCallback();
     }
     window.addEventListener('load', onLoad, false);

The rafCallback function is where the visualisation happens, the data of the audio is stored in an bytearray every available frame. For this visualisation I only used 15 ‘frequency’ bars to keep the animation smooth, for real purposes you should use the whole spectrum.

     // bind the audio data to the web gl cubes
     function rafCallback(time) {
                window.requestAnimationFrame(rafCallback);

                var freqByteData = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(freqByteData);

                for (var j = 0; j < MAX_BAR; j++) {
                    var magnitude = freqByteData[j];
                    var delta = magnitude / 100;
                    cubes[j].position.y = cubesPos[j] + delta * 0.25;
                    cubes[j].scale.y = delta;
                    // categorize color on amplitude
                    var color =  0xf5a711;                
                    if( delta > 0 && delta < 1 ){
                       color = 0xf5a711;
                    }else if( delta > 1 && delta < 2 ){
                        color = 0xf55c11;
                    }else{
                        color = 0xcd0505;
                    }
                    cubes[j].material.color.setHex( color );
                }
      }

Feel free to use and abuse the source

Improved front-end workflow for Windows

For some time I wanted to improve my front-end workflow. The search for an optimized workflow almost made me switch to mac, and I am still considering the switch. It seems to me that the windows front-end developing environment lacks serious momentum compared to the progress being made on linux and osx.

However now onto the good stuff. I had a few goals for my new workflow; LESS / SASS, auto refresh function, file minification and optional device checking. All this in combination with a proper IDE. At first I gave a shot at Yeoman, the installation with Chocolatey went perfect, however Yeoman itself gave some windows related errors. I am sure Yeoman should work fine, but I like to have my stack divided in several software sections.

The first goal was getting autoreload for the browser. For windows there are several options, all with there own pros and cons.

  • First there is “web essentials” an extension for visual studio, these make it possible to reload the css only. This could be a use full start if your company restricts you to use visual studio for front-end development.
  • Netbeans 7.3 with live html, this is an easy way to get a lot of functionality. However the beta version had difficulties to detect changes made by external compilers. For example css files compiled by the winless less compiler were not detected by the live html functionality. Netbeans live html has the advantage that it works on all file locations, a local server isn’t required.
  • Livereload browserplugin, i use this plugin in combination with sublime text 2. This solution works perfect, combined with some LESS plugins for sublime the less files compile automatically and the updated css file updates the livereload plugin.
  • At last there are a lot of scheduled refresh options, these refresh the browser every on predefined time. I think these options work but are not a very “clean” solution for the problem.

I’m more than happy that I have renewed my workflow, especially “Sublime text” is an instant saver, although it is lacking some deeper IDE functions, like recognizing functions from other files ( If there are some plugin to solve this please share them ). But overall Sublime is an amazing fast and “clean to the eye and mind” editor.

My current stack is as follows; sublime coupled with some less formatting plugins. Less compiling is done with WinLess. Livereload in chrome is coupled with sublime and chrome is optionally connected to devices with Adobe Edge Inspect.
Coding now feels like typing a letter, focused on the code, instantaneous feedback, brilliant 😉

At least until I need to merge the code back into visual studio and TFS, and of course next year there will definitely be new shiny toys.