Modify diagrams.io with custom Javascript plugin
- or -
Post a project like this£200(approx. $253)
- Posted:
- Proposals: 3
- Remote
- #3077524
- OPPORTUNITY
- Expired
Description
Experience Level: Entry
I am building a website where I intend to embed an interactive flowchart that I am building with diagrams.net.
However, I have no experience with Javascript and am unable to modify the diagrams.io with plugins that meet my requirements. The person for this project is someone that can write a custom plugin or use existing ones to essentially create a version of draw.io tailored to my needs so I can create my flowchart and embed it with all of its functionality onto a website with no issues. Some libraries already exist for what I want to achieve, but I do not know how to implement them for the desired outcome.
//// My requirements of the final website flowchart: ////
1) interactive positioning
Users of the website should be able to tug at flowchart elements with them settling back into a stable state afterwards, as in this demo: https://ialab.it.monash.edu/webcola/examples/unix.html
2) Interactive show/hide on hover-over:
Users of the website should be able to hover over a flowchart element and all elements not directly connected to it should be hidden/turn transparent. See the attached video of a game called Democracy3 for this.
3) Interactive flowing arrows on hover-over:
Users of the website should be able to hover over a flowchart element and all arrows going to or from this element will animate with flow directions. Again, see the attached video of the Democracy3 game. This does not seem to work when embedding online for me with flow.js. Flow animations from hover-over should also be present within the exploration (4) view.
4) Interactive exploration on clicking an element, exactly like the explore.js plugin on https://www.diagrams.net/doc/faq/plugins
5) Interactive pop-up on double-click. When an element is double-clicked, a sidebar or popup window should appear which contains an image banner + title, a few subheadings and text under each subheading on a background who's colour can be customised. This popup should appear when an element is double-clicked in the exploration mode of explore.js and also the full-screen zoomed out view of the flowchart.
6) All shapes (at least the Hexagon, Square and Circle) should be able to have images as backgrounds. Currently in draw.io, only colours can be used as shape backgrounds.
//// ////
Again, since I am inexperienced with javascript, I do not want a solution which requires coding although I have programmed python apps. I would like a solution that just extends draw.io so that it will be able to export an interactive diagram with the functionality I have described above to be usable on a website.
I encourage negotiation/price quoting. I am an independent person and not a company.
The project is complete when I am able to produce a proof-of-principle diagram which demonstrates all of the functionality above.
Also, please note that there will be hundreds of elements/circles/boxes in the flow chart with possibly a thousand connections between them.
However, I have no experience with Javascript and am unable to modify the diagrams.io with plugins that meet my requirements. The person for this project is someone that can write a custom plugin or use existing ones to essentially create a version of draw.io tailored to my needs so I can create my flowchart and embed it with all of its functionality onto a website with no issues. Some libraries already exist for what I want to achieve, but I do not know how to implement them for the desired outcome.
//// My requirements of the final website flowchart: ////
1) interactive positioning
Users of the website should be able to tug at flowchart elements with them settling back into a stable state afterwards, as in this demo: https://ialab.it.monash.edu/webcola/examples/unix.html
2) Interactive show/hide on hover-over:
Users of the website should be able to hover over a flowchart element and all elements not directly connected to it should be hidden/turn transparent. See the attached video of a game called Democracy3 for this.
3) Interactive flowing arrows on hover-over:
Users of the website should be able to hover over a flowchart element and all arrows going to or from this element will animate with flow directions. Again, see the attached video of the Democracy3 game. This does not seem to work when embedding online for me with flow.js. Flow animations from hover-over should also be present within the exploration (4) view.
4) Interactive exploration on clicking an element, exactly like the explore.js plugin on https://www.diagrams.net/doc/faq/plugins
5) Interactive pop-up on double-click. When an element is double-clicked, a sidebar or popup window should appear which contains an image banner + title, a few subheadings and text under each subheading on a background who's colour can be customised. This popup should appear when an element is double-clicked in the exploration mode of explore.js and also the full-screen zoomed out view of the flowchart.
6) All shapes (at least the Hexagon, Square and Circle) should be able to have images as backgrounds. Currently in draw.io, only colours can be used as shape backgrounds.
//// ////
Again, since I am inexperienced with javascript, I do not want a solution which requires coding although I have programmed python apps. I would like a solution that just extends draw.io so that it will be able to export an interactive diagram with the functionality I have described above to be usable on a website.
I encourage negotiation/price quoting. I am an independent person and not a company.
The project is complete when I am able to produce a proof-of-principle diagram which demonstrates all of the functionality above.
Also, please note that there will be hundreds of elements/circles/boxes in the flow chart with possibly a thousand connections between them.
Karl T.
100% (5)Projects Completed
6
Freelancers worked with
4
Projects awarded
50%
Last project
25 Apr 2023
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies