Comments (13)
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
from grafana-flowcharting.
PS: Nice diagram :)
Can i publish it in tweeter ?
from grafana-flowcharting.
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
from grafana-flowcharting.
it's done
https://twitter.com/gf_flowcharting/status/1143623074253869056
thx a lot
from grafana-flowcharting.
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.
from grafana-flowcharting.
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.
from grafana-flowcharting.
Are you accepting PR's?
from grafana-flowcharting.
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
from grafana-flowcharting.
Hi guys,
Nice idea but not easy to make it.
why not
BR
Arnaud
from grafana-flowcharting.
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.
from grafana-flowcharting.
Hi @bijwaard
Show/hide is in the next version, but not the move/replace shape function.
BR
Arnaud
from grafana-flowcharting.
@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
from grafana-flowcharting.
implement in 0.8.0
from grafana-flowcharting.
Related Issues (20)
- Image broken in version 0.9.1 HOT 1
- Angular is deprecated - please migrate to React HOT 2
- Flowchart not working anymore with Grafa version 9..4.7 HOT 4
- cannot restore after double clicking to enlarge HOT 1
- 1.0.0b - dashboard not editable HOT 7
- 1.0.0d - If diagram is compacted too quickly, it disappears with an error.
- Link URL is unable to delete the last remaining character
- Rule -> Options -> Unit lineheight should be 30px
- Flowchart resetting due to app.diagram.net not working properly HOT 14
- Link Mappings : adding current dashboard parameters
- Link Mappings : adding component selection by label
- How to use download source URL HOT 1
- rule color part disappear when using date
- Compatibility with upcoming Grafana v10.0 ? HOT 50
- Flowchart shows previous column value for null value for mapped column instead of showing null
- After edit draw,panel no longer display HOT 4
- Custom Tooltip with Text HOT 1
- Depricated Plugin HOT 10
- Support Grafana v11 Angular > React HOT 1
- Grafana flowcharting zooming not smoothly when draw.io diagram has many objects
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from grafana-flowcharting.