====== 02 Layout & Design ======

===== Block Diagram =====

  * Background color of block diagram is grey (RGB = 226/226/226; 'Indicator Background') where applicable


===== VI & Control Icons =====

<WRAP left round tip 100%>
You can find tips and tricks around [[kb:labview:icon-editor|LabVIEW's icon editor]] in the [[kb:labview|LabVIEW]] section of the dokuwiki.
</WRAP>

  * **NO DEFAULT ICONS**
    * Do not use VIs or Controls with the LabVIEW default icon
    * {{:kb:bestpractices:codingconventions:default-icon.jpg?100|}}

  * Icons that make sense
    * Manage common icon templates in project repository
    * Have a background layer (-> alignment of text)
    * {{:kb:bestpractices:codingconventions:watchdog.png?600|}}

  * When working inside a library or class, use its icon template
    * Leave the layer NI_Library intact
      * you can edit it for all members in the General Settings of the class/library properties dialog
      * you can import it from the owning library in the Icon Editor
    * When working with accessors in a class (those available as property nodes), changing the VI's documentation or icon is unnecessary as neither show up in code.


==== Connector Pattern ====

  * Stick to the Default Connector Pattern (**4 × 2 × 2 × 4**)

  * For selected helper VIs, it is allowed to deviate from the default connector pattern
    * Example: Logger VIs

{{:kb:bestpractices:codingconventions:low-icons.png?300|}}




==== Icon Layout ====

  * Icons have a coloured rectangle on top
    * The colour is derived from the category of the module, see below
    * 8px banner height
    * 8 or 9pt font size
  * The coloured rectangle can contain text
  * To differentiate modules of the same category, augment the coloured rectangle with...
    * another arbitrarily coloured square on the right side
    * a glyph on the right side (can be higher than the rectangle)

{{:kb:bestpractices:codingconventions:pasted:20231024-134902.png}}

{{:kb:bestpractices:vi-icon-plain.png?direct&200|}} 

{{:kb:bestpractices:vi-icon-col.png?direct&200|}}

{{:kb:bestpractices:vi-icon-glyph.png?direct&200|}}

=== Constant VIs ===

{{:kb:bestpractices:codingconventions:pasted:20221210-234411.png}}

  * For constant VIs, color the bottom right corner of the VI icon in black


==== Icon Colors ====

=== HSE libs and modules ===

{{:kb:bestpractices:vi-icon_hse.png?nolink |}} RGB = 108/0/128

hampelsoft-libraries, and other modules and templates from Hampel Software Engineering

=== Main, State, Sequence ===

{{:kb:bestpractices:vi-icon_state.png?nolink |}} RGB = 109/109/131 ('Slide Housing')

Main program for a programmable hardware, sequencer, state machines

=== UI ===

{{:kb:bestpractices:vi-icon_ui.png?nolink |}} RGB = 100/255/0 ('LED on')

User Interface, Results Display, Visualization, Log & Debug Views

=== Error ===

{{:kb:bestpractices:vi-icon_error.png?nolink&32 |}} RGB = 255/0/0 ('Thermometer Fill')

Error handlers inside modules, shutdown VIs, emergency stop

=== Hardware ===

{{:kb:bestpractices:vi-icon_hardware.png?nolink&32 |}} RGB = 0/65/220 ('Slide Fill')

Generic control of a specific, "non-programmable" hardware like a camera, motor, DC source (NOT: cRIO, FPGA, PLC, ...)

=== Storing/Logging ===

{{:kb:bestpractices:vi-icon_logging.png?nolink |}} RGB = 255/255/204

Writing data to file/database, save images

=== Communication ===

{{:kb:bestpractices:vi-icon_communication.png?nolink |}} RGB = 255/153/255

Other Software, Internet, PLC, Database, RS-232, etc.

=== Data Acq./Processing ===

{{:kb:bestpractices:vi-icon_processing-white.png?nolink |}} RGB = 255/128/0

Data Acquisition, Data processing, feature extraction, feature evaluation, calculations...

=== _Examples and _VI Templates ===

{{:kb:bestpractices:codingconventions:quickstart-vi-template.png?nolink |}} RGB = 251/223/255

For [[code:common:project-structure#examples_directory|_Example VIs]] and [[code:common:project-structure#vi_templates_directory|_VI Templates]].


=== Special Case: Converters ===

If converting from or to specific LabVIEW data types, try and use the corresponding wire color in the icon.

Example: Convert from integer to single: Left side is blue, right side is orange.

{{:kb:bestpractices:codingconventions:convert.png?500|}}


==== Icon Glyphs ====

//Glyphs are stored in LabVIEW's data folder, eg. ''C:\Users\admin\Documents\LabVIEW Data\Glyphs\'' //

=== Broadcast VIs ===

{{:kb:bestpractices:glyph-broadcast.png?nolink|}}

  * Marks VIs that broadcast data into the world
  * [DQMH] Separates Broadcast VIs visually from other request VIs
  * {{:kb:bestpractices:hse-dqmh-broadcast.png?linkonly |Download glyph as .png}}

  * **Obsolete for DQMH since [[https://delacor.com/dqmh-documentation/dqmh-4-2-release-notes/|release 4.2]]!**

---- 

<block 100%:0:#FFF8FF;#800080;1px dotted #800080;Arial, Helvetica, sans-serif/10ptrounded>**[[https://createbettersoftware.com|The HSE Way of Working]]:** \\ 
A set of guidelines that recommend programming style, better practices, and methods for all our LabVIEW projects. We ask all our peers to follow these guidelines to help improve the readability of our shared source code and make software maintenance easier.</block>

|< 100% 50% >|
|[[kb:bestpractices:codingconventions:architecture|<< 01 Architecture]]  |  [[kb:bestpractices:codingconventions:documentation|03 Documentation >>]]|