Adding an Icon to a Flowchart - Revision history

HamedA at 14:26, 8 October 2024

2024-10-08T14:26:58Z

MartinW at 12:57, 30 November 2022

2022-11-30T12:57:21Z

MartinW at 12:55, 30 November 2022

2022-11-30T12:55:50Z

DavidA at 07:53, 2 July 2019

2019-07-02T07:53:46Z

BenR at 16:16, 7 March 2014

2014-03-07T16:16:33Z

BenR at 15:57, 7 March 2014

2014-03-07T15:57:20Z

ReeceL at 15:23, 21 August 2013

2013-08-21T15:23:57Z

ReeceL at 15:22, 21 August 2013

2013-08-21T15:22:53Z

ReeceL at 10:20, 13 August 2013

2013-08-13T10:20:40Z

ReeceL at 11:05, 20 June 2013

2013-06-20T11:05:37Z

← Older revision		Revision as of 14:26, 8 October 2024
Line 3:		Line 3:
	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.		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:

−	~~[[File~~:~~Gen_Adding_an_Icon_to_a_Flowchart~~.~~png]]~~	+	=== 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.

@@ 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. 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.
+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.
 [[File:Gen_Adding_an_Icon_to_a_Flowchart.png]]

← Older revision		Revision as of 12:55, 30 November 2022
Line 1:		Line 1:
−	~~[[File:Gen_Icons_Toolbar_Docked.png\|left\|border]]~~	+	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.
−
−	~~[[Tools and Views#1) Icons Toolbar\| '''Icons toolbar''']]~~
−
−	To add a new icon to a flowchart, click the mouse down on the icon you require, 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.		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.

← Older revision		Revision as of 07:53, 2 July 2019
Line 1:		Line 1:
−	~~<sidebar>Sidebar: Flowcode Help Overview:Flowcharts</sidebar>~~
	[[File:Gen_Icons_Toolbar_Docked.png\|left\|border]]		[[File:Gen_Icons_Toolbar_Docked.png\|left\|border]]

← Older revision		Revision as of 16:16, 7 March 2014
Line 1:		Line 1:
−	<sidebar>Sidebar: Flowcode Help Overview</sidebar>	+	<sidebar>Sidebar: Flowcode Help Overview:Flowcharts</sidebar>
	[[File:Gen_Icons_Toolbar_Docked.png\|left\|border]]		[[File:Gen_Icons_Toolbar_Docked.png\|left\|border]]

← Older revision		Revision as of 15:57, 7 March 2014
Line 1:		Line 1:
−	<sidebar>Sidebar: ~~What Is a~~ Flowcode ~~Flowchart?~~</sidebar>	+	<sidebar>Sidebar: Flowcode Help Overview</sidebar>
	[[File:Gen_Icons_Toolbar_Docked.png\|left\|border]]		[[File:Gen_Icons_Toolbar_Docked.png\|left\|border]]

← Older revision		Revision as of 15:23, 21 August 2013
Line 9:		Line 9:


−	[[File:Gen_Adding_an_Icon_to_a_Flowchart.png~~\|center~~]]	+	[[File:Gen_Adding_an_Icon_to_a_Flowchart.png]]

← Older revision		Revision as of 15:22, 21 August 2013
Line 9:		Line 9:


−	[[File:Gen_Adding_an_Icon_to_a_Flowchart.png]]	+	[[File:Gen_Adding_an_Icon_to_a_Flowchart.png\|center]]

@@ Line 1: / Line 1: @@
 <sidebar>Sidebar: What Is a Flowcode Flowchart?</sidebar>
-[[File:Gen_Icons_Toolbar_Docked.png|left]]
+[[File:Gen_Icons_Toolbar_Docked.png|left|border]]
 [[Tools and Views#1) Icons Toolbar| '''Icons toolbar''']]

@@ Line 2: / Line 2: @@
 [[File:Gen_Icons_Toolbar_Docked.png|left]]
-'''Icon toolbar'''
+[[Tools and Views#1) Icons Toolbar| '''Icons toolbar''']]
 To add a new icon to a flowchart, click the mouse down on the icon you require, 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.