Closed j86schroeder closed 3 years ago
jerosoler
commented
3 years ago Hello @j86schroeder
In terms of style there is no problem.
The problem is collapsing, surely it could be done, but I would have to implement it with javascript.
Do you need more than one output per node?
Your image reminds me more of: http://jlblcc.github.io/json-schema-viewer/
The tool also doesn't have a minimap option.
Jero
j86schroeder
commented
3 years ago Thanks Jero for your reply.
If you see the where the scripture references says Luke 4:3, is it possible that you can hover over that, and it goes to a little popout window that show the data? For example, blueletterbible.org has some javascript that has to be inserted in order for when I put something like John 1:1 or Matthew 4:3, when you hover over it, it should display the reference from their site. I've attached above what that snapshot looks like. Is this a problem?
If Drawflow can do a minimap, collapsing, and popout windows over the node, that would be pretty cool!
Yes, I'll need more than 1 output per node. I guess that is the limitation with the json schema viewer?
jerosoler
commented
3 years ago Hey @j86schroeder
Inside the node you should have no problem adding the biblical references. Since the node supports html.
I am not referring to multiple connections, but to multiple outputs.
A node can have multiple inputs and multiple outputs. Each input / output can have multiple connections.
Can it be edited online? Or just visualization?
What it shows me in the image reminds me of: https://markmap.js.org/
Jero
j86schroeder
commented
3 years ago Jero,
Wow, thank you for that link, it is so simple, I suppose if you want to add and make changes to it, you'll just have to edit the html file, which might be a little more labor intensive than I was planning on unless it's an easy matter to make it where you can take markmap and make it where it can be edited online.
However, I like the drawflow, because it does give you a lot of flexibility.
To answer your question, I think I'd like it to be edited online only by the user, which is me only for now. Ideally, it would be cool if it became something that people were interested in, and they were able to log in and make their own topics/interpretations about the bible. It would be cool to do both, which is edit, and share the view or export the view as pdf, in addition to a mini map.
j86schroeder
commented
3 years ago Also, I put the markmap on my website, but it doesn't seem to be updating everytime or working correctly....
jerosoler
commented
3 years ago Try playing with the library.
And you already comment where you get stuck.
You will have to play with the click events, to be able to collapse.
j86schroeder
commented
3 years ago Thanks, how do I go about installing drawflow on to my web server?
j86schroeder
commented
3 years ago If I could get it installed, perhaps then I can slowly work towards get it customized the way I'd like... I am to particular worried about the minimap...
j86schroeder
commented
3 years ago jerosoler
commented
3 years ago Thanks, how do I go about installing drawflow on to my web server?
View readme or folder docs https://github.com/jerosoler/Drawflow/tree/master/docs
drawflow.min.js and drawflow.min.css files need to be loaded
j86schroeder
commented
3 years ago Thanks sir, Is there any youtube videos showing how to put it together on local machine or hosted web server? It would be cool to get it installed, and then go one by 1 on figuring out the customization needed.
jerosoler
commented
3 years ago There is no video. With this example you could start.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
<style>
#drawflow {
width: 100%;
height: 600px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="drawflow"></div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.reroute = true;
editor.reroute_fix_curvature = true;
editor.start();
var html = `<div><input type="text" df-name></div>`;
var data = { "name": '' };
editor.addNode('github', 1, 1, 150, 100, 'github', data, html);
editor.addNode('github', 3, 3, 150, 300, 'github', data, html);
editor.addNode('other', 2, 3, 400, 300, 'other', data, ' ');
var htmlbig = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;
editor.addNode('other', 3, 3, 700, 300, 'other', data, htmlbig);
editor.addConnection(1, 2, 'output_1', 'input_1');
editor.addConnection(1, 3, 'output_1', 'input_2');
editor.addConnection(1, 4, 'output_1', 'input_1');
editor.addConnection(1, 4, 'output_1', 'input_2');
editor.addConnection(1, 4, 'output_1', 'input_3');
</script>
</body>
</html>
Awesome thanks for that!!
Is it possible that I can use this to customize it and make it look like this somehow for my website? Essentially, what I am trying to do is have an interactive flowchart just for myself where I can collapse and uncollapse the topic and the things that follow...I want to be able to hover over a node, and it reference a website, but I'll need to insert some javascript somewhere for it to work, not sure if it will work within the flowchart...
