History: NaviLibrary

Source of version: 8 (current)

!!What is Navi?
{IMG(src="img/wiki_up/Navi1.3.jpg",thumb="y",button="y",rel="box[g]",width="320",imalign="right",align="right",alt="thumb|Navi v1.3 in action")}{IMG}
It all started with a single question: ''Couldn't we just make GUI's using HTML?''

A few months later and a lot of tinkering with [http://en.wikipedia.org/wiki/Gecko_(layout_engine)|Gecko] and [http://www.ubrowser.com/llmozlib.php|LLMozLib], NaviLibrary answered: ''__yes.__''

The beauty of using NaviLibrary is that the languages used (HTML, CSS, JS) are stable, widely-documented, and popular. The learning curve is shallow (as opposed to having to learn a proprietary syntax), development goes fast due to fast-prototyping (plethora of WYSIWYG editors), and existing web design talent is easy to find (heck, who doesn't know HTML nowadays?).

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!).

!!!Features
* __Movable__ - Navis are ''movable''. Simply right-click and drag to move a Navi around the window.
* __Alpha-Masking__ - Navis can dynamically be masked using an alpha-mask.
* __Color-Keying__ - Navis can be also make use of dynamic color-keying to replace a certain color with another color + opacity. As of v1.2, Navi can also do 'fuzzy' color-keying (with subsequent calculation of relative opacity based on color distance of individual pixels)!
* __Dynamic Opacity__ - Navis can change opacity easily and dynamically.
* __Transparency affects interaction__ - If a user hovers their mouse or clicks in an area of a Navi that is transparent (less than 5% opacity) the input will not be registered. Your alpha-mask/color-key/opacity settings actually affect how a user interacts with a Navi!
* __Absolute and Relative Positioning__ - Navis can be absolutely and relatively positioned on the screen. Relatively positioned (Top-Left, Top-Center, Top-Right, Right, Bottom-Right, Bottom-Center, Bottom-Left, Left, Center)
 Navis are not able to be moved however they dynamically reposition themselves when the render window is resized.
* __Smart Input Injection__ - NaviManager manages and translates all mouse input for you. When injecting inputs, a boolean return value may specify, for example, whether the current mouse position is over a Navi or not.
* __Efficient__ - Navis are very efficient; they are smart enough to only update their internal texture when something on the page has changed.
* __Update Limiting__ - If you find that Navi updates too often (pages with animated javascript may cause the page to update over-actively), you may limit the number of Updates per Second.
* __Z-Order Popping__ - Navis change Z-Order and move on top of other Navis when they are selected.
* __No Need for Key Injection__ - 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.
* __Programmatic Navi Page Creation__ - Thanks to [http://en.wikipedia.org/wiki/Data:_URI_scheme|DataURI's], you may 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.
* __Local Specifiers__ - Navi can be pointed to local directories through use of the 'local://' prefix. Local means relative to the 'NaviPages' folder of the directory of the running executable. You can tell the NaviManager to point 'local://' to another folder if you wish. 
* __Ogre Resource Utilization__ - Again thanks to DataURI's, you can 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.
* __Javascript Evaluation__ - You can execute/evaluate arbitrary Javascript in the context of the page that the Navi is currently navigated to! This is incredibly useful and makes updating/accessing page content a breeze.
* __NaviMaterials__ - 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. If you're looking to embed a Navi inside of another Ogre3D ((-GUI)) library, you may derive a TexturePtr from this material and apply it to anything you like.
* __The Web at your Fingertips__ - 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.

!!!Example Usage
Calling a javascript function from inside Ogre:
{CODE(wrap="1", colors="c++")} //Passing a function to a Navi object pointer named NaviWidget.
 NaviWidget->evaluateJS("nameOfJavascriptFunction(?)",Args("ExampleParam"));{CODE}

!!!NaviLua


MadMark has graciously provided Lua bindings for NaviLibrary. Please [http://navi.agelessanime.com/wiki/index.php/Navi_Lua|go here for more information].

!!XUL
''XML User Interface Language''

One being the ability to skin the Mozilla-engine it with CSS, so the "native" scrollbars and widgets can blend perfectly with your UI without you having to write your own scrollbars in JS, and the other one, which I am only beginning to explore is the use of XUL. It gives you access to a whole set of ready made "native" skinnable widgets and dialogues with a nice performance gain compared to selfmade DHTML widgets, and you don't have to reinvent the wheel over and over. I would go as far as to say the use of XUL within Navi could be a solid alternate to the use of native GUIs outside the renderwindow. XUL is also what firefox, mozilla & plugins are using for their own GUI. --[http://www.ogre3d.org/forums/memberlist.php?mode=viewprofile&u=8318|Nauk]

__Benchmark:__ Comparing a treeview control
{CODE(wrap="1", colors="c++")}    Rendering Speed            DHTML Tree        XUL Tree
    Small Tree (20 nodes)      30 ms             15ms
    Medium Tree (200 nodes)    421 ms            62 ms
    Large Tree (2000 nodes)    4400 ms           650 ms{CODE}

!!Links


* [http://princeofcode.com/forums/viewforum.php?f=11|Navi Forums - The official forum]
* [http://navi.agelessanime.com/wiki/|NaviWiki - Navi Wiki (Old)]
* [http://navi.agelessanime.com/forum/|NaviBB - Old official forum]
* [http://www.ogre3d.org/forums/viewtopic.php?t=32384|Original Ogre3D Forum Topic]
* [http://www.ogre3d.org/forums/viewtopic.php?t=38623|Version 1.5 Ogre3D Forum Topic]
* Nice [http://www.xml.com/pub/a/2007/01/31/xul-enhanced-web-apps.html|XUL overview article] with a speedchart at the end (you should open it with a mozilla based browser)
* Mozilla's [https://developer.mozilla.org/en/XUL_Reference|XUL reference] - Huge list of widgets

---
Alias: (alias(Navi))
History: NaviLibrary

Source of version: 8 (current)

Search by Tags

Latest Changes

Search

Online Users
