IHM

Using Qt to build a first GUI

Héctor Satizábal
Andres Perez-Uribe


 

SAP GUI for the gold version Apple Watch ?
(from mindsetconsulting blog)
"A picture is worth a thousand words.
An interface is worth a thousand pictures."

Ben Shneiderman

The goal of this laboratory is to explore the use of Qt as means to build Graphial User Interfaces while considering the fundamental principles of design, proposed by Don Norman.
 

1. Hands on Qt

Qt ("cute" or unofficially "cue-tee") is a crossplatform application framework for developing application sofware that can be run on various software and hardware platforms with little or no change in the codebase.

Qt uses standard C++ with extensions including signals and slots that simplifies handling of events, and this helps in development of both GUI and server applications which receive their own set of event information and should process them accordingly.

Qt comes with its own set of tools to ease cross-platform development. Qt Creator is a cross-platform IDE for C++ and QML. In addition to Qt Creator, Qt provides a handy makefile generation tool, qmake, a tool that automates the generation of Makefiles for development project across different platforms. Without qmake, one should write different makefiles for each platform, so it is a useful tool for transparent handling of differences in various platforms.

Because of simplicity, robustness, native performance, cross-platform compatibility and both commercial and open source licenses, many organizations in many parts of the world use Qt. These include but are not limited to European Space Agency, DreamWorks, Lucasfilm, Panasonic,Philips, Samsung, Siemens, Volvo, Walt Disney Animation Studios, Blizzard Entertainment, Electronic Arts.

From Wikipedia.

There are plently of Qt examples and tutorials on the Qt website. You are invited to follow in detail one or several of them during the development of the proposed exercises of this course.

2. A Notepad application

The Text Editor application is a very basic but at the same time complete tutorial that will let you learn about Qt tools and Qt programming. Follow such tutorial and build a text editor having the following controls:

The followinfg image shows an example of the interface you should program

The Text Editor is a good starting point but it is not enough to build the notepad we are asking at this point. Feel free to follow other tutorials and to search over the internet to find complementary and useful information.

3. A GUI for FFMPEG

FFmpeg is a free software project that produces libraries and programs for handling multimedia data. The name of the project is inspired by the MPEG video standards group, together with "FF" for "fast forward". The project was started by Fabrice Bellard (using the pseudonym "Gérard Lantau") in 2000, and was lead by Michael Niedermayer from 2004 until 2015. The project comprises several components, like ffmpeg, ffplay, ffprobe, etc.

Developers have coded several GUI interfaces to facilitate the use of ffmpeg components. Some exemples of GUIs are: Avanti, GUI4FFMPEG, FFMPEGGUI, etc. (see below).

The objective of point 3 of this laboratory is to develop a GUI that must allow the user to generate the command line that allows her/him to trim a video by indicating star and stop times.

The GUI must contain:

  • A menu item allowing to exit the application
  • A button allowing to select an input video file
  • A text field allowing to edit the name of the input file
  • A button allowing to select an output video file
  • A text field allowing to edit the name of the output file
  • A text field showing the properties of the input file (using ffprobe)
  • A field allowing the user to select the start time of the output video
  • A field allowing the user to select the stop time of the output video
  • A text field showing the command line which should run ffmpeg to cut the video

    The GUI must give feedback to the user concerning:

  • Whether the input file is valid
  • The duration of the input video
  • Whether the output file already exists or not
  • The start and stop time selected
  • The overlapping between start and stop

    The GUI must fulfill the requirements in the checklist of design considerations (after Don Norman) presented during the last lesson. You can modify the type of interface: button, menu, slider, etc. proposed in the first list if you consider it to be more appropriate.

    Report

    Please, provide a brief report (max. 4 pages) presenting and accompanying your GUI. Present the issues tackled by your solution and justify your choices. Provide your code within a zip file indicating your names Deadline: Thursday 10th November 23:59


  • October 2016