mojo-ui-html: UI, HTML, CSS

GitHub
GitHub - rd4com/mojo-ui-html: Immediate mode GUI, HTML, CSS, Work i...
Immediate mode GUI, HTML, CSS, Work in progress, Mojo language - rd4com/mojo-ui-html
2 Replies
Jack Clayton
Jack ClaytonOP10mo ago
by @rd4com
rd4com
rd4com3d ago
Hello, i'm super happy to announce that: 🆕 The repo now has a nightly branch! It serves as the dev branch and is developped using mojo nightly :mojonightly: . Some changes: - Reference instead of UnsafePointer 🎉 Enjoy! ✅ Add imports, small fixes and MutableLifetime to various widgets 👍 mojo nightly 2024.8.1517 :mojonightly: Hello, just upgraded mojo-ui-html for 25.1.0 and added a few things! It has a mojoproject.toml and next step is to put it in the community repo. rd4com/mojo-ui-html Please make sure to check the todolist_example on top of the updated readme.md In addition to UI, keyboard can switch focus between widgets and "2D game". Widgets:Window, Collapsible, ScrollableArea, Button, ComboBox, Table, Toggle, Text, Slider, ColorSelector, DateSelector, TimeSelector, RawHtml, ..! Tested it by creating a music making app (stay tuned, daft punk lovers), feedbacks welcome, have fun!
🎮 Good start to learn mojo by creating a small videogame !
def main():
var GUI = Server()
GUI.request_interval_second = 0 #no Time.sleep between events
GUI.keyboard_handler = True
var pos = SIMD[DType.int32, 2](0) #[x, y]
while GUI.NeedNewRendition():
k = GUI.KeyDown()
if not k.isa[NoneType]():
# if k.isa[Int]():
# print(k[Int])# example: ord('a'), ..
if k.isa[String]():
var k_tmp = k[String]
if k_tmp == "ArrowUp": pos[1] -= 10
elif k_tmp == "ArrowDown": pos[1] += 10
elif k_tmp == "ArrowLeft": pos[0] -= 10
elif k_tmp == "ArrowRight": pos[0] += 10
GUI.RawHtml(String(
"<div style='position:absolute;",
"left:",pos[0],";",
"top:", pos[1],";"
"'>🚙</div>"
))
def main():
var GUI = Server()
GUI.request_interval_second = 0 #no Time.sleep between events
GUI.keyboard_handler = True
var pos = SIMD[DType.int32, 2](0) #[x, y]
while GUI.NeedNewRendition():
k = GUI.KeyDown()
if not k.isa[NoneType]():
# if k.isa[Int]():
# print(k[Int])# example: ord('a'), ..
if k.isa[String]():
var k_tmp = k[String]
if k_tmp == "ArrowUp": pos[1] -= 10
elif k_tmp == "ArrowDown": pos[1] += 10
elif k_tmp == "ArrowLeft": pos[0] -= 10
elif k_tmp == "ArrowRight": pos[0] += 10
GUI.RawHtml(String(
"<div style='position:absolute;",
"left:",pos[0],";",
"top:", pos[1],";"
"'>🚙</div>"
))
⬅️ ⬆️ ⬇️ ➡️ to move the 🚙 on the html page!

Did you find this page helpful?