• OpenHD改造实现廉价高清数字图传(树莓派+PC)—（六）OSD和视频画面整合显示

            这个OpenHD改造移植系列的最后一篇文章，这篇文章主要讲如何讲前面说到的全部内容串接起来，讲OSD画面显示和视频画面整合到一起，形成完整的图传地面显示，真正实现PC上直接接收显示图传视频和数据。

    OpenHD改造实现廉价高清数字图传(树莓派+PC)—（一）概述_hoopertsau的博客-CSDN博客_openhd

    OpenHD改造实现廉价高清数字图传(树莓派+PC)—（二）Wifibroadcast Wifi广播通信_hoopertsau的博客-CSDN博客

    OpenHD改造实现廉价高清数字图传（树莓派+PC ）—（三）OpenVG和libshapes在PC上的移植_hoopertsau的博客-CSDN博客

    OpenHD改造实现廉价高清数字图传（树莓派+PC ）—（四）OSD数据传输和画面显示_hoopertsau的博客-CSDN博客

    OpenHD改造实现廉价高清数字图传（树莓派+PC）—（五）gstreamer视频采集、传输和显示_hoopertsau的博客-CSDN博客

    一、OSD和视频整合显示改造

            整合OSD和视频显示核心思路：

            在X11window上创建两个窗口，一个用OpenVG来绘制OSD画面，一个用gstreamer来显示视频画面。将OSD画面的背景要设置为透明，并叠加显示在视频窗口上，这样就有浮在视频画面上的效果了。这里主要就在于怎么将OSD的背景设置为透明显示。

            这里主要修改的还是openvg目录下的oglinit.c文件，主要是创建窗口这里要修改。

            直接看一下代码，如何创建这样的两个窗口。

    1. // 创建X11窗口
    2. VGboolean windowCreate(STATE_T * state, const char* title,
    3.                               const VGuint width,
    4.                               const VGuint height)
    5. {
    6.     VGint screen, screenWidth, screenHeight;
    7.     XSetWindowAttributes windowAttributes;
    8.     XSizeHints windowSizeHints;
    9.  
    10.     XVisualInfo* visualInfo;
    11.     MY_PFNGLXSWAPINTERVALSGIPROC sgiSwapInterval;
    12.     MY_PFNGLXSWAPINTERVALEXTPROC extSwapInterval;
    13.     // OpenGL surface configuration
    14. 	GLXFBConfig fbconfig;
    15.     VGint fbConfigsCount = 0;
    16. 	
    17. 	static int glAttributes[] = {
    18. 		GLX_RENDER_TYPE, GLX_RGBA_BIT,
    19. 		GLX_DRAWABLE_TYPE, GLX_WINDOW_BIT,
    20. 		GLX_DOUBLEBUFFER, True,
    21. 		GLX_RED_SIZE, 1,
    22. 		GLX_GREEN_SIZE, 1,
    23. 		GLX_BLUE_SIZE, 1,
    24. 		GLX_ALPHA_SIZE, 1,
    25. 		GLX_DEPTH_SIZE, 1,
    26. 		None
    27. 	};
    28.  
    29.     // open a display on the current root window
    30.     display = XOpenDisplay(NULL);
    31.     if (display == NULL) {
    32.         fprintf(stderr, "Unable to open display.\n");
    33.         return VG_FALSE;
    34.     }
    35.  
    36.     // get the default screen associated with the previously opened display
    37.     screen = DefaultScreen(display);
    38. 	// 根窗口
    39. 	rootWindow = RootWindow(display, screen);
    40.  
    41.     // get screen bitdepth
    42.     screenDepth = DefaultDepth(display, screen);
    43.     
    44.     // run only on a 32bpp display
    45.     if ((screenDepth != 24) && (screenDepth != 32)) {
    46.         fprintf(stderr, "Cannot find 32bit pixel format on the current display.\n");
    47.         XCloseDisplay(display);
    48.         return VG_FALSE;
    49.     }
    50.  
    51.     // get screen dimensions
    52.     screenWidth = DisplayWidth(display, screen);
    53.     screenHeight = DisplayHeight(display, screen);
    54. 	state->screen_width = screenWidth;
    55. 	state->screen_height = screenHeight;
    56. 	printf("screen width=%d height=%d\r\n",screenWidth,screenHeight);
    57. 	
    58. 	unsigned long white = WhitePixel(display,screen);
    59. 	unsigned long black = BlackPixel(display,screen);
    60. 	
    61. 				   
    62. 	// 再创建透明的OSD显示，在上层
    63. 	// 找到合适的配置
    64. 	GLXFBConfig* fbconfigs = glXChooseFBConfig(display, screen, glAttributes, &fbConfigsCount);
    65. 	int i = 0;
    66. 	static XRenderPictFormat *pictFormat;
    67.     for(i = 0; i
    68.         visualInfo = (XVisualInfo_CPP*) glXGetVisualFromFBConfig(display, fbconfigs[i]);
    69.         if(!visualInfo)
    70.             continue;
    71.  
    72.         pictFormat = XRenderFindVisualFormat(display, visualInfo->visual);
    73.         if(!pictFormat)
    74.             continue;
    75.  
    76.         if(pictFormat->direct.alphaMask > 0) {
    77.             fbconfig = fbconfigs[i];
    78.             break;
    79.         }
    80.     }
    81.  
    82. 	// initialize window's attribute structure
    83.     windowAttributes.colormap = XCreateColormap(display, rootWindow, visualInfo->visual, AllocNone);
    84. 	windowAttributes.border_pixel = 0;
    85. 	windowAttributes.background_pixmap = None;
    86. 	printf("None=%d\r\n",None);
    87. 	int attr_mask = 
    88.         CWBackPixmap|
    89.         CWColormap|
    90.         CWBorderPixel;    /* What's in the attr data */
    91. 	
    92.     // create the window centered on the screen
    93. 	state->window_width = width;
    94. 	state->window_height = height;
    95. 	
    96. 	// 先创建视频窗口，在底层
    97. 	video_window =  XCreateSimpleWindow(display,
    98. 									   rootWindow,
    99. 									   0, 0, // origin
    100. 									   width, height, // size
    101. 									   1, black, // border
    102. 									   white );  // backgd
    103. 				   
    104. 	// 创建OSD窗口
    105.     window = XCreateWindow(display, rootWindow, 0,0, width, height, 1, visualInfo->depth, InputOutput, visualInfo->visual, 						attr_mask, &windowAttributes);
    106.     //if ( window == None ) 
    107. 	if (window == None || video_window == None) 
    108. 	{
    109.         fprintf(stderr, "Unable to create the window.\n");
    110.         XCloseDisplay(display);
    111.         return VG_FALSE;
    112.     }
    113. 	
    114.     // set the window's name
    115.     XStoreName(display, window, title);
    116. 	XStoreName(display, video_window, "video window");
    117. 	
    118.     // tell the server to report mouse and key-related events
    119.     XSelectInput(display, window, KeyPressMask | KeyReleaseMask | ButtonPressMask | Button1MotionMask | Button2MotionMask | Button3MotionMask | StructureNotifyMask | ExposureMask);
    120. 	
    121.     // initialize window's sizehint definition structure
    122.     windowSizeHints.flags = PPosition | PMinSize | PMaxSize;
    123.     windowSizeHints.x = 0;
    124.     windowSizeHints.y = 0;
    125.     windowSizeHints.min_width = 1;
    126.     // clamp window dimensions according to the maximum surface dimension supported by the OpenVG backend
    127.     windowSizeHints.max_width = vgPrivSurfaceMaxDimensionGetMZT();
    128.     if (screenWidth < windowSizeHints.max_width) {
    129.         windowSizeHints.max_width = screenWidth;
    130.     }
    131.     windowSizeHints.min_height = 1;
    132.     windowSizeHints.max_height = windowSizeHints.max_width;
    133.     if (screenHeight < windowSizeHints.max_height) {
    134.         windowSizeHints.max_height = screenHeight;
    135.     }
    136.     // set the window's sizehint 不加这一句话，窗口的位置就不能正确设置
    137.     XSetWMNormalHints(display, video_window, &windowSizeHints);
    138.     // clear the window
    139.     XClearWindow(display, video_window);
    140. 	
    141. 	// set the window's sizehint
    142.     XSetWMNormalHints(display, window, &windowSizeHints);
    143.     // clear the window
    144.     XClearWindow(display, window);
    145.  
    146.     // create a GLX context for OpenGL rendering
    147.     glContext = glXCreateNewContext(display, fbconfig, GLX_RGBA_TYPE, NULL, True);
    148.     if (!glContext) {
    149.         fprintf(stderr, "Unable to create the GLX context.\n");
    150. 		XDestroyWindow(display, video_window);
    151.         XDestroyWindow(display, window);
    152.         XCloseDisplay(display);
    153.         return VG_FALSE;
    154.     }
    155.     // create a GLX window to associate the frame buffer configuration with the created X window
    156.     glWindow = glXCreateWindow(display, fbconfig, window, NULL);
    157.     // bind the GLX context to the Window
    158.     glXMakeContextCurrent(display, glWindow, glWindow, glContext);
    159.     // GLX_EXT_swap_control
    160.     extSwapInterval = (MY_PFNGLXSWAPINTERVALEXTPROC)glXGetProcAddressARB((const GLubyte *)"glXSwapIntervalEXT");
    161.     if (extSwapInterval) {
    162.         extSwapInterval(display, glWindow, 0);
    163.     }
    164.     else {
    165.         // GLX_SGI_swap_control
    166.         sgiSwapInterval = (MY_PFNGLXSWAPINTERVALSGIPROC)glXGetProcAddressARB((const GLubyte *)"glXSwapIntervalSGI");
    167.         if (sgiSwapInterval) {
    168.             sgiSwapInterval(0);
    169.         }
    170.     }
    171. 	
    172.     // put the window on top of the others
    173. 	XMapRaised(display, video_window);
    174.     XMapRaised(display, window);
    175. 	
    176.     // clear event queue
    177.     XFlush(display);
    178.     XFree(visualInfo);
    179.  
    180. /*
    181. 	// 无边框的效果
    182. 	Atom window_type = XInternAtom(display, "_NET_WM_WINDOW_TYPE", False);
    183. 	long value = XInternAtom(display, "_NET_WM_WINDOW_TYPE_DOCK", False);
    184. 	XChangeProperty(display, window, window_type, XA_ATOM, 32, PropModeReplace, (unsigned char *) &value,1 );
    185. */
    186.  
    187. 	// 初始化视频显示
    188. 	gst_init (NULL,NULL);
    189. 	printf("gst inited\r\n");
    190. 	initGst(video_window);
    191. 	
    192.     return VG_TRUE;
    193. }

            分析一下这个窗口创建的代码，有几个关键的地方。

            1、找到合适的显示配置

    1. 	// 找到合适的配置
    2. 	GLXFBConfig* fbconfigs = glXChooseFBConfig(display, screen, glAttributes, &fbConfigsCount);
    3. 	int i = 0;
    4. 	static XRenderPictFormat *pictFormat;
    5.     for(i = 0; i
    6.         visualInfo = (XVisualInfo_CPP*) glXGetVisualFromFBConfig(display, fbconfigs[i]);
    7.         if(!visualInfo)
    8.             continue;
    9.  
    10.         pictFormat = XRenderFindVisualFormat(display, visualInfo->visual);
    11.         if(!pictFormat)
    12.             continue;
    13.  
    14.         if(pictFormat->direct.alphaMask > 0) {
    15.             fbconfig = fbconfigs[i];
    16.             break;
    17.         }
    18.     }

            2、窗口的属性设置

    1.     // initialize window's attribute structure
    2.     windowAttributes.colormap = XCreateColormap(display, rootWindow, visualInfo->visual, AllocNone);
    3. 	windowAttributes.border_pixel = 0;
    4. 	windowAttributes.background_pixmap = None;
    5.     int attr_mask = 
    6.         CWBackPixmap|
    7.         CWColormap|
    8.         CWBorderPixel;    /* What's in the attr data */

            要将背景设置为None，并且mask中要设置背景标志

            3、创建两个窗口

    1. // 先创建视频窗口，在底层
    2. 	video_window =  XCreateSimpleWindow(display,
    3. 									   rootWindow,
    4. 									   0, 0, // origin
    5. 									   width, height, // size
    6. 									   1, black, // border
    7. 									   white );  // backgd
    8. 				   
    9. 	// 创建OSD窗口
    10.     window = XCreateWindow(display, rootWindow, 0,0, width, height, 1, visualInfo->depth, InputOutput, visualInfo->visual,attr_mask, &windowAttributes);

            一个是用于显示视频的video_window ，一个是用于显示osd的

    注意：

    这两个的父窗口都是rootWindow，我尝试将osd的父窗口设置为视频，这样背景就不透明了。但是如果将视频窗口也设置为透明，gstreamer就显示不正常了，相互之间有影响。所以就干脆分开两个窗口，互不影响。

            4、设置窗口的位置

    1.     // set the window's sizehint， 不加这一句话，窗口的位置就不能正确设置
    2.     XSetWMNormalHints(display, video_window, &windowSizeHints);
    3.     // clear the window
    4.     XClearWindow(display, video_window);

            如果不设置的话，窗口的初始位置可能会有错位，导致两个窗口不能叠加在一起。

            5、初始化gstreamer并绑定GUI      

    1. 	// 初始化gstreamer库
    2. 	gst_init (NULL,NULL);
    3.     // 创建视频处理的管道，并绑定到视频显示窗口video_window
    4. 	initGst(video_window);

              这个与上一篇文章的内容类似，就不再详细描述了，直接看之前的代码。

              看一下最终效果，叠在一起显示      

    二、总结

            通过将OpenHD深度的剥离改造，可以实现在普通的PC上显示图传，大大降低我们的成本，不需要再买地面端的树莓派了。同时，OpenHD里面有大量“无用”的脚本和代码，过于复杂。

            其实用到的主要就是四个软件：

            1、wifibroadcast，提供底层的通信

            2、openvg，提供osd绘图的支撑

            3、gstreamer，osd调用并用来解析视频用的

            4、osd，接收解析并绘制视频和叠加显示信息

           

            当然OpenHD提供的是一揽子解决方案，直接烧写镜像即可开机使用，比较适合不会开发的航模玩家，可以直接上手使用。

    三、后续

            考虑到天空端的树莓派Zero也开始涨价了，当前价格大概在500块左右(2022年9月30日)，为了进一步降低成本，我还考虑将天空端移植到国产的PI上。

            这里有几个可选的PI，后续再讲如何往这些国产化的PI上进行迁移，进一步降低成本。

            1、OrangePi Zero

                    全志的H3处理器，只要大概120块钱。但是没有CSI接口的摄像头，需要外接使用USB摄像头。

            

            2、OrangePi i96

            RDA8810PL处理器，非常便宜，开发板只要39块钱！摄像头32块。当然，性能不是太好，而且CPU也很老了，也很难找到技术支持，而且坑也比较多。但是架不住它便宜啊，哈哈。

            3、Banana pi-M2 Zero

                    使用的也是全志H3处理器，价格140左右，但是摄像头贵了，要60块钱。

            

            

            

  • 相关阅读:
    IP代理|一文看懂IPv4与IPv6
    markdown语法（更新中）
    python28种极坐标绘图函数总结
    千元级3D打印机爆发在即 全民3D打印的春天快来了？
    端口转发及防火墙过滤设置
    第二章 基础知识（5） - 异常处理
    QoS（服务质量）学习记录
    群晖7.2版本安装Jellyfin
    【VMware虚拟机使用记录】—— 虚拟机开启失败的问题分析及解决方法
    GBase 8c 核心技术
  • 原文地址：https://blog.csdn.net/hoopertsau/article/details/127121472