I know this is old, but I'm working on something similar in SVG. I took a stab at modifying jqSimpleConnect, and it appears to work in a Mango user module. Here's what I did in case @BobDay still needs it or anyone else finds it useful.

First, I just put a copy of jqSimpleConnect.js in my public filestore, importing it in the define section of my user module. That let me start playing with it in the Chrome dev console until I could get it working. It defaults to putting the lines in the body, which are hidden behind the Mango UI. I tweaked it to use the Mango UI view area where custom pages are displayed and accounted for relative positioning. Finally, I wrapped it in a service.

I won't assert that this is correct way, but on a simple test page I could successfully recreate the basic jqSimpleConnect example.

In the user module, reference it in the three locations needed to make it a service.

define([ 'angular', 'require', ... './services/simpleConnectService.js', ], function(angular, require, ..., simpleConnectService) { 'use strict'; var yourModule = angular.module('yourModule', []); yourModule.service('simpleConnect', [simpleConnectService]); ...

I didn't bother actually testing directives. I just injected it into a random test component I had, logged it to the console, saved as variable, and played with it interactively from there.

temp1.connect('#div_a', '#div_b', {radius: 8, color: 'green'});

Now for the wrapped/modified jQuery. I left comments to show what I changed.

define([], function() { 'use strict'; // SimpleConnectService wraps jqSimpleConnect as an AngularJS service for Mango. // There are a few tweaks to make it work with the Mango dashboards, see "NOTE:" comments for modifications. function SimpleConnectService() { /* * «Copyright 2012 José F. Maldonado» * * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /** * Declare namespace */ // NOTE: Use the service itself. // jqSimpleConnect = new Object(); let jqSimpleConnect = this; /** * 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. // NOTE: Get the position of the Mango UI view for displaying custom pages. let uiOffset = jQuery('div.ma-ui-main-view > div[ui-view]').offset(); let uiPos = jQuery('div.ma-ui-main-view > div[ui-view]').position(); uiPos.left = parseInt(uiOffset.left) - parseInt(uiPos.left); uiPos.top = parseInt(uiOffset.top) - parseInt(uiPos.top); // Calculate the positions of the element's center. var posA = connection.elementA.offset(); // NOTE: Use the UI offset to calculate a relative 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); posA.left = parseInt(posA.left, 10) - uiPos.left + parseInt(connection.elementA.outerWidth()/2, 10); posA.top = parseInt(posA.top, 10) - uiPos.top + parseInt(connection.elementA.outerHeight()/2, 10); var posB = connection.elementB.offset(); // NOTE: Use the UI offset to calculate a relative 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); posB.left = parseInt(posB.left, 10) - uiPos.left + parseInt(connection.elementB.outerWidth()/2, 10); posB.top = parseInt(posB.top, 10) - uiPos.top + 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. // NOTE: Use length instead of size(). AngularJS/Mango's jQuery doesn't have size. // if(elementA == null || jQuery(elementA).size() == 0 || // elementB == null || jQuery(elementB).size() == 0) { // return null; // } if(elementA == null || jQuery(elementA).length == 0 || elementB == null || jQuery(elementB).length == 0) { // NOTE: Yell at me when I make a typo. Remove when it's working, or make this more useful. console.warn('failed to locate elements'); return null; } // NOTE: Use length instead of size() here too. elementA = jQuery(elementA); // if(elementA.size() > 1) elementA = elementA.first(); if(elementA.length > 1) elementA = elementA.first(); elementB = jQuery(elementB); // if(elementB.size() > 1) elementB = elementB.first(); 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'); connection.click = (options != null && options.click != null)? options.click : null; connection.mouseover = (options != null && options.mouseover != null)? options.mouseover : null; connection.mouseout = (options != null && options.mouseout != null)? options.mouseout : null; // 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>'; // NOTE: 'body' will place elements behind the page. Instead of messing with z-index, use the Mango UI view. // 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')); jQuery('div.ma-ui-main-view > div[ui-view]').prepend(div.replace('divUniqueIdentifier', connection.id + '_1')); jQuery('div.ma-ui-main-view > div[ui-view]').prepend(div.replace('divUniqueIdentifier', connection.id + '_2')); jQuery('div.ma-ui-main-view > div[ui-view]').prepend(div.replace('divUniqueIdentifier', connection.id + '_3')); jQuery("."+connection.id).click(function() { if(typeof connection.click == "function") { connection.click(connection); } }).on("mouseover", function() { if(typeof connection.mouseover == "function") { connection.mouseover(connection); } }).on("mouseout", function() { if(typeof connection.mouseout == "function") { connection.mouseout(connection); } }); // 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]; } } // End of jqSimpleConnect. } return SimpleConnectService; });

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

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

I would put it all in a single CSS file. If your project grows and it becomes unmanageable you could look at using Webpack to import CSS in your components. This is what we use, however for a smaller project I would consider it to probably be more trouble than it is worth.

@BobDay @MattFox
https://forum.infiniteautomation.com/topic/4607/using-webpack-with-user-modules

Thanks for all the help.

will do. thanks... and nothing there should be construed as in any way critical!

Actually figured out how to do this with a range renderer. Would be good to know, however, if there is access to the point properties via script. Guess I could try, huh...

Thank you. The work you've done there is nothing short of amazing.

@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

to your third point, actually on GMT-08:00, which does explain that!

Wait, there aren't 22 hours in a day? Whoops :P

The offsets are right - still trying to sort why the epoch value is off by a couple of days +/-. Will keep mucking about here.

How did you know the value in the register before reading it? Perhaps it's not sync'ed to the right time. The bit banging to decode registers into data types can be found here, but it's quite unlikely there's an issue there: https://github.com/infiniteautomation/modbus4j/blob/master/src/com/serotonin/modbus4j/locator/NumericLocator.java

perfect! Not sure how I missed About Mango Java Script - thank you!

point taken!

@bullitbd said in Trouble with Mango kiosk display:

have you tried any of the lightweight browsers?

No sorry, maybe someone else can jump in.

@bullitbd said in Trouble with Mango kiosk display:

Midori doesn't work well at first try

This does not surprise me. It apparently uses the WebKit browser engine, but probably an older version. Chrome now uses its own Blink engine, Firefox its own Gecko engine. The WebKit version that the latest Safari browsers use still does not work especially well with Mango.

@phildunlap Thank you.

great. thanks. Sorry for the plethora of noob questions...

@bullitbd Thanks, that helped me find the problem. I forgot to restart Mango after the change.

cool @Jared-Wiltshire . thanks.