Merge pull request #2326 from Meet-Patel2580/Meet

Updated graphics.rst (Documentation)

Author: vaughnbetz

doc/.DS_Store

@@ -2,7 +2,7 @@
 
 Graphics
 ========
-VPR includes easy-to-use graphics for visualizing both the targetted FPGA architecture, and the circuit VPR has implementation on the architecture.
+VPR includes easy-to-use graphics for visualizing both the targetted FPGA architecture, and the circuit VPR has implemented on the architecture.
 
 .. image:: https://www.verilogtorouting.org/img/des90_routing_util.gif
     :align: center
@@ -35,19 +35,17 @@ When running VPR provide :option:`vpr --disp` ``on`` to enable graphics.
 
 Saving Graphics at Run-time
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-When running VPR provide :option:`vpr --save_graphics` ``on`` to enable graphics.
+When running VPR provide :option:`vpr --save_graphics` ``on`` to save an image of the final placement and the final routing created by vpr to pdf files on disk. The files are named vpr_placement.pdf and vpr_routing.pdf.
 
 A graphical window will now pop up when you run VPR.
 
 Navigation
 ----------
-Click on **Zoom-Fit** buttons to zoom the view.
-Click and drag with the left mouse button to pan the view, or scroll the mouse wheel to zoom in and out.
-Click on the **Window**, then on the diagonally opposite corners of a box, to zoom in on a particular area.
-
-Click on **Save** to save the image on screen to PDF, PNG, or SVG file.
-
-**Proceed** tells VPR to continue with the next step in placing and routing the circuit.
+* Click on the **Zoom-Fit** button to get an over-encompassing view of the FPGA architecture.
+* Click and drag with the left mouse button to pan the view, or scroll the mouse wheel to zoom in and out.
+* Click on the **Window** button, then on the diagonally opposite corners of a box, to zoom in on a particular area.
+* Click on **Save** under the **Misc.** tab to save the image on screen to PDF, PNG, or SVG file.
+* **Done** tells VPR to continue with the next step in placing and routing the circuit.
 
 
 .. note:: Menu buttons will be greyed out when they are not selectable (e.g. VPR is working).
@@ -56,16 +54,28 @@ Visualizing Placement
 --------------------------------
 By default VPR's graphics displays the FPGA floorplan (block grid) and current placement.
 
+.. figure:: ../Images/Overall_view.png
+    :align: center 
+    :height: 300
+
+    FPGA floorplan (block grid)    
+
+If the **Placement Macros** drop down is set, any placement macros (e.g. carry chains, which require specific relative placements between some blocks) will be highlighted.
+
 .. figure:: https://www.verilogtorouting.org/img/neuron_placement_macros.gif
     :align: center
 
     Placement with macros (carry chains) highlighted
 
-If the **Placement Macros** drop down is set, any placement macros (e.g. carry chains, which require specific relative placements between some blocks) will be highlighted.
-
 Visualizing Netlist Connectivity
 --------------------------------
-The **Toggle Nets** drop-down list toggles the nets in the circuit visible/invisible.
+The **Toggle Nets** drop-down list under the **Net Settings** tab toggles the nets in the circuit to be visible/invisible. Options include **Cluster Nets** and **Primitive Nets**.
+
+.. figure:: ../Images/Net_Settings.png
+    :align: center 
+    :height: 200
+
+    Toggle Nets drop-down under Net Settings tab
 
 When a placement is being displayed, routing information is not yet known so nets are simply drawn as a “star;” that is, a straight line is drawn from the net source to each of its sinks.
 Click on any clb in the display, and it will be highlighted in green, while its fanin and fanout are highlighted in blue and red, respectively.
@@ -81,9 +91,17 @@ Multiple nets can be highlighted by pressing ctrl + mouse click.
 
 Visualizing the Critical Path
 -----------------------------
-During placement and routing you can click on the **Crit. Path** drop-down menu to visualize the critical path.
+During placement and routing you can click on the **Crit. Path** drop-down menu under the **Misc.** tab to visualize the critical path.
 Each stage between primitive pins is shown in a different colour.
-Cliking the **Crit. Path** button again will toggle through the various visualizations:
+
+.. figure:: ../Images/crit_path.png
+    :align: center 
+    :height: 200
+
+    Crit. Path drop-down list under the Misc. tab
+
+The **Crit. Path** drop-down will toggle through the various visualizations:
+
 * During placement the critical path is shown only as flylines.
 * During routing the critical path can be shown as both flylines and routed net connections.
 
@@ -94,7 +112,16 @@ Cliking the **Crit. Path** button again will toggle through the various visualiz
 
 Visualizing Routing Architecture
 --------------------------------
-When a routing is on-screen, clicking on **Toggle RR** lets you to choose between various views of the routing resources available in the FPGA.
+
+When a routing is on screen, the **Routing Options** tab provides various options to gain more visual information.
+
+.. figure:: ../Images/Routing_Options.png
+    :align: center 
+    :height: 300
+
+    Routing Options
+
+Clicking on **Toggle RR** lets you to choose between various views of the routing resources available in the FPGA.
 
 .. figure:: https://github.com/verilog-to-routing/verilog-to-routing.github.io/raw/master/img/routing_arch.gif
     :align: center
@@ -116,7 +143,7 @@ Multiple routing resources can be highlighted by pressing ctrl + mouse click.
 
 Visualizing Routing Congestion
 ------------------------------
-When a routing is shown on-screen, clicking on the **Congestion** drop-down menu will show a heat map of any overused routing resources (wires or pins).
+When a routing is shown on-screen, clicking on the **Congestion** drop-down menu under the **Routing Options** tab will show a heat map of any overused routing resources (wires or pins).
 Lighter colours (e.g. yellow) correspond to highly overused resources, while darker colours (e.g. blue) correspond to lower overuse.
 The overuse range shown at the bottom of the window.
 
@@ -137,7 +164,15 @@ Lighter colours (e.g. yellow) correspond to highly utilized channels, while dark
 
 Toggle Block Internal
 -------------------------------
-During placement and routing you can adjust the level of block detail you visualize by using the **Toggle Block Internal**. Each block can contain a number of flip flops (ff), look up tables (lut), and other primitives. The higher the number, the deeper into the hierarchy within the cluster level block you see. 
+During placement and routing you can adjust the level of block detail you visualize by using the **Toggle Block Internal** option under the **Block Settings** tab. 
+
+.. figure:: ../Images/Block_Settings.png
+    :align: center 
+    :height: 300
+
+    Block Settings 
+
+Each block can contain a number of flip flops (ff), look up tables (lut), and other primitives. The higher the number, the deeper into the hierarchy within the cluster level block you see. 
 
 .. figure:: https://www.verilogtorouting.org/img/ToggleBlockInternal.gif
     :align: center
@@ -223,10 +258,13 @@ Manual Moves
 
 The manual moves feature allows the user to specify the next move in placement. If the move is legal, blocks are swapped and the new move is shown on the architecture. 
 
-.. figure:: https://www.verilogtorouting.org/img/manual_move_toggle_button.png
-   :align: center
+.. figure:: ../Images/manual_move.png
+    :align: center
+    :height: 200
+
+    Misc. Tab
 
-To enable the feature, activate the Manual Move toggle button and press Proceed. Alternatively, the user can active the Manual Move toggle button and click on the block to be moved.
+To enable the feature, activate the **Manual Move** toggle button under the **Misc.** tab and press Done. Alternatively, the user can activate the **Manual Move** toggle button and click on the block to be moved.
 
 .. figure:: https://www.verilogtorouting.org/img/draw_manual_moves_window.png
    :align: center

doc/src/.DS_Store

@@ -316,8 +316,8 @@
             <property name="active_id">0</property>
             <items>
               <item id="0" translatable="yes">None</item>
-              <item id="1" translatable="yes">Nets</item>
-              <item id="2" translatable="yes">Logical Connections</item>
+              <item id="1" translatable="yes">Cluster Nets</item>
+              <item id="2" translatable="yes">Primitive Nets</item>
             </items>
           </object>
           <packing>
@@ -330,7 +330,7 @@
           <object class="GtkLabel" id="netAlphaLabel">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="label" translatable="yes">Set Net Transparency</property>
+            <property name="label" translatable="yes">Net Transparency (0 - 255)</property>
           </object>
           <packing>
             <property name="expand">False</property>

doc/src/Images/.DS_Store

@@ -219,21 +219,21 @@ static void draw_main_canvas(ezgl::renderer* g) {
 
     if (draw_state->pic_on_screen == PLACEMENT) {
         switch (draw_state->show_nets) {
-            case DRAW_NETS:
+            case DRAW_CLUSTER_NETS:
                 drawnets(g);
                 break;
-            case DRAW_LOGICAL_CONNECTIONS:
+            case DRAW_PRIMITIVE_NETS:
                 break;
             default:
                 break;
         }
     } else { /* ROUTING on screen */
 
         switch (draw_state->show_nets) {
-            case DRAW_NETS:
+            case DRAW_CLUSTER_NETS:
                 drawroute(ALL_NETS, g);
                 break;
-            case DRAW_LOGICAL_CONNECTIONS:
+            case DRAW_PRIMITIVE_NETS:
                 // fall through
             default:
                 draw_rr(g);

doc/src/Images/Block_Settings.png

@@ -80,10 +80,10 @@ void toggle_nets_cbk(GtkComboBox* self, ezgl::application* app) {
     // assign corresponding enum value to draw_state->show_nets
     if (strcmp(setting, "None") == 0)
         new_state = DRAW_NO_NETS;
-    else if (strcmp(setting, "Nets") == 0) {
-        new_state = DRAW_NETS;
-    } else { // "Logical Connections"
-        new_state = DRAW_LOGICAL_CONNECTIONS;
+    else if (strcmp(setting, "Cluster Nets") == 0) {
+        new_state = DRAW_CLUSTER_NETS;
+    } else { // Primitive Nets - Used to be called "Logical Connections"
+        new_state = DRAW_PRIMITIVE_NETS;
     }
     draw_state->reset_nets_congestion_and_rr();
     draw_state->show_nets = new_state;

doc/src/Images/Net_Settings.png

@@ -45,8 +45,8 @@ enum e_draw_crit_path {
 
 enum e_draw_nets {
     DRAW_NO_NETS = 0,
-    DRAW_NETS,
-    DRAW_LOGICAL_CONNECTIONS
+    DRAW_CLUSTER_NETS,
+    DRAW_PRIMITIVE_NETS
 };
 
 /* Draw rr_graph from less detailed to more detailed

doc/src/Images/Overall_view.png

@@ -576,7 +576,7 @@ void draw_logical_connections(ezgl::renderer* g) {
                 g->set_color(DRIVES_IT_COLOR, DRIVES_IT_COLOR.alpha * NET_ALPHA);
             } else if (src_is_src_of_selected && sel_subblk_info.is_in_selected_subtree(sink_pb_gnode, sink_clb)) {
                 g->set_color(DRIVEN_BY_IT_COLOR, DRIVEN_BY_IT_COLOR.alpha * NET_ALPHA);
-            } else if (draw_state->show_nets == DRAW_LOGICAL_CONNECTIONS && (draw_state->showing_sub_blocks() || src_clb != sink_clb)) {
+            } else if (draw_state->show_nets == DRAW_PRIMITIVE_NETS && (draw_state->showing_sub_blocks() || src_clb != sink_clb)) {
                 g->set_color(ezgl::BLACK, ezgl::BLACK.alpha * NET_ALPHA); // if showing all, draw the other ones in black
             } else {
                 continue; // not showing all, and not the sperified block, so skip