• Mocking AngularJS promise callback params in Jasmine tests

    Mocking AngularJS promise callback params in Jasmine tests

    You could argue that in a scenario such as this one, you should ideally have a separate, stand-alone callback function to handle the success response of a promise, but this post is not about that. It’s about an occasional need to mock a promise and perhaps it’s callback params in Jasmine unit-tests and this is a simple example of how it can be done.

    This is an example of a function you might find in an AngularJS controller (written in TypeScript, but doesn’t matter, it would be almost identical in JS).

    It contains a call to a service function which in turn returns a promise. That promise returns a successResponse and that’s what we’re about to mock. What we want to test is a situation where a $http request didn’t fail, but it didn’t return any data either. In that case, we might want to display a toast message and skip refreshing the local cache.

    The following Jasmine test explains the code in-line. Two crucial parts are creation of the promise and how to resolve it and forcing the angular digest cycle with $rootScope.$apply(). The $apply() is needed because we’re invoking the promise from the Jasmine side, which is sort of “from the outside” and AngularJS will not be aware of that the event occurred so we need to let it know manually (the promise resolution wasn’t triggered by AngularJS itself internally).

    Hope that helps. If you know of an easier way to do this, please let me know in the comments. Thanks!

     

  • Translating canvas mouse position to JointJS matrix coordinates

    Translating canvas mouse position to JointJS matrix coordinates

    If you need a way to convert the JointJS mouse position to the canvas matrix coordinates, this is a simple way to do it (in combination with an angular mouse wheel event):

    Short, but hopefully helpful! Cheers!

  • InfluxDB Studio

    InfluxDB Studio

    It feels great when someone uses something you made and thinks it’s good. Every now and then someone creates a pull request for the InfuxData.Net lib I made and have been maintaining. It’s sort of a nice confirmation of your efforts and makes you warm and fuzzy on the inside. :D

    Well, this guy named meverett recently made a few pull requests with fixes and some nice lib improvements AND then told me that he’s actually using the library to make an InfluxDB database management studio (sort of what SQL Management Studio is for SQL, but for InfluxDB)!

    I find the admin dashboard that comes with InfluxDB a bit too simplistic and buggy and was actually thinking about how useful it would be if only there was a proper management app for Influx. Well, the InfluxDB Studio does more than the web admin dashboard and works great. And it made me really happy! :D

    This is how it looks:

    Thanks for the great work meverett!

  • Broadcasting AngularJS events from vanilla JavaScript

    Broadcasting AngularJS events from vanilla JavaScript

    In this short post I’ll show how to invoke AngularJS from plain JavaScript. Why would you want to do this? Well, in certain edge cases you might need to catch events in plain JS but still want to handle them back inside your Angular app. For example on an SVG element mouse event..

    Say you have an Angular controller named SomeCtrl and that’s where you want to handle the event. You’ll need an element you’ll be able to target either by an id or by a class, and it needs to be scoped with a controller like this:

    Next, say you have something like onmouseover=”onMouseOver()” on one of your HTML/SVG elements:

    You’ll need to add a $scope.$on listener for the “mouse-over-event” event inside your SomeCtrl controller. Your Angular app will catch the broadcast, you’ll be back inside the Angular scope and digest loop and you’ll be able to handle the event further from there.

    That’s it!

  • Alesis DM10, Ableton, Addictive Drums + an additional audio source from laptop

    Alesis DM10, Ableton, Addictive Drums + an additional audio source from laptop

    Hopefully this post will help you if you’re looking to setup your eDrums with Ableton and Addictive Drums 2 (or any another virtual drum kit with a VST for Ableton). I don’t know that much about music equipment so it took me a while to figure out where all the pieces fall into place.

    My initial issue with Ableton and AD2 was that MS Windows OS has very bad audio support (drivers) for anything more advanced than the simplest form of audio reproduction through speakers or headphones. What I wanted was to connect the Alesis DM10 to my laptop to get better quality drum samples with AD2 than what I had with the DM10 module and to be able to turn on a YouTube video and to play alongside with it. It didn’t take long for me to realize this wouldn’t work. Even with ASIO4ALL drivers, I could either get Ableton or the browser to output the sound into the headphones, not both at the same time.

    So, after a bit of research and some advice from a few fellow musicians, I decided that what I needed was a USB audio interface that would also act as a mixer. After doing a bit more research, I found out that Komplete Audio 6 was quite popular amongst drummers who wanted a low latency audio interface for triggering VST’s. I’m sure any other USB enabled interface with balanced input could easily do the job as well.

    Amazon.

    The next few steps included removing the ASIO4ALL drivers, installing official Komplete Audio 6 drivers, setting up Ableton with AD2 VST (make sure to check the “install as VST” checkbox during AD2 installation) and wiring up the hardware together.

    dm10-komplete6-laptop-setup

    This is how the Komplete 6 is supposed to light up when everything is connected and setup properly (both inputs are set to INST, headphones are set to 1/2, 48V on the back side is ON and the monitor “ON button” needs to be pressed once every time you turn this whole setup on):

    komplete-audio-6

    This is how the channels IN/OUT setup in Ableton looks like (click to view the full resolution screenshot):

    ableton-channels

    Input:

    ableton-input-config

    Output:

    ableton-output-config

    Ableton audio preferences:

    ableton-preferences-audio

    Ableton link/MIDI preferences:

    ableton-preferences-link-midi

    Komplete Audio 6 control panel:

    komplete-audio-6-driver

    And this is the screen where you can map the DM10 MIDI triggers to AD2 sounds (this AD2 keymap might help you with that):

    addictive-drums-2

    To map the triggers easier, press the “Learn” button and then hit the element that you wish to map with a stick. This will utilize AD’s “smart learning” and will automatically map the input from a trigger with an AD2 element (snare, hi-hat, kick, whatever..). Sometimes it’s a bit hard to use this (for example the ride bell which can be somewhat hard to trigger on DM10) but I found that for all the other elements it does the job really well.

    You might also want to slightly adjust triggers sensitivity on the DM10 module itself to make the AD2 respond more to your liking and expectations (you can make it require more or less force to produce trigger sound). Use that in conjunction with the curve on the righthand side of the hi-hat image from the last screenshot.

    All in all, I’m really happy with how this works. The latency is very minimal and 99% of the time it’s not in the way of playing. I do have an SSD in the laptop and there was a noticeable difference in how Ableton/AD2 performed while the crappy 5400 was inside and after I installed the SSD. The CPU in the laptop is the i7-4510U (not sure if that makes any difference or not).

    Hope this helps. If you have any questions or a different setup that you’d like to share, leave a comment. Cheers!

  • Multi-character Google Maps cluster marker labels

    Multi-character Google Maps cluster marker labels

    Turns out Google Maps API does not allow for more than a single character on marker labels (everything past the first character gets trimmed). Not even stackoverflow was able to provide me with a good way of going around this (take a look at this and this). So, a little digging was required…

    Fortunately, folks who made google-maps-clustering-csharp were able to go around this restriction by implementing a custom “label element” through prototyping the OverlayView element and then using it instead of a string for Marker’s label property. I extracted and cleaned up the code from their MVC application. What’s left is all you need to render markers that support multiple characters (feel free to break it into multiple files – perhaps a service and a controller if you’re using AngularJS or something similar):

    And this is the CSS that’s needed to make it all work (you can find the cluster icons here):

    Cheers!

Back to top