From 40c5e00ec2a10681d2280841c71d508ed4586ea3 Mon Sep 17 00:00:00 2001
From: Srivats P <pstavirs@users.noreply.github.com>
Date: Thu, 7 Sep 2017 20:45:43 +0530
Subject: [PATCH] (UX) Add textual hints for to the ports window

Improves first run experience
---
 client/portswindow.cpp |   6 +-
 client/portswindow.ui  | 332 ++++++++++++++++++++++++-----------------
 2 files changed, 197 insertions(+), 141 deletions(-)

diff --git a/client/portswindow.cpp b/client/portswindow.cpp
index 76f7ee7..68d9e24 100644
--- a/client/portswindow.cpp
+++ b/client/portswindow.cpp
@@ -349,8 +349,8 @@ void PortsWindow::when_portView_currentChanged(const QModelIndex& currentIndex,
 
     if (!current.isValid())
     {    
-        qDebug("setting stacked widget to blank page");
-        swDetail->setCurrentIndex(2); // blank page
+        qDebug("setting stacked widget to welcome page");
+        swDetail->setCurrentIndex(0); // welcome page
     }
     else
     {
@@ -360,7 +360,7 @@ void PortsWindow::when_portView_currentChanged(const QModelIndex& currentIndex,
         }
         else if (plm->isPort(current))
         {
-            swDetail->setCurrentIndex(0);    // port detail page
+            swDetail->setCurrentIndex(2);    // port detail page
             updatePortRates();
             connect(&(plm->port(current)), SIGNAL(portRateChanged(int, int)),
                     SLOT(updatePortRates()));
diff --git a/client/portswindow.ui b/client/portswindow.ui
index cbab508..ca3331f 100644
--- a/client/portswindow.ui
+++ b/client/portswindow.ui
@@ -1,7 +1,8 @@
-<ui version="4.0" >
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
  <class>PortsWindow</class>
- <widget class="QWidget" name="PortsWindow" >
-  <property name="geometry" >
+ <widget class="QWidget" name="PortsWindow">
+  <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
@@ -9,83 +10,138 @@
     <height>352</height>
    </rect>
   </property>
-  <property name="windowTitle" >
+  <property name="windowTitle">
    <string>Form</string>
   </property>
-  <layout class="QGridLayout" >
-   <item row="0" column="0" >
-    <widget class="QSplitter" name="splitter" >
-     <property name="orientation" >
+  <layout class="QGridLayout">
+   <item row="0" column="0">
+    <widget class="QSplitter" name="splitter">
+     <property name="orientation">
       <enum>Qt::Horizontal</enum>
      </property>
-     <property name="childrenCollapsible" >
+     <property name="childrenCollapsible">
       <bool>false</bool>
      </property>
-     <widget class="QTreeView" name="tvPortList" >
-      <property name="sizePolicy" >
-       <sizepolicy vsizetype="Expanding" hsizetype="Expanding" >
+     <widget class="QTreeView" name="tvPortList">
+      <property name="sizePolicy">
+       <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
         <horstretch>1</horstretch>
         <verstretch>0</verstretch>
        </sizepolicy>
       </property>
-      <property name="contextMenuPolicy" >
+      <property name="contextMenuPolicy">
        <enum>Qt::ActionsContextMenu</enum>
       </property>
-      <property name="selectionMode" >
+      <property name="selectionMode">
        <enum>QAbstractItemView::SingleSelection</enum>
       </property>
      </widget>
-     <widget class="QStackedWidget" name="swDetail" >
-      <property name="sizePolicy" >
-       <sizepolicy vsizetype="Preferred" hsizetype="Preferred" >
+     <widget class="QStackedWidget" name="swDetail">
+      <property name="sizePolicy">
+       <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
         <horstretch>2</horstretch>
         <verstretch>0</verstretch>
        </sizepolicy>
       </property>
-      <property name="currentIndex" >
-       <number>0</number>
+      <property name="currentIndex">
+       <number>2</number>
       </property>
-      <widget class="QWidget" name="portDetail" >
-       <layout class="QVBoxLayout" >
-        <property name="leftMargin" >
-         <number>0</number>
-        </property>
-        <property name="topMargin" >
-         <number>0</number>
-        </property>
-        <property name="rightMargin" >
-         <number>0</number>
-        </property>
-        <property name="bottomMargin" >
+      <widget class="QWidget" name="blankPage">
+       <layout class="QVBoxLayout" name="verticalLayout">
+        <item>
+         <widget class="QLabel" name="label">
+          <property name="text">
+           <string>&lt;p&gt;&lt;b&gt;How to use Ostinato&lt;/b&gt;&lt;/p&gt;
+&lt;p&gt;The port list on the left contains all the ports on which you can transmit packets.&lt;/p&gt;
+&lt;p&gt;Ports belong to a port group. Make sure the Port Group has a &lt;img src=&quot;:/icons/bullet_green.png&quot;/&gt; next to it, then double click the port group to show or hide the ports in the port group.&lt;/p&gt;
+&lt;p&gt;To generate packets, you need to create and configure packet streams. A stream is a sequence of one or more same or similar packets.&lt;/p&gt;
+&lt;p&gt;To create a stream, select the port on which you want to send packets.&lt;/p&gt;
+&lt;hr/&gt;
+&lt;p&gt;Don't see the port that you want (or any ports at all) inside the port group? &lt;a href=&quot;http://ostinato.org/docs/faq&quot;&gt;Get Help!&lt;/a&gt;&lt;/p&gt;</string>
+          </property>
+          <property name="alignment">
+           <set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignTop</set>
+          </property>
+          <property name="wordWrap">
+           <bool>true</bool>
+          </property>
+          <property name="openExternalLinks">
+           <bool>true</bool>
+          </property>
+         </widget>
+        </item>
+        <item>
+         <spacer name="verticalSpacer">
+          <property name="orientation">
+           <enum>Qt::Vertical</enum>
+          </property>
+          <property name="sizeHint" stdset="0">
+           <size>
+            <width>20</width>
+            <height>40</height>
+           </size>
+          </property>
+         </spacer>
+        </item>
+       </layout>
+      </widget>
+      <widget class="QWidget" name="portGroupDetail">
+       <layout class="QVBoxLayout" name="verticalLayout_2">
+        <item>
+         <widget class="QLabel" name="label_5">
+          <property name="text">
+           <string>&lt;p&gt;You have selected a port group in the port list on the left.&lt;/p&gt;
+&lt;p&gt;You can transmit packets on any of the ports within the port group.&lt;/p&gt;
+&lt;p&gt;Make sure the port group has a &lt;img src=&quot;:/icons/bullet_green.png&quot;/&gt; next to it and then double click the port group to show or hide the ports in the port group.&lt;/p&gt;
+&lt;p&gt;To generate packets, you need to create and configure packet streams. A stream is a sequence of one or more same or similar packets.&lt;/p&gt;
+&lt;p&gt;To create a stream, select the port on which you want to send packets. &lt;/p&gt;</string>
+          </property>
+          <property name="alignment">
+           <set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignTop</set>
+          </property>
+          <property name="wordWrap">
+           <bool>true</bool>
+          </property>
+         </widget>
+        </item>
+        <item>
+         <spacer name="verticalSpacer_2">
+          <property name="orientation">
+           <enum>Qt::Vertical</enum>
+          </property>
+          <property name="sizeHint" stdset="0">
+           <size>
+            <width>20</width>
+            <height>177</height>
+           </size>
+          </property>
+         </spacer>
+        </item>
+       </layout>
+      </widget>
+      <widget class="QWidget" name="portDetail">
+       <layout class="QVBoxLayout">
+        <property name="margin">
          <number>0</number>
         </property>
         <item>
-         <widget class="QFrame" name="frame" >
-          <property name="frameShape" >
+         <widget class="QFrame" name="frame">
+          <property name="frameShape">
            <enum>QFrame::Panel</enum>
           </property>
-          <property name="frameShadow" >
+          <property name="frameShadow">
            <enum>QFrame::Raised</enum>
           </property>
-          <layout class="QHBoxLayout" >
-           <property name="leftMargin" >
-            <number>3</number>
-           </property>
-           <property name="topMargin" >
-            <number>3</number>
-           </property>
-           <property name="rightMargin" >
-            <number>3</number>
-           </property>
-           <property name="bottomMargin" >
+          <layout class="QHBoxLayout">
+           <property name="margin">
             <number>3</number>
            </property>
            <item>
             <spacer>
-             <property name="orientation" >
+             <property name="orientation">
               <enum>Qt::Horizontal</enum>
              </property>
-             <property name="sizeHint" >
+             <property name="sizeHint" stdset="0">
               <size>
                <width>40</width>
                <height>20</height>
@@ -94,8 +150,15 @@
             </spacer>
            </item>
            <item>
-            <widget class="QPushButton" name="pbApply" >
-             <property name="text" >
+            <widget class="QLabel" name="label_3">
+             <property name="text">
+              <string>Right click in the blank area below to configure streams. Click Apply on the right to activate the changes</string>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <widget class="QPushButton" name="pbApply">
+             <property name="text">
               <string>Apply</string>
              </property>
             </widget>
@@ -104,50 +167,50 @@
          </widget>
         </item>
         <item>
-         <widget class="QTabWidget" name="portConfig" >
-          <property name="currentIndex" >
+         <widget class="QTabWidget" name="portConfig">
+          <property name="currentIndex">
            <number>0</number>
           </property>
-          <widget class="QWidget" name="streamsTab" >
-           <attribute name="title" >
+          <widget class="QWidget" name="streamsTab">
+           <attribute name="title">
             <string>Streams</string>
            </attribute>
-           <layout class="QVBoxLayout" >
+           <layout class="QVBoxLayout">
             <item>
-             <layout class="QHBoxLayout" >
+             <layout class="QHBoxLayout">
               <item>
-               <widget class="QRadioButton" name="radioButton" >
-                <property name="text" >
+               <widget class="QRadioButton" name="radioButton">
+                <property name="text">
                  <string>Avg pps</string>
                 </property>
-                <property name="checked" >
+                <property name="checked">
                  <bool>true</bool>
                 </property>
                </widget>
               </item>
               <item>
-               <widget class="QLineEdit" name="averagePacketsPerSec" />
+               <widget class="QLineEdit" name="averagePacketsPerSec"/>
               </item>
               <item>
-               <widget class="QRadioButton" name="radioButton_2" >
-                <property name="text" >
+               <widget class="QRadioButton" name="radioButton_2">
+                <property name="text">
                  <string>Avg bps</string>
                 </property>
                </widget>
               </item>
               <item>
-               <widget class="QLineEdit" name="averageBitsPerSec" >
-                <property name="enabled" >
+               <widget class="QLineEdit" name="averageBitsPerSec">
+                <property name="enabled">
                  <bool>false</bool>
                 </property>
                </widget>
               </item>
               <item>
                <spacer>
-                <property name="orientation" >
+                <property name="orientation">
                  <enum>Qt::Horizontal</enum>
                 </property>
-                <property name="sizeHint" >
+                <property name="sizeHint" stdset="0">
                  <size>
                   <width>40</width>
                   <height>20</height>
@@ -158,39 +221,39 @@
              </layout>
             </item>
             <item>
-             <widget class="QTableView" name="tvStreamList" >
-              <property name="sizePolicy" >
-               <sizepolicy vsizetype="Expanding" hsizetype="Expanding" >
+             <widget class="QTableView" name="tvStreamList">
+              <property name="sizePolicy">
+               <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
                 <horstretch>0</horstretch>
                 <verstretch>1</verstretch>
                </sizepolicy>
               </property>
-              <property name="contextMenuPolicy" >
+              <property name="contextMenuPolicy">
                <enum>Qt::ActionsContextMenu</enum>
               </property>
-              <property name="frameShape" >
+              <property name="frameShape">
                <enum>QFrame::StyledPanel</enum>
               </property>
-              <property name="lineWidth" >
+              <property name="lineWidth">
                <number>1</number>
               </property>
-              <property name="selectionMode" >
+              <property name="selectionMode">
                <enum>QAbstractItemView::ExtendedSelection</enum>
               </property>
-              <property name="selectionBehavior" >
+              <property name="selectionBehavior">
                <enum>QAbstractItemView::SelectRows</enum>
               </property>
              </widget>
             </item>
            </layout>
           </widget>
-          <widget class="QWidget" name="devicesTab" >
-           <attribute name="title" >
+          <widget class="QWidget" name="devicesTab">
+           <attribute name="title">
             <string>Devices</string>
            </attribute>
-           <layout class="QVBoxLayout" >
+           <layout class="QVBoxLayout">
             <item>
-             <widget class="DevicesWidget" native="1" name="devicesWidget" />
+             <widget class="DevicesWidget" name="devicesWidget" native="true"/>
             </item>
            </layout>
           </widget>
@@ -198,109 +261,102 @@
         </item>
        </layout>
       </widget>
-      <widget class="QWidget" name="portGroupDetail" >
-       <layout class="QHBoxLayout" >
-        <item>
-         <widget class="QLabel" name="label_5" >
-          <property name="text" >
-           <string>Select a port to configure streams</string>
-          </property>
-          <property name="alignment" >
-           <set>Qt::AlignCenter</set>
-          </property>
-         </widget>
-        </item>
-       </layout>
-      </widget>
-      <widget class="QWidget" name="blankPage" />
      </widget>
     </widget>
    </item>
   </layout>
-  <action name="actionNew_Port_Group" >
-   <property name="icon" >
-    <iconset resource="ostinato.qrc" >:/icons/portgroup_add.png</iconset>
+  <action name="actionNew_Port_Group">
+   <property name="icon">
+    <iconset resource="ostinato.qrc">
+     <normaloff>:/icons/portgroup_add.png</normaloff>:/icons/portgroup_add.png</iconset>
    </property>
-   <property name="text" >
+   <property name="text">
     <string>New Port Group</string>
    </property>
   </action>
-  <action name="actionDelete_Port_Group" >
-   <property name="icon" >
-    <iconset resource="ostinato.qrc" >:/icons/portgroup_delete.png</iconset>
+  <action name="actionDelete_Port_Group">
+   <property name="icon">
+    <iconset resource="ostinato.qrc">
+     <normaloff>:/icons/portgroup_delete.png</normaloff>:/icons/portgroup_delete.png</iconset>
    </property>
-   <property name="text" >
+   <property name="text">
     <string>Delete Port Group</string>
    </property>
   </action>
-  <action name="actionConnect_Port_Group" >
-   <property name="icon" >
-    <iconset resource="ostinato.qrc" >:/icons/portgroup_connect.png</iconset>
+  <action name="actionConnect_Port_Group">
+   <property name="icon">
+    <iconset resource="ostinato.qrc">
+     <normaloff>:/icons/portgroup_connect.png</normaloff>:/icons/portgroup_connect.png</iconset>
    </property>
-   <property name="text" >
+   <property name="text">
     <string>Connect Port Group</string>
    </property>
   </action>
-  <action name="actionDisconnect_Port_Group" >
-   <property name="icon" >
-    <iconset resource="ostinato.qrc" >:/icons/portgroup_disconnect.png</iconset>
+  <action name="actionDisconnect_Port_Group">
+   <property name="icon">
+    <iconset resource="ostinato.qrc">
+     <normaloff>:/icons/portgroup_disconnect.png</normaloff>:/icons/portgroup_disconnect.png</iconset>
    </property>
-   <property name="text" >
+   <property name="text">
     <string>Disconnect Port Group</string>
    </property>
   </action>
-  <action name="actionNew_Stream" >
-   <property name="icon" >
-    <iconset resource="ostinato.qrc" >:/icons/stream_add.png</iconset>
+  <action name="actionNew_Stream">
+   <property name="icon">
+    <iconset resource="ostinato.qrc">
+     <normaloff>:/icons/stream_add.png</normaloff>:/icons/stream_add.png</iconset>
    </property>
-   <property name="text" >
+   <property name="text">
     <string>New Stream</string>
    </property>
   </action>
-  <action name="actionDelete_Stream" >
-   <property name="icon" >
-    <iconset resource="ostinato.qrc" >:/icons/stream_delete.png</iconset>
+  <action name="actionDelete_Stream">
+   <property name="icon">
+    <iconset resource="ostinato.qrc">
+     <normaloff>:/icons/stream_delete.png</normaloff>:/icons/stream_delete.png</iconset>
    </property>
-   <property name="text" >
+   <property name="text">
     <string>Delete Stream</string>
    </property>
   </action>
-  <action name="actionEdit_Stream" >
-   <property name="icon" >
-    <iconset resource="ostinato.qrc" >:/icons/stream_edit.png</iconset>
+  <action name="actionEdit_Stream">
+   <property name="icon">
+    <iconset resource="ostinato.qrc">
+     <normaloff>:/icons/stream_edit.png</normaloff>:/icons/stream_edit.png</iconset>
    </property>
-   <property name="text" >
+   <property name="text">
     <string>Edit Stream</string>
    </property>
   </action>
-  <action name="actionExclusive_Control" >
-   <property name="checkable" >
+  <action name="actionExclusive_Control">
+   <property name="checkable">
     <bool>true</bool>
    </property>
-   <property name="text" >
+   <property name="text">
     <string>Exclusive Port Control (EXPERIMENTAL)</string>
    </property>
   </action>
-  <action name="actionOpen_Streams" >
-   <property name="text" >
+  <action name="actionOpen_Streams">
+   <property name="text">
     <string>Open Streams ...</string>
    </property>
   </action>
-  <action name="actionSave_Streams" >
-   <property name="text" >
+  <action name="actionSave_Streams">
+   <property name="text">
     <string>Save Streams ...</string>
    </property>
   </action>
-  <action name="actionPort_Configuration" >
-   <property name="text" >
+  <action name="actionPort_Configuration">
+   <property name="text">
     <string>Port Configuration ...</string>
    </property>
   </action>
-  <action name="actionDuplicate_Stream" >
-   <property name="icon" >
-    <iconset resource="ostinato.qrc" >:/icons/stream_duplicate.png</iconset>
+  <action name="actionDuplicate_Stream">
+   <property name="icon">
+    <iconset resource="ostinato.qrc">
+     <normaloff>:/icons/stream_duplicate.png</normaloff>:/icons/stream_duplicate.png</iconset>
    </property>
-   <property name="text" >
+   <property name="text">
     <string>Duplicate Stream</string>
    </property>
   </action>
@@ -314,7 +370,7 @@
   </customwidget>
  </customwidgets>
  <resources>
-  <include location="ostinato.qrc" />
+  <include location="ostinato.qrc"/>
  </resources>
  <connections>
   <connection>
@@ -323,11 +379,11 @@
    <receiver>averagePacketsPerSec</receiver>
    <slot>setEnabled(bool)</slot>
    <hints>
-    <hint type="sourcelabel" >
+    <hint type="sourcelabel">
      <x>326</x>
      <y>80</y>
     </hint>
-    <hint type="destinationlabel" >
+    <hint type="destinationlabel">
      <x>454</x>
      <y>79</y>
     </hint>
@@ -339,11 +395,11 @@
    <receiver>averageBitsPerSec</receiver>
    <slot>setEnabled(bool)</slot>
    <hints>
-    <hint type="sourcelabel" >
+    <hint type="sourcelabel">
      <x>523</x>
      <y>80</y>
     </hint>
-    <hint type="destinationlabel" >
+    <hint type="destinationlabel">
      <x>651</x>
      <y>88</y>
     </hint>