About the Application#

This application is triggered on an http request to create an image of the current time and push a link of the image to the phone. It requires a location that is web accessible and writable from where your plugin is running to write an image file to. Two solutions to this are saving it to the MediaServer\Audio directory on the server and enabling Full Control sharing, or having a web accessible folder on your client.

Creating the Application Project#

1. Open the Designer and Create a new project. (File>New Project)

2. Create a project named "ClockApp_CUAD":

3. When creating a new project, the Designer will prompt you to name first script and to select a triggering event for that script. Our application will be triggered by a web browser to send an image to a phone. So select Http.GotRequest and click Ok.

Adding an Installer#

1. We want the user to be able to use custom parameters when running the application, so we need to add an installer. R-click on the project in the Explorer window and select Add Installer > New Installer.

2. Now that we've added the installer itself, we can add our parameters. Click on the installer in the Explorer window. We will need a phone IP address, the username and password of the end user associated with the phone, and the location of where to save the image. Add new variables by R-clicking on the installer canvas and selecting New. Create variables of the names phoneIP, username, password, and imgLocation. We can accept the default string format for all of these variables.

Creating the Global Variables#

1. Now we need to capture the installer parameters as global variables. Click on the script1 tab and add four new items by R-clicking on the Variables icon and selecting Add New Item four times. Name the variables g_phoneIP, g_username, g_password, and g_imgLocation.

2. Instantiate these variables by clicking on them and going to the Properties table. Under InitializeWith, select the corresponding configuration item from the drop-down menu.

Handling OnGotRequest#

CustomCode#

The first thing we will need to do is create the image to send to the phone, which will require some custom C# code. Under Toolbox, find the Application Components section, and drag and drop the CustomCode action onto the designer canvas.

Expand the custom code option of the Properties table. Copy and paste in the following code, which will create an image with the time on it, and then save it to your specified image location:

public static void Execute(string g_imgLocation)

{ Draw image and set background Bitmap img = new Bitmap(298, 168); Graphics g = Graphics.FromImage(img); g.FillRectangle(new SolidBrush(Color.Blue), new Rectangle(0, 0, 298, 168)); draw string Font f = new Font(new FontFamily("Arial"), 38); DateTime time = DateTime.Now; string s = DateTime.Now.Hour +":"; add two digit minute int minute = DateTime.Now.Minute; if(minute < 10) s = s +'0' +minute +":"; else s = s +minute +":"; add two digit second int second = DateTime.Now.Second; if(second < 10) s = s + '0' +second; else s = s +second; g.DrawString(s, f, new SolidBrush(Color.Red), new PointF(10, 10)); save image try{ img.Save(g_imgLocation); } catch(Exception e){ Console.WriteLine("Caught exception: " +e); } } }}}

Local Variables#

In addition to the global variables we have already defined, we are going to need local variables as well. R-click anywhere on the canvas and click the first option, Variable Tray.

Tip: The variable tray can be viewed by either R-clicking on the canvas and selecting "Variable Tray", or by going to View>Variable Tray. These actions will toggle the variable tray between being displayed and hidden.

R-click on the variable tray and select Add New Item.

Name your new item hostname.

In the Properties table of your new variable hostname, set InitializeWith to Hostname.

Now R-click on the variable tray again and add another variable. Name this one graphicFileMenuExe. In the Properties box, set the type to GraphicFileMenu (leave InitializeWith blank).

Now R-click on the variable tray again and add another variable. Name this one remotehost. In the Properties box, set InitializeWith to RemoteHost.

CreateGraphicFileMenu#

Now we want to add a graphic file menu. In the Toolbox, go to the Cisco IP Phone tab and drag and drop CreateGraphicFileMenu onto the canvas. To connect CustomCode to CreateGraphicFileMenu, move your cursor to the CustomCode icon. When your cursor approaches the center of the icon a 'dot' will appear in the center of the icon and your cursor will turn into a 'hand'. Once your cursor has become a 'hand', click and drag the cursor from the CustomCode action to the CreateGraphicFilMenu action. We will leave it as the default action to follow CustomCode.

Set the following variables in the CreateGraphicFileMenu Properties table:

Configure the URL property's value of CreateGraphicFileMenu action accessable by IPPhone.

E.g: "http://"hostname"/mceadmin/images/clockImg.png"

EndScript (from CreateGraphicFileMenu)#

If CreateGraphicFileMenu fails, then we want to end the script. Go to Application Components in the Toolbox and drag and drop an EndScript action onto the canvas. Connect it to CreateGraphicFileMenu and change the condition to Failure.

SendExecute#

If CreateGraphicFileMenu is successful, then we want to send it to a phone. Go to CiscoIPPhone in the Toolbox and drag and drop a SendExecute canvas onto the canvas. Connect it to CreateGraphicFileMenu.

Set the following variable in the SendExecute Properties table:

SendResponse#

We want to send a text response to the browser with the result of the application. Go to HTTP under the Toolbox and drag and drop two SendResponses onto the canvas. Set the condition of one to Failure and leave the other as default.

Set the Properties of the default SendResponse as follows:

Set the Properties of the Failure SendResponse as follows:

EndScript (from SendExecute)#

Once the response has been sent, our application is done. Go to Application Components in the Toolbox and drag and drop two EndScript actions onto the canvas. Connect one to each of the SendResponse actions.

Build & Deploy the Application#

Set Connectivity#

Prior to building and deploying the application, configure the "Connectivity" options between the CUAD and the CUAS. Select "Tools -> Options -> Connectivity" from the top menu and enter the IP address and username / password for the CUAE server, then save the change.

Build & Deploy#

To both build and deploy the application, select "Build -> Deploy" from the top menu (to Build without deploying, select "Build -> Build Project").

Note:

• The status of the build and deployment is displayed in the "Ouput" pane at the bottom of the CUAD.
• In the case that this is not you first deployment to the CUAE server you will be present with a pop-up prompt to select "Upgrade" or "Reinstall".

To view the status of the application in the CUAE Admin console. Log into the CUAE management console and select applications from the menu list.

Running the Application#

Setting Configurations#

Log into the CUAE management console and select applications. Click on ClockApp_CUAD from the list. Set the appropriate configuration items. You will want to enter the IP address of the phone to send the image to, the username and password of the end user associated with the phone, and the location to save the created image file to. For example, if you are saving the image locally on the server, enter "C:\Program Files\Cisco Systems\Unified Application Environment\mceadmin\public\images\clockImg.png". After setting the configuratiosn, click Apply.

Adding A Trigger#

• Select "Applications -> Find/List Triggers" to generate a list of applications and their associated triggers.
• Select the application "ClockApp_CUAD" in the list.
• Enter "url" and "/ClockApp_CUAD". Select Add Parameter.

Running the Application#

Trigger the application by entering

http://localhost:8000/ClockApp_CUAD

in a web browser.