Coordinate and visibility mappings

[bijwaard]

Thanks for this great plugin, it is really powerful! I managed to draw an electrical diagram that shows actual voltage, current and power from my sensors with the 0.40 snapshot (see figure below),

It would become even more powerful when X and Y coordinate of lines/shapes/mxPoint could be mapped, so that you can e.g.:

• change the endpoint (x and/or y) of a line in a circuit from open to closed, e.g. based on a threshold or variable
• have bars that move/grow/shrink with your data, e.g. by changing coordinate of two corners, it could colored at the same time with color mapping
• rotating arrow/analog clock hand/dial, when input data is in degrees or as complex number. For this you may need a divider and offset to keep coordinates within the diagram. Of course the arrow could also be colored according to the color mapping.
• move shapes around

The circuit open/close could alternatively be accomplished when the visibility of a shape could be mapped. You could then draw one or more alternatives with draw.io and make one of them visible based on e.g. a threshold or variable.

Are these mapping features interesting enough to be added to the roadmap?

Kind regards, Dennis

[algenty]

Hi Dennis, thanks for your feedback and for your compliment. i keep this feature for later but its the priority for now. i keep in touch this suggestion for later. i would come back to you when i 'll be working on that special point.

BR, Arnaud

[algenty]

PS: Nice diagram :) Can i publish it in tweeter ?

[bijwaard]

Hi Arnaud,

You can share the diagram when you mention that it was created for the R&D projects ORTEP and United-Grid. I'm planning to put it online at some point.

Kind regards, Dennis

[algenty]

it's done https://twitter.com/gf_flowcharting/status/1143623074253869056 thx a lot

[bijwaard]

I have some further thoughts on changing coordinates based on measurements. In the mxGraphModel, a line looks like this, with a sourcePoint and a targetPoint, also the mxCell has a parent, source and target object:

<mxCell id="8RuYf7ilViCdeVC-LtPO-28" value="" style="endArrow=none;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;startArrow=blockThin;startFill=1;endFill=0;" parent="CT" source="116" target="CT:ADC:out0" edge="1">
  <mxGeometry width="50" height="50" relative="1" as="geometry">
    <mxPoint x="38.18181818181818" y="327.5" as="sourcePoint"/>
    <mxPoint x="206.36363636363635" y="87.5" as="targetPoint"/>
  </mxGeometry>
</mxCell>

I think you can at most change two of the coordinate elements based on measurements (e.g. sourcePoint.x, sourcePoint.y, targetPoint.x, targetPoint.y), else one might loose track of the line altogether, i.e. you need some fixed position to base your coordinate change on. E.g. when fixing sourcePoint, the targetPoint could be modified as (sourcePoint.x + deltaX, sourcePoint.y + deltaY).

However, when the shape would be inside another shape (e.g. the parent is an rectangle or circle) that shape could define the bounds for the changed x and y coordinate. Being constraint inside a shape/group would allow the flowcharting code to limit the modified x,y position to be contained within the outer shape area. When contained in such an outer shape, the x,y modification could be relative to the size of the outer shape. For an outer circle, the fixed coordinate would be the center of the circle, for an outer rectangle, the fixed coordinate(s) could be one of the corners or the middle of the rectangle. Within a circle, the change based on measurements could also be represented as a magnitude + angle, to make an arrow that can turn around with the angle and has its length defined by the magnitude. In the mxGraphModel, the circle with an arrow inside would look like this, and the targetPoint can alternatively be constrained using the entryX,entryY percentages within the line style attribute:

<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="jCX_BpLtSnTqAUBinvNb-1" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;container=1;" parent="1" vertex="1">
  <mxGeometry x="90" y="50" width="200" height="200" as="geometry"/>
</mxCell>
<mxCell id="jCX_BpLtSnTqAUBinvNb-3" value="" style="endArrow=classic;html=1;entryX=0.15;entryY=0.25;entryDx=0;entryDy=0;entryPerimeter=0;" parent="jCX_BpLtSnTqAUBinvNb-1" relative="1" edge="1" target="jCX_BpLtSnTqAUBinvNb-1">
  <mxGeometry width="50" height="50" as="geometry">
    <mxPoint x="100" y="100" as="sourcePoint"/>
    <mxPoint x="160" y="160" as="targetPoint"/>
  </mxGeometry>
</mxCell>

Btw. when generalizing the change of (style)attributes based on measurements, one could also change attributes like the thickness of lines (width attribute), size of objects (width and height attribute), and make the flowcharting diagram even more dynamic.

[rlcomte]

For us the enhancement of moving and resizing objects is very valuable as well. One of the cases for us is to show the energy label with the actual value, like moving the black A+ pointer.

[rlcomte]

Are you accepting PR's?

[bijwaard]

Hi Rine,

Would indeed be great to have this functionality, didn't think of a moving energy label pointer yet, you could even change the pointer itself in color, width, and direction;-)

I guess you mean Pull Requests, not Public Relation;-) This is something for Arnaud to answer.

Kind regards, Dennis

[algenty]

Hi guys, Nice idea but not easy to make it. why not

BR Arnaud

[bijwaard]

Hi Arnaud, I found the SVG plugin that allows movement from measurements using javascript. Assigning values to graphical items can be done through SVG ids in the onHandleMetric(ctrl, svgnode) call. Below are my 50Hz RMS and power phasors using SVG plugin, next to the last signal periods (4000kHz) from one of our voltage sensors (through JSON datasource).

It would still be cool to integrate moving things in an draw.io image through your plugin, since it allows easy roundtrip diagram editing. Instead of building all this yourself, you could allow using javascript to update drawio nodes based on measurements like the SVG plugin does in the onHandleMetric call.

Kind regards, Dennis

[algenty]

Hi @bijwaard Show/hide is in the next version, but not the move/replace shape function.

BR Arnaud

[algenty]

@rlcomte I have an idea, draw an "A+" in front of each Label. in your rules, color the shape with transparent '00000000' color to hide it or black according your choice.

BR Arnaud

[algenty]

implement in 0.8.0