tag:blogger.com,1999:blog-1409842829614172256.post-38924244556370282852008-03-09T17:29:00.000-07:002008-03-09T17:33:30.981-07:00This article demonstrates how to install and use Click to Graph, a powerful way to add and remove pens from FactoryPMI's Easy Chart Component in runtime. Click to Graph allows you to add a right click menu to components, such as led displays, labels, numeric labels, etc, to add or remove that item from an Easy Chart graph dynamically. You can even save graphs and come back to them at later times. This way you choose what you want to see in a graph. Please read the instructions carefully and perform them in order.<br /><br /><span class="style11">Installing Click to Graph</span><br /><hr size="1" color="#999999" style="padding:0"><br /><div style="padding-top:5px;padding-left:0px;"><br /><span class="style11">Step 1: Download Click to Graph File</span><br /><div style="padding-left:20px;padding-top:10px"><br />1) Click on the following link to download the zip file:<br /><div style="padding-top:5px;padding-left:20px;"><a href="http://www.inductiveautomation.com/downloads/products/?goodie=18">Click to Graph Goodie</a><br /></div><br />2) Extract the contents of the <span class="style7">ctg.zip</span> to a folder. This file contains 5 files:<br /><div style="padding-left:30px;"><br /><span class="style7">ctg.sql</span> - a MySQL backup file containing all the necessary tables<br /><span class="style7">ctg.py</span> - a python script that contains all the necessary functions<br /><span class="style7">ctg.fpal</span> - a custom palette that contains a few sample components<br /><span class="style7">ctg.fwin</span> - a file that contains all the necessary FactoryPMI windows<br /><span class="style7">ctg_shutdown_script.txt</span> - a file that contains the shutdown script needed<br /></div><br /></div><br /><span class="style11">Step 2: Import MySQL Dump File</span><br /><div style="padding-left:20px;padding-top:10px"><br />1) Open up Command Prompt by going to <span class="style7">Start->Program Files->Accessories->Command Prompt</span><br />2) Change directory to MySQL bin by entering in (afterwards press enter):<br /><div style="padding-top:5px;padding-left:20px;"><span class="style7">cd "C:\Program Files\MySQL\MySQL Server 5.0\bin"</span><br /></div><br />3) Now import <span class="style7">ctg.sql</span> by entering in (afterwards press enter):<br /><div style="padding-top:5px;padding-left:20px;"><span class="style7">mysql -u root -p YourDBName < "C:\Location to\ctg.sql"</span><br /></div><br />4) Enter in your MySQL root password (afterwards press enter)<br />5) Done. The Click to Graph tables are now successfully imported.<br /></div><br /><span class="style11">Step 3: Import FactoryPMI Script Module</span><br /><div style="padding-left:20px;padding-top:10px"><br />1) Open up the FactoryPMI Gateway Configuration page from: <span class="style7">Start->Program Files->Inductive Automation->FactoryPMI->Configuration Page</span><br />2) Open up the FactoryPMI Designer by clicking on the <span class="style7">Launch Designer</span> link. Login with your username and password (default is <span class="style7">admin</span> and <span class="style7">password</span>). Select the project you want to use Click to Graph in.<br />3) Once open, go to <span class="style7">Project->Script Modules</span> from the menu bar.<br />4) Click on the <span class="style7">Import a package or script</span> button.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/import_script.jpg" /><br /></div><br />5) Select the <span class="style7">ctg.py</span> file.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/select_py.jpg" /><br /></div><br />6) Name the module <span class="style7">ctg</span>.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/module_name.jpg" /><br /></div><br />7) Done, you now have some global functions that we are going to use later. Press Ok to close.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/import_py_done.jpg" /><br /></div><br /></div><br /><span class="style11">Step 4: Import FactoryPMI Palette</span><br /><div style="padding-left:20px;padding-top:10px"><br />1) With the designer still open, right click on the <span class="style7">Component Palette</span> and select <span class="style7">Import Palette(s)</span>.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/import_palette.jpg" /><br /></div><br />2) Select the <span class="style7">ctg.fpal</span> file.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/select_fpal.jpg" /><br /></div><br />7) Done, you now have some pre-configured components for Click to Graph that we can use.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/import_fpal.jpg" /><br /></div><br /></div><br /><span class="style11">Step 5: Import FactoryPMI Windows</span><br /><div style="padding-left:20px;padding-top:10px"><br />1) With the designer still open, right click inside the <span class="style7">Project Browser</span> and select <span class="style7">Import Window(s)</span>.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/import_fwin.jpg" /><br /></div><br />2) Select the <span class="style7">ctg.fwin</span> file.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/select_fwin.jpg" /><br /></div><br />7) Done, you now have some pre-configured windows for Click to Graph that we can use.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/import_fwin_done.jpg" /><br /></div><br />8) Lastly, you need to add the global shutdown script. Go to <span class="style7">Project->Global Event Scripts</span>. Next select the <span class="style7">Shutdown</span> tab and enter in the contents of the <span class="style7">ctg_shutdown_script.txt</span>. The script clears out the current graph when the user logs out or closes the client.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/shutdownscript.jpg" /><br /></div><br /></div><br />All done! Now let's go over how Click to Graph works.<br /></div><br /><span class="style11">How Click to Graph Works</span><br /><hr size="1" color="#999999" style="padding:0"><br /><div style="padding-top:7px"><br />The first part to understand is that Click to Graph stores pen configurations in the database. During the runtime each user picks and chooses from these pens. Picking and choosing these pens manipulates the <span class="style7">ctg_active_client</span> table. This table then drives the Easy Chart's pens/axes datasets dynamically. The ctg_active_client table is based on a unique Client ID created by FactoryPMI when you login to a client. This ID uniquely identifies one client from another. This way each client can have its own set of pens the user can configure. If that ID is somehow lost (possible via redirection), the user must log in again to access the graph.<br />Let's take a look at the databases tables needed for Click to Graph to work (there are 4 of them):<br /><br /><div style="padding-left:20px;"><br /><span class="style7">ctg_pens</span> - table stores all possible pens for the graph.<br /><span class="style7">ctg_axes</span> - table stores all the available axes for the pens.<br /><span class="style7">ctg_saved_pens</span> - table stores the saved graphs.<br /><span class="style7">ctg_active_client</span> - table stores all the pens the clients have selected.<br /></div><br />The <span class="style7">ctg_pens</span> table can be manipulated using the <span class="style7">CTG_Pen_Edit</span> window that we imported into our FactoryPMI project earlier. Here you can add/edit/remove pens. These pens correspond to tag or item that FactorySQL (or another historian) is already trending. Attached to a pen is a <span class="style7">Point ID</span>, which uniquely identifies one pen from another. Every FactoryPMI component that we want to use as a Click to Graph item must also contain the Point ID, so that it knows how to add or remove that specific pen. Let's go over a small example to get started.<br />Next, the actual Easy Chart, located on the <span class="style7">CTG_Graph</span> window, has two expert properties called <span class="style7">pens</span> and <span class="style7">axes</span> which are both bound to a SQL query. The pens dataset is bound to a join of the <span class="style7">ctg_active_client</span> table and the <span class="style7">ctg_pens</span> table. The axes dataset is bound to the <span class="style7">ctg_axes</span> table.<br />Let's go over a small example to understand how everything relates.<br /><span class="style11">Example 1: Using a Click to Graph Component</span><br /><div style="padding-left:20px;padding-top:10px"><br />1) Open up the FactoryPMI Designer.<br />2) Open up or create a window.<br />3) From the Component Palette under <span class="style7">CTG Palette</span>, drag and drop the <span class="style7">Multi-State Indicator</span> pre-configured component into the window.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/drag_ind.jpg" /><br /></div><br />4) You will notice there is a <span class="style7">Dynamic Property</span> called <span class="style7">PointID</span> attached to the component with a value of <span class="style7">HOA</span>. This Point ID must match the Point ID of a pen in the <span class="style7">ctg_pens</span> table.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/pointid.jpg" /><br /></div><br />5) Now, let's take a look at the <span class="style7">Mouse Pressed and Released actions</span> on this component. This is where the right click menu is called. So, right click on the component and select <span class="style7">Configure Actions..</span>.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/action.jpg" /><br /></div><br />6) You will notice the script is the same for the mousePressed and mouseReleased. They both call a global script function that we imported earlier into the Script Modules. We pass the <span class="style7">event</span> object into the showPopup function and it knows how to retrieve the Point ID from the component. The function also takes care of creating the popup menu.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/mouseaction.jpg" /><br /></div><br />7) Now, cancel out of the action configuration and go into Preview mode in the designer by selecting <span class="style7">Project->Preview mode</span> from the menu. Now we can interact with the components. Right click on the indicator and you will get the following menu:<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/menu.jpg" /><br /></div><br />8) That's it! You can click <span class="style7">(+) Add to Graph</span> to add that pen to the current working graph. If the pen does not exist in the <span class="style7">ctg_pens</span> table the script will create one automatically with the default settings. After that, you can remove the pen and event clear out the current graph.<br />9) To see the current graph open up the <span class="style7">CTG_Graph</span> window.<br /><div style="padding-left:0px;"><br /><img src="http://www.inductiveautomation.com/files/article_images/clicktograph/graph.jpg" /><br /></div><br /></div><br /><span class="style11">How to add Click to Graph to already existing components</span><br /><hr size="1" color="#999999" style="padding:0"><br />So, if you would like to add Click to Graph to already existing components do the following:<br />1) Right click on the component and select <span class="style7">Component Customizers->Dynamic Properties</span> and add a new property named <span class="style7">PointID</span> of type <span class="style7">String</span>.<br />2) Lastly, add the following script in the <span class="style7">mousePressed</span> and <span class="style7">mouseReleased</span> actions by right clicking on the component and selecting <span class="style7">Configure Actions..</span>:<br /><div style="padding-left:30px;"><br /><span class="style7">if event.button != event.BUTTON1:<br /> app.ctg.showPopup(event)</span><br /></div><br /></div><br /><br />Have fun with this goodie and as always if you have any questions please call us at 800.266.7798.surferbnoreply@blogger.com