Skip to content

Commit b3f25e3

Browse files
whyboriswhyboris
committed
icon home, icon download, open first method
1 parent 2d4c9e5 commit b3f25e3

File tree

2 files changed

+88
-18
lines changed

2 files changed

+88
-18
lines changed

‎graphing/cascade/index.html‎

Lines changed: 73 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,21 +25,81 @@
2525
#functionsList {
2626
position: absolute;
2727
background: white;
28-
border-right: 1px solid black;
28+
border-right: 1px solid #888888;
2929
}
3030

3131
#graphDiv {
3232
margin-left: 200px;
3333
}
34+
35+
.home-button {
36+
margin-top: 20px;
37+
}
38+
39+
.home-button svg {
40+
transition-duration: 0.5s;
41+
}
42+
43+
.home-button:hover svg {
44+
fill: blue;
45+
transform: scale(1.5);
46+
}
47+
48+
.download-this {
49+
display: inline;
50+
text-align: right;
51+
}
52+
53+
.download-link {
54+
width: 30px;
55+
display: inline-block;
56+
}
57+
58+
#downloadLinks {
59+
float: right;
60+
margin-top: 30px;
61+
margin-right: 20px;
62+
}
63+
64+
#downloadLinks a {
65+
transition-duration: 0.5s;
66+
margin: 5px;
67+
}
68+
69+
#downloadLinks a:hover {
70+
transform: scale(1.5);
71+
}
3472
</style>
3573
</head>
3674

3775
<body>
3876

77+
<a class="home-button" href="../index.html">
78+
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px"><path d="M 8 1.320313 L 0.660156 8.132813 L 1.339844 8.867188 L 2 8.253906 L 2 14 L 7 14 L 7 9 L 9 9 L 9 14 L 14 14 L 14 8.253906 L 14.660156 8.867188 L 15.339844 8.132813 Z M 8 2.679688 L 13 7.328125 L 13 13 L 10 13 L 10 8 L 6 8 L 6 13 L 3 13 L 3 7.328125 Z"/></svg>
79+
</a>
80+
3981
<div id="functionsList"></div>
4082

4183
<div id="graphDiv"></div>
4284

85+
<div id="downloadLinks">
86+
87+
<a id="downloadPNG" class="download-link" href="../index.html">
88+
<svg viewBox="0 0 128 128"><g><path d="M90.249,107.596H40.916c-3.584,0-6.5-2.916-6.5-6.5V30.861c0-3.584,2.916-6.5,6.5-6.5h28.726 c3.152,0,7.367,1.746,9.596,3.975l13.537,13.537c2.229,2.229,3.975,6.444,3.975,9.596v49.627 C96.749,104.68,93.833,107.596,90.249,107.596z M40.916,27.361c-1.93,0-3.5,1.57-3.5,3.5v70.235c0,1.93,1.57,3.5,3.5,3.5h49.333 c1.93,0,3.5-1.57,3.5-3.5V51.469c0-2.333-1.446-5.826-3.096-7.475L77.116,30.457c-1.649-1.649-5.142-3.096-7.475-3.096H40.916z" style="fill: rgb(49, 51, 53);"></path></g><g><path d="M90.249,47.969H79.642c-3.584,0-6.5-2.916-6.5-6.5V30.861c0-3.013,1.617-4.082,3.003-4.082 c1.02,0,2.06,0.524,3.093,1.557l13.537,13.537c1.886,1.886,1.657,3.398,1.354,4.132C93.823,46.738,92.916,47.969,90.249,47.969z M76.284,29.827c-0.062,0.16-0.143,0.476-0.143,1.034v10.608c0,1.93,1.57,3.5,3.5,3.5h10.607c0.558,0,0.874-0.081,1.034-0.143 c-0.069-0.157-0.235-0.438-0.63-0.832L77.116,30.457C76.722,30.063,76.441,29.896,76.284,29.827z" style="fill: rgb(49, 51, 53);"></path></g><g><path d="M95.249,36.905c-0.43,0-0.839-0.184-1.123-0.506l-10.367-11.72c-0.392-0.442-0.487-1.072-0.244-1.61 c0.242-0.538,0.777-0.884,1.367-0.884h3.714v-9.78c0-0.829,0.672-1.5,1.5-1.5h10.304c0.828,0,1.5,0.671,1.5,1.5v9.78h3.717 c0.59,0,1.125,0.346,1.367,0.884c0.243,0.538,0.147,1.168-0.244,1.61l-10.367,11.72C96.088,36.721,95.679,36.905,95.249,36.905z M88.211,25.186l7.038,7.956l7.038-7.956h-1.888c-0.828,0-1.5-0.671-1.5-1.5v-9.78h-7.304v9.78c0,0.829-0.672,1.5-1.5,1.5H88.211z" style="fill: rgb(238, 62, 54);"></path></g><g></g><g></g>
89+
<rect x="18" y="57" height="40" width="100" style="fill: rgba(255,255,255,0.5);"></rect>
90+
<text x="18" y="95" style="font: bold 46px sans-serif; fill: red; box-shadow: 0 0 10px white; background-color: green; display: block">PNG</text>
91+
</svg>
92+
</a>
93+
94+
<a id="downloadSVG" class="download-link" href="../index.html">
95+
<svg viewBox="0 0 128 128"><g><path d="M90.249,107.596H40.916c-3.584,0-6.5-2.916-6.5-6.5V30.861c0-3.584,2.916-6.5,6.5-6.5h28.726 c3.152,0,7.367,1.746,9.596,3.975l13.537,13.537c2.229,2.229,3.975,6.444,3.975,9.596v49.627 C96.749,104.68,93.833,107.596,90.249,107.596z M40.916,27.361c-1.93,0-3.5,1.57-3.5,3.5v70.235c0,1.93,1.57,3.5,3.5,3.5h49.333 c1.93,0,3.5-1.57,3.5-3.5V51.469c0-2.333-1.446-5.826-3.096-7.475L77.116,30.457c-1.649-1.649-5.142-3.096-7.475-3.096H40.916z" style="fill: rgb(49, 51, 53);"></path></g><g><path d="M90.249,47.969H79.642c-3.584,0-6.5-2.916-6.5-6.5V30.861c0-3.013,1.617-4.082,3.003-4.082 c1.02,0,2.06,0.524,3.093,1.557l13.537,13.537c1.886,1.886,1.657,3.398,1.354,4.132C93.823,46.738,92.916,47.969,90.249,47.969z M76.284,29.827c-0.062,0.16-0.143,0.476-0.143,1.034v10.608c0,1.93,1.57,3.5,3.5,3.5h10.607c0.558,0,0.874-0.081,1.034-0.143 c-0.069-0.157-0.235-0.438-0.63-0.832L77.116,30.457C76.722,30.063,76.441,29.896,76.284,29.827z" style="fill: rgb(49, 51, 53);"></path></g><g><path d="M95.249,36.905c-0.43,0-0.839-0.184-1.123-0.506l-10.367-11.72c-0.392-0.442-0.487-1.072-0.244-1.61 c0.242-0.538,0.777-0.884,1.367-0.884h3.714v-9.78c0-0.829,0.672-1.5,1.5-1.5h10.304c0.828,0,1.5,0.671,1.5,1.5v9.78h3.717 c0.59,0,1.125,0.346,1.367,0.884c0.243,0.538,0.147,1.168-0.244,1.61l-10.367,11.72C96.088,36.721,95.679,36.905,95.249,36.905z M88.211,25.186l7.038,7.956l7.038-7.956h-1.888c-0.828,0-1.5-0.671-1.5-1.5v-9.78h-7.304v9.78c0,0.829-0.672,1.5-1.5,1.5H88.211z" style="fill: rgb(238, 62, 54);"></path></g><g></g><g></g>
96+
<rect x="18" y="57" height="40" width="100" style="fill: rgba(255,255,255,0.5);"></rect>
97+
<text x="18" y="95" style="font: bold 46px sans-serif; fill: red; box-shadow: 0 0 10px white">SVG</text>
98+
</svg>
99+
</a>
100+
101+
</div>
102+
43103
<script>
44104

45105
fetch('http://localhost:3000/all')
@@ -73,37 +133,33 @@
73133
// Save to SVG & PNG
74134
setTimeout(() => {
75135
// Thank you @gustavohenke for the Gist: https://gist.github.com/gustavohenke/9073132
76-
var svg = document.querySelector("svg");
77-
var svgData = new XMLSerializer().serializeToString(svg);
136+
const svg = document.querySelector("#graphDiv svg");
137+
const svgData = new XMLSerializer().serializeToString(svg);
78138

79-
var canvas = document.createElement("canvas");
80-
var ctx = canvas.getContext("2d");
139+
const canvas = document.createElement("canvas");
140+
const ctx = canvas.getContext("2d");
81141

82-
var svgSize = svg.getBoundingClientRect();
142+
const svgSize = svg.getBoundingClientRect();
83143
canvas.width = svgSize.width;
84144
canvas.height = svgSize.height;
85145

86-
var img = document.createElement("img");
146+
const img = document.createElement("img");
87147
img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
88148

89149
img.onload = function () {
90150
ctx.drawImage(img, 0, 0);
91151

92152
const pngBase64 = canvas.toDataURL("image/png");
93153

94-
const a = document.createElement("a");
95-
a.download = "callgraph.png";
96-
a.href = pngBase64;
97-
a.innerHTML = "download as PNG";
98-
temp.appendChild(a);
154+
const myPNG = document.getElementById('downloadPNG');
155+
myPNG.download = "callgraph.png";
156+
myPNG.href = pngBase64;
99157

100158
const svgBase64 = "data:image/svg+xml;base64," + btoa(svgData);
101159

102-
const b = document.createElement("a");
103-
b.download = "callgraph.svg";
104-
b.href = svgBase64;
105-
b.innerHTML = "download as SVG";
106-
temp.appendChild(b);
160+
const mySVG = document.getElementById('downloadSVG');
161+
mySVG.download = "callgraph.svg";
162+
mySVG.href = svgBase64;
107163

108164
};
109165

‎graphing/index.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h2>
1313
WELCOME !!!
1414
</h2>
1515

16-
<a href="cascade/index.html?start=proceed">Cascade</a>
16+
<a id="cascade" href="cascade/index.html?start=pleaseSelectFunction">Cascade</a>
1717

1818
<br>
1919

@@ -25,4 +25,18 @@ <h2>
2525

2626
<a href="mermaid/index.html">Mermaid</a>
2727

28+
<script>
29+
30+
fetch('http://localhost:3000/all')
31+
.then((response) => {
32+
return response.json();
33+
})
34+
.then((data) => {
35+
data.sort();
36+
const cascade = document.getElementById('cascade');
37+
cascade.href = 'cascade/index.html?start=' + data[0];
38+
});
39+
40+
</script>
41+
2842
</body>

0 commit comments

Comments
 (0)