Isometric Layout

[Pikey4]

Hi,

Loving the animated pipe flow on mango.

Is there a way to have the pipe's animated flowing the same but on a 30 degree angle (or any desired angle) to create an isometric schematic?

Thanks in advance!

[Jared Wiltshire]

@Pikey4 Hey mate, yeah you can rotate elements using CSS.

e.g.

<div class="ma-designer-root" id="2dc56e50-5fda-47b4-82c2-c60d27b18400" style="width: 1366px; height: 768px; position: relative;">
    
    <div id="ec8061a1-76fb-464a-9f0f-382b0827cf43" style="position: absolute; left: 80px; top: 600px; width: 400px; height: 20px;" class="pipe-left-right"></div>
    <div id="7af8e590-116c-4bb3-b8ec-db7fb21295fd" style="position: absolute; left: 480px; top: 600px; width: 400px; height: 20px; border-top-left-radius: 10px;" class="pipe-left-right rotate-neg-30"></div>
</div>

<style>
    .rotate-neg-30 {
        transform: rotate(-30deg);
        transform-origin: left bottom;
    }
</style>

I used a border radius to make the elements fit together a little better. You can define as many CSS classes as you want in the <style> tags and reuse them in your markup to make the process a little easier.

Another thing you might want to consider is drawing a graphic in SVG, - https://help.infiniteautomation.com/interactive-svg-graphics/

There's also a couple of examples built into Mango (Under the examples menu, if you dont see it enable it by going to Administration... Edit Menu).

[Pikey4]

Thanks as always!