1. Basic environment

Local computer system: window10

Remote server system: Ubuntu18.04.2

VSCode version: 1.51.1

2. Problem description

vscod provides an excellent remote connection plug-in (Remote-SSH), we can easily connect to the remote server for programming. But if our program involves operating and displaying images, since the program runs on the server, we cannot directly display the images to our local system. Or if we want to use the linux commands in gedit that require the support of a graphical interface, an error will also be reported.

3. Solutions

Use the X protocol to forward, that is, to forward the image displayed on the remote server to our local system. The specific principles are as follows:

The X protocol consists of X server and X client (here X server corresponds to the local computer, and X Client corresponds to the server):

X server manages display-related hardware settings on the host (such as graphics card, hard disk, mouse, etc.), and is responsible for drawing and displaying screen images, and notifying X client of input settings (such as keyboard and mouse).
X client (that is, X application program) is mainly responsible for the processing of events (that is, the logic of the program).

For example, if the user clicks the left button of the mouse, because the mouse is managed by the X server, the X server captures the mouse click, and then tells the X client the action, because the X client is responsible for the program logic, so the X client will According to the preset logic of the program (such as drawing a circle), tell the X server: "Please draw a circle at the position where the mouse is clicked". Finally, the X server responds to the request of the X client, and draws and displays a circle at the position where the mouse is clicked.

4. Operation steps

Install and start the x11 service in the local system (X ming is used here)
Local vscode installs Remote-SSH and Remote X11 plugins
Set the settings related to server connection in local vscode Remote-SSH
Set .vscode/launch.json in the project where the server wants to use the GUI (so that the programs in the project can use the GUI)
Set the DISPLAY environment variable in the server (so that the terminal can also use the GUI)

4.1 Install X ming on the local system (win10)

4.1.1 Download link:

XmingDownload _

4.1.2 Install Xming

In this step, you can modify the installation path. For other steps, click Next until complete.

4.1.3 Enable X11 service

Open x11launch and click next until it is complete. Remember the Display number of the second picture, it will be used later.

4.1.4 Modify x ming settings

We need to find the X0.hosts file in the x ming installation directory, and add your server ip under localhost (the 0 in X0.hosts is the Display number that needs to be remembered just now)

4.2 Install Remote-SSH and Remote X11 plug-ins in local vscode

4.2.1 Installing Plugins

Search for the corresponding plug-in name in the extensions of the vsocde software, and click to install (take Remote X11 as an example).

4.3 Set up local vscode Remote-SSH

4.3.1 Open the remote-ssh setting as follows

4.3.2 Add the following fields

比如你的服务器地址是 192.168.133.111， 用户名是aaa

Host sdfasdf #这里可以随便取一个名字
  HostName 192.168.133.111
  ForwardX11 yes
  ForwardX11Trusted yes
  ForwardAgent yes
  User aaa

4.4 Set .vscode/launch.json in the project where the server wants to use GUI

4.4.1 Settings.vscode/launch.json

Connect to the server with vscode, and open a project, add the code in the red box at the end of .vscode/launch.json, if there is an env attribute, add "DISPLAY": "localhost:10.0" in it.

4.5 Set the DISPLAY environment variable in the server

4.5.1 Add environment variables to ~/.bashrc and use source ~/.bashrc to update.

4.5.2 Verify that the environment variable is set successfully

5. Verify

5.1 Verify that the engineering program can use the server GUI

You can use the following python program, if the image appears, the installation is successful. If it fails, you can restart vscode and try again.

import matplotlib.pyplot as plt
import numpy as np
from mpl_toolkits.mplot3d import Axes3D
ax = plt.axes(projection='3d')
ax.scatter(np.random.rand(10),np.random.rand(10),np.random.rand(10))
plt.show()

5.2 Verify that the terminal can use GUI

Then enter xclock in the terminal of vscode, and if the clock appears, the installation is successful. If it fails, you can restart vscode and try again.

reference connection

X protocol related

https://blog.csdn.net/akuoma/article/details/82182913

https://blog.csdn.net/zb12138/article/details/107160825

VSCode connects to a remote server using a graphical interface (GUI)