Skip to content

Commit 56dd718

Browse files
KierPalinKierPalin
committed
Improved demo, improved ButtonCollection auto-scaling
1 parent 0c83bbf commit 56dd718

2 files changed

Lines changed: 62 additions & 60 deletions

File tree

‎guiComponents.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1239,16 +1239,14 @@ namespace microgui {
12391239
this.title = (opts.title != null) ? opts.title : "";
12401240
this.btns = (opts.btns != null) ? opts.btns : [];
12411241

1242-
const btnXOffset = (this.btns.length > 0) ? (this.bounds.width / (this.btns.length + 1)) : 0;
1243-
12441242
const xBorder = this.bounds.width * 0.15;
12451243
const yBorder = this.bounds.height * 0.05;
12461244
const ySpacing = (this.bounds.height - yBorder) / (this.btns.length + 1);
12471245

12481246
for (let i = 0; i < this.btns.length; i++) {
12491247
this.btns[i].setPosition(
12501248
xBorder + this.bounds.left + this.bounds.width,
1251-
(i + 1) * ySpacing
1249+
((i + 1) * ySpacing)
12521250
);
12531251
this.btns[i].setSelected(false)
12541252
}
@@ -1451,24 +1449,25 @@ namespace microgui {
14511449
if (opts.btns != null) {
14521450
this.btns = opts.btns;
14531451

1454-
const yBorder = this.bounds.height * 0.05
1455-
const xBorder = this.bounds.width * 0.05
1456-
const ySpacing: number = (this.bounds.height - yBorder) / (this.btns.length + 1);
1452+
const yBorder = this.bounds.height * 0.15
1453+
const xBorder = this.bounds.width * 0.15
1454+
const ySpacing: number = (this.bounds.height + yBorder) / (this.btns.length + 1);
14571455

14581456
// Adjust button x & y to be relative to this components window left & top:
14591457
for (let i = 0; i < this.btns.length; i++) {
14601458
const row = this.btns[i]
14611459

1462-
const xSpacing: number = (this.bounds.width - xBorder) / (row.length + 1);
1460+
const xSpacing: number = (this.bounds.width + xBorder) / (row.length + 1);
14631461
for (let j = 0; j < row.length; j++) {
14641462
const btn = row[j]
14651463
if (autoScaling && btn.xfrm.localPos.x == 0)
1466-
btn.xfrm.localPos.x = ((j + 1) * xSpacing) - xBorder
1464+
btn.xfrm.localPos.x = this.bounds.left + ((j + 1) * xSpacing) - (xBorder >> 1)
1465+
else
1466+
btn.xfrm.localPos.x = this.bounds.left + btn.xfrm.localPos.x + (btn.width >> 1)
14671467
if (autoScaling && btn.xfrm.localPos.y == 0)
1468-
btn.xfrm.localPos.y = ((i + 1) * ySpacing) - yBorder
1469-
1470-
btn.xfrm.localPos.x = this.bounds.left + btn.xfrm.localPos.x + (btn.width >> 1)
1471-
btn.xfrm.localPos.y = this.bounds.top + btn.xfrm.localPos.y + (btn.height >> 1)
1468+
btn.xfrm.localPos.y = this.bounds.top + ((i + 1) * ySpacing) - (yBorder >> 1)
1469+
else
1470+
btn.xfrm.localPos.y = this.bounds.top + btn.xfrm.localPos.y + (btn.height >> 1)
14721471
}
14731472
};
14741473

@@ -1671,4 +1670,5 @@ namespace microgui {
16711670
})
16721671
}
16731672
}
1674-
}
1673+
}
1674+

‎main.ts‎

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -123,40 +123,42 @@ namespace microcode {
123123
// app.pushScene(gcs)
124124

125125

126-
// const buttonCollection = new ButtonCollection({
127-
// alignment: GUIComponentAlignment.TOP,
128-
// btns: [
129-
// [ // Row 1:
130-
// new Button({ icon: "accelerometer", ariaId: "0", onClick: () => basic.showNumber(0) }),
131-
// new Button({ icon: "pin_0", ariaId: "1", onClick: () => basic.showNumber(1) }),
132-
// new Button({ icon: "pin_1", ariaId: "2", onClick: () => basic.showNumber(2) }),
133-
// new Button({ icon: "pin_2", ariaId: "3", onClick: () => basic.showNumber(3) }),
134-
// ],
135-
// [ // Row 2:
136-
// new Button({ icon: "thermometer", ariaId: "4", onClick: () => basic.showNumber(4) }),
137-
// new Button({ icon: "microphone", ariaId: "5", onClick: () => basic.showNumber(5) })
138-
// ],
139-
// [ // Row 3:
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) }),
126+
const buttonCollection = new ButtonCollection({
127+
alignment: GUIComponentAlignment.TOP,
128+
btns: [
129+
[ // Row 1:
130+
new Button({ icon: "accelerometer", ariaId: "0", onClick: () => basic.showNumber(0) }),
131+
new Button({ icon: "pin_0", ariaId: "1", onClick: () => basic.showNumber(1) }),
132+
new Button({ icon: "pin_1", ariaId: "2", onClick: () => basic.showNumber(2) }),
133+
new Button({ icon: "pin_2", ariaId: "3", onClick: () => basic.showNumber(3) }),
134+
],
135+
[ // Row 2:
136+
new Button({ icon: "thermometer", ariaId: "4", onClick: () => basic.showNumber(4) }),
137+
new Button({ icon: "microphone", ariaId: "5", onClick: () => basic.showNumber(5) })
138+
],
139+
[ // Row 3:
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+
new Button({ icon: "compass", ariaId: "6", onClick: () => basic.showNumber(6) }),
143145

144-
// ],
145-
// [ // Row 4:
146-
// new Button({ icon: "right_spin", ariaId: "7", onClick: () => basic.showNumber(7) }),
147-
// new Button({ icon: "right_turn", ariaId: "8", onClick: () => basic.showNumber(8) }),
148-
// new Button({ icon: "green_tick", ariaId: "9", onClick: () => basic.showNumber(9) })
149-
// ],
150-
// ],
151-
// isActive: true,
152-
// isHidden: false,
153-
// xScaling: 1.1,
154-
// yScaling: 1.9,
155-
// colour: 3,
156-
// })
146+
],
147+
[ // Row 4:
148+
new Button({ icon: "right_spin", ariaId: "7", onClick: () => basic.showNumber(7) }),
149+
new Button({ icon: "right_turn", ariaId: "8", onClick: () => basic.showNumber(8) }),
150+
new Button({ icon: "green_tick", ariaId: "9", onClick: () => basic.showNumber(9) })
151+
],
152+
],
153+
isActive: true,
154+
isHidden: false,
155+
xScaling: 1.1,
156+
yScaling: 1.7,
157+
colour: 3,
158+
})
157159

158-
// const gcs = new GUIComponentScene({ app, components: [buttonCollection] })
159-
// app.pushScene(gcs)
160+
const gcs = new GUIComponentScene({ app, components: [buttonCollection] })
161+
app.pushScene(gcs)
160162

161163

162164

@@ -214,21 +216,21 @@ namespace microcode {
214216

215217
// Example 6: RadioButtons
216218

217-
const rbc = new RadioButtonCollection({
218-
alignment: GUIComponentAlignment.TOP,
219-
btns: [
220-
new RadioButton({ text: "hi", onClick: () => { basic.showString("hi") } }),
221-
new RadioButton({ text: "hiya", onClick: () => { basic.showString("hiya") } }),
222-
new RadioButton({ text: "hello", onClick: () => { basic.showString("hello") } }),
223-
new RadioButton({ text: "hello", onClick: () => { basic.showString("hello") } })
224-
],
225-
isActive: true,
226-
yScaling: 1.1,
227-
// title: "The title",
228-
colour: 3,
229-
})
219+
// const rbc = new RadioButtonCollection({
220+
// alignment: GUIComponentAlignment.TOP,
221+
// btns: [
222+
// new RadioButton({ text: "hi", onClick: () => { basic.showString("hi") } }),
223+
// new RadioButton({ text: "hiya", onClick: () => { basic.showString("hiya") } }),
224+
// new RadioButton({ text: "hello", onClick: () => { basic.showString("hello") } }),
225+
// new RadioButton({ text: "hello", onClick: () => { basic.showString("hello") } })
226+
// ],
227+
// isActive: true,
228+
// yScaling: 1.1,
229+
// // title: "The title",
230+
// colour: 3,
231+
// })
230232

231-
const gcs = new GUIComponentScene({ app, components: [rbc] })
232-
app.pushScene(gcs)
233+
// const gcs = new GUIComponentScene({ app, components: [rbc] })
234+
// app.pushScene(gcs)
233235
}
234236

0 commit comments

Comments
 (0)