# C# Sample Code for a Page Plugin

The C# code for the LED:

Copy

    using System;
    using System.Windows.Input;
    using System.Windows.Media;
    using Cognex.Designer.Core;
    using Cognex.Designer.Core.Functions;
    using Cognex.Designer.HMI.Controls;
    using Cognex.Designer.Scripting;

    namespace Cognex.Designer.ExampleElement
    {
        // Category attribute defines the location of this control in the ToolBox
        // Description attribute defines the tooltip of this control in the ToolBox
        [DisplayName("Green LED")]
        [Category("Plugin Controls")]
        [Description("Green LED indicator")]
        public partial class MyLed : Element
        {
            private readonly ScriptablePoint[] _scriptPoints;
            private bool _isLedOn;

            public MyLed()
            {
                InitializeComponent();

                MyLedBody.MouseLeftButtonDown += MyLEDBody_MouseLeftButtonDown;

                // Define the script points available for the HMI element
                ArgumentDescriptor rParam1 = new ArgumentDescriptor("sender", typeof(object));
                ArgumentDescriptor rParam2 = new ArgumentDescriptor("e", typeof(EventArgs));
                var runParams = new ArgumentDescriptor[] { rParam1, rParam2 };
                Type returnType = typeof(void);

                // Define a custom script point for OnLeftClick
                var leftClickScriptPoint = new ScriptablePoint("OnLeftClick",
                                                               "On Mouse Left-Click",
                                                               "Script that runs when the LED is Left-Clicked",
                                                               runParams,
                                                               returnType);

                // Set _scriptPoints to return our custom OnLeftClick script point in addition to 3 other standard script points
                _scriptPoints = new ScriptablePoint[] { leftClickScriptPoint, MouseMoveScriptPoint, MouseEnterScriptPoint, MouseLeaveScriptPoint };

                Height = MyLedBody.Height;
                Width = MyLedBody.Width;
            }

            // These attributes define this property as follows:
            // Category - Section of the property editor this appears in
            // Editable - Editable in the property editor
            // Bindable - Bindable to a tag
            // Published - Accessible as a $ function or tag
            [DisplayName("Is LED On")]
            [Category("Common")]
            [Editable]
            [Bindable]
            [Published]
            public bool IsLedOn
            {
                get => _isLedOn;
                set
                {
                    _isLedOn = value;
                    SetLed();
                    OnPropertyChanged();
                }
            }

            [DisplayName("Height")]
            [Editable]
            [Bindable]
            public override double Height
            {
                get => base.Height;
                set
                {
                    base.Height = value;
                    MyLedBody.Height = value;
                }
            }

            [DisplayName("Width")]
            [Editable]
            [Bindable]
            public override double Width
            {
                get => base.Width;
                set
                {
                    base.Width = value;
                    MyLedBody.Width = value;
                }
            }

            protected override ScriptablePoint[] GetAllScriptPoints()
            {
                // return the script points we created in the constructor
                return _scriptPoints;
            }

            protected override void SetFocus()
            {
                MyLedBody.Focus();
            }

            private void MyLEDBody_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                // Calls our custom OnLeftClick script which is one of the script points
                RunScript("OnLeftClick", sender, e);
            }

            private void SetLed()
            {
                SolidColorBrush mySolidColorBrush = new SolidColorBrush();
                switch (_isLedOn)
                {
                    case true:
                        mySolidColorBrush.Color = Colors.SpringGreen;
                        MyLedBody.Fill = mySolidColorBrush;
                        break;
                    case false:
                        mySolidColorBrush.Color = Colors.Black;
                        MyLedBody.Fill = mySolidColorBrush;
                        break;
                }
            }
        }
    }

This plugin exposes the public property IsLEDOn - whether the LED is on.

See more details in the property grid below in the figure about Properties.

Attributes used on the class:

- The [DisplayName()] and [Category()] attributes determine the name of the plugin and where you can find it.

- The [Description()] attribute determines the displayed description for the plugin.

Attributes used on the public properties:

- [DisplayName()] – the name of the property as it is displayed.
- [Category()] – the category under which the property appears.
- [Editable()] – whether an editor will be displayed for this property. If this attribute is not applied on the property, then the property will not be displayed in the property grid (Properties). Therefore, Cognex recommends that you always apply this attribute on your public properties that you want to expose.
- [Bindable()] – whether the value of this property can be bound using the Expression Builder.
  - If the property is bindable, a grey dot appears next to it. Refer to the Binding Properties topic for details.

- [Published()] – whether the property is available from the script. The control has to have at least one published property to be visible while scripting.

Methods used:

- Use the OnPropertyChanged() method to notify Cognex Designer that the value of the property has changed. It is used for the IsLEDOn property because it may change often during runtime.
- Use the SetFocus() method if the control can be used for user input. If the control has a TextBox, for example, this method sets the focus on the control so that the user can type into it. The LED sample exposes a mouse left-click scriptable point, so SetFocus() is used in this case as well.

Scriptable points declared:

Use scriptable points to add scripting capability to certain events. The scriptable points will be selectable from the context menu of the control.
The LED sample defines the following scriptable point (in addition to the default MouseMoveScriptPoint, MouseEnterScriptPoint, and MouseLeaveScriptPoint scriptable points):

var leftClickScriptPoint = new ScriptablePoint("OnLeftClick", "On Mouse Left-Click", "Script that runs when the LED is Left-Clicked", runParams, returnType); where

- "OnLeftClick", the first argument, is the unique ID for the script. You use this ID as an argument in RunScript() invoked to call the script; in the LED sample: RunScript("OnLeftClick", sender, e);
- "On Mouse Left-Click", the second argument, is the displayed name of the script.
- "Script that runs when the LED is Left-Clicked", the third argument, is the tooltip (description) for the script.
- runParams, the fourth argument, is an array of the expected parameters to the script event.
- returnType, the fifth argument, sets the type of the value the script is expected to return.

The resulting context menu:

The list in the braces defines all the events that user-defined scripts can be attached to:

     return new ScriptablePoint[] { leftClickScriptPoint, MouseMoveScriptPoint, MouseEnterScriptPoint, MouseLeaveScriptPoint };