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.
Custom Dashboard inageS(s) segment/shape creation and color control...Help!
-
I have two conveyor belt systems that I want to able to show the status of each segment in a color (Green=off, Red=running, yellow=standby/ready). These are similar converyor belt systems that you would see at an airport bagage handling system, just much smaller. One of the belts has 15 segments and the other has 14. They are each nominally about 350 ft long. I have attached a picture example of what we would like to show on the Mango dashboard screen. We will also show some other system information in the blank areas. I would like help/pointers/examples of how to go about putting or creating this or similar image and how to change the colors of each segment based upon what information we read from the PLC registers that provide this status. We are ok getting the PLC info, just can't figure out how to create the image and color each section (this could be/can be something similar to AC duct work or pipe sections. We don't need 3d style graphics, just simple flat "sidewalk" type image with each section color changeable on the fly. We could do this in DGLux like we have done on other similar type display projects, but as DGLux is more or less (less) not supported anymore, we wanted to try to make the change to incorporate the custom mango dashboard HTML5 to achieve this as a simple example of a projexct to learn on as we transition and gear up for future work to use the custom dashboard also that will be more involved.
Thanks, Tracey -
Hi Tracey,
Glad to hear you are looking to transition into using more of our HTML5 dashboard design tools. I put together a quick example of how to accomplish this using <ma-switch-img> components tied to multi-state data points. If you paste the attached HTML into a custom page, then open it in the dashboard designer you should be able to see how it works. I will also attach the set of pipe images that I put into overrides/web/img/pipe-images folder to make this work.
I am going to turn this example into a short video tutorial that I will post later today or tomorrow to help illustrate how this works.
-Will
<div class="ma-designer-root" id="dcbf417f-f20a-4113-9a83-d032769cf7fe" style="width: 1024px; height: 768px; position: relative;" ma-center="false"> <ma-switch-img id="27020558-db64-49ed-ad33-57c25e4fbfd7" style="position: absolute; left: 894px; top: 485.938px;" point-xid="multi-1" src-map="{'1': '/img/pipe-images/pipe-bottom-left-corner-green.png', '2': '/img/pipe-images/pipe-bottom-left-corner-yellow.png', '3': '/img/pipe-images/pipe-bottom-left-corner-red.png'}"></ma-switch-img> <ma-switch-img id="a14c52d6-bdff-46b5-8df0-350b027c5a7a" style="position: absolute; left: 540.977px; top: 217.949px;" point-xid="multi-1" src-map="{'2': '/img/pipe-images/pipe-top-right-corner-green.png', '3': '/img/pipe-images/pipe-top-right-corner-yellow.png', '1': '/img/pipe-images/pipe-top-right-corner-red.png'}"></ma-switch-img> <ma-switch-img id="a8c92852-17d1-40db-ace2-0847973cf117" style="position: absolute; left: 421.977px; top: 217.949px;" point-xid="multi-1" src-map="{'3': '/img/pipe-images/pipe-horiz-green.png', '1': '/img/pipe-images/pipe-horiz-yellow.png', '2': '/img/pipe-images/pipe-horiz-red.png'}"></ma-switch-img> <ma-switch-img id="38405304-5edc-4f4a-aded-57b35c5c3208" style="position: absolute; left: 574.961px; top: 398.945px;" point-xid="multi-1" src-map="{'1': '/img/pipe-images/pipe-bottom-left-corner-green.png', '2': '/img/pipe-images/pipe-bottom-left-corner-yellow.png', '3': '/img/pipe-images/pipe-bottom-left-corner-red.png'}"></ma-switch-img> <ma-switch-img id="53d35bfc-ccf8-4ac4-8a4e-7cf7ce8e6624" style="position: absolute; left: 221px; top: 128.945px;" point-xid="multi-1" src-map="{'3': '/img/pipe-images/pipe-horiz-green.png', '1': '/img/pipe-images/pipe-horiz-yellow.png', '2': '/img/pipe-images/pipe-horiz-red.png'}"></ma-switch-img> <ma-switch-img id="9ad201f8-90a0-4fb7-82d1-bb2f236d512b" style="position: absolute; left: 862.945px; top: 430.938px;" point-xid="multi-1" src-map="{'2': '/img/pipe-images/pipe-top-right-corner-green.png', '3': '/img/pipe-images/pipe-top-right-corner-yellow.png', '1': '/img/pipe-images/pipe-top-right-corner-red.png'}"></ma-switch-img> <ma-switch-img id="c42d58b1-265c-4a15-8e12-6d7e00c0a3c1" style="position: absolute; left: 743.961px; top: 430.938px;" point-xid="multi-1" src-map="{'3': '/img/pipe-images/pipe-horiz-green.png', '1': '/img/pipe-images/pipe-horiz-yellow.png', '2': '/img/pipe-images/pipe-horiz-red.png'}"></ma-switch-img> <ma-switch-img id="7b2391ab-be2a-41a7-92f5-e5e886424eb5" style="position: absolute; left: 340px; top: 128.945px;" point-xid="multi-1" src-map="{'2': '/img/pipe-images/pipe-top-right-corner-green.png', '3': '/img/pipe-images/pipe-top-right-corner-yellow.png', '1': '/img/pipe-images/pipe-top-right-corner-red.png'}"></ma-switch-img> <ma-switch-img id="c5acf040-82be-4c9f-a4da-7578480d1c5d" style="position: absolute; left: 371.973px; top: 183.949px;" point-xid="multi-1" src-map="{'1': '/img/pipe-images/pipe-bottom-left-corner-green.png', '2': '/img/pipe-images/pipe-bottom-left-corner-yellow.png', '3': '/img/pipe-images/pipe-bottom-left-corner-red.png'}"></ma-switch-img> <ma-switch-img id="5aed02a7-2342-4fca-ac2a-586895cb1138" style="position: absolute; left: 624.961px; top: 430.945px;" point-xid="multi-1" src-map="{'3': '/img/pipe-images/pipe-horiz-green.png', '1': '/img/pipe-images/pipe-horiz-yellow.png', '2': '/img/pipe-images/pipe-horiz-red.png'}"></ma-switch-img> <ma-switch-img id="dafea31f-3e1e-4ac8-bf64-66522beb4356" style="position: absolute; left: 574.977px; top: 273.949px; width: 18px; height: 128px;" point-xid="multi-1" src-map="{'3': '/img/pipe-images/pipe-vert-green.png', '1': '/img/pipe-images/pipe-vert-yellow.png', '2': '/img/pipe-images/pipe-vert-red.png'}"></ma-switch-img> </div>
-
Thank you for the direct answer to my questions. The other thing that I am having a problem with is the file/folders on the MangoES (ES V3) box that we picked at the AHR expo In Las Vegas when we stopped by your booth. I was watching the example video of how to copy the default files to an override folder and I can't tell from watching the video how you jumped to the file manager from the Mango page in the browser (this is at the 15 second mark into the Mango Dashboard Training - Part 3_Development Environment tutorial video. Can you provide a little more detail on that also. I don't know if this tutorial video is from a desktop installation which makes this issue a little more transparent, but for the MangoES, it did not follow for me to track and follow along with to create a copy of the admin template in the overrides/web/modules/dashboards/web directory.
Tracey -
Yep, in that video I was working from a local desktop install so the file structure is a bit different. The mango install is in the /opt/mango folder so that folder you mention would actually be opt/mango/overrides/web/modules/dashboards/web.
To be honest though if you update to the latest version of Mango it is easiest to use the built in pages and menu editor as you can still use all the HTML components from the built in editable pages. You still need to use the file manager for uploading image files.
That video training series you are referencing was released before we came out with the editable pages features, and drag and drop feature that was just released. We are going to do a lot of new training videos and documentation on the new stuff over the next couple weeks.
-
As promised here is that video:
-
Will, Thank you very much. I will work through your example and learn the details. I think that I will also generate some new "pipe" graphic images and see if I can get some to run at a 45 degree angle to more closely match what I am doing for our customer. I think that that will work just great. We can then use the open screen space to show numeric data and other system status information. I will pass back to you once I get it working.
Tracey
-
)Ok. I have generated some 45 degree graphic "pipes" to use and uploaded to the mango unit via webmin file manager and have now spent the past several hours trying to figure out out to get to the "dashboard designer" on my mangoES (ES V3). I can log into mango at the device IP (currently DHCP at 192.169.0.112 with admin admin...) but from there I am unable to find how to get to the dashboard designer. I can get to the "Mango Dashboards v3" (name shown on the browser tab) when I click the small bar chart "Custom Dashboards" icon on the icon row in Mango which opens up a new tab... (http://192.168.0.112/dashboards/settings/edit-menu), but as of now, I am spinning my wheels trying to figure out how to get to where you were at when you made the demo video showing the pipes changing color. Can you please provide additional steps or helps. Maybe I need to do some sort of version upgrade. If that is the case, please let me know how to upgrade the software on our MangoES unit to the needed version that supports the dashboard designer. Also, I have no idea how to get to the "Administration" area such that I could find the Dashboard designer.... ie: your video has "Administration > Dashboard designer" up at the top in the blue banner bar.
Thanks,
Tracey -
Hi Tracey,
Try navigating to http://192.168.0.112/ui/administration/dashboard-designer/
-
I get "page not found"
-
It looks like you may not have the mangoUI or Dashboard Designer modules installed (or at least MangoUI). You can install these from your modules page, they'll be in the middle section ("Modules available for installation") after you click "Check for upgrades"
-
Here is my screen shot. I get a message that the license will no longer apply if I do these updates...
-
De-select "Show major version upgrades, new license purchase required."
edited..
-
Aha! Yes, you haven't updated to Mango 3 yet. The Dashboard Designer is only available in Mango 3.
You wouldn't be able to load up a module built for another version of the core, so I wouldn't download the module without updating the core.
-
I was too slow....haha
-
And yet you were so fast! :D
-
I am working with the new MangoES box that we picked up at the AHR expo in Las Vegas from your booth earlier this year (late January/early Feb...~ 3 months ago). How can I get the license updated once I do the upgrade. What are the cost factors and how to get a new valid license.
Tracey -
After you do the update you can email us the GUID and we'll grant the license.
-
Where do I find the GUID after the update? Is it printed on the MangoES box or will it be pulled from the box with some software/web browser???
-
You'll want to log into the web browser and navigate to the /modules.shtm page where it's written right below the navigation bar. You also should press the "Update my license" button on the module page after upgrading.
-
HELP! I can get to the modules and click the "update my license". Another tab in the browser opens up and asks me to login. I login and get the following message:
"Note: core version 2.0.5 and earlier is incompatible with the licenses that are downloaded here. Please upgrade to core 2.0.6 or higher before replacing your existing license. If this is a new license and there are no license options below, you may need to change the store.url in your env.properties file to https, restart Mango, and try again.
The given instance belongs to another account"
PS: The GUID is the same now as when I sent it earlier yesterday to Phillip.
