Jump to content

html5, javascript and css for GUI

madis

By madis
in Suggestions

Recommended Posts

madis Red-Headed Stepchild

madis

Posted
Posted

As I stated in feature request #0003314, which discusses whether to replace CEGUI with something else, Awesomium seems to support embedding Webkit engine.

Using Awesomium javascript mapping, MTA could get feedback from the GUI, so it is possible to it should be possible to use it.

Why html, js and css?

It would be a lot nicer to make GUIs in html instead of writing functional or object-oriented code.

Of course, for backwards compatibility, all current GUI methods need to be supported, but that's also doable.

Just a quick example, what this mixture of javascript created UI elements and normal DOM elements code would produce (the code does not represent how a normal UI should look):

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Example</title> 
    <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.9.custom.css" type="text/css"/> 
    <link rel="stylesheet" href="../css/mta.css" type="text/css"/> 
    <script src="../js/jquery.js"></script> 
    <script src="../js/jquery-ui.custom.min.js"></script> 
    <script> 
        $(function() { 
            //$('#dialog').dialog().dialog('widget').position({ offset: '250 50', of: $(this) }); 
            var myWindow = createWindow(200, 30, 500, 500, "Server Browser", 0); 
            var tabPanel = createTabPanel(myWindow); 
        }); 
  
        function createWindow(x, y, width, height, title, isRelative) { 
            //var emptyDiv = $('<div></div>'); 
            //$('body').after(emptyDiv); 
            var emptyDiv = $('#tabs'); 
            emptyDiv.dialog({width: width, height: height, title: title, position: [x, y]}); 
            return emptyDiv; 
        } 
  
        function createTabPanel(myWindow) { 
            return myWindow.tabs(); 
        } 
    </script> 
</head> 
<body> 
  
<div id="tabs"> 
    <ul> 
        <li><a href="#tabs-1">Internet</a></li> 
        <li><a href="#tabs-2">LAN</a></li> 
        <li><a href="#tabs-3">Favourites</a></li> 
        <li><a href="#tabs-4">Recently Played</a></li> 
    </ul> 
    <div id="tabs-1"> 
        <p>This is a server browser</p> 
    </div> 
    <div id="tabs-2"> 
        <p>Lan</p> 
    </div> 
    <div id="tabs-3"> 
        <p>Fav</p> 
    </div> 
    <div id="tabs-4"> 
        <p>Recent</p> 
    </div> 
</div> 
  
</body> 
</html>

33biiz8.jpg

This topic was made just for discussion for using Awesomium (or anything similar) as I didn't want to spam the Mantis.

Link to comment
eAi Foot Soldier

eAi

Posted
Posted

Performance is obviously important. "Similar to using Chromium" means nothing - game UIs have a different set of requirements to web pages - you rarely care that much about the framerate of webpages, and you're quite used to pages taking a second or so to load, but with a game, that's not acceptable. Not that CEGUI does much better...

I also don't necessarily think making UIs with HTML is easy. Certain things are really hard that would be quite easy with a traditional UI like CEGUI. Often it's what you know that counts.

Link to comment
madis Red-Headed Stepchild

madis

Posted
  • Author
Posted

Just throwing in a nice alternative: http://librocket.com/

Seems to have better documentation and some nice API methods, but I doubt we can use e.g gradients or a lot of cool html5, css3 stuff.

afaik, the mouse position reading fps for webkit is 100fps. Generating, moving javascript dialogs also seem to be quick.

Often it's what you know that counts.

Exactly :wink:

Link to comment
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...