Skip to content

Commit 39b1329

Browse files
KierPalinKierPalin
committed
main.ts demo improvement, GUIComponentScene and GUIGraph bug fixes
1 parent 8deb0ce commit 39b1329

2 files changed

Lines changed: 140 additions & 135 deletions

File tree

‎guiComponents.ts‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -484,6 +484,10 @@ namespace microgui {
484484

485485
export class GUIGraph extends TextBox {
486486
private graphableFns: GraphableFunction[]
487+
/** Reads the graphableFns if the frameCounter is >= this sampling rate. */
488+
private sampleRate: number = 8;
489+
/** Increments each draw() {}, see this.sampleRate */
490+
private frameCounter: number;
487491

488492
constructor(opts: {
489493
alignment: GUIComponentAlignment,
@@ -513,27 +517,36 @@ namespace microgui {
513517
})
514518

515519
this.graphableFns = opts.graphableFns
520+
516521
const bufferScalar = (opts.xScaling != null) ? opts.xScaling : 1
517522
this.graphableFns.forEach(gf => gf.setBufferSize(60 * bufferScalar))
523+
this.frameCounter = 0;
518524
}
519525

520526
draw() {
521527
super.draw()
522528

529+
this.frameCounter++;
530+
523531
const left = this.bounds.left
524532
const top = this.bounds.top
525533

526534
this.bounds.fillRect(15)
527535

536+
528537
//-------------------------------
529538
// Load the buffer with new data:
530539
//-------------------------------
531540

532-
for (let i = 0; i < this.graphableFns.length; i++) {
533-
const hasSpace = this.graphableFns[i].getBufferLength() < this.graphableFns[i].getMaxBufferSize()
534-
this.graphableFns[i].readIntoBufferOnce((screen().height >> 1) + top, this.bounds.height) // 8
535-
}
541+
// Only poll and draw at the sampleRate, don't basic.pause() since there are other components.
542+
if (this.frameCounter >= this.sampleRate) {
543+
for (let i = 0; i < this.graphableFns.length; i++) {
544+
const hasSpace = this.graphableFns[i].getBufferLength() < this.graphableFns[i].getMaxBufferSize()
545+
this.graphableFns[i].readIntoBufferOnce((screen().height >> 1) + top, this.bounds.height) // 8
546+
}
536547

548+
this.frameCounter = 0;
549+
}
537550
//----------------------------
538551
// Draw sensor lines & ticker:
539552
//----------------------------
@@ -636,7 +649,6 @@ namespace microgui {
636649
this.bounds.top + this.bounds.height + (screen().height >> 1) + 3,
637650
1
638651
)
639-
basic.pause(100);
640652
}
641653
}
642654

@@ -1169,7 +1181,6 @@ namespace microgui {
11691181
this.currentComponentID = 0
11701182
}
11711183

1172-
11731184
public addComponents(newComponents: GUIComponentAbstract[]) {
11741185
this.components = this.components.concat(newComponents)
11751186

@@ -1181,7 +1192,7 @@ namespace microgui {
11811192
public activate() {
11821193
super.activate();
11831194
if (this.components.length > 0)
1184-
this.focus(true)
1195+
this.components[this.currentComponentID].makeActive()
11851196
}
11861197

11871198
public deactivate() {

‎main.ts‎

Lines changed: 122 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -10,173 +10,167 @@ namespace microcode {
1010
import GUIComponentAlignment = microgui.GUIComponentAlignment
1111
import TextBox = microgui.TextBox
1212
import GUIComponentScene = microgui.GUIComponentScene
13+
import TextButtonCollection = microgui.TextButtonCollection
14+
import TextButton = microgui.TextButton
15+
import GraphableFunction = microgui.GraphableFunction
16+
import GUIGraph = microgui.GUIGraph
1317

1418
control.singleSimulator();
1519
const app = new App();
1620

1721

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-
// })
22+
// Comment out the examples you aren't using:
23+
24+
25+
26+
// Example 1a:
27+
28+
const simpleTextComponent = new TextBox({
29+
alignment: GUIComponentAlignment.BOT,
30+
isActive: false,
31+
title: "Title Text :)", // optional arg
32+
text: ["Hello there,", "I hope you are well.", "Isn't this neat?"], // optional arg
33+
colour: 6, // optional arg
34+
xScaling: 1.7, // optional arg
35+
})
36+
37+
const gcs = new GUIComponentScene({ app, components: [simpleTextComponent] })
38+
app.pushScene(gcs)
39+
40+
41+
42+
// Example 1b:
2643

2744
// const simpleBtnComponent = new ButtonCollection({
2845
// alignment: GUIComponentAlignment.BOT_RIGHT,
29-
// btns: [[new Button({ icon: "accelerometer", onClick: () => basic.showNumber(0)})]],
46+
// btns: [
47+
// // Row 1:
48+
// [new Button({ icon: "accelerometer", onClick: () => basic.showNumber(0) })]
49+
// ],
3050
// isActive: true,
51+
// colour: 4 // optional arg
3152
// })
3253

33-
// const window = new GUIComponentScene({ app, components: [simpleTextComponent] })
34-
// app.pushScene(window)
54+
// const gcs = new GUIComponentScene({ app, components: [simpleBtnComponent], colour: 6 })
55+
// app.pushScene(gcs)
3556

3657

37-
let gcs = new GUIComponentScene({ app, components: [] })
3858

39-
const comp1 = new ButtonCollection({
40-
alignment: GUIComponentAlignment.TOP,
41-
btns: [
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) })]
45-
],
46-
isActive: true,
47-
})
59+
// Example 2: Multiple interacting components + dynamically adding components
4860

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-
})
61+
// let gcs = new GUIComponentScene({ app, components: [] })
62+
// const comp1 = new ButtonCollection({
63+
// alignment: GUIComponentAlignment.TOP,
64+
// btns: [
65+
// [new Button({ icon: "pin_0", ariaId: "0", x: 0, y: 0, onClick: () => basic.showNumber(0) }),
66+
// new Button({ icon: "pin_1", ariaId: "1", x: 20, y: 0, onClick: () => basic.showNumber(1) })],
67+
// [new Button({ icon: "green_tick", ariaId: "Done", x: 20, y: 20, onClick: () => gcs.makeComponentActive(1, false) })]
68+
// ],
69+
// isActive: true,
70+
// })
71+
72+
// const comp2 = new ButtonCollection({
73+
// alignment: GUIComponentAlignment.LEFT,
74+
// btns: [
75+
// [new Button({ icon: "thermometer", ariaId: "", x: 10, y: 0, onClick: () => basic.showNumber(0) })],
76+
// [new Button({ icon: "green_tick", ariaId: "", x: 10, y: 20, onClick: () => gcs.makeComponentActive(0, true) })]
77+
// ],
78+
// isActive: false,
79+
// isHidden: true,
80+
// colour: 2,
81+
// })
82+
83+
// gcs.addComponents([comp1, comp2])
84+
// app.pushScene(gcs)
5985

6086

61-
gcs.addComponents([comp1, comp2])
62-
app.pushScene(gcs)
6387

64-
// /**
65-
// * Grid of buttons in the centre of the screen,
66-
// * Press done to go somewhere else.
67-
// */
68-
// const comp3 = new ButtonCollection({
88+
// Example 3: Hetrogenous rows:
89+
// You can also dynamically add rows
90+
91+
// const buttonCollection = new ButtonCollection({
6992
// alignment: GUIComponentAlignment.TOP,
7093
// btns: [
7194
// [ // 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) }),
95+
// new Button({ icon: "accelerometer", ariaId: "0", x: 5, y: 5, onClick: () => basic.showNumber(0) }),
96+
// new Button({ icon: "pin_0", ariaId: "1", x: 25, y: 5, onClick: () => basic.showNumber(1) }),
97+
// new Button({ icon: "pin_1", ariaId: "2", x: 45, y: 5, onClick: () => basic.showNumber(2) }),
98+
// new Button({ icon: "pin_2", ariaId: "3", x: 65, y: 5, onClick: () => basic.showNumber(3) }),
7699
// ],
77100
// [ // Row 2:
78101
// 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) })
102+
// new Button({ icon: "microphone", ariaId: "5", x: 65, y: 30, onClick: () => basic.showNumber(5) })
103+
// ],
104+
// [ // Row 3:
105+
// new Button({ icon: "compass", ariaId: "6", x: 5, y: 55, onClick: () => basic.showNumber(6) }),
106+
// ],
107+
// [ // Row 4:
108+
// new Button({ icon: "right_spin", ariaId: "7", x: 5, y: 80, onClick: () => basic.showNumber(7) }),
109+
// new Button({ icon: "right_turn", ariaId: "8", x: 25, y: 80, onClick: () => basic.showNumber(8) }),
110+
// new Button({ icon: "green_tick", ariaId: "9", x: 65, y: 80, onClick: () => basic.showNumber(9)})
80111
// ],
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-
// // ],
89112
// ],
90113
// isActive: true,
91114
// isHidden: false,
92115
// xScaling: 1.1,
93-
// yScaling: 2,
94-
// colour: 6,
116+
// yScaling: 1.9,
117+
// colour: 3,
95118
// })
96119

97-
// const window = new GUIComponentScene({ app, components: [comp3] })
98-
// app.pushScene(window)
120+
// const gcs = new GUIComponentScene({ app, components: [buttonCollection] })
121+
// app.pushScene(gcs)
99122

100-
// const comp3 = new ButtonCollection({
123+
124+
125+
// Example 4: Component context: Linking a graph with a button:
126+
127+
// let count = 0;
128+
// const btnComponent = new ButtonCollection({
101129
// alignment: GUIComponentAlignment.TOP,
102130
// btns: [
103-
// [ // Row 1:
104-
// new Button({ icon: "thermometer", ariaId: "0", x: 5, y: 5, onClick: () => basic.showNumber(0) }),
105-
// new Button({ icon: "thermometer", ariaId: "1", x: 25, y: 5, onClick: () => basic.showNumber(1) }),
106-
// new Button({ icon: "thermometer", ariaId: "2", x: 45, y: 5, onClick: () => basic.showNumber(2) }),
107-
// new Button({ icon: "thermometer", ariaId: "3", x: 65, y: 5, onClick: () => basic.showNumber(3) }),
108-
// ],
109-
// [ // Row 2:
110-
// new Button({ icon: "thermometer", ariaId: "4", x: 5, y: 30, onClick: () => basic.showNumber(4) }),
111-
// new Button({ icon: "thermometer", ariaId: "5", x: 25, y: 30, onClick: () => basic.showNumber(4) }),
112-
// new Button({ icon: "thermometer", ariaId: "6", x: 45, y: 30, onClick: () => basic.showNumber(4) }),
113-
// new Button({ icon: "thermometer", ariaId: "7", x: 65, y: 30, onClick: () => basic.showNumber(4) }),
114-
// new Button({ icon: "thermometer", ariaId: "8", x: 85, y: 30, onClick: () => basic.showNumber(4) }),
115-
// ],
131+
// [new Button({
132+
// icon: "pin_0", ariaId: "+1", x: 10, y: 10, onClick: () => {
133+
// count += 1;
134+
// }
135+
// })],
116136
// ],
117137
// isActive: true,
118-
// isHidden: false,
119-
// xScaling: 1.4,
120-
// yScaling: 2,
121-
// colour: 6,
138+
// colour: 2,
139+
// xScaling: 0.5,
140+
// yScaling: 0.7,
141+
// xOffset: -10
122142
// })
123143

144+
// const graphComponent = new GUIGraph({
145+
// alignment: GUIComponentAlignment.BOT,
146+
// graphableFns: [new GraphableFunction((_) => count)],
147+
// isActive: false,
148+
// isHidden: false
149+
// })
150+
151+
// const gcs = new GUIComponentScene({ app, components: [btnComponent, graphComponent], colour: 11 })
152+
// app.pushScene(gcs)
153+
124154

125-
// // let count = 0;
126-
// // const comp1 = new ButtonCollection({
127-
// // alignment: GUIComponentAlignment.TOP,
128-
// // btns: [
129-
// // [new Button({
130-
// // icon: "pin_0", ariaId: "+1", x: 10, y: 10, onClick: () => {
131-
// // count += 1;
132-
// // }
133-
// // })],
134-
// // ],
135-
// // isActive: true,
136-
// // colour: 2,
137-
// // xScaling: 0.5,
138-
// // yScaling: 0.7,
139-
// // xOffset: -10
140-
// // })
141-
142-
// // const comp2 = new GUIGraph({
143-
// // alignment: GUIComponentAlignment.BOT,
144-
// // graphableFns: [new GraphableFunction((_) => count)],
145-
// // isActive: false,
146-
// // })
147-
148-
// // const window = new Window({ app, components: [comp1, comp2] })
149-
// // app.pushScene(window)
150-
151-
// // const txtBtnComp = new TextButtonCollection({
152-
// // alignment: GUIComponentAlignment.TOP_LEFT,
153-
// // isActive: true,
154-
// // textBtns: [
155-
// // new TextButton({ text: "Text Btn 1", callback: () => basic.showString("hi") }),
156-
// // new TextButton({ text: "Text Btn 2", callback: () => basic.showString("yo") })
157-
// // ],
158-
// // xOffset: 10,
159-
// // yScaling: 1.1,
160-
// // title: ""
161-
// // })
162-
// // const window = new Window({ app, components: [txtBtnComp] })
163-
// // app.pushScene(window)
164-
165-
// // const kbc = new KeyboardComponent({
166-
// // alignment: GUIComponentAlignment.CENTRE,
167-
// // isActive: true,
168-
// // xScaling: 1.8,
169-
// // yScaling: 1,
170-
// // next: () => {}
171-
// // });
172-
173-
// // const w = new Window({app, components: [kbc]})
174-
// // app.pushScene(w)
175-
176-
177-
178-
// const kb = new KeyboardMenu(app, () => { });
179-
// app.pushScene(kb)
155+
156+
157+
// Example 5: Text Buttons
158+
159+
// const txtBtnComp = new TextButtonCollection({
160+
// alignment: GUIComponentAlignment.TOP_LEFT,
161+
// isActive: true,
162+
// textBtns: [
163+
// new TextButton({ text: "Text Btn 1", callback: () => basic.showString("hi") }),
164+
// new TextButton({ text: "Text Btn 2", callback: () => basic.showString("yo") })
165+
// ],
166+
// xOffset: 10,
167+
// yOffset: 10,
168+
// yScaling: 1.1,
169+
// colour: 13,
170+
// title: "My title" // Try commenting this out.
171+
// })
172+
// const gcs = new GUIComponentScene({ app, components: [txtBtnComp], colour: 3 })
173+
// app.pushScene(gcs)
180174
}
181175

182176

0 commit comments

Comments
 (0)