@mattfox said in ma-point-value: number formatting:

point.value.toFixed(1)

you can also use a built-in Angular filter -
{{point.value | number(decimal places)}}

...even when doing things you can't do more than basics - like
{{point.value*256 | number(1)}}

edit. Jared Wiltshire - examples given here are incorrect, see post by @Puckfist below.

Thanks as well, @CraigWeb

sure. thanks...

Thanks, @Jared-Wiltshire. The problem seems to be as follows:

If started from root (which I don't want to do, of course) with the --no-sandbox switch, everything works fine.

if started from regular user, it appears there is an X server bug -

Fatal server error:
(EE) parse_vt_settings: Cannot open /dev/tty0 (Permission denied)

Dealt with permissions, but then another similar permissions error...

After fixing permissions on the tty files, it works now without having to run as root.

Any experience with minimal Firefox kiosk use? Couldn't find much of value out there. Thanks again.

edit: for anyone who comes across this, and keeping in mind that I have only vague knowledge of how xserver works, the environment needs access to a number of /dev/tty files. I had to change permissions (a+rw) in tty files in 3 successive attempts, until successful. In my case it was tty0, tty7, tty2. This is specific at least to xorg compiled with raspberian stretch lite as of 12/20/2018.

@jared-wiltshire said in amCharts - maTankLevel center chart column in div:

marginRight: -74

Aha! Thank you Jared! I was barking up another tree... sorry for all the code - TMI

Thanks for all the help.

so WE did! same problem tho.

lets take this back to chat...

ok, @MattFox... I feel like a post (as in dumb as one). Can you refresh me again as to how to now break out (and where to declare) the component's controller in its own file?

userModule.js

define(['angular', 'require','./push/pushLamp.js'],
  function (angular, require, pushLamp) {
    var userModule = angular.module('userModule', ['maUiApp']);

    userModule.filter('unsafe', ['$sce', function($sce) {
       return $sce.trustAsHtml;
    }]);

    try
    {
      userModule.component('pushLamp',pushLamp);
    }
    catch(e)
    {
      console.log('error: ', e);
    }
    return userModule.js;

});

pushLamp.js:

define(['angular', 'require'], function (angular, require) {

  pushCtrl.$inject = ['$scope','$timeout'];

  function pushCtrl($scope,$timeout) {

    const $ctrl = this;
    $ctrl.$onChanges = function (changes) {
      if (changes.points && Array.isArray($ctrl.points)) {

        $ctrl.point = $ctrl.points.find(p => p.xid === 'DP_ind_' + $ctrl.target);
        $ctrl.switchPoint = $ctrl.points.find(p => p.xid === 'DP_sw_' + $ctrl.target);

        $ctrl.ptCSS = { // point css values for color and blink; ex, ng-class=""
          get color(){
            if ($ctrl.point.color < 10) {
              return 0;
            }
            return Math.floor($ctrl.point.value / 10)},
          get blink(){return 'blink' + $ctrl.point.value % 10},
          get colStyle(){return 'color'+this.color}
        };

        $timeout(function() {
          console.log('color:', $ctrl.ptCSS.colStyle, 'blink:', $ctrl.ptCSS.blink );
        },1000);
      }
    };

    $ctrl.pushed = function() {
      console.log($ctrl.switchPoint.value);
        if ($ctrl.switchPoint) {
            $ctrl.switchPoint.toggleValue();
          console.log('switch ' + $ctrl.target + ' was switched.' );
       }
    };
  }

return {
      templateUrl: '/modules/mangoUI/web/dev/push/push.html',
      bindings: {
        points: '<',
        target: '@'
      },
      controller: pushCtrl
    };

});

@MattFox - Case closed. I stupidly put a non-specific div {...text-align:center}in one of my css files. Probably would have caught that, but the ace_text-layer width (& height) is set at 1000000px in ace/css/ace_editor.css, and height is further set to 1e+06px inline.

After much searching, I'm unable to find an example of why one would want to do that - although there must be one! Interestingly Chrome was rendering veeerrry slowly - when I lowered the width to 10000px, it sped up markedly.

We want to use a jquery plugin (jqSimpleConnect.js) to draw div connector lines; As we don't have access to the angularjs environment in designer per se, is there a preferred way to (1) wrap a jQuery plugin in a directive/component and (2) declare the external js file?

I believe I read that you do load jQuery in your .app. Thanks - sorry if this has been answered elsewhere - couldn't find it.

Code FYI:

/*
 * «Copyright 2012 José F. Maldonado»


/**
 * Declare namespace
 */
jqSimpleConnect = new Object();

/**
 * This member is an auxiliary counter used for generate unique identifiers.
 */
jqSimpleConnect._idGenerator = 0;

/**
 * This member is an associative array which contains all the document's connections.
 */
jqSimpleConnect._connections = new Object();

/**
 * Positions a connection, acording to the position of the elements which connects.
 *
 * @param {object} connection A connection object.
 */
jqSimpleConnect._positionConnection = function(connection) {
    // Calculate the positions of the element's center.
    var posA = connection.elementA.offset();
    posA.left = parseInt(posA.left, 10) + parseInt(connection.elementA.outerWidth()/2, 10);
    posA.top = parseInt(posA.top, 10) + parseInt(connection.elementA.outerHeight()/2, 10);

    var posB = connection.elementB.offset();
    posB.left = parseInt(posB.left, 10) + parseInt(connection.elementB.outerWidth()/2, 10);
    posB.top = parseInt(posB.top, 10) + parseInt(connection.elementB.outerHeight()/2, 10);

    // Get the line's elements.
    var line1 = jQuery('#' + connection.id + '_1');
    var line2 = jQuery('#' + connection.id + '_2');
    var line3 = jQuery('#' + connection.id + '_3');

    // Verify if the elements are aligned in a horizontal or vertical line.
    if(posA.left == posB.left || posA.top == posB.top) {
        // Uses only one line (hide the other two).
        line1.show();
        line2.hide();
        line3.hide();

        // Verify if the line must be vertical or horizonal.
        if(posA.left == posB.left) {
            // Vertical line.
            jqSimpleConnect._positionVerticalLine(line1, posA, posB, connection.radius, connection.roundedCorners);
        } else {
            // Horizontal line.
            jqSimpleConnect._positionHorizontalLine(line1, posA, posB, connection.radius, connection.roundedCorners);
        }
    } else {
        // Verify if must use two lines or three.
        if(connection.anchorA != connection.anchorB) {
            // Use two lines (hide the third).
            line1.show();
            line2.show();
            line3.hide();

            // Check the anchors of the elements.
            var corner = new Object();
            if(connection.anchorA == 'vertical') {
                // Find the corner's position.
                corner.left = posA.left;
                corner.top = posB.top;

                // Draw lines.
                jqSimpleConnect._positionVerticalLine(line1, posA, corner, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionHorizontalLine(line2, posB, corner, connection.radius, connection.roundedCorners);
            } else {
                // Find the corner's position.
                corner.left = posB.left;
                corner.top = posA.top;

                // Draw lines.
                jqSimpleConnect._positionVerticalLine(line1, posB, corner, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionHorizontalLine(line2, posA, corner, connection.radius, connection.roundedCorners);
            }
        } else {
            // Use three lines.
            line1.show();
            line2.show();
            line3.show();

            // Declare connection points.
            var corner1 = new Object();
            var corner2 = new Object();

            // Find if the middle's line must be vertical o horizontal.
            if(connection.anchorA == 'vertical') {
                // Middle's line must be horizontal.
                corner1.top = parseInt((posA.top + posB.top)/2, 10);
                corner2.top = corner1.top;
                corner1.left = posA.left;
                corner2.left = posB.left;

                // Draw lines.
                jqSimpleConnect._positionVerticalLine(line1, posA, corner1, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionVerticalLine(line2, posB, corner2, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionHorizontalLine(line3, corner1, corner2, connection.radius, connection.roundedCorners);
            } else {
                // Middle's line must be vertical.
                corner1.left = parseInt((posA.left + posB.left)/2, 10);
                corner2.left = corner1.left;
                corner1.top = posA.top;
                corner2.top = posB.top;

                // Draw lines.
                jqSimpleConnect._positionHorizontalLine(line1, posA, corner1, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionHorizontalLine(line2, posB, corner2, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionVerticalLine(line3, corner1, corner2, connection.radius, connection.roundedCorners);
            }
        }
    }
}

/**
 * Draws a vertical line, between the two points, by changing the properties of a HTML element.
 *
 *@param {object} jqElement A jQuery object of the HTML element used for represent the line.
 *@param {object} point1 An object with the properties 'left' and 'top' representing the position of the first point.
 *@param {object} point2 An object with the properties 'left' and 'top' representing the position of the second point.
 *@param {integer} radius The line's radius.
 *@param {boolean} roundedCorners A boolean indicating if the corners are going to be round.
 */
jqSimpleConnect._positionVerticalLine = function(jqElement, point1, point2, radius, roundedCorners) {
    var halfRadius = parseInt(radius/2, 10);
    jqElement.css('left', point1.left - halfRadius);
    jqElement.css('top', ((point1.top > point2.top)? (point2.top - halfRadius) : (point1.top - halfRadius)));
    jqElement.css('width', radius + 'px');
    jqElement.css('height', ((point1.top > point2.top)? (point1.top - point2.top + radius) : (point2.top - point1.top + radius) ) + 'px');
}

/**
 * Draws a horizontal line, between the two points, by changing the properties of a HTML element.
 *
 *@param {object} jqElement A jQuery object of the HTML element used for represent the line.
 *@param {object} point1 An object with the properties 'left' and 'top' representing the position of the first point.
 *@param {object} point2 An object with the properties 'left' and 'top' representing the position of the second point.
 *@param {integer} radius The line's radius.
 *@param {boolean} roundedCorners A boolean indicating if the corners are going to be round.
 */
jqSimpleConnect._positionHorizontalLine = function(jqElement, point1, point2, radius, roundedCorners) {
    var halfRadius = parseInt(radius/2, 10);
    jqElement.css('top', point1.top - halfRadius);
    jqElement.css('left', ((point1.left > point2.left)? (point2.left - halfRadius) : (point1.left - halfRadius)));
    jqElement.css('height', radius + 'px');
    jqElement.css('width', ((point1.left > point2.left)? (point1.left - point2.left + radius) : (point2.left - point1.left + radius) ) + 'px');
}

/**
 * Draws a connection between two elements.
 *
 * @param {object} elementA A CSS selector or a jQuery's object for select the first element.
 * @param {object} elementB A CSS selector or a jQuery's object for select the second element.
 * @param {object} options An associative array with the properties 'color' (which defines the color of the connection), 'radius' (the width of the
 * connection), 'roundedCorners' (a boolean indicating if the corners must be round), 'anchorA' (the anchor type of the first element, which can be
 * 'horizontal' or 'vertical') and 'anchorB' (the anchor type of second element).
 * @returns {string} The connection identifier or 'null' if the connection could not be draw.
 */
jqSimpleConnect.connect = function(elementA, elementB, options) {
    // Verify if the element's selector are ok.
    if(elementA == null || jQuery(elementA).length == 0 ||
       elementB == null || jQuery(elementB).length == 0) {
       return null;
       }

    elementA = jQuery(elementA);
    if(elementA.length > 1) elementA = elementA.first();
    elementB = jQuery(elementB);
    if(elementB.length > 1) elementB = elementB.first();

    // Create connection object.
    var connection = new Object();
    connection.id = 'jqSimpleConnect_' + jqSimpleConnect._idGenerator++;
    connection.elementA = elementA;
    connection.elementB = elementB;
    connection.color = (options != null && options.color != null)? options.color + '' : '#808080';
    connection.radius = (options != null && options.radius != null && !isNaN(options.radius))? parseInt(options.radius, 10) : 5;
    connection.anchorA = (options != null && options.anchorA != null && (options.anchorA == 'vertical' || options.anchorA == 'horizontal'))? options.anchorA : 'horizontal';
    connection.anchorB = (options != null && options.anchorB != null && (options.anchorB == 'vertical' || options.anchorB == 'horizontal'))? options.anchorB : 'horizontal';
    connection.roundedCorners = options != null && options.roundedCorners != null && (options.roundedCorners == true || options.roundedCorners == 'true');

    // Add connection to the connection's list.
    jqSimpleConnect._connections[connection.id] = connection;

    // Create HTML elements.
    var div = '<div id="divUniqueIdentifier" class="jqSimpleConnect '+connection.id+'" ' +
              'style="width:'+connection.radius+'px; ' +
                     'height:'+connection.radius+'px; ' +
                     'background-color:'+connection.color+'; ' +
                     (connection.roundedCorners? 'border-radius:'+parseInt(connection.radius/2,10)+'px; -webkit-border-radius:'+parseInt(connection.radius/2,10)+'px; -moz-border-radius:'+parseInt(connection.radius/2,10)+'px; ' : '') +
                     'position:absolute;"></div>';
    jQuery('body').prepend(div.replace('divUniqueIdentifier', connection.id + '_1'));
    jQuery('body').prepend(div.replace('divUniqueIdentifier', connection.id + '_2'));
    jQuery('body').prepend(div.replace('divUniqueIdentifier', connection.id + '_3'));

    // Position connection.
    jqSimpleConnect._positionConnection(connection);

    // Return result.
    return connection.id;
}

/**
 * Repaints a connection.
 *
 * @param {string} connectionId The connection identifier.
 * @returns {boolean} 'true' if the operation was done, 'false' if the connection no exists.
 */
jqSimpleConnect.repaintConnection = function(connectionId) {
    var connection = jqSimpleConnect._connections[connectionId];
    if(connection != null) {
        jqSimpleConnect._positionConnection(connection);
        return true;
    }
    return false;
}

/**
 * Repaints all the connections.
 */
jqSimpleConnect.repaintAll = function() {
    for(var key in jqSimpleConnect._connections) {
        jqSimpleConnect._positionConnection(jqSimpleConnect._connections[key]);
    }
}

/**
 * Removes a connection.
 *
 * @param {string} connectionId The connection identifier.
 * @returns {boolean} 'true' if the operation was done, 'false' if the connection no exists.
 */
jqSimpleConnect.removeConnection = function(connectionId) {
    if(jqSimpleConnect._connections[connectionId] != null) {
        // Remove HTML element.
        jQuery('.jqSimpleConnect.'+connectionId).remove();

        // Remove connection data.
        jqSimpleConnect._connections[connectionId] = null;
        delete jqSimpleConnect._connections[connectionId];

        // Return result.
        return true;
    }
    return false;
}

/**
 * Removes all the connections.
 */
jqSimpleConnect.removeAll = function() {
    // Remove HTML elements.
    jQuery('.jqSimpleConnect').remove();

    // Clear connections list.
    for(var key in jqSimpleConnect._connections) {
        jqSimpleConnect._connections[key] = null;
        delete jqSimpleConnect._connections[key];
    }
}

Ah... but of course you knew all that. Short answer is yes!

...confirmed it parses the pasted html at paste time. If I add a color: class to any of the spans, it's not read.

well, not exactly. Ace appears to parse out the JSON into 'lines', concatenated with spans:

<div class="ace_line" style="height: 30px;">
    <span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt; 
       </span>
    <span class="ace_meta ace_tag ace_tag-name ace_xml">div</span>
    <span class="ace_text ace_tag-whitespace ace_xml"> </span>
    <span class="ace_entity ace_other ace_attribute-name ace_xml">class</span> 
   <span class="ace_keyword ace_operator ace_attribute-equals ace_xml">= 
       </span> 
   <span class="ace_string ace_attribute-value ace_xml">"ma-designer-root" 
       </span> 
   <span class="ace_text ace_tag-whitespace ace_xml"> </span>
   <span class="ace_entity ace_other ace_attribute-name ace_xml">id</span>
   <span class="ace_keyword ace_operator ace_attribute-equals ace_xml">= 
      </span> 
   <span class="ace_string ace_attribute-value ace_xml">"6d41eb7c-475e-48df- 
      9132</span>
</div>

but, yes, the info is all there.
I can copy and paste into and from the editor.
text color is inherited from theme:

.ace-monokai {background-color: #272822;color: #F8F8F2;}

caching is disabled... that was pilot error. Now only showing 2 warnings (IE errors) - no errors

Note selected text in editor (CMD-a)

@MattFox oops sorry... it only showed the warnings prior to this iteration...

sure. thanks...

...did. nothing out of the ordinary. very odd.

@MattFox - posted issue in Mango Feedback, should you have any thoughts.