View source for Graphics, frames, and text in a diagram

   [[Category:Analytica User Guide]]
<breadcrumbs>Analytica User Guide > User Interfaces for End Users > {{PAGENAME}}</breadcrumbs>
{{ReleaseBar}}You can add images to nodes or diagrams to make your models more engaging and easier to follow! For example, you could include logos, visuals to explain options in your model, or icons to make meanings more obvious.
[[File:HPCsplashpage.png|none|thumb|Example of model with images included. Access this model at [https://www.helpelectrify.com/calculator HelpElectrify.com]|alt=|650x650px]]

==Adding graphics== 
You can add a graphic image created in another application to any node or to the diagram background.  
{| class="wikitable"
|+Examples of graphic images inserted into nodes
|style="width: 50%;vertical-align:top;"|[[File:Imagesinbuttonsexample.png|frameless]]
|style="width: 50%;vertical-align:top;"|[[File:breweryexample.png|frameless]]
|-
|Example of images added to buttons to enhance a UI.
|Example of images added to nodes to add clarity to an influence diagram.
|}
To paste in a graphic:
# Copy (''Control+c'') the graphic to the clipboard from within a graphics application.
# Make sure that the edit tool is selected in Analytica.
# (Optional) Select the node or the diagram window where you want the graphic to appear.
# Paste (''Control+v'') the graphic from the clipboard.

When you paste a graphic into the [[diagram window]] without a node selected, a special node of class '''''Picture '''''is created. Picture nodes can be placed on top of '''variable''', '''module''', and '''function '''nodes. When you select a node in Step 3, the image is placed inside that node.

To remove a graphic, select it and press ''Delete'', or choose '''Clear '''from the [[Edit menu]]. When the image in inside a non-picture node, select the node, then click again on the image itself to select the image inside the node and press ''Delete''.

==Converting image formats== 
When you copy a bitmap image from some applications, they use a  compressed image formats such as PNG or JPEG to the system clipboard. When you paste or import an image in one of these formats,  Analytica recognizes it and stores it internally in that format. But, many applications copy images as full uncompressed bitmaps, which can consume a lot of space and result in large model files. So, when you paste an uncompressed bitmap image into Analytica, it converts it and stores it internally using the compressed (lossless) PNG format. This conversion preserves any transparency and alpha blending present in the original image.

Analytica release 4.0 and earlier do not recognize these compressed bitmap formats, so these images won't display if someone else loads your model into an old release. If you want your bitmap images to display in these old releases, you can convert them back into the ''Legacy Bitmap ''format after it has been pasted into your model. To do this:

* Make sure the edit tool is selected.
* Select the image node to convert.
* Select '''Change Picture Format '''from the [[Diagram menu]].
* In the '''Change Picture Format '''dialog, select the new format to use.

These steps can be used to convert any image into any desired internal image format. In some cases, certain conversions can further reduce the amount of memory (and thus model file size) consumed by the image. Legacy Bitmap files might lose some information in the image (such as transparency and alpha blending), and might consume much more space.

Images that are stored in the '''''Mac PICT '''''format do not display with [[Analytica Cloud Platform]] (ACP) and cannot be rendered by the [[Analytica Decision Engine]] (ADE). If you have an old model with images in this format that you want to use in ACP or ADE, you can convert them to EMF using the steps above.

==Adding a frame==
[[File:Chapter 1.11v2.png|none|thumb|Example of a frame being used around inputs to group them together. In this example, text nodes are placed behind inputs with the Node Style of Fill color selected.]]


You can create a rectangular frame for nodes in a diagram in either of the following ways:
* Paste a graphic into the diagram window to create a picture node, then delete the graphic. This leaves a blank picture node. Use the [[Node Style dialog]] to display the border of the node. Other nodes can be placed on top of this node.
* Create a decision node and leave the title blank. Give it a definition of 0 (or any number) to remove the cross-hatch pattern. Use the [[Node Style dialog]] to hide the label and fill color. Create this frame first, then create the nodes to be framed and place them in the frame. If you create a framing decision node after you create the nodes to be framed, the nodes are “under” the framing decision node; they are visible, but you cannot select them. To place the decision node underneath the other nodes, select the decision node while in edit mode, right mouse click and select the '''Send to Back '''command from the pop-up menu.
* Create a text node by dragging a text node from the text button [[File:Chapter9 20.png]] on the [[toolbar]]. Use the [[Node Style dialog]] to add a fill color and/or border to the node.

==Adding text== 
To add text to a diagram, drag a text node from the text button [[File:Chapter9 20.png]] on the toolbar to the diagram and enter the desired text. This creates a new node with a special class '''''text'''''. Use the handles to resize the node, and use the [[Node Style dialog]] to change the font or to change the background from transparent to filled.

==Image OnClick events== 
When an end-user clicks on the image of a Picture node, its [[OnClick]] expression is evaluated. This attribute contains an expression and works the same way as for a button.

Within the expression for [[OnClick]], you can reference local variables <code>click_x</code> and <code>click_y</code>, which contains the coordinates of the mouse click relative to the top-left corner of the image. Thus, you can create event handling code that alters its behavior based on where the mouse is clicked.

{{Release|5.0||
==Resizing images==
(New to [[Analytica 5.0]]) To resize an image from edit mode, select the node that contains the image, then click again on the image to select image part of the node. The selection handle will appear at the image corners instead of at the node corners (for most picture nodes, this will be just a few pixels different). Drag the corner handles to change the image size.
}}

==See Also==
* [[Diagram window]]
* [[Diagram menu]]
* [[Creating Lucid Influence Diagrams]]
* [[Diagram Style dialog]]
* [[Node Style dialog]]


<footer>Icon images in a node / {{PAGENAME}} / Links or URL in model attributes</footer>