Navi

[ajs15822]

A sneak peek of what's coming soon

How is that color-keying going to work? Specifically, will Navi let clicks through if the mouse is over a transparent region? I want to cover the whole screen (within the powers of 2 limitation) with one navi and create the GUI entirely in javascript/ajax.

Hah! You're so sharp! You've already guessed one of the new features for the next Navi release, we must think along the same lines. Let me shed a little light:

Color-Keying: You may now specify a single color for Navi to dynamically 'key-out' with another color. This replacement color can also be specified with a custom opacity as well. Color-Keying may be used independently or concurrently with Alpha-Masks to achieve the desired result.

For example, let's say you wanted a rounded chat window (alpha mask) with a semi-transparent black textbox background but you don't want the actual text to be semi-transparent. By using Alpha-Masks with Color-Keying, this can be achieved.

Also, if you use a dark key-color with white text, it will add a fantastic vignette to the white text that allows readability on dark and light backgrounds! (What an elegant reuse of a side-effect, huh?)

Ignore Transparent Pixels: Alpha-masks/color-keying aren't just for looks anymore! Navi now (by default) ignores mouse-clicks/hovers over pixels with less than 5% opacity. You may turn off this behavior or change the threshold.

The combination of programmatic Navi page creation via Data URI's, dynamic color-keying, and the ignorance of transparent pixels would allow users of the Navi Library to finally enter the procedural-driven arena.

There's much more to come than just that, just wait a little while and see.

[Chaster]

I have nothing to add other than, once again, this is AWESOME!

[capture]

I noticed you have googles homepage ingame. I am wondering would it be possible to somehow put in some google adds in game, like of the side of the user interface

[vmh]

I noticed you have googles homepage ingame. I am wondering would it be possible to somehow put in some google adds in game, like of the side of the user interface

I suppose that you could. Google might not like it, but then again, I'm no lawyer.

A site or third party cannot display our ads, search box, search results, or referral buttons as a result of the actions of any software application such as a toolbar.

https://www.google.com/adsense/policies?hl=en_US

[ubrowser]

Hi everyone - I wrote LLMozLib/uBrowser and someone asked me to come comment on this thread about the status of Flash support.

It's in progress and very close - it's mostly just a case of integrating the new work into the main code base and bringing all the different development threads together. No timescales since I'm distracted a lot at work now but it shouldn't be too much longer.

As far as cross platform goes, there are versions internally for Mac and Linux which I will also expose as part of the "Gathering"...

Keep up the good work - great to see if being used like this.

ajs15822: I'd appreciate a mention/link in the source archive so people know where to get the latest version.

Cheers.

Callum.

[ajs15822]

Hi everyone - I wrote LLMozLib/uBrowser and someone asked me to come comment on this thread about the status of Flash support.

It's in progress and very close - it's mostly just a case of integrating the new work into the main code base and bringing all the different development threads together. No timescales since I'm distracted a lot at work now but it shouldn't be too much longer.

As far as cross platform goes, there are versions internally for Mac and Linux which I will also expose as part of the "Gathering"...

Keep up the good work - great to see if being used like this.

ajs15822: I'd appreciate a mention/link in the source archive so people know where to get the latest version.

Cheers.

Callum.

Fantastic! I'm really excited to hear such positive news.

Also, I'll make an effort to mention LLMozLib in the next release, thanks again for this awesome library.

[Nauk]

Implementing it right now into our game, so looking foward to do the UI now! Doing it with all the power and simplicity of HTML & JS is going to be such a breeze

[Zeal]

Oooh good news about flash, sounds like its not too far off..

In the meantime, I have a nitpicky request - you should consider changing the namespace to just 'Navi'. You picked a short and sweet name for the library, you might as well make use of it (so people dont have to use 'using namespace' if they dont want to).

It would also be nice if there was a (optional) 'title bar' that we could attach to our navis, so they could be moved around easier (like a normal window). I think it would be a lot more intuitive than expecting people to right click to move.

[jacobb]

In the meantime, I have a nitpicky request - you should consider changing the namespace to just 'Navi'. You picked a short and sweet name for the library, you might as well make use of it (so people dont have to use 'using namespace' if they dont want to).

you can always use a namespace alias like so

namespace Navi = NaviLibrary;

[madmark]

I've made a number of attempts to get this kind of library going but have always come up against other competing priorities. So thanks!

Anyway, I have it all working in my app, but (you knew there would be a "but") it crashes on exit. It looks like the Ogre overlay manager is trying to delete the Navi overlay that the Navi shutdown already deleted.

If I disable the Navi destructor from deleting the overlay, all is well.

Is it just me?

Using the source zip of 1.4.1 in downloads.

[ajs15822]

I've made a number of attempts to get this kind of library going but have always come up against other competing priorities. So thanks!

Anyway, I have it all working in my app, but (you knew there would be a "but") it crashes on exit. It looks like the Ogre overlay manager is trying to delete the Navi overlay that the Navi shutdown already deleted.

If I disable the Navi destructor from deleting the overlay, all is well.

Is it just me?

Using the source zip of 1.4.1 in downloads.

Hmmm, I haven't encountered anything like that. There is certainly an assert in the debug compilation of the library when exiting due to a bug in the Gecko version that LLMozLib is compiled with. Are you sure you're not confusing that with this? Regardless, I'll investigate this.

[ajs15822]

NaviLibrary v1.1 has just been released!

Updates include:

• 'Proper' popping of Z-Orders - Now when you select a Navi that is occluded by several other Navis, it will 'pop' to the front much more naturally. (As you would expect)
  
  Programmatic Navi page creation - Thanks to DataURI's, you may now create the pages that a Navi can navigate to at runtime. Simply define a string with all the HTML in it (escaping where necessary). You may use "local://" and "resource://" (see below) specifiers inside this HTML string to refer to other resources. You can create a Navi from this or navigate an existing Navi to this HTML like this:

  Code: Select all

  std::string myPage = "<html><body><p>Hello world!</p><img src=\"local://myImage.jpg\" /></body></html>";
  NaviManager::Get().createNavi("myProgrammaticNavi", htmlToDataURI(myPage), Center, 512, 512);
  
  OR
  
  NaviManager::Get().navigateNaviTo("myProgrammaticNavi", htmlToDataURI(myPage));

  
  Ogre Resource Utilization - Again thanks to DataURI's, you can now use an Ogre Resource (.html/.js/.css/.jpg/etc.) as a Navi page or use the "local://" and "resource://GroupName/FileName.ext" specifiers inside 'parsed' pages (programmatic pages and pages loaded from an Ogre Resource). If speed is your main concern, it's still best to just use the regular "NaviLocal" method.
  
  Dynamic Color-Keying of Navis - You may now specify a color for a Navi to 'key out' with a different color+opacity. This is incredibly useful in so many scenarios (especially when coupled with programmatic Navi page creation) and can also be used concurrently with Alpha-Masking to produce the result you want. (Tip: A dark color-key combined with white-text produces an excellently subtle vignette for readability on dark/light backgrounds!)
  
  Ignorance of Transparent Pixels - NaviManager, now by default, ignores mouse hovers/clicks over 'transparent' areas of a Navi. 'Transparent' is, by default, defined as less than 5% opacity. You can turn off this behavior or change the threshold to something else. This new feature, combined with Color-Key and/or Alpha-Masking, defeats the texture-size limitation and allows for countless possibilities in UI design.
  
  The introduction of NaviMouse - You may (optionally) utilize the NaviMouse capabilities of NaviManager. NaviMouse allows you to activate a plethora of user-defined 'NaviCursors' that can be animated or static.
  
  You may also specify a 'hotspot' (useful for crosshair/move cursors) to specify the exact pixel that the cursor is referring to on clicks.
  
  When adding frames to a NaviCursor, you simply specify the duration (in milliseconds), filename of the image (must be 64px/64px or more), and the optional resource group to look in. Use a duration of '0' to lock a NaviCursor to that frame. NaviCursors automatically loop through all available frames.
  
  For example, this is how NaviDemo starts up the NaviMouse and creates the cursors for use in the demo (NaviCursor::addFrame(...) returns a pointer to the NaviCursor):

  Code: Select all

  	// Startup NaviMouse and create the cursors
  	NaviMouse* mouse = NaviManager::Get().StartupMouse();
  	NaviCursor* defaultCursor = mouse->createCursor("fadingCursor", 3, 2);
  	defaultCursor->addFrame(1200, "cursor1.png")->addFrame(100, "cursor2.png")->addFrame(100, "cursor3.png")->addFrame(100, "cursor4.png");
  	defaultCursor->addFrame(100, "cursor5.png")->addFrame(100, "cursor6.png")->addFrame(100, "cursor5.png")->addFrame(100, "cursor4.png");
  	defaultCursor->addFrame(100, "cursor3.png")->addFrame(100, "cursor2.png");
  	mouse->setDefaultCursor("fadingCursor");
  
  	// If you define a "move" cursor, NaviMouse will automatically use that when you move a Navi
  	NaviCursor* moveCursor = mouse->createCursor("move", 19, 19);
  	moveCursor->addFrame(0, "cursorMove.png");
  

  NaviMaterials - Want to use a Navi as more than just a GUI element? Well now you can!

  Code: Select all

  std::string NaviManager::createNaviMaterial(const std::string &naviName, const std::string &homepage, unsigned short width, unsigned short height, unsigned int maxUpdatesPerSec, bool forceMaxUpdate, float opacity, Ogre::FilterOptions texFiltering)

  NaviMaterials are simply Ogre Materials (the above API call returns the name of the Ogre Material) that you can apply to any Ogre Entity of your choosing. They act just like any other Navi except that they lack an overlay. The only catch is that you must handle all mouse input injection into these NaviMaterials. You must derive the mouse coordinates (probably by using your favorite physics library) of where the user clicked/hovered and inject the input using the "NaviManager::injectNaviMaterial...(...)" API calls.
  
  Note: NaviMaterials don't have to be used on Ogre Entities! With the Ogre Material name, you can derive the internal TexturePtr and ultimately use NaviMaterials inside of other GUIs. Just remember to use Ogre::FO_NONE as the texFiltering when creating the NaviMaterial.

I'm afraid that if I don't release this latest version now, I'll be forever wrapped up in adding/refining features. So, here it is!:
Download NaviLibrary 1.1 Source VC8SP1.zip

[madmark]

I am very sure this is not an assert. It is trying to dereference a pointer with the value of 0xfeeefeee, which is the Ogre's memory manager way of saying "you are using a deleted pointer you schmuck".

The pointer is the panel element attached to the Navi overlay.

I am downloading v1.1 and will report back when I get that up to speed.

NaviMouse is actually the very next thing I was planing on looking into... fantastic!

UPDATE: A bit more info.

I am still getting this problem with the 1.1 release.

The crash happens deep inside Ogre/STL std::list, the call stack shows it downstream from "remove2D" (OgreOverlay.cpp Line 137). The object it is deleting is an OverlayContainer named "googleNaviPanel" (I named the test Navi "googleNavi", guess the content )

Tracing further up the tree, the crash is from the Ogre root destructor and not the Navi shutdown. Past the following code.


The NaviLibrary shutdown code is in my windowClosed(Ogre::RenderWindow* rw) function:

Code: Select all

NaviLibrary::NaviManager::Get().destroyNavi("googleNavi");
NaviLibrary::NaviManager::Get().Shutdown();

If I comment out line 153 of Navi.cpp (v1.1) (if overlay delete) all is well.

Of course, it doesn't happen in NaviDemo...

[madmark]

Quick question...

Would anyone be interested in a Lua binding of the Navi Library?

[tau]

I'm so excited to use AJAX with this UI lol
But I'm kind of serious here - I'm going to add a small web-server to the game, so I can make it react on the events inside Navi.

[ajs15822]

Hey madmark, sorry for underestimating you:

In the Navi destructor, try changing this:

Code: Select all

if(overlay) OverlayManager::getSingletonPtr()->destroy(overlay);

to this:

Code: Select all

if(overlay)
{
	overlay->remove2D(panel);
	OverlayManager::getSingletonPtr()->destroyOverlayElement(panel);
	OverlayManager::getSingletonPtr()->destroy(overlay);
}

[jacmoe]

Would anyone be interested in a Lua binding of the Navi Library?

That would be very nice!

[vmh]

I'm going to add a small web-server

You might be interested in this. I made it for use with Navi, but haven't actually tested it with Navi yet. I was lazy - it's multithreaded and windows dependent, so you'd have to do your own locking. MIT license.

Oh yeah, the internal string parsing is a bit silly at the moment, because I'm not used to parsing strings in C++.

[ajs15822]

I'm so excited to use AJAX with this UI lol
But I'm kind of serious here - I'm going to add a small web-server to the game, so I can make it react on the events inside Navi.

For me, I haven't found the need to take it that far yet (though I have been playing with lighttpd).

To update existing Navis with new content, I simply call

Code: Select all

NaviManager::navigateNaviTo("existingNavi", newNaviData);

As long as the Navi is fairly static (doesn't use scrollbars), this works like a charm in most cases.

I worked very hard trying to find a way around essentially navigating to a "new page" and have realized that there is no other (sane) way except using Mozilla's XPConnect.

[ajs15822]

Would anyone be interested in a Lua binding of the Navi Library?

That would be very nice!

Indeed it would! Saves me some work

[madmark]

Hey madmark, sorry for underestimating you:

No problem, happens all the time. Comes with the territory of having the handle "MadMark"

That worked like a charm!

That would be very nice!

I will make my wrapper available then. It will have to be modified a bit since I use the CLua interface that was detailed in my book, but I can go back and devolve it for the masses. I will make my CLua stuff (the wrapper and the object) available too for the Thousands that bought my book (Jim and Erma Thousand, that is)


Now a serious question:-

As hinted above, I am writing a Lua wrapper for the library and I am working on NaviData. I would love to pass the NaviData params as a Lua table (sort of like a std::map) to the Lua NaviData handler. The implementation uses std::string stuff (I sort of expected a std::map). Do you think it would be worthwhile to provide an iterator to run through all the params or maybe a method to fill in a std::map?

I'll be writing one or both of these soon (i.e. now), so if you want the function to include in the next release, let me know. I may completely hack the current implementation and replace with std::map based storage, but that might be too radical for release.



Little nit: There is a syntax error in the JavaScript "sendMessage" example on the web page.

Code: Select all

NaviData myData = new NaviData("myMessage");

should be

Code: Select all

var myData = new NaviData("myMessage");

I giggle only because I am now working in 4 languages (C++, C#, Lua and JavaScript) and this happens all the time to me. Nice to know it isn't only me.

[ajs15822]

@madmark

The C++ implementation of the NaviData object was designed to mirror the Javascript implementation (handling everything internally as a single Data string). It would be trivial to use a std::map instead but I (at the time) felt that it would be irresponsible to create a std::map for each NaviData object.

If you haven't written it already, I'd gladly extend the C++ NaviData implementation to create a std::map from the internal representation. Something like:

Code: Select all

std::map<std::string, std::string> NaviData::getDataMap()
{
    std::map<std::string, std::string> dataMap;
    
    // Parse data string and fill in map

    return dataMap;
}

Thanks for the fix. I'm migrating the website to a wiki right now.

[byteasc]

Is the LLMozLib libraries/header included with Navi, the original ones from the UBrowser page?

I am just curious since your build is for VC8, and would like to experiment with LLMozLib outside of Ogre/Navi

[ajs15822]

Is the LLMozLib libraries/header included with Navi, the original ones from the UBrowser page?

I am just curious since your build is for VC8, and would like to experiment with LLMozLib outside of Ogre/Navi

The LLMozLib header and compiled libs in the 'Dependencies' folder are personally compiled from source and slightly modified to work with VC8.

Aside from what was needed to get it to compile under VC8, nothing was modified from the original implementation.

[AticAtac]

First, great gui-lib and idea !

Overlays having to be of size of power of 2 "hurts" and should be changed by internally managing different textures of power of 2 and transparent areas.

I want to use a Navi of size 800x600, what do i have to do ?
Obviously i cann't set the width-size of Navi to 800.