-
Notifications
You must be signed in to change notification settings - Fork 3
/
embedded.html
129 lines (119 loc) · 3.64 KB
/
embedded.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
<html>
<head>
<meta charset="UTF-8">
<title>live code reloading</title>
<link rel="stylesheet" href="dalsegno.css">
<style>
#embed1, #embed2, #embed3 {
position: relative;
width: 900px;
height: 400px;
}
#editor, #editor2, #editor3 {
position: absolute;
top: 0;
bottom: 60;
left: 0;
width: 500px;
}
#console, #console2, #console3 {
position: absolute;
top: 340px;
bottom: 0;
left: 0;
width: 500px;
}
#canvas, #canvas2, #canvas3 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 400px;
height: 400px;
background-color: gray;
}
#funs {
width: 400;
height: auto;
}
</style>
</head>
<body>
<h1>Embedding Dal Segno</h1>
<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="Immutable.js" type="text/javascript" charset="utf-8"></script>
<script src="deepCopy.js"></script>
<script src="parse.js"></script>
<script src="Environment.js"></script>
<script src="compile.js"></script>
<script src="bcexec.js"></script>
<script src="run.js"></script>
<script src="builtins.js"></script>
<script src="MouseTracker.js"></script>
<script src="KeyboardTracker.js"></script>
<script src="Console.js"></script>
<script src="stdlibcode.js"></script>
<script src="bcstdlib.js"></script>
<script src="LazyCanvasCtx.js"></script>
<script src="DrawHelpers.js"></script>
<script src="DalSegno.js" type="text/javascript" charset="utf-8"></script>
<script src="examples/golf.js"></script>
<script src="examples/spacelight.js"></script>
<div id="embed1">
<div id="editor" class="editor is-hidden"></div>
<textarea id="console"></textarea>
<div id="funs"></div>
<canvas id="canvas" width="1" height="1"></canvas>
<div id="errorbar"></div>
</div>
<h2> Multiple per page </h2>
<div id="embed2">
<div id="editor2" class="editor is-hidden">(+ 2 3)</div>
<textarea id="console2"></textarea>
<canvas id="canvas2" width="1" height="1"></canvas>
<div id="errorbar2"></div>
</div>
<a id="fullscreen2" href="#">Open fullscreen</a>
execution speed:
<input type="range" id="speed2">
<div id="embed3">
<div id="editor3" class="editor is-hidden">
(define points (list (list 0 100)
(list 10 200)
(list 20 200)
(list 30 200)
(list 40 200)))
(defn ground-below (x points)
"the relevant points below the ball"
(define 4-points (zip4 points
(rest points)
(rest (rest points))
(rest (rest (rest points)))))
(define below
(find (lambda (4-points) (> x (get 1 4-points)))
4-points)))
</div>
<textarea id="console3"></textarea>
<canvas id="canvas3" width="1" height="1"></canvas>
<div id="errorbar3"></div>
</div>
<script>
var embed = new DalSegno('editor', 'canvas', 'errorbar', 'console', 'funs', window.spaceLightProgram)
embed.speed = 600; // how many ticks to run at a time, default is 500
document.getElementById(embed.editorId).style.fontSize='10px';
var embed2 = new DalSegno('editor2', 'canvas2', 'errorbar2', 'console2', undefined, window.golfProgram)
embed2.speed = 30; // 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(){
console.log("setting speed to", this.value);
embed2.speed = parseInt(this.value);
})
var embed3 = new DalSegno('editor3', 'canvas3', 'errorbar3', 'console3');
</script>
</body>
</html>