Pangolin库：控制面板、控制组件、快捷键设置

最新推荐文章于 2024-09-15 07:21:36 发布
最新推荐文章于 2024-09-15 07:21:36 发布
阅读量1.9k 收藏 18
点赞数 3
分类专栏： 《视觉SLAM十四讲》笔记 C++\CMake 文章标签： c++ slam
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45929038/article/details/122911049
版权

视框控件

在视窗的基础上，可选择添加控制组件用于完成操作。基础的控件有按钮、滑条、单选框、字符串信息等。

构建相机

首先，构建一个Pangolin相机对象：

#include <string>
#include <iostream>
#include "main.h"

int main()
{
    /*--------   构建Pangolin相机   --------*/
    //  视窗
    pangolin::CreateWindowAndBind("Viewer",640,480);
    //  启动深度测试
    glEnable(GL_DEPTH_TEST);
    //  相机
    pangolin::OpenGlRenderState s_cam(
            pangolin::ProjectionMatrix(640,480,420,420,320,240,0.1,1000),
            pangolin::ModelViewLookAt(-1,1,-1, 0,0,0, pangolin::AxisY)
    );
    while( !pangolin::ShouldQuit() )
    {
        //  清空颜色、深度缓存区
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
        //  背景颜色
        glClearColor(0.1f, 0.2f, 0.3f, 0.3f);
        //  激活相机对象
        d_cam.Activate(s_cam);
        // 帧循环
        pangolin::FinishFrame();
    }

    return 0;
}

构建控制面板、交互视图

控制面板的构建使用如下语句进行：

pangolin::CreatePanel(const std::string& name)
            .SetBounds(Attach bottom, Attach top, Attach left, Attach right);
  • name：控制面板的Tag名称panel_tag
  • SetBounds：设置控制面板的大小、位置

一般将控制面板放置在视窗的左侧，而将交互式图放置在视窗的右侧：

//  交互视图同控制面板分界
const int UI_WIDTH = 180;

//  右侧:交互视图
pangolin::View& d_cam = pangolin::CreateDisplay()
    .SetBounds(0.0, 1.0, pangolin::Attach::Pix(UI_WIDTH), 1.0, -640.0f/480.0f)
    .SetHandler(new pangolin::Handler3D(s_cam));
// 左侧：控制面板
pangolin::CreatePanel("ui")
    .SetBounds(0.0, 1.0, 0.0, pangolin::Attach::Pix(UI_WIDTH));

此处，定义一个常量UI_WITH作为两者的分界面，随后使用pangolin::Attach::Pix()获得对应的像素信息。设置控制面板Tag名称为ui，实现效果如下：
在这里插入图片描述

构建基础控件

Pangolin将所有“控件”视为一个对象pangolin::Var，可用于构建按钮、滑条、控制对象、信息显示等内容：

按钮

按钮控件为Bool类型，无法反转的控件：

pangolin::Var<bool> Button(const std::string& name, const bool& value, bool toggle);
  • name：按钮控件的Tag，填写格式：panel_tag.controller_tag
  • value：控件默认值
  • toggle：控件是否可以反转，按钮控件应填写false

例如，实现一个按钮：

pangolin::Var<bool> A_Button("ui.a_button", false, false);

效果如下：

在这里插入图片描述

单选框

单选框控件为Bool类型，可以反转的控件：

pangolin::Var<bool> A_Checkbox(const std::string& name, const bool& value, bool toggle);
  • name：按钮控件的Tag，填写格式：panel_tag.controller_tag
  • value：控件默认值
  • toggle：控件是否可以反转，单选框控件应填写true

例如，实现一个单选框对象：

pangolin::Var<bool> A_Checkbox("ui.a_checkbox", false, true);

效果如下：

在这里插入图片描述

滑动条对象

滑动条对象为数值型对象：：

pangolin::Var<T> Double_Slider(const std::string& name, const T& value,
        double min, double max, bool logscale = false);
  • T：数值类型，可选int、double、float型
  • name：控件的Tag，填写格式：panel_tag.controller_tag
  • value：控件的默认值
  • min、max：滑动条的最小、最大取值，默认0~1
  • logscale：是否以对数坐标形式显示

例如，实现一个Double类型滑动条对象：

pangolin::Var<double> Double_Slider("ui.a_slider", 3, 0, 5);

效果如下：

在这里插入图片描述

消息对象

消息显示为std::string类型对象：

pangolin::Var<std::string> A_string(const std::string& name, const std::string& value = std::string() )
  • name：控件的Tag，填写格式：panel_tag.controller_tag
  • value：被显示的消息内容

例如，构建一个消息显示对象：

pangolin::Var<std::string> A_string("ui.a_string", "Hello Pangolin");

效果如下：
在这里插入图片描述

基础控件回调

构建控件的目的是为了进行不同的控制，由此应实现控件的回调

按钮

按钮控件应被监听，当按钮按下时进行指定操作，使用如下函数监听按钮状态

pangolin::Pushed(A_Button)

单选框

单选框控件为bool类型，只需要检测其值是否为true即可

滑动条

滑动条控件为数值型，可直接获取到当前值。

综合

由此，完成对控件的构建：

#include <string>
#include <iostream>
#include "main.h"

int main()
{
    /*--------   构建Pangolin相机   --------*/
    //  视窗
    pangolin::CreateWindowAndBind("Viewer",640,480);
    //  启动深度测试
    glEnable(GL_DEPTH_TEST);
    //  相机
    pangolin::OpenGlRenderState s_cam(
            pangolin::ProjectionMatrix(640,480,420,420,320,240,0.1,1000),
            pangolin::ModelViewLookAt(-1,1,-1, 0,0,0, pangolin::AxisY)
    );
    //  交互视图同控制面板分界
    const int UI_WIDTH = 180;

    //  右侧:交互视图
    pangolin::View& d_cam = pangolin::CreateDisplay()
            .SetBounds(0.0, 1.0, pangolin::Attach::Pix(UI_WIDTH), 1.0, -640.0f/480.0f)
            .SetHandler(new pangolin::Handler3D(s_cam));
    // 左侧：控制面板
    pangolin::CreatePanel("ui")
            .SetBounds(0.0, 1.0, 0.0, pangolin::Attach::Pix(UI_WIDTH));

    /* -------- 构建控件    -------- */
    //  按钮对象
    pangolin::Var<bool> A_Button("ui.a_button", false, false);
    //  单选框对象
    pangolin::Var<bool> A_Checkbox("ui.a_checkbox", false, true);
    //  滑条，Double型
    pangolin::Var<double> Double_Slider("ui.a_slider", 3, 0, 5);
    //  滑条，Int型
    pangolin::Var<double> Int_Slider("ui.int_slider", 3, 0, 5);
    //  字符串
    pangolin::Var<std::string> A_string("ui.a_string", "Hello Pangolin");
   //  按钮，保存视框
    pangolin::Var<bool> SAVE_WIN("ui.save_win", false, false);

    while( !pangolin::ShouldQuit() )
    {
        //  清空颜色、深度缓存区
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
        //  背景颜色
        glClearColor(0.1f, 0.2f, 0.3f, 0.3f);

        /*--------  控件回调函数  --------*/
        //	按钮
        if (pangolin::Pushed(A_Button)) { std::cout << "Push button A." << std::endl; }
        //	单选框
        if (A_Checkbox) { Int_Slider = (int) Double_Slider; }
        //  按钮，保存图像
        if (pangolin::Pushed(SAVE_WIN)) { pangolin::SaveWindowOnRender("window"); }

        //  激活相机对象
        d_cam.Activate(s_cam);

        /*--------  绘制图像  --------*/
        pangolin::glDrawColouredCube();

        // 帧循环
        pangolin::FinishFrame();
    }

    return 0;
}

效果如下：

在这里插入图片描述

其他控件

函数按钮回调

pangolin::Var<std::function<void()>> (const std::string& name, std::function<void(void)> func)
  • name：控件的Tag，填写格式：panel_tag.controller_tag
  • func：控件对应的函数

此类按钮控件，当按钮被按下时，将执行func函数。

快捷键绑定

pangolin::RegisterKeyPressCallback(int key, std::function<void(void)> func);

快捷键绑定控件用于绑定键盘上的按钮，单按下固定的按钮时，将触发指定的func。

例如使用ctrl+r执行函数：

pangolin::RegisterKeyPressCallback(pangolin::PANGO_CTRL + 'r', SampleMethod);

键盘上的特殊键位，可在pangolin中使用对应常量调用：

const int PANGO_SPECIAL = 128;
const int PANGO_CTRL = -96;
const int PANGO_OPTN = 132;

// Ordinary keys
const int PANGO_KEY_TAB       = 9;
const int PANGO_KEY_ESCAPE    = 27;

// Special Keys (same as GLUT_ defines)
const int PANGO_KEY_F1        = 1;
const int PANGO_KEY_F2        = 2;
const int PANGO_KEY_F3        = 3;
const int PANGO_KEY_F4        = 4;
const int PANGO_KEY_F5        = 5;
const int PANGO_KEY_F6        = 6;
const int PANGO_KEY_F7        = 7;
const int PANGO_KEY_F8        = 8;
const int PANGO_KEY_F9        = 9;
const int PANGO_KEY_F10       = 10;
const int PANGO_KEY_F11       = 11;
const int PANGO_KEY_F12       = 12;
const int PANGO_KEY_LEFT      = 100;
const int PANGO_KEY_UP        = 101;
const int PANGO_KEY_RIGHT     = 102;
const int PANGO_KEY_DOWN      = 103;
const int PANGO_KEY_PAGE_UP   = 104;
const int PANGO_KEY_PAGE_DOWN = 105;
const int PANGO_KEY_HOME      = 106;
const int PANGO_KEY_END       = 107;
const int PANGO_KEY_INSERT    = 108;

综合

#include <string>
#include <iostream>
#include "main.h"

int main()
{
    /*--------   构建Pangolin相机   --------*/
    //  视窗
    pangolin::CreateWindowAndBind("Viewer",640,480);
    //  启动深度测试
    glEnable(GL_DEPTH_TEST);
    //  相机
    pangolin::OpenGlRenderState s_cam(
            pangolin::ProjectionMatrix(640,480,420,420,320,240,0.1,1000),
            pangolin::ModelViewLookAt(-1,1,-1, 0,0,0, pangolin::AxisY)
    );
    //  交互视图同控制面板分界
    const int UI_WIDTH = 180;

    //  右侧:交互视图
    pangolin::View& d_cam = pangolin::CreateDisplay()
            .SetBounds(0.0, 1.0, pangolin::Attach::Pix(UI_WIDTH), 1.0, -640.0f/480.0f)
            .SetHandler(new pangolin::Handler3D(s_cam));
    // 左侧：控制面板
    pangolin::CreatePanel("ui")
            .SetBounds(0.0, 1.0, 0.0, pangolin::Attach::Pix(UI_WIDTH));

    /* -------- 构建控件    -------- */
    //  按钮对象
    pangolin::Var<bool> A_Button("ui.a_button", false, false);
    //  单选框对象
    pangolin::Var<bool> A_Checkbox("ui.a_checkbox", false, true);
    //  滑条，Double型
    pangolin::Var<double> Double_Slider("ui.a_slider", 3, 0, 5);
    //  滑条，Int型
    pangolin::Var<double> Int_Slider("ui.int_slider", 3, 0, 5);
    //  字符串
    pangolin::Var<std::string> A_string("ui.a_string", "Hello Pangolin");
    //  按钮，保存视框
    pangolin::Var<bool> SAVE_WIN("ui.save_win", false, false);

    //  按钮，函数触发
    pangolin::Var<std::function<void()>> reset("ui.Reset", SampleMethod);
    //  绑定键盘快捷键
    pangolin::RegisterKeyPressCallback(pangolin::PANGO_CTRL + 'b', pangolin::SetVarFunctor<double>("ui.a_slider", 3.5));

    pangolin::RegisterKeyPressCallback(pangolin::PANGO_CTRL + 'r', SampleMethod);
    while( !pangolin::ShouldQuit() )
    {
        //  清空颜色、深度缓存区
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
        //  背景颜色
        glClearColor(0.1f, 0.2f, 0.3f, 0.3f);

        /*--------  控件回调函数  --------*/
        //
        if (pangolin::Pushed(A_Button)) { std::cout << "Push button A." << std::endl; }

        if (A_Checkbox) { Int_Slider = (int) Double_Slider; }
        //  按钮，保存图像回调函数实现
        if (pangolin::Pushed(SAVE_WIN)) { pangolin::SaveWindowOnRender("window"); }

        //  激活相机对象
        d_cam.Activate(s_cam);

        /*--------  绘制图像  --------*/
        pangolin::glDrawColouredCube();

        // 帧循环
        pangolin::FinishFrame();
    }

    return 0;
}

void SampleMethod()
{
    std::cout << "You typed ctrl-r or pushed reset" << std::endl;
}

此时，按下Ctrl+R触发函数SampleMethod；按下Ctrl+B触发函数保存图像。同时，pangolin默认定义按下按键ESC退出程序，Tab全屏化。

Jason.Li_0012
关注
专栏目录
Pangolin库学习大全
几度春风里的博客
03-02 3055
详细介绍了Pangolin。它是基于OpenGL完成的，它不但支持OpenGL的基本操作，还提供了一些GUI的功能。对于在SLAM的学习中，它是必不可少的3D显示工具。
what(): Pangolin X11: Failed to open X display
bkhyv的博客
06-08 1566
【代码】what(): Pangolin X11: Failed to open X display。
Pangolin多视口显示——按钮面板，图片，三维点云
Cristin_杰的博客
07-11 8917
这篇博客记录： Pangolin的几类显示方法，包括按钮面板，彩色图片，三维点云（可变换视角） Pangolin显示cv::Mat格式图片的方法 原本倒置的图片自下而上渲染（变正:） 1.按钮面板 //新建按钮和选择框 pangolin::CreatePanel("按钮面板").SetBounds(0.0,1.0,0.0,0.2); //第一个参数为按钮的名字，第二个为默认状态
Pangolin 开源项目快速入门指南
最新发布
gitblog_00615的博客
09-15 914
Pangolin 开源项目快速入门指南 Pangolin 项目地址: https://gitcode.com/gh_mirrors/pangolin3/Pangolin 项...
Pangolin(使用)
weixin_43384504的博客
03-25 583
一款基于opengl 开发的三维显示工具： https://blog.csdn.net/c602273091/article/details/65441315
pangolin学习笔记1
dna葡萄糖的博客
05-11 4330
主要针对：SLAM可视化绘图库——Pangolin教程（一）_yuntian_li的博客-CSDN博客_slam可视化绘图库的讲解进行学习一、基础操作基本步骤： 创建窗口->启用深度测试->创建相机视图(包括相机参数和相机位姿)->创建交互视图->清空颜色和缓存->绘制图案->推进窗口事件 #include <pangolin/pangolin.h> int main( int /*argc*/, char** /*argv*/ ) { pango..
【SLAM学习】基于Pangolin绘制运动轨迹
Q小鑫
05-10 2187
该库提供了一系列图形界面工具，包括窗口、OpenGL渲染器、3D相机、图像显示等，可以方便地进行三维数据可视化和交互。易于使用：Pangolin库的接口简单易用，可以快速搭建三维数据可视化和交互界面，同时还提供了丰富的示例程序和文档，方便开发者上手使用。多功能：Pangolin库提供了丰富的图形界面工具，包括窗口、OpenGL渲染器、3D相机、图像显示等，可以满足不同需求的开发者。轻量级：Pangolin库的代码量很少，只依赖于少量的第三方库，因此非常轻量级，可以很容易地集成到其他项目中。
视觉SLAM理论与实践第三讲习题
qq_38795436的博客
04-05 317
1、是 2、是 （都满足封闭性、结合率、么元、逆） 1、 2、
pangolin_docker：用于Pangolin的Docker容器
02-18
Pangolin是一个轻量级的便携式快速开发库，用于管理OpenGL显示/交互和抽象视频输入。 它的核心是一个简单的OpenGl视口管理器，它可以帮助模块化3D可视化而不会增加其复杂性，并提供先进而直观的3D导航处理程序。 ...
java8stream源码-pangolin:穿山甲
06-04
在您的代码中包含穿山甲头文件，并在使用穿山甲之前的某处调用pangolin::init() # include " pangolin.hpp " # include " pangolin.cuh " int main ( int argc, char **argv) { pangolin::init (); // your code ...
Pangolin X11: Unable to retrieve framebuffer options
legalhighhigh的博客
01-01 638
先安装编译Pangolin use pangolin: slambook/3rdpart/Pangolin or download it from github: https://github.com/stevenlovegrove/Pangolin install dependency for pangolin (mainly the OpenGL): sudo apt-get inst...
SLAM可视化绘图库——Pangolin教程（二）
weixin_43991178的博客
03-29 8551
SLAM可视化绘图库——Pangolin教程（二）Task3：为Pangolin添加控件代码解析Task 4：多视图与图片显示代码解析 在上一讲中，我们学习了如何使用Pangolin绘制一个简单的动画并在多线程中运行，今天我们将继续学习如果对Pangolin的视窗进行分割并添加简单的控件。 教程代码：https://github.com/yuntianli91/pangolin_tutorial...
Pangolin使用踩坑
z15f34的博客
03-09 681
Pangolin在使用时出现按键点击没反映的情况： 代码如下： //question: 把创建按钮放在前面，按键无法使用；放在这里就可以使用 pangolin::CreatePanel("menu").SetBounds(0.0,1.0,0.0,pangolin::Attach::Pix(175)); pangolin::Var<bool> meanuStopHere("menu.Stop Here",false,false); pangolin::Var.
pangolin于SLAM的实战学习（三）
Eminbogen的博客
07-22 1699
目录 9.绘制点和制作点云效果 10.将图像特征点加入原第八程序 程序：https://github.com/eminbogen/7.16Pangolin 上一节：https://blog.csdn.net/unlimitedai/article/details/96134857 9.绘制点和制作点云效果 绘制点是比较简单的： 在绘图的子函数中加入类似如下语句即可，给予颜色和位置。 ...
[3.5] pangolin库初步了解
ASUNAchan的博客
05-05 871
1.基础使用 #include <pangolin/pangolin.h> int main(int , char **) { //1.创建一个窗口 pangolin::CreateWindowAndBind("window_title",1000, 600); //w=1000 h=600 //2.启用深度测试 glEnable(GL_DEPTH_TEST); //3.创建一个观察相机视图(定义目标并初始化) pangolin::OpenGl
Pangolin库：视窗、相机、视图的构建及基础图形的绘制
JasonLi的博客
02-13 4047
对Pangolin库的基础学习，记入了构建一个相机、视图、视窗对象的方式，并对最基础的点、线、折线、不规则图形绘制进行讲解。
Pangolin 基础知识补充
weixin_43700534的博客
09-11 304
pangolin基础知识补充
PCL与Pangolin冲突Cuda问题
qq_41949101的博客
02-17 743
pcl和pangolin冲突
Panglon可视化显示使用
qq_43526137的博客
09-12 701
panglon可视化
pangolin::attach::pix()函数
03-21
pangolin::attach::pix()函数是Pangolin库中的一个函数，用于在窗口中显示像素数据。该函数的原型如下： void pangolin::attach::pix(const void* img, int w, int h, const std::string& format = "RGBA") 其中，img是指向像素数据的指针，w和h分别是图像的宽度和高度，format是图像数据的格式，默认为RGBA格式。该函数可以用于显示图像、视频等数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值