Skip to content

Commit d91ef08

Browse files
KierPalinKierPalin
committed
guiComponents.ts: Can dynamically add components to GUIComponentScene, GUIComponentScene.makeComponentScene is no longer static - it works on a reference to the GUIComponentScene now. Can initialise GUIComponentScene with [] components.
1 parent 6977308 commit d91ef08

File tree

2 files changed

+90
-67
lines changed

2 files changed

+90
-67
lines changed

‎guiComponents.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
namespace microgui {
23
import AppInterface = user_interface_base.AppInterface
34
import Scene = user_interface_base.Scene
@@ -1164,13 +1165,23 @@ namespace microgui {
11641165
if (opts.colour != null)
11651166
this.backgroundColor = opts.colour
11661167

1167-
this.components = opts.components
1168+
this.components = (opts.components != null) ? opts.components : []
11681169
this.currentComponentID = 0
11691170
}
11701171

1172+
1173+
public addComponents(newComponents: GUIComponentAbstract[]) {
1174+
this.components = this.components.concat(newComponents)
1175+
1176+
if (this.components.length == newComponents.length) {
1177+
this.components[this.currentComponentID].makeActive()
1178+
}
1179+
}
1180+
11711181
public activate() {
11721182
super.activate();
1173-
this.focus(true)
1183+
if (this.components.length > 0)
1184+
this.focus(true)
11741185
}
11751186

11761187
public deactivate() {
@@ -1480,3 +1491,4 @@ namespace microgui {
14801491
}
14811492
}
14821493
}
1494+

‎main.ts‎

Lines changed: 76 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
namespace microcode {
23
import App = microgui.App
34
import Scene = user_interface_base.Scene
@@ -7,85 +8,94 @@ namespace microcode {
78
import Button = user_interface_base.Button
89
import ButtonCollection = microgui.ButtonCollection
910
import GUIComponentAlignment = microgui.GUIComponentAlignment
11+
import TextBox = microgui.TextBox
1012
import GUIComponentScene = microgui.GUIComponentScene
1113

1214
control.singleSimulator();
1315
const app = new App();
1416

15-
// // const simpleTextComponent = new TextBox({
16-
// // alignment: GUIComponentAlignment.BOT,
17-
// // isActive: false,
18-
// // title: "Title Text :)",
19-
// // text: ["Hello there,", "I hope you are well.", "Isn't this neat?"],
20-
// // colour: 6,
21-
// // xScaling: 1.7,
22-
// // })
2317

24-
// // const window = new Window({ app, components: [simpleTextComponent] })
25-
// // app.pushScene(window)
18+
// const simpleTextComponent = new TextBox({
19+
// alignment: GUIComponentAlignment.BOT,
20+
// isActive: false,
21+
// title: "Title Text :)",
22+
// text: ["Hello there,", "I hope you are well.", "Isn't this neat?"],
23+
// colour: 6,
24+
// xScaling: 1.7,
25+
// })
2626

27-
// // const simpleBtnComponent = new ButtonCollection({
28-
// // alignment: GUIComponentAlignment.BOT_RIGHT,
29-
// // btns: [[new Button({ icon: "accelerometer", onClick: () => basic.showNumber(0)})]],
30-
// // isActive: true,
31-
// // })
27+
// const simpleBtnComponent = new ButtonCollection({
28+
// alignment: GUIComponentAlignment.BOT_RIGHT,
29+
// btns: [[new Button({ icon: "accelerometer", onClick: () => basic.showNumber(0)})]],
30+
// isActive: true,
31+
// })
3232

33-
// const comp1 = new ButtonCollection({
34-
// alignment: GUIComponentAlignment.TOP,
35-
// btns: [
36-
// [new Button({ icon: "pin_0", ariaId: "0", x: 0, y: 0, onClick: () => basic.showNumber(0) }),
37-
// new Button({ icon: "pin_1", ariaId: "1", x: 20, y: 0, onClick: () => basic.showNumber(1) })],
38-
// [new Button({ icon: "green_tick", ariaId: "Done", x: 20, y: 20, onClick: () => Window.makeComponentActive(1, false) })]
39-
// ],
40-
// isActive: true,
41-
// })
42-
43-
// const comp2 = new ButtonCollection({
44-
// alignment: GUIComponentAlignment.LEFT,
45-
// btns: [
46-
// [new Button({ icon: "thermometer", ariaId: "", x: 10, y: 0, onClick: () => basic.showNumber(0) })],
47-
// [new Button({ icon: "green_tick", ariaId: "", x: 10, y: 20, onClick: () => Window.makeComponentActive(2, true) })]
48-
// ],
49-
// isActive: false,
50-
// isHidden: true,
51-
// colour: 2,
52-
// })
53-
54-
/**
55-
* Grid of buttons in the centre of the screen,
56-
* Press done to go somewhere else.
57-
*/
58-
const comp3 = new ButtonCollection({
33+
// const window = new GUIComponentScene({ app, components: [simpleTextComponent] })
34+
// app.pushScene(window)
35+
36+
37+
let gcs = new GUIComponentScene({ app, components: [] })
38+
39+
const comp1 = new ButtonCollection({
5940
alignment: GUIComponentAlignment.TOP,
6041
btns: [
61-
[ // Row 1:
62-
new Button({ icon: "thermometer", ariaId: "0", x: 5, y: 5, onClick: () => basic.showNumber(0) }),
63-
new Button({ icon: "thermometer", ariaId: "1", x: 25, y: 5, onClick: () => basic.showNumber(1) }),
64-
new Button({ icon: "thermometer", ariaId: "2", x: 45, y: 5, onClick: () => basic.showNumber(2) }),
65-
new Button({ icon: "thermometer", ariaId: "3", x: 65, y: 5, onClick: () => basic.showNumber(3) }),
66-
],
67-
// [ // Row 2:
68-
// new Button({ icon: "thermometer", ariaId: "4", x: 5, y: 30, onClick: () => basic.showNumber(4) }),
69-
// new Button({ icon: "green_tick", ariaId: "5", x: 65, y: 30, onClick: () => { } })//GUIComponentScene.makeComponentActive(0, true) })
70-
// ],
71-
// [ // Row 3:
72-
// new Button({ icon: "thermometer", ariaId: "6", x: 5, y: 55, onClick: () => basic.showNumber(6) }),
73-
// ],
74-
// [ // Row 4:
75-
// new Button({ icon: "thermometer", ariaId: "7", x: 5, y: 80, onClick: () => basic.showNumber(7) }),
76-
// new Button({ icon: "thermometer", ariaId: "8", x: 25, y: 80, onClick: () => basic.showNumber(8) }),
77-
// new Button({ icon: "green_tick", ariaId: "9", x: 65, y: 80, onClick: () => { } })//GUIComponentScene.makeComponentActive(0, true) })
78-
// ],
42+
[new Button({ icon: "pin_0", ariaId: "0", x: 0, y: 0, onClick: () => basic.showNumber(0) }),
43+
new Button({ icon: "pin_1", ariaId: "1", x: 20, y: 0, onClick: () => basic.showNumber(1) })],
44+
[new Button({ icon: "green_tick", ariaId: "Done", x: 20, y: 20, onClick: () => gcs.makeComponentActive(1, false) })]
7945
],
8046
isActive: true,
81-
isHidden: false,
82-
xScaling: 1.1,
83-
yScaling: 2,
84-
colour: 6,
8547
})
8648

87-
const window = new GUIComponentScene({ app, components: [comp3] })
88-
app.pushScene(window)
49+
const comp2 = new ButtonCollection({
50+
alignment: GUIComponentAlignment.LEFT,
51+
btns: [
52+
[new Button({ icon: "thermometer", ariaId: "", x: 10, y: 0, onClick: () => basic.showNumber(0) })],
53+
[new Button({ icon: "green_tick", ariaId: "", x: 10, y: 20, onClick: () => gcs.makeComponentActive(0, true) })]
54+
],
55+
isActive: false,
56+
isHidden: true,
57+
colour: 2,
58+
})
59+
60+
61+
gcs.addComponents([comp1, comp2])
62+
app.pushScene(gcs)
63+
64+
// /**
65+
// * Grid of buttons in the centre of the screen,
66+
// * Press done to go somewhere else.
67+
// */
68+
// const comp3 = new ButtonCollection({
69+
// alignment: GUIComponentAlignment.TOP,
70+
// btns: [
71+
// [ // Row 1:
72+
// // new Button({ icon: "thermometer", ariaId: "0", x: 5, y: 5, onClick: () => basic.showNumber(0) }),
73+
// // new Button({ icon: "thermometer", ariaId: "1", x: 25, y: 5, onClick: () => basic.showNumber(1) }),
74+
// // new Button({ icon: "thermometer", ariaId: "2", x: 45, y: 5, onClick: () => basic.showNumber(2) }),
75+
// // new Button({ icon: "thermometer", ariaId: "3", x: 65, y: 5, onClick: () => basic.showNumber(3) }),
76+
// ],
77+
// [ // Row 2:
78+
// new Button({ icon: "thermometer", ariaId: "4", x: 5, y: 30, onClick: () => basic.showNumber(4) }),
79+
// new Button({ icon: "green_tick", ariaId: "5", x: 65, y: 30, onClick: () => { } })//GUIComponentScene.makeComponentActive(0, true) })
80+
// ],
81+
// // [ // Row 3:
82+
// // new Button({ icon: "thermometer", ariaId: "6", x: 5, y: 55, onClick: () => basic.showNumber(6) }),
83+
// // ],
84+
// // [ // Row 4:
85+
// // new Button({ icon: "thermometer", ariaId: "7", x: 5, y: 80, onClick: () => basic.showNumber(7) }),
86+
// // new Button({ icon: "thermometer", ariaId: "8", x: 25, y: 80, onClick: () => basic.showNumber(8) }),
87+
// // new Button({ icon: "green_tick", ariaId: "9", x: 65, y: 80, onClick: () => { } })//GUIComponentScene.makeComponentActive(0, true) })
88+
// // ],
89+
// ],
90+
// isActive: true,
91+
// isHidden: false,
92+
// xScaling: 1.1,
93+
// yScaling: 2,
94+
// colour: 6,
95+
// })
96+
97+
// const window = new GUIComponentScene({ app, components: [comp3] })
98+
// app.pushScene(window)
8999

90100
// const comp3 = new ButtonCollection({
91101
// alignment: GUIComponentAlignment.TOP,
@@ -169,3 +179,4 @@ namespace microcode {
169179
// app.pushScene(kb)
170180
}
171181

182+

0 commit comments

Comments
 (0)