-
Notifications
You must be signed in to change notification settings - Fork 1
/
vvvviewer.html
111 lines (105 loc) · 5.28 KB
/
vvvviewer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<p>On the internet, discussions about textual programming problems usually include snippets of sourcecode, placed right in the middle of running text. With VVVV patches, it is not that easy. Describing patching problems often involves either a verbal description of a patch, or attached resources like screenshots or the actual .v4p file.</p>
<p>The VVVViewer is a rather independent module of the VVVV.js project, which renders VVVV patches (really: the patches) as SVG within the browser, using d3.js . This makes communicating and discussing VVVV code easier.</p>
<p>Here's some VVVV XML code. Click the button to parse and render the patch:</p>
<input type="button" value="Parse & Render" id="render_vvvviewer_demo"/>
<pre id="patch1">
<!DOCTYPE PATCH SYSTEM "D:\charanim\movvvve2\vvvv_40beta23.3\bin\40alpha23.dtd" >
<PATCH>
<NODE componentmode="InABox" id="6" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
<BOUNDS height="100" left="1395" top="870" type="Node" width="100">
</BOUNDS>
<BOUNDS height="1365" left="1395" top="870" type="Box" width="795">
</BOUNDS>
<PIN pinname="Rows" slicecount="1" values="5">
</PIN>
<PIN pinname="SliceCount Mode" slicecount="1" values="ColsRowsPages">
</PIN>
<PIN pinname="Y Output Value" visible="1">
</PIN>
<PIN pinname="Y Input Value" slicecount="5" values="1,2,3,4,5">
</PIN>
</NODE>
<NODE componentmode="InABox" id="5" nodename="IOBox (String)" systemname="IOBox (String)">
<BOUNDS height="270" left="1260" top="510" type="Node" width="945">
</BOUNDS>
<BOUNDS height="270" left="1260" top="510" type="Box" width="945">
</BOUNDS>
<PIN pinname="Input String" slicecount="1" visible="0" values="|the spread:|">
</PIN>
<PIN pinname="Output String" visible="0">
</PIN>
<PIN pinname="Show Grid" slicecount="1" values="0">
</PIN>
</NODE>
<NODE componentmode="Hidden" id="4" nodename="GetSlice (Spreads)" systemname="GetSlice (Spreads)">
<BOUNDS height="100" left="2145" top="4215" type="Node" width="100">
</BOUNDS>
<PIN pinname="Input" visible="1">
</PIN>
<PIN pinname="Bin Size" slicecount="1" values="1">
</PIN>
<PIN pinname="Index" visible="1">
</PIN>
<PIN pinname="Output" visible="1">
</PIN>
</NODE>
<LINK dstnodeid="4" dstpinname="Input" srcnodeid="6" srcpinname="Y Output Value">
</LINK>
<NODE componentmode="Hidden" id="3" nodename="Count (Value)" systemname="Count (Value)">
<BOUNDS height="100" left="3510" top="2655" type="Node" width="100">
</BOUNDS>
<PIN pinname="Input" visible="1">
</PIN>
<PIN pinname="Count" visible="1">
</PIN>
</NODE>
<LINK dstnodeid="3" dstpinname="Input" srcnodeid="6" srcpinname="Y Output Value">
</LINK>
<NODE componentmode="Hidden" id="2" nodename="RandomSpread (Spreads)" systemname="RandomSpread (Spreads)">
<BOUNDS height="100" left="2400" top="3135" type="Node" width="100">
</BOUNDS>
<PIN pinname="Input" slicecount="1" visible="1" values="0">
</PIN>
<PIN pinname="Width" slicecount="1" values="1">
</PIN>
<PIN pinname="Random Seed" slicecount="1" values="0">
</PIN>
<PIN pinname="Spread Count" visible="1">
</PIN>
<PIN pinname="Output" visible="1">
</PIN>
</NODE>
<LINK dstnodeid="2" dstpinname="Spread Count" srcnodeid="3" srcpinname="Count">
</LINK>
<NODE componentmode="Hidden" id="1" nodename="Sort (Spreads)" systemname="Sort (Spreads)">
<BOUNDS height="100" left="2400" top="3630" type="Node" width="100">
</BOUNDS>
<PIN pinname="Input" visible="1">
</PIN>
<PIN pinname="Former Index" visible="1">
</PIN>
</NODE>
<LINK dstnodeid="1" dstpinname="Input" srcnodeid="2" srcpinname="Output">
</LINK>
<LINK dstnodeid="4" dstpinname="Index" srcnodeid="1" srcpinname="Former Index">
</LINK>
<NODE componentmode="InABox" id="7" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
<BOUNDS height="100" left="1410" top="4890" type="Node" width="100">
</BOUNDS>
<BOUNDS height="1365" left="1410" top="4890" type="Box" width="795">
</BOUNDS>
<PIN pinname="Rows" slicecount="1" values="5">
</PIN>
<PIN pinname="SliceCount Mode" slicecount="1" values="ColsRowsPages">
</PIN>
<PIN pinname="Y Output Value" visible="1">
</PIN>
<PIN pinname="Y Input Value" visible="1">
</PIN>
</NODE>
<LINK srcnodeid="4" srcpinname="Output" dstnodeid="7" dstpinname="Y Input Value">
</LINK>
</PATCH>
</pre>
<p>As you can see, the patch is <em>not evaluated</em>, but <em>only displayed</em>, this is why there's no result. You can use this to describe patching solutions or problems, and to exchange
patch "snippets" with others. However, in case you're running the patch, you can use the VVVViewer for debugging purposes.</p>