Blue Screen Menus in Linux

The Linux operating system has to be one of my favorite tools to study and work on. I got the opportunity recently to work on a tool that displays text boxes, menus, input boxes, and more in a GUI-based or even Terminal-based Linux.

This tool is called Dialog. It is basically a tool that covers the full screen of a terminal (or the full screen if it was a terminal-based OS) showing only the data to be displayed inside the dialog box.

Today, I will be showing you how to install and use this tool on an Ubuntu 20.04 System and how you can utilize it to improve the experience of a user who is not very familiar with using a terminal.

Installing The Tool

You can install the tool by using the apt package manager on Ubuntu:

sudo apt install dialog

Structure of The Command

dialog --title "Trying Out Dialog" --infobox "This is cool" 10 20

This are multiple parts in the above command, these parts are explained below:

• dialog - (Required) This is the command needed to start the application
• --title "Trying Out Dialog" - (Optional) The title of the dialog box shown on the screen, you can change the value between the quotations (")
• --infobox "This is cool" - (One of many options) This is the type of box that is being shown in the dialog box. In this case, it is simply text put being displayed.
• 10 20 - (Required) These two values describe the size of the dialog box, the first value is the amount of lines that describe the height, so in this case the box should have a height of 10 lines. The second value is how many characters wide the dialog box should be, in this case, it is 20 characters wide.

The image below shows the result of running the command explained above:

Many More Options

As explained above, the command can take many more options for the type of dialog being displayed, the most common ones include:

• inputbox - Displays an input box
• textbox - Displays the content of a file
• menu - Show a menu with multiple items in which the user can go through and click on one of the items
• checklist - Display multiple items in the form of a checklist
• Many more! For a list of examples of each of the available options, you can checkout this GitHub Repository by @tolik-punkoff:

https://github.com/tolik-punkoff/dialog-examples

Working With Menus

For the sake of this tutorial, I will focus on building a menu using Dialog and how you can display items, as well as run functions or commands based on the choice made on the dialog by the user.

This project will have a menu that asks the user whether they prefer eating waffles or pancakes, and run a function based on the choice made.

We can start off by creating a file that will run all of this. Create a file called waffles_vs_pancakes.sh.

touch waffles_vs_pancakes.sh

Then run the below command to give it read, write, and execute permissions:

chmod 0777 waffles_vs_pancakes.sh

Now we can start editing the file, you can use any code editor you prefer and start by typing the below:

dialog --menu  "Which do you prefer more?"  0  0  0  \
    "Waffles"  "Waffles are better"  \
    "Pancakes"  "Pancakes are better" 2> results.txt

Command explained:

• --menu "Which do you prefer more? 0 0 0 \" - This prompts Dialog to display a menu that includes the items listed afterwards. The three zeros stand for the height, width, and menu height that will be assigned by Dialog automatically depending on the amount of content in the dialog box.
• "Waffles" "Waffles are better" \ - This is how an option looks like in the menu. The first value would be the result of that option was clicked, the second value is a description of that option. So if the user click on this option, "Waffle" would be the result.
• "Pancakes" "Pancakes are better" 2> results.txt - This first part of this line is the same as the above explained line, the difference here is the 2> results.txt, which takes the choice made by the user and prints it in a separate file called results.txt.

Once the above is done and ran, it should look like this:

Next, we can start writing the logic for what happens after they make a choice:

case  `cat results.txt`  in
    Waffles) dialog --infobox "Waffles are better" 0 0;;
    Pancakes) dialog --infobox "Pancakes are better" 0 0;;
esac

Command explained:

• case `cat results.txt` in - This line uses a switch to check the output of the user by accessing the results.txt file that was created in the previous command.
• Waffles) dialog --infobox "Waffles are better" 0 0;; - This line checks if the value is equal to "Waffles" and if so then display another dialog with an infobox that has the message "Waffles are better".
• esac - This line represents the end of the switch

The result of this would display a dialog like the one below:

After completing the file, you can run it from the terminal by running the below command:

./waffles_vs_pancakes.sh

Conclusion

Thank you for reading this tutorial, I hope it benefited from it and gained some new knowledge. You can checkout the below links for more details on Dialog and how you can go further with it.
https://github.com/tolik-punkoff/dialog-examples - Dialog Option Examples
https://www.linuxjournal.com/article/2807 - An Introductory Tutorial
https://linuxcommand.org/lc3_adv_dialog.php - More detailed documentation

Thanks again for reading and best of luck!