Skip to content

Commit 066209e

Browse files
FuncanFuncan
authored
Add badge background and postion screen and leds (#2)
Not the cleanest solution and I am not proud of this one but it works :D It uses the position values from the simulator for screen and leds.
2 parents 89938ac + d054421 commit 066209e

File tree

3 files changed

+142
-40
lines changed

3 files changed

+142
-40
lines changed

‎background.png‎

346 KB
Loading

‎index.html‎

Lines changed: 100 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -33,58 +33,140 @@
3333
}
3434

3535
@keyframes spin {
36-
to {
37-
transform: rotate(360deg);
36+
to {
37+
transform: rotate(360deg);
38+
}
3839
}
39-
}
40-
</style>
40+
41+
#screen {
42+
position: absolute;
43+
top: 237px;
44+
left: 242px;
45+
}
46+
47+
#led0 {
48+
margin: -10px -10px;
49+
position: absolute;
50+
left: 443px;
51+
top: 90px;
52+
}
53+
#led1 {
54+
position: absolute;
55+
margin: -10px -10px;
56+
left: 573px;
57+
top: 163px;
58+
}
59+
#led2{
60+
position: absolute;
61+
margin: -10px -10px;
62+
left: 646px;
63+
top: 293px;
64+
}
65+
#led3{
66+
position: absolute;
67+
margin: -10px -10px;
68+
left: 646px;
69+
top: 440px;
70+
}
71+
#led4{
72+
position: absolute;
73+
margin: -10px -10px;
74+
left: 573px;
75+
top: 566px;
76+
}
77+
#led5{
78+
position: absolute;
79+
margin: -10px -10px;
80+
left: 443px;
81+
top: 640px;
82+
}
83+
84+
#led6{
85+
position: absolute;
86+
margin: -10px -10px;
87+
left: 296px;
88+
top: 640px;
89+
}
90+
#led7{
91+
position: absolute;
92+
margin: -10px -10px;
93+
left: 173px;
94+
top: 566px;
95+
}
96+
#led8{
97+
position: absolute;
98+
margin: -10px -10px;
99+
left: 93px;
100+
top: 440px;
101+
}
102+
#led9{
103+
position: absolute;
104+
margin: -10px -10px;
105+
left: 93px;
106+
top: 293px;
107+
}
108+
#led10{
109+
position: absolute;
110+
margin: -10px -10px;
111+
left: 173px;
112+
top: 163px;
113+
}
114+
#led11{
115+
margin: -10px -10px;
116+
position: absolute;
117+
left: 296px;
118+
top: 90px;
119+
}
120+
</style>
41121
</head>
42122

43123
<body>
44124
<dialog id="loading">
45125
<h1>Loading...</h1>
46126
</dialog>
47127

48-
<section class="pyscript">
128+
129+
<section class="pyscript" style="position: relative">
130+
<div id="badge"><img src="background.png"></img></div>
49131
<div style="display: flex; flex-direction: column; gap: 1em; width: 600px;">
50132
<div id="led0">
51-
<canvas id="led0" width=20 height=20></canvas>
133+
<canvas width=20 height=20></canvas>
52134
</div>
53135
<div id="led1">
54-
<canvas id="led1" width=20 height=20></canvas>
136+
<canvas width=20 height=20></canvas>
55137
</div>
56138
<div id="led2">
57-
<canvas id="led2" width=20 height=20></canvas>
139+
<canvas width=20 height=20></canvas>
58140
</div>
59141
<div id="led3">
60-
<canvas id="led3" width=20 height=20></canvas>
142+
<canvas width=20 height=20></canvas>
61143
</div>
62144
<div id="led4">
63-
<canvas id="led4" width=20 height=20></canvas>
145+
<canvas width=20 height=20></canvas>
64146
</div>
65147
<div id="led5">
66-
<canvas id="led5" width=20 height=20></canvas>
148+
<canvas width=20 height=20></canvas>
67149
</div>
68150
<div id="led6">
69-
<canvas id="led6" width=20 height=20></canvas>
151+
<canvas width=20 height=20></canvas>
70152
</div>
71153
<div id="led7">
72-
<canvas id="led7" width=20 height=20></canvas>
154+
<canvas width=20 height=20></canvas>
73155
</div>
74156
<div id="led8">
75-
<canvas id="led8" width=20 height=20></canvas>
157+
<canvas width=20 height=20></canvas>
76158
</div>
77159
<div id="led9">
78-
<canvas id="led9" width=20 height=20></canvas>
160+
<canvas width=20 height=20></canvas>
79161
</div>
80162
<div id="led10">
81-
<canvas id="led10" width=20 height=20></canvas>
163+
<canvas width=20 height=20></canvas>
82164
</div>
83165
<div id="led11">
84-
<canvas id="led11" width=20 height=20></canvas>
166+
<canvas width=20 height=20></canvas>
85167
</div>
86168
</div>
87-
169+
88170
<div id="buttons">
89171
<button id="A" py-click="button_handler">Button A</button>
90172
<button id="B" py-click="button_handler">Button B</button>

‎pyscript_main.py‎

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,30 @@ def const(x):
2626
sys.implementation.name = "micropython"
2727
print("Implementation is now: " + sys.implementation.name)
2828

29+
2930
def patch_filesystem():
3031
# New apps are downloaded to /apps and /backgrounds
3132
# It's hardcoded. We need to make sure files out of those
3233
# directories are importable.
3334
import os
35+
3436
os.mkdir("/apps")
3537
os.symlink("/apps", "/home/pyodide/apps")
3638

3739
os.mkdir("/backgrounds")
3840
os.symlink("/backgrounds", "/home/pyodide/backgrounds")
3941

42+
4043
async def monkey_patch_http():
4144
# requests doesn't work in pyscript without this voodoo
4245

4346
import micropip
47+
4448
await micropip.install("pyodide-http")
4549
await micropip.install("requests")
4650

4751
import pyodide_http
52+
4853
pyodide_http.patch_all()
4954

5055
import requests
@@ -67,8 +72,10 @@ def get(url, *args, **kwargs):
6772

6873
def monkey_patch_sys():
6974
if not hasattr(sys, "print_exception"):
75+
7076
def print_exception(e, file):
7177
print("Exception:", e, file=file)
78+
7279
sys.print_exception = print_exception
7380

7481

@@ -152,7 +159,7 @@ class FakeCtx:
152159
def __init__(self):
153160
self.width = 240
154161
self.height = 240
155-
self.scale = 3 # The number of web pixels per "display" pixel
162+
self.scale = 1 # The number of web pixels per "display" pixel
156163
self.border = 10
157164

158165
self.font_size = 8
@@ -162,7 +169,7 @@ def __init__(self):
162169
self.RIGHT = 3
163170
self.MIDDLE = 4
164171

165-
self.color = "rgb(0, 255, 0)" # FIXME: find what the default color is
172+
self.color = "rgb(0, 255, 0)" # FIXME: find what the default color is
166173
self.position = (0, 0)
167174
self._translate = (0, 0)
168175
self._saves = []
@@ -173,9 +180,9 @@ def __init__(self):
173180

174181
self._ctx.beginPath()
175182
self._ctx.arc(
176-
(3 * self.width + 2 * self.border) / 2,
177-
(3 * self.height + 2 * self.border) / 2,
178-
(3 * self.width) / 2,
183+
(self.scale * self.width + 2 * self.border) / 2,
184+
(self.scale * self.height + 2 * self.border) / 2,
185+
(self.scale * self.width) / 2,
179186
0,
180187
2 * math.pi,
181188
)
@@ -213,11 +220,11 @@ def restore(self):
213220
if len(self._saves) > 0:
214221
return self._saves.pop()
215222
else:
216-
# print("Warning: restore() called with no matching save()")
223+
# print("Warning: restore() called with no matching save()")
217224
return self
218225

219226
def move_to(self, x, y):
220-
# print("ctx.move_to(%s, %s)" % (x, y))
227+
# print("ctx.move_to(%s, %s)" % (x, y))
221228
new = self.clone()
222229
new.position = (x, y)
223230
return new
@@ -261,12 +268,19 @@ def image(self, path, x, y, w, h):
261268
img.src = src
262269

263270
ctx = self._ctx
264-
ctx.drawImage(img, self._x_to_web(x), self._y_to_web(y), w * self.scale, h * self.scale)
271+
ctx.drawImage(
272+
img, self._x_to_web(x), self._y_to_web(y), w * self.scale, h * self.scale
273+
)
265274
return self
266275

267276
def linear_gradient(self, x0, y0, x1, y1):
268277
ctx = self._ctx
269-
gradient = ctx.createLinearGradient(self._x_to_web(x0), self._y_to_web(y0), self._x_to_web(x1), self._y_to_web(y1))
278+
gradient = ctx.createLinearGradient(
279+
self._x_to_web(x0),
280+
self._y_to_web(y0),
281+
self._x_to_web(x1),
282+
self._y_to_web(y1),
283+
)
270284
self._gradient = gradient
271285
return self
272286

@@ -285,7 +299,7 @@ def fill(self):
285299
return self
286300

287301
def text_width(self, text):
288-
# print("Not properly implemented: FakeCtx: text_width(%s)" % text)
302+
# print("Not properly implemented: FakeCtx: text_width(%s)" % text)
289303
return len(text) * 8
290304

291305
def text(self, text):
@@ -294,7 +308,7 @@ def text(self, text):
294308
ctx.fillStyle = self.color
295309
ctx.font = f"{8 * self.scale}px sans-serif"
296310
x, y = self.position
297-
# print("Drawing text at", self._x_to_web(x), self._y_to_web(y), "in color", self.color)
311+
# print("Drawing text at", self._x_to_web(x), self._y_to_web(y), "in color", self.color)
298312
ctx.fillText(text, self._x_to_web(x), self._y_to_web(y))
299313
ctx.restore()
300314

@@ -325,7 +339,7 @@ def get_ctx():
325339

326340
@staticmethod
327341
def end_frame(ctx):
328-
# print("Not implemented: FakeDisplay: end_frame()")
342+
# print("Not implemented: FakeDisplay: end_frame()")
329343
pass
330344

331345
sys.modules["display"] = FakeDisplay
@@ -355,6 +369,7 @@ class FakeSPI:
355369
pass
356370

357371
from types import ModuleType
372+
358373
m = ModuleType("machine")
359374
sys.modules[m.__name__] = m
360375

@@ -365,6 +380,7 @@ class FakeSPI:
365380

366381
def monkey_patch_tildagon():
367382
from types import ModuleType
383+
368384
m = ModuleType("tildagon")
369385
sys.modules[m.__name__] = m
370386

@@ -388,6 +404,7 @@ def __call__(self, *args, **kwargs):
388404

389405
def monkey_patch_ePin():
390406
from types import ModuleType
407+
391408
m = ModuleType("egpio")
392409
sys.modules[m.__name__] = m
393410

@@ -449,7 +466,7 @@ def __setitem__(self, item, value):
449466
if item > self.length:
450467
print("FakeNeoPixel: Ignoring setitem out of range", item)
451468
else:
452-
self.rgb[item-1] = value
469+
self.rgb[item - 1] = value
453470

454471
class FakeNeoPixelModule:
455472
NeoPixel = FakeNeoPixel
@@ -479,8 +496,8 @@ async def badge():
479496
ctx = canvas._js.getContext("2d")
480497

481498
# Set the canvas size
482-
width = 3 * resolution_x + 2 * border
483-
height = 3 * resolution_y + 2 * border
499+
width = 1 * resolution_x + 2 * border
500+
height = 1 * resolution_y + 2 * border
484501

485502
canvas.style["width"] = f"{width}px"
486503
canvas.style["height"] = f"{height}px"
@@ -491,9 +508,9 @@ async def badge():
491508
ctx.fillStyle = "rgb(0 100 0)"
492509
ctx.beginPath()
493510
ctx.arc(
494-
(3 * resolution_x + 2 * border) / 2,
495-
(3 * resolution_y + 2 * border) / 2,
496-
(3 * resolution_x + 2 * border) / 2,
511+
(1 * resolution_x + 2 * border) / 2,
512+
(1 * resolution_y + 2 * border) / 2,
513+
(1 * resolution_x + 2 * border) / 2,
497514
0,
498515
2 * math.pi,
499516
)
@@ -504,9 +521,9 @@ async def badge():
504521
ctx.fillStyle = "rgb(0 0 0)"
505522
ctx.beginPath()
506523
ctx.arc(
507-
(3 * resolution_x + 2 * border) / 2,
508-
(3 * resolution_y + 2 * border) / 2,
509-
(3 * resolution_x) / 2,
524+
(1 * resolution_x + 2 * border) / 2,
525+
(1 * resolution_y + 2 * border) / 2,
526+
(1 * resolution_x) / 2,
510527
0,
511528
2 * math.pi,
512529
)
@@ -525,15 +542,17 @@ async def button_handler(event):
525542
from system.eventbus import eventbus
526543
from frontboards.twentyfour import BUTTONS
527544
from events.input import ButtonDownEvent, ButtonUpEvent
545+
528546
print("Emitting ButtonDownEvent for button", BUTTONS[event.target.id])
529547
await eventbus.emit_async(ButtonDownEvent(button=BUTTONS[event.target.id]))
530548

549+
531550
@create_proxy
532551
async def on_key_down(event):
533-
534552
from system.eventbus import eventbus
535553
from frontboards.twentyfour import BUTTONS
536554
from events.input import ButtonDownEvent, ButtonUpEvent
555+
537556
match event.key:
538557
case "ArrowUp":
539558
print("Emitting ButtonDownEvent for button A")
@@ -575,4 +594,5 @@ async def start_tildagon_os():
575594
async def main():
576595
_ = await asyncio.gather(badge())
577596

597+
578598
asyncio.ensure_future(main())

0 commit comments

Comments
 (0)