Dockerizing my way through graphics

Docker is hard and so weird and complicated and doesn't have plenty of resources to learn from even! ~ my very first thoughts when I wanted to step into the Docker world to try something new.

Now, Docker seems like a complicated term and makes you wonder, where and why, and what should I even use Docker for ?! I am not going to answer all these questions, these are the beginner steps for which I landed across an amazing video on youtube and I will be putting the link for the same as well.

Best Docker 101 (60 min) video - https://bit.ly/3bfhh4v

What am I going to cover in this blog?

I will explain in layman's terms or try my best. Docker is great when it comes to dealing with building images, running them as containers, and managing the virtual packages/services created but what if I want to run a program that requires the use of GUI? In normal cases, it will run the docker image but in the terminal and that gives an undesired output! So the blog aims to connect the docker image with a GUI.

From where did I land on this topic? 😅

This is going to sound silly but just going to give a tiny background story on how I landed on the topic. Well, being an undergrad at NIT Surat, currently reached my 6th semester (phew!), we have a subject Computer Graphics for which they required us to use an outdated library that only worked on ubuntu and using code blocks (out of the question even) on Windows.

Now the only OS I've are Fedora, Mac OSX, and Windows and I am neither going to install Ubuntu nor use code blocks just for this. So my only left choices were using a ubuntu docker image or using a VM. I felt to make use of docker image as it seemed a better alternative use to avoid heat load up and slowing down my CPU. Now, this is all new to me, docker and such but still managed to connect my docker image with GUI and figured out it can be done for any docker images. For now, I could do a successful setup for only Mac OSX and Linux Distros.

Enough of storytelling, let's get on track with how to connect Docker Images with GUI.

Connecting libgraph with GUI using the ubuntu docker image

Libgraph is an implementation of the TurboC graphics API (graphics. h) on GNU/Linux using SDL. Let me warn you, this is quite old! It was hard to find working solutions on the net for this 🙁

I have created a docker image named compgraphics and pushed it to the docker hub which encompasses all the initial setup to install sudo and libgraph on your system.

Step 1: Create a docker file to use one of the C files to produce the image

FROM aemiej/compgraphics:latest 

LABEL maintainer="Aemie Jariwala"

WORKDIR "/libgraph-1.0.2"

RUN gcc -o sample sample.c -lgraph

CMD ["./sample"]

Step 2: Specifically for MAC OSX Users

For Mac, you require additional applications for the GUI to work. They are socat and Xquartz.

$ brew install socat
$ brew install xquartz

Remember to restart your PC after this, it's a must else it won't work.

Open two terminals, where on one your socat will continue to run and others you will containerize your docker images.

Socat allows for bidirectional data transfers from one location to another. It listens to the docker image running and then displays the image in Xquartz, a GUI application

Terminal 1

$ socat TCP-LISTEN:6000,reuseaddr,fork UNIX-CLIENT:\"$DISPLAY\"

Terminal 2

$ open -a Xquartz # within preferences => security, tick both checkboxes 

$ git clone https://github.com/AemieJ/ubuntu-docker-libgraph.git

$ cd ubuntu-docker-libgraph

$ docker build --pull --rm -f "Dockerfile" -t ubuntudockerlibgraph:latest "."

$ docker run -d -e DISPLAY=192.168.1.11:0 ubuntudockerlibgraph

Here, DISPLAY=192.168.1.11 will vary for each user and can be found from ifconfig en0 & you'll get inet X netmask similar to this where X address will replace the value with DISPLAY key.

After this, an application will open with the output (pretty cute!).

Similar to this, you can run any docker images that are pre-built such as firefox, chrome, Spotify, Skype, and just way too many 👻. All these images can be found from the git repository - https://github.com/jessfraz/dockerfiles

Tiny example on how to open Spotify GUI using docker:

$ docker run -d -e DISPLAY=192.168.1.11:0 jess/spotify

Similarly, you can do the same for other images as well!

Step 2: Specifically for any Linux Distro

The steps for this are relatively easier than for Mac OSX. The requirement of a single terminal and an additional package only required to be installed.

$ git clone https://github.com/AemieJ/ubuntu-docker-libgraph.git
$ cd ubuntu-docker-libgraph

Update the Dockerfile by adding EXPOSE 8887 before the CMD ["./sample"] line.

$ sudo docker build --name ubuntudockerlibgraph --pull --rm -f "Dockerfile" -t ubuntudockerlibgraph:latest "."
$ sudo apt-get -y install xauth
$ xauth list

On running xauth list, you get an output of the following username/unix:0 MIT-MAGIC-COOKIE-1 8fe8efc75454dbf178bbe00442689406

$ sudo docker run -ti --net=host -e DISPLAY -v /tmp/.X11-unix ubuntudockerlibgraph bash
$ xauth add username/unix:0 MIT-MAGIC-COOKIE-1 8fe8efc75454dbf178bbe00442689406
# you'll receive an error => `./Xauthority file doesn't exist` => disregard it
$ /sample

Damn! We're done with the instructions for the Linux distros as well. 😄
The output of this will be the same as shown within the instructions of dockerizing through graphics in Mac OSX.

This is the end of this long article but I hope you found it useful and continue to dockerize your way through everything!