Difference between revisions of "Ribbon Toolbar"

From Flowcode Help
Jump to navigationJump to search
 
(34 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
==Introduction==
 
==Introduction==
  
The Flowcode environment consists of a main work area in which the flowchart windows are displayed, several toolbars that allow icon and components to be added to the flowchart application, windows that allow the status of the microcontroller and attached components to be viewed and windows that display variables and macro calls when the flow chart is being simulated.
+
The Flowcode environment consists of a main work area in which the flowchart windows are displayed, several ribbon that allow icon and components to be added to the flowchart application, windows that allow the status of the microcontroller and attached components to be viewed and windows that display variables and macro calls when the flow chart is being simulated.
  
  
From the View menu you are able to customise Flowcode to hide and display panel windows such as the [[Dashboard Panel]], [[System Panel]], [[Properties Panel]], [[Component Debugger]] and much more, you can also show / hide the Toolbars referenced as Toolboxes, e.g. the 'Main Toolbar', 'Components Toolbar' or rather Toolbox, as well as the 'Icons Toolbar' otherwise known as the 'Command Toolbox'
+
From the View menu you are able to customise Flowcode to hide and display panel windows such as the [[Dashboard Panel]], [[System Panel]], [[Properties Panel]], [[Component Debugger]] and much more, you can also show / hide the Ribbon referenced as Toolboxes, e.g. the 'Main Toolbar', 'Components Toolbar' or rather Toolbox, as well as the 'Icons Toolbar' otherwise known as the 'Command Toolbox'
  
==Video instructions==
 
 
See the [http://www.youtube.com/watch?v=FXa7LJsRvAs&list=PLQDWBb7bxuCgg6aJgPJcfXBMzZdLILceQ Accessing and Arranging Flowcode Panels] video to learn how to organize the application to your preference and manage your work space effectively for optimal productivity and ease of access.
 
 
 
Watch the [http://www.youtube.com/watch?v=9c6FIZTfGmA&list=PLQDWBb7bxuCgg6aJgPJcfXBMzZdLILceQ Toolbars and Buttons] video to learn how to use each toolbar effectively as well as learning specific details and functions of each toolbar button.
 
 
 
Finally, view the [http://www.youtube.com/watch?v=c0d47BSkKS4&list=PLQDWBb7bxuCgg6aJgPJcfXBMzZdLILceQ Tabbed Flowcharts and Macros] video to see how to control the interface when managing macros, from tabbed flowcharts and macros to viewing two macro flowcharts on one screen.
 
 
{| style="margin:auto; text-align:center;"
 
|-
 
|{{#ev:youtube|FXa7LJsRvAs}}
 
| width="100px" |
 
|{{#ev:youtube|9c6FIZTfGmA}}
 
|-
 
| colspan="3" |<br />
 
|-
 
| colspan="3" |{{#ev:youtube|c0d47BSkKS4}}
 
|}
 
  
 
==File Menu==
 
==File Menu==
  
The file menu allows you to start a new project, open an existing project and save a project.  
+
The file menu allows you to start a new project, open an existing project, save a project, and change global settings.  
  
You can also import a 3D model onto the 3D panel and export the project as a component or App Deleoper application.
+
You can also import a 3D model onto the 3D panel and export the project as a component or [[App_Developer]] application.
  
==Edit Toolbar==
+
==Edit Ribbon==
  
The edit toolbar provides some common items to simplify program editing such as copy, paste and icon grouping.
+
The edit ribbon provides some common items to simplify program editing such as copy, paste and icon grouping.
  
 
[[File:ToolbarEditIcons.jpg]]
 
[[File:ToolbarEditIcons.jpg]]
  
*[[Undo_and_Redo|Undo]]
+
 
*[[Undo_and_Redo|Redo]]
+
*[[Undo_and_Redo|Undo]] - Moves back a step in the [[Change_History]].
*[[Flowchart_Editing_Functions|Cut]]
+
*[[Undo_and_Redo|Redo]] - Moves forward a step in the [[Change_History]].
*[[Flowchart_Editing_Functions|Copy]]
+
*[[Flowchart_Editing_Functions|Cut]] - Cuts the selected flowchart / state machine / component to the clipboard.
*[[Flowchart_Editing_Functions|Paste]]
+
*[[Flowchart_Editing_Functions|Copy]] - Copies the selected flowchart / state machine / component to the clipboard.
*[[Flowchart_Editing_Functions|Delete]]
+
*[[Flowchart_Editing_Functions|Paste]] - Pastes the contents of the clipboard into the code view / panel.
*[[Bookmarks|Bookmark]]
+
*[[Flowchart_Editing_Functions|Delete]] - Deletes the selected flowchart / state machine / component from the project.
*[[Icon_Annotations|Annotation]]
+
*[[Bookmarks|Bookmark]] - Bookmarks a flowchart / state machine icon.
*[[Icon_Grouping|Group]]
+
*[[Icon_Annotations|Annotation]] - Controls the annotation style allowing you to make all annotations visible or invisible.
*[[Icon_Grouping|Ungroup]]
+
*[[Icon_Grouping|Group]] - Groups the selected flowchart icons together into a single group icon.
*Customise C Code
+
*[[Icon_Grouping|Ungroup]] - Ungroups a group icon back into individual flowchart icons.
*Toggle Disable
+
*Customise C Code - Allows the generated C code for an icon to be overridden.
*[[Icon_Properties|Properties]]
+
*[[Disabling_Icons|Toggle Disable]] - Allows an icon or selection of icons to be disabled or re-enabled.
*[[Editing_Key_Mappings|Key Mappings]]
+
*[[Icon_Properties|Properties]] - Goes into the icon properties for the selected icon.
 +
*[[Editing_Key_Mappings|Key Mappings]] - Edits the simulation keyboard mappings.
  
  
==View Toolbar==
+
==View Ribbon==
  
The following elements can be switched on and off using the view toolbar section of the main ribbon.
+
The following elements can be switched on and off using the view ribbon section of the main ribbon.
  
 
[[File:ViewMenu.jpg]]
 
[[File:ViewMenu.jpg]]
  
  
*[[Using the Project Explorer|Project Explorer]] - The project explorer allows you to easily manipulate the key constituents of your project. Left clicking on the arrow or right clicking on the various objects in the explorer will bring up a menu relevant to that object. The 'Macro' and 'Components' icons can be dragged into the main window to be placed as icons.
+
*[[Using the Project Explorer|Project Explorer]] - The project explorer provides a central place to monitor and manipulate the key constituents of your project.  
*[[Dashboard Panel|2D: Dashboard Panel]] - The Dashboard Panel provides a 2D window on which to load Flowcode components. It can be used for any component but is suited towards none 3D components such as buttons, switches, displays.  
+
*[[2d_Panels|2D Panels]] - The 2D Panels provides one or more  2D panel on which to load Flowcode components.
*[[System Panel|3D System Panel]] - The System Panel provides a 3D (real-world) framework on which to load Flowcode components to provide a 3D simulation. It can be used for most components however will not work with the new 2D only GUI simulation components.
+
*[[System Panel|3D System Panel]] - The System Panel provides a 3D (real-world) framework on which to load Flowcode components.
*[[Properties_Panel|Component Properties]] - The component properties window allows you to view and edit settings specific to the current selected component. The top of the window features a drop down list which lists all of the panel components included in the project.
+
*[[Properties_Panel|Component Properties]] - The component properties window allows you to view and edit settings specific to the current selected component.
 
*[[Find_and_Replace]] - The find and replace window allows you to search the current macro or project for a keyword and provides means to replace the keyword and filter by icon type.
 
*[[Find_and_Replace]] - The find and replace window allows you to search the current macro or project for a keyword and provides means to replace the keyword and filter by icon type.
*[[Change History|Change History]] - A text based history of recent changes in the program allowing you to jump forwards and backward through the change history.
+
*[[Change History|Change History]] - A text-based history of recent changes in the program allowing you to jump forwards and backward through the change history.
 
*[[Using_the_Data_Recorder|Data Recorder]] - A means to see waveform history during simulation or using [[Ghost_Technology|Ghost]] enabled hardware.
 
*[[Using_the_Data_Recorder|Data Recorder]] - A means to see waveform history during simulation or using [[Ghost_Technology|Ghost]] enabled hardware.
 
*[[Oscilloscope]] - A means to see repeating waveforms as you would on a standard oscilloscope during simulation or using [[Ghost_Technology|Ghost]] enabled hardware.
 
*[[Oscilloscope]] - A means to see repeating waveforms as you would on a standard oscilloscope during simulation or using [[Ghost_Technology|Ghost]] enabled hardware.
*[[Using_the_Data_Console|Consoles]] - Used for textual based logs or debugging, various components may create a tab on the console to allow you to easily see data flow or other debugging data.
+
*[[Using_the_Data_Console|Consoles]] - Used for textual based logs, debugging and memory viewing.
*[[Component_Debugger]] - Used to provide addition advanced debugging when creating components, allows you to look inside the component object tree as well as monitor Flowcode execution events and debug messages.
+
*[[Component_Debugger]] - Used to provide addition advanced debugging when creating components.
 
*[[Analog_Window|Analog Window]] - The analogue inputs window monitors the various analogue input pins on the selected target microcontroller device.
 
*[[Analog_Window|Analog Window]] - The analogue inputs window monitors the various analogue input pins on the selected target microcontroller device.
 
*[[Digital_Pins|Digital Pins]] - The digital pins window monitors the various digital input / output pins on the selected target microcontroller device.
 
*[[Digital_Pins|Digital Pins]] - The digital pins window monitors the various digital input / output pins on the selected target microcontroller device.
*[[Simulation Debugger|Watch Window]] - This window appears when simulating a flowchart, it shows the current macro being simulated as well as the values of any variables selected, the values of the variables are updated for every command simulated but does not update when running the simulation 'As fast as possible'.When simulating a flowchart, the values of any variables used can be seen in this view. The values of the variables are updated for every command simulated but the view is not updated when the simulation is running at full speed.
+
*[[Simulation Debugger|Watch Window]] - This window appears when simulating a flowchart to allow you to see the values or variables and the current macro.
*Wiki
+
*[[Main_Page|Wiki]] - Provides access to the Main Page of Flowcode help wiki.
*Licensing
+
*Licensing - Dispalys your Flowcode license details and enabled chipacks.
*Forums
+
*[https://flowcode.co.uk/forums/index.php Forums] - Provides access to the Flowcode user forums to ask questions as well as share code and projects.
*[[Chip View|Target Device]] - The pins of the selected target microcontroller is displayed in this window. When the flowchart is being simulated, the state of the microcontroller I/O ports are shown on the microcontroller as red and grey for high and low outputs respectively.
+
*[[Chip View|Target Device]] - Provides a view of the selected target microcontroller pins.
*[[Using the Icon Lists Pane|Icon Lists]] - This window shows a list of the icons that: have been bookmarked; are set as breakpoints; are search results or have shown to cause an error after compilation. Left clicking on the arrow or right clicking on the various objects in the icon list will bring up a menu relevant to that object.
+
*[[Using the Icon Lists Pane|Icon Lists]] - This window shows a lists of various icons in the project.
*[[Zooming the View|Zoom]] - The currently selected Zoom level is displayed on the right side of the Status Bar. You can change the 'Zoom' using keyboard shortcuts such as '''F2''' to 'Decrease' the zoom, '''F3''' to 'Increase' the zoom and '''F4''' to set the zoom at '75%' you can also select the options in the 'Zoom' sub-menu in the 'View' menu (View > Zoom > ), this menu also displays the 'Current zoom' level and allows you to change the zoom to 25%, 50%, 75% or 100% as well as the ability to 'Zoom to Fit' and 'Zoom to Fit Width'.
+
*[[Zooming the View|Zoom]] - Controls the zoom level of the current flowchart or state diagram window.
*[[Global_Options|Global Settings]] - A window for various application settings such as icon draw style, component include directories and network settings.
+
*[[Global_Settings|Global Settings]] - A window for various application settings such as icon draw style, component include directories and network settings.
 
*Status Bar - A bar at the bottom of the application showing useful information.
 
*Status Bar - A bar at the bottom of the application showing useful information.
  
 +
==Icons Ribbon==
 +
 +
Drag and drop [[Icon_Properties|Flowchart]] and [[State_diagrams|State Diagram]] icons from the Command Icons ribbon onto the main flowchart window to create your flowchart application.
  
==Icons Toolbar==
+
The Icons tab of the [[Using_the_Project_Explorer|Project explorer]] window also contains [[Icon_Properties|Flowchart]] and [[State_diagrams|State Diagram]] icons.
Drag and drop Flowchart and State Diagram icons from the Command Icons toolbar onto the main flowchart window to create your flowchart application.
 
  
The Icons tab of the Project explorer window also contains Flowchart and State Diagram icons.
 
  
Embedded toolbar
+
Embedded ribbon
  
 
[[File:ToolbarFlowchartIcons.jpg]]
 
[[File:ToolbarFlowchartIcons.jpg]]
  
  
App Creator toolbar
+
App Creator ribbon
  
 
[[File:ToolbarFlowchartIconAC.jpg]]
 
[[File:ToolbarFlowchartIconAC.jpg]]
  
==Components Toolbar==
+
 
This toolbar displays the component libraries that can be included in your program. Click on a [[Component|component]] and it can be added onto either the [[Dashboard Panel]] or the [[System Panel]] and will be automatically connected to the microcontroller in the Chip view.  
+
State Diagrams ribbon
 +
 
 +
[[File:ToolbarStateIcons.jpg]]
 +
 
 +
 
 +
==Components Ribbon==
 +
 
 +
This ribbon displays the component libraries that can be included in your program. Click on a [[Component|component]] and it can be added onto either the [[Dashboard Panel]] or the [[System Panel]].  
  
 
The properties of the component such as Pin connections, Configuration Parameters and other settings can be edited using the Properties window.
 
The properties of the component such as Pin connections, Configuration Parameters and other settings can be edited using the Properties window.
 +
 +
 +
Embedded Toolbar
  
 
[[File:ToolbarComponentIcons.jpg]]
 
[[File:ToolbarComponentIcons.jpg]]
  
  
 +
App Creator Toolbar
 +
 +
[[File:ToolbarComponentIconsAC.jpg]]
 +
 +
 +
A full list of the [[Components|Flowcode Components]] can be found here along with detailed information and examples.
 +
 +
 +
==User Macros Ribbon==
  
 +
The user macros ribbon allows access to create new macros and to browse through existing macros in the project.
  
 +
[[File:ToolbarUserMacros.jpg]]
  
  
 +
*[[Creating_a_New_Macro|New Macro]] - Brings up the add macro dialogue box to create a new software subroutine.
 +
*Edit Macro Details - Allows the details of a macro to be edited such as the name, parameters or returns.
 +
*Duplicate Macro - Allows the parameters, returns and code in a macro to be copied into a new macro to speed up development time when creating similar macros.
 +
*[[Exporting_a_Macro|Export Macro]] - Allows a macro to be exported to a file for use in another project.
 +
*[[Importing_a_Macro|Import Macro]] - Allows an exported macro file to be imported into the current project.
 +
*Delete Macro - Removes a macro from your program.
 +
*[[Code_Paradigms|Flowchart]] - Displays the selected macro as a Flowchart.
 +
*[[Code_Paradigms|Blocks]] - Displays the selected macro as code blocks.
 +
*[[Code_Paradigms|C Code]] - Displays the selected macro as C Code.
 +
*[[Code_Paradigms|PseudoCode]] - Displays the selected macro as Pseudocode.
 +
*[[State_diagrams|State Diagram]] - Displays the selected macro as a State Diagram.
  
  
==Debug Toolbar==
+
==Debug Ribbon==
  
 +
[[File:ToolbarDebug.jpg]]
  
  
Use this command to display and hide the Toolbar, which includes buttons for some of the most common commands in Flowcode, such as 'Open' (File > Open), 'Print' (File > Print) as well as Compiling the flowchart to Chip, HEX and C. You can even control simulation by running, pausing and stopping simulation using this toolbar as stepping into and over icons to simulate step by step.
+
*[[Ghost_Technology|Enable ICD]] - Enables ICD mode when ICD enabled hardware is connected.
 +
*[[Ghost_Technology|Ghost Options]] - Sets the ICD and other Ghost hardware settings.
 +
*Go - Starts the Flowcode simulation engine.
 +
*Pause - Pauses the Flowcode simulation engine.
 +
*Stop - Stops the Flowcode simulation engine.
 +
*Step Into - Steps to the next icon, jumping into a macro call.
 +
*Step Over - Steps to the next icon, jumping over a macro call.
 +
*Step Out - Steps through icons until we are out of the current macro.
 +
*[[C_Code_Simulation|Simulate C Code]] - Toggles if we will try and simulate any C Code in the project.
 +
*[[Breakpoints|Toggle Breakpoint]] - Allows a program icon to be tagged to automatically pause the simulation execution when hit.
 +
*[[Breakpoints|Clear All Breakpoints]] - Switches off all breakpoints.
 +
*[[CodeProfiling|Show Code Profiling]] - Allows code profiling to be switched on or off.
 +
*[[CodeProfiling|Reset Code Profiling]] - Resets the code profiling counters.
 +
**[[CodeProfiling|Show Unexecuted]] - Toggles if unexecuted icons are highlighted with a cross.
 +
**[[CodeProfiling|Show Value]] - Toggles if the percentage number of hits is displayed for each icon.
  
[[File:Gen_Main_Toolbar_Labelled.png|center]]
 
  
===11) Status Bar===
+
==Build Ribbon==
  
Use this command to display and hide the Status Bar displayed at the bottom of the Flowcode window, which describes the action to be executed by the selected menu item or depressed toolbar button, and keyboard latch state. A check mark appears next to the menu item when the Status Bar is displayed.
+
[[File:ToolbarBuild.jpg]]
  
  
 +
*[[Project_Options|Project Options]] - Contains settings related to the current Flowcode project.
 +
*[[Managing_Compiler_Options|Compiler Options]] - Contains settings related to the Flowcode [[Compiler_Toolchains|toolchain]] locations and [[Supporting_Third_Party_Programming_Tools|programmers]].
 +
*Compile To C - Compile the project into C code.
 +
*Compile To Hex - Compile the project into C code and then pass this to the compiler to generate a binary file.
 +
*Compile To Target - Compiles a binary file and attempts to send this to the target microcontroller.
 +
*View C Code - View the current project C code file.
 +
*[[Compiler Output|Compiler Messages]] - View the messages produced by the compiler during the last compilation operation.
  
  
 +
==Window Ribbon==
  
 +
[[File:ToolbarWindow.jpg]]
  
  
===4) Flowchart Window===
+
*Split Horizontal - Allows two code view windows to be placed on top of each other with a horizontal divider.
 +
*Split Vertical - Allows two code view windows to be placed next to each other with a vertical divider.
 +
*[[Window_Layouts|Manage Layouts]] - Allows custom window layouts to be defined.
 +
*[[Window_Layouts|Default]] - Restores the default window layout.
 +
*[[Window_Layouts|User Defined Layouts]] - Load one of the custom window layouts.
  
The icons that make up the flowchart are displayed in this window. In addition, the icons that make up a macro are shown in their own separate window. The Main flowchart window is always visible and the macro windows can be shown and hidden as needed.
 
  
[[File:Gen_System_Panel.png|thumb|left|System Panel]]
+
==Help Ribbon==
  
 +
[[File:ToolbarHelp.jpg]]
  
  
 +
*Licensing - Options relating to your Flowcode license.
 +
**View - Allows you to see the current chip and feature packs attached to your license.
 +
**Manage - Allows you to enter your licensing information or select the free version (if Flowcode licence has never been entered after new install.
 +
*[[Dynamic_Updates|Library Updates]] - Checks for the latest Component, CAL and Target Definition updates.
 +
*[https://flowcode.co.uk/ Visit Website] - Takes you to the Main Page of the Flowcode website.
 +
*[[Main_Page|Wiki]] - Takes you to the Flowcode help wiki site Main Page.
 +
*[https://flowcode.co.uk/forums/index.php Forums] - Takes you to the Flowcode user forums.
  
[[Compiler Output|Compiler Messages]]
+
==Video instructions==
 +
 
 +
See the [http://www.youtube.com/watch?v=FXa7LJsRvAs&list=PLQDWBb7bxuCgg6aJgPJcfXBMzZdLILceQ Accessing and Arranging Flowcode Panels] video to learn how to organize the application to your preference and manage your work space effectively for optimal productivity and ease of access.
 +
 
 +
 
 +
Watch the [http://www.youtube.com/watch?v=9c6FIZTfGmA&list=PLQDWBb7bxuCgg6aJgPJcfXBMzZdLILceQ Ribbon and Buttons] video to learn how to use each ribbon effectively as well as learning specific details and functions of each ribbon button.
 +
 
 +
 
 +
Finally, view the [http://www.youtube.com/watch?v=c0d47BSkKS4&list=PLQDWBb7bxuCgg6aJgPJcfXBMzZdLILceQ Tabbed Flowcharts and Macros] video to see how to control the interface when managing macros, from tabbed flowcharts and macros to viewing two macro flowcharts on one screen.

Latest revision as of 09:24, 25 August 2023

Introduction

The Flowcode environment consists of a main work area in which the flowchart windows are displayed, several ribbon that allow icon and components to be added to the flowchart application, windows that allow the status of the microcontroller and attached components to be viewed and windows that display variables and macro calls when the flow chart is being simulated.


From the View menu you are able to customise Flowcode to hide and display panel windows such as the Dashboard Panel, System Panel, Properties Panel, Component Debugger and much more, you can also show / hide the Ribbon referenced as Toolboxes, e.g. the 'Main Toolbar', 'Components Toolbar' or rather Toolbox, as well as the 'Icons Toolbar' otherwise known as the 'Command Toolbox'


File Menu

The file menu allows you to start a new project, open an existing project, save a project, and change global settings.

You can also import a 3D model onto the 3D panel and export the project as a component or App_Developer application.

Edit Ribbon

The edit ribbon provides some common items to simplify program editing such as copy, paste and icon grouping.

ToolbarEditIcons.jpg


  • Undo - Moves back a step in the Change_History.
  • Redo - Moves forward a step in the Change_History.
  • Cut - Cuts the selected flowchart / state machine / component to the clipboard.
  • Copy - Copies the selected flowchart / state machine / component to the clipboard.
  • Paste - Pastes the contents of the clipboard into the code view / panel.
  • Delete - Deletes the selected flowchart / state machine / component from the project.
  • Bookmark - Bookmarks a flowchart / state machine icon.
  • Annotation - Controls the annotation style allowing you to make all annotations visible or invisible.
  • Group - Groups the selected flowchart icons together into a single group icon.
  • Ungroup - Ungroups a group icon back into individual flowchart icons.
  • Customise C Code - Allows the generated C code for an icon to be overridden.
  • Toggle Disable - Allows an icon or selection of icons to be disabled or re-enabled.
  • Properties - Goes into the icon properties for the selected icon.
  • Key Mappings - Edits the simulation keyboard mappings.


View Ribbon

The following elements can be switched on and off using the view ribbon section of the main ribbon.

ViewMenu.jpg


  • Project Explorer - The project explorer provides a central place to monitor and manipulate the key constituents of your project.
  • 2D Panels - The 2D Panels provides one or more 2D panel on which to load Flowcode components.
  • 3D System Panel - The System Panel provides a 3D (real-world) framework on which to load Flowcode components.
  • Component Properties - The component properties window allows you to view and edit settings specific to the current selected component.
  • Find_and_Replace - The find and replace window allows you to search the current macro or project for a keyword and provides means to replace the keyword and filter by icon type.
  • Change History - A text-based history of recent changes in the program allowing you to jump forwards and backward through the change history.
  • Data Recorder - A means to see waveform history during simulation or using Ghost enabled hardware.
  • Oscilloscope - A means to see repeating waveforms as you would on a standard oscilloscope during simulation or using Ghost enabled hardware.
  • Consoles - Used for textual based logs, debugging and memory viewing.
  • Component_Debugger - Used to provide addition advanced debugging when creating components.
  • Analog Window - The analogue inputs window monitors the various analogue input pins on the selected target microcontroller device.
  • Digital Pins - The digital pins window monitors the various digital input / output pins on the selected target microcontroller device.
  • Watch Window - This window appears when simulating a flowchart to allow you to see the values or variables and the current macro.
  • Wiki - Provides access to the Main Page of Flowcode help wiki.
  • Licensing - Dispalys your Flowcode license details and enabled chipacks.
  • Forums - Provides access to the Flowcode user forums to ask questions as well as share code and projects.
  • Target Device - Provides a view of the selected target microcontroller pins.
  • Icon Lists - This window shows a lists of various icons in the project.
  • Zoom - Controls the zoom level of the current flowchart or state diagram window.
  • Global Settings - A window for various application settings such as icon draw style, component include directories and network settings.
  • Status Bar - A bar at the bottom of the application showing useful information.

Icons Ribbon

Drag and drop Flowchart and State Diagram icons from the Command Icons ribbon onto the main flowchart window to create your flowchart application.

The Icons tab of the Project explorer window also contains Flowchart and State Diagram icons.


Embedded ribbon

ToolbarFlowchartIcons.jpg


App Creator ribbon

ToolbarFlowchartIconAC.jpg


State Diagrams ribbon

ToolbarStateIcons.jpg


Components Ribbon

This ribbon displays the component libraries that can be included in your program. Click on a component and it can be added onto either the Dashboard Panel or the System Panel.

The properties of the component such as Pin connections, Configuration Parameters and other settings can be edited using the Properties window.


Embedded Toolbar

ToolbarComponentIcons.jpg


App Creator Toolbar

ToolbarComponentIconsAC.jpg


A full list of the Flowcode Components can be found here along with detailed information and examples.


User Macros Ribbon

The user macros ribbon allows access to create new macros and to browse through existing macros in the project.

ToolbarUserMacros.jpg


  • New Macro - Brings up the add macro dialogue box to create a new software subroutine.
  • Edit Macro Details - Allows the details of a macro to be edited such as the name, parameters or returns.
  • Duplicate Macro - Allows the parameters, returns and code in a macro to be copied into a new macro to speed up development time when creating similar macros.
  • Export Macro - Allows a macro to be exported to a file for use in another project.
  • Import Macro - Allows an exported macro file to be imported into the current project.
  • Delete Macro - Removes a macro from your program.
  • Flowchart - Displays the selected macro as a Flowchart.
  • Blocks - Displays the selected macro as code blocks.
  • C Code - Displays the selected macro as C Code.
  • PseudoCode - Displays the selected macro as Pseudocode.
  • State Diagram - Displays the selected macro as a State Diagram.


Debug Ribbon

ToolbarDebug.jpg


  • Enable ICD - Enables ICD mode when ICD enabled hardware is connected.
  • Ghost Options - Sets the ICD and other Ghost hardware settings.
  • Go - Starts the Flowcode simulation engine.
  • Pause - Pauses the Flowcode simulation engine.
  • Stop - Stops the Flowcode simulation engine.
  • Step Into - Steps to the next icon, jumping into a macro call.
  • Step Over - Steps to the next icon, jumping over a macro call.
  • Step Out - Steps through icons until we are out of the current macro.
  • Simulate C Code - Toggles if we will try and simulate any C Code in the project.
  • Toggle Breakpoint - Allows a program icon to be tagged to automatically pause the simulation execution when hit.
  • Clear All Breakpoints - Switches off all breakpoints.
  • Show Code Profiling - Allows code profiling to be switched on or off.
  • Reset Code Profiling - Resets the code profiling counters.
    • Show Unexecuted - Toggles if unexecuted icons are highlighted with a cross.
    • Show Value - Toggles if the percentage number of hits is displayed for each icon.


Build Ribbon

ToolbarBuild.jpg


  • Project Options - Contains settings related to the current Flowcode project.
  • Compiler Options - Contains settings related to the Flowcode toolchain locations and programmers.
  • Compile To C - Compile the project into C code.
  • Compile To Hex - Compile the project into C code and then pass this to the compiler to generate a binary file.
  • Compile To Target - Compiles a binary file and attempts to send this to the target microcontroller.
  • View C Code - View the current project C code file.
  • Compiler Messages - View the messages produced by the compiler during the last compilation operation.


Window Ribbon

ToolbarWindow.jpg


  • Split Horizontal - Allows two code view windows to be placed on top of each other with a horizontal divider.
  • Split Vertical - Allows two code view windows to be placed next to each other with a vertical divider.
  • Manage Layouts - Allows custom window layouts to be defined.
  • Default - Restores the default window layout.
  • User Defined Layouts - Load one of the custom window layouts.


Help Ribbon

ToolbarHelp.jpg


  • Licensing - Options relating to your Flowcode license.
    • View - Allows you to see the current chip and feature packs attached to your license.
    • Manage - Allows you to enter your licensing information or select the free version (if Flowcode licence has never been entered after new install.
  • Library Updates - Checks for the latest Component, CAL and Target Definition updates.
  • Visit Website - Takes you to the Main Page of the Flowcode website.
  • Wiki - Takes you to the Flowcode help wiki site Main Page.
  • Forums - Takes you to the Flowcode user forums.

Video instructions

See the Accessing and Arranging Flowcode Panels video to learn how to organize the application to your preference and manage your work space effectively for optimal productivity and ease of access.


Watch the Ribbon and Buttons video to learn how to use each ribbon effectively as well as learning specific details and functions of each ribbon button.


Finally, view the Tabbed Flowcharts and Macros video to see how to control the interface when managing macros, from tabbed flowcharts and macros to viewing two macro flowcharts on one screen.