Tabs and Windows

I am working on support for multiple browser tabs. Good old weblin had only one room per browser window. If you changed the tab, then you changed the room. If you switched between tabs very often, then you switched between rooms all the time.

For the OVW client we will support multiple tabs in the same browser window. Each tab will join a chat room. If you change the tab, then you stay in the room. The client will always show the avatars of the visible tab. If the tab is changed, then the next set of avatars will be shown and avatars of the hidden tab will be made invisible.

With weblin there was only one avatar display for each room. If you opened the same page twice in two different browser windows, then you saw avatars only on one of them. The other browser had no avatars. This was sometimes confusing. Now, there will be avatars on all browser windows, even if they show the same page. You can chat in one browser and see the chat also in the other window. You move your avatar in one browser and it magically also moves in the other browser. This is made possible by a real MVC implementation. The avatars will be duplicated. They are just a view of the scene model.

We currently have a Firefox plugin. But of course, we also need IE and Chrome. These plugins are much more complex, than the simple windows message hook of weblin. In other words: they are more work. But they will provide much richer features in the future and ... tabs.

Here is more: http://blog.wolfspelz.de/2011/06/more-ovw-progress.html

Avatar Display

Do you see the difference?

On the left is the new OVW client. On the right is a Weblin display. The OVW client still lacks the points below the nickname. But it has a green glow around the nickname instead. Otherwise, they look almost identical. That's the point.

There is now an avatar display in the new OVW client. It is programmed in HTML and JavaScript with support from the C++ core.

There are still features missing. For example, avatars do not walk yet, they slide. But there has been significant progress. Because of the HTML/JavaScript environment, we can use jQuery for effects and event handlers. This makes programming very quick - and fun.

Just as an example, here is how the nickname is changed. It is a piece of JavaScript code:

  ...
 SetAvatarNickname: function (hParticipant, sNickname)
 {
   $('#' + hParticipant + ' .cNickname').html(EscapeHTML(sNickname));
 },
 ...

Pure JavaScript with jQuery. Very simple.

Windows and Dialogs

Based on Brent's WebKit transparency feature I created 2 modules:

1. a WebView module, which manages transparent browsers of any kind
2. a Dialog module, which shows a dialog frame and the real content inside

1. WebView Module

The WebView module is used for all user interface elements. For a settings dialogs, for a chat window, for avatars on Web pages, for toast windows. Everythng you can see on the screen.

The display of WebView windows is completely created by HTML. Dialogs are designed with HTML, images, CSS, Javascript. The main reason for using WebKit as a user interface engine is portability. Modules and dialogs created with HTML will run on all platforms.

WebKit makes the user interface platform independent. Besides, it is really fun to program the user interface in HTML/Javascript.

2. Dialog Module

The Dialog module configures window border and window controls. The outside is identical for all dialogs. The window content is managed by whatever HTML page is put inside, be it a local page from the file system or a remote Web page.

Examples: an inventory window and the current test dialog.

The window can be styled with CSS. We have themes. I present the beloved - and sometimes passionately hated - wood theme:

Do you prefer the Mac theme?

Remember: it's all HTML. You can tell, that it is HTML from the small (reload) button on the window border. This button is for testing only. It will disappear later.

Next is the avatar display.

Transparent Browser Bounty Awarded

We have the construction!

Brent's changes to the WebKit code have been added to the trunk (http://trac.webkit.org/changeset/84990).

WebKit can now be used as a transparent browser. Brent also made a sample for how to do Javascript calls between the browser engine and C++.

We now have an HTML renderer at our disposal to create a UI with web technologies. Expect UI development soon.

The Open Virtual World project awards the bounty to Brent for step 1 and step 2. We agreed to redefine steps 3 and 4 for more advanced features later. We thank Brent for his contribution to the project. This was really fun.

(We also thank Lupus Labs for sponsoring the OVW project, which made sponsoring of a WebKit feature possible.)

OVW Transparent Browser Bounty About to be Claimed

Brent Fulgham is currently working on the transparency feature for WebKit. Brent is the developer of the WebKit-Cairo port. It looks like the bounty will be claimed soon. Here are first impressions of the test.

What does this mean for the project? We will soon be able to start working on the GUI. The GUI is the last missing part of the new OVW avatar client. Thanks to Brent, the GUI will be purely HTML based. That's the future folks: Web technologies, CSS, HTML, SVG, Canvas, WebGL.

Later we might also incorporate the multi-process rendering and WebGL developments of WebKit. This means, that rendering will be even faster in the future and we can support real 3D avatars.

Also, thanks to Lupus Labs for sponsoring this open source bounty.

OVW Transparent Browser Bounty

The OVW project needs a transparent browser as GUI platform. Transparent browser means, that if I set CSS transparency of the HTML-body to 0.5, then I want to see the desktop partially. All graphics and dialogs of the OVW client will be displayed by this browser. There will be no other native windows or GUI components. There are so many other things to do in the OVW project. We would like to outsource this task to people who have browser library know how. We would like to sponsor your open source work, and work on other OVW parts in the meantime.

The transparent browser will be used by a OVW client plugin module. We will wrap the OVW specific module around the transparent browser library. What we need is a transparent browser DLL, which our GUI module DLL can use. To be able to integrate the transparent browser into our project, we need a MS VisualStudio project which compiles all required components, links them into one or more DLLs and has a driver program which teaches us how to use the transparent browser. We would like to add features later, hence the need for a compileable project, not just a release DLL. Yes, we know that we can build WebKit from SVN, but it's not simple and there is so much else to do.

Key properties of the project:

• transparent browser, no default window background
• in other words: window alpha channel controlled by CSS only
• only libraries which can be distributed with a BSD like license
• Cairo or Skia does not matter, but not CoreGraphics
• Synchronous calls into and out of the browser's Javascript
• normal performance, meaning no bad hacks, which make transparency, but harm performance
• Keyboard input and mouse move, click, scroll
• IFRAME-Support
• max. 20 MB for everything needed before compression
• better no app installation required, no registry prep, just plain DLLs
• preferably as MS Visual Studio 2005 Project, 2008 possible
• Release + Debug builds
• Unicode and CJK-script support, right-to-left script is nice to have
• BSD license

Chromium comes to mind as a base technology because this is where the buzz currently is. There are also Chromium derivatives like Awesomium and Berkelium which could be a starting point. Pure WebKit is also an option. We might migrate to speedy Javascript, out-of-process rendering, and WebGL later. Gecko is also possible.

The bounty is max. 4.000 € in 4 steps:

• 1 k € for a DLL which paints a web page on a transparent window incl. a sample driver program (which has a URL input). We can compile it.
• 1 k € for keyboard/mouse input, IFRAME support, and max 20 MB.
• 1 k € for synchronous calls with arguments between the driver program and the Javascript engine. Int and String type arguments should be enough, Dictionary arguments would be cool. BeforeNavigate, DocumentComplete notifications similar to the MSIE component.
• 1 k € for additional cool stuff to be defined later, e.g. MSVC 2005 because it lets us omit recent C runtime libs making the package smaller, helping us actively to use the thing, shrinking to 10 MB including all support DLLs (beware of the ICU data DLL), WebGL support, DOM API support, helping us to channel HTTP over the OVW client's HTTP component, etc.

More about the Open Virtual World project: http://www.OpenVirtualWorld.com

First Avatar

I started programming the avatar display. The image shows my test avatar on a test scene.

The test scene uses the scene graph module.

The avatar is already animated. An animation module decodes the old animation format and the animated GIF files and feeds images to the avatar display.

There is no web browser in the background, yet (the background is my Visual Studio). The avatar does not enter a real chat room. This is still a test. The overlay is created by a test function. The test function creates the avatar, assigns an animation, etc. The reason is, that I can develop the display quicker, more reliable, and without network connection. I do not have to open a browser and enter a chat room. The test just pretends that there is a browser and an avatar.

Later, when the avatar display works, then it will be connected to a browser and operated by a real chat room.