Object position relative to display

[dbawel]

Hello,

I may not be able to solve my current dilemma, however I thought I might ask if anyone has had a similar issue and was able to resolve it. The problem I have is that I have an interface for an application in which I need to display color information through the GUI. So I have a pallatte, a color picker, and a simple mesh plane which I use to display the currently selected color by the user - and I do this by changing the material color value of the plane to represent any color the user has selected. This works great on my laptops or a single device, however, when the device resolution is different such as viewing on a mobile device, the position of the mesh plane is changed since the display of the plane object's position is relative to the resolution of the display in which it is rendered.

So the result is that all of my GUI elements are always relatively the same in their position - relative to each other - so my GUI works and looks good on every device I've tested. But since I need to display an object as an element of my GUI which represents the current color the user has selected to draw with, this mesh object's position is different on most all mobile displays - since the display resolution is different on each device.

I wouldn't begin to know how to lock the (X, Y) position of a scene mesh to the (X, Y) position of a GUI element or it's canvas, even though the camera is always in a fixed position. So unless someone in the BJS community has been able to do this, then I need to find a method to display the current color using either the CasterGUI or bGUI extensions - which I am using both for my application's interface. I had previously been doing this by displaying the textures from the color pallette using bGUI, but had to find another method to display the current color when I added a color picker using the CastorGUI extension, since the color picker allows any color value to be selected. I'm certain that Dad72 will take a look at this post, and I believe there is a solution using the CastorGUI extension, but not certain how to build this yet. What I require is a GUI element such as a rectangle which can change to display any RGB value. I think that CastorGUI can do this since I'm currently calling a color picker element which accurately displays the color from the color picker. But I haven't yet been able to dynamically change the color of a different GUI element. I hope this makes sense, and I appriciate anyone reading this who might try and help with my dilemma.

Thank you,

DB

[Wingnut]

Hi DB!  First, you should be working with percentages and not pixels.  That way, the device resolution doesn't matter.  The only positional thing you need to concern yourself-with... is that cGUI (castorGUI) is centered on the camera. Then scale the cGUI per the resolution... so it fits in-view.  Parenting-to-camera might be your friend.

Once you get your percentage-system determined, then all sub-components of cGUI... would position like...  x: -12% from center   by   y: +32% from center.  Sometimes, "center" would be based upon the camera, and sometimes it would be based upon the cGUI panel (more likely).  All in all, if you can work in percentages instead of webGL 'units', you will have many advantages as far as scaling things for different device resolutions.  I am assuming your colorpicker is html, not webgl.

18 hours ago, dbawel said:

the position of the mesh plane is changed since the display of the plane object's position is relative to the resolution of the display in which it is rendered

That's one of the primary problems.  Instead, position it relative to the camera... ie. parent it to camera or parent it to cGUI.

18 hours ago, dbawel said:

this mesh object's position is different on most all mobile displays - since the display resolution is different on each device.

Not true IF... object position is always x% and y% from camera center or cGUI center.  Percentage of WHAT?  I dunno.  What IS -100% from center of something webGL?  That's a rough question.  Don't ask me that one, ok?    It sounds to me like you have the positioning of the colorpicker itself... already handled.  You are just fighting with the "show me the color" plane, and I think parenting it to camera would work fine.

Also, consider NOT using a plane to show the selected color.  Consider using a small panel on the colorpicker itself.  Also consider using a BJS layer.  BJS layers have lots of options, but even in the simplest form (using a layer as a scene background), you could change the color of the entire background of the scene... as the user picks colors.  As soon as they hit OK, the background returns to normal, and the color gets applied to its intended target.

There might be a renderTargetTexture option here, too.  Imagine this.  The user chooses a mesh to color, then launches the color picker, then you position another camera close-to the actual mesh needing color.  Use that camera to make a renderTargetTexture that is temporarily used on the background layer of the whole scene.  So, while picking colors, the user sees a picture of the actual mesh changing colors... displayed as the background of the scene.  Fancy, huh? 

These are just a few options that I was able to think-up.  Maybe none of them will work for you, but maybe they will.  Keep us posted.

[dbawel]

Hey Wingman,

As always, you're right on target with your advice. I've definately learned that using percentages is key in working with GUI elements. However, we are very fortunate that users such as Dad72 and Temechon have built extensions for us to use to assist in building quality GUIs. Both CasterGUI and bGUI has saved me many, many hours of work - especially when designing an interface when utilizing a babylon.js scene on the page.

I'm still not certain what the solution is specifically for my current dilemma, but I haven't yet heard from Dad72 or from Temechon - as I'm certain their thoughts will be invaluable, as they always are. Thank you for looking at this and providing your insight, as it always allows me to see a different side of any puzzle - especially since you are always so very dedicated to this community and to trying to find the best solution to almost every development issue.

As always, Thanks.

DB

[Wingnut]

Thx, nice words, DB!

bGUI and castorGUI and JcPalmer's dialog... are fine things, if ya don't mind translating for different languages.  A dashboard full of international and intuitive 'symbols', is better, though. W.O.R.M.  - write once, read(-by) many.    But no-text GUI has some serious limitations... as we all know.  Not easy to type-in the name of something... using international symbols and control widgets.  heh

[Dad72]

Hi DB,

If I understand the question, what is your position following Elements different resolution?

I use the pixels to CastorGUI , but I will convert in percentage and add options in GUIManager  to choose % or px.

I will keep you informed when I would finish in the day.

[Dad72]

Ok, now CastorGUI uses percentage or pixels. If you use pixel, you can simply convert them like this:

CASTORGUI.GUIManager.convertPixelToPercent = true;// Convert pixel to percentage
guisystem = new CASTORGUI.GUIManager(canvas, css, {pixel: false}); //No use pixel here   

 I have attached the casorGUI.min.js file updated

castorGUI.min.js

[dbawel]

Hi Dad72,

This is excellent! I should be able to keep the GUI relative to changing screen resolutions on any device. It's amazing the amount of support you provide for an open source extension. I hope other users are taking note and seriously look at CastorGUI for practically any interface needs. For any newbies who might be reading this post, I recommend that you test CastorGUI in a scene and see what it's capable of - especially in optimizing scripts and the time you will save to write functions - since much of what you might need is already written and can be called from the extension.

I have one other question which I asked previously but don't believe I was clear. What CastorGUI element can I use to represent a current color? This requires an element which I just need to be displayed in the GUI, but can change its color as needed as the user determines - for this element to display a different (current) color selection by the user - such as the color changing behavior of the color picker button?

Thanks,

DB.

[Dad72]

You can use a GUIDialog and change his background and remove the close button with CloseDialog 'false'

var color1 = new CASTORGUI.GUIDialog("color1", { closeDialog: false,  backgroundColor: yourColor, x: 15, y: 15, w: 20, h: 100}, guimanager);

When you change a color with GUIColor, you update the yourColor variable.

Or simpler: you can do it with jQuery:

$("#color1").css({"background-color":"#ffffff"});

[dbawel]

Dad72,

Thank you. This appears to function exactly how I needed for the app. Thank you also for providing the jQuery call.

Cheers,

DB

[dbawel]

Hi @Dad72,

I've tried every device and browser I have, and in trying to convert pixels to percentages using the CastorGui extension, adding the following line of code causes no GUI elements to be displayed whatsoever:

guisystem = new CASTORGUI.GUIManager(canvas, css, {pixel: false}); //No use pixel here  

 

However adding the following as you recommended, has no effect on the GUI:

CASTORGUI.GUIManager.convertPixelToPercent = true;// Convert pixel to percentage

and as you provided using the above variable declaration won't display any GUI elements, however using the following declaration of the variable:

guisystem = new CASTORGUI.GUIManager(cp_canvas);

has no efect on the GUI display whatsoever, as might be expected.

 

I'm using the build of the extension you posted to use from 5/3/16, and have exhaused everything I can think of to try to either convert pixels to percentages, or to set percentages.

Also, in using my Galaxy S6 phone with any browser, many of the GUI elements are outside of a 1200 X 780 canvas I have set up for my scene - the native phone resolution is 2560 X 1440, which is larger on both X and Y than any pixel placement I declare, so I'm not certain why most all GUI elements are displayed outside of my canvas. Do I need to declare the same canvas size in Castor GUI, as I do in using other GUI extensions, and if so, how might I declare this for the extension canvas?

Thanks,

DB

 

 

[Dad72]

Hi,

You must use both methods (One shows a pixel conversion=> percentage, the other using the pixel or not):

var cp_canvas = document.getElementById("your_canvas_id");
var css = "";
/*1)They asked to convert percentage in pixels*/
CASTORGUI.GUIManager.convertPixelToPercent = true; /*convert pixel value in percentage*/
/*2)We do not want to use the pixels (indicate in the options)*/
guisystem = new CASTORGUI.GUIManager(cp_canvas, css, {pixel: false}); /*not use pixel*/

This worked on my demo.

[dbawel]

Could it be that I'm identifying a game canvas for both bGUI and CastorGUI? Either way, I'm not certain how to proceed. I also tried to use percentages, but still no CastorGUI elements appeared.

From bGUI script:

Quote

    var canvas          = document.getElementById("game");
    var engine          = new BABYLON.Engine(canvas, true);
    var scene           = new BABYLON.Scene(engine);
    var camera          = null;

From Castor_GUI script:

Quote

 

var cp_canvas = document.getElementById("game");

guisystem = new CASTORGUI.GUIManager(cp_canvas);

 

I can send you my CastorGUI script if it would help and if you have time.

Thanks,

DB

[Dad72]

There is no problem as you made here. But I'm not even sure I understand the problem exactly.