# How to Write a Page Plugin for Cognex Designer

This topic describes how to write an Page plugin for Cognex Designer. The process is shown using a simple example: an LED (Light Emitting Diode) control, which you can use to indicate that an operation has finished, for example. You can manually reset the LED by left-clicking it, which behavior can be defined in script.

Note: When creating an HMI Element that will wrap a Windows Forms object, inherit from the Cognex.Designer.HMI.Controls.WindowsFormElement, instead of from the Element class. You can then set the WFHost.Child object to the forms control that you wish to use.

To write an HMI plugin for Cognex Designer, you will need the following tools:

- Microsoft Visual Studio 2012, 2013 or 2015
- Cognex Designer
- .NET 4.6

1. Open Visual Studio.

2. Create a new Project, and select WPF User Control Library.

3. Name your project and click OK.

4. In Solution Explorer, right-click on References and select Add Reference... Add the following DLLs:

   Cognex.Designer.Core

   Cognex.Designer.Scripting

   Cognex.Designer.HMI

5. By default, these DLLs will be copied into the plugin folder during deployment. Trying to load the same system DLLs twice could cause runtime errors. It is recommended to set the Copy Local property for these DLLs to False.

   Note: When referencing a Cognex Designer assembly in a Visual Studio project, the XAML designer may crash on 64-bit platforms when using Visual Studio 2012 with updates or later. Please see the Behavior Changes and Known Issues topic for more information.
6. Right-click on the project, select Properties.
7. In the Build tab, set the build Output path to C:\ProgramData\Cognex\Designer\Plugins\{Plugin Folder Name} (assuming your ProgramData directory is on the C:\ drive). For this simple LED application set it to: C:\ProgramData\Cognex\Designer\Plugins\MyLED

8. Generally, in case you intend to establish a more sophisticated plugin system, the recommended folder structure is the following: {Plugin Folder Name} \ {Company Name} \ {Plugin Name} \ {Version} \ {Architecture} \ Config file + DLLs. See an example below:

   Another alternative is to set the Output path to any arbitrary folder and use the /addPluginFolder=”{MyPluginsBinFolder} command line argument when starting Cognex Designer (see step 10 for more details).

9. In the Debug tab, select Start external program:{Cognex Designer Installation Path}\Cognex.Designer.exe and the following command line argument: /project={pathToProjectFolder}

10. Two additional arguments:

    - /addPluginFolder={pathToPluginFolder} - Adds the folder to the search path when Designer discovers plugins.
    - /project={pathToProjectsFolder} - Loads the project in the given folder.

11. Set the working directory to the folder containing the Designer executable (by default: C:\Program Files\Cognex\Designer\<version>)
12. Save the project.

13. Create the plugin.config file for the plugin (simple XML file) and add it to the project.

    Note: For more information about the plugin config file, please see the Plugin Configuration topic.

14. In the plugin.config Properties, set the file to Copy if newer.

15. Edit your XAML file as described in the XAML Sample Code for a Page Plugin topic.
16. Edit your CS file as described in the C# Sample Code for a Page Plugin topic.
17. Build the project.
18. Add the plugin to your project as described in the Plugin Configuration topic.

19. Drag and drop the plugin to your Page, and the LED will appear in your Page:

20. For example, you can assign a mouse left-click behavior to it that toggles its status using:

    $Pages.Page.MyLED.IsLEDOn = !($Pages.Page.MyLED.IsLEDOn);