HTML and Flash in Panda with Awesomium

Hi there,

here’s a sample that demonstrates the integration of Panda with Awesomium http://princeofcode.com/awesomium.php.
Visit the link to see more of its features.

Awesomium is a C++ library that enables you to embed web content in your applications. Specifically, it uses a headless Chromium for rendering the content in a memory buffer that you specify. In case you don’t know, Chromium is Google’s port of Webkit for use in its Chrome browser. Since Chrome works well only in Windows at the moment, so does awesomium. However Google is working on porting Chrome.

The sample isn’t terribly usable, it just demonstrates that you can easily integrate awesomium without any C++ code because I provide the Python bindings for awesomium. Check the bindings folder in the archive. Also, I haven’t tested this thoroughly, it seems to have some issues when the size of the awesomium texture is not a power of 2.

To run the sample I suggest the following:
-copy from the archive the sample/ folder under $PANDA_HOME/samples
-move Awesomium.dll, icudt38.dll and pawesomium.pyd to $PANDA_HOME/bin
-then ppython awesomium.py

Or you can see it in youtube but the quality isn’t great: youtube.com/watch?v=H6oK8ijpqMU
You can find the sample and the python bindings here: megaupload.com/?d=WDBWS1Z4

Finally a screenshot:

Hope it will be useful to someone.

Regards!

Flash movies could make great cartoon cinematics and ui elements. Has anyone played the Penny Arcade game? They used Flash for their intro animations.

Correct me if I’m wrong but THIS CHANGES EVERYTHING! Its now a race to see who can make the coolest panda browser.

Seeing that soon we will also have a browser plugin for p3d someone could use a minimal version of their browser to be used as their homepage in firefox, acting as a middleman for interacting with the rest of the uncivilized internet.

Hypothetical question: What plugin would you add to your own browser if it was 3d and used python??

Why would you do that? I’m having trouble seeing what the purpose of this would be.

The facts:

  1. Browsers don’t currently render 3d scenes.
  2. Browsers have nice features like file caching, security, and many others.
  3. You can combine them together to take advantage of both systems.

An there you have a 3d scene navigator that will work within your browser of choice.

Distribution: upload app to webserver, upload page.html with object tag referencing the plugin and your app

User: go to site, install plugin if haven’t already, start navigating the initial 3d scene.

Where that initial scene leads is up to you. Hopefull to a large collection of games which are simply other scenes that you are hosting.

The drawback of all browsers today is the difficulty in getting them to run your custom code, or modify the default behaviour.

Sorry, I should have been more specific in describing what about your suggestion confused me. You seemed to be suggesting that someone use Awesomium to create a web browser in Panda, and then use the upcoming browser plugin to embed that web browser in Firefox. In other words, you’d be running a browser within a browser. Is that what you were suggesting? Because if so, that’s what I don’t see the point of.

Incidentally, your second post introduces some new confusions for me. What does Awesomium have to do with building an online space linking together multiple games such as you just described?

The point is, that method is currently the best way to do such a thing. How would you personally attempt to make a 3d browser? Would you start from the firefox source and try to add panda3d libs? The 3d browser would only have minimum requirements because it can use the features of whatever browser it is plugged into so no its not a full browser inside another full browser. They are intended to work together to become something much better.

As for linking online spaces, the correct terminology is hyperlinks, and the html view model is very well suited. Also there is the fact that thousands of web controls have already been implemented to facilitate navigation of hyperlinks and to not take advantage of those, and javascript, AND flash, when it is so very easy now would be a shame. Also with new systems that enhance old ones, is is best to have at least every feature the old systm has if possible, otherwise users will miss the ‘standard’ features that they have become accustomed to.

The changes could be as mild as zooming into a new window which appears over the hyperlink you just clicked, or as exotic as each page being a room where the links are portals you walk through. Either way it will help greatly if you can use a standard framework with pre-built controls for times when you feel too lazy to reinvent some interaction protocol.

oh now I think I see what you’re getting at. You’re talking about something like 3B where the rooms being walked around in are 3D representations of normal websites. Is this what you’re talking about? Your enthusiasm seems to be outrunning your ability to explain what you’re so excited about, heh.

This specific purpose wasn’t clear to me by your reference to “panda browser” in your first post, and in your second post you didn’t mention anything about hyperlinks, just some sort of staging area through which players could connect to other online games.

I rather wish you wouldn’t keep responding as if it’s perfectly obvious what you’re talking about (“such a thing”? what thing?) but oh well now I get what you’re on about. I wish you luck in your endeavor.

I don’t have convenient access to Windows at the moment so I can’t try it out – but THANKS for posting. It will clearly be useful as Chrome goes multi-platform. (And could probably be done today with raw WebKit for anyone who was sufficiently motivated.)

Thank you so much for posting this i have been posting on the forums for the last month trying to find a way to embed a Flex application into Panda3D because of its insanely superior GUI abilities

Yes this is very useful.
I tested the demo, but I found that the input/button tags in HTML were not supported.
Does awesomiun project not support these tags?

WOW. I was about to ask here if anyone has any advice about making a web broswer within panda3d and BAM! w0000t. I’ll just wait until chromium is ported, then try it out… twiddles thumbs meanwhile Thanks for sharing!

Awesomium v1.08 now has an OS X SDK but i dont know enough can somebody help me in porting this?

Well its nice to see that this might be useful to some people. :slight_smile:

@zjfzle: I tried to add some input controls after your post and they seem to work. For example try the following html:

<form name="a_form">
 <input name="a_button" type="button" value="Click me" 
            onclick="this.value='Thanks!'"/>
</form>

By pressing F3 you can reload the page and experiment with the html controls.

What doesn’t work though is keyboard input and that’s because Awesomium’s injectKeyboardEvent
method requires a HWND which I considered too low level and too Windows specific to wrap it.
I am sure in a future release Awesomium will provided more portable keyboard injection.

@corbo950: I don’t have a Mac but you can ask for help here and I will try to help you with the porting.

To vardis:
I tried, but for me it doesn’t work…Err, and I find that flash embeded in the html can’t interact with my mouse click. In a word, flash just like a embeded film…

ok thanks i will see what i can do and try to come up with some specific questions i just have never really worked with C++ before all of my development before panda3D was with PHP and FLEX/AIR so i might ask some really stupid questions

so correct me if im wrong but the bindings.cpp file is the C++ code using boost which talks to the python and then you simply compiled that into the pawesomium.pyd file right?

Yes that’s right, pawesomium.pyd results from compiling the bindings and allows you to access
awesomium objects from python. When you do ‘import pawesomium’ in your code, the pyd file
will be loaded by the python runtime, so it must be located in a place that Python will find it.
I have found that Panda’s bin folder is inside Python’s search path.

Boost.python should be supported on the Mac platform, you will just have to configure correctly
the toolset and the location of your Python installation. If you have any trouble with any of
these tasks don’t hesitate to ask.

I would like to use some SWF animations as part of my GUI. Would using awesomium be the correct way to go about getting flash animations into my scene?

I followed the instructions to get this up and running and it displays the HTML but without the flash animation doesn’t appear. I created my own flash animation and published as a HTML and that runs fine in my browser. For some reason it isn’t displayed in Panda. Latest flash is installed and I’ve double checked I have all of the relevant files in the correct place. Any ideas?

Hi there. Any details about your system? Can you perhaps share your html and/or swf file?