Difference between revisions of "Adding an Icon to a Flowchart"
| (14 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | To add a new icon to a flowchart, click the mouse down on the icon you require from either 'Command Icons' Ribbon or Command Icons from within 'project Explorer', the cursor will change to a small image of that icon, drag the icon onto the active flowchart window and release the mouse button at the point where you want the icon inserted. | |
| − | [[File: | + | As you move the mouse over a flowchart, a small arrow will appear indicating where the icon would be inserted when the mouse button is released. This is known as the insertion point. |
| + | Once you release the mouse button, the icon appears in the flowchart and the icon's name and details appear to the right of the icon. | ||
| + | |||
| + | [[File:Gen_Adding_an_Icon_to_a_Flowchart.png]] | ||
| + | |||
| + | == Adding Icons to a Flowchart in Flowcode == | ||
| + | Flowcode uses flowchart-based programming to visually represent the logic of embedded systems. Icons represent the basic building blocks of this logic and correspond to various commands, actions, and decisions within a program. | ||
| + | |||
| + | Here's a step-by-step guide on how to add and use icons in a flowchart: | ||
| − | ''' | + | === Selecting an Icon === |
| + | To add a new icon to your flowchart, begin by selecting the appropriate icon from the 'Command Icons' Ribbon or the Command Icons section within the 'Project Explorer'. These icons represent different operations such as inputs, outputs, decisions, loops, delays, and custom macros, among others. | ||
| − | + | === Drag-and-Drop Functionality === | |
| + | Once you've clicked on the icon you require, the cursor will change to display a small image of that icon, indicating it’s ready to be inserted. Drag the icon onto the active flowchart window by holding down the mouse button and move it to the desired location within the flowchart. | ||
| − | + | === Insertion Point === | |
| + | As you move the icon over the flowchart, a small arrow will appear, representing the insertion point. This arrow shows exactly where the icon will be placed when you release the mouse button. The insertion point ensures that icons are positioned correctly in the flowchart sequence, maintaining logical flow and hierarchy. | ||
| + | |||
| + | === Placing the Icon === | ||
| + | When you release the mouse button, the icon will be placed in the flowchart at the selected point. The icon’s name, along with relevant details or parameters, will appear to the right of the icon. These details can include pin assignments, timings, or conditions, depending on the type of icon added. You can click on these details to edit the properties of the icon, customizing it to suit your program's needs. | ||
| + | |||
| + | === Types of Icons === | ||
| + | Flowcode provides a variety of icons, each representing a different type of operation within your program: | ||
| + | |||
| + | * Command Icons: These represent basic actions such as controlling inputs/outputs, sending data, or triggering external events. | ||
| + | * Decision Icons: These icons allow conditional branching within the program. They evaluate a condition and direct the flow based on whether the condition is true or false. | ||
| + | * Loop Icons: Used to repeat a set of instructions multiple times until a specific condition is met. | ||
| + | * Macro Icons: Represent reusable blocks of code or subroutines that can be executed when called. | ||
| + | * Calculation Icons: Perform arithmetic or logical operations on variables within the program. | ||
| + | * Flow Control Icons: Manage the program flow, such as delays, pauses, and exit commands. | ||
| + | |||
| + | === Editing and Reorganizing Icons === | ||
| + | Once an icon is placed in the flowchart, it can be modified to fit the needs of your project. Right-clicking on the icon opens a context menu where you can delete, copy, or move the icon. Additionally, icons can be dragged to a new position within the flowchart or rearranged by clicking and holding the mouse button while moving the icon to a different insertion point. | ||
| + | |||
| + | === Icon Properties Panel === | ||
| + | Every icon has a set of customizable properties that can be accessed by clicking on the icon. These properties are displayed in the Properties Panel, where users can adjust parameters like pin assignments, time delays, or custom variable values. This is an essential feature for tailoring each icon to the specific behaviour required for the program. | ||
| + | |||
| + | === Grouping Icons === | ||
| + | For complex flowcharts, multiple icons can be grouped together using the Icon Grouping feature. This allows users to condense a series of related icons into a single block, simplifying the visual layout and reducing clutter in the flowchart window. | ||
| − | + | By following these steps, users can easily build complex control logic in Flowcode using a simple and intuitive graphical interface, with icons acting as the fundamental building blocks of the program. | |
Latest revision as of 14:26, 8 October 2024
To add a new icon to a flowchart, click the mouse down on the icon you require from either 'Command Icons' Ribbon or Command Icons from within 'project Explorer', the cursor will change to a small image of that icon, drag the icon onto the active flowchart window and release the mouse button at the point where you want the icon inserted. As you move the mouse over a flowchart, a small arrow will appear indicating where the icon would be inserted when the mouse button is released. This is known as the insertion point. Once you release the mouse button, the icon appears in the flowchart and the icon's name and details appear to the right of the icon.
Contents
Adding Icons to a Flowchart in Flowcode
Flowcode uses flowchart-based programming to visually represent the logic of embedded systems. Icons represent the basic building blocks of this logic and correspond to various commands, actions, and decisions within a program.
Here's a step-by-step guide on how to add and use icons in a flowchart:
Selecting an Icon
To add a new icon to your flowchart, begin by selecting the appropriate icon from the 'Command Icons' Ribbon or the Command Icons section within the 'Project Explorer'. These icons represent different operations such as inputs, outputs, decisions, loops, delays, and custom macros, among others.
Drag-and-Drop Functionality
Once you've clicked on the icon you require, the cursor will change to display a small image of that icon, indicating it’s ready to be inserted. Drag the icon onto the active flowchart window by holding down the mouse button and move it to the desired location within the flowchart.
Insertion Point
As you move the icon over the flowchart, a small arrow will appear, representing the insertion point. This arrow shows exactly where the icon will be placed when you release the mouse button. The insertion point ensures that icons are positioned correctly in the flowchart sequence, maintaining logical flow and hierarchy.
Placing the Icon
When you release the mouse button, the icon will be placed in the flowchart at the selected point. The icon’s name, along with relevant details or parameters, will appear to the right of the icon. These details can include pin assignments, timings, or conditions, depending on the type of icon added. You can click on these details to edit the properties of the icon, customizing it to suit your program's needs.
Types of Icons
Flowcode provides a variety of icons, each representing a different type of operation within your program:
- Command Icons: These represent basic actions such as controlling inputs/outputs, sending data, or triggering external events.
- Decision Icons: These icons allow conditional branching within the program. They evaluate a condition and direct the flow based on whether the condition is true or false.
- Loop Icons: Used to repeat a set of instructions multiple times until a specific condition is met.
- Macro Icons: Represent reusable blocks of code or subroutines that can be executed when called.
- Calculation Icons: Perform arithmetic or logical operations on variables within the program.
- Flow Control Icons: Manage the program flow, such as delays, pauses, and exit commands.
Editing and Reorganizing Icons
Once an icon is placed in the flowchart, it can be modified to fit the needs of your project. Right-clicking on the icon opens a context menu where you can delete, copy, or move the icon. Additionally, icons can be dragged to a new position within the flowchart or rearranged by clicking and holding the mouse button while moving the icon to a different insertion point.
Icon Properties Panel
Every icon has a set of customizable properties that can be accessed by clicking on the icon. These properties are displayed in the Properties Panel, where users can adjust parameters like pin assignments, time delays, or custom variable values. This is an essential feature for tailoring each icon to the specific behaviour required for the program.
Grouping Icons
For complex flowcharts, multiple icons can be grouped together using the Icon Grouping feature. This allows users to condense a series of related icons into a single block, simplifying the visual layout and reducing clutter in the flowchart window.
By following these steps, users can easily build complex control logic in Flowcode using a simple and intuitive graphical interface, with icons acting as the fundamental building blocks of the program.
