{"id":12435,"date":"2019-03-27T00:59:50","date_gmt":"2019-03-27T00:59:50","guid":{"rendered":"http:\/\/www.appservgrid.com\/paw92\/?p=12435"},"modified":"2019-03-27T00:59:50","modified_gmt":"2019-03-27T00:59:50","slug":"gtkdialog-create-graphical-gtk-interfaces-and-dialog-boxes-using-shell-scripts-in-linux","status":"publish","type":"post","link":"https:\/\/www.appservgrid.com\/paw92\/index.php\/2019\/03\/27\/gtkdialog-create-graphical-gtk-interfaces-and-dialog-boxes-using-shell-scripts-in-linux\/","title":{"rendered":"Gtkdialog \u2013 Create Graphical (GTK+) Interfaces and Dialog Boxes Using Shell Scripts in Linux"},"content":{"rendered":"

Gtkdialog<\/b>\u00a0(or gtkdialog) is an open source nifty utility for creating and building GTK+ Interfaces and Dialog Boxes with the help of Linux shell scripts and using GTK library, as well as using an xml-like syntax, which makes easy to create interfaces using gtkdialog. It is much similar to most famous tool called Zenity, but it comes with some useful customizable features that enables you to easily create many widgets like vbox, hbox, button, frame, text, menu, and a lot more.<\/p>\n

\n

\"Install<\/a><\/p>\n

Create Gtkdialog Boxes in Linux<\/p>\n<\/div>\n

Read Also<\/b>\u00a0:\u00a0Create GTK+ Graphical Dialog Boxes using Zenity<\/a><\/p>\n

Installation of Gtkdialog in Linux<\/h3>\n

You can download\u00a0gtkdialog-0.8.3<\/a>\u00a0(which is is the latest version) or you may also use wget command, unpack the downloaded file and run these following commands to compile from source.<\/p>\n

$ sudo apt-get install build-essential\t\t[on Debian<\/b> based systems]<\/pre>\n
# yum install gcc make gcc-c++\t\t\t[on RedHat<\/b> based systems]<\/pre>\n
$ wget https:\/\/gtkdialog.googlecode.com\/files\/gtkdialog-0.8.3.tar.gz\r\n$ tar -xvf gtkdialog-0.8.3.tar.gz\r\n$ cd gtkdialog-0.8.3\/\r\n$ .\/configure\r\n$ make\r\n$ sudo make install<\/pre>\n
Now let\u2019s start creating some boxes, create a new \u201cmyprogram<\/b>\u201d script in your home folder.<\/p>\n
My First Program<\/h5>\n
$ cd\r\n$ touch myprogram<\/pre>\n
Now open the \u201cmyprogram<\/b>\u201d file using any text editor you want, and add the following code to it.<\/p>\n
#!\/bin\/bash \r\n\r\nGTKDIALOG=gtkdialog \r\nexport MAIN_DIALOG=' \r\n\r\n<window title=\"My First Program\" icon-name=\"gtk-about\" resizable=\"true\" width-request=\"300\" height-request=\"310\"> \r\n\r\n<vbox> \r\n\t<hbox space-fill=\"true\" space-expand=\"true\"> \r\n\t\t<button>\t \r\n\t\t\t<label>Welcome to TecMint.com Home!<\/label> \r\n\t\t\t<action>echo \"Welcome to TecMint.com Home!\"<\/action> \r\n\t\t<\/button> \r\n\t<\/hbox> \r\n<\/vbox> \r\n<\/window> \r\n' \r\n\r\ncase $1 in \r\n\t-d | --dump) echo \"$MAIN_DIALOG\" ;; \r\n\t*) $GTKDIALOG --program=MAIN_DIALOG --center ;; \r\n\r\nesac \r\n------------<\/pre>\n
Save the file, and set execute permission and run it as shown.<\/p>\n
$ chmod 755 myprogram\r\n$ .\/myprogram<\/pre>\n
This is how your first program created and executed using gtkdialog.<\/p>\n
\n
\"Gtkdialog<\/a><\/p>\n
Gtkdialog Program<\/p>\n<\/div>\n
Now, we will explain the code in short.<\/p>\n
    \n
  1. #!\/bin\/bash<\/b>: The first line of any shell script, it is used to specify the bash shell path.<\/li>\n
  2. GTKDIALOG = gtkdialog<\/b>: Here we defined a variable to use it later when executing the shell script with gtkdialog, this line must be in all scripts that you create using gtkdialog.<\/li>\n
  3. export MAIN_DIALOG=<\/b>: Another variable we defined which will contain all syntax for our interface, you can replace MAIN_DIALOG with any name you want, but you have to replace it also in last 4 lines of the script.<\/li>\n
  4. Window Title<\/b>: I don\u2019t think that this code need to be explained, we created a title, a default icon for the window, we choose if it was resizable or not, and we defined the width and height we want, of course all of those options are secondary, you can just use the\u00a0<window><\/b>\u00a0tag if you want.<\/li>\n
  5. <vbox><\/b>\u00a0: We use the vbox tag to create a vertical box, it is important to create a vbox tag in order to contain other tags such as hbox and button, etc.<\/li>\n
  6. <hbox><\/b>: Here we created a horizontal box using the <hbox> tag, \u201cspace-fill\u201d and \u201cspace-expand\u201d are options to expand the hbox through the window.<\/li>\n
  7. <button><\/b>: Create a new button.<\/li>\n
  8. <label><\/b>: This is the default text for the button, we closed the label tag using <\/label>, of course it is very important to close all the tags that we use.<\/li>\n
  9. <action><\/b>: This what happens when the button is clicked, you can run a shell command if you want or execute any other file if you want, there are many other actions and signals as well, don\u2019t forget to close it using <\/action>.<\/li>\n
  10. <\/button><\/b>: To close the button tag.<\/li>\n
  11. <\/hbox><\/b>: To close the hbox tag.<\/li>\n
  12. <\/window><\/b>: To close the window tag.<\/li>\n<\/ol>\n
    The last 4 lines must also be in all shell scripts that you create using gtkdialog, they execute the MAIN_DIALOG variable using gtkdialog command with the \u2013center option to center the window, very useful in fact.<\/p>\n
    My Second Program<\/h5>\n
    Similarly, create a another file and call it as \u2018secondprogram<\/strong>\u2018 and add the following whole content to it.<\/p>\n
    #!\/bin\/bash \r\n\r\nGTKDIALOG=gtkdialog \r\nexport MAIN_DIALOG=' \r\n\r\n<window title=\"My Second Program\" icon-name=\"gtk-about\" resizable=\"true\" width-request=\"250\" height-request=\"150\"> \r\n\r\n<vbox> \r\n\t<hbox space-fill=\"true\"> \r\n\t\t<combobox>\t \r\n\t\t\t<variable>myitem<\/variable> \r\n\t\t\t<item>First One<\/item> \r\n\t\t\t<item>Second One<\/item> \r\n\t\t\t<item>Third One<\/item> \r\n\t\t<\/combobox> \r\n\t<\/hbox> \r\n\t<hbox> \r\n\t\t<button> \r\n\t\t\t<label>Click Me<\/label> \r\n\t\t\t<action>echo \"You choosed $myitem\"<\/action> \r\n\t\t<\/button> \r\n\t<\/hbox> \r\n<hseparator width-request=\"240\"><\/hseparator> \r\n\r\n\t<hbox> \r\n\t\t<button ok><\/button> \r\n\t<\/hbox> \r\n<\/vbox> \r\n<\/window> \r\n' \r\n\r\ncase $1 in \r\n\t-d | --dump) echo \"$MAIN_DIALOG\" ;; \r\n\t*) $GTKDIALOG --program=MAIN_DIALOG --center ;; \r\n\r\nesac<\/pre>\n
    Save the file, set execute permission on it and run it as shown.<\/p>\n
    $ chmod 755 secondprogram\r\n$ .\/secondprogram<\/pre>\n
    \n
    \"Gtkdialog<\/a><\/p>\n
    Gtkdialog Select Box<\/p>\n<\/div>\n
    Now, we will explain the code in short.<\/p>\n
      \n
    1. We create a combobox widget using <combobox>, the <variable> tag is the default name of the variable which the chosen item will be stored in, we used this variable to print the selected item later using echo.<\/li>\n
    2. <hseparator><\/b>\u00a0is a horizontal separator, you can set the default width for it using width-request option.<\/li>\n
    3. <button ok><\/button><\/b>\u00a0is an OK button that will close the window just when you click it, it is very useful so we don\u2019t need to create a custom button to do that.<\/li>\n<\/ol>\n
      My Third Prgoram<\/h5>\n
      Create another file called\u00a0\u2018thirdprogram<\/strong>\u2018 and add the whole bunch of code to it.<\/p>\n
      #!\/bin\/bash \r\n\r\nGTKDIALOG=gtkdialog \r\nexport MAIN_DIALOG=' \r\n\r\n<window title=\"My Second Program\" icon-name=\"gtk-about\" resizable=\"true\" width-request=\"250\" height-request=\"150\"> \r\n\r\n<notebook tab-label=\"First | Second|\"> \r\n<vbox> \r\n\t<hbox space-fill=\"true\"> \r\n\t\t<combobox>\t \r\n\t\t\t<variable>myitem<\/variable> \r\n\t\t\t<item>First One<\/item> \r\n\t\t\t<item>Second One<\/item> \r\n\t\t\t<item>Third One<\/item> \r\n\t\t<\/combobox> \r\n\t<\/hbox> \r\n\t<hbox> \r\n\t\t<button> \r\n\t\t\t<label>Click Me<\/label> \r\n\t\t\t<action>echo \"You choosed $myitem\"<\/action> \r\n\t\t<\/button> \r\n\t<\/hbox> \r\n<hseparator width-request=\"240\"><\/hseparator> \r\n\r\n\t<hbox> \r\n\t\t<button ok><\/button> \r\n\t<\/hbox> \r\n<\/vbox> \r\n\r\n<vbox> \r\n\r\n\t<hbox space-fill=\"true\"> \r\n\t\t<text> \r\n\t\t<label>Spinbutton <\/label> \r\n\t\t<\/text> \r\n\t<\/hbox> \r\n\r\n\t<hbox space-fill=\"true\" space-expand=\"true\"> \r\n\t\t<spinbutton range-min=\"0\" range-max=\"100\" range-value=\"4\"> \r\n\t\t\t<variable>myscale<\/variable> \r\n\t\t\t<action>echo $myscale<\/action> \r\n\t\t<\/spinbutton> \r\n\t<\/hbox> \r\n\r\n\t<hbox> \r\n\t\t<button ok><\/button> \r\n\t<\/hbox> \r\n\r\n<\/vbox> \r\n<\/notebook> \r\n<\/window> \r\n' \r\n\r\ncase $1 in \r\n\t-d | --dump) echo \"$MAIN_DIALOG\" ;; \r\n\t*) $GTKDIALOG --program=MAIN_DIALOG --center ;; \r\n\r\nesac<\/pre>\n
      Save the file, grant execute permission and fire it as shown.<\/p>\n
      $ chmod 755 thirdprogram\r\n$ .\/thirdprogram<\/pre>\n
      \n
      \"Select<\/a><\/p>\n
      Select Name from Dropdown<\/p>\n<\/div>\n
      \n
      \"Select<\/a><\/p>\n
      Select Number from Dropdown<\/p>\n<\/div>\n
      Here, the explanation of code in more detailed fashion.<\/p>\n
        \n
      1. We created two notebook tabs using <notebook>, the tab-label option is where you can create tabs, gtkdialog will create tabs depending on the labels you enter, every <vbox> is defined as a tab, so the first tab starts with the first <vbox>, the second tab starts with the second <vbox>.<\/li>\n
      2. <text><\/b>\u00a0is a text widget, we used the <label> tag to set the default text for it.<\/li>\n
      3. <spinbutton><\/b>\u00a0tag will create a new spin button, range-min option is the minimum value, and range-max is the maximum value for the spin button, range-value is the default value for the spin button.<\/li>\n
      4. We gave a variable \u201cmyscale\u201d to the <spinbutton>.<\/li>\n
      5. We printed the selected value using echo and $myscale variable, the default signal for the action here is \u201cvalue-changed\u201d which helped us doing that.<\/li>\n<\/ol>\n
        This was just an example window, you can create more complicated interfaces using gtkdialog if you want, you can browse the official documentation in gtkdialog website to view all gtkdialog tags from the link below.<\/p>\n
        Gtkdialog Documentation<\/a><\/p>\n
        Have you used gtkdialog to create GUIs for your shell scripts before? Or have you used any such utility to create interfaces? What do you think about it?<\/p>\n
        Source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
        Gtkdialog\u00a0(or gtkdialog) is an open source nifty utility for creating and building GTK+ Interfaces and Dialog Boxes with the help of Linux shell scripts and using GTK library, as well as using an xml-like syntax, which makes easy to create interfaces using gtkdialog. It is much similar to most famous tool called Zenity, but it … <\/p>\n
        Continue reading “Gtkdialog \u2013 Create Graphical (GTK+) Interfaces and Dialog Boxes Using Shell Scripts in Linux”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12435","post","type-post","status-publish","format-standard","hentry","category-linux"],"_links":{"self":[{"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/posts\/12435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/comments?post=12435"}],"version-history":[{"count":1,"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/posts\/12435\/revisions"}],"predecessor-version":[{"id":12436,"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/posts\/12435\/revisions\/12436"}],"wp:attachment":[{"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/media?parent=12435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/categories?post=12435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appservgrid.com\/paw92\/index.php\/wp-json\/wp\/v2\/tags?post=12435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}