• Jared Wiltshire

    You can do it from CSS but its pretty hacky -

    .md-button span[ma-tr="common.relinquish"] {
        text-indent: -9999px;
        line-height: 0;
        visibility: hidden;
        display: inline-block;
    .md-button span[ma-tr="common.relinquish"]::after {
        text-indent: 0;
        line-height: initial;
        visibility: visible;
        display: block;
        content: "Auto";

    posted in MangoES Hardware read more
  • Jared Wiltshire

    @jf89 said in Difficulty handling simple objects, not described in the videos.:

    The problem is that the pointXid link: internal_mango_num_data_points is a link to a system variable in the mango software to display a list of points.
    Or, the link I want, is to call another custom page created.
    And I do not see, variable pointXid, assigned to this new page.
    even in the following screenshot (help for ma_button) , i don't understand where it's possible , to put the name of the link that will go to open the selected page.

    I don't know what your issue is. If you have a question, please pose it in a succinct manner. If English is not your first language, please check your translation. I am having difficulty understanding your questions, if indeed you are asking any.

    I will say this, the ma-button component has a property labelled in the dashboard designer as "Link to state", you can choose a page to link to from this drop down. If you need to add a state parameter, you will need to edit the markup, use the ui-state and ui-state-params attributes as shown in the screenshot you already posted.

    posted in Mango Automation read more
  • Jared Wiltshire

    @jf89 said in Difficulty handling simple objects, not described in the videos.:

    from the videos and tutorials of this site, I try to make links between synoptics, but without success.

    You have used the term "synoptics" several times through your post, I am not sure what you mean by this. I will assume you are talking about pages.

    Here is a link from the help pages on how to link between pages. I would urge you to search the help site and look through the examples built into the Mango UI.

    @jf89 said in Difficulty handling simple objects, not described in the videos.:

    To be able to assign them coordinates, I am obliged to assign them a style like this:
    but, I can not change this button, directly from the Mango interface, I can do it only in edit mode.

    I assume you mean that you cannot drag the buttons around the page using the "Dashboard designer" tool? You must create the page using "Dashboard designer" for this to work, specifically it inserts a top-level div element and every element inside this must have an id attribute.

    @jf89 said in Difficulty handling simple objects, not described in the videos.:

    you will agree, that if one does not master the HTML well, and the classes associated with the objects, .., It is still very difficult for a PLC programmer , to be able to use the buttons, to make links between synoptics, synoptics all at short.

    What should be done to make synoptics, as we usually do in Web server? (wago for example?)

    Like everything, there is a learning curve. We strive to strike a balance between ease of use and flexibility. The difference with Mango is that we use open technologies such as HTML, Javascript, and CSS. The effort you put into learning these technologies will never be wasted, this knowledge can be applied in a myriad of places. Compare this to the vast majority of SCADA platforms that force you to learn some propriety page editing tool and arcane scripting language.

    @jf89 said in Difficulty handling simple objects, not described in the videos.:

    A tutorial like the one made for, Ma-set-point-value, my-switch, my-point-value, the watchlist, or excel reports to describe by the example my-button would be welcome.

    There is documentation for these components available under the "API Documentation" section of the Mango menu. You may have to enable the menu item using the menu editor. This is described here - https://help.infiniteautomation.com/getting-started?rq=examples

    There is also an "Examples" section of the menu with a lot of example code in it.

    @jf89 said in Difficulty handling simple objects, not described in the videos.:

    To exploit the explanations ui-router site github, it takes a seasoned computer scientist who knows the HTML, JavaScript.

    To create a simple link between pages you do not need to know the inner workings of ui-router. We link to their documentation so that people who need to do more advanced things are able to, again this is an open technology that we leverage.

    posted in Mango Automation read more
  • Jared Wiltshire

    @Ralf I would suggest that you read the markup that Phillip posted and try and understand what it is doing, then try to adapt it to suit your needs. We are here to help you, not to do it for you.

    posted in User help read more
  • Jared Wiltshire

    @Phillip-Weeks @iperry

    There is a new component for displaying maps in the latest UI module release (v3.6.5). It displays maps from OpenStreetMap by default but will use Mapbox if you supply an access token in the UI settings page.

    Here's a quick demo page -

    <div class="ma-designer-root" id="dd1f477d-71b6-4b64-b78e-8071fdbdb4e9" style="width: 1200px; height: 800px; position: relative;" ng-init="page = {center: {lat:40.0150, lng:-105.2705}, zoom: 13, markers: [{coords: '40.0150,-105.2805'}, {coords: '40.0250,-105.2705'}, {coords: '40.0050,-105.2505', lightOn:true}], tooltip: 'I am a draggable marker', marker: [40.0120,-105.2705], showMarker: true, rectColor: 'red'}">
        <ma-tile-map id="3cedab37-da3d-4cd7-9f92-bc9bff377f31" style="position: absolute; width: 800px; height: 600px; left: 30px; top: 152px; z-index: 1;" center="{lat: page.center.lat, lng: page.center.lng}" zoom="page.zoom" options="{attributionControl: true}" on-move="page.center = $center; page.zoom = $zoom" show-location="page.showLocation" tile-layers="[]" automatic-tile-layers="false">
            <ma-tile-map-tile-layer tile-layer-id="mapbox.streets" name="Mapbox Streets"></ma-tile-map-tile-layer>
            <ma-tile-map-tile-layer tile-layer-id="openstreetmap" name="OSM"></ma-tile-map-tile-layer>
            <ma-tile-map-tile-layer tile-layer-id="mapbox.satellite" name="Mapbox Satellite" enabled="true" ng-if="page.satelliteLayer"></ma-tile-map-tile-layer>
            <ma-tile-map-layer name="Shapes" enabled="true">
                <ma-tile-map-circle coordinates="::{lat:40.005, lng:-105.265}" options="{radius: 500, color: 'green', fillColor: 'green'}" tooltip="Circle tooltip">Circle popup contents <div ng-click="$circle.setStyle({fillColor: 'red'})">Set red</div></ma-tile-map-circle>
                <ma-tile-map-rectangle bounds="::[{lat:40.0132, lng:-105.322},{lat:39.996, lng:-105.306}]" options="{color: page.rectColor, fillColor: page.rectColor}" tooltip="Rectangle tooltip">Rectangle popup contents</ma-tile-map-rectangle>
                <ma-tile-map-polygon coordinates="::[{lat:40.043, lng:-105.230},{lat:40.037, lng:-105.239},{lat:40.033, lng:-105.222}]" tooltip="Polygon tooltip">Polygon popup contents</ma-tile-map-polygon>
                <ma-tile-map-polyline coordinates="::[{lat:39.997, lng:-105.231},{lat:39.985, lng:-105.232},{lat:39.980, lng:-105.222}]" options="::{color: '#a233e4'}" tooltip="Polyline tooltip">Polyline popup contents</ma-tile-map-polyline>
            <svg id="my-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"></circle></svg>
            <div ng-init="page.lightOnIcon = $leaflet.icon({iconUrl: '/ui/img/ligthbulb_on.png', iconSize: [48,48], iconAnchor: [24,48], popupAnchor: [0,-48]})"></div>
            <div ng-init="page.lightOffIcon = $leaflet.icon({iconUrl: '/ui/img/ligthbulb_off.png', iconSize: [48,48], iconAnchor: [24,48], popupAnchor: [0,-48]})"></div>
            <ma-tile-map-marker ng-repeat="m in page.markers" coordinates="m.coords" on-click="page.selected = $coordinates; m.lightOn = !m.lightOn" icon="m.lightOn ? page.lightOnIcon : page.lightOffIcon">{{m.coords}}</ma-tile-map-marker>
            <ma-tile-map-marker ng-if="page.showMarker" coordinates="[page.marker[0], page.marker[1]]" tooltip="{{page.tooltip}}" on-drag="page.marker[0] = $coordinates.lat; page.marker[1] = $coordinates.lng" options="{draggable: true}" on-click="page.selected = $coordinates">
                <div>The map center is {{$map.getCenter()}}</div>
                <div>The zoom level is {{$map.getZoom()}}</div>
                <div><em ng-click="$marker.closePopup()">Close popup</em></div>
        <md-switch id="81aa3202-eda2-41d4-b2bc-e33b940ee3b8" style="position: absolute; left: 548px; top: 66px;" ng-model="page.showMarker">Show marker</md-switch>
        <md-input-container id="0630f237-dffc-464b-9c7d-a25e23e0d39c" style="position: absolute; left: 379px; top: 60px;">
            <input ng-model="page.tooltip">
        <md-slider id="6082cd89-d186-422a-b578-cea2702899c0" style="position: absolute; left: 206px; top: 152px; width: 400px;" md-discrete="" ng-model="page.zoom" step="1" min="0" max="18"></md-slider>
        <md-input-container id="5bb31ffa-8888-4fa3-a359-5abb0fb5f4c9" style="position: absolute; left: 41px; top: 5px;">
            <label>Map centre latitude</label>
            <input ng-model="page.center.lat" type="number" step="0.01">
        <md-input-container id="66f1bedd-fd3f-4477-8593-c092daa743c5" style="position: absolute; left: 210px; top: 5px;">
            <label>Map centre longitude</label>
            <input ng-model="page.center.lng" type="number" step="0.01">
        <md-input-container id="b5a634c0-2cc4-48e7-9ff5-e28781232975" style="position: absolute; left: 41px; top: 60px;">
            <label>Marker latitude</label>
            <input ng-model="page.marker[0]" type="number" step="0.01">
        <md-input-container id="4b2de91d-ece9-4edb-8ac2-c9469045d3a4" style="position: absolute; left: 210px; top: 60px;">
            <label>Marker longitude</label>
            <input ng-model="page.marker[1]" type="number" step="0.01">
        <div id="d01d0a7a-ee67-4f1a-854d-fb8cdf4b69f2" style="position: absolute; left: 179px; top: 222px; width: 374px; height: 43px; z-index: 2; color: rgb(51, 51, 51); font-size: 20px; font-weight: bold;" ng-show="page.selected">You selected the marker at {{page.selected}}</div>
        <md-button id="87cd5f8d-9a29-43f6-8ad3-723b1212fa7e" style="position: absolute; left: 560px; top: 6px;" ng-click="page.showLocation = {setView: true}">Show location</md-button>
        <md-button id="66a002a5-4c88-408e-9dcc-874f6a9dd905" style="position: absolute; left: 669.641px; top: 6px;" ng-click="page.showLocation = false">Hide location</md-button>
        <ma-color-picker id="ec6dfa5c-1109-4bca-9479-a8c2d4892935" ng-model="page.rectColor" style="position: absolute; left: 770px; top: 88px;"></ma-color-picker>
        <md-switch id="ae28fe7b-1a1b-495d-94e0-5ef233e3a814" style="position: absolute; left: 791.891px; top: 2px;" ng-model="page.satelliteLayer">Show satellite layer</md-switch>

    posted in User help read more
  • Jared Wiltshire

    @coreyf said in Recovering from Bad mangoUI-settings Preventing UI Startup:

    It looks like if I try to manually point to a legacy UI url, or navigate directly to /sqlConsole.shtml, it redirects me back to /ui/login

    I'm pretty sure if you navigate directly to /login.htm you should be able to login to the legacy UI.

    posted in User help read more
  • Jared Wiltshire

    Hey @coreyf its not stored in a file, it's in a SQL database. You can login to the legacy UI and modify the entry in the DB by navigating to /sqlConsole.shtm

    I think the easiest thing for you to do will be to delete all your UI settings -


    posted in User help read more
  • Jared Wiltshire

    Hi @Jonas the series colors are by default the color set to the chart color on the data point, you can edit the data points using the bulk editor to set their colors.

    You can also use CSS to style other parts of the chart. You can define a global CSS file on the UI settings page. Use the chrome element inspector to discover the CSS class on the SVG element inside the chart.

    edit. See this thread - https://forum.infiniteautomation.com/topic/4150/styling-amcharts
    Also, amcharts CSS reference - https://www.amcharts.com/docs/v3/tutorials/css-class-names/

    posted in Mango Automation general Discussion read more
  • Jared Wiltshire

    @phillip-weeks said in Help Using <ma-map & <info-window:

    Is there a way to copy a point variable to a <script> variable?

    No and I would strongly recommend against trying anything along these lines.

    Also I forgot to mention that I noticed this $parent.$ctrl.toggleInfoWindow('Info1', 'marker1')". It is poor practice to access the parent scope in this way and usually indicates that something is structured wrong.

    posted in User help read more
  • Jared Wiltshire

    Guys the ngMap library that underpins the ma-map component is really a bit crappy. I have definitely seen strange inexplicable behaviors like this from it in the past. I might create a new component that uses OpenStreetMap instead of Google Maps. Is satellite imagery important for either of you?

    Anyway @Phillip-Weeks the only things I can suggest are

    posted in User help read more