berkelium+jsLINB and we got WYSIWYG GUI editor

A place to show off your latest screenshots and for people to comment on them. Only start a new thread here if you have some nice images to show off!
Post Reply
rndbit
Gnoblar
Posts: 20
Joined: Sat Mar 05, 2011 7:57 pm

berkelium+jsLINB and we got WYSIWYG GUI editor

Post by rndbit »

Thought i will share something i came up with. Its basically rendering berkelium as an overlay over GUI window and using jsLINB as GUI library. Result:
Image
If you are not aware of jsLINB see their WYSIWYG builder in action http://www.linb.net/VisualJS/UIBuilder.html
looks are fully customizable, you can pretty much make new theme for each dialog.
User avatar
Mind Calamity
Ogre Magi
Posts: 1255
Joined: Sat Dec 25, 2010 2:55 pm
Location: Macedonia
x 81

Re: berkelium+jsLINB and we got WYSIWYG GUI editor

Post by Mind Calamity »

The WYSIWYG Editor is very intuitive, if it it's easy to implement, in OGRE (I haven't tried berkelium, yet) this would be a perfect solution for many, seeing how it has tons of useful widgets.

BTW - since I'm a bit busy to try myself, how hard is it to get berkelium to render as as an overlay ?
Last edited by jacmoe on Thu Sep 08, 2011 6:33 pm, edited 1 time in total.
Reason: Removed USELESS quote
BitBucket username changed to iboshkov (from MindCalamity)
Do you need help? What have you tried?
- xavier
---------------------
HkOgre - a Havok Integration for OGRE | Simple SSAO | My Blog | My YouTube | My DeviantArt
rndbit
Gnoblar
Posts: 20
Joined: Sat Mar 05, 2011 7:57 pm

Re: berkelium+jsLINB and we got WYSIWYG GUI editor

Post by rndbit »

ogre part it no big deal at all:

Code: Select all

	_texture = TEXMGR.createManual(
		"GUIOverlayTexture",
		Ogre::ResourceGroupManager::DEFAULT_RESOURCE_GROUP_NAME,
		Ogre::TEX_TYPE_2D,
		app.viewport->getActualWidth(),
		app.viewport->getActualHeight(),
		0,
		Ogre::PF_BYTE_BGRA,
		Ogre::TU_DYNAMIC_WRITE_ONLY_DISCARDABLE
	);
	
	// Create a material using the texture
	_material = MTRLMGR.create("GUIOverlayTextureMaterial", ResourceGroupManager::DEFAULT_RESOURCE_GROUP_NAME);
	_material->getTechnique(0)->getPass(0)->createTextureUnitState("GUIOverlayTexture");
	_material->getTechnique(0)->getPass(0)->setSceneBlending(SBT_TRANSPARENT_ALPHA);

	// Create a panel
	_panel = static_cast<OverlayContainer*>(OVERLAYMGR.createOverlayElement("Panel", "GUIOverlayPanel"));
	_panel->setMetricsMode(Ogre::GMM_PIXELS);
	_panel->setPosition(0, 0);
	_panel->setDimensions(app.viewport->getActualWidth(), app.viewport->getActualHeight());
	_panel->setMaterialName("GUIOverlayTextureMaterial");

	// Create an overlay, and add the panel
	_overlay = OVERLAYMGR.create("GUIOverlay");
	_overlay->add2D(_panel);


	// Show the overlay
	_overlay->show();
and rendering on texture:

Code: Select all

			// Get the pixel buffer
			HardwarePixelBufferSharedPtr pixelBuffer = _texture->getBuffer();
			pixelBuffer->lock(HardwareBuffer::HBL_NORMAL); // for best performance use HBL_DISCARD!
			const PixelBox& pixelBox = pixelBuffer->getCurrentLock();
			_guiView->renderBGRA(pixelBox.data, pixelBox.getWidth(), pixelBox.getHeight());
			pixelBuffer->unlock();
before passing input to berkelium keycodes have to be converted from OIS enum to virtual key codes. i did not see OIS api to get that so i made huge conversion map.

when it comes to berkelium itself i spent many hours studying examples and trying to properly replicate how they draw stuff on screen. these are key functions for rendering what is returned from berkelium callbacks to BRGA buffer:

Code: Select all

void WindowImpl::paintOnTexture( BGRAbuffer* tex, const unsigned char* src, const Rect &srcRect, size_t numCopyRects, const Rect *copyRects, int dx, int dy, const Rect &scrollRect )
{
	tex->Lock();
	unsigned char* texd = tex->getBuffer();
	unsigned int tw = tex->width;

	// 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++)
			{
				unsigned int tb = ((top + y) * tw + left) * 4;
				unsigned int 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--)
			{
				unsigned int tb = ((top + y) * tw + left) * 4;
				unsigned int 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++)
			{
				unsigned int tb = ((top + y) * tw + left) * 4;
				unsigned int tb2 = tb - dx * 4;
				memcpy(&texd[tb], &texd[tb2], wid * 4 - subx);
			}
		}
	}

	// copy new rects
	for(unsigned int i = 0; i < numCopyRects; i++)
	{
		Rect cr = copyRects[i];
		int wid = cr.width();
		int hig = cr.height();
		int top = cr.top() - srcRect.top();
		int left = cr.left() - srcRect.left();

		for(int y = 0; y < hig; y++)
		{
			unsigned int tb = ((cr.top() + y) * tw + cr.left()) * 4;
			memcpy(&texd[tb], &src[(left + (y + top) * srcRect.width()) * 4], wid * 4);
		}
	}
	tex->Unlock();
}

void WindowImpl::paintOnTexture(BGRAbuffer* dest, BGRAbuffer* src, Rect& srcRect)
{
	dest->Lock();
	src->Lock();
	unsigned char* dest_buff = dest->getBuffer();
	unsigned char* src_buff = src->getBuffer();

	for (int j = 0; j < srcRect.height() && dest->height > (srcRect.mTop + j); j++)
		memcpy(&dest_buff[(srcRect.mLeft + (srcRect.mTop + j) * dest->width) * 4], &src_buff[j * srcRect.mWidth * 4], srcRect.mWidth * 4);

	dest->Unlock();
	src->Unlock();
}
/!\ Above code may be buggy!

i actually use customized berkelium version that does most of heavy lifting and code is scattered around the lib, but provided code is the hardest and essential part of implementing berkelium in ogre.
User avatar
duststorm
Minaton
Posts: 921
Joined: Sat Jul 31, 2010 6:29 pm
Location: Belgium
x 80
Contact:

Re: berkelium+jsLINB and we got WYSIWYG GUI editor

Post by duststorm »

Nice!

I also studied berkelium a while ago and made an effort at creating a minimal berkelium setup.
The result of that can be seen in this post: http://www.ogre3d.org/forums/viewtopic. ... 50#p438195
I agree that it isn't that obvious in the beginning how the update method of berkelium works :)

I haven't got the time yet to clean it up some more and write a wiki article about it.
Developer @ MakeHuman.org
Post Reply