Hi guys,

Thanks very much for the advice. Upon @Jared-Wiltshire's recommendation I pasted my
Google Analytics Property ID into the UI settings page. It's then as simple as creating an onclick event: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

<div flex layout="column" onclick="ga('send', 'event', 'buttons', 'click','B005');"></div>

From here I was able to view real-time and historic page interactions based on clicking. I could also create events for mouse moving, but it generates a lot of events as you would expect and in google analytics you are limited to 500 hits per session or 10 million events per month.

<div flex layout="column" onmousemove="ga('send', 'event', 'mouse', 'move','B005');"></div>

Really happy though - exactly what I was after.

Hello,

I have a dashboard display which runs unattended on Mango and I would like to track how often people are clicking on it and interacting with it.
So far I have considered detecting mouse movement using JS, something like: https://stackoverflow.com/questions/13206042/detecting-mouse-movement-without-jquery
And then updating a point in the JSON store when this interaction is detected.
Using a Meta Data Source I could potentially record the change in the JSON point. Once the data point is set up I can then generate graphs, determine statistics and so on.

What do you think of this approach? There are no API publishers for this that I know of, but I think it could be a really valuable feature of Mango.

Thanks Jared,

It does work fine on Chrome and Firefox. I think the signs firmware might be the issue. Yesterday they released a new firmware update https://brightsign.zendesk.com/hc/en-us/articles/218067927-Firmware-Release-Notes - which mentions there is a new JavaScript API. I'll try that and let you know how I go.

Cheers.

@phildunlap said in Bright Sign XD1033:

http://errors.angularjs.org/1.6.6/ng/areq?p0=fn@p1=not a function%2C got undefined

Sorry @phildunlap, do you have any suggestions with might be wrong? It does work perfectly on Chrome or Firefox.

Sorry for the picture, I'm don't have immediate access to the BrightSign display. Can you tell anything else from this?

Hi guys,

Previously I was using a Raspberry Pi 3 to display my dashboard pages. I thought it was sufficient, but the RAM usage of Chromium often resulted in the page crashing. I also used IceWeasel on the Pi but as the RAM went down from 70% usage to 30%, the transitions between the dashboard pages has become slower (about 15 seconds) and the gauges take a long time to load.

I have been suggested to use BrightSign boxes, the particular box I am using is a XD1033: https://www.brightsign.biz/digital-signage-products/HD-product-line/HD223
They are used a lot at our organisations for many HD digital displays.

However, when I plug it in I get the follow error: Error bootstrapping mango app:[ng:area] http://errors.angularjs.org/1.6.6/ng/area?p0..... (See picture for full error).

Based on the XD1033 can you suggest why this is happening?

Would it be possible to do either of the following:

a) Find the average of a data point across a period for Mondays only? i.e.

<ma-point-statistics point="myPoint1" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<p>
    The average value for Mondays in the period is {{ statsObj.averageif."Timestamp=Monday".value }}
    }}
</p>

I've tried a few techniques using moment filters but have had no luck.

b) Somewhat similarly, could you find the average of a data series if another series is equal to/greater than/less than another value for the corresponding timestamp? For instance:

<ma-point-statistics point="myPoint1" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="myPoint2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<p>
    The average value when myPoint1 is greater than myPoint2 is {{ statsObj.averageif."StatsObj1.value>StatsObj2.value".value }}
    }}
</p>

I think these Excel style operations would be really useful to visualise trends in data immediately.

Cheers, Henry

Of course! Thank you very much - Resolved.

Thanks @Jared-Wiltshire, if ng-init doesn't take expressions, why cant I simply use "valueField": "myPoint.value"?

I dont use the watch-lists really... All I want to do is take <ma-get-point-value point-xid="EnergyOutA_Panasonic" point="myPoint" ></ma-get-point-value> and substitute it into the array for values. Surely there is an easy way to take a point-value, assign it a variable and just use that inside the array for values?

Thanks @Jared-Wiltshire!
My last qn - using ng-model, I can see how you have passed the value for an input into a graph's 'values'. How can I do this for a point value? . I tried interpolating a point value {{point.value}} directly inside values = "..." but that doesn't work. I.e

<div class="ma-designer-root" id="84e87319-1442-41fa-a4ef-a4102f9dbbc0" style="width: 1000px; height: 768px; position: relative;">
     
     <ma-get-point-value point-xid="EnergyOutA_Panasonic" point="myPoint" ></ma-get-point-value>

   <div ng-init="values = [{'country': 'USA','visits': {{myPoint.value}},'color': '#FF0F00'}, {'country': 'China','visits': 1882,'color': '#FF6600'}, {'country': 'Japan','visits': 1809,'color': '#FF9E01'}, {'country': 'Germany','visits': 1322,'color': '#FCD202'}, {'country': 'UK','visits': 1122,'color': '#F8FF01'}, {'country': 'France','visits': 1114,'color': '#B0DE09'}, {'country': 'India','visits': 984,'color': '#04D215'}, {'country': 'Spain','visits': 711,'color': '#0D8ECF'}, {'country': 'Netherlands','visits': 665,'color': '#0D52D1'}, {'country': 'Russia','visits': 580,'color': '#2A0CD0'}, {'country': 'South Korea','visits': 443,'color': '#8A0CCF'}, {'country': 'Canada','visits': 441,'color': '#CD0D74'}]"></div>
   
   <category-x-axis class="amchart" id="8ec0e029-4b0b-4f53-aa0d-6c25b4bfa991" style="position: absolute; left: 27px; top: 98px; width: 100%; height: 400px;" values="values"></category-x-axis>

Sorry about the lack of fluency in Angular - it is coming along...

Sorry @Jared-Wiltshire, I'm being continually pressed to make the category as x axis chart work. Say I have a chart from AmCharts I want to use: https://www.amcharts.com/demos/column-with-rotated-series/
Here is the HTML file:

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

.amcharts-export-menu-top-right {
  top: 10px;
  right: 0;
}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginRight": 70,
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01"
  }, {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202"
  }, {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01"
  }, {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09"
  }, {
    "country": "India",
    "visits": 984,
    "color": "#04D215"
  }, {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1"
  }, {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0"
  }, {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF"
  }, {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74"
  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "Visitors from country"
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "<b>[[category]]: [[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "labelRotation": 45
  },
  "export": {
    "enabled": true
  }

});
</script>

<!-- HTML -->
<div id="chartdiv"></div>

Consider that my value for USA was stored in a datapoint USA:

<ma-get-point-value point-xid="USA" point="USA"></ma-get-point-value>

I want to be able to pass this value into the javascript to generate the graph, but interpolating the JS expression {{USA.value}} and placing it in like

"visits": {{USA.value}},

Wont work. What is the best way to pass angular expressions into Javascript?

Thank you so much for that Jared - worked as expected!

Sorry to raise an old topic @Jared-Wiltshire,

<ma-now update-interval="30 seconds" on-change="firstTick && $state.go('page2'); firstTick = true"></ma-now>

Has been working fine. Is there a way to only change after 30 seconds if the page is idle? ng-idle is the only AngularJS module I've found that could potentially work. However, I'm stuck figuring out how I could use it within the ma-now directive.

Thank you @Jared-Wiltshire - simple fix. Simply using Angular Material Tabs solves the issue.

Cheers,
Henry

This is potentially beyond the scope of the forum...

If we created a tabbed dashboard page: like this example from W3schools, where tabbed content is originally hidden, but then displays upon click.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_fade

One of the errors I have found which I have tried to resolve, unsuccessfully, through looking at ng-map is that when <ma-map></ma-map> is placed inside one of the tabs. The result looks like this:

I believe the issue is that the map is initialised with no dimensions so when you then click on the div it doesn't know what size it should be. Is there way to refresh the ma-map when that div is selected?

Here is the example code:

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
</style>
</head>
<body>

<h3>Fade in Tabs</h3>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
<ma-get-point-value point-xid="Demo 01-fan" point="myPoint1"></ma-get-point-value> 
<ma-get-point-value point-xid="Demo 01-setpoint" point="myPoint2"></ma-get-point-value> 
<ma-get-point-value point-xid="Demo 01-Temp" point="myPoint3"></ma-get-point-value>
<ma-point-values point="myPoint3" values="chart1Vals" latest="50"></ma-point-values> 



<ma-map lat="-12.95" long="-38.45" zoom="12" map-type="roadmap" info-window-theme="dark" desktop-height="600px" mobile-height="450px" ng-init="myMarkers={
        true: 'img/map-markers/purple-dot.png',
        false: 'img/map-markers/orange-dot.png'}" output-data="myOutputData">
    
    <marker id="marker1" position="-12.90, -38.41" icon="{url: '{{myMarkers[myPoint1.value]}}'}" on-click="$parent.$ctrl.toggleInfoWindow('setPoint1', 'marker1')"></marker>
    <marker id="marker2" position="-12.95, -38.43" draggable="true" icon="{url: 'img/map-markers/green-dot.png'}" on-click="$parent.$ctrl.toggleInfoWindow('setPoint2', 'marker2')"></marker>
    <marker id="marker3" position="-12.99, -38.47" draggable="true" on-click="$parent.$ctrl.toggleInfoWindow('chart1', 'marker3')"></marker>
    <marker id="marker4" position="-12.92, -38.42" draggable="true" icon="{url: 'img/map-markers/yellow-dot.png'}" on-click="$parent.$ctrl.setOutputData('Demo 01-amps')"></marker>
    
    <info-window id="setPoint2">    
        <div>
            <ma-set-point-value point="myPoint2"></ma-set-point-value>
        </div>
    </info-window>
    <info-window id="setPoint1">
        <div>
            <ma-set-point-value point="myPoint1"></ma-set-point-value>
        </div>
    </info-window>
    <info-window id="chart1">
        <div layout="row" layout-padding>
            <ma-serial-chart style="height: 150px; width: 250px" series-1-point="myPoint3" series-1-values="chart1Vals"></ma-serial-chart>
        </div>
    </info-window>
</ma-map>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent*.style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks*.className = tablinks*.className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
     
</body>
</html> 

Excellent, thanks guys - perfect fix.

Hello,

I have an SQL data source set-up which I would like to poll every 10 seconds. This data is for display purposes only and I would like to discard it after - within the next minute for instance. In setting up all data sources, however, I have noticed the minimum purge duration is one day.

Is there a custom way to purge data older than a minute?

Cheers,
Henry

Thanks Jared, that's perfect.

Hi @Jared-Wiltshire - is there an expression I could use to determine how many items are in the JSON store? If this is difficult, what expression could I use to show the entire JSON store with all the entries?

Hi, I have just been trying to add a meta-data source on the cloud instance of Mango.
Simply add source > meta data:

When I try to save this, a pop-up occurs saying:

I'm unsure why this is occurring, the save button is just flashing and I cannot save the meta source in order to use scripting for data points.

Thank you,
Henry