• 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.


    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.


    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):


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






    Ableton audio preferences:


    Ableton link/MIDI preferences:


    Komplete Audio 6 control panel:


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


    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):


  • Detecting no-Internet / user-offline in Angular

    Detecting no-Internet / user-offline in Angular

    Sometimes, a user might find himself disconnected from the Internet after he already got to your page. Given the nature of SPA apps, this situation might not be very obvious to the user at first and he might end up thinking that the “site doesn’t work”. If the user goes offline after he already landed on your AngularJS site, the back-end API’s won’t be accessible any more but all the client-side stuff will still remain loaded if the user does not refresh the page. The problem is – because the page is still visible and some events still respond to his input, he might not notice (or even understand) what actually happened.

    This may result with a call from your client. :) To prevent having to explain the whole situation, it might be easier to handle this situation in advance. For example, you could detect if the user is offline and then redirect him to a “warning” or an “error” page (you might want to precache the error page template upon page load).

    There is a very simple way in AngularJS to detect whether the user is disconnected from the Internet or not. Simply use/attach the following http-request-interceptor to your app.

  • Contributing back – InfluxData.Net NuGet

    Contributing back – InfluxData.Net NuGet

    On project that I currently work on in Dovetail, we’re using the InfluxDb time-series database. And it’s a really cool thing to be working with.

    Recently we had to move to a newer version of InfluxDb and the library that we were using at the time became a bit stale and didn’t support the newest version of InfluxDb (v0.9.6) which we had to move to. So, partially out of necessity, and partially “because I can” and wan to, I decided to update the currently existing library and then re-release it as a NuGet package under a slightly different name.

    *drumroll* – the code for the InfluxData.Net NuGet is available on Github. It already had a few code contributions which is quite exciting. The whole codebase has been refactored, additional tests written and I believe that the codebase is now quite stable. I plan on expanding the library API to support most of the stuff that InfluxDb provides, and I also plan on implementing the API’s for other InfluxData products such as Kapacitor and Telegraf.

    If people keep using it in the future, I’ll consider it a success and it will make me happy. :)

  • Loading embedded resource images into PdfSharp/MigraDoc for non-web projects layers

    Loading embedded resource images into PdfSharp/MigraDoc for non-web projects layers

    There are some cases (for example on Azure) when you can’t really rely on ASP’s Web-layer file resources or “server paths” and file management libraries to access your static resource files. For example if you have a business layer which doesn’t really have a direct access to another layer’s files but you need to generate a PDF using PdfSharp/MigraDoc inside that layer.

    How it can be done is – you need to add an image file to your layer, then right-click on it and go to it’s properties. There you need to set the “Build Action” to Embedded Resource, and the “Copy to Output Directory” to Copy if newer. After that, use these three simple methods to load up the image from the assembly into a Stream, convert it to a byte[] array and then encode it as a base64 string.

    By using the base64 representation of the image, you will be able to embed it into your PDF document.


Back to top