Skip to content

Commit 4112726

Browse files
KierPalinKierPalin
committed
tests.ts: adding demo code
1 parent cd5827b commit 4112726

1 file changed

Lines changed: 235 additions & 0 deletions

File tree

‎test.ts‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
namespace microcode {
2+
import Scene = user_interface_base.Scene
3+
import SceneManager = user_interface_base.SceneManager
4+
import Screen = user_interface_base.Screen
5+
import Button = user_interface_base.Button
6+
7+
import App = microgui.App
8+
import KeyboardMenu = microgui.KeyboardMenu
9+
import ButtonCollection = microgui.ButtonCollection
10+
import GUIComponentAlignment = microgui.GUIComponentAlignment
11+
import TextBox = microgui.TextBox
12+
import GUIComponentScene = microgui.GUIComponentScene
13+
import TextButtonCollection = microgui.TextButtonCollection
14+
import TextButton = microgui.TextButton
15+
import GraphableFunction = microgui.GraphableFunction
16+
import GUIGraph = microgui.GUIGraph
17+
import RadioButtonCollection = microgui.RadioButtonCollection
18+
import RadioButton = microgui.RadioButton
19+
20+
21+
control.singleSimulator();
22+
const app = new App();
23+
24+
// Comment out the examples you aren't using:
25+
26+
27+
// Example 1a:
28+
29+
// const simpleTextComponent = new TextBox({
30+
// alignment: GUIComponentAlignment.BOT,
31+
// isActive: false,
32+
// title: "Title Text :)", // optional arg
33+
// text: ["Hello there,", "I hope you are well.", "Isn't this neat?"], // optional arg
34+
// colour: 6, // optional arg
35+
// xScaling: 1.7, // optional arg
36+
// })
37+
38+
// const gcs = new GUIComponentScene({ app, components: [simpleTextComponent] })
39+
// app.pushScene(gcs)
40+
41+
42+
43+
// Example 1b:
44+
45+
// const simpleBtnComponent = new ButtonCollection({
46+
// alignment: GUIComponentAlignment.BOT_RIGHT,
47+
// btns: [
48+
// // Row 1:
49+
// [new Button({ icon: "accelerometer", onClick: () => basic.showNumber(0) })]
50+
// ],
51+
// isActive: true,
52+
// colour: 4 // optional arg
53+
// })
54+
55+
// const gcs = new GUIComponentScene({ app, components: [simpleBtnComponent], colour: 6 })
56+
// app.pushScene(gcs)
57+
58+
59+
60+
// Example 2: Multiple interacting components + dynamically adding components
61+
62+
// let gcs = new GUIComponentScene({ app, components: [] })
63+
// const comp1 = new ButtonCollection({
64+
// alignment: GUIComponentAlignment.TOP,
65+
// btns: [
66+
// [new Button({ icon: "pin_0", ariaId: "0", x: 0, y: 0, onClick: () => basic.showNumber(0) }),
67+
// new Button({ icon: "pin_1", ariaId: "1", x: 20, y: 0, onClick: () => basic.showNumber(1) })],
68+
// [new Button({ icon: "green_tick", ariaId: "Done", x: 20, y: 20, onClick: () => gcs.makeComponentActive(1, false) })]
69+
// ],
70+
// isActive: true,
71+
// })
72+
73+
// const comp2 = new ButtonCollection({
74+
// alignment: GUIComponentAlignment.LEFT,
75+
// btns: [
76+
// [new Button({ icon: "thermometer", ariaId: "", x: 10, y: 0, onClick: () => basic.showNumber(0) })],
77+
// [new Button({ icon: "green_tick", ariaId: "", x: 10, y: 20, onClick: () => gcs.makeComponentActive(0, true) })]
78+
// ],
79+
// isActive: false,
80+
// isHidden: true,
81+
// colour: 2,
82+
// })
83+
84+
// gcs.addComponents([comp1, comp2])
85+
// app.pushScene(gcs)
86+
87+
88+
89+
// Example 3: Hetrogenous rows:
90+
// You can also dynamically add rows
91+
92+
// const buttonCollection = new ButtonCollection({
93+
// alignment: GUIComponentAlignment.TOP,
94+
// btns: [
95+
// [ // Row 1:
96+
// new Button({ icon: "accelerometer", ariaId: "0", x: 5, y: 5, onClick: () => basic.showNumber(0) }),
97+
// new Button({ icon: "pin_0", ariaId: "1", x: 25, y: 5, onClick: () => basic.showNumber(1) }),
98+
// new Button({ icon: "pin_1", ariaId: "2", x: 45, y: 5, onClick: () => basic.showNumber(2) }),
99+
// new Button({ icon: "pin_2", ariaId: "3", x: 65, y: 5, onClick: () => basic.showNumber(3) }),
100+
// ],
101+
// [ // Row 2:
102+
// new Button({ icon: "thermometer", ariaId: "4", x: 5, y: 30, onClick: () => basic.showNumber(4) }),
103+
// new Button({ icon: "microphone", ariaId: "5", x: 65, y: 30, onClick: () => basic.showNumber(5) })
104+
// ],
105+
// [ // Row 3:
106+
// new Button({ icon: "compass", ariaId: "6", x: 5, y: 55, onClick: () => basic.showNumber(6) }),
107+
// ],
108+
// [ // Row 4:
109+
// new Button({ icon: "right_spin", ariaId: "7", x: 5, y: 80, onClick: () => basic.showNumber(7) }),
110+
// new Button({ icon: "right_turn", ariaId: "8", x: 25, y: 80, onClick: () => basic.showNumber(8) }),
111+
// new Button({ icon: "green_tick", ariaId: "9", x: 65, y: 80, onClick: () => basic.showNumber(9)})
112+
// ],
113+
// ],
114+
// isActive: true,
115+
// isHidden: false,
116+
// xScaling: 1.1,
117+
// yScaling: 1.9,
118+
// colour: 3,
119+
// })
120+
121+
// const gcs = new GUIComponentScene({ app, components: [buttonCollection] })
122+
// app.pushScene(gcs)
123+
124+
125+
const buttonCollection = new ButtonCollection({
126+
alignment: GUIComponentAlignment.TOP,
127+
btns: [
128+
[ // Row 1:
129+
new Button({ icon: "accelerometer", ariaId: "0", onClick: () => basic.showNumber(0) }),
130+
new Button({ icon: "pin_0", ariaId: "1", onClick: () => basic.showNumber(1) }),
131+
new Button({ icon: "pin_1", ariaId: "2", onClick: () => basic.showNumber(2) }),
132+
new Button({ icon: "pin_2", ariaId: "3", onClick: () => basic.showNumber(3) }),
133+
],
134+
[ // Row 2:
135+
new Button({ icon: "thermometer", ariaId: "4", onClick: () => basic.showNumber(4) }),
136+
new Button({ icon: "microphone", ariaId: "5", onClick: () => basic.showNumber(5) })
137+
],
138+
[ // Row 3:
139+
new Button({ icon: "compass", ariaId: "6", onClick: () => basic.showNumber(6) }),
140+
new Button({ icon: "compass", ariaId: "6", onClick: () => basic.showNumber(6) }),
141+
new Button({ icon: "compass", ariaId: "6", onClick: () => basic.showNumber(6) }),
142+
new Button({ icon: "compass", ariaId: "6", onClick: () => basic.showNumber(6) }),
143+
new Button({ icon: "compass", ariaId: "6", onClick: () => basic.showNumber(6) }),
144+
145+
],
146+
[ // Row 4:
147+
new Button({ icon: "right_spin", ariaId: "7", onClick: () => basic.showNumber(7) }),
148+
new Button({ icon: "right_turn", ariaId: "8", onClick: () => basic.showNumber(8) }),
149+
new Button({ icon: "green_tick", ariaId: "9", onClick: () => basic.showNumber(9) })
150+
],
151+
],
152+
isActive: true,
153+
isHidden: false,
154+
xScaling: 1.1,
155+
yScaling: 1.7,
156+
colour: 3,
157+
})
158+
159+
const gcs = new GUIComponentScene({ app, components: [buttonCollection] })
160+
app.pushScene(gcs)
161+
162+
163+
164+
// Example 4: Component context: Linking a graph with a button:
165+
166+
// let count = 0;
167+
// const btnComponent = new ButtonCollection({
168+
// alignment: GUIComponentAlignment.TOP,
169+
// btns: [
170+
// [new Button({
171+
// icon: "pin_0", ariaId: "+1", x: 10, y: 10, onClick: () => {
172+
// count += 1;
173+
// }
174+
// })],
175+
// ],
176+
// isActive: true,
177+
// colour: 2,
178+
// xScaling: 0.5,
179+
// yScaling: 0.7,
180+
// xOffset: -10
181+
// })
182+
183+
// const graphComponent = new GUIGraph({
184+
// alignment: GUIComponentAlignment.BOT,
185+
// graphableFns: [new GraphableFunction((_) => count)],
186+
// isActive: false,
187+
// isHidden: false
188+
// })
189+
190+
// const gcs = new GUIComponentScene({ app, components: [btnComponent, graphComponent], colour: 11 })
191+
// app.pushScene(gcs)
192+
193+
194+
195+
196+
// Example 5: Text Buttons
197+
198+
// const txtBtnComp = new TextButtonCollection({
199+
// alignment: GUIComponentAlignment.TOP_LEFT,
200+
// isActive: true,
201+
// textBtns: [
202+
// new TextButton({ text: "Text Btn 1", callback: () => basic.showString("hi") }),
203+
// new TextButton({ text: "Text Btn 2", callback: () => basic.showString("yo") })
204+
// ],
205+
// xOffset: 10,
206+
// yOffset: 10,
207+
// yScaling: 1.1,
208+
// colour: 13,
209+
// title: "My title" // Try commenting this out.
210+
// })
211+
// const gcs = new GUIComponentScene({ app, components: [txtBtnComp], colour: 3 })
212+
// app.pushScene(gcs)
213+
214+
215+
216+
// Example 6: RadioButtons
217+
218+
// const rbc = new RadioButtonCollection({
219+
// alignment: GUIComponentAlignment.CENTRE,
220+
// btns: [
221+
// new RadioButton({ text: "hi", onClick: () => { basic.showString("a") } }),
222+
// new RadioButton({ text: "hiyaaaaaaaaaa", onClick: () => { basic.showString("b") } }),
223+
// new RadioButton({ text: "hello", onClick: () => { basic.showString("c") } }),
224+
// new RadioButton({ text: "a", onClick: () => { basic.showString("d") } }),
225+
// new RadioButton({ text: "b", onClick: () => { basic.showString("e") } })
226+
// ],
227+
// isActive: true,
228+
// title: "The title",
229+
// colour: 3
230+
// });
231+
232+
// const gcs = new GUIComponentScene({ app, components: [rbc] });
233+
// app.pushScene(gcs);
234+
}
235+

0 commit comments

Comments
 (0)