Designing the user interface

By developing the field simulation through the object-oriented and crop simulation interface tutorials you are hopefully gaining some idea of what it is like to develop a non-trivial application.

Whilst it may still be a simple application in the grand scheme of things, it is much more complex than the kind of software a student would be asked to develop at AS level.

At AS level most students are able to work without designing anything. Whilst we obviously encourage good practice, it is often the case that students can not see the point in bothering with top-down design, structure charts and pseudo-code when they can visualise the problem clearly in their minds just fine.

This leaves them woefully unprepared for the practical project at A2 level. In order to be successful they must see how design can help them understand their project better and not just be a section of the write-up they complete and never look at again.

This section will step you through some of the design and thought processes behind the development of the field simulation graphical user interface to show you how the design process helped inform what needed to be discovered and developed at the implementation phase.

Interface development

Since we already have a working console-based field simulation from object-oriented tutorials we will be using this as the basis for our application. This means that the focus is on developing the interface that will interact with the console program.

Designing the main window

It is important to visualise what the interface looks like so it makes sense to start by drawing a simple diagram. This can be hand drawn or creating in your favourite diagram program.

Main window design

Understanding the design

When drawing interface diagrams it is important to annotate them to show what each element represents. At this stage it is also useful to attempt to identify the interface components you will use to implement the design.

From the above diagram, you can see:

  • Main window - used before, so easy to implement
  • Buttons - used before, so easy to implement
  • Graphics - used before, so easy to implement
  • Icons - not used before, will need to investigate
  • Toolbars - not used before, will need to investigate

This process of developing a design will enable you to create a list of topics you will need to investigate further before you start your implementation.

So far our investigation list is:

  • How do we create draggable icons?
  • How do we create toolbars to store the icons?

What happens when we drag the label?

In the previous section we identified that a icon is required that we can drag from the toolbar into the graphicsview. This process will instantiate a new crop or animal of the appropriate type in our field:

Dragging the label

It's a drag

What happens when we drag the icon from the toolbar into the QGraphicsScene? We want to instantiate a crop, which is easy enough we can just call the appropriate class definition from our console crop simulation surely? For example, my_crop = Wheat() would create a new wheat crop.

However, we are dragging the icon into to the QGraphicsScene and these can contain only QGraphicsItems...

So we need both:

  • my_crop = Wheat()
  • my_crop_graphic = QGraphicsPixmapItem()

This is horrible, it gives us to objects to manage for each crop and animal instance. The field and its representation also suffer from the same problem.

Investigation list

We will add this question to our investigation list:

  • How do we create draggable icons?
  • How do we create toolbars to store the icons?
  • How can we combine the functionality of a crop with a graphical representation?
  • How can we combine the functionality of the field with a graphical representation?

What happens when we can't drag the label?

In the previous section we discovered what happens when we can drag a label from the toolbar into the graphics scene. However, what if our field is full? What happens then?

Error dialog window

Dialog

You will recognise what happens when we can't drag an icon as being the same thing as happens when you drag an icon to the trash can/recycle bin on your desktop - you get a window popping-up.

In the case of deleting a file it is a confirmation request and in our situation it is just a notification that an error occurred. In both situations the application is communication with you the user. We call this having a dialog.

As it happens there is a special window class we can use for this purpose - QDialog. If we did not know this we would add this question to our investigation list.

Investigation list

We will add this question to our investigation list:

  • How do we create draggable icons?
  • How do we create toolbars to store the icons?
  • How can we combine the functionality of a crop with a graphical representation?
  • How can we combine the functionality of the field with a graphical representation?
  • Is there a special window type for dialogs or do I just use QMainWindow?

In context

How do we want to interact with our objects once they have been added to the graphics scene? In a number of applications you might use a context menu:

Context menus

Investigation list

We will add this question to our investigation list:

  • How do we create draggable icons?
  • How do we create toolbars to store the icons?
  • How can we combine the functionality of a crop with a graphical representation?
  • How can we combine the functionality of the field with a graphical representation?
  • Is there a special window type for dialogs or do I just use QMainWindow?
  • How do we add contextual menus to objects?

Field Report

At first glance there is nothing new here - just click the button and the report pops up in a QDialog window:

Field report

Dynamic generation

As you can see from the above annotation it is a little bit more complicated - the contents of the dialog window are dependent on the contents of the field:

  • Empty field - display 'empty message'
  • Just crops - display crop reports and 'no animals' message
  • Just animals - display animal reports and 'no crops' message
  • Both crops and animals - display both sets of reports

Therefore we have something else to add to our list.

Investigation list

We will add this question to our investigation list:

  • How do we create draggable icons?
  • How do we create toolbars to store the icons?
  • How can we combine the functionality of a crop with a graphical representation?
  • How can we combine the functionality of the field with a graphical representation?
  • Is there a special window type for dialogs or do I just use QMainWindow?
  • How do we add contextual menus to objects?
  • How do we dynamically generate content for a dialog window?

Manually growing the field

There is nothing new here, growing the field is much the same as growing a crop in our previous graphical application:

Manual grow dialog

Final investigation list

Therefore, our final list of topics we need to investigate is:

  • How do we create draggable icons?
  • How do we create toolbars to store the icons?
  • How can we combine the functionality of a crop with a graphical representation?
  • How can we combine the functionality of the field with a graphical representation?
  • Is there a special window type for dialogs or do I just use QMainWindow?
  • How do we add contextual menus to objects?
  • How do we dynamically generate content for a dialog window?

Summary

In this section you have seen the importance of developing the interface design and thinking about what your choices will mean for your implementation. This process has given us a list of topics that must be investigated to enable us to produce an interface that approaches the required functionality.