Idea for a new Web Based GUMP system

Praxiiz

Well-Known Member
Oct 22, 2013
311
91
Shard Name
Allure of the Unknown
Donate
Donate money to this user
Many modern games use a product called Awesomium to render their GUIs. I think it can be used to make modern looking GUMPS for Ultima Online.

What is awesomium?
It is essentially google chrome in a c++ / c# library.

What does that mean?
You can develop gumps / GUIs using html, css, javascript and even silverlight and flash. They can be used directly inside the game client.

Want to show a movie as part of a quest?

Proof of Concept
Using UltimaLive, I spawned a child window inside the game client and made it the target of Awesomium. I then told it to load the UO website.

This window is not floating above the game client, it's a child window much like a gump is. Of course an actual gump wouldn't need to have scrollbars.

This proof of concept would be implemented as a plugin to UltimaLive and not part of the UltimaLive core. I still have to figure out what the interface would look like on the ServUO server side.

ai22.photobucket.com_albums_b347_Praxiiz_in_game_browser.png

The downside is that 9 additional files have to placed in the client folder to support awesomium.

Anyone familiar with Everquest Next landmark has seen their launcher application. This UI was built using Awesomium:

ai22.photobucket.com_albums_b347_Praxiiz_eqnlandmark.png
 
  • Like
Reactions: Dorth

Ce Jayce

Well-Known Member
Jan 24, 2014
140
14
23
Shard Name
Exordus. The Shire
Donate
Donate money to this user
Praxizz - the only way you could become more awesome than you already are in my book is by figuring out how to dupe yourself so we can have two of you pushing the limits of UO!

Awesome stuff!
 

Praxiiz

Well-Known Member
Oct 22, 2013
311
91
Shard Name
Allure of the Unknown
Donate
Donate money to this user
Thanks, but it's not done yet. This is still just concept stuff.

Another in-game GUI done using Awesomium:
ai22.photobucket.com_albums_b347_Praxiiz_eqnlandmark_ingame_market.png

There are many options for serving up the webpages, including using ServUO to send the pages as text directly to the client. Awesomium has client callbacks which would need to be defined in UltimaLive.

I need to figure out what those callbacks would look like. If anyone has any input (i.e. what would a ServUO script look like) I'd love to hear it.
 
Last edited:

Hank

Well-Known Member
Nov 14, 2013
947
151
Earth
In case anyone wanted more information about Awesomium: https://awesomium.codeplex.com/

Edit: Being able to have the window in uo would be nice rather then it opening their browser outside the game. It has been possible to open webpages in gumps for some time,"this is just the next step"

INB4 someone adds browser gump for real money "donation" store. *spits*
 
Last edited:

ACME_INC

Active Member
Feb 7, 2014
29
6
46
Corpus Christi
lordblackthorn.com
Shard Name
lordblackthorn.com
As I have said before, we have yet to fully realize the capabilities of ultima live. Good work.

I see a need for something like this for things like new player guides as well as in game stats and rankings.
 

Praxiiz

Well-Known Member
Oct 22, 2013
311
91
Shard Name
Allure of the Unknown
Donate
Donate money to this user
INB4 someone adds browser gump for real money "donation" store. *spits*
Unfortunately you can't really censor what a shard will do with the tools you provide.
 

Praxiiz

Well-Known Member
Oct 22, 2013
311
91
Shard Name
Allure of the Unknown
Donate
Donate money to this user
How? I remember seeing a post about it some time ago but can't find it anymore.
Traditional gumps just support text sent to them through the normal gump interface. If you specify an HTML element on a gump, it works like a label with an optional background and scroll bars. You can then specify some traditional elements in the HTML gump element.

You can't presently tell a gump to load a full webpage or specify an external image or anything fancy. It is basically just a glorified gump label. You can include links but they open in an external web browser.

You cannot mix fonts with different heights in the same line.

Supported HTML Tags: (tags are closed using </tag>)

  • <H1>
  • <H2>
  • <H3>
  • <B>
  • <I>
  • <U>
  • <BR>
  • <BODY>
  • <CENTER>
  • <div align=left>
  • <div align=center>
  • <a href=>
  • <BASEFONT COLOR= SIZE= FACE= >
Sample Tags:
H1, H2, H3, H4, H5, A
ai22.photobucket.com_albums_b347_Praxiiz_html_text_samples_1.png

<BASEFONT COLOR= SIZE= FACE= >abcdefghijklmnopqrstuvwxyz</BASEFONT>

The size setting seems to have limited effect. Only a few face settings are known. There are many more fonts in the .mul files, but it is unknown how to specify them.

Size 3,4,5 are the only sizes that seem to make a difference.

Core Fonts:
ai22.photobucket.com_albums_b347_Praxiiz_coreFonts.png

Decorated Core Fonts:
ai22.photobucket.com_albums_b347_Praxiiz_font_decorations.png

Gargish:

ai22.photobucket.com_albums_b347_Praxiiz_gargish.png

Runic:

ai22.photobucket.com_albums_b347_Praxiiz_runic.png
 

Praxiiz

Well-Known Member
Oct 22, 2013
311
91
Shard Name
Allure of the Unknown
Donate
Donate money to this user
The nice thing about using awesomium is that you are in fact loading a page into a client window, not just using an extremely small subset of HTML.
 

Feeh

Well-Known Member
Apr 1, 2014
63
10
32
Thanks, but it's not done yet. This is still just concept stuff.
I need to figure out what those callbacks would look like. If anyone has any input (i.e. what would a ServUO script look like) I'd love to hear it.
Something similar to gumps, I mean:

class AwesomiumInterface
constructor: (string url, int x, int y, int width, int height) // display a specific web page
constructor: (CustomAwesomiumInterface cai) //maybe the server can send custom HTML content to the client?
method: RelayInfo(Info info) //call back when the client fill a form specified on the web page (if form action="ULRelay_FormName1/2/3" so they can answer different forms and still fill web forms)

PlayerMobile
SendAwesomiumInterface( AwesomiumInterface interface); //same as SengGump();

It is a bit hard to think how it could be without knowing what is needed o use them, but I think closer to the gumps is better, unless a very specific code is needed


Anyway, great work Praxiis! can't wait to see it running :)
 

Praxiiz

Well-Known Member
Oct 22, 2013
311
91
Shard Name
Allure of the Unknown
Donate
Donate money to this user
Unfortunately, Awesomium doesn't have a license that is compatible with GPL.

I am now looking at the Chromium Embedded Framework (CEF3). It has the three clause BSD license and should be GPL compliant.

It will be extra work to get it integrated, and it has a higher learning curve, but I think it's doable.
 

zerodowned

Moderator
ServUO Developer
Jun 28, 2014
1,770
221
I'm really interested in trying this out. A fully working page would be amazing, but I'd be happy just get to get a linked image to show up.
 
X

xG00BERx

This Idea would be so amazing if a player just hit [donate and it loaded all that kind of stuff. Dear goodness.
 

Praxiiz

Well-Known Member
Oct 22, 2013
311
91
Shard Name
Allure of the Unknown
Donate
Donate money to this user
I've been making good progress on getting the Chromium Embedded Framework (CEF3) integrated as a plugin for Ultima Live:

ai22.photobucket.com_albums_b347_Praxiiz_in_game_browser_1.png

On the browser side (inside the client), gumps will be built up using HTML and javascript. javascript will be the only method for pushing data back to ServUO.

I also need to develop a way to programmatically determine which UltimaLive plugins a particular player has installed. This would allow a shard to check to see if they have the web gump plugin installed before trying to send web gumps, and send a normal gump if the player doesn't have the plugin.