Step 2: Designing the UI

Making the UI layout

First you must create the UI layout. In the GuitarTuner application there must be buttons for selecting the tone, sliders for microphone sensitivity and volume, a mute button, and a button to change the input or output mode. Furthermore, one slider is used to show the voice level.

A more advanced way to construct the application UI is presented in the Qt Quick hands-on lab.

1. Open the guitartunerui.ui file from the src folder under the Forms category. The design mode will open and you will see an empty widget to be edited.
2. Drag and drop a new label to the widget, give it the name tabulatorIcon, remove the default text, and make the horizontal alignment to be centered by choosing AlignHCenter. Properties other than default values will appear as bold text. To add a pixmap, click the pixmap value, and buttons will appear; choose the image from files or from resources. Press the button with the down arrow, select Choose Resource from the opened menu, and select guitartab.svg.
   
   
   
   
   
3. Add a new horizontal slider to the widget; give it the name correctSoundSlider; set the minimum and maximum values to be -50 and 50, respectively; and set the tickPosition property to be TicksAbove and tickInterval to be 50.
   
   
4. Add a new horizontal label to the widget and name it noteLabel. Set the text to be A.
5. Add two tool buttons to the widget, name them buttonPrev and buttonNext, and set their arrowType property to be LeftArrow and RightArrow, respectively. Place them beside the noteLabel. Set their horizontal size policy to be preferred instead of fixed.
6. Select the created noteLabel label, buttonPrev, and buttonNext buttons. Choose Tools > Form Editor > Lay out Horizontally.
   
7. Add a new push button to the widget, name it modeButton, and set its text to Change mode.
   
8. Add a horizontal line to the widget.
   
9. Add a new vertical slider to the widget, name it soundSlider, and set its value to be 65.
10. Add a new tool button, name it soundButton, set the autoRaise property to True, and set the icon to be note.svg. After that, set the Normal No and Active On icons to be noteNo.svg. Place soundButton on the right side of soundSlider.
11. Add a new label, name it micSensitivityLabel, and set its text to be microphone\nsensitivity (where '\n' denotes a new line). Set the horizontal size policy to be fixed, so that the text label's vertical size is fixed.
12. Select the created soundSlider, soundButton, and micSensitivityLabel widgets. Choose Tools > Form Editor > Lay out Horizontally.
    
13. Select the whole widget. Choose Tools > Form Editor > Lay out Vertically.

Implementing GuitarTunerUI

The UI layout is finished. Now you will proceed to implement the elementary functionality of the GuitarTunerUI class.

1. Add implementation to the GuitarTunerUI constructor as follows. Code has already been added to set up the UI. You need to set up the class attributes to default values. Use the getVolumeFromSoundSlider method to acquire the proper value for volume and microphone sensitivity. Then set up the current tone index and use updateFrequencyByToneIndex to set up the frequency and the name for it. Finally, initialise the UI by calling toggleInputOrOutput for the first time.

   Note that there are some unimplemented @TODOs left in this method on purpose. Do not implement these, because they will be implemented during the following steps. This same directive also applies for other steps of this hands-on lab module.

   GuitarTunerUI::GuitarTunerUI(QWidget *parent) : QWidget(parent), ui(new Ui::GuitarTunerUI) { ui->setupUi(this); // Set up the class attributes to proper values. m_maximumPrecision = 0; m_outputActive = false; m_muted = false; m_outputVolumeLevel = getVolumeFromSoundSlider(); m_inputVolumeLevel = 1.0 - m_outputVolumeLevel; // Set up the current tone, the frequency, and the name for it. m_currentToneIndex = 5; updateFrequencyByToneIndex(m_currentToneIndex); // Connect the signals from UI into proper slots. // @TODO STEP 4 /** * Connect the soundSlider valueChanged signal into * changeVolume slot, and soundSlider toggled signal into * toggleSound slot. */ // @TODO STEP 6 /** * Connect the modeButton clicked signal into * toggleInputOrOutput slot. */ // @TODO STEP 7 /** * Connect the buttonNext and buttonPrev clicked signals into * next and prev slots of this. */ // Initialise up the UI by calling toggleInputOrOutput // for the first time. toggleInputOrOutput(); }

   Select All
2. Add implementation to the GuitarTunerUI getVolumeFromSoundSlider method. This is just a method that returns the current value of soundSlider, divided by the maximum value of the slider.
   /*! Returns a value from 0 to 1, representing the volume. */ qreal GuitarTunerUI::getVolumeFromSoundSlider() const { qreal value = ui->soundSlider->value(); return value/ui->soundSlider->maximum(); }

   Select All
3. Add implementation to the GuitarTunerUI updateFrequencyByToneIndex method. It must set m_currentToneFrequency and m_currentToneString according to the note index, and also set noteLabel to have m_currentToneString text.
   /*! Updates the \c m_currentToneFrequency and \c m_currentToneString, according to the given \a index. Also updates the UI. */ void GuitarTunerUI::updateFrequencyByToneIndex(int index) { switch(index) { case 0: { m_currentToneFrequency = FrequencyE; m_currentToneString = "E"; break; } case 1: { m_currentToneFrequency = FrequencyA; m_currentToneString = "A"; break; } case 2: { m_currentToneFrequency = FrequencyD; m_currentToneString = "D"; break; } case 3: { m_currentToneFrequency = FrequencyG; m_currentToneString = "G"; break; } case 4: { m_currentToneFrequency = FrequencyB; m_currentToneString = "B"; break; } case 5: { m_currentToneFrequency = FrequencyE2; m_currentToneString = "e"; break; } default: { qDebug() << "invalid index!" << index; } } // Set noteLabel text according to the current tone. ui->noteLabel->setText(m_currentToneString); }

   Select All
4. Implement the GuitarTunerUI methods getVolume, getMuteState, getMicrophoneSensitivity, isInputModeActive, and getFrequency. They just return the corresponding class attributes m_outputVolumeLevel, m_muted, m_inputVolumeLevel, the negation of m_outputActive, and m_currentToneFrequency.
   /*! Returns the volume. */ qreal GuitarTunerUI::getVolume() const { return m_outputVolumeLevel; } /*! Returns true if the sound is muted. */ bool GuitarTunerUI::getMuteState() const { return m_muted; } /*! Returns the microphone sensitivity. */ qreal GuitarTunerUI::getMicrophoneSensitivity() const { return m_inputVolumeLevel; } /*! Returns whether the input mode is active. */ bool GuitarTunerUI::isInputModeActive() const { return !m_outputActive; } /*! Returns the current target frequency. */ qreal GuitarTunerUI::getFrequency() const { return m_currentToneFrequency; }

   Select All

Now when you run the application, the following UI will be shown. In the next steps, the implementation of the UI will be modified so that only either soundButton or micSensitivityLabel is shown at a time.

If the application is not working properly, download and use the files in this zip file.