3D View Buttons

The GraphicControl used for displaying 3D content of a station or temporary graphics can also display clickable buttons for user interaction. There are two ways to add event handlers for button click and for updating the button state.

1. Pass a button ID that is also the ID of a previously created CommandBarButton.

2. Add event handlers to the corresponding GraphicControl events explicitly.

Advantages of the first method

• The click and update events are routed from the GraphicControl to the handlers of the commandBarButton.

• Convenient when the GraphicControl is used in a context where you want to display buttons for a command in both Ribbon and GraphicControl.

• The event routing is setup at the back ground during runtime and there is no dependency at compile time from the GraphicControl class to the classes in the UIEnvironment namespace.

Advantages of the second method

• Useful when the GraphicControl is used in a Windows Forms or WPF dialog, and you do not want to use the UIEnvironment event handlers.

This topic shows how to add two buttons vertically on the right side of the currently active graphic control in RobotStudio. Event handlers are then connected to increase and decrease the size of the buttons when they are clicked, as well as making them disabled when the size is outside a defined range. We are using the explicit events on GraphicControl.

The steps that will be performed are:

1. Get the active GraphicControl. This requires that a station has been opened.

2. Get two bitmaps that will used to render the buttons. To make the sample code easier to use we are borrowing bitmaps from RobotStudio commands instead of loading them from file.

3. Create two GraphicButtons by passing parameters for bitmap, position etc. to the Add method of the GraphicButtonCollection which is retrieved from the graphic controls Buttons property.

4. Add a handler to the GraphicButtonClicked event of the GraphicControl. Depending on which of the buttons are clicked the size of both buttons will either be increased or decreased. This is done by changing the Scale property of the button.

5. Add a handler to the GraphicButtonTracked event. This event is fired before the GraphicControl needs to redraw the button and asks you to update its properties first. One reason can be that the user is hoovering the mouse over the button. If the scale of the buttons is outside our defined range the Enable property of one of the buttons is set to false to make it disabled.

Note

You can easily try out this example using the RobotStudio Empty Add-in template from Visual Studio.

Solution

1. Get the active graphic control.

   var gc = GraphicControl.ActiveGraphicControl; // Will be null if there is no open station.
   

2. Re-use two existing bitmaps instead of loading from file for the sake of simplicity.

   var imgInc = CommandBarButton.FromID("ViewZoomIn").Image;
   var imgDec = CommandBarButton.FromID("ViewZoomOut").Image;
   

3. Create two buttons with the bitmaps from the previous step and unique string identifiers as parameters. The positions are hard coded and the buttons shall appear in the top right corner of the graphic control. The second button is placed 70 pixels below the first.

   gc.Buttons.Add("ButtonIncreaseSize", gc.Width - 40, 20, new Bitmap(imgInc));
   gc.Buttons.Add("ButtonDecreaseSize", gc.Width - 40, 70, new Bitmap(imgDec));
   

4. Add a handler to the GraphicButtonClicked event. In a switch statement we add one case for the button with the id “ButtonIncreaseSize” and one for “ButtonDecreaseSize”. Those identifiers must be the same as we passed as parameter in step 2. The scale of clicked button is increased or decreased with 0.5 each time the button is clicked. To change the size of the other button as well, it is retrieved by its id and then updated.

   gc.GraphicButtonClicked += Gc_GraphicButtonClicked;
   
   private static void Gc_GraphicButtonClicked(GraphicButton button)
   {
       switch (button.Id)
       {
           case "ButtonIncreaseSize":
           button.Scale += 0.5f;
           // Change the scale of the other button as well
           button = GraphicControl.ActiveGraphicControl.Buttons.Where(b => b.Id == "ButtonDecreaseSize").FirstOrDefault();
           button.Scale += 0.5f;
           break;
           case "ButtonDecreaseSize":
           button.Scale -= 0.5f;
           // Change the scale of the other button as well
           button = GraphicControl.ActiveGraphicControl.Buttons.Where(b => b.Id == "ButtonIncreaseSize").FirstOrDefault();
           button.Scale -= 0.5f;
           break;
           default:
           break;
       }
   }
   

5. Add a handler to the GrahpicButtonTrack event. If the buttons Scale property is outside the range [0.5, 4] the increase or decrease button is disabled.

   gc.GraphicButtonTracked += Gc_GraphicButtonTracked;
   
   private static void Gc_GraphicButtonTracked(GraphicButton button)
   {
       if (button == null)
       return;
   
       switch (button.Id)
       {
           case "ButtonIncreaseSize":
           button.Enabled = button.Scale <= 4;
           break;
           case "ButtonDecreaseSize":
           button.Enabled = button.Scale >= 0.5;
           break;
           default:
           break;
       }
   }
   

   This example is done inside a RobotStudio Add-In. Refer to the corresponding Add-In sections for information about how to Create and Run one.

Example

The complete code for the C# class is shown below:

using System;
using ABB.Robotics.RobotStudio.Environment;
using ABB.Robotics.RobotStudio.Stations.Forms;
using System.Drawing;
using System.Linq;

static void ExampleEntryPoint()
{
    var gc = GraphicControl.ActiveGraphicControl; // Will be null if there is no open station.
    var imgInc = CommandBarButton.FromID("ViewZoomIn").Image;
    var imgDec = CommandBarButton.FromID("ViewZoomOut").Image;
    gc.Buttons.Add("ButtonIncreaseSize", gc.Width - 40, 20, new Bitmap(imgInc));
    gc.Buttons.Add("ButtonDecreaseSize", gc.Width - 40, 70, new Bitmap(imgDec));

    gc.GraphicButtonClicked += Gc_GraphicButtonClicked;

    gc.GraphicButtonTracked += Gc_GraphicButtonTracked;

}

private static void Gc_GraphicButtonClicked(GraphicButton button)
{
    switch (button.Id)
    {
        case "ButtonIncreaseSize":
        button.Scale += 0.5f;
        // Change the scale of the other button as well
        button = GraphicControl.ActiveGraphicControl.Buttons.Where(b => b.Id == "ButtonDecreaseSize").FirstOrDefault();
        button.Scale += 0.5f;
        break;
        case "ButtonDecreaseSize":
        button.Scale -= 0.5f;
        // Change the scale of the other button as well
        button = GraphicControl.ActiveGraphicControl.Buttons.Where(b => b.Id == "ButtonIncreaseSize").FirstOrDefault();
        button.Scale -= 0.5f;
        break;
        default:
        break;
    }
}

private static void Gc_GraphicButtonTracked(GraphicButton button)
{
    if (button == null)
    return;

    switch (button.Id)
    {
        case "ButtonIncreaseSize":
        button.Enabled = button.Scale <= 4;
        break;
        case "ButtonDecreaseSize":
        button.Enabled = button.Scale >= 0.5;
        break;
        default:
        break;
    }
}

Required Namespaces

System.Drawing

System.Linq

ABB.Robotics.RobotStudio.Environment

ABB.Robotics.RobotStudio.Stations.Forms

See Also

• RobotStudio Add-Ins