Gui library

andargor · 05-27-2011 06:26 PM

I would really appreciate some Esenthel code example of integrating Berkelium or Awesomium. I have tried then both, and have been having issues.

andargor · 05-27-2011 11:44 PM

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::WebView* webView = 0;
static Awesomium::WebCore* webCore = 0;
...
Bool InitGame()
{
...
    webCore = new Awesomium::WebCore();
    webView = webCore->createWebView(512, 512);

    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::RenderBuffer* renderBuffer = webView->render();
    if(renderBuffer) {
        imgcube.lock();
        REPD(y,imgcube.y()) {
            Copy(imgcube.data() + imgcube.pitch()*y, renderBuffer->buffer + y*renderBuffer->rowSpan,
                    Min(imgcube.pitch(), renderBuffer->rowSpan));
        }

        imgcube.unlock();
        imgcube.draw3D(Color(255, 255, 255, 255),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(512, 512);
    awe_string* url_str = awe_string_create_from_ascii("http://www.google.com", strlen("http://www.google.com"));
    awe_webview_load_url((awe_webview*)webView, url_str, awe_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_renderbuffer* renderBuffer = awe_webview_render((awe_webview*)webView);
        if(renderBuffer) {
            imgcube.lock();
            REPD(y,imgcube.y()) {
                Copy(imgcube.data() + imgcube.pitch()*y, awe_renderbuffer_get_buffer(renderBuffer) + y*awe_renderbuffer_get_rowspan(renderBuffer),
                        Min(imgcube.pitch(), awe_renderbuffer_get_rowspan(renderBuffer)));
            }

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

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

HTH

EDIT: Fixed Brightness Issue

andargor · 05-28-2011 01:03 AM

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.

andargor · 05-28-2011 04:20 AM

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 dx, int dy,
        const Berkelium::Rect &scrollRect);

// Berkelium callback class
class MyDelegate : public Berkelium::WindowDelegate {
    virtual void onStartLoading(Berkelium::Window *win, Berkelium::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 dx, int dy,
        const Berkelium::Rect &scrollRect) {
            DrawBerkelium(win,sourceBuffer,sourceBufferRect,numCopyRects,copyRects,dx,dy,scrollRect);
    }
};

...

Berkelium::Window* window=NULL;
Berkelium::Context* context=NULL;

...

Bool InitGame()
{
...
    Berkelium::init(Berkelium::FileString::empty());
    context = Berkelium::Context::create();
    window = Berkelium::Window::create(context);
    window->resize(512, 512);
    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 dx, int dy,
        const Berkelium::Rect &scrollRect) {

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

    imgcube.lock();

    unsigned char* texd = 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 = -dy; y < hig; y++)
            {
                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; y > -1; y--)
            {
                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 > 0 ? 0 : -dx;
            for (int y = 0; y < hig; y++)
            {
                UInt tb = ((top + y) * tw + left) * 4;
                UInt tb2 = tb - dx * 4;
                memcpy(&texd[tb], &texd[tb2], wid * 4 - subx);
            }
        }
    }

    // copy new rects
    for(UInt i = 0; i < numCopyRects; i++)
    {
        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 = 0; y < hig; y++)
        {
            UInt tb = ((cr.top() + y) * tw + cr.left()* 4) ;
            memcpy(&texd[tb], &sourceBuffer[(left + (y + 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(255, 255, 255, 255),512*4,0,Vec(0,0,0));
...
} 

rndbit · 05-28-2011 04:55 PM

so you got it working? congrats smile

andargor · 05-28-2011 11:58 PM

(05-28-2011 04:55 PM)rndbit Wrote: so you got it working? congrats

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

rndbit · 05-29-2011 08:19 AM

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)

andargor · 05-29-2011 04:45 PM

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.

rndbit · 05-29-2011 07:01 PM

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

andargor · 05-29-2011 08:16 PM

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

andargor · 05-29-2011 11:44 PM

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(Rect& rect) {
    if (rect.valid()) {
        //RectI _pixelrect : pixels
        Vec2 min, max;
        min = D.screenToPixel(rect.min);
        max = D.screenToPixel(rect.max);
        _pixelrect.set(min.x, min.y, max.x, max.y); // set pixel size

        //Rect _rect : screen coords
        min = D.pixelToScreen(_pixelrect.min);
        max = D.pixelToScreen(_pixelrect.max);
        _rect.set(min.x, min.y, max.x, max.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

rndbit · 05-30-2011 08:40 AM

yeah i like memcpy, im oldschool :] thanks for the link to other thread, it might solve my issue

andargor · 05-30-2011 02:53 PM

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?

rndbit · 05-30-2011 04:22 PM

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

andargor · 05-30-2011 05:59 PM

(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.

Gui library
Author	Message