Request – Native GUI module

[degacParticipant]

Hi

this is the point: to port my current applications (so many!) in Monkey2 I need a native OS-GUI support.
What I’m looking for is a sort of MaxGUI for Monkey2
– small footprint of the final applications
– easy to program (no problem if it’s OOP or not)
– easy to use (for the final user – they fear if something is different in the UX!!!)
– that implements/allows to be ‘extended’ (like the ProxyGadgets in MaxGUI)
– integrated with the OS (copy, paste, drag & drop etc)

At the moment I’m only on Windows (XP/Vista/7/8/10) – so other systems are not needed.

I would pay for a module like this between 20/30 USD.

ps: I don’t know if this is the right place to post this ‘announce’ – and it’s open to anyone.

[codifiesParticipant]

Am I right in thinking that GTK either does or can use “native” GUI widgets in Windows ?

although something like GTK would rule out web targets, it would at least work on the main three of Linux, MacOS and Windows….

[degacParticipant]

Ok, thanks.
But does this mean the final user need to install something else (GTK lib) or any other dependencies?

In any case a ‘universal’ GUI is impossible: it should be usable on mobile devices (phone and tablet), web, smart-tv, desktop. Too much confusion.
I think it’s better having different (and with high performance) solutions for any single target/UX.

[codifiesParticipant]

html5 is about the only truly “universal” GUI, and that *does* work nearly everywhere… you might want to look at the litehtml module…

[Richard BetsonParticipant]

you might want to look at the litehtml module

Are there any examples on how to use the litehtml module?

I would like to implement an HtmlView like mojox does. Does mojox use litehtml for it’s HtmlView?

[codifiesParticipant]

I think it must do – if for example if you grep the build directory of the calculator banana you’ll for litehtml, i was looking for an example myself as documentation is so much more than api docs…

If i get chance i’ll nail a simple example together if only so i can grok it myself…

[Richard BetsonParticipant]

Let me know what you come up with. I’ll try to have a look at how mojox implements it’s HtmlView.

Maybe Mark is out there lurking and has a tip or two.

[CopperCircleParticipant]

I had a little play with litehtml awhile ago and got a mojox view that loaded local html with images, just add a html file and images to assets and you can also hook in to hyperlinks being pressed:

Monkey

#Import "assets/about.html" #Import "assets/RedbrushAlpha.png" #Import "<std>" #Import "<mojo>" #Import "<mojox>" Using std.. Using mojo.. Using mojox.. Class MyWindow Extends Window Field htmlView:CustomHtmlView Method New() Super.New( "HTML Test",800,600,WindowFlags.Resizable ) htmlView=New CustomHtmlView htmlView.Go( "asset::about.html" ) htmlView.ScrollBarsVisible=False 'htmlView.AnchorClicked("test") Local dockingView:=New ScrollableView dockingView.Style.BackgroundColor=Color.White dockingView.AddView( htmlView,"top", "100%" ) ContentView=dockingView End Method End Class Class CustomHtmlView Extends ScrollableView Field AnchorClicked:Void( url:String ) Method New() Layout="fill" Style=GetStyle( "HtmlView" ) _context=New litehtml.context _context.load_master_stylesheet( stringio.LoadString( "theme::htmlview_master_css.css" ) ) _container=New document_container( Self ) _baseUrl=filesystem.CurrentDir() AnchorClicked=Go End Property BaseUrl:String() Return _baseUrl Setter( baseUrl:String ) If Not baseUrl.EndsWith( "/" ) baseUrl+="/" _baseUrl=baseUrl End Property HtmlSource:String() Return _source Setter( htmlSource:String ) _source=htmlSource _document=New litehtml.document( _source,_container,_context ) _layoutSize=Null _renderSize=Null RequestRender() End Method Go( url:String ) Print "GO:"+url If url.Contains( "#" ) Return Endif Local root:=ExtractRootDir( url ) If root="http://" Or root="https://" #If __DESKTOP_TARGET__ requesters.OpenUrl( url ) #Endif Return Endif If Not root url=BaseUrl+url Endif Local src:=stringio.LoadString( url ) If ExtractExt( url )=".md" src=hoedown.MarkdownToHtml( src ) Local wrapper:=stringio.LoadString( "theme::markdown_wrapper.html" ) src=wrapper.Replace( "${CONTENT}",src ) End BaseUrl=ExtractDir( url ) HtmlSource=src End Method Private Field _context:litehtml.context Field _container:litehtml.document_container Field _anchorClicked:String Field _baseUrl:String Field _source:String Field _document:litehtml.document Field _layoutSize:Vec2i Field _renderSize:Vec2i Method OnThemeChanged() Override _document=New litehtml.document( _source,_container,_context ) _layoutSize=Null _renderSize=Null End Method Method OnMeasureContent2:Vec2i( size:Vec2i ) Override If Not _document Return New Vec2i( 0,0 ) If size.x=_layoutSize.x Return _renderSize _layoutSize=size _document.render( size.x ) _renderSize=New Vec2i( _document.width(),_document.height() ) Return _renderSize End Method Method OnRenderContent( canvas:Canvas ) Override If Not _document Return Local clip:litehtml.position clip.x=canvas.Scissor.X clip.y=canvas.Scissor.Y clip.width=canvas.Scissor.Width clip.height=canvas.Scissor.Height _document.draw( canvas,0,0,Varptr clip ) End Method Method OnContentMouseEvent( event:MouseEvent ) Override If Not _document Return Local x:=event.Location.X Local y:=event.Location.Y _anchorClicked="" Select event.Type Case EventType.MouseDown _document.on_lbutton_down( x,y,x,y ) Case EventType.MouseMove _document.on_mouse_over( x,y,x,y ) Case EventType.MouseUp _document.on_lbutton_up( x,y,x,y ) _document.on_mouse_leave() Case EventType.MouseWheel Return End event.Eat() RequestRender() 'Not ideal, but necessary for link highlighting... If _anchorClicked AnchorClicked( _anchorClicked ) End Method End Class Class document_container Extends litehtml.document_container Field _view:CustomHtmlView Method ToFont:Font( hfont:Object ) Return Cast<Font>( hfont ) End Method Method ToCanvas:Canvas( hdc:Object ) Return Cast<Canvas>( hdc ) End Method Method GetImage:Image( src:String ) Return App.Theme.OpenImage( src ) End Method Method New( view:CustomHtmlView ) _view=view End Method Method set_color( canvas:Canvas,color:litehtml.web_color ) canvas.Color=New Color( color.red/255.0,color.green/255.0,color.blue/255.0,1 ) End Method Method make_url:String( href:String ) Return _view._baseUrl+href End Method Method create_font:Object( faceName:String,size:Int,weight:Int,style:litehtml.font_style,decoration:UInt,fm:litehtml.font_metrics Ptr ) Override Local face:="DejaVuSans" If faceName.Contains( "monospace" ) face+="Mono" Local font:=App.Theme.OpenFont( face,size ) Local height:=font.Height fm->height=height fm->ascent=height fm->descent=0 fm->x_height=height fm->draw_spaces=True Return font End Method Method delete_font( font:Object ) Override End Method Method text_width:Int( text:String,hfont:Object ) Override Local font:=ToFont( hfont ) Return font.TextWidth( text ) End Method Method draw_text( hdc:Object,text:String,hfont:Object,color:litehtml.web_color Ptr,pos:litehtml.position Ptr ) Override Local canvas:=ToCanvas( hdc ) Local font:=ToFont( hfont ) canvas.Font=font set_color( canvas,color[0] ) canvas.DrawText( text,pos->x,pos->y ) Return End Method Method pt_to_px:Int( pt:Int ) Override Return 0 End Method Method get_default_font_size:Int() Override Return 16 * App.Theme.Scale.y End Method Method get_default_font_name:String() Override Return "DejaVuSans" End Method Method draw_list_marker( hdc:Object,marker:litehtml.list_marker Ptr ) Override If marker->marker_type=litehtml.list_style_type_none Return Local canvas:=ToCanvas( hdc ) set_color( canvas,marker->color ) Select marker->marker_type Case litehtml.list_style_type_disc canvas.DrawOval( marker->pos.x,marker->pos.y,marker->pos.width,marker->pos.height ) Default canvas.DrawRect( marker->pos.x,marker->pos.y,marker->pos.width,marker->pos.height ) End Select End Method Method load_image( src:String,baseurl:String,redraw_on_ready:Bool ) Override GetImage( src ) End Method Method get_image_size( src:String,baseurl:String,sz:litehtml.size Ptr ) Override Local image:=GetImage( src ) If Not image Return sz->width=image.Width sz->height=image.Height End Method Method draw_background( hdc:Object,img_src:String,img_baseurl:String,bg:litehtml.background_paint Ptr ) Override Local canvas:=ToCanvas( hdc ) Local image:=GetImage( img_src ) If image canvas.Color=Color.White canvas.DrawImage( image,bg->position_x,bg->position_y ) Return Endif set_color( canvas,bg->color ) ' canvas.DrawRect( bg->clip_box.x,bg->clip_box.y,bg->clip_box.width,bg->clip_box.height ) canvas.DrawRect( bg->border_box.x,bg->border_box.y,bg->border_box.width,bg->border_box.height ) End Method Method draw_border( canvas:Canvas,border:litehtml.border,x:Int,y:Int,w:Int,h:Int ) If border.style<>litehtml.border_style_solid Or border.width<1 Return set_color( canvas,border.color ) canvas.DrawRect( x,y,w,h ) End Method Method draw_borders( hdc:Object,borders:litehtml.borders Ptr,pos:litehtml.position Ptr,root:Bool ) Override Local canvas:=ToCanvas( hdc ) Local x:=pos->x,y:=pos->y Local w:=pos->width,h:=pos->height draw_border( canvas,borders->left,x,y,1,h ) draw_border( canvas,borders->top,x,y,w,1 ) draw_border( canvas,borders->right,x+w-1,y,1,h ) draw_border( canvas,borders->bottom,x,y+h-1,w,1 ) End Method Method set_caption( caption:String ) Override End Method Method set_base_url( baseurl:String ) Override End Method Method on_anchor_click( url:String ) Override _view._anchorClicked=url End Method Method set_cursor( cursor:String ) Override End Method Method import_css:String( url:String,baseurl:String ) Override Local css:=stringio.LoadString( make_url( url ) ) Return css End Method Method set_clip( pos:litehtml.position Ptr,radiuses:litehtml.border_radiuses Ptr ) Override End Method Method del_clip() Override End Method Method get_client_rect( client:litehtml.position Ptr ) Override ' If _view._rendering Print "get client rect" client->x=0 client->y=0 client->width=_view._layoutSize.x client->height=_view._layoutSize.y End Method Method get_media_features( media:litehtml.media_features Ptr ) Override ' If _view._rendering Print "get media features" media->type=litehtml.media_type_screen media->width=_view._layoutSize.x media->height=_view._layoutSize.y media->device_width=1920 media->device_height=1080 media->color=8 media->color_index=0 media->monochrome=0 media->resolution=96 End Method Method get_language:String() Override Return "" End Method Method get_culture:String() Override Return "" End Method End Class Function Main() New AppInstance New MyWindow App.Run() End Function

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422

#Import "assets/about.html" #Import "assets/RedbrushAlpha.png"   #Import "<std>" #Import "<mojo>" #Import "<mojox>"   Using std.. Using mojo.. Using mojox..   Class MyWindow Extends Window Field htmlView:CustomHtmlView   Method New() Super.New( "HTML Test",800,600,WindowFlags.Resizable ) htmlView=New CustomHtmlView htmlView.Go( "asset::about.html" ) htmlView.ScrollBarsVisible=False 'htmlView.AnchorClicked("test") Local dockingView:=New ScrollableView dockingView.Style.BackgroundColor=Color.White dockingView.AddView( htmlView,"top", "100%" ) ContentView=dockingView End Method End Class     Class CustomHtmlView Extends ScrollableView Field AnchorClicked:Void( url:String )   Method New() Layout="fill" Style=GetStyle( "HtmlView" )   _context=New litehtml.context _context.load_master_stylesheet( stringio.LoadString( "theme::htmlview_master_css.css" ) )   _container=New document_container( Self ) _baseUrl=filesystem.CurrentDir() AnchorClicked=Go End   Property BaseUrl:String() Return _baseUrl Setter( baseUrl:String ) If Not baseUrl.EndsWith( "/" ) baseUrl+="/" _baseUrl=baseUrl End   Property HtmlSource:String() Return _source Setter( htmlSource:String ) _source=htmlSource _document=New litehtml.document( _source,_container,_context ) _layoutSize=Null _renderSize=Null RequestRender() End   Method Go( url:String ) Print "GO:"+url If url.Contains( "#" ) Return Endif Local root:=ExtractRootDir( url ) If root="http://" Or root="https://" #If __DESKTOP_TARGET__ requesters.OpenUrl( url ) #Endif   Return Endif If Not root url=BaseUrl+url Endif Local src:=stringio.LoadString( url ) If ExtractExt( url )=".md" src=hoedown.MarkdownToHtml( src ) Local wrapper:=stringio.LoadString( "theme::markdown_wrapper.html" ) src=wrapper.Replace( "${CONTENT}",src ) End BaseUrl=ExtractDir( url ) HtmlSource=src End Method Private Field _context:litehtml.context Field _container:litehtml.document_container Field _anchorClicked:String Field _baseUrl:String Field _source:String Field _document:litehtml.document Field _layoutSize:Vec2i Field _renderSize:Vec2i Method OnThemeChanged() Override _document=New litehtml.document( _source,_container,_context ) _layoutSize=Null _renderSize=Null End Method   Method OnMeasureContent2:Vec2i( size:Vec2i ) Override If Not _document Return New Vec2i( 0,0 ) If size.x=_layoutSize.x Return _renderSize _layoutSize=size _document.render( size.x ) _renderSize=New Vec2i( _document.width(),_document.height() ) Return _renderSize End Method Method OnRenderContent( canvas:Canvas ) Override If Not _document Return Local clip:litehtml.position clip.x=canvas.Scissor.X clip.y=canvas.Scissor.Y clip.width=canvas.Scissor.Width clip.height=canvas.Scissor.Height   _document.draw( canvas,0,0,Varptr clip ) End Method     Method OnContentMouseEvent( event:MouseEvent ) Override If Not _document Return Local x:=event.Location.X Local y:=event.Location.Y _anchorClicked="" Select event.Type Case EventType.MouseDown _document.on_lbutton_down( x,y,x,y ) Case EventType.MouseMove _document.on_mouse_over( x,y,x,y ) Case EventType.MouseUp _document.on_lbutton_up( x,y,x,y ) _document.on_mouse_leave() Case EventType.MouseWheel   Return End event.Eat() RequestRender() 'Not ideal, but necessary for link highlighting... If _anchorClicked AnchorClicked( _anchorClicked ) End Method End Class     Class document_container Extends litehtml.document_container Field _view:CustomHtmlView Method ToFont:Font( hfont:Object ) Return Cast<Font>( hfont ) End Method Method ToCanvas:Canvas( hdc:Object ) Return Cast<Canvas>( hdc ) End Method Method GetImage:Image( src:String ) Return App.Theme.OpenImage( src ) End Method Method New( view:CustomHtmlView ) _view=view End Method Method set_color( canvas:Canvas,color:litehtml.web_color ) canvas.Color=New Color( color.red/255.0,color.green/255.0,color.blue/255.0,1 ) End Method Method make_url:String( href:String ) Return _view._baseUrl+href End Method   Method create_font:Object( faceName:String,size:Int,weight:Int,style:litehtml.font_style,decoration:UInt,fm:litehtml.font_metrics Ptr ) Override Local face:="DejaVuSans" If faceName.Contains( "monospace" ) face+="Mono" Local font:=App.Theme.OpenFont( face,size ) Local height:=font.Height   fm->height=height fm->ascent=height fm->descent=0 fm->x_height=height fm->draw_spaces=True Return font End Method   Method delete_font( font:Object ) Override End Method Method text_width:Int( text:String,hfont:Object ) Override Local font:=ToFont( hfont ) Return font.TextWidth( text ) End Method Method draw_text( hdc:Object,text:String,hfont:Object,color:litehtml.web_color Ptr,pos:litehtml.position Ptr ) Override Local canvas:=ToCanvas( hdc ) Local font:=ToFont( hfont ) canvas.Font=font set_color( canvas,color[0] ) canvas.DrawText( text,pos->x,pos->y ) Return End Method Method pt_to_px:Int( pt:Int ) Override Return 0 End Method Method get_default_font_size:Int() Override Return 16 * App.Theme.Scale.y End Method Method get_default_font_name:String() Override Return "DejaVuSans" End Method Method draw_list_marker( hdc:Object,marker:litehtml.list_marker Ptr ) Override If marker->marker_type=litehtml.list_style_type_none Return Local canvas:=ToCanvas( hdc ) set_color( canvas,marker->color ) Select marker->marker_type Case litehtml.list_style_type_disc canvas.DrawOval( marker->pos.x,marker->pos.y,marker->pos.width,marker->pos.height ) Default canvas.DrawRect( marker->pos.x,marker->pos.y,marker->pos.width,marker->pos.height ) End Select End Method Method load_image( src:String,baseurl:String,redraw_on_ready:Bool ) Override GetImage( src ) End Method Method get_image_size( src:String,baseurl:String,sz:litehtml.size Ptr ) Override Local image:=GetImage( src ) If Not image Return sz->width=image.Width sz->height=image.Height End Method   Method draw_background( hdc:Object,img_src:String,img_baseurl:String,bg:litehtml.background_paint Ptr ) Override Local canvas:=ToCanvas( hdc ) Local image:=GetImage( img_src ) If image canvas.Color=Color.White canvas.DrawImage( image,bg->position_x,bg->position_y ) Return Endif   set_color( canvas,bg->color ) ' canvas.DrawRect( bg->clip_box.x,bg->clip_box.y,bg->clip_box.width,bg->clip_box.height ) canvas.DrawRect( bg->border_box.x,bg->border_box.y,bg->border_box.width,bg->border_box.height ) End Method Method draw_border( canvas:Canvas,border:litehtml.border,x:Int,y:Int,w:Int,h:Int ) If border.style<>litehtml.border_style_solid Or border.width<1 Return set_color( canvas,border.color ) canvas.DrawRect( x,y,w,h ) End Method Method draw_borders( hdc:Object,borders:litehtml.borders Ptr,pos:litehtml.position Ptr,root:Bool ) Override Local canvas:=ToCanvas( hdc ) Local x:=pos->x,y:=pos->y Local w:=pos->width,h:=pos->height draw_border( canvas,borders->left,x,y,1,h ) draw_border( canvas,borders->top,x,y,w,1 ) draw_border( canvas,borders->right,x+w-1,y,1,h ) draw_border( canvas,borders->bottom,x,y+h-1,w,1 ) End Method   Method set_caption( caption:String ) Override End Method Method set_base_url( baseurl:String ) Override End Method Method on_anchor_click( url:String ) Override _view._anchorClicked=url End Method Method set_cursor( cursor:String ) Override End Method Method import_css:String( url:String,baseurl:String ) Override Local css:=stringio.LoadString( make_url( url ) ) Return css End Method Method set_clip( pos:litehtml.position Ptr,radiuses:litehtml.border_radiuses Ptr ) Override End Method Method del_clip() Override End Method Method get_client_rect( client:litehtml.position Ptr ) Override ' If _view._rendering Print "get client rect" client->x=0 client->y=0 client->width=_view._layoutSize.x client->height=_view._layoutSize.y End Method Method get_media_features( media:litehtml.media_features Ptr ) Override ' If _view._rendering Print "get media features" media->type=litehtml.media_type_screen media->width=_view._layoutSize.x media->height=_view._layoutSize.y media->device_width=1920 media->device_height=1080 media->color=8 media->color_index=0 media->monochrome=0 media->resolution=96 End Method Method get_language:String() Override Return "" End Method Method get_culture:String() Override Return "" End Method End Class     Function Main() New AppInstance New MyWindow App.Run() End Function

[codifiesParticipant]

Thanks for sharing…

[Richard BetsonParticipant]

@CopperCircle

Thanks. Can you post the about.html file? Posting it would be helpful.

[codifiesParticipant]

@Richard Betson just nail together any old page, one caveat tho… resource paths must include asset::

Monkey

[crayon-5cb9d27185c07391471290 inline="true" ] <img src="asset::image.png" />

1 2 3

[crayon-5cb9d27185c07391471290 inline="true" ] <img src="asset::image.png" />

[/crayon]

for example

@coppercircle I might take this code further and develop a blog post about making a simple UI with HTML and monkey if you don’t mind me using this code…

[CopperCircleParticipant]

Hi, yes feel free to use it how ever.

[Richard BetsonParticipant]

@codifies

Thanks. I tried to build and run the litehtml example that CopperCircle posted but it crashed and burned. The asset path was probably the issue which is why I wanted a look at the about.html file. I’ll give it a try.

might take this code further and develop a blog post about making a simple UI with HTML and monkey

Right on. I’m planning on integrating litehtml into my Alien Phoenix project and it’s GUI should really work well for this kind of thing.  I’ll be interested in anything you come up with so let us know when you have something more.

[codifiesParticipant]

just
#import “assets/”

then throw all the junk in there, it should “just work” (famous last words)

I have issues when trying to use it as a gui, I tried opening another window with a link – which works, but the GL state in the second window seems messed up somehow (text printed as filled in blocks)

ideally I’d want to somehow magically morph the htmlview window into a glwindow (so you can then render the “game”) in the same window you used for the htmlview…

but I’m thinking really the html should be rendered to a GL texture, but I’m not sure what is the best way to proceed for now…

[codifiesParticipant]

I’ve hacked together using HTML as a game menu that can start a “game” that uses Mojo and GL…

http://bedroomcoders.co.uk/monkey2-using-html-for-your-game-menu/

[Author]

Posts