Repository navigation
Expand file tree
/
Copy pathfbui.html
More file actions
184 lines (131 loc) · 11.7 KB
/
Copy pathfbui.html
File metadata and controls
184 lines (131 loc) · 11.7 KB
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
<!DOCTYPE html>
<html>
<head>
<title>fbui.coffee</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul class="sections">
<li id="title">
<div class="annotation">
<h1>fbui.coffee</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
<p>FirebaseUI is a distributed UI manager via Firebase.com’s JSON technology.
Our UI via Firebase is “alpha” at this point and uses the NetLogo design.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ABM</span>.<span class="hljs-title">FirebaseUI</span></span></pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<p>Create UI object via Firebase url, the model, and a json UI tree:</p>
<pre><code><span class="hljs-attribute">uiData</span>:
<span class="hljs-attribute">go</span>: <span class="hljs-attribute">type</span>:<span class="hljs-string">"button"</span>, <span class="hljs-attribute">setter</span>:<span class="hljs-string">"toggle"</span>, <span class="hljs-attribute">val</span>: <span class="hljs-literal">false</span>
<span class="hljs-attribute">background</span>: <span class="hljs-attribute">type</span>:<span class="hljs-string">"choice"</span>, <span class="hljs-attribute">vals</span>: [<span class="hljs-string">"black"</span>,<span class="hljs-string">"red"</span>,<span class="hljs-string">"random"</span>], <span class="hljs-attribute">val</span>: <span class="hljs-string">"red"</span>
<span class="hljs-attribute">useConsole</span>: <span class="hljs-attribute">type</span>:<span class="hljs-string">"switch"</span>, <span class="hljs-attribute">val</span>: <span class="hljs-literal">true</span>
<span class="hljs-attribute">population</span>: <span class="hljs-attribute">type</span>:<span class="hljs-string">"slider"</span>, <span class="hljs-attribute">min</span>:<span class="hljs-number">25</span>, <span class="hljs-attribute">step</span>:<span class="hljs-number">25</span>, <span class="hljs-attribute">max</span>:<span class="hljs-number">1000</span>, <span class="hljs-attribute">val</span>:<span class="hljs-number">500</span>
<span class="hljs-attribute">filename</span>: <span class="hljs-attribute">type</span>:<span class="hljs-string">"input"</span>, <span class="hljs-attribute">val</span>:<span class="hljs-string">"test.png"</span>
<span class="hljs-attribute">result</span>: <span class="hljs-attribute">type</span>:<span class="hljs-string">"output"</span> <span class="hljs-attribute">val</span>: json
<span class="hljs-attribute">vision</span>:
<span class="hljs-attribute">type</span>:<span class="hljs-string">"slider"</span>, <span class="hljs-attribute">setter</span>:<span class="hljs-string">"setVision"</span>, <span class="hljs-attribute">min</span>:<span class="hljs-number">.5</span>, <span class="hljs-attribute">step</span>:<span class="hljs-number">.5</span>, <span class="hljs-attribute">max</span>:<span class="hljs-number">10</span>, <span class="hljs-attribute">val</span>:<span class="hljs-number">3</span>
</code></pre><p>Rules:</p>
<ul>
<li>Each ui element is a name/object pair</li>
<li>If the ui object has a setter, it is called with the current value: model.name(val)</li>
<li>If not, its name is a property, which is set to the value: model.name = val</li>
<li>If the ui object is a button, it is a boolean which must have a setter</li>
<li>The button’s setter is called on the false -> true transition</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-attribute">constructor</span>: <span class="hljs-function"><span class="hljs-params">(<span class="hljs-property">@fbname</span>, <span class="hljs-property">@model</span>, <span class="hljs-property">@ui</span>)</span> -></span>
<span class="hljs-property">@fb</span> = <span class="hljs-keyword">new</span> Firebase <span class="hljs-property">@fbname</span>
<span class="hljs-property">@refs</span> = {}; <span class="hljs-property">@refs</span>[k] = <span class="hljs-property">@fb</span>.child(k) <span class="hljs-keyword">for</span> k,v <span class="hljs-keyword">of</span> <span class="hljs-property">@ui</span>
<span class="hljs-property">@vals</span> = {}; <span class="hljs-property">@vals</span>[k] = v.val <span class="hljs-keyword">for</span> k,v <span class="hljs-keyword">of</span> <span class="hljs-property">@ui</span>
<span class="hljs-property">@resetModel</span>()
<span class="hljs-property">@fb</span>.set <span class="hljs-property">@ui</span>, <span class="hljs-function"><span class="hljs-params">(val)</span>-></span><span class="hljs-built_in">console</span>.log <span class="hljs-keyword">if</span> val? <span class="hljs-keyword">then</span> <span class="hljs-string">"FB error: <span class="hljs-subst">#{val}</span>"</span> <span class="hljs-keyword">else</span> <span class="hljs-string">"FB ready"</span>
<span class="hljs-property">@fb</span>.<span class="hljs-literal">on</span> <span class="hljs-string">'child_changed'</span>, <span class="hljs-function"><span class="hljs-params">(snapshot)</span> =></span>
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"childChange"</span>, snapshot.name(), snapshot.val().val
<span class="hljs-property">@setModelValue</span> snapshot.name(), snapshot.val().val
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"--- Firebase setup"</span></pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<p>Use the json tree to set the model’s instance variables</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">setModelValue</span>: <span class="hljs-function"><span class="hljs-params">(name, value)</span> -></span>
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"setModelValue: <span class="hljs-subst">#{name}</span>, <span class="hljs-subst">#{value}</span>"</span>
<span class="hljs-property">@vals</span>[name] = value
<span class="hljs-keyword">if</span> <span class="hljs-property">@ui</span>[name].type <span class="hljs-keyword">is</span> <span class="hljs-string">"button"</span>
<span class="hljs-keyword">if</span> value <span class="hljs-keyword">then</span> <span class="hljs-property">@setUIValue</span> name, <span class="hljs-literal">false</span> <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span>
<span class="hljs-keyword">if</span> (setter=<span class="hljs-property">@ui</span>[name].setter)? <span class="hljs-keyword">then</span> <span class="hljs-property">@model</span>[setter](value) <span class="hljs-keyword">else</span> <span class="hljs-property">@model</span>[name]=value</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
<p>Set the Firebase json value </p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">setUIValue</span>: <span class="hljs-function"><span class="hljs-params">(name, value, push=<span class="hljs-literal">false</span>)</span> -></span>
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"setUIValue: <span class="hljs-subst">#{name}</span>, <span class="hljs-subst">#{value}</span>, <span class="hljs-subst">#{push}</span>"</span></pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
<p>@refs[name].child(‘val’).set(value)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@refs</span>[name].child(<span class="hljs-string">'val'</span>)[<span class="hljs-keyword">if</span> push <span class="hljs-keyword">then</span> <span class="hljs-string">"push"</span> <span class="hljs-keyword">else</span> <span class="hljs-string">"set"</span>](value)</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">¶</a>
</div>
<p>Get the current UI value for the given model property</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">getUIValue</span>: <span class="hljs-function"><span class="hljs-params">(name)</span> -></span> <span class="hljs-property">@vals</span>[name] <span class="hljs-comment"># last value from callback</span></pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">¶</a>
</div>
<p>Reset the model instance variables to initial json tree.
Useful for resetting the model back to its defaults.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">resetModel</span>: <span class="hljs-function">-></span>
<span class="hljs-property">@setModelValue</span> k, v.val <span class="hljs-keyword">for</span> k,v <span class="hljs-keyword">of</span> <span class="hljs-property">@ui</span> <span class="hljs-keyword">when</span> v.type <span class="hljs-keyword">isnt</span> <span class="hljs-string">"button"</span></pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">¶</a>
</div>
<p>Reset the Firebase json tree to initial ui object’s values.
Will cause FB events for those values that differ from initial values.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">resetUI</span>: <span class="hljs-function">-></span>
<span class="hljs-property">@setUIValue</span> k, v.val <span class="hljs-keyword">for</span> k,v <span class="hljs-keyword">of</span> <span class="hljs-property">@ui</span> <span class="hljs-keyword">when</span> v.type <span class="hljs-keyword">isnt</span> <span class="hljs-string">"button"</span></pre></div></div>
</li>
</ul>
</div>
</body>
</html>