Navi

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
kneeride
Bugbear
Posts: 807
Joined: Sun May 14, 2006 2:24 pm
Location: Melbourne, Australia

Post by kneeride »

Great writeup! I think all projects should have such a page. It's always good to make some sort of evaluation without having to setup and compile.

I'm a web developer, so I'm sold.

Do you mind explaining this one further?
Navi sizes (width or height) must be powers-of-2. This is more of a cross-platform limitation: certain video cards do not support power-of-2 textures and will make your Navi render really psychedelic or not at all. Technically on compliant platforms, you can use Navi sizes that are divisible by 16 but just to be safe, I recommend using only power-of-2 widths/heights.
Does this mean my dialog boxes will have to be ^2 by ^2 in size? I find this rather limiting.
User avatar
Jabberwocky
OGRE Moderator
OGRE Moderator
Posts: 2819
Joined: Mon Mar 05, 2007 11:17 pm
Location: Canada
x 218
Contact:

Post by Jabberwocky »

kneeride wrote: Does this mean my dialog boxes will have to be ^2 by ^2 in size? I find this rather limiting.
The way I read it, width and height can be different powers of two. So your dialog box could be 128x256 for example. If that size doesn't suit you, perhaps you could use an alpha mask to tweak it?

But I'm sure ajs15822 can probably give more insight on the matter than I can. :)
User avatar
ajs15822
OGRE Expert User
OGRE Expert User
Posts: 570
Joined: Mon Jan 02, 2006 2:05 am
Location: Texas
x 2
Contact:

Post by ajs15822 »

Jabberwocky wrote:
kneeride wrote: Does this mean my dialog boxes will have to be ^2 by ^2 in size? I find this rather limiting.
The way I read it, width and height can be different powers of two. So your dialog box could be 128x256 for example. If that size doesn't suit you, perhaps you could use an alpha mask to tweak it?

But I'm sure ajs15822 can probably give more insight on the matter than I can. :)
Yes, Jabberwocky is exactly right. Powers of 2 means 2^n which can mean: 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024

This is actually not so much a limitation of Navi as much a limitation of certain video cards. Older generation video cards don't support texture sizes that are not 2^n and so this is why I suggest using these sizes.

As for using Alpha Masks to tweak, I intend to actually improve my mouse-picking code in a future version so that if you click/drag a fully-transparent area of a Navi, it will not register.
kneeride
Bugbear
Posts: 807
Joined: Sun May 14, 2006 2:24 pm
Location: Melbourne, Australia

Post by kneeride »

Code: Select all

NaviManager::Get().navigateNaviTo("myNavi", "local://myTestPage.html", myData);
ajs15822, is it possible to feed the page's html from the application? (instead of reading from file)
User avatar
ajs15822
OGRE Expert User
OGRE Expert User
Posts: 570
Joined: Mon Jan 02, 2006 2:05 am
Location: Texas
x 2
Contact:

Post by ajs15822 »

kneeride wrote:

Code: Select all

NaviManager::Get().navigateNaviTo("myNavi", "local://myTestPage.html", myData);
ajs15822, is it possible to feed the page's html from the application? (instead of reading from file)
No, we cannot feed pages directly into Gecko; at most we can do is tell Gecko where to look.

A compromise would be to write your page temporarily to disk and tell Navi where to look locally.
User avatar
Noman
OGRE Retired Team Member
OGRE Retired Team Member
Posts: 714
Joined: Mon Jan 31, 2005 7:21 pm
Location: Israel
x 2
Contact:

Post by Noman »

Wow. I honestly believe we will see many projects popping out soon using navi. This is awesome. Great job!

Only thing i would add, is a wiki entry with some screenies and a link to the navi page, so people not visiting the showcase forums will read about it.
User avatar
betajaen
OGRE Moderator
OGRE Moderator
Posts: 3447
Joined: Mon Jul 18, 2005 4:15 pm
Location: Wales, UK
x 58
Contact:

Post by betajaen »

ajs15822 wrote:
kneeride wrote:

Code: Select all

NaviManager::Get().navigateNaviTo("myNavi", "local://myTestPage.html", myData);
ajs15822, is it possible to feed the page's html from the application? (instead of reading from file)
No, we cannot feed pages directly into Gecko; at most we can do is tell Gecko where to look.
Actually you can, although I haven't tested this with Navi or even the Gecko engine - Just Safari.

According to the RFC2397, you can use "data" URI's to encode the actual data within the URL. Usually it's used for images, the latest craze is GreaseMonkey scripts with CSS overrides. All the images are encoded inside the CSS file. A neat little trick, which we can exploit.

The forum software won't recognise the link for some reason, so copy and paste the following into your location bar, hit enter and view the page source:

Code: Select all

data:text/html;BASE64,PGh0bWw+PGJvZHk+PGI+SGVsbG8gT0dSRTNEIHVzZXJzPC9iPjwvYm9keT48L2h0bWw+
Of course you don't have to use BASE64 for encoding, just in plain text. I would assume you'd have to escape certain characters there though:

Code: Select all

data:text/html,data:text/html,<html><body><b>Hello%20there</b></body></html>
So I'm positive if you pass this as a link to Navi, it should work. :D
Vectrex
Ogre Magi
Posts: 1266
Joined: Tue Aug 12, 2003 1:53 am
Location: Melbourne, Australia
x 1
Contact:

Post by Vectrex »

great, works fantastic. So I notice you poking around the uBrowser thread, does this mean navi can be used on a texture doom3 style? I presume it's rendering to a texture now so all that would be needed really is the 3d mouse picking from uBrowser spinning plane demo which worked great.
User avatar
jorrit5477
Gremlin
Posts: 181
Joined: Thu Feb 09, 2006 1:48 am
Location: The Netherlands

Post by jorrit5477 »

Great stuff! I have to try it out... might come in really handy.
User avatar
xabila
Goblin
Posts: 225
Joined: Mon Jun 05, 2006 9:40 am
Location: rennes [FR]

Post by xabila »

really nice !
Any chance to make it work on linux ?
User avatar
Jerky
Orc Shaman
Posts: 791
Joined: Wed Mar 02, 2005 4:13 am
Location: Springville, Utah
Contact:

Post by Jerky »

Looks great. You piqued our interest as well. Nice work.
Erik Briggs (Jerky)
My Blog
Project Wish
Image
User avatar
skullfire
Gremlin
Posts: 150
Joined: Sat Mar 19, 2005 7:51 pm
Location: San Jose, Costa Rica
Contact:

Post by skullfire »

This is great work ajs! I can see a lot of UIs based on this idea. This brings back some memories of a presentation on the GDC06 about wild tangent and its advertising in game technologies, where they created textures out of html with dynamic advertising that would be displayed on some polies... interesting idea, hated the advertising environment heh

Im going to try to test this soon
I may have alzheimer, but at least I dont have alzheimer.
User avatar
nikki
Old One
Posts: 2730
Joined: Sat Sep 17, 2005 10:08 am
Location: San Francisco
x 13
Contact:

Post by nikki »

Navi Overview wrote:The beauty of using the Navi library is that there are very many WYSIWYG (What You See Is What You Get) editors for HTML/CSS and almost every technologically-proficient person on the internet is familiar with the syntax.

Navi is so much more than just your average GUI solution, because we are essentially embedding Gecko (think Firefox), almost everything you can do with Web 2.0 you can do inside an Ogre3D application. Yahoo's UI library, Dojo, MooTools, SVG, XUL, AJAX, Flash (more on that later), you name it. Thanks to LLMozLib and Mozilla, Navi can do it (and you can too!).
Navi Overview wrote:There is no need to inject keyboard input because internally, LLMozLib captures such input and relays it to Gecko for you. Hold down keys while a textbox is focused and the key will repeat. Ctrl+C and Ctrl+V to copy and paste all work like normal.
Navi Overview wrote:Navi opens up an entire new dimension to Ogre3D Applications: the Internet. Use AJAX to fetch/send data without the need of an extra networking library, use Javascript to validate and extend the functionality of your Navi pages, use Flash to show video clips, etc! Get creative, get smart, get Navi.
Wow. That was so awesome, I just had to read the entire page. :)

This opens up a lot of possibilities. I'll dig into this after I complete my game (too lazy to switch from BetaGUI). :)
User avatar
ajs15822
OGRE Expert User
OGRE Expert User
Posts: 570
Joined: Mon Jan 02, 2006 2:05 am
Location: Texas
x 2
Contact:

Post by ajs15822 »

betajaen wrote:
ajs15822 wrote:
kneeride wrote:

Code: Select all

NaviManager::Get().navigateNaviTo("myNavi", "local://myTestPage.html", myData);
ajs15822, is it possible to feed the page's html from the application? (instead of reading from file)
No, we cannot feed pages directly into Gecko; at most we can do is tell Gecko where to look.
Actually you can, although I haven't tested this with Navi or even the Gecko engine - Just Safari.

According to the RFC2397, you can use "data" URI's to encode the actual data within the URL. Usually it's used for images, the latest craze is GreaseMonkey scripts with CSS overrides. All the images are encoded inside the CSS file. A neat little trick, which we can exploit.

The forum software won't recognise the link for some reason, so copy and paste the following into your location bar, hit enter and view the page source:

Code: Select all

data:text/html;BASE64,PGh0bWw+PGJvZHk+PGI+SGVsbG8gT0dSRTNEIHVzZXJzPC9iPjwvYm9keT48L2h0bWw+
Of course you don't have to use BASE64 for encoding, just in plain text. I would assume you'd have to escape certain characters there though:

Code: Select all

data:text/html,data:text/html,<html><body><b>Hello%20there</b></body></html>
So I'm positive if you pass this as a link to Navi, it should work. :D
NICE, thanks for the tip betajaen, it works without a hitch. :mrgreen:
User avatar
betajaen
OGRE Moderator
OGRE Moderator
Posts: 3447
Joined: Mon Jul 18, 2005 4:15 pm
Location: Wales, UK
x 58
Contact:

Post by betajaen »

ajs15822 wrote:NICE, thanks for the tip betajaen, it works without a hitch. :mrgreen:
Excellent!

If you want to use images without using an external file, both the URI:data trick for filenames in the CSS or an img tag will work. So in a sense, your using a URI:data hack in a URI:data hack.

Now I wonder if it's possible to use the lighttpd source embedded in the Ogre application for some AJAX goodness. :D
User avatar
ajs15822
OGRE Expert User
OGRE Expert User
Posts: 570
Joined: Mon Jan 02, 2006 2:05 am
Location: Texas
x 2
Contact:

Post by ajs15822 »

Proof of concept:

I encoded the entire 'Navi overview' page as a data URI, just to test the limits of actually how *much* data it could handle. Apparently, a lot.

I just navigated to the escaped URI in NaviDemo, and tada:

Image


If you want to try it yourself, I used this tool to make my data URI: http://software.hixie.ch/utilities/cgi/data/data

*Edit*:

NaviData 'technically' does something similar to what text/html Data URI's can do, only with NaviData, your page can decide what to do with the data.

If you wanted to mimic this behavior without using Data URI's, you could basically have a page like this:

Code: Select all

<html>
<head>
<script type="text/javascript" src="Navi.js"></script>
</head>
<body>
<script type="text/javascript">
if(pageNaviData.doesExist("myPageHTMLContent"))
    document.write(pageNaviData.get("myPageHTMLContent"));
</script>
</body>
</html>
However pure data URI's and the plethora of mime-types you can use really are the best option if you want your program to generate the pages on-the-fly. Weeee, I love this!
valtovar
Kobold
Posts: 30
Joined: Sat Sep 24, 2005 1:06 am

Post by valtovar »

hi
nice work.
I try to test and i have one error, my Ogre.log have:

[code]
16:36:51: Texture: cerulean.jpg: Loading 1 faces(PF_R8G8B8,512x512x1) with hardware generated mipmaps from Image. Internal format is PF_X8R8G8B8,512x512x1.
16:36:52: Texture: welcomeNaviMaskTexture: Loading 1 faces(PF_A8R8G8B8,1024x128x1) with 0 generated mipmaps from Image. Internal format is PF_A8R8G8B8,1024x128x1.
16:36:52: Texture: testNaviMaskTexture: Loading 1 faces(PF_A8R8G8B8,512x512x1) with 0 generated mipmaps from Image. Internal format is PF_A8R8G8B8,512x512x1.
16:36:52: Texture: controlsNaviMaskTexture: Loading 1 faces(PF_A8R8G8B8,256x256x1) with 0 generated mipmaps from Image. Internal format is PF_A8R8G8B8,256x256x1.
16:36:52: file:///H:\NaviLibrary 1.0 Source VC8SP1\Navi\NaviDemo\Bin\debug/NaviLocal/controls.html?DemoNaviData?msg=Welcome%20to%20Navi!
[/code]

and the app crashed :S any idea?
i have Direct3D + 1024*7** + windowed
User avatar
ajs15822
OGRE Expert User
OGRE Expert User
Posts: 570
Joined: Mon Jan 02, 2006 2:05 am
Location: Texas
x 2
Contact:

Post by ajs15822 »

valtovar wrote:hi
nice work.
I try to test and i have one error, my Ogre.log have:

Code: Select all

16:36:51: Texture: cerulean.jpg: Loading 1 faces(PF_R8G8B8,512x512x1) with  hardware generated mipmaps from Image. Internal format is PF_X8R8G8B8,512x512x1.
16:36:52: Texture: welcomeNaviMaskTexture: Loading 1 faces(PF_A8R8G8B8,1024x128x1) with 0 generated mipmaps from Image. Internal format is PF_A8R8G8B8,1024x128x1.
16:36:52: Texture: testNaviMaskTexture: Loading 1 faces(PF_A8R8G8B8,512x512x1) with 0 generated mipmaps from Image. Internal format is PF_A8R8G8B8,512x512x1.
16:36:52: Texture: controlsNaviMaskTexture: Loading 1 faces(PF_A8R8G8B8,256x256x1) with 0 generated mipmaps from Image. Internal format is PF_A8R8G8B8,256x256x1.
16:36:52: file:///H:\NaviLibrary 1.0 Source VC8SP1\Navi\NaviDemo\Bin\debug/NaviLocal/controls.html?DemoNaviData?msg=Welcome%20to%20Navi!
and the app crashed :S any idea?
i have Direct3D + 1024*7** + windowed
You compiled from source in debug mode? Be careful when running the debug-version, the debug-version of LLMozLib uses the debug-version of Gecko which inherently is VERY anal about everything (the smallest invalid HTML will cause it to assert).

What was the crash (probably an assert)? If it was a silent-crash, try attaching with Visual Studio to find the culprit.
User avatar
betajaen
OGRE Moderator
OGRE Moderator
Posts: 3447
Joined: Mon Jul 18, 2005 4:15 pm
Location: Wales, UK
x 58
Contact:

Post by betajaen »

Hey, I have an idea.

You could take advantage of the Ogre resource system, by creating a small function wrapper as URI:data's, by reading in the image data, "base64'ing" it and creating a URI:data string.

You could take it a step further with RenderToTexture. :)
User avatar
jacmoe
OGRE Retired Moderator
OGRE Retired Moderator
Posts: 20570
Joined: Thu Jan 22, 2004 10:13 am
Location: Denmark
x 179
Contact:

Post by jacmoe »

What a nice project, ajs15822! :o

At first I thought *sigh* yet another Ogre GUI.. :?

But then I began to realise just how powerful this is! :)
/* Less noise. More signal. */
Ogitor Scenebuilder - powered by Ogre, presented by Qt, fueled by Passion.
OgreAddons - the Ogre code suppository.
User avatar
ajs15822
OGRE Expert User
OGRE Expert User
Posts: 570
Joined: Mon Jan 02, 2006 2:05 am
Location: Texas
x 2
Contact:

Post by ajs15822 »

betajaen wrote:Hey, I have an idea.

You could take advantage of the Ogre resource system, by creating a small function wrapper as URI:data's, by reading in the image data, "base64'ing" it and creating a URI:data string.

You could take it a step further with RenderToTexture. :)
Oh wow, what a fantastic idea. This is definitely do-able, I'll get right to it!

:shock:

Also after a little contemplation of programmatically creating HTML files and transferring them to Gecko using data URI's, I realized that the flaw in this is the inability to use local protocol specifiers (local://) to access local resources (such as MyPage.css, other local pages, etc.).

Therefore, I am making a few API changes to allow the translation of such local resource specifiers (which fits in nicely with your new idea), let me break it down:

Pure-programmatically generated pages will not be able to be sent NaviData because currently that conflicts with how data URI's work. Instead, a user will have to do his own dynamic editing of data. For example, let's say we want to create a dialog box that displays a message and then lets the user click 'OK'.

Programmatically, this is done something like this:

Code: Select all

std::string myDialogMessage = "Click OK to close this box";
std::stringstream myDialogPage;

myDialogPage << "<html><head><script type="text/javascript" src="local:\\Navi.js"></script>";
myDialogPage << "<script type="text/javascript">";
myDialogPage << "function SendClick(){ NaviData myData = new NaviData("DialogClicked"); myData.send();";
myDialogPage << "</script>";
myDialogPage << "<link rel="stylesheet" type="text/css" href="local:\\myDialogStyle.css" />";
myDialogPage << "</head><body>";
myDialogPage << "<center>" << myDialogMessage << "</center>";
myDialogPage << "<br/><br/><input type="button" class="myButtonStyle" id="okButton" value="OK" onclick="SendClick()"/>";
myDialogPage << "</body></html>";
Then all you would need to do is make the Navi and navigate it to this programatically-created page like this:

Code: Select all

NaviManager::Get().createNavi("myDialogNavi", toDataURI(myDialogPage.str()), Center, 256, 256);
The toDataURI(std::string) function would basically replace all instances of 'local://' with the correct 'file:///C:\My\Application\Directory\NaviLocal\' equivalent and then subsequently encode the resulting string into a data URI.

We can use the same sort of thinking to do something like this:

Code: Select all

<img src="image://General/MyOgreResourceImage.png" />
Where 'General' is the Resource Group Name, and 'MyOgreResourceImage.png' would be the actual filename of the image resource.

Wow, this is so exciting!
User avatar
betajaen
OGRE Moderator
OGRE Moderator
Posts: 3447
Joined: Mon Jul 18, 2005 4:15 pm
Location: Wales, UK
x 58
Contact:

Post by betajaen »

Code: Select all

<img src="material://MyMaterialName" />
Why not take it further and replicate some of the features with materials. ;)

[Edit]

Thinking about it's not going to work. You could do a Material -> CSS converter though.
User avatar
ajs15822
OGRE Expert User
OGRE Expert User
Posts: 570
Joined: Mon Jan 02, 2006 2:05 am
Location: Texas
x 2
Contact:

Post by ajs15822 »

betajaen wrote:

Code: Select all

<img src="material://MyMaterialName" />
Why not take it further and replicate some of the features with materials. ;)
ah and do a render-to-texture of a material? That is totally plausible but would also require some size specification as well, methinks.

Wow, and then while we're running with this idea, why not apply this to everything else!

We could use a generic resource protocol-syntax "resource://[Resource Group Name]/[Filename].[File Type]" to later replace with the correct data-URI-encoded resource.

For example, let's say we have "MyStyle.css" inside a local resource group "SexyGroup".

Inside our programmatically-generated page, we can do this (yes, putting a data URI in the 'HREF' attribute of a 'LINK' tag works, I just tried it).

Code: Select all

<html>
<head>
<link rel="stylesheet" type="text/css" href="resource://SexyGroup/MyStyle.css" />
</head>
<body>
Testing 1 2 3
</body>
</html>
In the toDataURI(std::string) call, it would attempt to replace all 'resource://stuff/here' instances with an encoded data URI of the content of that resource:

Code: Select all

data:text/css;,body%20%7B%0D%0Abackground-color%3A%20%23000000%3B%0D%0A%7D%0D%0A
This can apply to entire pages, images, sounds, flash, javascript, etc.!
User avatar
betajaen
OGRE Moderator
OGRE Moderator
Posts: 3447
Joined: Mon Jul 18, 2005 4:15 pm
Location: Wales, UK
x 58
Contact:

Post by betajaen »

I prefer background:HotPink for my SexyGroup, it's less kinky than Black. ;)

I had an idea; Could you use flash or some lightweight plugin into the Mozilla library, to poll a custom URL, data:URI or even a pointer to the image itself to get a live RenderToTexture?

It would be certainty faster if it was handled through C++ and closer to Ogre than Javascript?
User avatar
ajs15822
OGRE Expert User
OGRE Expert User
Posts: 570
Joined: Mon Jan 02, 2006 2:05 am
Location: Texas
x 2
Contact:

Post by ajs15822 »

betajaen wrote:I prefer background:HotPink for my SexyGroup, it's less kinky than Black. ;)

I had an idea; Could you use flash or some lightweight plugin into the Mozilla library, to poll a custom URL, data:URI or even a pointer to the image itself to get a live RenderToTexture?

It would be certainty faster if it was handled through C++ and closer to Ogre than Javascript?
Flash/Javascript (see below link) possibly. Almost any plugin that would normally work with Gecko can theoretically work with Navi.

However I must daresay that this would not be very efficient, it would be much much faster to just create an overlay inside an active Navi and do a render-to-texture on that.

Found something perfectly relevant to this topic:
http://www.codeproject.com/Ajax/AJAXVideoPlayer.asp
Post Reply