html5 gui
Monkey Forums/Monkey Programming/html5 gui
| ||
| Hey, I played around with html gui widgets and came up with this: https://dl.dropbox.com/u/2892658/dev/guiTest/MonkeyGame.html So far it's just buttons but it's very easy to expand that into checkboxes, radio buttons, text input, etc. Because I haven't fully grasped the prototyped nature of javascript I implemented an interface that uses unique ids(strings) as identifiers and is pretty much procedural. EDIT: You can find the git repo here: https://github.com/shinkiro1/htmlgui  |
| ||
| This looks pretty cool! So buttons 1 to 3 are actually HTML buttons linking to Monkey generated JS? |
| ||
| Exactly. And it took only around ~2 hours to set this up. I imagine for small gui apps/editors it would be enough. |
| ||
| Updated example: https://dl.dropbox.com/u/2892658/dev/guiTest/MonkeyGame.html If you are wondering, the grey background is just a normal monkey canvas. EDIT: Updated 1st post. Now in a git repo. |
| ||
| Now also includes a Listbox and a Combobox. Here is the complete command list for now: [monkeycode] 'Creation Function CreateButton:Void(id:String, text:String, x:Int, y:Int, w:Int, h:Int = 20, type:String = "button") = "h5.CreateButton" Function CreateCombobox:Void(id:String, x:Int, y:Int, w:Int, h:Int = 20) = "h5.CreateCombobox" Function CreateListbox:Void(id:String, x:Int, y:Int, w:Int, h:Int = 20) = "h5.CreateListbox" Function CreateTextfield:Void(id:String, x:Int, y:Int, w:Int, h:Int = 16, type:String = "text") = "h5.CreateTextfield" Function CreateLabel:Void(id:String, text:String, x:Int, y:Int) = "h5.CreateLabel" Function CreateSlider:Void(id:String, x:Int, y:Int, w:Int, h:Int) = "h5.CreateSlider" 'Gadget Modification Function SetGadgetPosition:Void(id:String, x:Int, y:Int) = "h5.SetGadgetPosition" Function MoveGadget:Void(id:String, x:Int, y:Int) = "h5.MoveGadget" Function ResizeGadget:Void(id:String, w:Int, h:Int) = "h5.ResizeGadget" Function RenameGadget:Void(id:String, text:String) = "h5.RenameGadget" Function RemoveGadget:Void(id:String) = "h5.RemoveGadget" Function RemoveGadgetItem:Void(fromId:String, value:String) = "h5.RemoveGadgetItem" Function AddGadgetItem:Void(toId:String, value:String) = "h5.AddGadgetItem" Function SetGadgetValue:Void(id:String, value:String) = "h5.SetGadgetValue" 'Enable & Disable Function DisableGadget:Void(id:String) = "h5.DisableGadget" Function EnableGadget:Void(id:String) = "h5.EnableGadget" Function GadgetIsEnabled:Bool(id:String) = "h5.GadgetIsEnabled" 'Visibility Function HideGadget:Void(id:String) = "h5.HideGadget" Function ShowGadget:Void(id:String) = "h5.ShowGadget" Function GadgetIsVisible:Bool(id:String) = "h5.GadgetIsVisible" 'Getter Function GadgetX:Int(id:String) = "h5.GadgetX" Function GadgetY:Int(id:String) = "h5.GadgetY" Function GadgetWidth:Int(id:String) = "h5.GadgetWidth" Function GadgetHeight:Int(id:String) = "h5.GadgetHeight" Function GadgetValue:String(id:String) = "h5.GadgetValue" Function ButtonStatus:Bool(id:String) = "h5.ButtonStatus" Function SelectedGadgetItem:String(id:String) = "h5.SelectedGadgetItem" Function SelectedGadgetItems:String[](id:String) = "h5.SelectedGadgetItems" 'Other Function Notify:Void(text:String) = "Notify" Function PollEvents:h5Event[]() = "PollEvents" [/monkeycode] Next are labels and sliders. |
| ||
| Great work :) |
| ||
| Thanks CopperCircle. I also updated the example (sliders, labels and added some mojo drawing in the back) https://dl.dropbox.com/u/2892658/dev/guiTest/MonkeyGame.html I am thinking about using jQuery to implement a color picker. Something else I want to implement is a text area (maybe even with monkey syntax highlighting if there are plugins). Anybody having specific requirements what you want to see? |
| ||
| yes... is it possible to place the gadgets into the canvas? into the game? |
| ||
| Yes it is. Actually the whole grey background in the example is a normal monkey canvas. EDIT: Okay, just tested in Firefox and it seems Chrome and Safari display things differently than Firefox. FF also doesn't display the slider (because it doesn't support it). Has somebody tested on IE and Opera? |
| ||
| very nice! her a test on firefox 19.0.2: the combo box (option) is working, but the list box (item) causes an error: "selected in undefined" |
| ||
| Seems to work on IE10, but the checkboxes and radio buttons are drawn very large, also selecting an item in the listbox gives a MonkeyError (line 107) Unable to get property length of null |
   |