PrintCreating Two Forms for the Graphical User Interface
Form 1 - Main Window
Step 1 - Creating the Main Layout (6:31)
Jan Oliver Wallgrün: In this video, I'm going to show you how to create the graphical user interface, the GUI, for the Locations from Web Services from lesson two. And the GUI consists of two parts-- the GUI for the main window of our tool, and the GUI for the dialog box that opens up and you click on the create new shape file button. I have Qt Designer running here on the left of the screen.
And on the right side, you can see the actual tool that is currently running as a script to an ArcGIS Pro. And I just used the tool add feature for the Eiffel Tower to some layer in ArcGIS Pro. So that gives us a template for what we are actually trying to create here in Qt Designer. I'm going to start by creating the GUI for the main window, and for that, the dialog for creating a new form, I pick the template for main window. And then I click on the create button.
And now we have this empty window template here. We can now fill it with the different widgets. The first thing I'm going to do is I'm going to change the title of this template, of this form, so that it has the title Location from Web Services as we can see here for the actual tool. To do that, I will have the main window selected here on the top right of Qt Designers.
We can see the hierarchy of which should start in the main window. And then in the window below it, the property editor-- you can see the properties of the widget that is currently selected. And if you scroll down a little bit, there is a property called window title. And I'm clicking on the right side of it now, and then I'm going to enter the title that we want to give it. So Locations from Web Services.
And you can see that this is directly reflected in the actual form. The title is now changed to Locations from Web Services. We still haven't saved the form. So it would be a good idea to do that now. So in the menu file, I'm selecting the option save as. I've already set up an empty folder for this project, and I'm going to save this under the name GUI underscore main dot UI.
And the name of the file also appears in the title of the window. Then, our tool doesn't have a menu bar, but it does have a toolbar at the top of the button for exiting the program. And it has a status bar at the bottom. The status bar is already there in the template, but no toolbar. So I'm doing a right click right in the middle of the form, and just pick the first option at toolbar. And you see the toolbar showing up there now.
Now as first explained in the lesson text, the main window of our tool is using a vertical layout to group everything into four main rows. One row for the query part, one row for picking a service to query, one row for displaying the results, and one row for adding the results, features to the shapefile, layer, or CSV file.
So let's create this organization into four rows, where each row is Qt groupbox widget. OK. Find the groupbox widget in the widget list on the left in Qt Designer under the containers category right here. And I'm now going to direct one groupbox widget from this container list over to form and cropping it just in the empty area in the middle.
You can see that we now have added a groupbox widget to our main window. I'm going to change the title of the groupbox by directly clicking the title and changing it to query term. So that now to the left, you see for the actual tool. Right now, since we haven't specified what layout should be used, this groupbox just takes up the minimum amount of space.
But now I'm going to change the layout of the central area of our main window to a vertical layout. So I'm doing a right click into the empty area in the middle, and at the bottom, there's the layout option. There, I'm clicking lay out vertically. And as a result, the groupbox is now expanded to fill up the entire area, and you can add additional widgets to this vertical layout. And we want to add the other three groupbox widgets for the other three rows.
So I began clicking the groupbox widget in the list on the left in Qt Designer and dragging it over to the form for our main window and putting it directly below the first groupbox. And this is indicated by Qt Designer by showing this blue bar. And then I'm releasing the mouse button. And you can now see we have two groupboxes now. And the second one, I'm again double clicking the title. The second one I'm going to call service.
I have to do the same thing one more time. This time, we'll call the groupbox results. And a fourth time, calling the groupbox add features. OK. So we have now created the main organization, and we can now continue to fill it-- to put additional widgets into these different groupboxes.
Step 2 - Adding the Widgets of the Query Term Section (4:48)
Jan Oliver Wallgrün: Let's starts with the groupbox, the first one for query term. One thing I'm going to show you only once is how to set a toolTip for a widget. So this can be done by selecting the widget, and then in the property editor list on the right, look for the property that is called toolTip. And I'm entering the toolTip text, enter name to search for here as the toolTip.
So every time the user hovers over this groupbox area for a longer time, this toolTip will appear to tell them what you can do there. You can actually try that out by using the Form menu and then the entry Preview. And in the preview, you can actually try out our GUI. If I hover over this groupbox in the window that is now open, you can see the toolTip appearing there. It shows the text that I just entered.
So going back to our form-- and now, we see that the first groupbox actually just has a single widget, namely something that the allows the user to enter some text, the search term. So this is a QLineEdit widget that you find under Input Widgets in the list on Qt Designer on the left. And I'm going to drag this line edit widget over to the groupbox. And dropping it in right in the middle, and now, we've added this line edit widget to the groupbox.
Next thing is I'm going to change the layout of this groupbox to use also a vertical layout so that this line edit widget will actually expand-- will be expanded horizontally to fill the entire area. So I'm doing a right click in the empty area of the groupbox and then click lay out, lay out vertically. You can see now that line edit fits the entire screen-- the entire window.
As explained in the text, it is important that we name the widgets that you need to refer to from our code. We give them names that are easy to remember and that needs to be exactly the names I'm going to use here because the code shown later in this section of the lesson will refer to these names. So I select the line input widget and then right click and click the change object name option. And then I'm going to name the widget query term line edit, abbreviated LE.
And the LE stands for line edit so that I know this is a line edit widget, and I see the variable name. So that means that when this GUI is saved and then compile it to python code, the variable that stores this line edit widget will be called query term LE. And if you look at the hierarchy at the top right in Qt Designer, you can actually now see the queue line edit widget. Edit as a child of the groupbox, and it's been named queryTermLE.
In the lesson text, there you find an image that shows you how the important widgets need to be named. Let me quickly pull that up. So this one right here. All the orange terms, the orange labels, specify the names that you need to give to the different widgets we're going to create in the following, in order for the code later shown in the lesson to work.
But I'm not going to do that for all of these because then the video would get much too long. It's just something that you will have to do if you want to use-- if you are following along with this video and want to then run the code with the GUI that you have created yourself. OK. At this point, we are done with the first groupbox for entering the query term, and we can move on to the second one.
Step 3 - Adding the Widgets of the Service Section (12:24)
Jan Oliver Wallgrün: The second box is much more complicated than the first one. So we have in it, first of all, the Tab widget, which has three tabs. And each of the tabs have different content. And below it, we have a button for running the actual query.
So the first thing I'm going to do is to drag a Tab widget over to this Group Box. And the Tab widget can also be found on the Containers. Because it's for storing other widgets. So I'm taking it, and dragging it over, and dropping it onto the second Group Box. And then I begin changing the layout to vertical of the Group Box. As a result, the tab is now expanded.
And we need a tab with actually three tabs, not just two as is the default in Qt Designer. So I'm doing a right click on the tabs at the top and picking the entry in the page. Then it doesn't really matter whether it's after or before. And then you have the Tab widget now with three tabs.
As I said, it is important that we name objects correctly, so that they match the code that we will later show. And these tab features-- I'm going to show that. But I'm not going to show it for many more. So this step, which needs to be called queryServicesTW for Tab widget.
And the individual tabs that you now see below it-- that's why I'm showing it here-- also need to be renamed. I'm doing that directly here in the hierarchy by double clicking the name there. And then the first one gets to be named nominatimTab. Because it's the one that has the content for querying nominatim. The second one should be named geonamesTab. And the third one should be named directinputTab.
So this is just to demonstrate how you would name the objects for the individual tabs according to what the labels you see in the image. You still also have to change the titles of the individual tabs to say OSM Nominatim, Geonames, and Direct Input.
For that, we have to go into the Property Editor. So I have the first tab selected right now. And now, I'm scrolling down in the property list to the green area, which are the properties that are specific for the Tab widget. And there, it currently says Tab 1 for the current tab text. And that's what I'm going to change to OSM Nominatim. And I'm doing the same thing for the second tab. This one should have the title Geonames. And the third one, the title should be Direct Input.
OK, then in addition to this tab, we have the button at the bottom for actually running the query. I could directly add the button below the Tab widget into the Group Box widget. But then it would expand horizontally to fill the entire window.
If I just want it left aligned like this here, I'm first going to add a horizontal layout. So the layouts are right at the top of the list of widgets. So I'm taking that and dragging it to the area below the Tab widget. It's directly below it so that it's still part of the Group Box. So now, I've added the horizontal layout here.
And now, I'm going to add the Push Button widget, which you can find in the Buttons, dragging it over. It's actually, in this case easier to drag it onto the horizontal layout we just created here in the hierarchy. And now, we have the Push Button as part of the horizontal layout.
And now we can, to make it just a small button on the left, add a horizontal spacer, which is here in the Qt Widget List under spacers, and add that to the right of the button into the horizontal layout ... like this. And now, you see that this spacer expands as much as the other widgets allow. And as a result, the Push Button is here. So ... shrink to just take a bit of space to just show the label completely on the left. And we can now change the title of that button by double clicking it, and then entering Run Query.
And now, we have the core structure of our second Group Box done. But we still need to set up the content of the three different tabs. So I'm selecting the first tab now, the one for OSM Nominatim. And when looking at the actual tool, we see that the content of this tab consists of two edits fields, line edit fields, two labels for them, and one checkbox for enabling or disabling the Country Code input code.
These are arranged in a grid layout. So we have the first column with just a checkbox, a second column with the label, and the third column with the line edit fields. So I'm going to start with a checkbox under Buttons here.
So I'm dragging that one onto the empty area of the OSM Nominatim tab, right click into the empty area, and pick a grid layout. And I'm going to double click the checkbox to clear out the text. So there should be no text for the checkbox. And then you would still have to change the object name using right click Object Name.
The next thing is I'm going to add the label. Labels are very close to the bottom under Display widgets. I'm putting it to the right side so that you get a vertical bar. That means I'm going to add the label in the cell that is to the right of the cell containing the checkbox. Then let me also add the second label. This one should be below. And then I'm going to add the two line edit fields by dragging them over and placing them again to the right.
So that was the first one. And then the second one-- and now, you see that you already have the correct layout that we wanted. I double click the first label to change its text to say Country code, column, and do the same thing with the second label, change the title say Limit. And in the second field, I'm already going to enter the value 10 as a default value that will be always there even without their having entered anything into the field.
And then we are done with the first of our tabs. And we can move on to the Geonames tab. The Geonames tab again uses a grid layout. But it has a few more widgets. It has actually four line edit fields. Let me start again by-- well, let me start with the label for Geonames user name. So I'm dragging it onto the empty area of the tab and changing the title to Geonames user name.
Then I'm going to change the layout to a grid, again doing a right click, layout, Layout in a Grid. Well, let me first add all the labels. So I'm adding a second label below the first, and a third, and a fourth one. And the second one I call Country code, the third one Feature class, and the fourth one limit.
Now, let's add the two checkboxes for the second and third row to the left of the labels. So I'm dragging the first checkbox over until the blue bar appears vertically to the left. So then I'm clearing the text again so that we have just the checkbox. And I'm doing the same with the second checkbox.
And now, it's time to add the four edit fields. So again, Line Edit widgets, I'm dragging the first one to the right of the first label. And then, the second one, now you see that it actually shows the cells add red boxes. So I'm on the third one and the fourth one. So now, we have exactly the layout we have in the actually tool. And I'm again entering a default value of 10 for the last line edit field for the limit.
And that means we can move on to the third tab for directly adding entering feature information for a single feature. Again, same procedure, we're using a grid layout and first going to add three labels, one below the other, changing the layout to the grid.
The first label gets the title Name; the second label, the title Latitude; and the [? fourth ?] label, the title Longitude. And now, the corresponding three edit fields-- the first one to the right of the Name label, the second one in the cell below, and the third one again in the cell below.
And that's it. We are done with the Service Group Box and can move on now to the next Group Box for displaying the results.
Step 4 - Adding the Widgets of the Results Section (3:36)
Jan Oliver Wallgrün: So the situation for the third row of the group widgets for results is a bit more complicated, because it wasn't possible to add the Q Web-view widgets for showing that map from within Qt Designer. Instead, I'm just going to set things up so that we can later add this widget from our code.
The content of the group box is organized into two rows, one with the List widget and later on the Web-view, and one with the three buttons below it. So the organization will be a vertical layout containing two horizontal layouts over two different rows.
I'm going to start by adding the first horizontal layout. So I'm picking your horizontal layout from the widget list in Qt designer. And I'm going to use the hierarchy to do that. So I'm dragging it over to the hierarchy and dropping it on top of the group box for the third row. So we have, now, a child of that group box with a horizontal layout.
And since this is very important, I'm going to already rename it correctly so that it's clear where you have to do that. So I'm going to call that horizontal layout resultsListAndMapHBL, for Horizontal Box Layout, like this.
OK, now we can add the List View widget to it. Then we have to pick the List View widget under Item Views, Model-based. So it's important to pick this one, not the list widget, to the List View. And we drag it over and drop it on top of the horizontal layout we just created, like this. That's all we have to do for this first row. As I said, the Q Web-view will be added later to the right of this Q widget from the code.
So now we add a second horizontal layer on, below the first one. And this is one that should have the three buttons. So we're now going to drag three Push-button widgets-- and dropping them on top of the layout in the hierarchy window-- the first one, the second one, and the third one.
And the last thing is, I'm going to use the horizontal spacer again, so that these buttons are all pushed all over to the left. You have to aim very carefully, until the blue bar appears on the right of the third button. And then you get the desired layout.
So we still have to change the names of the titles of these buttons. The first one should be called Clear selection. The second one should be called Select all. And the third one should be called Invert selection. And that's it. We're done with the third row of our layout.
Step 5 - Adding the Widgets of the Add Features Section (11:01)
Jan Oliver Wallgrün: The fourth row of our layout is, again, very similar to the second one. You have the tab widgets, with the button below it, and then you have to set up the widgets for the different tabs.
So first thing is to take a tab widget and their containers and drag it over. Drop it onto the group box for add features. And then, I'm going to change the layout out of the group box to use a vertical layout. And I'm going to add a third page to that tab by doing a right click on top of it and using insert page.
And now I'm going to give the tabs the right names in the property editor. Again, we have to scroll down to the green area. And there, on the current tab text, you change the titles. The first one should be called Shapefile. The second one should be called Layer. And the third one should be called CSV.
And you have to make sure that you rename the entire tab widget, as shown in the graphic that's in the figure in the lesson materials. And also the individual tabs-- so, these entries here in the hierarchy-- need to be renamed.
And then we can add the horizontal layout for the single button here. So that's something you have seen before now. I'm going to drag the horizontal layout, drop it below the tab widget. And then I'm going to add a push button to that horizontal layout, and a horizontal spacer, so that the button is pushed all the way to the left. And the title of the button-- double clicking it again and changing it to Add.
OK, at this point, we just have to create the content for the different tabs, starting with the Shapefile. Like the tabs above for the services, all of these are using grid layouts to arrange the items, starting with a button that is for creating a new Shapefile. So I'm dropping a push button into the Shapefile tab widget. And then I'm going to do a right click and change the layout to grid. And the title of the button should be changed to Create new shapefile and three dots, because this one is going to open a dialogue, which is indicated by the three dots.
Then we have two labels below it. I'm going to add the first label, and changing it to say Add to shapefile:. And then the second label, you know it, this one says Field to store name:.
And then for the second row, we need the line editor widget for entering the name of a Shapefile. I'm dropping it here with the vertical blue bar on the right. For the third row, we need a combo box widget. It's one which allows users to pick between a small number of choices. I'm going to place there. It will be a horizontal layout.
And then we're going to add the combo box to that horizontal layout. And we add the horizontal spacer. So the effect of that is that, just, the combo box, again, is not expanded all the way, but just as much as needed to display the items in it.
And then the last thing missing is this tool button we have here that is going to open with file dialog for picking a Shapefile. So we take a tool button under buttons, and dropping it in the second row to the right of the line edit widget, like this. And then we have set up everything for this Shapefile tab, and we can move on to the Layer tab.
Layer looks somewhat similar. We can start by adding the two labels. One will be called Pick layer:, and the second one will be called Field to store name:. And we're setting the layout of this tab to use a grid.
And then we actually have two combo boxes for both rows. So I'm dragging a combo box and place it to the right of the Pick layer label, and another combo box to the right of the Field to store name label. And then we have another tool button for refreshing the list of layers. So the tool button, I will drag over and drop to the right of the first combo box.
And finally, so that all of this does not take more space than needed, we're going to place a horizontal spacer as a kind of false column. And then everything will be pushed over to the left as much as possible. So that's it for the layout tab. And we can move on to the CSV tab.
And that one is really simple now. It just has to create this single row. So you could also use a horizontal layout for that. So I'm going to start with the label, call that label Add to file:. Now I'm going to do right click layout, lay out horizontally. And then I'm going to drop the line edit for entering the name of the CSV file to the right of the label, and finally, another tool button for opening a file dialog, to the right of the line editor widget, like this.
And I'm saving everything. So basically, we have the view for our main window done. There's just a little thing to do this exit tool button we have at the top. For this one, we have to set up an action so that we can directly say, inside Qt Designer, that this tool button here at the top should, basically, close the application.
The action editor can be found here at the bottom right. And I just click this button, the first button at the top, which is for creating a new action. And then I'm filling out the dialog. The text for that action should be Exit. The Object name, actionExit-- that can remain like it is. And well, we can enter a ToolTip, Exit program, for it.
And that's basically all we're going to do here. You're going to pick an icon for this later on from our code, using the standard set of icons coming with Qt. So I'm pressing OK, and now we have this action in our list of actions here. And I can actually take the action and drag it and drop it on top of our tool button here, on top of the main window. And we will now see that we have the action showing up there as an exit. And we're going to replace that text later with the icon, as I said.
So far, we have not said what the action should do. So I'm going to change to the signal and slot editor now, by clicking on the tab below the action editor below. And I'm now going to add an entry there by clicking on the plus symbol. And for center, I'm picking the action exit that we just created.
Then I'm picking the signal triggered, so meaning whenever action exit is triggered-- for instance, by clicking on the exit button of the toolbar-- the signal should be sent to-- and now, I'm picking our application. So I'm clicking the main window, and I'm picking the close slot, so meaning, when the signal is sent to the main window, its close method will be executed and the application will be closed. Now I'm saving the program.
And let's look at the preview for a moment. So we see the elements are all there, the different tabs are showing up correctly. But obviously, we don't have much functionality. So not a lot is going to happen, except that we can use, already, the tool button to close the application.
Form 2 - Creating the New Shapefile Dialog (3:37)
Jan Oliver Wallgrün: I said at the beginning that we will need to create two forms, two graphical user interfaces. We have now finished the one for the main window, but we still need to create the form for opening the Create New Shape for dialog. So if I click on this dialog actual tool, on this button, I get the dialog box where I'm allowed to enter the name of the new shapefile and the field that should be added to it.
So plus, we still need to create, so I'm going to use File, New, and now, I'm going to pick Dialog With Buttons Bottom as the template to use and then press Create. And we now get a new form, which already has two buttons created, and you have to set it up that it looks like the dialog box we want.
First of all, let's change the title. So under Properties, we go to Window Title, and then we call this Dialog Create Shapefile, and we save the whole form under the name gui_newshapefile.ui.
OK. Now we have things set up. We can now dot at the missing widgets, and for that, I'm going to drop a grid layout at the top of this, and then I'm going to change the layout of the entire dialog box to a vertical layout. As a result, I still have the buttons, the default buttons that they are already created by QT designer at the top right, and we now have a grid layout above them so that we can add the other widgets.
I'm adding the two labels first. And I'm calling the first one "New shapefile" and the second one "Field for name." And then I'm adding the two line edit widgets like that. And finally, it's two buttons for the first row. And that's pretty much it.
We have now created the gui for the dialog box. We're just going to save it, and now we're done. So we have created two forms, one called gui_main and one gui_newshapefile, and these can now be compiled into Python code and then used to create the key tool to combine it with a code that actually implements all the functionality needed, and that's what you're going to see in the rest of this walk through.