-
Notifications
You must be signed in to change notification settings - Fork 3
/
oldindex.html
222 lines (209 loc) · 6.71 KB
/
oldindex.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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<html>
<head>
<meta charset="UTF-8">
<title>Dal Segno</title>
<link rel="stylesheet" href="../dalsegno.css">
<style>
body {
background-color: #eef;
display: inline-block;
margin-top: 2em;
}
html {
text-align: center;
}
div.content {
width: 600px;
display: inline-block;
text-align: left;
}
.embed{
border: solid lightgray 4px;
display: inline-block;
width: 1200px;
margin: auto;
position: relative;
text-align: left;
}
#canvas-container-1 {
width: 400px;
height: 400px;
margin-left: -4px;
float: right;
}
#editor {
width: 800px;
height: 400px;
display: inline-block;
text-align: left;
font-size: 18;
}
#embed2, #embed3 {
position: relative;
width: 800px;
height: 400px;
margin: auto;
margin-top: 30px;
}
#editor2, #editor3 {
position: absolute;
top: 0;
bottom: 60;
left: 0;
width: 500px;
}
#console2, #console3 {
position: absolute;
top: 340px;
bottom: 0;
left: 0;
width: 500px;
}
#canvas-container-2, #canvas-container-3 {
position: absolute;
top: 0;
left: 500px;
width: 400px;
height: 400px;
background-color: gray;
}
</style>
</head>
<body>
<script src="../ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../bundle.js"></script>
<h1>Dal Segno</h1>
<script type="mything" code-stuff="stuff" code-morestuff=""></script>
<script src="do stuff"></script>
<div id="embed2">
<div id="editor2" class="editor is-hidden">(+ 2 3)</div>
<div id="canvas-container-2" class="dalsegno-canvas-container">
<canvas></canvas>
<canvas></canvas>
</div>
<div id="errorbar2"></div>
<textarea id="console2"></textarea>
</div>
<div id="controls2">
<a id="fullscreen2" href="#">Open fullscreen</a>
execution speed:
<input type="range" id="speed2" min="1" max="200"/>
replay:
<button
class="dalsegno-prev-keyframe">|<<</button>
<button
class="dalsegno-rw-1000"><<</button>
<button
class="dalsegno-rw-1"><</button>
<input type="range" id="scrubber2"/>
<button
title="step forward 1000 bytecode executions"
class="dalsegno-fw-1000" >>></button>
<button id="fw1"
title="step forward a single bytecode execution"
class="dalsegno-fw-1">></button>
<button id="ffkeyframe"
title="step through execution until next key frame"
class="dalsegno-next-keyframe">>>|</button>
<button id="fork"
title="fork the timelines"
class="dalsegno-fork-timeline">kill the future</button>
<button id="fork"
title="advance to the end and continue execution"
class="dalsegno-fork-timeline">continue from end</button>
</div>
<script>
var embed2 = new DalSegno('editor2', 'canvas-container-2', 'errorbar2', 'console2', 'scrubber2', window.breakoutProgram, 'controls2');
embed2.speed = 50; // how many ticks to run at a time, default is 500
embed2.onChangeIfValid = function(){
var fullscreen = document.getElementById('fullscreen2');
fullscreen.setAttribute('href', embed2.link());
}
embed2.onChangeIfValid(embed2.initialContent);
document.getElementById(embed2.editorId).style.fontSize='14px';
document.getElementById('speed2').addEventListener('input', function(){
embed2.speed = parseInt(this.value);
console.log("setting speed to", embed2.speed);
})
</script>
<h2>Language</h2>
<div class="embed">
<div id="editor" class="editor is-hidden"></div>
<div id="canvas-container-1" class="dalsegno-canvas-container">
<canvas></canvas>
<canvas></canvas>
</div>
<div id="errorbar" class="errorbar"></div>
</div>
<script>
var embed = new DalSegno('editor', 'canvas-container-1', 'errorbar', undefined, undefined, window.simpleProgram)
embed.editor.setTheme("ace/theme/dawn");
embed.speed = 1;
embed.highlight = true;
</script>
<div class="content">
Programs are written in a Scheme-like language with some drawing primitives
in the global scope. <a href="https://github.com/thomasballinger/dalsegno#language">Read the documentation for the language on GitHub</a>.
<p>
The name <a href="https://en.wikipedia.org/wiki/Dal_Segno">Dal Segno</a> comes from the environment's behavior when a named function is
edited: the running program is rewound back to the last time that edited function
was run so that the new behavior of the edited function can immediately be seen.
</div>
<div id="embed3">
<div id="editor3" class="editor is-hidden">(+ 2 3)</div>
<div id="canvas-container-3" class="dalsegno-canvas-container">
<canvas></canvas>
<canvas></canvas>
</div>
<div id="errorbar3"></div>
<textarea id="console3"></textarea>
</div>
<a id="fullscreen3" href="#">Open fullscreen</a>
<script>
var embed3 = new DalSegno('editor3', 'canvas-container-3', 'errorbar3', 'console3', undefined, window.spaceLightProgram)
embed3.onChangeIfValid = function(){
var fullscreen = document.getElementById('fullscreen3');
fullscreen.setAttribute('href', embed2.link());
}
embed3.onChangeIfValid(embed3.initialContent);
</script>
<h2>Embedding</h2>
<div class="content">
To embed a Dal Segno widget, you'll need to:
<ul>
<li>Include about a dozen script tags</li>
<li>create a canvas, a div each for the editor and error display, and optionally a textarea, all with ids</li>
<li>write the following JavaScript: <code>
var embed = new DalSegno('editorid', 'canvasid', 'errorbarid', 'consoleid');
</code></li>
</ul>
Take a look at the page source for <a href="/">the demo</a> for a straightforward example.
</div>
<h2>Contributing</h2>
<div class="content">
Writing a program and wish you had another builtin?
Think it's ridiculous that you have to include so many script tags
instead of a single concatenated script?
See the <a href="https://github.com/thomasballinger/dalsegno#development">readme</a> for information on contributing.
<p>
I hope the pure JavaScript approach of using no language extension-type
libraries (other than Immutable.js) and no module bundler makes the
project approachable for JavaScript programmers of a variety of experience levels.
<p>
There's a lot that could be added to the project,
and I will make time to support contributors.
I'd particularly love to see an inline documentation viewer,
a stepper debugger, and improved visual design.
I'm interested in changing the syntax from s-expressions
to something more familiar to more programmers,
probably something similar to the language used by
<a href="http://codelauren.com/">Code Lauren</a>.
I think changing language semantics such that all variables are global
would be an improvement because proper lexical scope is more confusion
to beginners than its worth. Maybe local variables could have a special
syntax?
I'd love to see visualization of expressions values in the editor
(Light Table-style) or another visualization of interpreter state.
</div>
</body>
</html>