M
Modular•10mo ago
Jack Clayton

mojo-ui-html: UI, HTML, CSS

https://github.com/rd4com/mojo-ui-html
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 ClaytonOP•10mo ago
by @rd4com
rd4com
rd4com•3d 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?