HTML url tag for boxes (make the diagram boxes etc clickable)

(1) By anonymous on 2021-04-30 16:31:16 [link] [source]

Hi,

I'm familiar with the SVG output of similar tools eg graphviz. That tool has the ability to have a box with text that can be clicked on to send the user elsewhere. Essentially this would make it so a SVG image generated by pikchr could be used for navigation. I'd like it so I can add a keyword to a label to make it clickable. I'm thinking the DSL needs another keyword, eg label-url or target-url or something similar. Even just a "url" keyword? maybe also something to allow some place to embed a js chunk, eg to also allow on mouse over.

I'm happy to hack away on this just to add the clickable URL... where would someone start implementing this in the code base?

thanks

(2) By drh on 2021-04-30 16:41:49 in reply to 1 [link] [source]

Can you generates Pikchr diagram and render it as SVG, then edit the SVG to insert hyperlinks as a demonstration of how to do it?

If we can come to an agreement on what the SVG needs to look like, I'll be happy to edit the pikchr source code to make that happen. We have looked into this before, but where never able to come up with an acceptable SVG implementation for the links.

(3) By anonymous on 2021-04-30 16:50:13 in reply to 2 [link] [source]

Sounds good. I'll put together a few samples to explore this.

(4.3) By plequ (plequa) on 2021-05-04 16:33:47 edited from 4.2 in reply to 3 [source]

ok. two examples. 
one from pikchr and edited to have clickable labels.
the other from graphviz to see their example.

I like the approach that graphviz takes by just adding a URL specifier. 

here's the source for the graphviz example I put in:

digraph G {

  Visio [URL="https://www.microsoft.com/en-au/microsoft-365/visio/flowchart-software"] 
  Graphviz [URL="https://graphviz.org"] 
  Pikchr [URL="https://pikchr.org"] 
 
  Visio -> Graphviz -> Pikchr
 
}

and here's the source for the pikchr I used as a basis
arrow down 200% 
box rad 10px "Visio" fit 
arrow down 200% 
box same "Graphviz" fit
arrow down 200% 
box same "Pikchr" fit


ideally I'd like to be able to do something like

arrow down 200% 
box rad 10px "Visio" url "http://example.com/visio" fit
arrow down 200% 
box same "Graphviz" url "graphviz.org" fit
arrow down 200% 
box same "Pikchr" url "pikchr.org" fit

(5) By plequ (plequa) on 2021-05-04 16:09:23 in reply to 3 [link] [source]

Here's basic attempt 1 - clickable text label

<svg xmlns='http://www.w3.org/2000/svg' class="pikchr" viewBox="0 0 90.3744 527.04" xmlns:xlink="http://www.w3.org/1999/xlink">

<polygon points="45,146 40,134 49,134" style="fill:rgb(0,0,0)"/>
<path d="M45,2L45,140"  style="fill:none;stroke-width:2.16;stroke:rgb(0,0,0);" />
<path d="M45,176A11 11 0 0 0 56 164L56,157A11 11 0 0 0 45 146A11 11 0 0 0 33 157L33,164A11 11 0 0 0 45 176Z"  style="fill:none;stroke-width:2.16;stroke:rgb(0,0,0);" />

<g id="a_node_v">
<a xlink:href="https://www.microsoft.com/en-au/microsoft-365/visio/flowchart-software" xlink:title="Visio">
<text x="45" y="161" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">V</text>
</a>
</g>

<polygon points="45,320 40,308 49,308" style="fill:rgb(0,0,0)"/>
<path d="M45,176L45,314"  style="fill:none;stroke-width:2.16;stroke:rgb(0,0,0);" />
<path d="M17,350L73,350A15 15 0 0 0 88 335L88,335A15 15 0 0 0 73 320L17,320A15 15 0 0 0 2 335L2,335A15 15 0 0 0 17 350Z"  style="fill:none;stroke-width:2.16;stroke:rgb(0,0,0);" />

<g id="a_node_g">
<a xlink:href="https://graphviz.org" xlink:title="Graphviz">
<text x="45" y="335" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">Graphviz</text>
</a></g>

<polygon points="45,494 40,483 49,483" style="fill:rgb(0,0,0)"/>
<path d="M45,350L45,488"  style="fill:none;stroke-width:2.16;stroke:rgb(0,0,0);" />
<path d="M27,524L63,524A15 15 0 0 0 78 509L78,509A15 15 0 0 0 63 494L27,494A15 15 0 0 0 12 509L12,509A15 15 0 0 0 27 524Z"  style="fill:none;stroke-width:2.16;stroke:rgb(0,0,0);" />

<g id="a_node_p">
<a xlink:href="https://pikchr.org" xlink:title="Pikchr">
<text x="45" y="509" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">Pikchr</text>
</a>
</g>

</svg>

(6) By plequ (plequa) on 2021-05-04 16:16:33 in reply to 3 [link] [source]

here's something from graphviz

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
 -->
<!-- Title: G Pages: 1 -->
<svg width="96pt" height="188pt"
 viewBox="0.00 0.00 96.39 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<title>G</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-184 92.3922,-184 92.3922,4 -4,4"/>
<!-- Visio -->
<g id="node1" class="node"><title>Visio</title>
<g id="a_node1"><a xlink:href="https://www.microsoft.com/en-au/microsoft-365/visio/flowchart-software" xlink:title="Visio">
<ellipse fill="none" stroke="black" cx="44.1961" cy="-162" rx="29.795" ry="18"/>
<text text-anchor="middle" x="44.1961" y="-158.3" font-family="Times New Roman,serif" font-size="14.00">Visio</text>
</a>
</g>
</g>
<!-- Graphviz -->
<g id="node2" class="node"><title>Graphviz</title>
<g id="a_node2"><a xlink:href="https://graphviz.org" xlink:title="Graphviz">
<ellipse fill="none" stroke="black" cx="44.1961" cy="-90" rx="44.393" ry="18"/>
<text text-anchor="middle" x="44.1961" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">Graphviz</text>
</a>
</g>
</g>
<!-- Visio&#45;&gt;Graphviz -->
<g id="edge1" class="edge"><title>Visio&#45;&gt;Graphviz</title>
<path fill="none" stroke="black" d="M44.1961,-143.697C44.1961,-135.983 44.1961,-126.712 44.1961,-118.112"/>
<polygon fill="black" stroke="black" points="47.6962,-118.104 44.1961,-108.104 40.6962,-118.104 47.6962,-118.104"/>
</g>
<!-- Pikchr -->
<g id="node3" class="node"><title>Pikchr</title>
<g id="a_node3"><a xlink:href="https://pikchr.org" xlink:title="Pikchr">
<ellipse fill="none" stroke="black" cx="44.1961" cy="-18" rx="34.394" ry="18"/>
<text text-anchor="middle" x="44.1961" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">Pikchr</text>
</a>
</g>
</g>
<!-- Graphviz&#45;&gt;Pikchr -->
<g id="edge2" class="edge"><title>Graphviz&#45;&gt;Pikchr</title>
<path fill="none" stroke="black" d="M44.1961,-71.6966C44.1961,-63.9827 44.1961,-54.7125 44.1961,-46.1124"/>
<polygon fill="black" stroke="black" points="47.6962,-46.1043 44.1961,-36.1043 40.6962,-46.1044 47.6962,-46.1043"/>
</g>
</g>
</svg>