Pangolin多视口显示——按钮面板，图片，三维点云

这篇博客记录：

1. Pangolin的几类显示方法，包括按钮面板，彩色图片，三维点云（可变换视角）
2. Pangolin显示cv::Mat格式图片的方法
3. 原本倒置的图片自下而上渲染（变正:）

1.按钮面板

    //新建按钮和选择框
    pangolin::CreatePanel("按钮面板").SetBounds(0.0,1.0,0.0,0.2);
    //第一个参数为按钮的名字，第二个为默认状态，第三个为是否有选择框
    pangolin::Var<bool> menu("menu",true,true);

其中函数SetBounds（pangolin::Attach bottom, pangolin::Attach top, pangolin::Attach left, pangolin::Attach right ）定义面板的位置，其中的参数可以设定成如上0.0，1.0 等（0~1）的相对位置数值，也可以设定成绝对位置数值，例如：
SetBounds（0，1，0，pangolin::Attach::Pix(100)），
前两个参数（0.0, 1.0）表明面板纵向宽度和窗口大小相同
后两个参数（0 ，pangolin::Attach::Pix(100)）表明右边横向100个像素所有部分用于显示按钮面板

2.点云窗口

    // 定义相机投影模型：ProjectionMatrix(w, h, fu, fv, u0, v0, zNear, zFar)
    // 定义观测方位向量：观测点位置：(mViewpointX mViewpointY mViewpointZ)
    //                观测目标位置：(0, 0, 0)
    //                观测的方位向量：(0.0,-1.0, 0.0)
pangolin::OpenGlRenderState s_cam(
    pangolin::ProjectionMatrix(1024,768,_ViewpointF,_ViewpointF,512,389,0.1,1000),
    pangolin::ModelViewLookAt(_ViewpointX,_ViewpointY,_ViewpointZ, 0,0,0,0.0,-1.0, 0.0)
    );

    // 定义地图面板
    // SetBound最后一个参数（-1024.0f/768.0f）为显示长宽比
pangolin::View& d_cam = pangolin::CreateDisplay()
    .SetBounds(0.0, 1.0, 0.2, 1.0, -1024.0f/768.0f)
    .SetHandler(new pangolin::Handler3D(s_cam));

//使该视口生效，并进行渲染
d_cam.Activate(s_cam);
DrawPointCloud（）;

3.图片视口

//建立图片视口
pangolin::View& rgb_image = pangolin::Display("rgb")
    .SetBounds(0,0.2,0.2,0.4,1024.0f/768.0f)

//图片纹理定义
pangolin::GlTexture imageTexture(640,480,GL_RGB,false,0,GL_BGR,GL_UNSIGNED_BYTE);

//加载图片
uchar* rgb;
imageTexture.Upload(rgb,GL_BGR,GL_UNSIGNED_BYTE);

//渲染
rgb_image.Activate();
glColor3f(1.0,1.0,1.0);
imageTexture.RenderToViewport();

不完整代码如下：

（由于是从我的函数中拉出来的，复制粘贴不一定能work）

#include "pangolin/pangolin.h"
int main()
{
    pangolin::CreateWindowAndBind("Plane_Slam: Map Viewer",1024,768);

    // 启动深度测试，OpenGL只绘制最前面的一层，绘制时检查当前像素前面是否有别的像素，如果别的像素挡住了它，那它就不会绘制
    glEnable(GL_DEPTH_TEST);
    // 在OpenGL中使用颜色混合
    glEnable(GL_BLEND);
    // 选择混合选项
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    //定义按钮面板
    //新建按钮和选择框
    pangolin::CreatePanel("menu").SetBounds(0.0,1.0,0.0,0.2);
    //第一个参数为按钮的名字，第二个为默认状态，第三个为是否有选择框
    pangolin::Var<bool> menu("menu.test",true,true);

    // 定义相机投影模型：ProjectionMatrix(w, h, fu, fv, u0, v0, zNear, zFar)
    // 定义观测方位向量：观测点位置：(mViewpointX mViewpointY mViewpointZ)
    //                观测目标位置：(0, 0, 0)
    //                观测的方位向量：(0.0,-1.0, 0.0)
pangolin::OpenGlRenderState s_cam(
    pangolin::ProjectionMatrix(1024,768,_ViewpointF,_ViewpointF,512,389,0.1,1000),
    pangolin::ModelViewLookAt(_ViewpointX,_ViewpointY,_ViewpointZ, 0,0,0,0.0,-1.0, 0.0)
    );

    // 定义地图面板
    // 前两个参数（0.0, 1.0）表明宽度和面板纵向宽度和窗口大小相同
    // 中间两个参数（pangolin::Attach::Pix(175), 1.0）表明右边所有部分用于显示图形
    // 最后一个参数（-1024.0f/768.0f）为显示长宽比
    pangolin::View& d_cam = pangolin::CreateDisplay()
            .SetBounds(0.0, 1.0, 0.2, 1.0, -1024.0f/768.0f)
            .SetHandler(new pangolin::Handler3D(s_cam));

    pangolin::OpenGlMatrix Twc;
    Twc.SetIdentity();

    //定义图片面板
    pangolin::View& rgb_image = pangolin::Display("rgb")
      .SetBounds(0,0.2,0.2,0.4,1024.0f/768.0f)
      .SetLock(pangolin::LockLeft, pangolin::LockBottom);

    pangolin::View& depth_image = pangolin::Display("depth")
      .SetBounds(0,0.2,0.4,0.6,1024.0f/768.0f)
      .SetLock(pangolin::LockLeft, pangolin::LockBottom);

    //初始化
    pangolin::GlTexture imageTexture(640,480,GL_RGB,false,0,GL_BGR,GL_UNSIGNED_BYTE);


//     cv::namedWindow("Plane_Slam: rgb");
//  cv::namedWindow("Plane_Slam: depth");

    bool Follow = true;
//     bool LocalizationMode = false;

    while(1)
    {
        // 清除缓冲区中的当前可写的颜色缓冲 和 深度缓冲
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

        d_cam.Activate(s_cam);
        // 设置为白色，glClearColor(red, green, blue, alpha），数值范围(0, 1)
        glClearColor(1.0f,1.0f,1.0f,1.0f);
        //画出点云地图
        //_MapDrawer->DrawPointCloud();


        //cv::Mat 格式读取并显示RGB图片
        cv::Mat rgb;
        //_FrameDrawer->DrawFrame(rgb);
        imageTexture.Upload(rgb.data,GL_BGR,GL_UNSIGNED_BYTE);

        //display the image
        rgb_image.Activate();
        glColor3f(1.0,1.0,1.0);
        imageTexture.RenderToViewportFlipY();
        //注意，这里由于Upload函数无法将cv::Mat格式的图片数据作为输入，因此使用opencv的data函数将Mat格式的数据变为uchar格式，但是opencv中Mat存储图片是自下而上的，单纯的渲染所渲染出来的图片是倒置的，因此需使用RenderToViewportFlipY（）函数进行渲染，将原本上下倒置的图片进行自下而上渲染，使显示的图片是正的。

        pangolin::FinishFrame();

    }

}

最终显示的大致效果图：