Log in or register to post comments

Screen control size and positioning

June 29, 2013 - 8:52pm #10

Hello,

1. Is there a way to set the size and position of the screen controls - busy, error and play. Right now, they are getting resized automatically. I would like to set them to a smaller size.

2. Also, is there a way to set the position of them instead of the default center position?

Thanks,

Binu Paul

Screen control size and positioning

June 29, 2013 - 11:52pm #9

Hello,

have a look at the VideoPlayback.cpp file, in the renderFrame() function, this is where you can change the code to adjust both the position and size (scale) of the icons; you will find this code:

SampleUtils::translatePoseMatrix(0.0f, 0.0f, targetPositiveDimensions[currentTarget].data[1]/1.98f,
                                             &modelViewMatrixButton.data[0]);
            SampleUtils::scalePoseMatrix((targetPositiveDimensions[currentTarget].data[1]/2.0f),
                                         (targetPositiveDimensions[currentTarget].data[1]/2.0f),
                                         (targetPositiveDimensions[currentTarget].data[1]/2.0f),
                                         &modelViewMatrixButton.data[0]);
            SampleUtils::multiplyMatrix(&projectionMatrix.data[0],
                                        &modelViewMatrixButton.data[0] ,
                                        &modelViewProjectionButton.data[0]);
 
That's where you need to apply your custom changes.
 
 

Screen control size and positioning

June 30, 2013 - 7:46am #8

Hi,

Thanks for the guidance. Some more details are available at the link: https://developer.vuforia.com/forum/faq/opengl-how-do-i-scale-andor-position-my-models

Thanks,

Binu Paul

Screen control size and positioning

July 16, 2013 - 11:15pm #7

Hello Al,

The solution worked. I have scaled the images by 8.

Is it possible to remove the video overlay image (VuforiaSizzleReel_1 and VuforiaSizzleReel_2) with a transparent one so that I can show the camera stream along with the hour glass overlay.

Thanks,

Binu Paul.

Screen control size and positioning

July 16, 2013 - 11:35pm #6

Yes, you can add some trasparency; one way of doing it is to modify the shaders so that the alpha component is set to some value between 0.0 and 1.0 (where 0.0 is fully transparent, 1.0 is fully opaque);

the relevant shader code is in:

KeyframeShaders.h            (for keyframe rendering, e.g. when the video is paused)

VideoplaybackShaders.h   (for video content rendering, when the video is playing)

if you look at the line where you see gl_FragColor 

you can add another line like gl_FragColor.a = 0.25 (to set the alpha to 0.25, i.e. somewhat translucent), like for instance:

static const char keyframeFragmentShader[] =
    "precision mediump float; \n"
    "varying vec2 texCoord; \n"
    "uniform sampler2D texSampler2D; \n"
    "void main() \n"
    "{ \n"
    "   gl_FragColor = texture2D(texSampler2D, texCoord); \n"
    "   gl_FragColor.a = 0.25;  \n"
    "} \n";

 

also, make sure to enable alpha blending to support transparency, at the beginning of the _renderFrame() method, add:

glEnable ( GL_BLEND );
glBlendFunc ( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );

 

Screen control size and positioning

July 17, 2013 - 12:36am #5

Hello Al,

1. How to fix the issues caused by the non availability of the first 2 images? (See below) I want to replace them with a transparent view from the camera (with the busy.png overlay). Once the video is fully loaded, I want to have the opacity restored.

2. Your code will add transparency, but is keeping the same transparency even after the video is fully loaded and playing.

---

private void loadTextures() {
   
        // mTextures.add(Texture.loadTextureFromApk("VuforiaSizzleReel_1.png", getAssets()));
        // mTextures.add(Texture.loadTextureFromApk("VuforiaSizzleReel_2.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("play.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("busy.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("error.png", getAssets()));
        
    }
 
---
 
Thanks,
Binu Paul

Screen control size and positioning

July 17, 2013 - 12:51am #4

1. How to fix the issues caused by the non availability of the first 2 images? (See below) I want to replace them with a transparent view from the camera (with the busy.png overlay). Once the video is fully loaded, I want to have the opacity restored.

Not sure what you mean with  "I want to replace them with a transparent view from the camera", can you clarify ?

 

2. Your code will add transparency, but is keeping the same transparency even after the video is fully loaded and playing.

This can be solved by implementing more shaders (right now the sample only uses two shaders, the "keyframeshader" and the "videoplaybackshader"), and use one or the other depending on the specific circumstances.

 

Screen control size and positioning

July 18, 2013 - 11:34pm #3

AlessandroB wrote:

1. How to fix the issues caused by the non availability of the first 2 images? (See below) I want to replace them with a transparent view from the camera (with the busy.png overlay). Once the video is fully loaded, I want to have the opacity restored.

Not sure what you mean with  "I want to replace them with a transparent view from the camera", can you clarify ?

 

2. Your code will add transparency, but is keeping the same transparency even after the video is fully loaded and playing.

This can be solved by implementing more shaders (right now the sample only uses two shaders, the "keyframeshader" and the "videoplaybackshader"), and use one or the other depending on the specific circumstances.

 

AlessandroB wrote:

1. How to fix the issues caused by the non availability of the first 2 images? (See below) I want to replace them with a transparent view from the camera (with the busy.png overlay). Once the video is fully loaded, I want to have the opacity restored.

Not sure what you mean with  "I want to replace them with a transparent view from the camera", can you clarify ?

 

2. Your code will add transparency, but is keeping the same transparency even after the video is fully loaded and playing.

This can be solved by implementing more shaders (right now the sample only uses two shaders, the "keyframeshader" and the "videoplaybackshader"), and use one or the other depending on the specific circumstances.

 

 

Hello Al,

1. Sorry for the confusing statements. I would like to use the camera scan feed instead of showing the predefined png image. Also the busy button overlay is required. This should happen only when the video is not ready/is being buffered.

I think adding transparency is going to help me in implementing this. But, where should I switch the shader back to opaque one?

Thanks,

Binu Paul

Screen control size and positioning

July 19, 2013 - 1:07am #2

1. Sorry for the confusing statements. I would like to use the camera scan feed instead of showing the predefined png image. Also the busy button overlay is required. This should happen only when the video is not ready/is being buffered.

This will require reusing the videobackground texture in place of the icon texture: the relevant code to use a texture (in general) in OpenGL is glBindTexture(); you can find use of this function in the renderFrame() function in the sample;

to bind the video-background instead of a "normal" texture, use the bindVideoBackground() function (can find detailed example code in the BackgroundTextureAccess sample); 

 

I think adding transparency is going to help me in implementing this. But, where should I switch the shader back to opaque one?

The shaders are switched using glUserProgram( ... ) function, as you can see in the sample code; how/when you exactly switch this depends on what is the exact application logic that you want to have, but this is up to you.

 

Screen control size and positioning

July 19, 2013 - 9:55am #1

Hello Al,

I have implemented the solution using the shaders. I am setting the alpha value to 0.50. I am having another issue here. There seems to be a dark black background around the busy/play/error icons. How can I fix that? Is there any line of code I need to modify to fix the background color that is applied to the icon overlays?

Thanks,

Binu Paul

Log in or register to post comments