ogreHTML, embedded html files

A place to show off your latest screenshots and for people to comment on them. Only start a new thread here if you have some nice images to show off!
Post Reply
User avatar
saejox
Goblin
Posts: 260
Joined: Tue Oct 25, 2011 1:07 am
x 36

ogreHTML, embedded html files

Post by saejox »

ogreHTML is a fully functional Berkelium wrapper for Ogre3D. It can draw and manipulate html pages on overlays and entities.

Features:
- Browse web pages on overlays or entities.
- Create local html/js/css pages for vector based dynamic user interfaces.
- There are billions of open source Javascript frameworks. All catered towards user interfaces. Someone already did half the work :)
- Debugging and writing html/js code is super easy and flexible.
- Interact with pages through Javascript.
- Multiprocess, does not block you game loop.
- HTML5 and CSS3 supported.
- Playback Flash videos or games.
- Fast! at 1080p a high-res youtube flash video plays at 3000fps on my pc.
- Plays audio too :)
- Supports Windows/Mac/Linux
- Berkelium Windows builds are included.
- Open source
- Permissive zlib license.

Since this is not advertisement i should mention come cons.

Cons:
- Each window creates a separate process. Each consuming about 25mb.
- Does not work on any RISC device.
- Does not support 64bit Windows applications. Although runs fine in Windows 64bits. This is because Google Chrome doesn't have a 64bit build Windows.
- Does not work with MinGW. This is again a Chromium limitation .
- Not yet tested on linux and mac. There might be some easy to fix compile errors.
- Still in development, bugs are likely. Please test it :)

There was never a full Berkelium integration before. Only some snippets about dynamic texture rendering.
This one does all.

I made this back in May, just rewrote most of it. Made its own project and decided to share it with you guys.
We can never get enough GUI frameworks!

Here is the link:
https://bitbucket.org/saejox/ogrehtml/src
also Visual Studio 2008/2010/2012 compatible Berkelium binary.
https://bitbucket.org/saejox/ogrehtml/downloads

Here is an obligatory screenshot. Left one is an overlay, right one is on an entity.
Image

Another screenshot, showing transparency and javascript capabilities. WIP of my editor
Image
Last edited by saejox on Thu Dec 20, 2012 10:20 pm, edited 4 times in total.
Nimet - Advanced Ogre3D Mesh/dotScene Viewer
asPEEK - Remote Angelscript debugger with html interface
ogreHTML - HTML5 user interfaces in Ogre
User avatar
saejox
Goblin
Posts: 260
Joined: Tue Oct 25, 2011 1:07 am
x 36

Re: ogreHTML , easy to embed html pages

Post by saejox »

Building
- Build or use prebuilt Berkelium
- add all Cpp files to project (or tell linker about them. also possible build it as a lib or a)
- #include "ogreHTML.h"
- copy Berkelium binary files to your executable path.

Usage

Initialize it. Since Berkelium is has a singletion design ogreHTML is also a singleton

Code: Select all

HTMLManager::get().Init(keyboard);
Creating a HTML on an Overlay:

Code: Select all

// inherit from HTLMonOverlay
class MyHTML : public HTLMonOverlay { };

  MyHTML *html = new MyHTML();

  HTMLonOverlayDescription desc;
  desc.name = "ogreAssistant";
 // position on screen
  desc.posX = 1;
  desc.posY = 1;
  // texture size of the page. If less than overlay size then it will blurry.
  desc.textureWidth = 900; // viewport->getActualWidth() for full size
  desc.textureHeight = 800;
  // overlay size of the page. If less than overlay size then it will blurry.
  desc.overlayWidth = 900;
  desc.overlayHeight = 800;
  html->Init(desc);

  // browse a page
  html->BrowseURL("http://ogre3d.org");
  // Add to HTMLManager. HTMLManager passes keyboard and mouse events to added HTMLs
  HTMLManager::get().Add(html);
Don't forget to pass OIS events to HTMLManager

Code: Select all

HTMLManager::get().KeyPressed(arg);
HTMLManager::get().MouseMoved(arg);
HTMLManager::get().MousePressed(id);
HTMLManager::get().MouseReleased(id);
Call Update method every frame or so. This triggers javascript callbacks and texture paint when there are dirty pixels.

Code: Select all

HTMLManager::get().Update();
Clean up!

Code: Select all

// unsubscribe HTML from mouse and keyboard events
 HTMLManager::get().Remove(html);
 delete html;
// destroy singleton
 HTMLManager::get().Destroy();
I am still actively developing.
This is an early release to test to see if anyone interested in a such a project.
I am aiming to add a Javascript Support library to this. I want this to be completely MVVM.
Waiting for criticism.

Thank you.
Last edited by saejox on Sun Jan 13, 2013 7:25 pm, edited 2 times in total.
Nimet - Advanced Ogre3D Mesh/dotScene Viewer
asPEEK - Remote Angelscript debugger with html interface
ogreHTML - HTML5 user interfaces in Ogre
TheSHEEEP
OGRE Retired Team Member
OGRE Retired Team Member
Posts: 972
Joined: Mon Jun 02, 2008 6:52 pm
Location: Berlin
x 64

Re: ogreHTML, embeded html files

Post by TheSHEEEP »

Is transparency possible?
So that you could use this as a GUI, for example?
My site! - Have a look :)
Also on Twitter - extra fluffy
User avatar
saejox
Goblin
Posts: 260
Joined: Tue Oct 25, 2011 1:07 am
x 36

Re: ogreHTML, embeded html files

Post by saejox »

TheSHEEEP wrote:Is transparency possible?
So that you could use this as a GUI, for example?
Yes, it is. Call html->SetTransparency(true)
Nimet - Advanced Ogre3D Mesh/dotScene Viewer
asPEEK - Remote Angelscript debugger with html interface
ogreHTML - HTML5 user interfaces in Ogre
macleod
Kobold
Posts: 25
Joined: Sat Jan 15, 2011 7:11 pm
x 3

Re: ogreHTML, embedded html files

Post by macleod »

Very nice!

Some questions:

Have you tried with Flash ?
Is it possible to use this with flash player playing a hardware accelerated transparent SWF file as GUI?
If so, it could be a good alternative to Hikari, or Scaleform!

Can someone control Ogre from JS or Flash, embeded in your solution ?
User avatar
saejox
Goblin
Posts: 260
Joined: Tue Oct 25, 2011 1:07 am
x 36

Re: ogreHTML, embedded html files

Post by saejox »

macleod wrote:Very nice!

Some questions:

Have you tried with Flash ?
Is it possible to use this with flash player playing a hardware accelerated transparent SWF file as GUI?
If so, it could be a good alternative to Hikari, or Scaleform!

Can someone control Ogre from JS or Flash, embeded in your solution ?
yes it can play flash. hardware accelerated.

But it is very different from hikari and such. Because it uses the flash plugin.
It can play flash faster than hikari, but user needs to have flash plugin installed. That is probably a no go. Nobody likes to install third party software.
Remember it is actually a real browser running in the background. We just get its contents in to ogre instead of a window.
Nimet - Advanced Ogre3D Mesh/dotScene Viewer
asPEEK - Remote Angelscript debugger with html interface
ogreHTML - HTML5 user interfaces in Ogre
User avatar
Zonder
Ogre Magi
Posts: 1156
Joined: Mon Aug 04, 2008 7:51 pm
Location: Manchester - England
x 67

Re: ogreHTML, embedded html files

Post by Zonder »

saejox wrote:
macleod wrote:Very nice!

Some questions:

Have you tried with Flash ?
Is it possible to use this with flash player playing a hardware accelerated transparent SWF file as GUI?
If so, it could be a good alternative to Hikari, or Scaleform!

Can someone control Ogre from JS or Flash, embeded in your solution ?
yes it can play flash. hardware accelerated.

But it is very different from hikari and such. Because it uses the flash plugin.
It can play flash faster than hikari, but user needs to have flash plugin installed. That is probably a no go. Nobody likes to install third party software.
Remember it is actually a real browser running in the background. We just get its contents in to ogre instead of a window.
I agree ignore flash you have a HTML 5 browser so use svg instread
There are 10 types of people in the world: Those who understand binary, and those who don't...
User avatar
Brocan
Orc
Posts: 441
Joined: Tue Aug 01, 2006 1:43 am
Location: Spain!!
x 8

Re: ogreHTML, embedded html files

Post by Brocan »

Awesome :o , congrats! :D
User avatar
Zonder
Ogre Magi
Posts: 1156
Joined: Mon Aug 04, 2008 7:51 pm
Location: Manchester - England
x 67

Re: ogreHTML, embedded html files

Post by Zonder »

looking at your html use you could make things nice on the interface
There are 10 types of people in the world: Those who understand binary, and those who don't...
lpa
Gnoblar
Posts: 9
Joined: Tue Jul 20, 2010 9:19 am

Re: ogreHTML, embedded html files

Post by lpa »

Hi,
I have tested your code and all wok fine for the moment.
Just i think you forgot to say to call the update method for work:

Code: Select all

	HTMLManager::get().Update();
thank you
User avatar
saejox
Goblin
Posts: 260
Joined: Tue Oct 25, 2011 1:07 am
x 36

Re: ogreHTML, embedded html files

Post by saejox »

lpa wrote:Hi,
I have tested your code and all wok fine for the moment.
Just i think you forgot to say to call the update method for work:

Code: Select all

	HTMLManager::get().Update();
thank you
Sorry, about that.
Editted the post.
Thank you.
Nimet - Advanced Ogre3D Mesh/dotScene Viewer
asPEEK - Remote Angelscript debugger with html interface
ogreHTML - HTML5 user interfaces in Ogre
lpa
Gnoblar
Posts: 9
Joined: Tue Jul 20, 2010 9:19 am

Re: ogreHTML, embedded html files

Post by lpa »

I not found i there is any way to load files with relative path with berkelium,

if have try

Code: Select all

html->BrowseURL("media/gui/main_menu.html");
//or
html->BrowseURL("./media/gui/main_menu.html");
But only full path work:

Code: Select all

html->BrowseURL("C:/OgreGameApi/VC2010/Debug/media/gui/main_menu.html");
thank you
User avatar
saejox
Goblin
Posts: 260
Joined: Tue Oct 25, 2011 1:07 am
x 36

Re: ogreHTML, embedded html files

Post by saejox »

lpa wrote:I not found i there is any way to load files with relative path with berkelium,

if have try

Code: Select all

html->BrowseURL("media/gui/main_menu.html");
//or
html->BrowseURL("./media/gui/main_menu.html");
But only full path work:

Code: Select all

html->BrowseURL("C:/OgreGameApi/VC2010/Debug/media/gui/main_menu.html");
thank you
void BrowseLocalHTML(const std::string &cmd);

Relative to executable. It has a wstring unicode alternative too.
Last edited by saejox on Mon Jan 14, 2013 7:00 am, edited 1 time in total.
Nimet - Advanced Ogre3D Mesh/dotScene Viewer
asPEEK - Remote Angelscript debugger with html interface
ogreHTML - HTML5 user interfaces in Ogre
lpa
Gnoblar
Posts: 9
Joined: Tue Jul 20, 2010 9:19 am

Re: ogreHTML, embedded html files

Post by lpa »

saejox wrote:
void BrowseLocalHTML(const std::string &cmd);

Relative to executable. I has a wstring unicode alternative too.
thank you that work :D
TheSHEEEP
OGRE Retired Team Member
OGRE Retired Team Member
Posts: 972
Joined: Mon Jun 02, 2008 6:52 pm
Location: Berlin
x 64

Re: ogreHTML, embedded html files

Post by TheSHEEEP »

Zonder wrote:
saejox wrote: But it is very different from hikari and such. Because it uses the flash plugin.
It can play flash faster than hikari, but user needs to have flash plugin installed. That is probably a no go. Nobody likes to install third party software.
Remember it is actually a real browser running in the background. We just get its contents in to ogre instead of a window.
I agree ignore flash you have a HTML 5 browser so use svg instread
Well, can't say I agree here.
First of all, if you are installing an application, it is normal to install other stuff as well, like DirectX, OpenAL, c++ runtime, etc.
So also installing the Flash player plugin (which is installed on most PCs anyway) is no big deal.

Also, SVG IMO is an incredibly wasteful format, as it is basically XML. Should be JSON, really ;)
And I seriously doubt that SVG is capable of all the stuff you can do with Flash. Or would you seriously be able to do something like this with JS only?
If so, why has nobody done it yet?
The answer is either because you can't or it would be too much an effort as Flash is simply the better library (easier to use, faster, etc.). From my experiences with both, I can say that the latter is true.
You could do such a game with HTML5 techniques, but you could do better, faster and easier with Flash.
The best idea would of course be to just use Haxe NME, which lets you output as JS or Flash, whatever you favor.

Short story: Flash is simply faster than HTML5, especially for graphical programming. This is for both development time and performance.
I know Flash has a reputation of being slow, but that is only thanks to developers not knowing what they do.
Combine that with a language that is as easy to use as Flash and you end up with working, but really bad code ;)

That said, maybe the performance part is not true for the plugin. But if it works like a regular browser, it should be.
My site! - Have a look :)
Also on Twitter - extra fluffy
User avatar
duststorm
Minaton
Posts: 921
Joined: Sat Jul 31, 2010 6:29 pm
Location: Belgium
x 80
Contact:

Re: ogreHTML, embedded html files

Post by duststorm »

Very nice. :D
I did a snippet for integrating Berkelium in a texture on the wiki some time ago. This wrapper is a bit more advanced.
Developer @ MakeHuman.org
User avatar
Zonder
Ogre Magi
Posts: 1156
Joined: Mon Aug 04, 2008 7:51 pm
Location: Manchester - England
x 67

Re: ogreHTML, embedded html files

Post by Zonder »

TheSHEEEP wrote:
Zonder wrote:
saejox wrote: But it is very different from hikari and such. Because it uses the flash plugin.
It can play flash faster than hikari, but user needs to have flash plugin installed. That is probably a no go. Nobody likes to install third party software.
Remember it is actually a real browser running in the background. We just get its contents in to ogre instead of a window.
I agree ignore flash you have a HTML 5 browser so use svg instread
Well, can't say I agree here.
First of all, if you are installing an application, it is normal to install other stuff as well, like DirectX, OpenAL, c++ runtime, etc.
So also installing the Flash player plugin (which is installed on most PCs anyway) is no big deal.

Also, SVG IMO is an incredibly wasteful format, as it is basically XML. Should be JSON, really ;)
And I seriously doubt that SVG is capable of all the stuff you can do with Flash. Or would you seriously be able to do something like this with JS only?
If so, why has nobody done it yet?
The answer is either because you can't or it would be too much an effort as Flash is simply the better library (easier to use, faster, etc.). From my experiences with both, I can say that the latter is true.
You could do such a game with HTML5 techniques, but you could do better, faster and easier with Flash.
The best idea would of course be to just use Haxe NME, which lets you output as JS or Flash, whatever you favor.

Short story: Flash is simply faster than HTML5, especially for graphical programming. This is for both development time and performance.
I know Flash has a reputation of being slow, but that is only thanks to developers not knowing what they do.
Combine that with a language that is as easy to use as Flash and you end up with working, but really bad code ;)

That said, maybe the performance part is not true for the plugin. But if it works like a regular browser, it should be.
I am not slating flash it's a good plugin but it's still a plugin. But if you want your ogre app to be portable to all platforms you have to ignore it.

And yes you can do games like that in html 5 there isn't anything quite as advanced yet though as the one you mentioned

http://play-dune.com
http://play-ttd.com/

HTML 5 still has a long way to go but it's getting there.

Also it occurred to me that silverlight would work as well probably
There are 10 types of people in the world: Those who understand binary, and those who don't...
caduceus
Goblin
Posts: 224
Joined: Tue May 08, 2012 6:39 am

Re: ogreHTML, embedded html files

Post by caduceus »

If suppose i have a html text of size 40pt. Can i render that text using ogreHTML in texture size of 500x100 without resizing the text. If yes how can i do that?

I berkelium I was facing the issue that suppose I have a long string of html text and i want to render that using berkelium and also scroll that text on screen, it was not possible as if i resize the screen the rendered text is also effected.
User avatar
saejox
Goblin
Posts: 260
Joined: Tue Oct 25, 2011 1:07 am
x 36

Re: ogreHTML, embedded html files

Post by saejox »

caduceus wrote:If suppose i have a html text of size 40pt. Can i render that text using ogreHTML in texture size of 500x100 without resizing the text. If yes how can i do that?

I berkelium I was facing the issue that suppose I have a long string of html text and i want to render that using berkelium and also scroll that text on screen, it was not possible as if i resize the screen the rendered text is also effected.
40pt is 53px, you can't fill 100px with 53px of content without resizing. Increase font size of the text appropriately.
Nimet - Advanced Ogre3D Mesh/dotScene Viewer
asPEEK - Remote Angelscript debugger with html interface
ogreHTML - HTML5 user interfaces in Ogre
van4dium
Halfling
Posts: 40
Joined: Fri Jul 30, 2010 2:40 am
x 1

Re: ogreHTML, embedded html files

Post by van4dium »

First, great job. Great binding.
everything works fine, except that ProcessCustomEventCallbacks

always returns
ERROR: CallFunctions, can not find element with id:

without elementID

Why?

My code is:

HTML:

Code: Select all

<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
    <link href="test.css" rel="stylesheet" type="text/css">
    <script src="ogreHTML.js"></script>
 
  </head>
  <body>
  <video autoplay id="bgvid">
    <source src="intro.ogg" type="video/ogg">
  </video>  
   
  <script>   
    var evt = document.createEvent("Event");
    evt.initEvent("isEnded",true,true);
    
    var video = document.getElementById('bgvid');   
    video.addEventListener('ended', videoEndHandler, false);
    function videoEndHandler(e) 
    {
	evt.status = true;
	video.dispatchEvent(evt);
    }
    
    video.addEventListener("isEnded",isEndedHandler,false);
    function isEndedHandler(e) 
    {
	CallCustomEvent("isEnded","bgvid",e.status);
	alert("ENDED? = "+e.status);
    }
    
  </script>   

  </body>
</html>
EDIT : javascript code changed . create javascript custom event.

C++:

Code: Select all

//DECLARATION:
static void onEndedCallback(const std::string& str, const JSObject& obj);

//IMPLEMENTATION:
void IntroState::onEndedCallback(const std::string &str, const JSObject &obj)
{
    std::cout << "VIDEO ENDED" << std::endl;
}

//CALLBACK REGISTRATION:
html->jsHelper.AddCustomEvent("isEnded","bgvid",onEndedCallback);
All help is appreciated.

Thanks in advance. (Sorry for my english)
Post Reply