Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • 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

    0_1505175440280_bc2a0933-667d-48b9-a277-7a4133721eb3-image.png

    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:

    0_1505175651649_abeaaa9c-fa41-413a-b151-19829ef3e79b-image.png

    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> 
    
    

  • @henryblu you might want to consider using Angular Material tabs, see the following links. You can use these on your page without any JavaScript.
    https://material.angularjs.org/latest/demo/tabs
    https://material.angularjs.org/latest/api/directive/mdTabs
    https://material.angularjs.org/latest/api/directive/mdTab

    You could try using the md-on-select attribute of md-tab to set a variable when the tab is selected then use a ng-if="variable" on the ma-map so it only initializes after the tab is selected.


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

    Cheers,
    Henry