About Store Forum Documentation Contact



Post Reply 
Gui library
Author Message
andargor Offline
Member

Post: #16
RE: Gui library
I would really appreciate some Esenthel code example of integrating Berkelium or Awesomium. I have tried then both, and have been having issues.
05-27-2011 06:26 PM
Find all posts by this user Quote this message in a reply
andargor Offline
Member

Post: #17
RE: Gui library
For reference purposes, here's some Awesomium code that works with Esenthel.

C++ API (NOTE: having issues with Debug/Debug DX10+ configurations with Esenthel, but works with Release)

PHP Code:
#include <Awesomium/WebCore.h>
...
Image imgcube;
static 
Awesomium::WebViewwebView 0;
static 
Awesomium::WebCorewebCore 0;
...
Bool InitGame()
{
...
    
webCore = new Awesomium::WebCore();
    
webView webCore->createWebView(512512);

    
webView->loadURL("http://www.google.com");

    while(
webView->isLoadingPage())
    {
        
Sleep(50);
        
webCore->update();
    }
...    
}

Bool UpdateGame()
{
...
    
webCore->update(); // don't know if this is where it should go
...
}

void DrawAwesomium() {
    

    
Int tex_size=512;
    if(!
imgcube.is())imgcube.create2D(tex_size,tex_size,IMAGE_B8G8R8A8);

    const 
Awesomium::RenderBufferrenderBuffer webView->render();
    if(
renderBuffer) {
        
imgcube.lock();
        
REPD(y,imgcube.y()) {
            
Copy(imgcube.data() + imgcube.pitch()*yrenderBuffer->buffer y*renderBuffer->rowSpan,
                    
Min(imgcube.pitch(), renderBuffer->rowSpan));
        }

        
imgcube.unlock();
        
imgcube.draw3D(Color(255255255255),1024,0,Vec(0,0,0));
    }
}

void DrawGame()
{
...
    
Renderer(Render);
    if(
Renderer.rebuildDepthNeededForDebugDrawing())Renderer.rebuildDepth();
    
DrawAwesomium();    
...


C API (works with both Debug and Release)

PHP Code:
#include <Awesomium/awesomium_capi.h>
...
Image imgcube;
Ptr webView=NULL;
...
Bool InitGame()
{
...
    
awe_webcore_initialize_default();
    
webView = (awe_webview*)awe_webcore_create_webview(512512);
    
awe_stringurl_str awe_string_create_from_ascii("http://www.google.com"strlen("http://www.google.com"));
    
awe_webview_load_url((awe_webview*)webViewurl_strawe_string_empty(), awe_string_empty(), awe_string_empty());
    
awe_string_destroy(url_str);

    while(
awe_webview_is_loading_page((awe_webview*)webView))
    {
        
Sleep(50);
        
awe_webcore_update();
    }
...    
}

Bool UpdateGame()
{
...
    
awe_webcore_update(); // don't know if this is where it should go
...
}

void DrawAwesomium() {
    

    if (
webView) {
        
Int tex_size=512;
        if(!
imgcube.is())imgcube.create2D(tex_size,tex_size,IMAGE_B8G8R8A8);

        const 
awe_renderbufferrenderBuffer awe_webview_render((awe_webview*)webView);
        if(
renderBuffer) {
            
imgcube.lock();
            
REPD(y,imgcube.y()) {
                
Copy(imgcube.data() + imgcube.pitch()*yawe_renderbuffer_get_buffer(renderBuffer) + y*awe_renderbuffer_get_rowspan(renderBuffer),
                        
Min(imgcube.pitch(), awe_renderbuffer_get_rowspan(renderBuffer)));
            }

            
imgcube.unlock(); // unlock
            
imgcube.draw3D(Color(255255255255),1024,0,Vec(0,0,0));
        }
    }
}

void DrawGame()
{
...
    
Renderer(Render);
    if(
Renderer.rebuildDepthNeededForDebugDrawing())Renderer.rebuildDepth();
    
DrawAwesomium();    
...


HTH


EDIT: Fixed Brightness Issue
(This post was last modified: 05-28-2011 01:18 AM by andargor.)
05-27-2011 11:44 PM
Find all posts by this user Quote this message in a reply
andargor Offline
Member

Post: #18
RE: Gui library
Hmm, the image I'm painting on is too bright. How to I adjust brightness?

EDIT: nm, followed Esenthel's recommendation to "if(Renderer.rebuildDepthNeededForDebugDrawing())Renderer.rebuildDepth();" and call in Draw(); Code above updated.
(This post was last modified: 05-28-2011 01:18 AM by andargor.)
05-28-2011 01:03 AM
Find all posts by this user Quote this message in a reply
andargor Offline
Member

Post: #19
RE: Gui library
And here is the equivalent Berkelium code, rendering stuff ripped from rndbit:

PHP Code:
#include <berkelium/Berkelium.hpp>
#include <berkelium/Context.hpp>
#include <berkelium/Window.hpp>
#include <berkelium/WindowDelegate.hpp>

...

// declaration of draw function where onpaint goes
void DrawBerkelium(Berkelium::Window *win,
        const 
unsigned char *sourceBuffer,
        const 
Berkelium::Rect &sourceBufferRect,
        
size_t numCopyRects,
        const 
Berkelium::Rect *copyRects,
        
int dxint dy,
        const 
Berkelium::Rect &scrollRect);

// Berkelium callback class
class MyDelegate : public Berkelium::WindowDelegate {
    
virtual void onStartLoading(Berkelium::Window *winBerkelium::URLString newURL) {
        
Int i=0;
    }
    
virtual void onPaint(Berkelium::Window *win,
        const 
unsigned char *sourceBuffer,
        const 
Berkelium::Rect &sourceBufferRect,
        
size_t numCopyRects,
        const 
Berkelium::Rect *copyRects,
        
int dxint dy,
        const 
Berkelium::Rect &scrollRect) {
            
DrawBerkelium(win,sourceBuffer,sourceBufferRect,numCopyRects,copyRects,dx,dy,scrollRect);
    }
};

...

Berkelium::Windowwindow=NULL;
Berkelium::Contextcontext=NULL;

...

Bool InitGame()
{
...
    
Berkelium::init(Berkelium::FileString::empty());
    
context Berkelium::Context::create();
    
window Berkelium::Window::create(context);
    
window->resize(512512);
    
window->setDelegate( new MyDelegate() ); // set callback class
    
window->focus();
    
std::string url "http://berkelium.org";
    
window->navigateTo(url.data(), url.length());
...
}

...


// DrawBerkelium, code ripped from rndbit :D
void DrawBerkelium(Berkelium::Window *win,
        const 
unsigned char *sourceBuffer,
        const 
Berkelium::Rect &sourceBufferRect,
        
size_t numCopyRects,
        const 
Berkelium::Rect *copyRects,
        
int dxint dy,
        const 
Berkelium::Rect &scrollRect) {

    
Int tex_size=512;
    if(!
imgcube.is())imgcube.create2D(tex_size,tex_size,IMAGE_B8G8R8A8);

    
imgcube.lock();

    
unsigned chartexd imgcube.data();
    
UInt tw imgcube.pitch();
    
    
// scrolling
    
{
        
Int wid scrollRect.width();
        
Int hig scrollRect.height();
        
Int top scrollRect.top();
        
Int left scrollRect.left();


        if(
dy 0)    // scroll down
        
{
            for (
int y = -dyhigy++)
            {
                
UInt tb = ((top y) * tw left) * 4;
                
UInt tb2 tb dy tw 4;
                
memcpy(&texd[tb2], &texd[tb], wid 4);
            }
        }
        else if(
dy 0)    // scroll up
        
{
            for (
int y hig dy> -1y--)
            {
                
UInt tb = ((top y) * tw left) * 4;
                
UInt tb2 tb dy tw 4;
                
memcpy(&texd[tb2], &texd[tb], wid 4);
            }
        }

        if(
dx != 0)    // scroll
        
{
            
int subx dx : -dx;
            for (
int y 0higy++)
            {
                
UInt tb = ((top y) * tw left) * 4;
                
UInt tb2 tb dx 4;
                
memcpy(&texd[tb], &texd[tb2], wid subx);
            }
        }
    }

    
// copy new rects
    
for(UInt i 0numCopyRectsi++)
    {
        
Berkelium::Rect cr copyRects[i];
        
Int wid cr.width();
        
Int hig cr.height();
        
Int top cr.top() - sourceBufferRect.top();
        
Int left cr.left() - sourceBufferRect.left();

        for(
int y 0higy++)
        {
            
UInt tb = ((cr.top() + y) * tw cr.left()* 4) ;
            
memcpy(&texd[tb], &sourceBuffer[(left + (top) * sourceBufferRect.width()) * 4], wid 4);
        }
    }

    
imgcube.unlock();

}

void DrawGame()
{
...
    
Renderer(Render);
    if(
Renderer.rebuildDepthNeededForDebugDrawing())Renderer.rebuildDepth();
    
Berkelium::update();
    if(
imgcube.is())imgcube.draw3D(Color(255255255255),512*4,0,Vec(0,0,0));
...

05-28-2011 04:20 AM
Find all posts by this user Quote this message in a reply
rndbit Offline
Member

Post: #20
RE: Gui library
so you got it working? congrats smile
05-28-2011 04:55 PM
Find all posts by this user Quote this message in a reply
andargor Offline
Member

Post: #21
RE: Gui library
(05-28-2011 04:55 PM)rndbit Wrote:  so you got it working? congrats smile

Thanks to your code for Berkelium, yes. I'm still unsure about the 4 byte copy, is it related to how Berkelium stores the bitmap (BGRA)? I tried using the same render method as Awesomium, and obtained rasterized garbage.

I notice that Berkelium seems to use less CPU than Awesomium. It may be more efficient on the "onpaint" treatment, or perhaps I'm just not using it right (like where the "update" goes or other checking needs to be done).

I'll continue with Berkelium for now and try the input handling. I'm having trouble with the C++ for Awesomium (some project parameters in Debug aren't compatible with Esenthel).
05-28-2011 11:58 PM
Find all posts by this user Quote this message in a reply
rndbit Offline
Member

Post: #22
RE: Gui library
maybe awesomium returns different kind of bitmap array. i guess your problem with awesomium in debug build is that you try to link debug build of awesomium. esenthel does not provide debug build of the lib with debug heap and other goodies, so in a sense our debug builds are release builds without optimizations. link release build of awesomium to esenthel project. preprocessor directive _DEBUG should also be undefined (probably is, esenthel wont build otherwise)
05-29-2011 08:19 AM
Find all posts by this user Quote this message in a reply
andargor Offline
Member

Post: #23
RE: Gui library
Do you get fuzzy text? I'm kinda disappointed at the result, I thought it would be nice and crisp, as it should be for a GUI. Check out the attached picture, Firefox is in front, in Esenthel in the back. Notice how the Firefox one is crisp.

Anything I am missing? Should I try modifying your code to supersample perhaps? I can't find anything in Berkelium which controls the bitmap rendering.


Attached File(s) Image(s)
   
(This post was last modified: 05-29-2011 04:46 PM by andargor.)
05-29-2011 04:45 PM
Find all posts by this user Quote this message in a reply
rndbit Offline
Member

Post: #24
RE: Gui library
code is fine. issue is somewhere in esenthel itself. most of my rendered windows are sharp, however i noticed something while i was working on chat window today. chat by default is placed at lower left corner, and it looks sharp. however dragging chat window to upper part of screen made it fuzzy like in your example. dragging it back made it sharp again. to me it didnt make sense. i have not investigated further as i had other things to do. see this image. from left to right is window at bottom left corner, screen center and top right corner http://paste.aria.cc/51/134c01882348e264...58f02178c1
05-29-2011 07:01 PM
Find all posts by this user Quote this message in a reply
andargor Offline
Member

Post: #25
RE: Gui library
Strange, it doesn't look any different for me in the bottom left.


It does indeed seem to be Esenthel's rendering. I have exported the image to PNG (ExportPNG), and it looks as it should (note: the color difference might be related to Chromium vs Firefox CSS treatment)

Now, to find what Esenthel setting to alter...


Attached File(s) Image(s)
       
(This post was last modified: 05-29-2011 08:48 PM by andargor.)
05-29-2011 08:16 PM
Find all posts by this user Quote this message in a reply
andargor Offline
Member

Post: #26
RE: Gui library
Bingo. My first impression was either a size mismatch with the screen, or pixel misalignment. I read a bit, and found some posts by Esenthel here: http://www.esenthel.com/community/showth...ignToPixel

It's now nice and crisp. My code, not pretty but it works:

PHP Code:
void WebWindow::setRect(Rectrect) {
    if (
rect.valid()) {
        
//RectI _pixelrect : pixels
        
Vec2 minmax;
        
min D.screenToPixel(rect.min);
        
max D.screenToPixel(rect.max);
        
_pixelrect.set(min.xmin.ymax.xmax.y); // set pixel size

        //Rect _rect : screen coords
        
min D.pixelToScreen(_pixelrect.min);
        
max D.pixelToScreen(_pixelrect.max);
        
_rect.set(min.xmin.ymax.xmax.y); // set screen size from pixel size to make sure it's exact

        
D.screenAlignToPixel(_rect); // align pixels

        //Image _image : image that is draw upon in onPaint
        
if (_image.is() && (_image.x() != _pixelrect.w() || _image.y() != _pixelrect.h())) {
            
_image.resize(Abs(_pixelrect.w()), Abs(_pixelrect.h()), EE::FILTER_NONE); // Abs size
        
} else {
            
_image.create2D(Abs(_pixelrect.w()), Abs(_pixelrect.h()),IMAGE_B8G8R8A8); // Abs size
        
}

        
//Berkelium::Window* _window
        
_window->resize(_image.x(),_image.y()); // make sure Berkelium window is the same size
    
}
}

void WebWindow::draw() {
    if (
_image.is()) _image.draw(_rect); // draw the aligned rect


EDIT: Oh, and the *4 thing in your code, I now understand: the Awesomium code uses Esenthel's Copy that copies according to sizeof(UInt) (4 bytes) whereas yours copies 1 byte at a time


Attached File(s) Image(s)
   
(This post was last modified: 05-30-2011 12:59 AM by andargor.)
05-29-2011 11:44 PM
Find all posts by this user Quote this message in a reply
rndbit Offline
Member

Post: #27
RE: Gui library
yeah i like memcpy, im oldschool :] thanks for the link to other thread, it might solve my issue
05-30-2011 08:40 AM
Find all posts by this user Quote this message in a reply
andargor Offline
Member

Post: #28
RE: Gui library
I'm trying to figure out the scrolling code. Your approach doesn't work for me.

If I understand:

- dx/dy is the scrolling amount and direction
- scrollRect is the size of the portion of the scrollBuffer to scroll. What does the top() and left represent()?
- I assume the new content to show (what comes into view when scrolling) appears in copyRect

Why does scrollRect have a negative top() or left() sometimes?
05-30-2011 02:53 PM
Find all posts by this user Quote this message in a reply
rndbit Offline
Member

Post: #29
RE: Gui library
Code:
        if(dy < 0)    // scroll down
        {
            for (int y = -dy; y < hig; y++)
            {
                u32 tb = ((top + y) * tw + left) * 4;
                u32 tb2 = tb + dy * tw * 4;
                memcpy(&texd[tb2], &texd[tb], wid * 4);
            }
        }

this code copies bitmap row by row. since we scroll down, pixel rows should be copied from lowest row to some upper row. say dy is -5. Then calculated tb will be 5th row of pixel data from the top. tb2 will be 5th row + dy, that is 1st row. then on ext iteration it will copy 6th -> 2nd row and so on. i hope this helps. i wonder what exactly doesnt work for you, since this code works for me perfectly
05-30-2011 04:22 PM
Find all posts by this user Quote this message in a reply
andargor Offline
Member

Post: #30
RE: Gui library
(05-30-2011 04:22 PM)rndbit Wrote:  i wonder what exactly doesnt work for you, since this code works for me perfectly

The way I do it, I'm painting on an image that has the exact same size as the Berkelium window, and with negative dy (and sometimes negative scrollRect top), tb or tb2 can be negative and exceed the buffer (access violation).

But your explanation makes sense and will help, and I will try to "Esenthelify" it. I'll post my findings.
(This post was last modified: 05-30-2011 05:59 PM by andargor.)
05-30-2011 05:59 PM
Find all posts by this user Quote this message in a reply
Post Reply