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

Render dynamic graphics in customview


  • I've been looking at the customViewExample.jsp page and could not figure out how to render a dynamic graphic there, like dial and bar in the views.

    I believe I will use view:scriptPoint tag but no ideia how.

    thanks,


  • I'm trying to create a dashboard, just need to render the same gauges like in the graphical views, is it possible?


  • Hi Tommy,

    The custom views don't support dynamic graphics yet.


  • Hi Matthew,

    Thanks for reply.

    I think it should be not too hard to achieve that, look at what I have done in a custom view based on Mango views and using the same wz_jsgraphics script:

    
    <div id="needle"><img src="/graphics/dialCst/dialCst.png"> </div>
    
    <view:scriptPoint xid="numeric" raw="true">	
        var g = new jsGraphics("needle");
        
        g.clear();
        
        var xCenter = 127;
        var yCenter = 128;
        
        var xa = new Array(-3, -1,  1,3,1,-1);
        var ya = new Array( 0,-82,-82,0,3, 3);
        var angle = (value * 2 - 1) * 2.1;
        
        mango.view.graphic.transform(xa, ya, 1, 1, xCenter, yCenter, angle);
        
        g.setColor("#A00000");
        g.fillPolygon(xa, ya);
        
        g.setColor("#202020");
        g.drawPolygon(xa, ya);
        g.drawLine(xCenter, yCenter, xCenter, yCenter);
        g.paint();
    </view:scriptPoint>	
    

    It corretly renders the graphic (at least on FF), but the generated image is never cleaned (even calling g.clear() function) , so it renders the new position without erasing the last one.

    Do I need some server side coding in this case?


  • Try this instead:

    
    &lt;div id="needle"&gt;<img > &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
      var g = new jsGraphics("needle");
    &lt;/script&gt;
    
    &lt;view:scriptPoint xid="numeric" raw="true"&gt;	
         g.clear();
    ...
    
    

    I'm not sure why your code quote works in graphical views. I recall some kind of issue, but not the details. It's been a while.

    BTW, for M2M2 these kinds of graphics will more likely be done with processing.js. Walter Zorn, bless his soul, seems to have gone missing from the web, so we're not sure if there will be any more work on his stuff.


  • Thank you, it works now, but only in FF.

    What is M2M2? Is it another solution or kind of Mango 2.0?


  • Mango M2M2. The next generation of Mango M2M.


  • Maybe this helps:

    http://wztip.info/index.php/Main_Page

    Arne