Skip to content

Commit 8397ed8

Browse files
andreavalandreaval
committed
Formato HTML e SVG utilizzato per l'output con elenco simboli
1 parent 9f94266 commit 8397ed8

File tree

1 file changed

+183
-0
lines changed

1 file changed

+183
-0
lines changed

‎svg-format.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>SVG.js</title>
5+
<meta charset="utf-8">
6+
<style>
7+
.algo_info{border:1px solid #333;border-radius:5px;padding:.3em}
8+
.algo_info h1{margin:0;font-size:1.3em}
9+
.algo_info h2{margin:0;font-size:1em;color:#555;font-weight:normal}
10+
.algo_info p{border-top:1px dotted #777;margin:.3em 0 0;padding:.3em 0 0;font-size:.8em;}
11+
.algo_info i{padding-right:1em}
12+
.algo_info i.date{float:right}
13+
.arrow{stroke:#000;stroke-width:1px;marker-end:url(#arrow);fill:none}
14+
.line{stroke:#000;stroke-width:1px;fill:none}
15+
text{stroke:#000;stroke-width:0;text-anchor:middle}
16+
.iotype{font-size:12px;font-style:italic}
17+
.symbol{stroke:#000;stroke-width:1px;fill:#fff}
18+
</style>
19+
</head>
20+
<body>
21+
<div class="algo_info" style="width:500px">
22+
<h1>Lista completa elementi di un flowchart</h1>
23+
<h2>Esempio di un possibile algoritmo</h2>
24+
<p>
25+
<i class="author">Author: Andrea Vallorani</i>
26+
<i class="date">Date: 2018-03-31</i>
27+
</p>
28+
</div>
29+
<svg width="500" height="1000" style="font-size:13px">
30+
<defs>
31+
<!-- Arrow-end -->
32+
<marker id="arrow" markerWidth="12" markerHeight="12" refX="0" refY="5" orient="auto" markerUnits="strokeWidth">
33+
<path d="M0,0 L0,10 L10,5 z" fill="#000" />
34+
</marker>
35+
</defs>
36+
<g transform="translate(200,30)" class="function main">
37+
<!-- Start (H:20)-->
38+
<g class="block" transform="translate(50,0)">
39+
<g class="start" transform="translate(0,0)">
40+
<ellipse class="symbol" cx="0" cy="0" rx="35" ry="20"/>
41+
<text x="0" y="5">START</text>
42+
</g>
43+
</g>
44+
<!-- Input (H:65)-->
45+
<g class="block" transform="translate(0,20)">
46+
<line class="arrow" x1="50" y1="0" x2="50" y2="15"/>
47+
<g class="input" transform="translate(0,25)">
48+
<polygon class="symbol" points="20 0 0 40 80 40 100 0"/>
49+
<path class="line" d="M80,0 q0,15 13,13"/>
50+
<text x="50" y="25">B</text>
51+
<text class="iotype" x="90" y="10">i</text>
52+
</g>
53+
</g>
54+
<!-- Assign (H:65)-->
55+
<g class="block" transform="translate(0,85)">
56+
<line class="arrow" x1="50" y1="0" x2="50" y2="15"/>
57+
<g class="assign" transform="translate(0,25)">
58+
<rect class="symbol" width="100" height="40"/>
59+
<text x="50" y="25">B = B+1</text>
60+
</g>
61+
</g>
62+
<!-- Output (H:65)-->
63+
<g class="block" transform="translate(0,150)">
64+
<line class="arrow" x1="50" y1="0" x2="50" y2="15"/>
65+
<g class="output" transform="translate(0,25)">
66+
<polygon class="symbol" points="20 0 0 40 80 40 100 0"/>
67+
<path class="line" d="M80,0 q0,15 13,13"/>
68+
<text x="50" y="25">B</text>
69+
<text class="iotype" x="90" y="9">o</text>
70+
</g>
71+
</g>
72+
<!-- Selection -->
73+
<g class="block" transform="translate(0,215)">
74+
<line class="arrow" x1="50" y1="0" x2="50" y2="15"/>
75+
<g class="selection" transform="translate(0,25)">
76+
<g class="condition">
77+
<polygon class="symbol" points="50 0 100 25 50 50 0 25"/>
78+
<text x="50" y="30">B &gt; 0</text>
79+
</g>
80+
<g class="arrow-right">
81+
<polyline class="line" points="100,25 150,25"/>
82+
<text x="110" y="20">T</text>
83+
</g>
84+
<g class="true-path" transform="translate(100,25)">
85+
<g class="block">
86+
<line class="arrow" x1="50" y1="0" x2="50" y2="15"/>
87+
<g class="other" transform="translate(0,25)">
88+
<text x="50" y="15">...</text>
89+
</g>
90+
</g>
91+
</g>
92+
<g class="arrow-left">
93+
<polyline class="line" points="0,25 -50,25"/>
94+
<text x="-10" y="20">F</text>
95+
</g>
96+
<g class="false-path" transform="translate(-100,25)">
97+
<g class="block">
98+
<line class="arrow" x1="50" y1="0" x2="50" y2="15"/>
99+
<g class="other" transform="translate(0,25)">
100+
<text x="50" y="15">...</text>
101+
</g>
102+
</g>
103+
</g>
104+
<g class="selection-close" transform="translate(0,80)">
105+
<polyline class="line" points="150,0 150,25 55,25"/>
106+
<polyline class="line" points="-50,0 -50,25 45,25"/>
107+
<circle class="symbol" cx="50" cy="25" r="4"/>
108+
</g>
109+
</g>
110+
</g>
111+
<!-- Iteraction pre-cond -->
112+
<g class="block" transform="translate(0,350)">
113+
<line class="arrow" x1="50" y1="0" x2="50" y2="15"/>
114+
<g class="pre-condition" transform="translate(0,25)">
115+
<g class="condition">
116+
<polygon class="symbol" points="50 0 100 25 50 50 0 25"/>
117+
<text x="50" y="30">B &gt; 0</text>
118+
<text x="60" y="62">T</text>
119+
</g>
120+
<g class="true-path" transform="translate(0,50)">
121+
<g class="block">
122+
<line class="arrow" x1="50" y1="0" x2="50" y2="15"/>
123+
<g class="other" transform="translate(0,25)">
124+
<text x="50" y="15">...</text>
125+
</g>
126+
</g>
127+
<g class="return-line" transform="translate(50,55)">
128+
<polyline class="arrow" points="0,0 0,15 -80,15 -80,-80 -60,-80"/>
129+
</g>
130+
</g>
131+
<g class="false-path">
132+
<polyline class="line" points="100,25 130,25 130,130 50,130"/>
133+
<text x="110" y="20">F</text>
134+
</g>
135+
</g>
136+
</g>
137+
<!-- Iteraction post-cond -->
138+
<g class="block" transform="translate(0,505)">
139+
<line class="line" x1="50" y1="0" x2="50" y2="20"/>
140+
<circle cx="50" cy="20" r="4" class="symbol"/>
141+
<g class="post-condition" transform="translate(0,25)">
142+
<g class="true-path" transform="translate(0,0)">
143+
<g class="block">
144+
<line class="arrow" x1="50" y1="0" x2="50" y2="15"/>
145+
<g class="other" transform="translate(0,25)">
146+
<text x="50" y="15">...</text>
147+
</g>
148+
</g>
149+
</g>
150+
<line class="arrow" x1="50" y1="55" x2="50" y2="70"/>
151+
<g class="condition" transform="translate(0,80)">
152+
<polygon class="symbol" points="50 0 100 25 50 50 0 25"/>
153+
<text x="50" y="30">B &lt; 0</text>
154+
<g class="return-line">
155+
<polyline class="arrow" points="0,25 -30,25 -30,-85 35,-85"/>
156+
<text x="-10" y="20">T</text>
157+
</g>
158+
<text x="60" y="62">F</text>
159+
</g>
160+
</g>
161+
</g>
162+
<!-- Sub-program -->
163+
<g class="block" transform="translate(-10,660)">
164+
<line class="arrow" x1="60" y1="0" x2="60" y2="15"/>
165+
<g class="sub-program" transform="translate(0,25)">
166+
<rect class="symbol" width="120" height="40"/>
167+
<line class="line" x1="8" y1="0" x2="8" y2="40"/>
168+
<line class="line" x1="112" y1="0" x2="112" y2="40"/>
169+
<text x="60" y="25">B = CHECK(B)</text>
170+
</g>
171+
</g>
172+
<!-- End -->
173+
<g class="block" transform="translate(50,725)">
174+
<line class="arrow" x1="0" y1="0" x2="0" y2="15"/>
175+
<g class="end" transform="translate(0,45)">
176+
<ellipse class="symbol" cx="0" cy="0" rx="35" ry="20"/>
177+
<text x="0" y="5">END</text>
178+
</g>
179+
</g>
180+
</g>
181+
</svg>
182+
</body>
183+
</html>

0 commit comments

Comments
 (0)