registerTemplate source

Parameters

Example

vuMeterConfig.registerTemplate('templateCustomId', {
     path: 'angular-vumeter/template/angular-vumeter.svg',
     getTemplateElements: function() {
         // let's find motion elements in svg knowing their types and ids
         function findElementInSVG(type, id) {
             var elements = $element.find(type);
             for (var i = 0; i < elements.length; i++) {
                 var el = elements[i];
                 if (el.id === id) {
                     return el;
                 }
             }
         }
        // trigger is a g element
        var trigger = findElementInSVG('g', 'trigger');
        // peak is a ellipse element
        var peak = findElementInSVG('ellipse', 'peak');
        return [angular.element(trigger), angular.element(peak)];
     },
     onUpdate: function($element, volume, templateElements) {
         // this is relative to the original system of coordinates of the template
         var rotationPivot = {
             x: 292,
             y: 331
         };
         // Let's get template elements calculated only once (not on every onUpdate iteration)
         var trigger = templateElements[0];
         var led = templateElements[1];
         var minAngle = 65, maxAngle = 100;
         // Transform volume in a visual data
         var deg = Math.min((minAngle * volume) / 100, maxAngle);
         // Trigger rotation
         trigger.attr('transform', 'rotate(' + deg + ' ' + rotationPivot.x + ' ' + rotationPivot.y + ')');
         // Led blinking
         led.attr('fill', volume > 100 ? '#ea2b2c' : '#992B2C');
     }
 }