Mojo开发的简单的用户界面mojo-ui-html GUI、HTML、CSS

mojo_hub

Mojo开发的用户界面，根据values的内容生成Dom

开源地址：https://github.com/rd4com/mojo-ui-html

详细说明：

服务器开启127.0.0.1:8000

并不是一个网络框架，而是一个简单的用户界面
根据values的内容生成Dom

example: "<input value='" + value + "'/>"
UNSAFE because value content can generate/modify html or javascript.

如果widget id是一个值的地址，两个相同值的输入widget会触发两次（需要更多思考解决方案）

默认阻塞循环

默认情况下，如果来自“127.0.0.1”以外的请求，则退出循环

should_re_render()对于用户发起的触发！
一旦发送响应，需要等待下一个请求（阻塞套接字）

主要演示：（`theme.css`默认）

简单的 simd 计数器：`theme_neutral.css`

from ui import *
from math import iota, sqrt
def main():
    GUI = Server[base_theme="theme_neutral.css"]()
    var counter = 0
    while GUI.Event():
        var tmp = iota[DType.float16,SIMD[DType.float16].size](counter)
        GUI.Text(tmp)
        GUI.Text(sqrt(tmp))
        
        GUI.Slider("Counter",counter)
        if GUI.Button("increment"): counter+=1
        if GUI.Button("decrement"): counter-=1

主要演示代码：

from ui import *

def main():
  #⚠️ see readme.md, there are challenges and limitations!
  val = 50
  txt = String("Naïve UTF8 🥳")
  boolval = True
  multichoicevalue = String("First")
  colorvalue = String("#1C71D8")
  datevalue = String("2024-01-01")

  GUI = Server()        
  
  POS = Position(1,1)
  POS2 = Position(1,350)
  POS3 = Position(32,512)
  POS4 = Position(512,16)

  combovalues = DynamicVector[String]()
  for i in range(5): combovalues.push_back("Value "+str(i))
  selection = 1

  while GUI.Event():
      with GUI.Window("Debug window",POS):
          GUI.Text("Hello world 🔥")
          if GUI.Button("Button"): val = 50 
          if GUI.Slider("Slider",val): 
              print("Changed")
          GUI.TextInput("Input",txt) #⚠️ ```maxlength='32'``` attribute by default.
          GUI.ComboBox("ComboBox",combovalues,selection)
          GUI.Toggle(boolval,"Checkbox")

      with GUI.Window("Fun features",POS3):
          GUI.Text(GUI.Circle.Green + " Green circle")
          GUI.Text(GUI.Square.Blue + " Blue square")
          GUI.Text(GUI.Accessibility.Info + " Some icons")
          GUI.Text(GUI.Bold("Bold() ")+GUI.Highlight("Highlight()"))
          GUI.Text(GUI.Small("small") + " text")

          with GUI.Collapsible("Collapsible()"):
              GUI.Text("Content")

      with GUI.Window("More widgets",POS4):
          GUI.TextChoice("Multi Choice",multichoicevalue,"First","Second")
          GUI.Ticker("⬅️♾️ cycling left in a 128 pixels area",width=128)

          with GUI.Table():
              for r in range(3):
                  with GUI.Row():
                      for c in range(3): 
                          with GUI.Cell():
                              GUI.Text(str(r) + "," + str(c))
  
          with GUI.ScrollableArea(123):
              GUI.Text(GUI.Bold("ScrollableArea()"))
              GUI.ColorSelector(colorvalue)
              GUI.NewLine()
              GUI.DateSelector(datevalue) #⚠️ format is unclear (see readme.md)
              for i in range(10): GUI.Text(str(i))
      
      with GUI.Window("Values",POS2,CSSTitle="background-color:"+colorvalue): 
          GUI.Text(txt)
          
          if selection < len(combovalues):           #manual bound check for now
              GUI.Text(combovalues[selection])
          
          with GUI.Tag("div","background-color:"+colorvalue):
              GUI.Text(colorvalue)
          
          GUI.Text(datevalue)
          
          with GUI.Tag("div","padding:0px;margin:0px;font-size:100"):
              GUI.Text("❤️‍🔥")
          
          GUI.Button("ok",CSS="font-size:32;background-color:"+colorvalue)