Analytica Docs - User contributions [en]

File:Themes Library.ana

2025-07-01T22:31:00Z

Klee2: Klee2 uploaded a new version of File:Themes Library.ana

== Summary ==
Uploading new version

Themes Library

2025-07-01T22:30:22Z

Klee2: /* Download */

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Themes Library.ana|Themes Library.ana]]. To use it, simply add the library into your model.

Note that as of Analytica 6.5, the Themes library is included in Analytica. If you go to File > Add library from Analytica, scroll down to see the Themes library.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!New default
[[File:2023theme.png|frameless]]
!Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear in the top section of the menu. These include the following options:

* '''Graph theme''' provides a list of pre-made graph themes for you to choose from. Note that if you change the graph theme, the other options will update to the theme defaults.
* '''Graph font''' changes the font used in graph labels and titles.
* '''Line thickness''' changes the thickness of the line in line graphs.
* '''Include graph borders''' toggles borders on and off in graphs.
* '''Adapt font size to window''' toggles the adaptive font setting. When this is on, text in graphs will resize as the graph window changes heights.
* '''Axis title formatting''' changes the font formatting for axis titles.
* '''Axis title font size''' changes the font size for axis titles and key titles only
* '''Axis label font size''' changes the font size for axis labels and key labels only

Changing these selections will update the default graph settings accordingly. These settings will also be exported if you choose to [[Themes Library#Export Anastyle|export an Anastyle]] using the library.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Themes Library
!New default
[[File:Graphin2023theme.png|frameless]]
!Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Dark rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released July 1, 2025. Updates include:
* Renamed Lumina theme to New default
* Renamed Lumina rainbow graph theme to Rainbow

Previous release notes:
=== January 28, 2025 ===
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

=== July 6, 2023 ===
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

Themes Library

2025-07-01T22:28:29Z

Klee2: /* Release Notes */ added renamed themes

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Themes Library.ana|Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!New default
[[File:2023theme.png|frameless]]
!Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear in the top section of the menu. These include the following options:

* '''Graph theme''' provides a list of pre-made graph themes for you to choose from. Note that if you change the graph theme, the other options will update to the theme defaults.
* '''Graph font''' changes the font used in graph labels and titles.
* '''Line thickness''' changes the thickness of the line in line graphs.
* '''Include graph borders''' toggles borders on and off in graphs.
* '''Adapt font size to window''' toggles the adaptive font setting. When this is on, text in graphs will resize as the graph window changes heights.
* '''Axis title formatting''' changes the font formatting for axis titles.
* '''Axis title font size''' changes the font size for axis titles and key titles only
* '''Axis label font size''' changes the font size for axis labels and key labels only

Changing these selections will update the default graph settings accordingly. These settings will also be exported if you choose to [[Themes Library#Export Anastyle|export an Anastyle]] using the library.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Themes Library
!New default
[[File:Graphin2023theme.png|frameless]]
!Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Dark rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released July 1, 2025. Updates include:
* Renamed Lumina theme to New default
* Renamed Lumina rainbow graph theme to Rainbow

Previous release notes:
=== January 28, 2025 ===
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

=== July 6, 2023 ===
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

Themes Library

2025-07-01T22:26:31Z

Klee2: /* Graph Examples Menu */ rename themes

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Themes Library.ana|Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!New default
[[File:2023theme.png|frameless]]
!Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear in the top section of the menu. These include the following options:

* '''Graph theme''' provides a list of pre-made graph themes for you to choose from. Note that if you change the graph theme, the other options will update to the theme defaults.
* '''Graph font''' changes the font used in graph labels and titles.
* '''Line thickness''' changes the thickness of the line in line graphs.
* '''Include graph borders''' toggles borders on and off in graphs.
* '''Adapt font size to window''' toggles the adaptive font setting. When this is on, text in graphs will resize as the graph window changes heights.
* '''Axis title formatting''' changes the font formatting for axis titles.
* '''Axis title font size''' changes the font size for axis titles and key titles only
* '''Axis label font size''' changes the font size for axis labels and key labels only

Changing these selections will update the default graph settings accordingly. These settings will also be exported if you choose to [[Themes Library#Export Anastyle|export an Anastyle]] using the library.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Themes Library
!New default
[[File:Graphin2023theme.png|frameless]]
!Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Dark rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released January 28, 2025. Updates include:
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

Previous release notes:
=== July 6, 2023 ===
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

Themes Library

2025-07-01T22:25:59Z

Klee2: /* Diagram colors */ rename themes

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Themes Library.ana|Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!New default
[[File:2023theme.png|frameless]]
!Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear in the top section of the menu. These include the following options:

* '''Graph theme''' provides a list of pre-made graph themes for you to choose from. Note that if you change the graph theme, the other options will update to the theme defaults.
* '''Graph font''' changes the font used in graph labels and titles.
* '''Line thickness''' changes the thickness of the line in line graphs.
* '''Include graph borders''' toggles borders on and off in graphs.
* '''Adapt font size to window''' toggles the adaptive font setting. When this is on, text in graphs will resize as the graph window changes heights.
* '''Axis title formatting''' changes the font formatting for axis titles.
* '''Axis title font size''' changes the font size for axis titles and key titles only
* '''Axis label font size''' changes the font size for axis labels and key labels only

Changing these selections will update the default graph settings accordingly. These settings will also be exported if you choose to [[Themes Library#Export Anastyle|export an Anastyle]] using the library.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Themes Library
!Lumina
[[File:Graphin2023theme.png|frameless]]
!Lumina Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Lumina Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Lumina Dark Rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released January 28, 2025. Updates include:
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

Previous release notes:
=== July 6, 2023 ===
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

Assista - Analytica AI Assistant

2025-04-03T21:10:14Z

Klee2: Updated logo + sizing

''New in [[Analytica 6.5]]''

<center>[[image:assistaLogo.png|alt=|frameless|449x449px]]</center>

''Assista'' is the Analytica AI assistant -- a co-pilot that uses Artificial Intelligence to help you use Analytica and build models. You interact with Assista via a chat window. It provides help using plain English (and other natural languages). It can see your model and what variable or module you are looking at. It can can perform some tasks in the Analytica UI and make changes or additions to your model. It can also explain Analytica functions and suggest links to Analytica docs.



Here are a few examples of questions and requests it can handle:
* Describe this model -- ''explains what this model does''
* How do you change the background color?
* Change the background to white -- ''sometimes it can act on the model itself''
* Show a graph of overall company profits -- ''finds a relevant variable and displays its graph''
* How is revenue determined? -- ''explains the definition for this variable''
* Write and fill in its description -- "it describes the calculation for the currently displayed variable''
* I don't like that description. I want the description to explain what the definition means -- ''it adds a more useful description''
* Write a function for Geometric Average-- ''Shows a function to do this, and asks if you want to create the function in the current module''
* Yes -- ''Adds the function into your model, including its Description''
* How do I use the Aggregate function -- ''Describes it with links to Analytica docs pages''

'''Demos:'''
* See [https://downloads.analytica.com/Videos/AI_Series/AAIA_alpha_demo.mp4 a short demo of Assista responding to these prompts]
* Watch a demo given at Risk Awareness Year 2024 (RAW2024), [https://2024.riskawarenessweek.com/talks/building-risk-awareness-with-ai-assistants An AI assistant collaboration to develop risk management models], 10-Oct-2024.

== Inaccuracies ==

Like other AI systems, it makes mistakes and sometimes gives wrong information. Its command of Analytica syntax and functions is not perfect. But if it leads you astray today, don't give up on it! We continue to improve it -- in part based on your questions. Over time, it will become more capable of helping you with all stages of model building and interpreting results.

== Privacy (or lack of) ==

When you use Assista, your questions and some model information are sent to Lumina's servers as well as to OpenAI's servers. We use this information to see how well it's working to improve Assista. We at Lumina take privacy seriously. We will make our best effort to protect this information from any access or use other than to operate and improve Assista.

If you don't use Assista, it sends no information, so you need not worry about this when simply using Analytica.

== Scope ==

What can Assista help you with? This section identifies some areas, but these do not fully cover its full scope.

Please ask it for whatever help you need, even if it doesn't match stuff shown here! It may surprise you, but even if it fails, your questions may inform Assista's engineers about what types of capabilities would be useful to focus on.

Assista relies heavily on the documentation attributes (Title, Description, Units) in your model, and on the arrows that you have drawn between variables (even if they aren't yet defined). Keep those populated both for your own benefit, but also to increase the quality of the assistance. You can even ask it to write those descriptions for you.

=== Using Analytica's UI ===

::''How do you ... in Analytica?''

Ask it for the steps required to do something using the Analytica's UI.

Inaccuracies in its steps sometimes occur. But improving this accuracy is our first area of focus.

=== Navigating the Docs ===

The Analytica Docs are extensive. Assista can help you find what you need, even if you don't know the name of a feature or function. It shows "see also" links to relevant Docs pages.

Ask it for a list of functions of a specified type, for example. Or where you can find more information on something.

This general area is our second focus priority.

=== Actions on the model ===

In addition to explaining how to do something in Analytica GUI, Assista can sometimes do it for you! Some examples:

* Open the graph of X { or edit table, result table, object window, etc.)
* Change the color of X to blue
* Write this description
* Write this definition.
* Add a variable to calculate X.
* ... and more

=== Explaining Analytica concepts ===

Ask it to teach you more about Analytica concepts.

=== Formulating a model ===

Structuring your complex, messy, real world problem as an influence diagram and model that captures the essential elements is a challenging task for human model builders. This is also one of the most exciting use cases for this new technology, especially in a collaborative analyst-assistant partnership. Try experimenting with this. We have found it is often quite helpful -- and sometimes not.

=== Interpreting results ===

How do you interpret results, tables and graphs? How should you act based on the insights?

For now, Assista can't help much. One reason is that it doesn't yet look directly at the raw numbers or graph images in your results (or edit tables), even though it can see your graphing dimensions (axes, keys) and table pivots.

=== Other ===

This list of ideas is by no means complete. If you could use some help while using Analytica, just try asking, even if it doesn't fall into any of these categories. It may give a useful response -- or at least, you may inspire us to extend its capabilities in new directions.

== How Assista works ==

Assista includes a small local Analytica client library that contains the conversation window. This library sends your prompt, chat history, and information about the UI context (e.g., what you are currently looking at) to an Assista server running on the Lumina Cloud. When requested by the server, this local library gets stuff from your model, performs any actions issued by the server, and adds results to the chat window. All A.I. logic runs on the server. The client library is loaded into memory when you first press the Assista toolbar button. It is unloaded when you close your model; your session starts over when you open a new model.

The server processes the prompt and generates the response. It starts by using an LLM to analyze your prompt, to identify what skill sets it needs to respond, the information sources it may need to reference, and actions it may need to perform. It then uses specialized algorithms to customize the instructions to the LLM for the next step, using semantic search to find relevant references from the Analytica docs, from your model, or internal data sources. It then sends customized instructions and reference materials to an LLM (usually Open AI's GPT-4o) which generates a natural language response. If it detects a mistake in the response, it describes the problem and sends it back to the LLM with additional reference materials to give it a second chance. It reformats the final response, adding hyperlinks, section headings, or code blocks, and so on, and shows it to the user at the end the conversation window.

Lumina is actively developing and refining this process, so the process and performance will change over time.

== See also ==
* [https://downloads.analytica.com/Videos/AI_Series/AAIA_alpha_demo.mp4 A 7 minute (unpolished) demo video]

File:AssistaLogo.png

2025-04-03T21:08:55Z

Klee2: Klee2 uploaded a new version of File:AssistaLogo.png

== Summary ==
Proposed logo for assista

Entering extended characters

2025-02-24T17:05:53Z

Klee2:

Sometimes you want to use a character that does not appear on your keyboard in the description and other text attributes of a variable or text box, and other object. You can use almost any kind character---bullet points, currencies, accents, arrows, math, Greek letters, checkmarks, and much more.

== How to type an extended character ==
{{Assista|key|Q: How do I type an extended character?}}

When entering an attribute value or cell value into Analytica, you can type the extended character by typing a backslash ( <code>\</code>), the character name, then the TAB key. Here are some examples (where [TAB] means press the TAB key):

::{| border="0"
! width=200px | You type !! You see
|-
| \euro[TAB] || €
|-
| \Omega[TAB] || Ω
|-
| \omega[TAB] || ω
|-
| \rarr[TAB] || →
|}

Some character names are sensitive to the upper/lower case of the first character (such as omega vs. Omega), but most are not. As you start typing a character name in an expression attribute, [[Expression Assist]] pops up with possible character name completions to help you.

If you know the hexadecimal code for the unicode character, you can enter it by typing backslash, plus, the hex code and [TAB]. For example,
::{| border="0"
! width=200px | You type !! You see
|-
| \+2bb9[TAB] || ⮹
|-
| \+27d6[TAB] || ⟖
|}

== Character names ==

Here's a list of all the extended characters that you can type using their names:

{| border="0" style="cell-padding:5px"
! width=200px | You type !! You see
|-
| \![TAB] \exclamdown[TAB]|| ¡
|-
| \sterling[TAB]|| £
|-
| \yen[TAB]|| ¥
|-
| \brokenbar[TAB]|| ¦
|-
| \S[TAB]|| §
|-
| \copyright[TAB] \circledC[TAB]|| ©
|-
| \ordfemiminine[TAB]|| ª
|-
| \<<[TAB]|| «
|-
| \neg[TAB]|| ¬
|-
| \registered[TAB] \circled[TAB] || ®
|-
| \highminus[TAB]|| ¯
|-
| \deg[TAB]|| °
|-
| \pm[TAB] \plusMinus[TAB]|| ±
|-
| \^2[TAB]|| ²
|-
| \^3[TAB]|| ³
|-
| \micro[TAB]|| µ
|-
| \P[TAB]|| ¶
|-
| \middleDot[TAB]|| ·
|-
| \^1[TAB]|| ¹
|-
| \ordmasculine[TAB]|| º
|-
| \>>[TAB]|| »
|-
| \1/4[TAB]|| ¼
|-
| \1/2[TAB]|| ½
|-
| \3/4[TAB]|| ¾
|-
| \?[TAB] \questiondown[TAB]|| ¿
|-
| \A`[TAB]|| À
|-
| \A'[TAB]|| Á
|-
| \A^[TAB]|| Â
|-
| \A~[TAB]|| Ã
|-
| \A:[TAB]|| Ä
|-
| \Ao[TAB]|| Å
|-
| \AE[TAB]|| Æ
|-
| \C~[TAB]|| Ç
|-
| \E`[TAB]|| È
|-
| \E'[TAB]|| É
|-
| \E^[TAB]|| Ê
|-
| \E:[TAB]|| Ë
|-
| \I`[TAB]|| Ì
|-
| \I'[TAB]|| Í
|-
| \I^[TAB]|| Î
|-
| \I:[TAB]|| Ï
|-
| \DH[TAB]|| Ð
|-
| \N~[TAB]|| Ñ
|-
| \O`[TAB]|| Ò
|-
| \O'[TAB]|| Ó
|-
| \O^[TAB]|| Ô
|-
| \O~[TAB]|| Õ
|-
| \O:[TAB]|| Ö
|-
| \x[TAB]|| ×
|-
| \O[TAB] \empty[TAB]|| Ø
|-
| \U`[TAB]|| Ù
|-
| \U'[TAB]|| Ú
|-
| \U^[TAB]|| Û
|-
| \U:[TAB]|| Ü
|-
| \Y'[TAB]|| Ý
|-
| \TH[TAB]|| Þ
|-
| \ss[TAB]|| ß
|-
| \a`[TAB]|| à
|-
| \a'[TAB]|| á
|-
| \a^[TAB]|| â
|-
| \a~[TAB]|| ã
|-
| \a:[TAB]|| ä
|-
| \ao[TAB]|| å
|-
| \ae[TAB]|| æ
|-
| \c~[TAB]|| ç
|-
| \e`[TAB]|| è
|-
| \e'[TAB]|| é
|-
| \e^[TAB]|| ê
|-
| \e:[TAB]|| ë
|-
| \i`[TAB]|| ì
|-
| \i'[TAB]|| í
|-
| \i^[TAB]|| î
|-
| \i:[TAB]|| ï
|-
| \eth[TAB]|| ð
|-
| \n~[TAB]|| ñ
|-
| \o`[TAB]|| ò
|-
| \o'[TAB]|| ó
|-
| \o^[TAB]|| ô
|-
| \o~[TAB]|| õ
|-
| \o:[TAB]|| ö
|-
| \div[TAB]|| ÷
|-
| \o[TAB]|| ø
|-
| \u`[TAB]|| ù
|-
| \u'[TAB]|| ú
|-
| \u^[TAB]|| û
|-
| \u:[TAB]|| ü
|-
| \y'[TAB]|| ý
|-
| \th[TAB]|| þ
|-
| \y:[TAB]|| ÿ
|-
| \A^-[TAB]|| Ā
|-
| \a^-[TAB]|| ā
|-
| \C'[TAB]|| Ć
|-
| \c'[TAB]|| ć
|-
| \C^[TAB]|| Ĉ
|-
| \c^[TAB]|| ĉ
|-
| \C.[TAB]|| Ċ
|-
| \c.[TAB]|| ċ
|-
| \D-[TAB]|| Đ
|-
| \d-[TAB]|| đ
|-
| \E^-[TAB]|| Ē
|-
| \e^-[TAB]|| ē
|-
| \Hbar[TAB]|| Ħ
|-
| \hbar[TAB]|| ħ
|-
| \I^~[TAB]|| Ĩ
|-
| \imath[TAB]|| ı
|-
| \IJ[TAB]|| Ĳ
|-
| \ij[TAB]|| ĳ
|-
| \L[TAB]|| Ł
|-
| \l[TAB]|| ł
|-
| \ng[TAB]|| ŋ
|-
| \OE[TAB]|| Œ
|-
| \oe[TAB]|| œ
|-
| \hvlig[TAB]|| ƕ
|-
| \nrleg[TAB]|| ƞ
|-
| \Zbar[TAB]|| Ƶ
|-
| \zbar[TAB]|| ƶ
|-
| \doublepipe[TAB]|| ǂ
|-
| \schwa[TAB]|| ə
|-
| \pgamma[TAB]|| ɣ
|-
| \pbgam[TAB]|| ɤ
|-
| \clomeg[TAB]|| ɷ
|-
| \esh[TAB]|| ʃ
|-
| \trnt[TAB]|| ʇ
|-
| \rtlt[TAB]|| ʈ
|-
| \invv[TAB]|| ʌ
|-
| \invw[TAB]|| ʍ
|-
| \trny[TAB]|| ʎ
|-
| \acute[TAB]|| ́
|-
| \hat[TAB]|| ̂
|-
| \tilde[TAB]|| ̃
|-
| \bar[TAB]|| ̄
|-
| \overbar[TAB]|| ̅
|-
| \breve[TAB]|| ̆
|-
| \dot[TAB]|| ̇
|-
| \ddot[TAB]|| ̈
|-
| \ovhook[TAB]|| ̉
|-
| \ocirc[TAB]|| ̊
|-
| \''[TAB]|| ̋
|-
| \Alpha[TAB]|| Α
|-
| \Beta[TAB]|| Β
|-
| \Gamma[TAB]|| Γ
|-
| \Delta[TAB]|| Δ
|-
| \Epsilon[TAB]|| Ε
|-
| \Zeta[TAB]|| Ζ
|-
| \Eta[TAB]|| Η
|-
| \Theta[TAB]|| Θ
|-
| \Iota[TAB]|| Ι
|-
| \Kappa[TAB]|| Κ
|-
| \Lambda[TAB]|| Λ
|-
| \Mu[TAB]|| Μ
|-
| \Nu[TAB]|| Ν
|-
| \Xi[TAB]|| Ξ
|-
| \Omicron[TAB]|| Ο
|-
| \Pi[TAB]|| Π
|-
| \ho[TAB]|| Ρ
|-
| \Sigma[TAB]|| Σ
|-
| \Tau[TAB]|| Τ
|-
| \Upsilon[TAB]|| Υ
|-
| \Phi[TAB]|| Φ
|-
| \Chi[TAB]|| Χ
|-
| \Psi[TAB]|| Ψ
|-
| \Omega[TAB]|| Ω
|-
| \alpha[TAB]|| α
|-
| \beta[TAB]|| β
|-
| \gamma[TAB]|| γ
|-
| \delta[TAB]|| δ
|-
| \varepsilon[TAB]|| ε
|-
| \zeta[TAB]|| ζ
|-
| \eta[TAB]|| η
|-
| \theta[TAB]|| θ
|-
| \iota[TAB]|| ι
|-
| \kappa[TAB]|| κ
|-
| \lambda[TAB]|| λ
|-
| \mu[TAB]|| μ
|-
| \nu[TAB]|| ν
|-
| \xi[TAB]|| ξ
|-
| \omicron[TAB]|| ο
|-
| \pi[TAB]|| π
|-
| \rho[TAB]|| ρ
|-
| \varsigma[TAB]|| ς
|-
| \sigma[TAB]|| σ
|-
| \tau[TAB]|| τ
|-
| \upsilon[TAB]|| υ
|-
| \varphi[TAB]|| φ
|-
| \chi[TAB]|| χ
|-
| \psi[TAB]|| ψ
|-
| \omega[TAB]|| ω
|-
| \varbeta[TAB]|| ϐ
|-
| \vartheta[TAB]|| ϑ
|-
| \phi[TAB]|| ϕ
|-
| \omegapi[TAB]|| ϖ
|-
| \Koppa[TAB]|| Ϟ
|-
| \koppa[TAB]|| ϟ
|-
| \varkappa[TAB]|| ϰ
|-
| \varrho[TAB]|| ϱ
|-
| \VarTheta[TAB]|| ϴ
|-
| \epsilon[TAB]|| ϵ
|-
| \backepsilon[TAB]|| ϶
|-
| \^A[TAB]|| ᴬ
|-
| \^AE[TAB]|| ᴭ
|-
| \^B[TAB]|| ᴮ
|-
| \^D[TAB]|| ᴰ
|-
| \^E[TAB]|| ᴱ
|-
| \^G[TAB]|| ᴳ
|-
| \^H[TAB]|| ᴴ
|-
| \^I[TAB]|| ᴵ
|-
| \^J[TAB]|| ᴶ
|-
| \^K[TAB]|| ᴷ
|-
| \^L[TAB]|| ᴸ
|-
| \^M[TAB]|| ᴹ
|-
| \^N[TAB]|| ᴺ
|-
| \^O[TAB]|| ᴼ
|-
| \^P[TAB]|| ᴾ
|-
| \^[TAB] || ᴿ
|-
| \^T[TAB]|| ᵀ
|-
| \^U[TAB]|| ᵁ
|-
| \^W[TAB]|| ᵂ
|-
| \^a[TAB]|| ᵃ
|-
| \^alpha[TAB]|| ᵅ
|-
| \^b[TAB]|| ᵇ
|-
| \^d[TAB]|| ᵈ
|-
| \^e[TAB]|| ᵉ
|-
| \^epsilon[TAB]|| ᵋ
|-
| \^g[TAB]|| ᵍ
|-
| \^k[TAB]|| ᵏ
|-
| \^m[TAB]|| ᵐ
|-
| \^o[TAB]|| ᵒ
|-
| \^p[TAB]|| ᵖ
|-
| \^t[TAB]|| ᵗ
|-
| \^u[TAB]|| ᵘ
|-
| \^v[TAB]|| ᵛ
|-
| \^beta[TAB]|| ᵝ
|-
| \^gamma[TAB]|| ᵞ
|-
| \^delta[TAB]|| ᵟ
|-
| \^phi[TAB]|| ᵠ
|-
| \^chi[TAB]|| ᵡ
|-
| \_i[TAB]|| ᵢ
|-
| \_r[TAB]|| ᵣ
|-
| \_u[TAB]|| ᵤ
|-
| \_v[TAB]|| ᵥ
|-
| \_beta[TAB]|| ᵦ
|-
| \_gamma[TAB]|| ᵧ
|-
| \_rho[TAB]|| ᵨ
|-
| \_phi[TAB]|| ᵩ
|-
| \_chi[TAB]|| ᵪ
|-
| \enspace[TAB]||  
|-
| \emspace[TAB]||  
|-
| \thickspace[TAB]||  
|-
| \thinspace[TAB]||  
|-
| \hspace[TAB]||  
|-
| \endash[TAB]|| –
|-
| \emdash[TAB]|| —
|-
| \dvertbar[TAB]|| ‖
|-
| \_dhoriz[TAB]|| ‗
|-
| \leftdquote[TAB]|| “
|-
| \rightdquote[TAB]|| ”
|-
| \dagger[TAB]|| †
|-
| \ddagger[TAB]|| ‡
|-
| \bullet[TAB]|| •
|-
| \ellipsis[TAB] \dots[TAB] \...[TAB]|| …
|-
| \perthousand[TAB]|| ‰
|-
| \pertenthousand[TAB]|| ‱
|-
| \prime[TAB]|| ′
|-
| \pprime[TAB]|| ″
|-
| \ppprime[TAB]|| ‴
|-
| \backprime[TAB]|| ‵
|-
| \backpprime[TAB]|| ‶
|-
| \backppprime[TAB]|| ‷
|-
| \!![TAB]|| ‼
|-
| \!?[TAB]|| ‽
|-
| \pppprime[TAB]|| ⁗
|-
| \vertellipsis[TAB] \tricolon[TAB]|| ⁝
|-
| \nolinebreak[TAB]|| ⁠
|-
| \^0[TAB]|| ⁰
|-
| \^i[TAB]|| ⁱ
|-
| \^4[TAB]|| ⁴
|-
| \^5[TAB]|| ⁵
|-
| \^6[TAB]|| ⁶
|-
| \^7[TAB]|| ⁷
|-
| \^8[TAB]|| ⁸
|-
| \^9[TAB]|| ⁹
|-
| \^+[TAB]|| ⁺
|-
| \^-[TAB]|| ⁻
|-
| \^=[TAB]|| ⁼
|-
| \^([TAB]|| ⁽
|-
| \^)[TAB]|| ⁾
|-
| \^n[TAB]|| ⁿ
|-
| \_0[TAB]|| ₀
|-
| \_1[TAB]|| ₁
|-
| \_2[TAB]|| ₂
|-
| \_3[TAB]|| ₃
|-
| \_4[TAB]|| ₄
|-
| \_5[TAB]|| ₅
|-
| \_6[TAB]|| ₆
|-
| \_7[TAB]|| ₇
|-
| \_8[TAB]|| ₈
|-
| \_9[TAB]|| ₉
|-
| \_+[TAB]|| ₊
|-
| \_-[TAB]|| ₋
|-
| \_=[TAB]|| ₌
|-
| \_([TAB]|| ₍
|-
| \_)[TAB]|| ₎
|-
| \_a[TAB]|| ₐ
|-
| \_e[TAB]|| ₑ
|-
| \_o[TAB]|| ₒ
|-
| \_x[TAB]|| ₓ
|-
| \_schwa[TAB]|| ₔ
|-
| \_h[TAB]|| ₕ
|-
| \_k[TAB]|| ₖ
|-
| \_l[TAB]|| ₗ
|-
| \_m[TAB]|| ₘ
|-
| \_n[TAB]|| ₙ
|-
| \_p[TAB]|| ₚ
|-
| \_s[TAB]|| ₛ
|-
| \_t[TAB]|| ₜ
|-
| \peseta[TAB]|| ₧
|-
| \sheqel[TAB]|| ₪
|-
| \euro[TAB]|| €
|-
| \drachma[TAB]|| ₯
|-
| \peso[TAB]|| ₱
|-
| \guarani[TAB]|| ₲
|-
| \austral[TAB]|| ₳
|-
| \cedi[TAB]|| ₵
|-
| \tenge[TAB]|| ₸
|-
| \rupee[TAB]|| ₹
|-
| \mark[TAB]|| ₻
|-
| \manat[TAB]|| ₼
|-
| \ruouble[TAB]|| ₽
|-
| \lari[TAB]|| ₾
|-
| \baht[TAB]|| ₿
|-
| \asteraccent[TAB]|| ⃰
|-
| \bbC[TAB]|| ℂ
|-
| \eulerE[TAB]|| ℇ
|-
| \scrg[TAB]|| ℊ
|-
| \scrH[TAB]|| ℋ
|-
| \frakH[TAB]|| ℌ
|-
| \bbH[TAB]|| ℍ
|-
| \ith[TAB] \planck[TAB]|| ℎ
|-
| \plank2pi[TAB]|| ℏ
|-
| \srcll[TAB]|| ℐ
|-
| \frank[TAB]|| ℑ
|-
| \scrL[TAB]|| ℒ
|-
| \ell[TAB]|| ℓ
|-
| \bbN[TAB]|| ℕ
|-
| \numero[TAB]|| №
|-
| \bbP[TAB]|| ℙ
|-
| \bbQ[TAB]|| ℚ
|-
| \scr[TAB] || ℛ
|-
| \e[TAB] \frak[TAB] || ℜ
|-
| \bb[TAB] || ℝ
|-
| \prescription[TAB] || ℞
|-
| \TEL[TAB]|| ℡
|-
| \TM[TAB]|| ™
|-
| \bbZ[TAB]|| ℤ
|-
| \ohm[TAB]|| Ω
|-
| \mho[TAB]|| ℧
|-
| \frakZ[TAB]|| ℨ
|-
| \Angstrom[TAB]|| Å
|-
| \srcB[TAB]|| ℬ
|-
| \frakC[TAB]|| ℭ
|-
| \scrE[TAB]|| ℰ
|-
| \scrF[TAB]|| ℱ
|-
| \Finv[TAB]|| Ⅎ
|-
| \scrM[TAB]|| ℳ
|-
| \aleph[TAB]|| ℵ
|-
| \beth[TAB]|| ℶ
|-
| \gimel[TAB]|| ℷ
|-
| \dalet[TAB]|| ℸ
|-
| \info[TAB]|| ℹ
|-
| \bbpi[TAB]|| ℼ
|-
| \bbgamma[TAB]|| ℽ
|-
| \BbGamma[TAB]|| ℾ
|-
| \BbPi[TAB]|| ℿ
|-
| \bbsum[TAB]|| ⅀
|-
| \1/7[TAB]|| ⅐
|-
| \1/9[TAB]|| ⅑
|-
| \1/10[TAB]|| ⅒
|-
| \1/3[TAB]|| ⅓
|-
| \2/3[TAB]|| ⅔
|-
| \1/5[TAB]|| ⅕
|-
| \2/5[TAB]|| ⅖
|-
| \3/5[TAB]|| ⅗
|-
| \4/5[TAB]|| ⅘
|-
| \1/6[TAB]|| ⅙
|-
| \5/6[TAB]|| ⅚
|-
| \1/8[TAB]|| ⅛
|-
| \3/8[TAB]|| ⅜
|-
| \5/8[TAB]|| ⅝
|-
| \7/8[TAB]|| ⅞
|-
| \1/[TAB]|| ⅟
|-
| \larr[TAB] \leftarrow[TAB]|| ←
|-
| \uarr[TAB] \uparrow[TAB]|| ↑
|-
| \rarr[TAB] \rightarrow[TAB]|| →
|-
| \darr[TAB] \downarrow[TAB]|| ↓
|-
| \left[TAB] \ight[TAB] \lrarr[TAB]|| ↔
|-
| \updown[TAB] \udarr[TAB]|| ↕
|-
| \upleft[TAB]|| ↖
|-
| \upright[TAB]|| ↗
|-
| \downright[TAB]|| ↘
|-
| \downleft[TAB]|| ↙
|-
| \larrNot[TAB]|| ↚
|-
| \rarrNot[TAB]|| ↛
|-
| \larrWavy[TAB]|| ↜
|-
| \rarrWavy[TAB]|| ↝
|-
| \larr2headed[TAB]|| ↞
|-
| \uarr2headed[TAB]|| ↟
|-
| \rarr2headed[TAB]|| ↠
|-
| \darr2headed[TAB]|| ↡
|-
| \larrTail[TAB]|| ↢
|-
| \rarrTail[TAB]|| ↣
|-
| \mapsfrom[TAB]|| ↤
|-
| \mapsup[TAB]|| ↥
|-
| \mapsto[TAB]|| ↦
|-
| \mapsdown[TAB]|| ↧
|-
| \updownbar[TAB]|| ↨
|-
| \larrHook[TAB]|| ↩
|-
| \rarrHook[TAB]|| ↪
|-
| \larrLoop[TAB]|| ↫
|-
| \rarrLoop[TAB]|| ↬
|-
| \lrArrowSquiggly[TAB]|| ↭
|-
| \left[TAB] \ightNot[TAB]|| ↮
|-
| \darrZigZag[TAB]|| ↯
|-
| \larrCurve[TAB]|| ↶
|-
| \rarrCurve[TAB]|| ↷
|-
| \larrCircle[TAB]|| ↺
|-
| \rarrCircle[TAB]|| ↻
|-
| \leftHarpoonUp[TAB]|| ↼
|-
| \leftHarpoonDown[TAB]|| ↽
|-
| \upHarpoon[TAB] \ight[TAB]|| ↾
|-
| \upHarpoonLeft[TAB]|| ↿
|-
| \rightHarpoonUp[TAB]|| ⇀
|-
| \rightHarpoonDown[TAB]|| ⇁
|-
| \downHarpoon[TAB] \ight[TAB]|| ⇂
|-
| \downHarpoonLeft[TAB]|| ⇃
|-
| \rightLeftArrows[TAB]|| ⇄
|-
| \upDownArrows[TAB]|| ⇅
|-
| \left[TAB] \ightArrows[TAB]|| ⇆
|-
| \leftLeftArrows[TAB]|| ⇇
|-
| \upUpArrows[TAB]|| ⇈
|-
| \right[TAB] \ightArrows[TAB]|| ⇉
|-
| \downDownArrows[TAB]|| ⇊
|-
| \left[TAB] \ightHarpoons[TAB]|| ⇋
|-
| \ightLeftHarpoons[TAB]|| ⇌
|-
| \LarrNot[TAB]|| ⇍
|-
| \Left[TAB] \ightNot[TAB]|| ⇎
|-
| \arrNot[TAB]|| ⇏
|-
| \Larr[TAB] \LeftArrow[TAB]|| ⇐
|-
| \Uarr[TAB] \UpArrow[TAB]|| ⇑
|-
| \arr[TAB] \ightArrow[TAB]|| ⇒
|-
| \Darr[TAB] \DownArrow[TAB]|| ⇓
|-
| \Left[TAB] \ightArrow[TAB]|| ⇔
|-
| \UpDownArrow[TAB]|| ⇕
|-
| \NWarr[TAB]|| ⇖
|-
| \NEarr[TAB]|| ⇗
|-
| \SEarr[TAB]|| ⇘
|-
| \SWarr[TAB]|| ⇙
|-
| \LarrTriple[TAB]|| ⇚
|-
| \arrTriple[TAB]|| ⇛
|-
| \LarrHollow[TAB]|| ⇦
|-
| \UarrHollow[TAB]|| ⇧
|-
| \arrHollow[TAB]|| ⇨
|-
| \DarrHollow[TAB]|| ⇩
|-
| \ightThreeArrows[TAB]|| ⇶
|-
| \larrTriangle[TAB]|| ⇽
|-
| \rarrTriangle[TAB]|| ⇾
|-
| \lrArrTriangle[TAB]|| ⇿
|-
| \forall[TAB]|| ∀
|-
| \complement[TAB]|| ∁
|-
| \partial[TAB]|| ∂
|-
| \exists[TAB]|| ∃
|-
| \nexists[TAB]|| ∄
|-
| \emptyset[TAB]|| ∅
|-
| \increment[TAB]|| ∆
|-
| \nabla[TAB] \grad[TAB]|| ∇
|-
| \in[TAB]|| ∈
|-
| \notin[TAB]|| ∉
|-
| \smallin[TAB]|| ∊
|-
| \ni[TAB]|| ∋
|-
| \nni[TAB]|| ∌
|-
| \smallni[TAB]|| ∍
|-
| \qed[TAB]|| ∎
|-
| \prod[TAB]|| ∏
|-
| \coprod[TAB]|| ∐
|-
| \sum[TAB]|| ∑
|-
| \minus[TAB]|| −
|-
| \minusPlus[TAB]|| ∓
|-
| \dotPlus[TAB]|| ∔
|-
| \setMinus[TAB]|| ∖
|-
| \ast[TAB]|| ∗
|-
| \circ[TAB]|| ∘
|-
| \smallBullet[TAB]|| ∙
|-
| \sqrt[TAB] \surd[TAB]|| √
|-
| \cuberoot[TAB]|| ∛
|-
| \fourthroot[TAB]|| ∜
|-
| \proportional[TAB]|| ∝
|-
| \infinity[TAB]|| ∞
|-
| \rightAngle[TAB]|| ∟
|-
| \angle[TAB]|| ∠
|-
| \measuredAngle[TAB]|| ∡
|-
| \sphericalAngle[TAB]|| ∢
|-
| \goesInto[TAB]|| ∣
|-
| \nGoesInto[TAB]|| ∤
|-
| \parallel[TAB]|| ∥
|-
| \nparallel[TAB]|| ∦
|-
| \wedge[TAB]|| ∧
|-
| \vee[TAB]|| ∨
|-
| \cap[TAB] \intersect[TAB]|| ∩
|-
| \cup[TAB] \union[TAB]|| ∪
|-
| \int[TAB]|| ∫
|-
| \iint[TAB]|| ∬
|-
| \iiint[TAB]|| ∭
|-
| \oint[TAB]|| ∮
|-
| \oiint[TAB]|| ∯
|-
| \oiiint[TAB]|| ∰
|-
| \therefore[TAB]|| ∴
|-
| \because[TAB]|| ∵
|-
| \proportion[TAB]|| ∶
|-
| \dotminus[TAB]|| ∷
|-
| \sim[TAB]|| ∼
|-
| \backsim[TAB]|| ∽
|-
| \sinewave[TAB]|| ∿
|-
| \nsim[TAB]|| ≁
|-
| \eqsim[TAB]|| ≂
|-
| \simeq[TAB]|| ≃
|-
| \nsime[TAB]|| ≄
|-
| \cong[TAB]|| ≅
|-
| \approxNotEq[TAB]|| ≆
|-
| \ncong[TAB]|| ≇
|-
| \approx[TAB]|| ≈
|-
| \napprox[TAB]|| ≉
|-
| \approxEq[TAB]|| ≊
|-
| \dotEq[TAB]|| ≐
|-
| \dotEqDot[TAB]|| ≑
|-
| \colonEq[TAB]|| ≒
|-
| \eqColon[TAB]|| ≓
|-
| \circEq[TAB]|| ≗
|-
| \neq[TAB] \!=[TAB]|| ≠
|-
| \equiv[TAB]|| ≡
|-
| \nequiv[TAB]|| ≢
|-
| \equiv4[TAB]|| ≣
|-
| \le[TAB] \leq[TAB] \lte[TAB] \!<[TAB]|| ≤
|-
| \ge[TAB] \geq[TAB] \gte[TAB] \!>[TAB]|| ≥
|-
| \leqq[TAB]|| ≦
|-
| \geqq[TAB]|| ≧
|-
| \lneqq[TAB]|| ≨
|-
| \gneqq[TAB]|| ≩
|-
| \muchLessThan[TAB]|| ≪
|-
| \muchGreaterThan[TAB]|| ≫
|-
| \prec[TAB]|| ≺
|-
| \succ[TAB]|| ≻
|-
| \precEq[TAB]|| ≼
|-
| \succEq[TAB]|| ≽
|-
| \nprec[TAB]|| ⊀
|-
| \nsucc[TAB]|| ⊁
|-
| \subset[TAB]|| ⊂
|-
| \supset[TAB]|| ⊃
|-
| \nsubset[TAB]|| ⊄
|-
| \nsupset[TAB]|| ⊅
|-
| \subseteq[TAB]|| ⊆
|-
| \supseteq[TAB]|| ⊇
|-
| \nsubseteq[TAB]|| ⊈
|-
| \nsupseteq[TAB]|| ⊉
|-
| \subsetneq[TAB]|| ⊊
|-
| \supsetneq[TAB]|| ⊋
|-
| \oplus[TAB]|| ⊕
|-
| \ominus[TAB]|| ⊖
|-
| \otimes[TAB]|| ⊗
|-
| \oslash[TAB]|| ⊘
|-
| \odot[TAB]|| ⊙
|-
| \circledcirc[TAB]|| ⊚
|-
| \rtack[TAB]|| ⊢
|-
| \ltack[TAB]|| ⊣
|-
| \dtack[TAB]|| ⊤
|-
| \utack[TAB]|| ⊥
|-
| \models[TAB]|| ⊧
|-
| \doesNotProve[TAB]|| ⊬
|-
| \notTrue[TAB]|| ⊭
|-
| \bigwedge[TAB]|| ⋀
|-
| \bigvee[TAB]|| ⋁
|-
| \bigcap[TAB] \bigIntersect[TAB]|| ⋂
|-
| \bigcup[TAB] \bigUnion[TAB]|| ⋃
|-
| \diamond[TAB]|| ⋄
|-
| \cdot[TAB]|| ⋅
|-
| \star[TAB]|| ⋆
|-
| \divideontimes[TAB]|| ⋇
|-
| \bowtie[TAB]|| ⋈
|-
| \vdots[TAB]|| ⋮
|-
| \cdots[TAB]|| ⋯
|-
| \up[TAB] \ightEllipsis[TAB]|| ⋰
|-
| \diameter[TAB]|| ⌀
|-
| \lceil[TAB]|| ⌈
|-
| \rceil[TAB]|| ⌉
|-
| \lfloor[TAB]|| ⌊
|-
| \rfloor[TAB]|| ⌋
|-
| \checkmarkBoxedInv[TAB]|| ☑
|-
| \cancelXboxedSmall[TAB]|| ☒
|-
| \frownFace[TAB]|| ☹
|-
| \happyFace[TAB]|| ☺
|-
| \spadeSuit[TAB]|| ♠
|-
| \clubSuit[TAB]|| ♣
|-
| \heartSuit[TAB]|| ♥
|-
| \diamondSuit[TAB]|| ♦
|-
| \anchor[TAB]|| ⚓
|-
| \circleHollow[TAB]|| ⚪
|-
| \circleFilled[TAB]|| ⚫
|-
| \checkmarkBoxed[TAB]|| ✅
|-
| \hand[TAB]|| ✋
|-
| \checkmark[TAB]|| ✓
|-
| \checkmarkHeavy[TAB]|| ✔
|-
| \cancelX[TAB]|| ✕
|-
| \cancelXheavy[TAB]|| ✖
|-
| \cancelXitalic[TAB]|| ✗
|-
| \cancelXitalicHeavy[TAB]|| ✘
|-
| \bigTimes[TAB]|| ❌
|-
| \cancelXboxed[TAB]|| ❎
|-
| \_j[TAB]|| ⱼ
|-
| \^v[TAB]|| ⱽ
|}

Note: Your browser may add color to some characters in the above table. The character color in Analytica is based on the font color.

The character names are read from the initialization file <code>"characterNames.ini"</code>, located in the Analytica installation folder.

==History==
Introduced in [[Analytica 6.3]]

== See Also ==
* [[TextCharacterEncode]]: The <code>'characterName'</code> and <code>'-characterName'</code> options map from character to name and vise versa.
* [[Chr]] and [[Asc]]

Entering extended characters

2025-02-19T22:27:35Z

Klee2: /* How to type an extended character */ added note about text nodes

Sometimes you want to use a character that does not appear on your keyboard in the description and other text attributes of a variable or text box, and other object. You can use almost any kind character---bullet points, currencies, accents, arrows, math, Greek letters, checkmarks, and much more.

== How to type an extended character ==
{{Assista|key|Q: How do I type an extended character?}}

When entering an attribute value or cell value into Analytica, you can type the extended character by typing a backslash ( <code>\</code>), the character name, then the TAB key. Here are some examples (where [TAB] means press the TAB key):

::{| border="0"
! width=200px | You type !! You see
|-
| \euro[TAB] || €
|-
| \Omega[TAB] || Ω
|-
| \omega[TAB] || ω
|-
| \rarr[TAB] || →
|}

Some character names are sensitive to the upper/lower case of the first character (such as omega vs. Omega), but most are not. As you start typing a character name in an expression attribute, [[Expression Assist]] pops up with possible character name completions to help you.

If you know the hexadecimal code for the unicode character, you can enter it by typing backslash, plus, the hex code and [TAB]. For example,
::{| border="0"
! width=200px | You type !! You see
|-
| \+2bb9[TAB] || ⮹
|-
| \+27d6[TAB] || ⟖
|} Adding extended characters directly into text nodes will not work. However, as a workaround you can enter the extended characters into the definition of a variable node and copy the desired output into a text node.

== Character names ==

Here's a list of all the extended characters that you can type using their names:

{| border="0" style="cell-padding:5px"
! width=200px | You type !! You see
|-
| \![TAB] \exclamdown[TAB]|| ¡
|-
| \sterling[TAB]|| £
|-
| \yen[TAB]|| ¥
|-
| \brokenbar[TAB]|| ¦
|-
| \S[TAB]|| §
|-
| \copyright[TAB] \circledC[TAB]|| ©
|-
| \ordfemiminine[TAB]|| ª
|-
| \<<[TAB]|| «
|-
| \neg[TAB]|| ¬
|-
| \registered[TAB] \circled[TAB] || ®
|-
| \highminus[TAB]|| ¯
|-
| \deg[TAB]|| °
|-
| \pm[TAB] \plusMinus[TAB]|| ±
|-
| \^2[TAB]|| ²
|-
| \^3[TAB]|| ³
|-
| \micro[TAB]|| µ
|-
| \P[TAB]|| ¶
|-
| \middleDot[TAB]|| ·
|-
| \^1[TAB]|| ¹
|-
| \ordmasculine[TAB]|| º
|-
| \>>[TAB]|| »
|-
| \1/4[TAB]|| ¼
|-
| \1/2[TAB]|| ½
|-
| \3/4[TAB]|| ¾
|-
| \?[TAB] \questiondown[TAB]|| ¿
|-
| \A`[TAB]|| À
|-
| \A'[TAB]|| Á
|-
| \A^[TAB]|| Â
|-
| \A~[TAB]|| Ã
|-
| \A:[TAB]|| Ä
|-
| \Ao[TAB]|| Å
|-
| \AE[TAB]|| Æ
|-
| \C~[TAB]|| Ç
|-
| \E`[TAB]|| È
|-
| \E'[TAB]|| É
|-
| \E^[TAB]|| Ê
|-
| \E:[TAB]|| Ë
|-
| \I`[TAB]|| Ì
|-
| \I'[TAB]|| Í
|-
| \I^[TAB]|| Î
|-
| \I:[TAB]|| Ï
|-
| \DH[TAB]|| Ð
|-
| \N~[TAB]|| Ñ
|-
| \O`[TAB]|| Ò
|-
| \O'[TAB]|| Ó
|-
| \O^[TAB]|| Ô
|-
| \O~[TAB]|| Õ
|-
| \O:[TAB]|| Ö
|-
| \x[TAB]|| ×
|-
| \O[TAB] \empty[TAB]|| Ø
|-
| \U`[TAB]|| Ù
|-
| \U'[TAB]|| Ú
|-
| \U^[TAB]|| Û
|-
| \U:[TAB]|| Ü
|-
| \Y'[TAB]|| Ý
|-
| \TH[TAB]|| Þ
|-
| \ss[TAB]|| ß
|-
| \a`[TAB]|| à
|-
| \a'[TAB]|| á
|-
| \a^[TAB]|| â
|-
| \a~[TAB]|| ã
|-
| \a:[TAB]|| ä
|-
| \ao[TAB]|| å
|-
| \ae[TAB]|| æ
|-
| \c~[TAB]|| ç
|-
| \e`[TAB]|| è
|-
| \e'[TAB]|| é
|-
| \e^[TAB]|| ê
|-
| \e:[TAB]|| ë
|-
| \i`[TAB]|| ì
|-
| \i'[TAB]|| í
|-
| \i^[TAB]|| î
|-
| \i:[TAB]|| ï
|-
| \eth[TAB]|| ð
|-
| \n~[TAB]|| ñ
|-
| \o`[TAB]|| ò
|-
| \o'[TAB]|| ó
|-
| \o^[TAB]|| ô
|-
| \o~[TAB]|| õ
|-
| \o:[TAB]|| ö
|-
| \div[TAB]|| ÷
|-
| \o[TAB]|| ø
|-
| \u`[TAB]|| ù
|-
| \u'[TAB]|| ú
|-
| \u^[TAB]|| û
|-
| \u:[TAB]|| ü
|-
| \y'[TAB]|| ý
|-
| \th[TAB]|| þ
|-
| \y:[TAB]|| ÿ
|-
| \A^-[TAB]|| Ā
|-
| \a^-[TAB]|| ā
|-
| \C'[TAB]|| Ć
|-
| \c'[TAB]|| ć
|-
| \C^[TAB]|| Ĉ
|-
| \c^[TAB]|| ĉ
|-
| \C.[TAB]|| Ċ
|-
| \c.[TAB]|| ċ
|-
| \D-[TAB]|| Đ
|-
| \d-[TAB]|| đ
|-
| \E^-[TAB]|| Ē
|-
| \e^-[TAB]|| ē
|-
| \Hbar[TAB]|| Ħ
|-
| \hbar[TAB]|| ħ
|-
| \I^~[TAB]|| Ĩ
|-
| \imath[TAB]|| ı
|-
| \IJ[TAB]|| Ĳ
|-
| \ij[TAB]|| ĳ
|-
| \L[TAB]|| Ł
|-
| \l[TAB]|| ł
|-
| \ng[TAB]|| ŋ
|-
| \OE[TAB]|| Œ
|-
| \oe[TAB]|| œ
|-
| \hvlig[TAB]|| ƕ
|-
| \nrleg[TAB]|| ƞ
|-
| \Zbar[TAB]|| Ƶ
|-
| \zbar[TAB]|| ƶ
|-
| \doublepipe[TAB]|| ǂ
|-
| \schwa[TAB]|| ə
|-
| \pgamma[TAB]|| ɣ
|-
| \pbgam[TAB]|| ɤ
|-
| \clomeg[TAB]|| ɷ
|-
| \esh[TAB]|| ʃ
|-
| \trnt[TAB]|| ʇ
|-
| \rtlt[TAB]|| ʈ
|-
| \invv[TAB]|| ʌ
|-
| \invw[TAB]|| ʍ
|-
| \trny[TAB]|| ʎ
|-
| \acute[TAB]|| ́
|-
| \hat[TAB]|| ̂
|-
| \tilde[TAB]|| ̃
|-
| \bar[TAB]|| ̄
|-
| \overbar[TAB]|| ̅
|-
| \breve[TAB]|| ̆
|-
| \dot[TAB]|| ̇
|-
| \ddot[TAB]|| ̈
|-
| \ovhook[TAB]|| ̉
|-
| \ocirc[TAB]|| ̊
|-
| \''[TAB]|| ̋
|-
| \Alpha[TAB]|| Α
|-
| \Beta[TAB]|| Β
|-
| \Gamma[TAB]|| Γ
|-
| \Delta[TAB]|| Δ
|-
| \Epsilon[TAB]|| Ε
|-
| \Zeta[TAB]|| Ζ
|-
| \Eta[TAB]|| Η
|-
| \Theta[TAB]|| Θ
|-
| \Iota[TAB]|| Ι
|-
| \Kappa[TAB]|| Κ
|-
| \Lambda[TAB]|| Λ
|-
| \Mu[TAB]|| Μ
|-
| \Nu[TAB]|| Ν
|-
| \Xi[TAB]|| Ξ
|-
| \Omicron[TAB]|| Ο
|-
| \Pi[TAB]|| Π
|-
| \ho[TAB]|| Ρ
|-
| \Sigma[TAB]|| Σ
|-
| \Tau[TAB]|| Τ
|-
| \Upsilon[TAB]|| Υ
|-
| \Phi[TAB]|| Φ
|-
| \Chi[TAB]|| Χ
|-
| \Psi[TAB]|| Ψ
|-
| \Omega[TAB]|| Ω
|-
| \alpha[TAB]|| α
|-
| \beta[TAB]|| β
|-
| \gamma[TAB]|| γ
|-
| \delta[TAB]|| δ
|-
| \varepsilon[TAB]|| ε
|-
| \zeta[TAB]|| ζ
|-
| \eta[TAB]|| η
|-
| \theta[TAB]|| θ
|-
| \iota[TAB]|| ι
|-
| \kappa[TAB]|| κ
|-
| \lambda[TAB]|| λ
|-
| \mu[TAB]|| μ
|-
| \nu[TAB]|| ν
|-
| \xi[TAB]|| ξ
|-
| \omicron[TAB]|| ο
|-
| \pi[TAB]|| π
|-
| \rho[TAB]|| ρ
|-
| \varsigma[TAB]|| ς
|-
| \sigma[TAB]|| σ
|-
| \tau[TAB]|| τ
|-
| \upsilon[TAB]|| υ
|-
| \varphi[TAB]|| φ
|-
| \chi[TAB]|| χ
|-
| \psi[TAB]|| ψ
|-
| \omega[TAB]|| ω
|-
| \varbeta[TAB]|| ϐ
|-
| \vartheta[TAB]|| ϑ
|-
| \phi[TAB]|| ϕ
|-
| \omegapi[TAB]|| ϖ
|-
| \Koppa[TAB]|| Ϟ
|-
| \koppa[TAB]|| ϟ
|-
| \varkappa[TAB]|| ϰ
|-
| \varrho[TAB]|| ϱ
|-
| \VarTheta[TAB]|| ϴ
|-
| \epsilon[TAB]|| ϵ
|-
| \backepsilon[TAB]|| ϶
|-
| \^A[TAB]|| ᴬ
|-
| \^AE[TAB]|| ᴭ
|-
| \^B[TAB]|| ᴮ
|-
| \^D[TAB]|| ᴰ
|-
| \^E[TAB]|| ᴱ
|-
| \^G[TAB]|| ᴳ
|-
| \^H[TAB]|| ᴴ
|-
| \^I[TAB]|| ᴵ
|-
| \^J[TAB]|| ᴶ
|-
| \^K[TAB]|| ᴷ
|-
| \^L[TAB]|| ᴸ
|-
| \^M[TAB]|| ᴹ
|-
| \^N[TAB]|| ᴺ
|-
| \^O[TAB]|| ᴼ
|-
| \^P[TAB]|| ᴾ
|-
| \^[TAB] || ᴿ
|-
| \^T[TAB]|| ᵀ
|-
| \^U[TAB]|| ᵁ
|-
| \^W[TAB]|| ᵂ
|-
| \^a[TAB]|| ᵃ
|-
| \^alpha[TAB]|| ᵅ
|-
| \^b[TAB]|| ᵇ
|-
| \^d[TAB]|| ᵈ
|-
| \^e[TAB]|| ᵉ
|-
| \^epsilon[TAB]|| ᵋ
|-
| \^g[TAB]|| ᵍ
|-
| \^k[TAB]|| ᵏ
|-
| \^m[TAB]|| ᵐ
|-
| \^o[TAB]|| ᵒ
|-
| \^p[TAB]|| ᵖ
|-
| \^t[TAB]|| ᵗ
|-
| \^u[TAB]|| ᵘ
|-
| \^v[TAB]|| ᵛ
|-
| \^beta[TAB]|| ᵝ
|-
| \^gamma[TAB]|| ᵞ
|-
| \^delta[TAB]|| ᵟ
|-
| \^phi[TAB]|| ᵠ
|-
| \^chi[TAB]|| ᵡ
|-
| \_i[TAB]|| ᵢ
|-
| \_r[TAB]|| ᵣ
|-
| \_u[TAB]|| ᵤ
|-
| \_v[TAB]|| ᵥ
|-
| \_beta[TAB]|| ᵦ
|-
| \_gamma[TAB]|| ᵧ
|-
| \_rho[TAB]|| ᵨ
|-
| \_phi[TAB]|| ᵩ
|-
| \_chi[TAB]|| ᵪ
|-
| \enspace[TAB]||  
|-
| \emspace[TAB]||  
|-
| \thickspace[TAB]||  
|-
| \thinspace[TAB]||  
|-
| \hspace[TAB]||  
|-
| \endash[TAB]|| –
|-
| \emdash[TAB]|| —
|-
| \dvertbar[TAB]|| ‖
|-
| \_dhoriz[TAB]|| ‗
|-
| \leftdquote[TAB]|| “
|-
| \rightdquote[TAB]|| ”
|-
| \dagger[TAB]|| †
|-
| \ddagger[TAB]|| ‡
|-
| \bullet[TAB]|| •
|-
| \ellipsis[TAB] \dots[TAB] \...[TAB]|| …
|-
| \perthousand[TAB]|| ‰
|-
| \pertenthousand[TAB]|| ‱
|-
| \prime[TAB]|| ′
|-
| \pprime[TAB]|| ″
|-
| \ppprime[TAB]|| ‴
|-
| \backprime[TAB]|| ‵
|-
| \backpprime[TAB]|| ‶
|-
| \backppprime[TAB]|| ‷
|-
| \!![TAB]|| ‼
|-
| \!?[TAB]|| ‽
|-
| \pppprime[TAB]|| ⁗
|-
| \vertellipsis[TAB] \tricolon[TAB]|| ⁝
|-
| \nolinebreak[TAB]|| ⁠
|-
| \^0[TAB]|| ⁰
|-
| \^i[TAB]|| ⁱ
|-
| \^4[TAB]|| ⁴
|-
| \^5[TAB]|| ⁵
|-
| \^6[TAB]|| ⁶
|-
| \^7[TAB]|| ⁷
|-
| \^8[TAB]|| ⁸
|-
| \^9[TAB]|| ⁹
|-
| \^+[TAB]|| ⁺
|-
| \^-[TAB]|| ⁻
|-
| \^=[TAB]|| ⁼
|-
| \^([TAB]|| ⁽
|-
| \^)[TAB]|| ⁾
|-
| \^n[TAB]|| ⁿ
|-
| \_0[TAB]|| ₀
|-
| \_1[TAB]|| ₁
|-
| \_2[TAB]|| ₂
|-
| \_3[TAB]|| ₃
|-
| \_4[TAB]|| ₄
|-
| \_5[TAB]|| ₅
|-
| \_6[TAB]|| ₆
|-
| \_7[TAB]|| ₇
|-
| \_8[TAB]|| ₈
|-
| \_9[TAB]|| ₉
|-
| \_+[TAB]|| ₊
|-
| \_-[TAB]|| ₋
|-
| \_=[TAB]|| ₌
|-
| \_([TAB]|| ₍
|-
| \_)[TAB]|| ₎
|-
| \_a[TAB]|| ₐ
|-
| \_e[TAB]|| ₑ
|-
| \_o[TAB]|| ₒ
|-
| \_x[TAB]|| ₓ
|-
| \_schwa[TAB]|| ₔ
|-
| \_h[TAB]|| ₕ
|-
| \_k[TAB]|| ₖ
|-
| \_l[TAB]|| ₗ
|-
| \_m[TAB]|| ₘ
|-
| \_n[TAB]|| ₙ
|-
| \_p[TAB]|| ₚ
|-
| \_s[TAB]|| ₛ
|-
| \_t[TAB]|| ₜ
|-
| \peseta[TAB]|| ₧
|-
| \sheqel[TAB]|| ₪
|-
| \euro[TAB]|| €
|-
| \drachma[TAB]|| ₯
|-
| \peso[TAB]|| ₱
|-
| \guarani[TAB]|| ₲
|-
| \austral[TAB]|| ₳
|-
| \cedi[TAB]|| ₵
|-
| \tenge[TAB]|| ₸
|-
| \rupee[TAB]|| ₹
|-
| \mark[TAB]|| ₻
|-
| \manat[TAB]|| ₼
|-
| \ruouble[TAB]|| ₽
|-
| \lari[TAB]|| ₾
|-
| \baht[TAB]|| ₿
|-
| \asteraccent[TAB]|| ⃰
|-
| \bbC[TAB]|| ℂ
|-
| \eulerE[TAB]|| ℇ
|-
| \scrg[TAB]|| ℊ
|-
| \scrH[TAB]|| ℋ
|-
| \frakH[TAB]|| ℌ
|-
| \bbH[TAB]|| ℍ
|-
| \ith[TAB] \planck[TAB]|| ℎ
|-
| \plank2pi[TAB]|| ℏ
|-
| \srcll[TAB]|| ℐ
|-
| \frank[TAB]|| ℑ
|-
| \scrL[TAB]|| ℒ
|-
| \ell[TAB]|| ℓ
|-
| \bbN[TAB]|| ℕ
|-
| \numero[TAB]|| №
|-
| \bbP[TAB]|| ℙ
|-
| \bbQ[TAB]|| ℚ
|-
| \scr[TAB] || ℛ
|-
| \e[TAB] \frak[TAB] || ℜ
|-
| \bb[TAB] || ℝ
|-
| \prescription[TAB] || ℞
|-
| \TEL[TAB]|| ℡
|-
| \TM[TAB]|| ™
|-
| \bbZ[TAB]|| ℤ
|-
| \ohm[TAB]|| Ω
|-
| \mho[TAB]|| ℧
|-
| \frakZ[TAB]|| ℨ
|-
| \Angstrom[TAB]|| Å
|-
| \srcB[TAB]|| ℬ
|-
| \frakC[TAB]|| ℭ
|-
| \scrE[TAB]|| ℰ
|-
| \scrF[TAB]|| ℱ
|-
| \Finv[TAB]|| Ⅎ
|-
| \scrM[TAB]|| ℳ
|-
| \aleph[TAB]|| ℵ
|-
| \beth[TAB]|| ℶ
|-
| \gimel[TAB]|| ℷ
|-
| \dalet[TAB]|| ℸ
|-
| \info[TAB]|| ℹ
|-
| \bbpi[TAB]|| ℼ
|-
| \bbgamma[TAB]|| ℽ
|-
| \BbGamma[TAB]|| ℾ
|-
| \BbPi[TAB]|| ℿ
|-
| \bbsum[TAB]|| ⅀
|-
| \1/7[TAB]|| ⅐
|-
| \1/9[TAB]|| ⅑
|-
| \1/10[TAB]|| ⅒
|-
| \1/3[TAB]|| ⅓
|-
| \2/3[TAB]|| ⅔
|-
| \1/5[TAB]|| ⅕
|-
| \2/5[TAB]|| ⅖
|-
| \3/5[TAB]|| ⅗
|-
| \4/5[TAB]|| ⅘
|-
| \1/6[TAB]|| ⅙
|-
| \5/6[TAB]|| ⅚
|-
| \1/8[TAB]|| ⅛
|-
| \3/8[TAB]|| ⅜
|-
| \5/8[TAB]|| ⅝
|-
| \7/8[TAB]|| ⅞
|-
| \1/[TAB]|| ⅟
|-
| \larr[TAB] \leftarrow[TAB]|| ←
|-
| \uarr[TAB] \uparrow[TAB]|| ↑
|-
| \rarr[TAB] \rightarrow[TAB]|| →
|-
| \darr[TAB] \downarrow[TAB]|| ↓
|-
| \left[TAB] \ight[TAB] \lrarr[TAB]|| ↔
|-
| \updown[TAB] \udarr[TAB]|| ↕
|-
| \upleft[TAB]|| ↖
|-
| \upright[TAB]|| ↗
|-
| \downright[TAB]|| ↘
|-
| \downleft[TAB]|| ↙
|-
| \larrNot[TAB]|| ↚
|-
| \rarrNot[TAB]|| ↛
|-
| \larrWavy[TAB]|| ↜
|-
| \rarrWavy[TAB]|| ↝
|-
| \larr2headed[TAB]|| ↞
|-
| \uarr2headed[TAB]|| ↟
|-
| \rarr2headed[TAB]|| ↠
|-
| \darr2headed[TAB]|| ↡
|-
| \larrTail[TAB]|| ↢
|-
| \rarrTail[TAB]|| ↣
|-
| \mapsfrom[TAB]|| ↤
|-
| \mapsup[TAB]|| ↥
|-
| \mapsto[TAB]|| ↦
|-
| \mapsdown[TAB]|| ↧
|-
| \updownbar[TAB]|| ↨
|-
| \larrHook[TAB]|| ↩
|-
| \rarrHook[TAB]|| ↪
|-
| \larrLoop[TAB]|| ↫
|-
| \rarrLoop[TAB]|| ↬
|-
| \lrArrowSquiggly[TAB]|| ↭
|-
| \left[TAB] \ightNot[TAB]|| ↮
|-
| \darrZigZag[TAB]|| ↯
|-
| \larrCurve[TAB]|| ↶
|-
| \rarrCurve[TAB]|| ↷
|-
| \larrCircle[TAB]|| ↺
|-
| \rarrCircle[TAB]|| ↻
|-
| \leftHarpoonUp[TAB]|| ↼
|-
| \leftHarpoonDown[TAB]|| ↽
|-
| \upHarpoon[TAB] \ight[TAB]|| ↾
|-
| \upHarpoonLeft[TAB]|| ↿
|-
| \rightHarpoonUp[TAB]|| ⇀
|-
| \rightHarpoonDown[TAB]|| ⇁
|-
| \downHarpoon[TAB] \ight[TAB]|| ⇂
|-
| \downHarpoonLeft[TAB]|| ⇃
|-
| \rightLeftArrows[TAB]|| ⇄
|-
| \upDownArrows[TAB]|| ⇅
|-
| \left[TAB] \ightArrows[TAB]|| ⇆
|-
| \leftLeftArrows[TAB]|| ⇇
|-
| \upUpArrows[TAB]|| ⇈
|-
| \right[TAB] \ightArrows[TAB]|| ⇉
|-
| \downDownArrows[TAB]|| ⇊
|-
| \left[TAB] \ightHarpoons[TAB]|| ⇋
|-
| \ightLeftHarpoons[TAB]|| ⇌
|-
| \LarrNot[TAB]|| ⇍
|-
| \Left[TAB] \ightNot[TAB]|| ⇎
|-
| \arrNot[TAB]|| ⇏
|-
| \Larr[TAB] \LeftArrow[TAB]|| ⇐
|-
| \Uarr[TAB] \UpArrow[TAB]|| ⇑
|-
| \arr[TAB] \ightArrow[TAB]|| ⇒
|-
| \Darr[TAB] \DownArrow[TAB]|| ⇓
|-
| \Left[TAB] \ightArrow[TAB]|| ⇔
|-
| \UpDownArrow[TAB]|| ⇕
|-
| \NWarr[TAB]|| ⇖
|-
| \NEarr[TAB]|| ⇗
|-
| \SEarr[TAB]|| ⇘
|-
| \SWarr[TAB]|| ⇙
|-
| \LarrTriple[TAB]|| ⇚
|-
| \arrTriple[TAB]|| ⇛
|-
| \LarrHollow[TAB]|| ⇦
|-
| \UarrHollow[TAB]|| ⇧
|-
| \arrHollow[TAB]|| ⇨
|-
| \DarrHollow[TAB]|| ⇩
|-
| \ightThreeArrows[TAB]|| ⇶
|-
| \larrTriangle[TAB]|| ⇽
|-
| \rarrTriangle[TAB]|| ⇾
|-
| \lrArrTriangle[TAB]|| ⇿
|-
| \forall[TAB]|| ∀
|-
| \complement[TAB]|| ∁
|-
| \partial[TAB]|| ∂
|-
| \exists[TAB]|| ∃
|-
| \nexists[TAB]|| ∄
|-
| \emptyset[TAB]|| ∅
|-
| \increment[TAB]|| ∆
|-
| \nabla[TAB] \grad[TAB]|| ∇
|-
| \in[TAB]|| ∈
|-
| \notin[TAB]|| ∉
|-
| \smallin[TAB]|| ∊
|-
| \ni[TAB]|| ∋
|-
| \nni[TAB]|| ∌
|-
| \smallni[TAB]|| ∍
|-
| \qed[TAB]|| ∎
|-
| \prod[TAB]|| ∏
|-
| \coprod[TAB]|| ∐
|-
| \sum[TAB]|| ∑
|-
| \minus[TAB]|| −
|-
| \minusPlus[TAB]|| ∓
|-
| \dotPlus[TAB]|| ∔
|-
| \setMinus[TAB]|| ∖
|-
| \ast[TAB]|| ∗
|-
| \circ[TAB]|| ∘
|-
| \smallBullet[TAB]|| ∙
|-
| \sqrt[TAB] \surd[TAB]|| √
|-
| \cuberoot[TAB]|| ∛
|-
| \fourthroot[TAB]|| ∜
|-
| \proportional[TAB]|| ∝
|-
| \infinity[TAB]|| ∞
|-
| \rightAngle[TAB]|| ∟
|-
| \angle[TAB]|| ∠
|-
| \measuredAngle[TAB]|| ∡
|-
| \sphericalAngle[TAB]|| ∢
|-
| \goesInto[TAB]|| ∣
|-
| \nGoesInto[TAB]|| ∤
|-
| \parallel[TAB]|| ∥
|-
| \nparallel[TAB]|| ∦
|-
| \wedge[TAB]|| ∧
|-
| \vee[TAB]|| ∨
|-
| \cap[TAB] \intersect[TAB]|| ∩
|-
| \cup[TAB] \union[TAB]|| ∪
|-
| \int[TAB]|| ∫
|-
| \iint[TAB]|| ∬
|-
| \iiint[TAB]|| ∭
|-
| \oint[TAB]|| ∮
|-
| \oiint[TAB]|| ∯
|-
| \oiiint[TAB]|| ∰
|-
| \therefore[TAB]|| ∴
|-
| \because[TAB]|| ∵
|-
| \proportion[TAB]|| ∶
|-
| \dotminus[TAB]|| ∷
|-
| \sim[TAB]|| ∼
|-
| \backsim[TAB]|| ∽
|-
| \sinewave[TAB]|| ∿
|-
| \nsim[TAB]|| ≁
|-
| \eqsim[TAB]|| ≂
|-
| \simeq[TAB]|| ≃
|-
| \nsime[TAB]|| ≄
|-
| \cong[TAB]|| ≅
|-
| \approxNotEq[TAB]|| ≆
|-
| \ncong[TAB]|| ≇
|-
| \approx[TAB]|| ≈
|-
| \napprox[TAB]|| ≉
|-
| \approxEq[TAB]|| ≊
|-
| \dotEq[TAB]|| ≐
|-
| \dotEqDot[TAB]|| ≑
|-
| \colonEq[TAB]|| ≒
|-
| \eqColon[TAB]|| ≓
|-
| \circEq[TAB]|| ≗
|-
| \neq[TAB] \!=[TAB]|| ≠
|-
| \equiv[TAB]|| ≡
|-
| \nequiv[TAB]|| ≢
|-
| \equiv4[TAB]|| ≣
|-
| \le[TAB] \leq[TAB] \lte[TAB] \!<[TAB]|| ≤
|-
| \ge[TAB] \geq[TAB] \gte[TAB] \!>[TAB]|| ≥
|-
| \leqq[TAB]|| ≦
|-
| \geqq[TAB]|| ≧
|-
| \lneqq[TAB]|| ≨
|-
| \gneqq[TAB]|| ≩
|-
| \muchLessThan[TAB]|| ≪
|-
| \muchGreaterThan[TAB]|| ≫
|-
| \prec[TAB]|| ≺
|-
| \succ[TAB]|| ≻
|-
| \precEq[TAB]|| ≼
|-
| \succEq[TAB]|| ≽
|-
| \nprec[TAB]|| ⊀
|-
| \nsucc[TAB]|| ⊁
|-
| \subset[TAB]|| ⊂
|-
| \supset[TAB]|| ⊃
|-
| \nsubset[TAB]|| ⊄
|-
| \nsupset[TAB]|| ⊅
|-
| \subseteq[TAB]|| ⊆
|-
| \supseteq[TAB]|| ⊇
|-
| \nsubseteq[TAB]|| ⊈
|-
| \nsupseteq[TAB]|| ⊉
|-
| \subsetneq[TAB]|| ⊊
|-
| \supsetneq[TAB]|| ⊋
|-
| \oplus[TAB]|| ⊕
|-
| \ominus[TAB]|| ⊖
|-
| \otimes[TAB]|| ⊗
|-
| \oslash[TAB]|| ⊘
|-
| \odot[TAB]|| ⊙
|-
| \circledcirc[TAB]|| ⊚
|-
| \rtack[TAB]|| ⊢
|-
| \ltack[TAB]|| ⊣
|-
| \dtack[TAB]|| ⊤
|-
| \utack[TAB]|| ⊥
|-
| \models[TAB]|| ⊧
|-
| \doesNotProve[TAB]|| ⊬
|-
| \notTrue[TAB]|| ⊭
|-
| \bigwedge[TAB]|| ⋀
|-
| \bigvee[TAB]|| ⋁
|-
| \bigcap[TAB] \bigIntersect[TAB]|| ⋂
|-
| \bigcup[TAB] \bigUnion[TAB]|| ⋃
|-
| \diamond[TAB]|| ⋄
|-
| \cdot[TAB]|| ⋅
|-
| \star[TAB]|| ⋆
|-
| \divideontimes[TAB]|| ⋇
|-
| \bowtie[TAB]|| ⋈
|-
| \vdots[TAB]|| ⋮
|-
| \cdots[TAB]|| ⋯
|-
| \up[TAB] \ightEllipsis[TAB]|| ⋰
|-
| \diameter[TAB]|| ⌀
|-
| \lceil[TAB]|| ⌈
|-
| \rceil[TAB]|| ⌉
|-
| \lfloor[TAB]|| ⌊
|-
| \rfloor[TAB]|| ⌋
|-
| \checkmarkBoxedInv[TAB]|| ☑
|-
| \cancelXboxedSmall[TAB]|| ☒
|-
| \frownFace[TAB]|| ☹
|-
| \happyFace[TAB]|| ☺
|-
| \spadeSuit[TAB]|| ♠
|-
| \clubSuit[TAB]|| ♣
|-
| \heartSuit[TAB]|| ♥
|-
| \diamondSuit[TAB]|| ♦
|-
| \anchor[TAB]|| ⚓
|-
| \circleHollow[TAB]|| ⚪
|-
| \circleFilled[TAB]|| ⚫
|-
| \checkmarkBoxed[TAB]|| ✅
|-
| \hand[TAB]|| ✋
|-
| \checkmark[TAB]|| ✓
|-
| \checkmarkHeavy[TAB]|| ✔
|-
| \cancelX[TAB]|| ✕
|-
| \cancelXheavy[TAB]|| ✖
|-
| \cancelXitalic[TAB]|| ✗
|-
| \cancelXitalicHeavy[TAB]|| ✘
|-
| \bigTimes[TAB]|| ❌
|-
| \cancelXboxed[TAB]|| ❎
|-
| \_j[TAB]|| ⱼ
|-
| \^v[TAB]|| ⱽ
|}

Note: Your browser may add color to some characters in the above table. The character color in Analytica is based on the font color.

The character names are read from the initialization file <code>"characterNames.ini"</code>, located in the Analytica installation folder.

==History==
Introduced in [[Analytica 6.3]]

== See Also ==
* [[TextCharacterEncode]]: The <code>'characterName'</code> and <code>'-characterName'</code> options map from character to name and vise versa.
* [[Chr]] and [[Asc]]

MultiChoice

2025-02-05T20:55:16Z

Klee2: Added new sections for pictures and filtering

[[Category:Functions that select part of an array]]
[[Category:Top level functions]]
[[Category: Menus]]
[[Category:User-interface functions]]
[[Category:Analytica 5.0]]
{{ReleaseBar}}

''New to [[Analytica 5.0]]''

== MultiChoice( <code>I</code>'', n..., allowNone, separator, returnList, returnSet{{Release|6.4||, labels, selectionLabels, nestUnder}}'' ) ==

[[image:MultiChoice popup.png|frame|A user-input control showing the [[MultiChoice]] popup with separators and multiple items selected.]]

[[MultiChoice]] creates a user-input control that lets you select one, none, some, or All from a list of options, unlike the similar [[Choice]] control that lets you select only one or All. It returns the list of selected options. [[MultiChoice]] must appear as the top-level of a [[Definition]] or in a [[Table]]. In a [[Table]], it returns a [[Sets - collections of unique elements|Set]] -- a [[reference]] to a list of the selected values,

It doesn't work as a user input when the legacy [[Preferences|Preference setting]] '''Domain acts as self index''' is on.

=== Parameters ===

* «<code>I</code>»: Either an index identifier, or the keyword [[Self]]. When it is an index identifier, the index elements are the possible options. When the keyword [[Self]] is used, the possible options are obtained from the [[Domain]].
* «n»: The currently selected options, listed by position. For example, <code>MultiChoice( I, 2, 3, 7 )</code> records that the 2nd, 3rd, and 7th items are selected.
* «allowNone»: (Optional) A Boolean that specifies whether the empty selection is allowed. By default, the empty selection is disallowed. To allow the empty selection, use named-parameter syntax, e.g., <code>MultiChoice(Self, allowNone:True)</code>. When the empty selection is disallowed and «n» contains no valid options, the first item is returned.
* «separator»: (Optional) When an element in the list of options matches the value specified here, it displays as a non-selectable separator (a horizontal line between items).
* «returnList»: (Optional) When true, returns a list even when a single item is selected. It that case, the result is a one-element list. This is useful when you define an index with the Multichoice. When «returnList» is false or omitted, «returnSet» is not true, and only a single item is selected, then the single item is returned.
* «returnSet»: (Optional) When true, returns a reference to a list (i.e., a [[Set Functions|set]]). When [[MultiChoice]] appears in a table cell, this is the default, since it avoids the combination of dimensions from every cell with a multichoice selector.{{Release|6.4||
* «labels»: (Optional) The values that appears on the popup menu (or as the selected value on the control if «selectionLabels» isn't also specified). Use this parameter if you want these to be different from the index values (the result). This should be indexed by «<code>I</code>», or can be a list when using a Self-choice. These can be (thumbnail) images.
* «selectionLabels»: (Optional) The values that you want to appear in the control as the selected value. This should be indexed by «<code>I</code>», or can be a list when using a Self-choice. Specify this when you want this to be different from «labels». These can be (thumbnail) images.
* «nestUnder»: (Optional) A 1-D array indexed by «<code>I</code>» of submenu names (or Null). When specified, the options are organized hierarchically as submenus. Multiple submenu levels can be separated by the '>' character, for example <code>"California > Santa Clara Co."</code> would place the corresponding item two levels deep.}}

== Examples ==

In these examples, the index <code>Option</code> contains the possible choices.
:<code>Index Option := ['Apple', 'Pear', 'Orange']</code>

A Multichoice with one option selected returns the value of that option:
:<code>MultiChoice(Option, 3) → 'Orange'</code>

A Multichoice with multiple options selected returns the values of those options as a list, indexed by the variable containing the Multichoice:
:<code>MultiChoice(Option, 1, 3) → ['Apple', 'Orange']</code>

A Multichoice with no options selected returns the first item by default:
:<code>MultiChoice(Option) → </code>

Unless you specify optional parameter «allowNone» as True, in which case it lets the user choose no option, and returns an empty list indexed by the variable containing the Multichoice:
:<code>MultiChoice(Option, allowNone: True) → []</code>

In this case, the options come from the variable or index's own [[Domain]]. Two items are selected.
:<code>MultiChoice(Self, 7,12)</code>

This example uses separators, specified as '--', to group the options. Currently <code>'cherry'</code>, <code>'egg plant'</code> and <code>'peanut'</code> are selected.
:Index Produce_item := <code>['apple', 'banana', 'cherry', '--', 'egg plant', 'lettuce', 'squash', '--', 'almond', 'peanut', 'walnut']</code>
:Domain of Produce := {Copy from index} <code>Produce_item</code>
:Index Produce := <code>[[MultiChoice]]( Self, 3, 5, 10, separator:'--' )</code>

:::[[image:MultiChoice popup.png]]

== Using the MultiChoice control ==

Usually, if you define a variable or index to be a [[MultiChoice]], you will create an input node for that variable. The input node then displays the control on your diagram. The control looks pretty much the same as a [[Choice]] control. When a single item is selected, the selected item appears in the control. When multiple items are selected, the control displays '''«Multiple»''' or '''«All»''', and if no items are selected, it displays '''«None»'''.

When you click on the control, the list of options pops up. Keyboard actions include:
* [ESC] key: Cancels the current input and closes the popup, restoring the original selection.
* [Enter] key: Closes the popup, accepting the current selections.
* [Up] and [Down] arrows: Moves the highlighted selection (no impact on which items are selected).
* [Space] key: Toggles the highlighted selection. Leaves popup open.
* [Ctrl+A]: Selects all, or if all options are already selected, deselects all (but leaves one selected if «allowNone» is not on).
Mouse actions include:
* Click on item: Toggles item. Leaves popup open.
* Click outside the control: Accepts selections and closes popup.
* Click - drag - release: Select or deselect several items. The item where the mouse down occurs determines whether the drag selects or deselects.

When «allowNone» is not on, the actions that toggle the selection state will not deselect the last selected item.

== Details ==

==== Handles ====
When the options are [[handles]] to variables (or other objects), it shows the [[Title]] or [[Identifier]] of each object in the menu (as with [[Choice]]) and returns the [[handle]], not the value of the variable.

==== Pictures in MultiChoice ====
You can use pictures as MultiChoice options by using an Index with pictures in it. For more information on how to do this, see [https://docs.analytica.com/index.php/Choice#Pictures_in_Choice_nodes Pictures in Choice nodes].

==== Filtering long MultiChoice lists (ACP) ====
In ACP, when you open a MultiChoice menu that has more than 10 options, it automatically adds a filter box at the top of the menu. As you type into the box, it automatically shortens the menu showing only options that match what you have typed. where the user can enter text to filter the list, like so:

[[image:choicefilter.png|link=Special:FilePath/Choicefilter.png|alt=|frameless|314x314px]]

Note that this feature is only available in ACP, not (yet) in Desktop Analytica.

== See Also ==
* [[Choice]]
* [[Choice menu user input]]
* [[Choice menus and Checkboxes in an edit table]]
* [http://lumina.com/blog/analytica-5-video-shorts-multichoice-controls Analytica 5 Video Short: MultiChoice controls] on blog (or watch on [https://youtu.be/g9xpsW0cH4o YouTube])
* [[Checkbox]]
* [[Preferences]]

Choice

2025-02-05T19:18:07Z

Klee2: /* Filtering long Choice lists (ACP) */

[[Category:Functions that select part of an array]]
[[Category:Top level functions]]
[[Category: Menus]]
[[Category:User-interface functions]]
{{ReleaseBar}}

== Choice(i, n) ==
[[Choice]] displays a drop-down menu to allow an end user to select from a list of options. The index «i» is the list of options -- an index containing the values appearing on the popup. When <code>I: Self</code>, the values listed in the variable's domain are used. «N» is the position of the currently selected option in that list, or 0 for ''All''. This should always be an explicit integer, not an expression.

When the user selects a different option, it changes the value of «n». You can use Choice to provide a menu as the definition of a variable or in a cell of an Edit table (or [[ProbTable]] or [[DetermTable]]). [[Choice]] must be the top level of the definition or the cell, and may not be nested within an expression. You must create an Input node for the variable before it will display choices as menus.

When a user changes the selection using the dropdown, the second parameter in the definition is replaced with the new choice.

Use [[Choice]] when you was the user to select only a single option at a time, or (optionally) every option. If you would like the user to be able to select any subset of options, use [[MultiChoice]]. A [[Slider]] is also another possible UI control for selecting a single value at a time.

The full declaration of Choice() is:
:[[Choice]](I: Index; n: atomic nonNegative; inclAll: optional boolean = True; Eval: optional boolean = True; Result: optional Array[I], separator: optional text)

==Optional parameters==
===InclAll===
«inclAll» (default <code>True</code>) specifies whether the "All" option is displayed.

By default, the menu will include ''All'' as the first option. If you choose ''All'', the result will be computed for each value of index «i». This makes it easy to do a parametric analysis to see how the choices affect the results. When you choose ''All'', it sets parameter «n» to 0.

If you select ''All'' for multiple Choice menus, results will be computed for all combinations of values from those menus. Each selection of All may add an index dimension to the results. So if there are more than two or three, the number of dimensions may make the result hard to understand, and long to compute. In a few cases, the model may not be able to compute correctly with ''All''. In such cases, you can turn off ''All'' as an option by setting an optional third parameter, «inclAll» to <code>False</code> (0). It usually advisable to set «inclAll» to <code>False</code> whenever you use [[Choice]] in an Edit table.

===Eval===
The «Eval» parameter specifies whether [[handle]] or expression terms are evaluated for the return value.

The «Eval» parameter has no effect when the Result parameter is specified, or when «I» contains only constants, such as numbers and text strings. Setting «Eval» to false is recommended in most cases when «I» contains [[handle]]s (variable identifiers). The «Eval» parameter has no effect when «I» is Self (it is always treated as false).

===Result===
The [[Choice]] function has an optional parameter, «Result», that can be used to specify the value returned when Choice is evaluated in a completely general manner: «Result» specifies a return value for each choice different from the value in «I». Using the «Result» parameter, the result of evaluating Choice can be totally separate from the value appearing on the pull-down itself.

Choice normally returns the selected index label. The following syntax returns the index position (rather than label) of the selected value:

:<code>Choice(I, 1, Result: @I)</code>

Suppose you have a table <code>A</code> indexed by <code>I</code>, and you want your user to select a row of <code>I</code>, and then select out only the selected row. A standard formulation of this is:
:<code>Variable A := Table(I)(...)</code>
:<code>Decision selectedRow := Choice(I, 1)</code>
:<code>Variable selectedA := A[I = selectedRow]</code>

Using the «Result» parameter, a variable can be eliminated:
:<code>Variable A := Table(I)(...)</code>
:<code>Decision selectedA := Choice(I, 1, Result: A)</code>

When the «Result» parameter is specified, the «Eval» parameter does nothing.

=== Separator===
You can specify that certain items in <code>I</code> are to display as separators. Separators are horizontal lines on the popup that are nonselectable. To include separators, use the «separator» parameter to specify what value in «I» should display as a separator. You can include that value in <code>I</code> multiple times for multiple separators:

:<code>Choice(I, 1, separator:'---')</code>

:<code>Index Country_S := ['Canada', 'Mexico', 'USA', '---',</code>
::<code>'England', 'France', 'Germany', 'Russia', '---',</code>
::<code>'China', 'India', 'Japan','Philippines', '---',</code>
::<code>'Australia', 'New Zealand', '---',</code>
::<code>'Argentina', 'Brazil', 'Chile']</code>

:<code>Variable Select_country := Choice(Country_S, 1, separator:'---')</code>

:[[image:choice_with_separators.png]]

=== labels and selectionLabels ===
'''New to [[Analytica 6.4]]''

These optional parameters enable you to display values in the popup menu or in the control that are different from the index values in «<code>I</code>». Without these, the index values appear. When used, these should be indexed by <code>I</code>. In the case of a Self-choice, you may need to supply a list of values, which has the disadvantage that it cannot adapt to changes in length or re-orderings of the domain value. You can also supply images for either -- if you do so, keep them small. They are not resized from the original size.

«labels» contains the values that appear on the popup menu. When «selectionLabels» isn't also specified, these are also used for the selected value in the control itself.

«selectionLabels» contains the values that appear as the selected value in the control itself.

'''Example 1: City selection'''

This example of selecting a city from a hierarchical menu provides an example where it is convenient to have different values for the index value (the result), the «labels» and the «selectionLabels». A given city name often appears in multiple states, for example Salem, Oregon and Salem, New York. To keep index elements unique, the values in the index have the full name in the form <code>"Oregon, Salem"</code>, etc.

:<code>Index City := ["Alabama, Auburn", "Alabama, Florence", "Alabama, Marion", ...]</code>

:<code>Variable State_name := [[FindInText]]("^(.+),",City,subpattern:1,return:'S')</code>
:<code>Variable City_name := [[FindInText]](",\s*(.+)\s*$",City,subpattern:1,return:'S')</code>

<code>State_name</code> and <code>City_name</code> are indexed by <code>City</code>.

Our city selection can now present only the city name on the menus, but the full name in the selection (and result):
:<code>Variable Choose_city := [[Choice]]( City, 8, inclAll:False, labels:City_name, selectionLabels:City, nestUnder: State_name )</code>
:→
:[[image:city select hierarchy.png]]

'''Example 2: Color picker'''
A second example where it is useful for the labels to be different from the index values is a color picker. The <code>Color</code> index can contain the color names or RGB integers, whereas the choice contains color swatches (images).

:<code>Index Color := ['red','white','blue','orange','green']</code>
:<code>Variable Color_swatch := [[CanvasImage]]( [[Canvas]]( 10, 25, Color ]] )</code>

:<code>Variable Choose_color := [[Choice]]( Color, 1, labels:Color_swatch)</code> →
::[[image:Color_picker_choice.png]]

The result of <code>Choose_color</code> is <code>"Green"</code>.

=== nestUnder for hierarchical menus ===
''New to [[Analytica 6.4]]''

This optional parameter lets you organize the options into hierarchical submenus. The parameter should be a 1-D array indexed by «<code>I</code>». The entries must all be text or Null. Text entries contain the name of the submenu. Multiple levels of submenus are separated by '>'. For example, consider a <code>City</code> index with this «nestUnder» array:

::Variable City_submenus → [[image:City_submenus.png]]

Then <code>[[Choice]]( City, 1, nestUnder: City_submenus )</code> produces this multilevel pulldown:

::[[Image:nestUnderEx.png]]

In this example, Arizona and Nevada are only one level deep, each with a single element, while San Jose is two levels deep, with counties, and cities within each county.

==Examples==
Suppose multiple variables use [[Choice]](I, n) with the same index <code>I</code>, and you choose ''All'' for each of them, e.g.
:<code>Index I := ['Low', 'Mid', 'High']</code>
:<code>Variable A := Choice(I, 0)</code>
:<code>Variable B := Choice(I, 0)</code>
:<code>Variable Result := IF A = 'Low' AND B = 'Low' THEN 0 ELSE 100 →</code>
::<code>Array(I, [0, 100, 100])</code>

<code>Result</code> is indexed by I only once, and A and B are treated as if they have the same values. If you wanted to vary them independently, they should use different indexes, e.g.
:<code>Index I := ['Low', 'Mid', 'High']</code>
:<code>Variable A := Choice(I, 0)</code>
:<code>Index J := CopyIndex(I)</code>
:<code>Variable B := Choice(J, 0)</code>
:<code>Variable Result := IF A = 'Low' AND B = 'Low' THEN 0 ELSE 100 →</code>
::<code>Array(I, J, [0, 100, 100], [100, 100, 100], [100, 100, 100])</code>

The function [[CopyIndex]](I) makes returns a new index with the same values as <code>I</code>.

==Details and more examples==
=== Self-Indexed Choices ===
When a variable is defined with the first parameter set to [[Self]], as in the definition:
:<code>Choice(Self, 0)</code>

then the set of values appearing in the choice are located in the variable's own domain attribute. In this case, the domain must be either a list, list-of-labels or index type.

The easiest way to create a Self-Choice is to select "Choice..." from the definition type popup. Analytica will then fill in a default one-element list-of-labels selection.

When a domain is a list, the elements are usually numbers, but may also be variable identifiers or expressions. (See "Identifier and Expression items" below).

If you use an Index domain, then the values for domain of [[Self]] come from another index variable. In this case, <code>Choice(Self,1)</code> when <code>domain = I</code> is very similar to <code>Choice(I,1)</code> with no domain set. There are, however, several differences.

First, if you use an index domain, then your variable will have both an index value and mid/prob values, while if you use <code>Choice(I, 1)</code> your variable will not have an index semantics.

Second, if "All" is selected in the pulldown, the result of <ode>Choice(I, 0) is indexed by <code>I</code>, while <code>Choice(Self, 0)</code> is indexed by [[Self]].

Third, in an index domain using Index I, the values in the domain are the evaluated values of <code>I</code>. If <code>I</code> contains only numbers and text strings, then these are the same as the values of <code>I</code>, but if <code>I</code> contains identifiers or expressions, then there is a difference. <code>Choice(I, 1)</code> would show the identifiers or expressions, while <code>Choice(Self, 1)</code> with <code>domain = I</code> would show the values of those variables in the pulldown.

=== Input Nodes ===
Selecting "Make Input" from the Object menu creates a pull-down control that you can position on your diagram as part of a user-interface form.

=== Pull-downs in edit tables ===
You can put a [[Choice]] pulldown menu in a cell of an edit table. Just type the expression, such as <code>Choice(option, 1, 0)</code>. where <code>option</code> is an index containing the possible options. You usually set the third parameter, «inclAll», to 0, so to remove the ''All'' option. Otherwise, if the user selects "All" in a table, array abstraction causes the index <code>option</code> to become an index of the entire value of the table result. Similarly, you can specify [[Choice]] and [[Checkbox]] in the cells of any [[DetermTable]], [[ProbTable]], [[IntraTable]], or [[SubTable]].

When you enter a valid [[Choice]] or [[Checkbox]] expression into a table cell, the cell immediately shows the menu or checkbox. But, you will also see an expression/choice selector near the right top of the window:

:[[image:expr-choice-selector.png]]

If you select the ''expr'' option, you will see all cells as text expressions, so you can review and edit them directly.

In browse mode, these cells with controls always appear as controls. The controls appear as disabled (so you can't change them) in browse mode, unless or until you create an input node for the table.

==== In Analytica 4.0 thru Analytica 4.4 ====

In these earlier versions, there is now expression/choice select, and you can only see the expression in Edit mode, allowing you to edit the definition.

=== Using Choice with DetermTable ===
A useful arrangement is to use [[Choice]] variables for key parameters, especially parameters where you may want to perform a parametric analysis (by selecting "All"), and then organizing tabular data in [[DetermTable]]s (rather than standard Edit Tables). This arrangement looks like the following:

:<code>Decision Scenario := Choice(Self, 0)</code>
:<code>Domain of Scenario : [1, 2, 3, 4]</code>
:<code>Variable A := DetermTable(Scenario)(...)</code>

In this arrangement, the definition of <code>A</code> appears as an edit table, indexed by all domain values of <code>Scenario</code>. However, when evaluated, only the selected row is returned.

With this arrangement, you can compute downstream results for a single <code>Scenario</code> (or other dimension), or for every scenario when "All" is selected. When available memory limits your ability to perform a full parameter analysis across many dimensions (since the number of combinations increases multiplicatively), this setup makes it easy to limit the parametric analysis to only selected dimensions.

A second variation on this is:
:<code>Index AllScenarios := [1, 2, 3, 4]</code>
:<code>Decision Scenario := Choice(Self, 0)</code>
:<code>Domain of Scenario : Index AllScenarios</code>
:<code>Variable A := DetermTable(Scenario)(...)</code>

=== Identifier and Expression Items ===
When an option in «I» is a [[handle]] to a variable, then the pulldown will display either the title of the object or its identifier, depending on whether "Show By Identifier" is selected. The "Show By Identifier" setting is found on the '''Object''' menu and can also be toggled by pressing ''Ctrl+Y'' .

When you want to set up an explicit list of identifiers to select between, the best way to do this is to create an index node and turn on its [[MetaOnly]] attribute. Then set the definition to be a list and enter the identifiers in each cell. You can also compute a list of identifiers.

When the selected item is a [[handle]] to a variable, the result of evaluating the [[Choice]] function will be either the handle or the result of evaluating the handle, as follows. If the «eval» parameter is specified and set to false, or if the «I» option is [[Self]], then the result is the handle. If the «eval» parameter is specified and true, and the «I» parameter is an index (i.e., not [[Self]]), then the result is the result of evaluating the selected variable. When «eval» is not specified, then a handle is returned if «I» is index node with the [[MetaOnly]] attribute set or if «I» species the domain of another variable, or otherwise the result of evaluating the variable is returned.

If you are dealing with Choices involving variable identifiers, using <code>Eval: False</code> is generally preferred. Operations such as comparing the selected value to the original index, or use of a [[DetermTable]] based on the choice variable, function more consistently and less ambiguously. As a comparison, if you return values (e.g., <code>Eval: True</code>), and two variables in the choice happen to have the same value, then an ambiguity over which variable was selected exists, but with <code>Eval: False</code> no such ambiguity exists.

=== Pictures in Choice nodes ===
You can make Choice nodes with pictures as options by creating an Index with pictures in it and using that as the Index in the Choice function:
[[image:choiceimages.png|alt=|frameless|369x369px]]

''' Instructions for creating an Index with pictures'''
# Add each picture into Analytica. For help with this step, see [https://docs.analytica.com/index.php/Graphics,_frames,_and_text_in_a_diagram#Adding_graphics Adding Graphics].
# Get the identifier of each picture. You can find the identifier of a picture by clicking on the picture node and either looking at the identifier in the Attribute panel or by opening object mode. It will generally start with “Pi” and end with numbers, e.g., Pi123456789.
# Create a list of handles called ImageHandles using these picture identifiers. Both [[MetaOnly]] index or [https://docs.analytica.com/index.php/Handle_Functions#ListOfHandles.28x1.2C_x2.2C...2Cxn.29 ListofHandles] will work.
# <code>Pict of (ImageHandles)</code> will give you an array with the pictures as the values.
# Use CopyIndex to turn the array indexed by the ListofHandles into an Index

''' Example code '''

The following code is an example of an Index with pictures when you have a list of identifiers PictureIdentifier1, PictureIdentifier2, etc:

<code>CopyIndex(Pict of ListofHandles(PictureIdentifier1, PictureIdentifier2, PictureIdentifier3))</code>

The following code is an example of an Index with all of the pictures in MyModuleWithPics:

<code>CopyIndex(Pict of #FindObjects(class:Picture, within:Handle(MyModuleWithPics))</code>

You can combine picture and text in the same index when they are different slices of the array, e.g., [Picture, Text, Picture, Text], but you cannot combine pictures and text in the same slice of the Index, e.g., [Picture & Text, Picture & Text].

Once you have your list of images, you can use it in a Choice node to get a Choice with images, e.g.:

<code>Choice(IndexwithPictures, 1)</code>

=== Filtering long Choice lists (ACP) ===
For lists with more than 10 options, ACP automatically adds a filtering option where the user can enter text to filter the list. This filtering option shows up at the top of the list when a user opens the Choice node like so:

[[image:choicefilter.png|link=Special:FilePath/Choicefilter.png|alt=|frameless|314x314px]]

Note that this feature is only available in ACP.

== History ==
Releases prior to Analytica 4.4.2 do not support extremely long option lists on the [[Choice]] popup. In those releases, the choice pulldown displays only the first 254 items, plus the selected item. This limitation is fixed in patch release 4.4.2, where no such limitation exists. If you have many options and for some reason cannot upgrade to 4.4.2 or later, consider creating a 2-stage hierarchical menu, where the first pulldown offers subgroups, and the second shows a the items in that subgroup.

Pulldowns in [[Analytica 4.5]] and later are described [[#In Analytica 4.5 or later|above]].

[[Analytica 6.4]] added an option to add a hierarchical organization to the items by specifying an optional «nestUnder» parameter.

== See Also ==
* [[Choice menu user input]]
* [[Choice menus and Checkboxes in an edit table]]
* [[MultiChoice]]
* [[Checkbox]]
* [[Slider]]
* [[AskMsgChoice]]
* [[MetaOnly]]
* Webinar on [[Analytica_User_Group/Past_Topics#Creating_Control_Panels|Creating Control Panels]]

Choice

2025-02-05T19:15:33Z

Klee2: /* Images in Choice nodes */

[[Category:Functions that select part of an array]]
[[Category:Top level functions]]
[[Category: Menus]]
[[Category:User-interface functions]]
{{ReleaseBar}}

== Choice(i, n) ==
[[Choice]] displays a drop-down menu to allow an end user to select from a list of options. The index «i» is the list of options -- an index containing the values appearing on the popup. When <code>I: Self</code>, the values listed in the variable's domain are used. «N» is the position of the currently selected option in that list, or 0 for ''All''. This should always be an explicit integer, not an expression.

When the user selects a different option, it changes the value of «n». You can use Choice to provide a menu as the definition of a variable or in a cell of an Edit table (or [[ProbTable]] or [[DetermTable]]). [[Choice]] must be the top level of the definition or the cell, and may not be nested within an expression. You must create an Input node for the variable before it will display choices as menus.

When a user changes the selection using the dropdown, the second parameter in the definition is replaced with the new choice.

Use [[Choice]] when you was the user to select only a single option at a time, or (optionally) every option. If you would like the user to be able to select any subset of options, use [[MultiChoice]]. A [[Slider]] is also another possible UI control for selecting a single value at a time.

The full declaration of Choice() is:
:[[Choice]](I: Index; n: atomic nonNegative; inclAll: optional boolean = True; Eval: optional boolean = True; Result: optional Array[I], separator: optional text)

==Optional parameters==
===InclAll===
«inclAll» (default <code>True</code>) specifies whether the "All" option is displayed.

By default, the menu will include ''All'' as the first option. If you choose ''All'', the result will be computed for each value of index «i». This makes it easy to do a parametric analysis to see how the choices affect the results. When you choose ''All'', it sets parameter «n» to 0.

If you select ''All'' for multiple Choice menus, results will be computed for all combinations of values from those menus. Each selection of All may add an index dimension to the results. So if there are more than two or three, the number of dimensions may make the result hard to understand, and long to compute. In a few cases, the model may not be able to compute correctly with ''All''. In such cases, you can turn off ''All'' as an option by setting an optional third parameter, «inclAll» to <code>False</code> (0). It usually advisable to set «inclAll» to <code>False</code> whenever you use [[Choice]] in an Edit table.

===Eval===
The «Eval» parameter specifies whether [[handle]] or expression terms are evaluated for the return value.

The «Eval» parameter has no effect when the Result parameter is specified, or when «I» contains only constants, such as numbers and text strings. Setting «Eval» to false is recommended in most cases when «I» contains [[handle]]s (variable identifiers). The «Eval» parameter has no effect when «I» is Self (it is always treated as false).

===Result===
The [[Choice]] function has an optional parameter, «Result», that can be used to specify the value returned when Choice is evaluated in a completely general manner: «Result» specifies a return value for each choice different from the value in «I». Using the «Result» parameter, the result of evaluating Choice can be totally separate from the value appearing on the pull-down itself.

Choice normally returns the selected index label. The following syntax returns the index position (rather than label) of the selected value:

:<code>Choice(I, 1, Result: @I)</code>

Suppose you have a table <code>A</code> indexed by <code>I</code>, and you want your user to select a row of <code>I</code>, and then select out only the selected row. A standard formulation of this is:
:<code>Variable A := Table(I)(...)</code>
:<code>Decision selectedRow := Choice(I, 1)</code>
:<code>Variable selectedA := A[I = selectedRow]</code>

Using the «Result» parameter, a variable can be eliminated:
:<code>Variable A := Table(I)(...)</code>
:<code>Decision selectedA := Choice(I, 1, Result: A)</code>

When the «Result» parameter is specified, the «Eval» parameter does nothing.

=== Separator===
You can specify that certain items in <code>I</code> are to display as separators. Separators are horizontal lines on the popup that are nonselectable. To include separators, use the «separator» parameter to specify what value in «I» should display as a separator. You can include that value in <code>I</code> multiple times for multiple separators:

:<code>Choice(I, 1, separator:'---')</code>

:<code>Index Country_S := ['Canada', 'Mexico', 'USA', '---',</code>
::<code>'England', 'France', 'Germany', 'Russia', '---',</code>
::<code>'China', 'India', 'Japan','Philippines', '---',</code>
::<code>'Australia', 'New Zealand', '---',</code>
::<code>'Argentina', 'Brazil', 'Chile']</code>

:<code>Variable Select_country := Choice(Country_S, 1, separator:'---')</code>

:[[image:choice_with_separators.png]]

=== labels and selectionLabels ===
'''New to [[Analytica 6.4]]''

These optional parameters enable you to display values in the popup menu or in the control that are different from the index values in «<code>I</code>». Without these, the index values appear. When used, these should be indexed by <code>I</code>. In the case of a Self-choice, you may need to supply a list of values, which has the disadvantage that it cannot adapt to changes in length or re-orderings of the domain value. You can also supply images for either -- if you do so, keep them small. They are not resized from the original size.

«labels» contains the values that appear on the popup menu. When «selectionLabels» isn't also specified, these are also used for the selected value in the control itself.

«selectionLabels» contains the values that appear as the selected value in the control itself.

'''Example 1: City selection'''

This example of selecting a city from a hierarchical menu provides an example where it is convenient to have different values for the index value (the result), the «labels» and the «selectionLabels». A given city name often appears in multiple states, for example Salem, Oregon and Salem, New York. To keep index elements unique, the values in the index have the full name in the form <code>"Oregon, Salem"</code>, etc.

:<code>Index City := ["Alabama, Auburn", "Alabama, Florence", "Alabama, Marion", ...]</code>

:<code>Variable State_name := [[FindInText]]("^(.+),",City,subpattern:1,return:'S')</code>
:<code>Variable City_name := [[FindInText]](",\s*(.+)\s*$",City,subpattern:1,return:'S')</code>

<code>State_name</code> and <code>City_name</code> are indexed by <code>City</code>.

Our city selection can now present only the city name on the menus, but the full name in the selection (and result):
:<code>Variable Choose_city := [[Choice]]( City, 8, inclAll:False, labels:City_name, selectionLabels:City, nestUnder: State_name )</code>
:→
:[[image:city select hierarchy.png]]

'''Example 2: Color picker'''
A second example where it is useful for the labels to be different from the index values is a color picker. The <code>Color</code> index can contain the color names or RGB integers, whereas the choice contains color swatches (images).

:<code>Index Color := ['red','white','blue','orange','green']</code>
:<code>Variable Color_swatch := [[CanvasImage]]( [[Canvas]]( 10, 25, Color ]] )</code>

:<code>Variable Choose_color := [[Choice]]( Color, 1, labels:Color_swatch)</code> →
::[[image:Color_picker_choice.png]]

The result of <code>Choose_color</code> is <code>"Green"</code>.

=== nestUnder for hierarchical menus ===
''New to [[Analytica 6.4]]''

This optional parameter lets you organize the options into hierarchical submenus. The parameter should be a 1-D array indexed by «<code>I</code>». The entries must all be text or Null. Text entries contain the name of the submenu. Multiple levels of submenus are separated by '>'. For example, consider a <code>City</code> index with this «nestUnder» array:

::Variable City_submenus → [[image:City_submenus.png]]

Then <code>[[Choice]]( City, 1, nestUnder: City_submenus )</code> produces this multilevel pulldown:

::[[Image:nestUnderEx.png]]

In this example, Arizona and Nevada are only one level deep, each with a single element, while San Jose is two levels deep, with counties, and cities within each county.

==Examples==
Suppose multiple variables use [[Choice]](I, n) with the same index <code>I</code>, and you choose ''All'' for each of them, e.g.
:<code>Index I := ['Low', 'Mid', 'High']</code>
:<code>Variable A := Choice(I, 0)</code>
:<code>Variable B := Choice(I, 0)</code>
:<code>Variable Result := IF A = 'Low' AND B = 'Low' THEN 0 ELSE 100 →</code>
::<code>Array(I, [0, 100, 100])</code>

<code>Result</code> is indexed by I only once, and A and B are treated as if they have the same values. If you wanted to vary them independently, they should use different indexes, e.g.
:<code>Index I := ['Low', 'Mid', 'High']</code>
:<code>Variable A := Choice(I, 0)</code>
:<code>Index J := CopyIndex(I)</code>
:<code>Variable B := Choice(J, 0)</code>
:<code>Variable Result := IF A = 'Low' AND B = 'Low' THEN 0 ELSE 100 →</code>
::<code>Array(I, J, [0, 100, 100], [100, 100, 100], [100, 100, 100])</code>

The function [[CopyIndex]](I) makes returns a new index with the same values as <code>I</code>.

==Details and more examples==
=== Self-Indexed Choices ===
When a variable is defined with the first parameter set to [[Self]], as in the definition:
:<code>Choice(Self, 0)</code>

then the set of values appearing in the choice are located in the variable's own domain attribute. In this case, the domain must be either a list, list-of-labels or index type.

The easiest way to create a Self-Choice is to select "Choice..." from the definition type popup. Analytica will then fill in a default one-element list-of-labels selection.

When a domain is a list, the elements are usually numbers, but may also be variable identifiers or expressions. (See "Identifier and Expression items" below).

If you use an Index domain, then the values for domain of [[Self]] come from another index variable. In this case, <code>Choice(Self,1)</code> when <code>domain = I</code> is very similar to <code>Choice(I,1)</code> with no domain set. There are, however, several differences.

First, if you use an index domain, then your variable will have both an index value and mid/prob values, while if you use <code>Choice(I, 1)</code> your variable will not have an index semantics.

Second, if "All" is selected in the pulldown, the result of <ode>Choice(I, 0) is indexed by <code>I</code>, while <code>Choice(Self, 0)</code> is indexed by [[Self]].

Third, in an index domain using Index I, the values in the domain are the evaluated values of <code>I</code>. If <code>I</code> contains only numbers and text strings, then these are the same as the values of <code>I</code>, but if <code>I</code> contains identifiers or expressions, then there is a difference. <code>Choice(I, 1)</code> would show the identifiers or expressions, while <code>Choice(Self, 1)</code> with <code>domain = I</code> would show the values of those variables in the pulldown.

=== Input Nodes ===
Selecting "Make Input" from the Object menu creates a pull-down control that you can position on your diagram as part of a user-interface form.

=== Pull-downs in edit tables ===
You can put a [[Choice]] pulldown menu in a cell of an edit table. Just type the expression, such as <code>Choice(option, 1, 0)</code>. where <code>option</code> is an index containing the possible options. You usually set the third parameter, «inclAll», to 0, so to remove the ''All'' option. Otherwise, if the user selects "All" in a table, array abstraction causes the index <code>option</code> to become an index of the entire value of the table result. Similarly, you can specify [[Choice]] and [[Checkbox]] in the cells of any [[DetermTable]], [[ProbTable]], [[IntraTable]], or [[SubTable]].

When you enter a valid [[Choice]] or [[Checkbox]] expression into a table cell, the cell immediately shows the menu or checkbox. But, you will also see an expression/choice selector near the right top of the window:

:[[image:expr-choice-selector.png]]

If you select the ''expr'' option, you will see all cells as text expressions, so you can review and edit them directly.

In browse mode, these cells with controls always appear as controls. The controls appear as disabled (so you can't change them) in browse mode, unless or until you create an input node for the table.

==== In Analytica 4.0 thru Analytica 4.4 ====

In these earlier versions, there is now expression/choice select, and you can only see the expression in Edit mode, allowing you to edit the definition.

=== Using Choice with DetermTable ===
A useful arrangement is to use [[Choice]] variables for key parameters, especially parameters where you may want to perform a parametric analysis (by selecting "All"), and then organizing tabular data in [[DetermTable]]s (rather than standard Edit Tables). This arrangement looks like the following:

:<code>Decision Scenario := Choice(Self, 0)</code>
:<code>Domain of Scenario : [1, 2, 3, 4]</code>
:<code>Variable A := DetermTable(Scenario)(...)</code>

In this arrangement, the definition of <code>A</code> appears as an edit table, indexed by all domain values of <code>Scenario</code>. However, when evaluated, only the selected row is returned.

With this arrangement, you can compute downstream results for a single <code>Scenario</code> (or other dimension), or for every scenario when "All" is selected. When available memory limits your ability to perform a full parameter analysis across many dimensions (since the number of combinations increases multiplicatively), this setup makes it easy to limit the parametric analysis to only selected dimensions.

A second variation on this is:
:<code>Index AllScenarios := [1, 2, 3, 4]</code>
:<code>Decision Scenario := Choice(Self, 0)</code>
:<code>Domain of Scenario : Index AllScenarios</code>
:<code>Variable A := DetermTable(Scenario)(...)</code>

=== Identifier and Expression Items ===
When an option in «I» is a [[handle]] to a variable, then the pulldown will display either the title of the object or its identifier, depending on whether "Show By Identifier" is selected. The "Show By Identifier" setting is found on the '''Object''' menu and can also be toggled by pressing ''Ctrl+Y'' .

When you want to set up an explicit list of identifiers to select between, the best way to do this is to create an index node and turn on its [[MetaOnly]] attribute. Then set the definition to be a list and enter the identifiers in each cell. You can also compute a list of identifiers.

When the selected item is a [[handle]] to a variable, the result of evaluating the [[Choice]] function will be either the handle or the result of evaluating the handle, as follows. If the «eval» parameter is specified and set to false, or if the «I» option is [[Self]], then the result is the handle. If the «eval» parameter is specified and true, and the «I» parameter is an index (i.e., not [[Self]]), then the result is the result of evaluating the selected variable. When «eval» is not specified, then a handle is returned if «I» is index node with the [[MetaOnly]] attribute set or if «I» species the domain of another variable, or otherwise the result of evaluating the variable is returned.

If you are dealing with Choices involving variable identifiers, using <code>Eval: False</code> is generally preferred. Operations such as comparing the selected value to the original index, or use of a [[DetermTable]] based on the choice variable, function more consistently and less ambiguously. As a comparison, if you return values (e.g., <code>Eval: True</code>), and two variables in the choice happen to have the same value, then an ambiguity over which variable was selected exists, but with <code>Eval: False</code> no such ambiguity exists.

=== Pictures in Choice nodes ===
You can make Choice nodes with pictures as options by creating an Index with pictures in it and using that as the Index in the Choice function. For example:
[[image:choiceimages.png|alt=|frameless]]

''' Instructions for creating an Index with pictures'''
# Add each picture into Analytica. For help with this step, see [https://docs.analytica.com/index.php/Graphics,_frames,_and_text_in_a_diagram#Adding_graphics Adding Graphics].
# Get the identifier of each picture. You can find the identifier of a picture by clicking on the picture node and either looking at the identifier in the Attribute panel or by opening object mode. It will generally start with “Pi” and end with numbers.
# Create a list of handles called ImageHandles using these picture identifiers. Both [[MetaOnly]] index or [https://docs.analytica.com/index.php/Handle_Functions#ListOfHandles.28x1.2C_x2.2C...2Cxn.29 ListofHandles] will work.
# Pict of (ImageHandles) will give you an array with the pictures as the values.
# Use CopyIndex to turn the array indexed by the ListofHandles into an Index

''' Example code '''

The following code is an example of an Index with pictures when you have a list of identifiers PictureIdentifier1, PictureIdentifier2, etc:

<code>CopyIndex(Pict of ListofHandles(PictureIdentifier1, PictureIdentifier2, PictureIdentifier3))</code>

The following code is an example of an Index with all of the pictures in MyModuleWithPics:

<code>CopyIndex(Pict of #FindObjects(class:Picture, within:Handle(MyModuleWithPics))</code>

You can combine picture and text in the same index when they are different slices of the array, e.g., [Picture, Text, Picture, Text], but you cannot combine pictures and text in the same slice of the Index, e.g., [Picture & Text, Picture & Text].

Once you have your list of images, you can use it in a Choice node to get a Choice with images, e.g.:

<code>Choice(IndexwithPictures, 1)</code>

=== Filtering long Choice lists (ACP) ===
For lists with more than 10 options, ACP automatically adds a filtering option where the user can enter text to filter the list. This filtering option shows up at the top of the list when a user opens the Choice node like so:

[[image:choicefilter.png|link=Special:FilePath/Choicefilter.png]]

Note that this feature is only available in ACP.

== History ==
Releases prior to Analytica 4.4.2 do not support extremely long option lists on the [[Choice]] popup. In those releases, the choice pulldown displays only the first 254 items, plus the selected item. This limitation is fixed in patch release 4.4.2, where no such limitation exists. If you have many options and for some reason cannot upgrade to 4.4.2 or later, consider creating a 2-stage hierarchical menu, where the first pulldown offers subgroups, and the second shows a the items in that subgroup.

Pulldowns in [[Analytica 4.5]] and later are described [[#In Analytica 4.5 or later|above]].

[[Analytica 6.4]] added an option to add a hierarchical organization to the items by specifying an optional «nestUnder» parameter.

== See Also ==
* [[Choice menu user input]]
* [[Choice menus and Checkboxes in an edit table]]
* [[MultiChoice]]
* [[Checkbox]]
* [[Slider]]
* [[AskMsgChoice]]
* [[MetaOnly]]
* Webinar on [[Analytica_User_Group/Past_Topics#Creating_Control_Panels|Creating Control Panels]]

File:Choicefilter.png

2025-02-05T19:15:22Z

Klee2: Example of a choice with a filter in ACP

== Summary ==
Example of a choice with a filter in ACP

Choice

2025-02-05T19:11:31Z

Klee2: /* Details and more examples */

[[Category:Functions that select part of an array]]
[[Category:Top level functions]]
[[Category: Menus]]
[[Category:User-interface functions]]
{{ReleaseBar}}

== Choice(i, n) ==
[[Choice]] displays a drop-down menu to allow an end user to select from a list of options. The index «i» is the list of options -- an index containing the values appearing on the popup. When <code>I: Self</code>, the values listed in the variable's domain are used. «N» is the position of the currently selected option in that list, or 0 for ''All''. This should always be an explicit integer, not an expression.

When the user selects a different option, it changes the value of «n». You can use Choice to provide a menu as the definition of a variable or in a cell of an Edit table (or [[ProbTable]] or [[DetermTable]]). [[Choice]] must be the top level of the definition or the cell, and may not be nested within an expression. You must create an Input node for the variable before it will display choices as menus.

When a user changes the selection using the dropdown, the second parameter in the definition is replaced with the new choice.

Use [[Choice]] when you was the user to select only a single option at a time, or (optionally) every option. If you would like the user to be able to select any subset of options, use [[MultiChoice]]. A [[Slider]] is also another possible UI control for selecting a single value at a time.

The full declaration of Choice() is:
:[[Choice]](I: Index; n: atomic nonNegative; inclAll: optional boolean = True; Eval: optional boolean = True; Result: optional Array[I], separator: optional text)

==Optional parameters==
===InclAll===
«inclAll» (default <code>True</code>) specifies whether the "All" option is displayed.

By default, the menu will include ''All'' as the first option. If you choose ''All'', the result will be computed for each value of index «i». This makes it easy to do a parametric analysis to see how the choices affect the results. When you choose ''All'', it sets parameter «n» to 0.

If you select ''All'' for multiple Choice menus, results will be computed for all combinations of values from those menus. Each selection of All may add an index dimension to the results. So if there are more than two or three, the number of dimensions may make the result hard to understand, and long to compute. In a few cases, the model may not be able to compute correctly with ''All''. In such cases, you can turn off ''All'' as an option by setting an optional third parameter, «inclAll» to <code>False</code> (0). It usually advisable to set «inclAll» to <code>False</code> whenever you use [[Choice]] in an Edit table.

===Eval===
The «Eval» parameter specifies whether [[handle]] or expression terms are evaluated for the return value.

The «Eval» parameter has no effect when the Result parameter is specified, or when «I» contains only constants, such as numbers and text strings. Setting «Eval» to false is recommended in most cases when «I» contains [[handle]]s (variable identifiers). The «Eval» parameter has no effect when «I» is Self (it is always treated as false).

===Result===
The [[Choice]] function has an optional parameter, «Result», that can be used to specify the value returned when Choice is evaluated in a completely general manner: «Result» specifies a return value for each choice different from the value in «I». Using the «Result» parameter, the result of evaluating Choice can be totally separate from the value appearing on the pull-down itself.

Choice normally returns the selected index label. The following syntax returns the index position (rather than label) of the selected value:

:<code>Choice(I, 1, Result: @I)</code>

Suppose you have a table <code>A</code> indexed by <code>I</code>, and you want your user to select a row of <code>I</code>, and then select out only the selected row. A standard formulation of this is:
:<code>Variable A := Table(I)(...)</code>
:<code>Decision selectedRow := Choice(I, 1)</code>
:<code>Variable selectedA := A[I = selectedRow]</code>

Using the «Result» parameter, a variable can be eliminated:
:<code>Variable A := Table(I)(...)</code>
:<code>Decision selectedA := Choice(I, 1, Result: A)</code>

When the «Result» parameter is specified, the «Eval» parameter does nothing.

=== Separator===
You can specify that certain items in <code>I</code> are to display as separators. Separators are horizontal lines on the popup that are nonselectable. To include separators, use the «separator» parameter to specify what value in «I» should display as a separator. You can include that value in <code>I</code> multiple times for multiple separators:

:<code>Choice(I, 1, separator:'---')</code>

:<code>Index Country_S := ['Canada', 'Mexico', 'USA', '---',</code>
::<code>'England', 'France', 'Germany', 'Russia', '---',</code>
::<code>'China', 'India', 'Japan','Philippines', '---',</code>
::<code>'Australia', 'New Zealand', '---',</code>
::<code>'Argentina', 'Brazil', 'Chile']</code>

:<code>Variable Select_country := Choice(Country_S, 1, separator:'---')</code>

:[[image:choice_with_separators.png]]

=== labels and selectionLabels ===
'''New to [[Analytica 6.4]]''

These optional parameters enable you to display values in the popup menu or in the control that are different from the index values in «<code>I</code>». Without these, the index values appear. When used, these should be indexed by <code>I</code>. In the case of a Self-choice, you may need to supply a list of values, which has the disadvantage that it cannot adapt to changes in length or re-orderings of the domain value. You can also supply images for either -- if you do so, keep them small. They are not resized from the original size.

«labels» contains the values that appear on the popup menu. When «selectionLabels» isn't also specified, these are also used for the selected value in the control itself.

«selectionLabels» contains the values that appear as the selected value in the control itself.

'''Example 1: City selection'''

This example of selecting a city from a hierarchical menu provides an example where it is convenient to have different values for the index value (the result), the «labels» and the «selectionLabels». A given city name often appears in multiple states, for example Salem, Oregon and Salem, New York. To keep index elements unique, the values in the index have the full name in the form <code>"Oregon, Salem"</code>, etc.

:<code>Index City := ["Alabama, Auburn", "Alabama, Florence", "Alabama, Marion", ...]</code>

:<code>Variable State_name := [[FindInText]]("^(.+),",City,subpattern:1,return:'S')</code>
:<code>Variable City_name := [[FindInText]](",\s*(.+)\s*$",City,subpattern:1,return:'S')</code>

<code>State_name</code> and <code>City_name</code> are indexed by <code>City</code>.

Our city selection can now present only the city name on the menus, but the full name in the selection (and result):
:<code>Variable Choose_city := [[Choice]]( City, 8, inclAll:False, labels:City_name, selectionLabels:City, nestUnder: State_name )</code>
:→
:[[image:city select hierarchy.png]]

'''Example 2: Color picker'''
A second example where it is useful for the labels to be different from the index values is a color picker. The <code>Color</code> index can contain the color names or RGB integers, whereas the choice contains color swatches (images).

:<code>Index Color := ['red','white','blue','orange','green']</code>
:<code>Variable Color_swatch := [[CanvasImage]]( [[Canvas]]( 10, 25, Color ]] )</code>

:<code>Variable Choose_color := [[Choice]]( Color, 1, labels:Color_swatch)</code> →
::[[image:Color_picker_choice.png]]

The result of <code>Choose_color</code> is <code>"Green"</code>.

=== nestUnder for hierarchical menus ===
''New to [[Analytica 6.4]]''

This optional parameter lets you organize the options into hierarchical submenus. The parameter should be a 1-D array indexed by «<code>I</code>». The entries must all be text or Null. Text entries contain the name of the submenu. Multiple levels of submenus are separated by '>'. For example, consider a <code>City</code> index with this «nestUnder» array:

::Variable City_submenus → [[image:City_submenus.png]]

Then <code>[[Choice]]( City, 1, nestUnder: City_submenus )</code> produces this multilevel pulldown:

::[[Image:nestUnderEx.png]]

In this example, Arizona and Nevada are only one level deep, each with a single element, while San Jose is two levels deep, with counties, and cities within each county.

==Examples==
Suppose multiple variables use [[Choice]](I, n) with the same index <code>I</code>, and you choose ''All'' for each of them, e.g.
:<code>Index I := ['Low', 'Mid', 'High']</code>
:<code>Variable A := Choice(I, 0)</code>
:<code>Variable B := Choice(I, 0)</code>
:<code>Variable Result := IF A = 'Low' AND B = 'Low' THEN 0 ELSE 100 →</code>
::<code>Array(I, [0, 100, 100])</code>

<code>Result</code> is indexed by I only once, and A and B are treated as if they have the same values. If you wanted to vary them independently, they should use different indexes, e.g.
:<code>Index I := ['Low', 'Mid', 'High']</code>
:<code>Variable A := Choice(I, 0)</code>
:<code>Index J := CopyIndex(I)</code>
:<code>Variable B := Choice(J, 0)</code>
:<code>Variable Result := IF A = 'Low' AND B = 'Low' THEN 0 ELSE 100 →</code>
::<code>Array(I, J, [0, 100, 100], [100, 100, 100], [100, 100, 100])</code>

The function [[CopyIndex]](I) makes returns a new index with the same values as <code>I</code>.

==Details and more examples==
=== Self-Indexed Choices ===
When a variable is defined with the first parameter set to [[Self]], as in the definition:
:<code>Choice(Self, 0)</code>

then the set of values appearing in the choice are located in the variable's own domain attribute. In this case, the domain must be either a list, list-of-labels or index type.

The easiest way to create a Self-Choice is to select "Choice..." from the definition type popup. Analytica will then fill in a default one-element list-of-labels selection.

When a domain is a list, the elements are usually numbers, but may also be variable identifiers or expressions. (See "Identifier and Expression items" below).

If you use an Index domain, then the values for domain of [[Self]] come from another index variable. In this case, <code>Choice(Self,1)</code> when <code>domain = I</code> is very similar to <code>Choice(I,1)</code> with no domain set. There are, however, several differences.

First, if you use an index domain, then your variable will have both an index value and mid/prob values, while if you use <code>Choice(I, 1)</code> your variable will not have an index semantics.

Second, if "All" is selected in the pulldown, the result of <ode>Choice(I, 0)</code> is indexed by <code>I</code>, while <code>Choice(Self, 0)</code> is indexed by [[Self]].

Third, in an index domain using Index I, the values in the domain are the evaluated values of <code>I</code>. If <code>I</code> contains only numbers and text strings, then these are the same as the values of <code>I</code>, but if <code>I</code> contains identifiers or expressions, then there is a difference. <code>Choice(I, 1)</code> would show the identifiers or expressions, while <code>Choice(Self, 1)</code> with <code>domain = I</code> would show the values of those variables in the pulldown.

=== Input Nodes ===
Selecting "Make Input" from the Object menu creates a pull-down control that you can position on your diagram as part of a user-interface form.

=== Pull-downs in edit tables ===
You can put a [[Choice]] pulldown menu in a cell of an edit table. Just type the expression, such as <code>Choice(option, 1, 0)</code>. where <code>option</code> is an index containing the possible options. You usually set the third parameter, «inclAll», to 0, so to remove the ''All'' option. Otherwise, if the user selects "All" in a table, array abstraction causes the index <code>option</code> to become an index of the entire value of the table result. Similarly, you can specify [[Choice]] and [[Checkbox]] in the cells of any [[DetermTable]], [[ProbTable]], [[IntraTable]], or [[SubTable]].

When you enter a valid [[Choice]] or [[Checkbox]] expression into a table cell, the cell immediately shows the menu or checkbox. But, you will also see an expression/choice selector near the right top of the window:

:[[image:expr-choice-selector.png]]

If you select the ''expr'' option, you will see all cells as text expressions, so you can review and edit them directly.

In browse mode, these cells with controls always appear as controls. The controls appear as disabled (so you can't change them) in browse mode, unless or until you create an input node for the table.

==== In Analytica 4.0 thru Analytica 4.4 ====

In these earlier versions, there is now expression/choice select, and you can only see the expression in Edit mode, allowing you to edit the definition.

=== Using Choice with DetermTable ===
A useful arrangement is to use [[Choice]] variables for key parameters, especially parameters where you may want to perform a parametric analysis (by selecting "All"), and then organizing tabular data in [[DetermTable]]s (rather than standard Edit Tables). This arrangement looks like the following:

:<code>Decision Scenario := Choice(Self, 0)</code>
:<code>Domain of Scenario : [1, 2, 3, 4]</code>
:<code>Variable A := DetermTable(Scenario)(...)</code>

In this arrangement, the definition of <code>A</code> appears as an edit table, indexed by all domain values of <code>Scenario</code>. However, when evaluated, only the selected row is returned.

With this arrangement, you can compute downstream results for a single <code>Scenario</code> (or other dimension), or for every scenario when "All" is selected. When available memory limits your ability to perform a full parameter analysis across many dimensions (since the number of combinations increases multiplicatively), this setup makes it easy to limit the parametric analysis to only selected dimensions.

A second variation on this is:
:<code>Index AllScenarios := [1, 2, 3, 4]</code>
:<code>Decision Scenario := Choice(Self, 0)</code>
:<code>Domain of Scenario : Index AllScenarios</code>
:<code>Variable A := DetermTable(Scenario)(...)</code>

=== Identifier and Expression Items ===
When an option in «I» is a [[handle]] to a variable, then the pulldown will display either the title of the object or its identifier, depending on whether "Show By Identifier" is selected. The "Show By Identifier" setting is found on the '''Object''' menu and can also be toggled by pressing ''Ctrl+Y'' .

When you want to set up an explicit list of identifiers to select between, the best way to do this is to create an index node and turn on its [[MetaOnly]] attribute. Then set the definition to be a list and enter the identifiers in each cell. You can also compute a list of identifiers.

When the selected item is a [[handle]] to a variable, the result of evaluating the [[Choice]] function will be either the handle or the result of evaluating the handle, as follows. If the «eval» parameter is specified and set to false, or if the «I» option is [[Self]], then the result is the handle. If the «eval» parameter is specified and true, and the «I» parameter is an index (i.e., not [[Self]]), then the result is the result of evaluating the selected variable. When «eval» is not specified, then a handle is returned if «I» is index node with the [[MetaOnly]] attribute set or if «I» species the domain of another variable, or otherwise the result of evaluating the variable is returned.

If you are dealing with Choices involving variable identifiers, using <code>Eval: False</code> is generally preferred. Operations such as comparing the selected value to the original index, or use of a [[DetermTable]] based on the choice variable, function more consistently and less ambiguously. As a comparison, if you return values (e.g., <code>Eval: True</code>), and two variables in the choice happen to have the same value, then an ambiguity over which variable was selected exists, but with <code>Eval: False</code> no such ambiguity exists.

=== Images in Choice nodes ===
You can make Choice nodes with images as options by creating an Index with images in it and using that as the Index in the Choice function. For example:
[[image:choiceimages.png]]

''' Instructions for creating an Index with images '''
# Add each image into Analytica. For help with this step, see [[Graphics, frames, and text in a diagram#Adding_Graphics|Adding Graphics]].
# Get the identifier of each image. You can find the identifier of an image by clicking on the image node and either looking at the identifier in the Attribute panel or by opening object mode. It will generally start with “Pi” and end with numbers.
# Create a list of handles called ImageHandles using these image identifiers. Both [[MetaOnly]] index or [[Handle Functions#ListOfHandles.28x1.2C_x2.2C...2Cxn.29|ListofHandles]] will work.
# Pict of (ImageHandles) will give you an array with the images as the values.
# Use CopyIndex to turn the array indexed by the ListofHandles into an Index

''' Example code '''

The following code is an example of an Index with images when you have a list of identifiers PictureIdentifier1, PictureIdentifier2, etc:

<code>CopyIndex(Pict of ListofHandles(PictureIdentifier1, PictureIdentifier2, PictureIdentifier3))</code>

The following code is an example of an Index with all of the pictures in MyModuleWithPics:

<code>CopyIndex(Pict of #FindObjects(class:Picture, within:Handle(MyModuleWithPics))</code>

You can combine images and text in the same index when they are different slices of the array, e.g., [Picture, Text, Picture, Text], but you cannot combine images and text in the same slice, e.g., [Picture & Text, Picture & Text]].

Once you have your list of images, you can use it in a Choice node to get a Choice with images.

=== Filtering long Choice lists (ACP) ===
For lists with more than 10 options, ACP automatically adds a filtering option where the user can enter text to filter the list. This filtering option shows up at the top of the list when a user opens the Choice node like so:
[[image:choicefilter.png]]

Note that this feature is only available in ACP.

== History ==
Releases prior to Analytica 4.4.2 do not support extremely long option lists on the [[Choice]] popup. In those releases, the choice pulldown displays only the first 254 items, plus the selected item. This limitation is fixed in patch release 4.4.2, where no such limitation exists. If you have many options and for some reason cannot upgrade to 4.4.2 or later, consider creating a 2-stage hierarchical menu, where the first pulldown offers subgroups, and the second shows a the items in that subgroup.

Pulldowns in [[Analytica 4.5]] and later are described [[#In Analytica 4.5 or later|above]].

[[Analytica 6.4]] added an option to add a hierarchical organization to the items by specifying an optional «nestUnder» parameter.

== See Also ==
* [[Choice menu user input]]
* [[Choice menus and Checkboxes in an edit table]]
* [[MultiChoice]]
* [[Checkbox]]
* [[Slider]]
* [[AskMsgChoice]]
* [[MetaOnly]]
* Webinar on [[Analytica_User_Group/Past_Topics#Creating_Control_Panels|Creating Control Panels]]

File:Choiceimages.png

2025-02-05T19:09:59Z

Klee2: Example of choice node with images

== Summary ==
Example of choice node with images

Analytica Docs

2025-01-28T22:42:07Z

Klee2: updated since themes library was renamed

[[Category: Analytica Docs]]
{| class="wikitable" style="width: 90%"
|style="width: 100%;border: 1px solid #ffffff;background-color:#ffffff; text-align:center;" |
[[File:Splashero.png|center|500px]]

|}

{| class="wikitable" style="width: 100%; border: 1px solid #ffffff"
|style="width: 33%;border: 1px solid #ffffff;padding: 10px; background-color:#ffffff;vertical-align:top;"|
<big>'''About'''</big> 
[[What are these Analytica docs?]] 
[[Open these docs from Analytica]] 
[[Edit and improve these docs]] 
|style="width: 33%;border: 1px solid #ffffff;padding: 10px; background-color:#ffffff;vertical-align:top;"|
<big>'''Analytica'''</big> 
[[What's new|What's new in the latest release?]] 
[[What's new in ACP?]] 
[[Editions of Analytica|Compare editions]] 
[https://analytica.com/products/free/ Download Analytica Free Edition] 
[https://analytica.com/analytica-downloads/ Download Analytica and ADE] 
|style="width: 33%;border: 1px solid #ffffff;padding: 10px; background-color:#ffffff;vertical-align:top;"|
<big>'''Getting Started'''</big> 
[[Analytica Tutorial|Tutorial]] 
[[Building Effective Models]] 
[[Creating Lucid Influence Diagrams]] 
[[Indexes and arrays: An introduction|Intro to Indexes and Arrays]] 
[[Example Models and Libraries]] 
|}

{| class="wikitable" style="width: 100%;vertical-align:top;"
|-
! colspan="2"| Featured pages
|-
|rowspan="3" style="width: 50%;vertical-align:top;"| <big>[[OpenAI API library]]</big> 
The Open AI API library is a collection of Analytica functions that interface with generative A.I. models from within your Analytica model. You can leverage the flexibility of large language models (LLMs) to perform tasks that would be hard to do in a formal program or model, and you can generate images from text. The library is also a great way to learn about generative A.I. from within Analytica. ([[OpenAI API library|Full article...]])

|[[Database library]]: A library of functions to make it easy to create, read, update, examine and delete database tables, without having to write SQL.
|-
|[[Themes Library]]: Use the Themes Library to quickly update your diagram and graph styles with some new and updated preset themes!
|-
|[[Weibull estimation library]]: This library includes functions for estimating Weibull distributions for lifespan or time to failure from data, and to obtain mean, median, and variance, and percentiles of a Weibull from its shape (k) and scale (lamda) parameters (and vice versa).
|}

Color Themes Library

2025-01-28T22:41:17Z

Klee2: moved to new THemes Library page

#REDIRECT [[Themes Library]]

File:Themes Library.ana

2025-01-28T22:39:34Z

Klee2: Uploading new version

== Summary ==
Uploading new version

Themes Library

2025-01-28T22:38:23Z

Klee2: /* Release Notes */

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Themes Library.ana|Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!Lumina
[[File:2023theme.png|frameless]]
!Lumina Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear in the top section of the menu. These include the following options:

* '''Graph theme''' provides a list of pre-made graph themes for you to choose from. Note that if you change the graph theme, the other options will update to the theme defaults.
* '''Graph font''' changes the font used in graph labels and titles.
* '''Line thickness''' changes the thickness of the line in line graphs.
* '''Include graph borders''' toggles borders on and off in graphs.
* '''Adapt font size to window''' toggles the adaptive font setting. When this is on, text in graphs will resize as the graph window changes heights.
* '''Axis title formatting''' changes the font formatting for axis titles.
* '''Axis title font size''' changes the font size for axis titles and key titles only
* '''Axis label font size''' changes the font size for axis labels and key labels only

Changing these selections will update the default graph settings accordingly. These settings will also be exported if you choose to [[Themes Library#Export Anastyle|export an Anastyle]] using the library.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Themes Library
!Lumina
[[File:Graphin2023theme.png|frameless]]
!Lumina Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Lumina Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Lumina Dark Rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released January 28, 2025. Updates include:
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

Previous release notes:
=== July 6, 2023 ===
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

File:Colorthemeslibrary.jpg

2025-01-28T22:36:19Z

Klee2: Klee2 uploaded a new version of File:Colorthemeslibrary.jpg

== Summary ==
Screenshot of the Color Themes Library UI upon opening

Themes Library

2025-01-28T22:34:54Z

Klee2: /* Download */

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Themes Library.ana|Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!Lumina
[[File:2023theme.png|frameless]]
!Lumina Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear in the top section of the menu. These include the following options:

* '''Graph theme''' provides a list of pre-made graph themes for you to choose from. Note that if you change the graph theme, the other options will update to the theme defaults.
* '''Graph font''' changes the font used in graph labels and titles.
* '''Line thickness''' changes the thickness of the line in line graphs.
* '''Include graph borders''' toggles borders on and off in graphs.
* '''Adapt font size to window''' toggles the adaptive font setting. When this is on, text in graphs will resize as the graph window changes heights.
* '''Axis title formatting''' changes the font formatting for axis titles.
* '''Axis title font size''' changes the font size for axis titles and key titles only
* '''Axis label font size''' changes the font size for axis labels and key labels only

Changing these selections will update the default graph settings accordingly. These settings will also be exported if you choose to [[Themes Library#Export Anastyle|export an Anastyle]] using the library.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Themes Library
!Lumina
[[File:Graphin2023theme.png|frameless]]
!Lumina Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Lumina Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Lumina Dark Rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released January 28, 2025. Updates include:
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

Previous release notes:
=== July 6, 2023 ====
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

Themes Library

2025-01-28T22:34:18Z

Klee2: /* Graph Examples Menu */

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Color Themes Library.ana|Color Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!Lumina
[[File:2023theme.png|frameless]]
!Lumina Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear in the top section of the menu. These include the following options:

* '''Graph theme''' provides a list of pre-made graph themes for you to choose from. Note that if you change the graph theme, the other options will update to the theme defaults.
* '''Graph font''' changes the font used in graph labels and titles.
* '''Line thickness''' changes the thickness of the line in line graphs.
* '''Include graph borders''' toggles borders on and off in graphs.
* '''Adapt font size to window''' toggles the adaptive font setting. When this is on, text in graphs will resize as the graph window changes heights.
* '''Axis title formatting''' changes the font formatting for axis titles.
* '''Axis title font size''' changes the font size for axis titles and key titles only
* '''Axis label font size''' changes the font size for axis labels and key labels only

Changing these selections will update the default graph settings accordingly. These settings will also be exported if you choose to [[Themes Library#Export Anastyle|export an Anastyle]] using the library.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Themes Library
!Lumina
[[File:Graphin2023theme.png|frameless]]
!Lumina Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Lumina Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Lumina Dark Rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released January 28, 2025. Updates include:
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

Previous release notes:
=== July 6, 2023 ====
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

File:Graphexamplesmenu.png

2025-01-28T22:33:38Z

Klee2: Klee2 uploaded a new version of File:Graphexamplesmenu.png

Screenshot of the Graph Examples Menu from the Color Themes Library

Themes Library

2025-01-28T22:33:06Z

Klee2: /* Graph Examples Menu */

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Color Themes Library.ana|Color Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!Lumina
[[File:2023theme.png|frameless]]
!Lumina Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear in the top section of the menu. These include the following options:

* '''Graph theme''' provides a list of pre-made graph themes for you to choose from. Note that if you change the graph theme, the other options will update to the theme defaults.
* '''Graph font''' changes the font used in graph labels and titles.
* '''Line thickness''' changes the thickness of the line in line graphs.
* '''Include graph borders''' toggles borders on and off in graphs.
* '''Adapt font size to window''' toggles the adaptive font setting. When this is on, text in graphs will resize as the graph window changes heights.
* '''Axis title formatting''' changes the font formatting for axis titles.
* '''Axis title font size''' changes the font size for axis titles and key titles only
* '''Axis label font size''' changes the font size for axis labels and key labels only

Changing these selections will update the default graph settings accordingly. These settings will also be exported if you choose to [[Themes Library#Export Anastyle|export an Anastyle]] using the library.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Color Themes Library
!Lumina
[[File:Graphin2023theme.png|frameless]]
!Lumina Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Lumina Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Lumina Dark Rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released January 28, 2025. Updates include:
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

Previous release notes:
=== July 6, 2023 ====
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

Themes Library

2025-01-28T22:31:24Z

Klee2: /* Graph Examples Menu */ updates to graphing options

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Color Themes Library.ana|Color Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!Lumina
[[File:2023theme.png|frameless]]
!Lumina Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear in the top section of the menu. These include the following options:

* '''Graph theme''' provides a list of pre-made graph themes for you to choose from. Note that if you change the graph theme, the other options will update to the theme defaults.
* '''Graph font''' changes the font used in graph labels and titles.
* '''Line thickness''' changes the thickness of the line in line graphs.
* '''Include graph borders''' toggles borders on and off in graphs.
* '''Adapt font size to window''' toggles the adaptive font setting. When this is on, text in graphs will resize as the graph window changes heights.
* '''Axis title formatting''' changes the font formatting for axis titles.
* '''Axis title font size''' changes the font size for axis titles and key titles only
* '''Axis label font size''' changes the font size for axis labels and key labels only

Changing these selections will update the default graph settings accordingly. These settings will also be exported if you choose to [[export an Anastyle]] using the library.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Color Themes Library
!Lumina
[[File:Graphin2023theme.png|frameless]]
!Lumina Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Lumina Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Lumina Dark Rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released January 28, 2025. Updates include:
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

Previous release notes:
=== July 6, 2023 ====
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

Themes Library

2025-01-28T21:53:21Z

Klee2: /* Diagram colors */ renamed 2023 theme

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Color Themes Library.ana|Color Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Themes Library
!Lumina
[[File:2023theme.png|frameless]]
!Lumina Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear on the right hand side of the menu. The '''Graph theme''' drop-down menu provides a list of graph theme options for you to choose from. The '''Graph font size''' drop-down menu will change the font size in graphs. And the '''Include graph borders''' checkbox allows you to toggle borders on and off in graphs. Changing these selections will update the graph settings accordingly.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Color Themes Library
!Lumina
[[File:Graphin2023theme.png|frameless]]
!Lumina Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Lumina Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Lumina Dark Rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released January 28, 2025. Updates include:
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

Previous release notes:
=== July 6, 2023 ====
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

Themes Library

2025-01-28T21:52:19Z

Klee2: Copied page

[[category:Function libraries]]
Use the '''Themes Library''' to quickly update your diagram and graph styles with some new and updated preset themes! Simply add the '''Themes Library''' into your model to update your model’s theme. Here is a video to walk you through the process:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gPu_SDDEmJc?si=tO1DT6pCDXndd-w8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

When you open the '''Themes Library''', you’ll see the following screen:

[[File:Colorthemeslibrary.jpg|alt=|frameless|600x600px]]

The '''Themes Library''' shows examples of each node class, including text, picture, form, and slider defaults as well as an Example Diagram to show how the selected theme looks. To the right of the example nodes there is a button '''Apply example node styles as default style'''. Under these examples there is a '''Select Diagram Theme''' menu which allows you to select theme and other options, and to the right of that menu there is an '''Additional Settings''' module and two buttons, '''Set all nodes to default color and border styles''' and '''Export Anastyle'''. At the bottom of the window is the '''Graph Examples''' menu which allows you to select graph themes and see examples of the selected settings on various graph types.

== Download ==
You can download the Themes Library here: [[Media:Color Themes Library.ana|Color Themes Library.ana]]. To use it, simply add the library into your model.

== Notes ==

* Nodes and graphs that already have non-default options selected will not update when defaults are changed. If you have nodes with explicit color and style settings that you would like to revert to model defaults, use the '''Set all nodes to default color and border styles''' button at the bottom right of the library.
* Arrow border colors will only change in Analytica versions 6.3.0 or newer
* [[Slider|Slider bars]] (and styles) will only display in Analytica versions 6.3.0 or newer
* Bar graph outlines will only change in Analytica versions 5.0.7 or newer

== Make a new style ==

[[File:Colorthemeslibrary examplenodes.png|892x892px]]

In Edit Mode you can change the colors and other styles of these example nodes at the top of the library diagram. Use the [[Color palette]] and [[Node Style dialog]]. Once you've set the styles you want, click the '''Apply example node styles as default style''' button to set these styles as the model default style. They will apply to all nodes in the model (except any that have their own nondefault styles). You can then export these styles as an Anastyle using the '''Export Anastyle''' button at the bottom of the library window, so you can easily apply them to other models.

Note that the font styles of these nodes will '''not''' be applied to the default style. The default model font is set in the [[Diagram Style dialog]].

Any changes made to these nodes and the default style will be reset if you select different Diagram colors in the '''Select Diagram Theme''' menu below.

== Select Diagram Theme Menu ==
[[File:Selectdiagramtheme.png|alt=|frameless]]

Use the '''Select Diagram Theme''' menu to update your model’s default theme options. This menu includes the following options:

* Diagram colors
* Node borders
* Font size
* Font

==== Diagram colors ====
The '''Diagram colors''' drop-down select menu allows you to select one of our preset themes. Changing this menu automatically updates model defaults to the selected theme.

The available themes are shown in the table below:
{| class="wikitable"
|+Diagram Color Themes available in Color Themes Library
!2023
[[File:2023theme.png|frameless]]
!2023 Dark
[[File:2023darktheme.png|alt=2023 Dark Colors Theme|frameless]]
|-
!Classic
[[File:Classictheme.png|frameless]]
!Monochrome
[[File:Monochrometheme.png|frameless]]
|-
!Viridis
[[File:Viridistheme.png|frameless]]
!Plasma
[[File:Plasmatheme.png|frameless]]
|}
See the [https://lumina.com/behind-the-scenes-5-3-color-themes/ Lumina Blog] for insight on how the Viridis and Plasma themes were designed.

==== Node borders ====
Use the '''Node borders''' option to select node border style.

Select ''None'' to turn off node borders. Selecting this option will also toggle borders on and off in graphs. ''Monochrome'' sets a single border color for all nodes and ''Color'' sets custom border colors depending on each nodes’ color. See the table below for examples of the options:
{| class="wikitable"
|+Examples of nodes with different Node borders options
!None
!Monochrome
!Color
|-
|[[File:Examplediagramnoborders.png|frameless]]
|[[File:Examplediagramwithstandardborders.png|frameless]]
|[[File:Examplediagramwithnodecolorborders.png|frameless]]
|}
Some themes will automatically update the Include borders option to the selected theme’s default when you change themes, but this option can still be changed according to your tastes.

==== Font Size ====
The '''Font size''' menu allows you to change the font size of your model. This will affect the text and tables in diagrams, graphs, Object View, and Result View.

==== Font ====
The '''Font''' menu allows you to change the font of your model. This will affect the text in diagrams and graphs.

== Graph Examples Menu ==
[[File:Graphexamplesmenu.png|frameless|512x512px]]

The '''Graph Examples''' menu allows you to change your graph theme and view various example graphs. By default, the S'''ame diagram and graph themes''' option is selected and graphs will match the selected '''Diagram colors'''.

If you uncheck the '''Same diagram and graph themes''' option, several menus will appear on the right hand side of the menu. The '''Graph theme''' drop-down menu provides a list of graph theme options for you to choose from. The '''Graph font size''' drop-down menu will change the font size in graphs. And the '''Include graph borders''' checkbox allows you to toggle borders on and off in graphs. Changing these selections will update the graph settings accordingly.

Click the Result icon ([[File:VirtButtonBareIcon6.0.png]]) for each graph type to see an example.

Examples of the available themes are shown in the table below:
{| class="wikitable"
|+Graph Themes available in Color Themes Library
!Lumina
[[File:Graphin2023theme.png|frameless]]
!Lumina Dark
[[File:Graphin2023darktheme.png|frameless]]
|-
!Lumina Rainbow
[[File:Graphin2023rainbowtheme.png|frameless]]
!Lumina Dark Rainbow
[[File:Graphin2023darkrainbowgraphtheme.png|frameless]]
|-
!Classic
[[File:Graphinclassictheme.png|frameless]]
!Monochrome
[[File:Graphinmonochrometheme.png|frameless]]
|-
!Viridis
[[File:Graphinviridistheme.png|frameless]]
!Plasma
[[File:Graphinplasmatheme.png|frameless]]
|}

== Set all nodes to default color and border styles ==
At the bottom right of the '''Themes Library''' is a '''Set all nodes to default color and border styles''' button. Nodes with explicit colors and styles will not update when model defaults are changed. This button reset all nodes with explicit colors and styles so they will use the defaults, ''i.e.'', the colors from the selected theme, again.

== Export Anastyle ==
At the bottom right of the '''Themes Library''' is an '''Export Anastyle''' button. Clicking on this button will save the current model's default diagram and graph theme options into an [[Anastyles|Anastyle]] file that can be imported into other models. This way you can easily import your selected options into other models without having to import the '''Themes Library''' and select your options again. You can import an Anastyle file to a model the same way you would add a Library into a model.

See [[Anastyles]] for more information.

== Additional Settings ==
[[File:Colorthemeslibrary additionalsettings.png|617x617px]]

The '''Additional Settings''' module is located on the right hand side of the library under the example nodes. Open this module to access Arrow Settings and Corner Settings.

=== Arrow Settings ===
The Arrow settings menu allows you to change the default size and color of arrows.

Use the '''Arrow size''' drop-down select menu to change the arrow size.

Change the arrow color by changing the color of the '''Arrow color''' node, then pressing the '''Apply color''' button beneath it. Your selected color will not be applied as the default color until you press the '''Apply color''' button. Note that you must be in Edit mode to change the Arrow color node. If you are in Edit mode, you can open the Color Palette by right-clicking on the Arrow color node and selecting Show/Hide Color Palette.

=== Corner Settings ===
The Corner Settings menu allows you to change the default corner radius of certain objects.

Use the '''Set corner radius to''' drop-down select menu to select a corner radius. The Null option selects the system default corner radius.

Use the '''For object types''' multi-choice select menu to select which objects the corner radius settings should apply to. Options include Text nodes, Frame nodes, User inputs and outputs, and Buttons.

== Reverting to the Classic Theme ==
If you’re using the '''Themes Library''' and would like to go back to the Classic Analytica theme, you can simply select the Classic diagram colors and graph theme options.

Analytica also comes with the default Classic theme saved as an [[Anastyles|Anastyle]] file. You can use this file to revert any model to the Classic Theme without importing the '''Themes Library''' using the following steps:

# Go to '''File''' > '''Add Library…'''
# This should open the '''Select Library File''' window. By default this should be open in the '''Libraries''' folder. If not, this '''Libraries''' folder is usually accessible by going to C:/Program Files/Lumina/Analytica/Libraries.
# Open the '''Node Styles''' folder.
# Select the '''Defaults.anastyle''' file and press '''Open'''.

== Release Notes ==
The latest Themes Library was released January 28, 2025. Updates include:
* Renamed library from Color Themes Library to Themes Library
* Renamed 2023 theme to Lumina theme
* Added additional graph theme options

Previous release notes:
=== July 6, 2023 ====
* Fixed Export Anastyle bug when Classic theme is selected
* Ability to change example node styles and apply them as default styles
* Arrow Settings and Corner Settings added in Additional Settings module
* Export Anastyle button now exports the current default settings to accommodate any customization made
* Library variable identifiers have now been prefixed to avoid name conflicts when importing into models

Decision tree library

2025-01-07T19:34:50Z

Klee2: fix auto indent in first line

This library helps you build decision trees in Analytica and calculates the value of each node in your tree.

==Download==
'''Last update:''' 1-Jan-2025

You can download the Decision tree library here: [[Media:Decision Tree library.ana|Decision Tree library.ana]]

==Overview==
When you open the library, you will see template nodes and options at the top of the window. Use these to build your decision tree. See [[#Instructions for building a decision tree|Instructions for building a decision tree]] below on how to build the tree and see [[#Decision tree node labels|Decision tree node labels]] below more on labels.

This table describes each of the node types in this library:
{| class="wikitable"
|+Decision tree node types
!Node type
!Description
|-
|[[File:DecisionTree decisionnode.png|frameless|125x125px]]
|Used for decisions. The value of this node is the maximum value of all downstream decision options. E.g., if a decision has Decision option A worth $1M and Decision option B worth $1.5M, the value of the decision will be $1.5M.
|-
|[[File:DecisionTree decisionoptnode.png|frameless|125x125px]]
|Used for each decision option and must be immediately downstream of a decision node. The user inputs are costs and revenues for the option. The value of this node is the cumulative value of its downstream path including its own costs and revenues.
|-
|[[File:DecisionTree chancenode.png|frameless|125x125px]]
|Used to denote an uncertain outcome or chance. The value of this node is the probability-weighted sum of each downstream chance outcome’s value.
|-
|[[File:DecisionTree chanceoptionnode.png|frameless|125x125px]]
|Used for each possible outcome of a chance node and must be immediately downstream of a chance node. The user input is the probability of the outcome. The value of this node is the cumulative value of its downstream path.
|-
|[[File:DecisionTree costrevnode.png|frameless|125x125px]]
|Used to add cost or revenue to a path. The user inputs are costs and revenues. The value of this node is the cumulative value of its downstream path including its own costs and revenues.
|-
|[[File:DecisionTree terminalnode.png|frameless|125x125px]]
|The final node in a path. This is the only node that can have more than one upstream node(i.e. more than one upstream arrow), but only when all paths leading to this node have equal value. The user inputs are costs and revenues. The value of this node is the cumulative value of the entire path, including its own costs and revenues.
|-
|[[File:DecisionTree miscdesp.png|frameless|125x125px]]
|Used to add a miscellaneous descriptor to a path, but does not change the value of the path.
|-
|[[File:DecisionTree bannerlabel.png|frameless|125x125px]]
|Used to add labels to the diagram, such as timeline or milestone markers.
|}

==Instructions for building a decision tree==

# Enter edit mode by clicking on the cursor icon in the toolbar menu: [[File:ACPT EditMode.png|frameless]]
# To add a node to the tree, use the template nodes shown at the top of the model: [[File:DecisionTree templatenodes.png|594x594px]]
## Select the template node you want to use
## Press Ctrl+D to duplicate the template.
## Drag the duplicate to where you want to place it
## To rename the node: click on the node, then click on the node title, and enter a new title.
# To add dependency links, draw arrows between nodes. You can do this by hovering over the right edge of a node until you see the arrow icon: [[File:DecisionTree nodehover.png|143x143px]] Hover your cursor over the arrow until it turns into a white arrow, and then click and drag your cursor to the node you want to connect to. Make sure you are connecting to the node (the whole node should be highlighted) and not to a table icon on top of the node.
# To remove a dependency link, redraw the arrow between the nodes (step 3) to remove it. Note that selecting the arrow and clicking delete or backspace will not properly remove the dependency.
# For select node types, populate user inputs by clicking this table icon: [[File:EditTableInputIcon.png|26x26px]] Ensure costs and revenues are all in present-value amounts for the same reference year across the whole tree. If you don't see a table icon when you are expecting one, you can add one by clicking on the '''''Show input fields''''' button in the top right of the library menu.
# To add custom text labels to your Decision Tree, you can duplicate the yellow and orange banner labels to the left of the template nodes and add them to your tree.
## Change the background color of banner labels by right clicking on the banner and selecting Show/Hide Color Palette. This should bring up the Color Palette in the upper right corner of your Analytica window. If you select a different color, the selected banner will change to that color.
# Once you have built your tree, press the '''''Evaluate tree''''' button to create value and/or probability labels for each node. You can control how the labels display and what information is displayed in the '''''Label options''''' module. You can also decide whether you want the labels to be created as you build the model and if you want labels to be realigned whenever they update using the options in the toolbar. See the '''''Labels options''''' module for more information.

==Decision tree node labels==
On the right hand side of the template menu there are some label options:

[[File:DecisionTree labeloptions.png|594x594px]]

The following options are available from the main screen which will affect labels:
{| class="wikitable"
!Option
!Description
|-
|[[File:DecisionTree updatelabels.png|125x125px]]
|Adds all input table icons to the relevant nodes in the tree
|-
|[[File:DecisionTree removelabelsbutton.png|125x125px]]
|Removes all labels, making it easy to reorganize the placement of nodes.
|-
|[[File:Screenshot 2025-01-02 101148.png|125x125px]]
|Evaluates the tree and updates the labels such that new labels are created for missing or deleted labels.
|-
|[[File:DecisionTree deletetreebutton.png|125x125px]]
|Deletes the tree. This cannot be undone.
|-
|[[File:DecisionTree realignlabels.png|frameless|125x125px]]
|Controls whether labels are realigned to their parent nodes when updated. Uncheck to maintain your custom placement of labels.
|}
Open the '''''Label options''''' module to control specific label options, such as:
* label and node font and font size
* label number and currency formatting
* which inputs and outputs are displayed
* where inputs and outputs are positioned relative to their parent node
* whether to display 0 values in labels
* whether to append multiple items in a single label vertically or horizontally
* whether to display input and output item names with their values
* whether to color negative and positive EV values red and green

==Example models==
* ''[[Media:Decision Tree party problem.ana|Decision Tree party problem.ana]]: '' This example model takes the party problem from the [[Tutorial:_Decision_trees|Tutorial: Decision trees]] chapter and uses the Decision tree library to create a decision tree of the same problem.

Decision tree library

2025-01-07T19:34:32Z

Klee2: /* Decision tree node labels */ reordered label options content

Decision tree library

2025-01-02T19:27:35Z

Klee2:

This library helps you build decision trees in Analytica and calculates the value of each node in your tree.

==Download==
'''Last update:''' 1-Jan-2025

You can download the Decision tree library here: [[Media:Decision Tree library.ana|Decision Tree library.ana]]

==Overview==
When you open the library, you will see template nodes and options at the top of the window. Use these to build your decision tree. See [[#Instructions for building a decision tree|Instructions for building a decision tree]] for specific instructions on how to build the tree and see [[#Decision tree node labels|Decision tree node labels]] for more information about label options.

The following table provides a brief description of each of the node types in this library.
{| class="wikitable"
|+Decision tree node types
!Node type
!Description
|-
|[[File:DecisionTree decisionnode.png|frameless|125x125px]]
|Used for decisions. The value of this node is the maximum value of all downstream decision options. E.g., if a decision has Decision option A worth $1M and Decision option B worth $1.5M, the value of the decision will be $1.5M.
|-
|[[File:DecisionTree decisionoptnode.png|frameless|125x125px]]
|Used for each decision option and must be immediately downstream of a decision node. The user inputs are costs and revenues for the option. The value of this node is the cumulative value of its downstream path including its own costs and revenues.
|-
|[[File:DecisionTree chancenode.png|frameless|125x125px]]
|Used to denote an uncertain outcome or chance. The value of this node is the probability-weighted sum of each downstream chance outcome’s value.
|-
|[[File:DecisionTree chanceoptionnode.png|frameless|125x125px]]
|Used for each possible outcome of a chance node and must be immediately downstream of a chance node. The user input is the probability of the outcome. The value of this node is the cumulative value of its downstream path.
|-
|[[File:DecisionTree costrevnode.png|frameless|125x125px]]
|Used to add cost or revenue to a path. The user inputs are costs and revenues. The value of this node is the cumulative value of its downstream path including its own costs and revenues.
|-
|[[File:DecisionTree terminalnode.png|frameless|125x125px]]
|The final node in a path. This is the only node that can have more than one upstream node(i.e. more than one upstream arrow), but only when all paths leading to this node have equal value. The user inputs are costs and revenues. The value of this node is the cumulative value of the entire path, including its own costs and revenues.
|-
|[[File:DecisionTree miscdesp.png|frameless|125x125px]]
|Used to add a miscellaneous descriptor to a path, but does not change the value of the path.
|-
|[[File:DecisionTree bannerlabel.png|frameless|125x125px]]
|Used to add labels to the diagram, such as timeline or milestone markers.
|}

==Instructions for building a decision tree==

# Enter edit mode by clicking on the cursor icon in the toolbar menu: [[File:ACPT EditMode.png|frameless]]
# To add a node to the tree, use the template nodes shown at the top of the model: [[File:DecisionTree templatenodes.png|594x594px]]
## Select the template node you want to use
## Press Ctrl+D to duplicate the template.
## Drag the duplicate to where you want to place it
## To rename the node: click on the node, then click on the node title, and enter a new title.
# To add dependency links, draw arrows between nodes. You can do this by hovering over the right edge of a node until you see the arrow icon: [[File:DecisionTree nodehover.png|143x143px]] Hover your cursor over the arrow until it turns into a white arrow, and then click and drag your cursor to the node you want to connect to. Make sure you are connecting to the node (the whole node should be highlighted) and not to a table icon on top of the node.
# To remove a dependency link, redraw the arrow between the nodes (step 3) to remove it. Note that selecting the arrow and clicking delete or backspace will not properly remove the dependency.
# For select node types, populate user inputs by clicking this table icon: [[File:EditTableInputIcon.png|26x26px]] Ensure costs and revenues are all in present-value amounts for the same reference year across the whole tree. If you don't see a table icon when you are expecting one, you can add one by clicking on the '''''Show input fields''''' button in the top right of the library menu.
# To add custom text labels to your Decision Tree, you can duplicate the yellow and orange banner labels to the left of the template nodes and add them to your tree.
## Change the background color of banner labels by right clicking on the banner and selecting Show/Hide Color Palette. This should bring up the Color Palette in the upper right corner of your Analytica window. If you select a different color, the selected banner will change to that color.
# Once you have built your tree, press the '''''Evaluate tree''''' button to create value and/or probability labels for each node. You can control how the labels display and what information is displayed in the '''''Label options''''' module. You can also decide whether you want the labels to be created as you build the model and if you want labels to be realigned whenever they update using the options in the toolbar. See the '''''Labels options''''' module for more information.

==Decision tree node labels==
On the right hand side of the template menu there are some label options:

[[File:DecisionTree labeloptions.png|594x594px]]

Open the '''''Label options''''' module to control specific label options, such as:

* label and node font and font size
* label number and currency formatting
* which inputs and outputs are displayed
* where inputs and outputs are positioned relative to their parent node
* whether to display 0 values in labels
* whether to append multiple items in a single label vertically or horizontally
* whether to display input and output item names with their values
* whether to color negative and positive EV values red and green

There are also the following options available from the main screen which will affect labels:
{| class="wikitable"
!Option
!Description
|-
|[[File:DecisionTree updatelabels.png|125x125px]]
|Adds all input table icons to the relevant nodes in the tree
|-
|[[File:DecisionTree removelabelsbutton.png|125x125px]]
|Removes all labels, making it easy to reorganize the placement of nodes.
|-
|[[File:Screenshot 2025-01-02 101148.png|125x125px]]
|Evaluates the tree and updates the labels such that new labels are created for missing or deleted labels.
|-
|[[File:DecisionTree deletetreebutton.png|125x125px]]
|Deletes the tree. This cannot be undone.
|-
|[[File:DecisionTree realignlabels.png|frameless|125x125px]]
|Controls whether labels are realigned to their parent nodes when updated. Uncheck to maintain your custom placement of labels.
|}

==Example models==
* ''[[Media:Decision Tree party problem.ana|Decision Tree party problem.ana]]: '' This example model takes the party problem from the [[Tutorial:_Decision_trees|Tutorial: Decision trees]] chapter and uses the Decision tree library to create a decision tree of the same problem.

File:DecisionTree removelabelsbutton.png

2025-01-02T19:24:43Z

Klee2: Klee2 uploaded a new version of File:DecisionTree removelabelsbutton.png

Decision tree library Remove labels button

File:DecisionTree updatelabels.png

2025-01-02T19:24:18Z

Klee2: Klee2 uploaded a new version of File:DecisionTree updatelabels.png

Decision tree library Update labels button

Decision tree library

2025-01-02T19:23:51Z

Klee2: /* Decision tree node labels */ updated images and button descriptions

This library helps you build decision trees in Analytica and calculates the value of each node in your tree.

==Download==
You can download the Decision tree library here: [[Media:Decision Tree library.ana|Decision Tree library.ana]]

==Overview==
When you open the library, you will see template nodes and options at the top of the window. Use these to build your decision tree. See [[#Instructions for building a decision tree|Instructions for building a decision tree]] for specific instructions on how to build the tree and see [[#Decision tree node labels|Decision tree node labels]] for more information about label options.

The following table provides a brief description of each of the node types in this library.
{| class="wikitable"
|+Decision tree node types
!Node type
!Description
|-
|[[File:DecisionTree decisionnode.png|frameless|125x125px]]
|Used for decisions. The value of this node is the maximum value of all downstream decision options. E.g., if a decision has Decision option A worth $1M and Decision option B worth $1.5M, the value of the decision will be $1.5M.
|-
|[[File:DecisionTree decisionoptnode.png|frameless|125x125px]]
|Used for each decision option and must be immediately downstream of a decision node. The user inputs are costs and revenues for the option. The value of this node is the cumulative value of its downstream path including its own costs and revenues.
|-
|[[File:DecisionTree chancenode.png|frameless|125x125px]]
|Used to denote an uncertain outcome or chance. The value of this node is the probability-weighted sum of each downstream chance outcome’s value.
|-
|[[File:DecisionTree chanceoptionnode.png|frameless|125x125px]]
|Used for each possible outcome of a chance node and must be immediately downstream of a chance node. The user input is the probability of the outcome. The value of this node is the cumulative value of its downstream path.
|-
|[[File:DecisionTree costrevnode.png|frameless|125x125px]]
|Used to add cost or revenue to a path. The user inputs are costs and revenues. The value of this node is the cumulative value of its downstream path including its own costs and revenues.
|-
|[[File:DecisionTree terminalnode.png|frameless|125x125px]]
|The final node in a path. This is the only node that can have more than one upstream node(i.e. more than one upstream arrow), but only when all paths leading to this node have equal value. The user inputs are costs and revenues. The value of this node is the cumulative value of the entire path, including its own costs and revenues.
|-
|[[File:DecisionTree miscdesp.png|frameless|125x125px]]
|Used to add a miscellaneous descriptor to a path, but does not change the value of the path.
|-
|[[File:DecisionTree bannerlabel.png|frameless|125x125px]]
|Used to add labels to the diagram, such as timeline or milestone markers.
|}

==Instructions for building a decision tree==

# Enter edit mode by clicking on the cursor icon in the toolbar menu: [[File:ACPT EditMode.png|frameless]]
# To add a node to the tree, use the template nodes shown at the top of the model: [[File:DecisionTree templatenodes.png|594x594px]]
## Select the template node you want to use
## Press Ctrl+D to duplicate the template.
## Drag the duplicate to where you want to place it
## To rename the node: click on the node, then click on the node title, and enter a new title.
# To add dependency links, draw arrows between nodes. You can do this by hovering over the right edge of a node until you see the arrow icon: [[File:DecisionTree nodehover.png|143x143px]] Hover your cursor over the arrow until it turns into a white arrow, and then click and drag your cursor to the node you want to connect to. Make sure you are connecting to the node (the whole node should be highlighted) and not to a table icon on top of the node.
# To remove a dependency link, redraw the arrow between the nodes (step 3) to remove it. Note that selecting the arrow and clicking delete or backspace will not properly remove the dependency.
# For select node types, populate user inputs by clicking this table icon: [[File:EditTableInputIcon.png|26x26px]] Ensure costs and revenues are all in present-value amounts for the same reference year across the whole tree. If you don't see a table icon when you are expecting one, you can add one by clicking on the '''''Show input fields''''' button in the top right of the library menu.
# To add custom text labels to your Decision Tree, you can duplicate the yellow and orange banner labels to the left of the template nodes and add them to your tree.
## Change the background color of banner labels by right clicking on the banner and selecting Show/Hide Color Palette. This should bring up the Color Palette in the upper right corner of your Analytica window. If you select a different color, the selected banner will change to that color.
# Once you have built your tree, press the '''''Evaluate tree''''' button to create value and/or probability labels for each node. You can control how the labels display and what information is displayed in the '''''Label options''''' module. You can also decide whether you want the labels to be created as you build the model and if you want labels to be realigned whenever they update using the options in the toolbar. See the '''''Labels options''''' module for more information.

==Decision tree node labels==
On the right hand side of the template menu there are some label options:

[[File:DecisionTree labeloptions.png|594x594px]]

Open the '''''Label options''''' module to control specific label options, such as:

* label and node font and font size
* label number and currency formatting
* which inputs and outputs are displayed
* where inputs and outputs are positioned relative to their parent node
* whether to display 0 values in labels
* whether to append multiple items in a single label vertically or horizontally
* whether to display input and output item names with their values
* whether to color negative and positive EV values red and green

There are also the following options available from the main screen which will affect labels:
{| class="wikitable"
!Option
!Description
|-
|[[File:DecisionTree updatelabels.png|125x125px]]
|Adds all input table icons to the relevant nodes in the tree
|-
|[[File:DecisionTree removelabelsbutton.png|125x125px]]
|Removes all labels, making it easy to reorganize the placement of nodes.
|-
|[[File:Screenshot 2025-01-02 101148.png]]
|Evaluates the tree and updates the labels such that new labels are created for missing or deleted labels.
|-
|[[File:DecisionTree deletetreebutton.png]]
|Deletes the tree. This cannot be undone.
|-
|[[File:DecisionTree realignlabels.png|frameless|125x125px]]
|Controls whether labels are realigned to their parent nodes when updated. Uncheck to maintain your custom placement of labels.
|}

==Example models==
* ''[[Media:Decision Tree party problem.ana|Decision Tree party problem.ana]]: '' This example model takes the party problem from the [[Tutorial:_Decision_trees|Tutorial: Decision trees]] chapter and uses the Decision tree library to create a decision tree of the same problem.

File:DecisionTree deletetreebutton.png

2025-01-02T19:23:25Z

Klee2:

Decision tree library delete tree button

File:Screenshot 2025-01-02 101148.png

2025-01-02T19:21:42Z

Klee2:

Evaluate tree button for decision tree library

File:DecisionTree labeloptions.png

2025-01-02T19:15:15Z

Klee2: Klee2 uploaded a new version of File:DecisionTree labeloptions.png

Decision Tree label options highilghted

File:DecisionTree templatenodes.png

2025-01-02T19:14:40Z

Klee2: Klee2 uploaded a new version of File:DecisionTree templatenodes.png

Decision tree library template nodes highlighted

Decision tree library

2025-01-02T19:13:27Z

Klee2: minor updates to reflect new library version

This library helps you build decision trees in Analytica and calculates the value of each node in your tree.

==Download==
You can download the Decision tree library here: [[Media:Decision Tree library.ana|Decision Tree library.ana]]

==Overview==
When you open the library, you will see template nodes and options at the top of the window. Use these to build your decision tree. See [[#Instructions for building a decision tree|Instructions for building a decision tree]] for specific instructions on how to build the tree and see [[#Decision tree node labels|Decision tree node labels]] for more information about label options.

The following table provides a brief description of each of the node types in this library.
{| class="wikitable"
|+Decision tree node types
!Node type
!Description
|-
|[[File:DecisionTree decisionnode.png|frameless|125x125px]]
|Used for decisions. The value of this node is the maximum value of all downstream decision options. E.g., if a decision has Decision option A worth $1M and Decision option B worth $1.5M, the value of the decision will be $1.5M.
|-
|[[File:DecisionTree decisionoptnode.png|frameless|125x125px]]
|Used for each decision option and must be immediately downstream of a decision node. The user inputs are costs and revenues for the option. The value of this node is the cumulative value of its downstream path including its own costs and revenues.
|-
|[[File:DecisionTree chancenode.png|frameless|125x125px]]
|Used to denote an uncertain outcome or chance. The value of this node is the probability-weighted sum of each downstream chance outcome’s value.
|-
|[[File:DecisionTree chanceoptionnode.png|frameless|125x125px]]
|Used for each possible outcome of a chance node and must be immediately downstream of a chance node. The user input is the probability of the outcome. The value of this node is the cumulative value of its downstream path.
|-
|[[File:DecisionTree costrevnode.png|frameless|125x125px]]
|Used to add cost or revenue to a path. The user inputs are costs and revenues. The value of this node is the cumulative value of its downstream path including its own costs and revenues.
|-
|[[File:DecisionTree terminalnode.png|frameless|125x125px]]
|The final node in a path. This is the only node that can have more than one upstream node(i.e. more than one upstream arrow), but only when all paths leading to this node have equal value. The user inputs are costs and revenues. The value of this node is the cumulative value of the entire path, including its own costs and revenues.
|-
|[[File:DecisionTree miscdesp.png|frameless|125x125px]]
|Used to add a miscellaneous descriptor to a path, but does not change the value of the path.
|-
|[[File:DecisionTree bannerlabel.png|frameless|125x125px]]
|Used to add labels to the diagram, such as timeline or milestone markers.
|}

==Instructions for building a decision tree==

# Enter edit mode by clicking on the cursor icon in the toolbar menu: [[File:ACPT EditMode.png|frameless]]
# To add a node to the tree, use the template nodes shown at the top of the model: [[File:DecisionTree templatenodes.png|594x594px]]
## Select the template node you want to use
## Press Ctrl+D to duplicate the template.
## Drag the duplicate to where you want to place it
## To rename the node: click on the node, then click on the node title, and enter a new title.
# To add dependency links, draw arrows between nodes. You can do this by hovering over the right edge of a node until you see the arrow icon: [[File:DecisionTree nodehover.png|143x143px]] Hover your cursor over the arrow until it turns into a white arrow, and then click and drag your cursor to the node you want to connect to. Make sure you are connecting to the node (the whole node should be highlighted) and not to a table icon on top of the node.
# To remove a dependency link, redraw the arrow between the nodes (step 3) to remove it. Note that selecting the arrow and clicking delete or backspace will not properly remove the dependency.
# For select node types, populate user inputs by clicking this table icon: [[File:EditTableInputIcon.png|26x26px]] Ensure costs and revenues are all in present-value amounts for the same reference year across the whole tree. If you don't see a table icon when you are expecting one, you can add one by clicking on the '''''Show input fields''''' button in the top right of the library menu.
# To add custom text labels to your Decision Tree, you can duplicate the yellow and orange banner labels to the left of the template nodes and add them to your tree.
## Change the background color of banner labels by right clicking on the banner and selecting Show/Hide Color Palette. This should bring up the Color Palette in the upper right corner of your Analytica window. If you select a different color, the selected banner will change to that color.
# Once you have built your tree, press the '''''Evaluate tree''''' button to create value and/or probability labels for each node. You can control how the labels display and what information is displayed in the '''''Label options''''' module. You can also decide whether you want the labels to be created as you build the model and if you want labels to be realigned whenever they update using the options in the toolbar. See the '''''Labels options''''' module for more information.

==Decision tree node labels==
On the right hand side of the template menu there are some label options:

[[File:DecisionTree labeloptions.png|594x594px]]

Open the '''''Label options''''' module to control specific label options, such as:

* label and node font and font size
* label number and currency formatting
* which inputs and outputs are displayed
* where inputs and outputs are positioned relative to their parent node
* whether to display 0 values in labels
* whether to append multiple items in a single label vertically or horizontally
* whether to display input and output item names with their values
* whether to color negative and positive EV values red and green

There are also the following options available from the main screen which will affect labels:
{| class="wikitable"
!Option
!Description
|-
|[[File:DecisionTree removelabelsbutton.png|125x125px]]
|Removes all labels, making it easy to reorganize the placement of nodes.
|-
|[[File:DecisionTree updatelabels.png|125x125px]]
|Updates the labels, such that new labels are created for missing or deleted labels.
|-
|[[File:DecisionTree realignlabels.png|frameless|125x125px]]
|Controls whether labels are realigned to their parent nodes when updated. Uncheck to maintain your custom placement of labels.
|-
|[[File:DecisionTree createlabelsoption.png|125x125px]]
|Controls whether labels are created as nodes are added to the tree.
|}

==Example models==
* ''[[Media:Decision Tree party problem.ana|Decision Tree party problem.ana]]: '' This example model takes the party problem from the [[Tutorial:_Decision_trees|Tutorial: Decision trees]] chapter and uses the Decision tree library to create a decision tree of the same problem.

File:Decision Tree party problem.ana

2025-01-02T19:10:31Z

Klee2: Klee2 uploaded a new version of File:Decision Tree party problem.ana

== Summary ==
Party problem from the Tutorial using the Decision tree library

File:Decision Tree library.ana

2025-01-02T19:10:02Z

Klee2: Klee2 uploaded a new version of File:Decision Tree library.ana

Decision tree library model file

Embed an ACP model in a Web Page

2024-11-22T05:32:26Z

Klee2: /* ACP in an Iframe on a wordpress site */ added highlighting for clarity

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this. Insert your model's URL into the URL highlighted in yellow and adjust the sizes highlighted in cyan as necessary: </li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="</nowiki>900" height="446<nowiki>" src="</nowiki><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275</nowiki>"></iframe></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image and the following script. Add your URL in place of the yellow highlighted URL below, and adjust the cyan highlighted dimensions as necessary to fit your site.</li></ol>
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: </nowiki>900px; height: </nowiki>447px<nowiki>;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = '</nowiki><nowiki>https://acp.analytica.com/view?invite=4714&code=4200729999208732852</nowiki><nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.width = '</nowiki>900px<nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.height = '</nowiki>446px<nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]

Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

Here is example code to add these extra features. You will need to change the following highlighted code to customize it properly for your page:
* Yellow: Your model's URL
* Cyan: Your model's ideal display size
* Green: URL where you are hosting the minimize/maximize icon files
* Pink: URL where you are hosting a still image of your model (users click on this image, typically of the model itself, to run the model).

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: </nowiki>900px<nowiki>;</nowiki></code> 
      <code><nowiki>height: </nowiki>447px<nowiki>;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("</nowiki><nowiki>https://docs.analytica.com/images/9/9c/Arrows-maximize.png</nowiki>");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("</nowiki><nowiki>https://docs.analytica.com/images/8/82/Arrows-minimize.png</nowiki><nowiki>");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="</nowiki>ACPIframe02.png<nowiki>"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div></div>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = '</nowiki><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275</nowiki><nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

Here is example code to do this. You will need to change the following highlighted code to customize it properly for your page:
* Yellow: Your model's URL
* Cyan: Your model's display size
* Green: URL where you are hosting the minimize/maximize icon files
* Pink: URL where you are hosting a still image of your model (users click on this image, typically of the model itself, to run the model)
* Magenta: Dimensions of the still image of your model (pink)

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Code for an ACP model playing in an Iframe in elementor</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = '</nowiki><nowiki>https://acp.analytica.com/view0?invite=4314&code=2462049136540573676</nowiki><nowiki>';</nowiki></code> 
      <code><nowiki>iframe.style.width = '</nowiki>1210px<nowiki>';</nowiki></code> 
      <code><nowiki>iframe.style.height = '</nowiki>600px<nowiki>';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("</nowiki><nowiki>https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png</nowiki><nowiki>")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("</nowiki><nowiki>https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png</nowiki><nowiki>")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '</nowiki>1210px<nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.height = '</nowiki>600px<nowiki>';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '</nowiki>1210px<nowiki>';</nowiki></code> 
      <code><nowiki>iframe.style.height ='</nowiki>600px<nowiki>';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="</nowiki><nowiki>https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp</nowiki><nowiki>" width="</nowiki>1210px<nowiki>" height="</nowiki>648px<nowiki>" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div></div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]

Embed an ACP model in a Web Page

2024-11-22T05:18:08Z

Klee2: /* Buttons to expand to full screen and minimize */ added highlighting for clarity

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this. Insert your model's URL into the URL highlighted in yellow and adjust the sizes highlighted in cyan as necessary: </li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="</nowiki>900" height="446<nowiki>" src="</nowiki><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275</nowiki>"></iframe></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image and the following script. Add your URL in place of the yellow highlighted URL below, and adjust the cyan highlighted dimensions as necessary to fit your site.</li></ol>
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: </nowiki>900px; height: </nowiki>447px<nowiki>;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = '</nowiki><nowiki>https://acp.analytica.com/view?invite=4714&code=4200729999208732852</nowiki><nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.width = '</nowiki>900px<nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.height = '</nowiki>446px<nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]

Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

Here is example code to add these extra features. You will need to change the following highlighted code to customize it properly for your page:
* Yellow: Your model's URL
* Cyan: Your model's ideal display size
* Green: URL where you are hosting the minimize/maximize icon files
* Pink: URL where you are hosting a still image of your model (users click on this image, typically of the model itself, to run the model).

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: </nowiki>900px<nowiki>;</nowiki></code> 
      <code><nowiki>height: </nowiki>447px<nowiki>;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("</nowiki><nowiki>https://docs.analytica.com/images/9/9c/Arrows-maximize.png</nowiki>");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("</nowiki><nowiki>https://docs.analytica.com/images/8/82/Arrows-minimize.png</nowiki><nowiki>");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="</nowiki>ACPIframe02.png<nowiki>"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div></div>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = '</nowiki><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275</nowiki><nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Code for an ACP model playing in an Iframe in elementor</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210px" height="648px" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div></div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]

Embed an ACP model in a Web Page

2024-11-22T05:05:16Z

Klee2: /* Put an ACP model behind an image */ added highlighting for clarity

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this. Insert your model's URL into the URL highlighted in yellow and adjust the sizes highlighted in cyan as necessary: </li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="</nowiki>900" height="446<nowiki>" src="</nowiki><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275</nowiki>"></iframe></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image and the following script. Add your URL in place of the yellow highlighted URL below, and adjust the cyan highlighted dimensions as necessary to fit your site.</li></ol>
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: </nowiki>900px; height: </nowiki>447px<nowiki>;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = '</nowiki><nowiki>https://acp.analytica.com/view?invite=4714&code=4200729999208732852</nowiki><nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.width = '</nowiki>900px<nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.height = '</nowiki>446px<nowiki>';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]
Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: 900px;</nowiki></code> 
      <code><nowiki>height: 447px;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div></div>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Code for an ACP model playing in an Iframe in elementor</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210px" height="648px" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div></div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]

Embed an ACP model in a Web Page

2024-11-22T05:01:53Z

Klee2: /* Step 3: Insert the code for an Iframe. */ added highlighting for clarity

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this. Insert your model's URL into the URL highlighted in yellow and adjust the sizes highlighted in cyan as necessary: </li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="</nowiki>900" height="446<nowiki>" src="</nowiki><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275</nowiki>"></iframe></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image and the following script</li></ol>
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: 900px; height: 447px;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4714&code=4200729999208732852';</nowiki></code> 
        <code><nowiki>iframe.style.width = '900px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '446px';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]
Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: 900px;</nowiki></code> 
      <code><nowiki>height: 447px;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div></div>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Code for an ACP model playing in an Iframe in elementor</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210px" height="648px" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div></div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]

Embed an ACP model in a Web Page

2024-11-22T02:21:46Z

Klee2: /* ACP in an Iframe on a wordpress site */

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this:</li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="900" height="446" src="</nowiki></code><code style="color: red"><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275"></iframe></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image and the following script</li></ol>
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: 900px; height: 447px;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4714&code=4200729999208732852';</nowiki></code> 
        <code><nowiki>iframe.style.width = '900px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '446px';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]
Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: 900px;</nowiki></code> 
      <code><nowiki>height: 447px;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div></div>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Code for an ACP model playing in an Iframe in elementor</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210px" height="648px" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div></div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]

Embed an ACP model in a Web Page

2024-11-22T02:21:09Z

Klee2: /* ACP in an Iframe on a wordpress site */ collapsible section

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this:</li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="900" height="446" src="</nowiki></code><code style="color: red"><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275"></iframe></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image and the following script</li></ol>
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: 900px; height: 447px;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4714&code=4200729999208732852';</nowiki></code> 
        <code><nowiki>iframe.style.width = '900px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '446px';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]
Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: 900px;</nowiki></code> 
      <code><nowiki>height: 447px;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div></div>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Code for an ACP model playing in an Iframe in elementor</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210px" height="648px" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div></div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]

Embed an ACP model in a Web Page

2024-11-22T02:19:57Z

Klee2: /* Put an ACP model behind an image */

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this:</li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="900" height="446" src="</nowiki></code><code style="color: red"><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275"></iframe></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image and the following script</li></ol>
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: 900px; height: 447px;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4714&code=4200729999208732852';</nowiki></code> 
        <code><nowiki>iframe.style.width = '900px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '446px';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]
Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: 900px;</nowiki></code> 
      <code><nowiki>height: 447px;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div></div>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

'''Code for an ACP model playing in an Iframe in elementor.'''
<div style="margin-left: 2em;">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210px" height="648px" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]

Embed an ACP model in a Web Page

2024-11-22T02:18:40Z

Klee2: /* Buttons to expand to full screen and minimize */ collapsible sections

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this:</li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="900" height="446" src="</nowiki></code><code style="color: red"><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275"></iframe></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image. And the script following.
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: 900px; height: 447px;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4714&code=4200729999208732852';</nowiki></code> 
        <code><nowiki>iframe.style.width = '900px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '446px';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>
</li></ol>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]
Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: 900px;</nowiki></code> 
      <code><nowiki>height: 447px;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div></div>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

'''Code for an ACP model playing in an Iframe in elementor.'''
<div style="margin-left: 2em;">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210px" height="648px" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]

Embed an ACP model in a Web Page

2024-11-22T02:00:16Z

Klee2: /* Put an ACP model behind an image */ collapsible sample code

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this:</li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="900" height="446" src="</nowiki></code><code style="color: red"><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275"></iframe></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image. And the script following.
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: 900px; height: 447px;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4714&code=4200729999208732852';</nowiki></code> 
        <code><nowiki>iframe.style.width = '900px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '446px';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>
</li></ol>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]
Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

Here is some updated html and script.
<div style="margin-left: 2em;">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: 900px;</nowiki></code> 
      <code><nowiki>height: 447px;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div>
<div style="margin-left: 2em;">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

'''Code for an ACP model playing in an Iframe in elementor.'''
<div style="margin-left: 2em;">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210px" height="648px" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]

Embed an ACP model in a Web Page

2024-11-21T06:44:47Z

Klee2: /* Step 3: Insert the code for an Iframe. */

[[Category: Analytica Cloud Platform]]
[[Category: Models]]

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server such as [https://ACP.Analytica.com https://ACP.Analytica.com]. However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users. When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website.

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.

In this example, there are two servers.
*Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
*ACP’s server, https://acp.analytica.com, which hosts ACP and will contain the web page that plays your model. ''Since this page is an HTML frame, it will appear the model is being played on your web site.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]
#If your model doesn't already use [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. 
#:[[File:ACPFrame02.png|720px|thumb|left]] 
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this:</li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><iframe width="900" height="446" src="</nowiki></code><code style="color: red"><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275"></iframe></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div></div>

<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>


==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the image is clicked like a button.

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

1. Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:
a. Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
b. Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]
2. Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory. 
3. Add a div in the html source containing the container with the display image. And the script following.
<div style="margin-left: 2em;">
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Look at My Analytica Model</title></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><h1>Look at My Analytica Model</h1></nowiki></code> 
  <code><nowiki><div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: 900px; height: 447px;"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
  <code><nowiki><script></nowiki></code> 
    <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
      <code><nowiki>function showIframe() {</nowiki></code> 
        <code><nowiki>// Hide the image</nowiki></code> 
        <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
        <code><nowiki>// Create and configure the iframe</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4714&code=4200729999208732852';</nowiki></code> 
        <code><nowiki>iframe.style.width = '900px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '446px';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 

        <code><nowiki>// Append the iframe to the container</nowiki></code> 
        <code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code> 
      <code><nowiki>}</nowiki></code> 

      <code><nowiki>// Add click event listener to the image container</nowiki></code> 
      <code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
  <code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again. Here's a live example: [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]
Here is how to add
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

Here is some updated html and script.
<div style="margin-left: 2em;">
<code><nowiki><!DOCTYPE html></nowiki></code> 
<code><nowiki><html></nowiki></code> 
<code><nowiki><head></nowiki></code> 
  <code><nowiki><title>Interactive Analytica Model</title></nowiki></code> 
  <code><nowiki><style></nowiki></code> 
    <code><nowiki>#container {</nowiki></code> 
      <code><nowiki>position: relative;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>width: 900px;</nowiki></code> 
      <code><nowiki>height: 447px;</nowiki></code> 
      <code><nowiki>margin: 0 auto;</nowiki></code> 
      <code><nowiki>border: 1px solid #ccc;</nowiki></code> 
      <code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#runImage {</nowiki></code> 
      <code><nowiki>width: 100%;</nowiki></code> 
      <code><nowiki>height: 100%;</nowiki></code> 
      <code><nowiki>display: block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>.control-button {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>width: 30px;</nowiki></code> 
      <code><nowiki>height: 30px;</nowiki></code> 
      <code><nowiki>background-size: contain;</nowiki></code> 
      <code><nowiki>background-repeat: no-repeat;</nowiki></code> 
      <code><nowiki>background-color: transparent;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#maximizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#minimizeButton {</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");</nowiki></code> 
      <code><nowiki>display: none;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>#interactButton {</nowiki></code> 
      <code><nowiki>position: absolute;</nowiki></code> 
      <code><nowiki>bottom: 10px;</nowiki></code> 
      <code><nowiki>right: 120px;</nowiki></code> 
      <code><nowiki>padding: 5px 10px;</nowiki></code> 
      <code><nowiki>font-size: 16px;</nowiki></code> 
      <code><nowiki>font-weight: bold;</nowiki></code> 
      <code><nowiki>background-color: #e4e4e4;</nowiki></code> 
      <code><nowiki>color: black;</nowiki></code> 
      <code><nowiki>border: none;</nowiki></code> 
      <code><nowiki>border-radius: 5px;</nowiki></code> 
      <code><nowiki>cursor: pointer;</nowiki></code> 
      <code><nowiki>opacity: 0.9;</nowiki></code> 
      <code><nowiki>display: inline-block;</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki></style></nowiki></code> 
<code><nowiki></head></nowiki></code> 
<code><nowiki><body></nowiki></code> 
  <code><nowiki><div id="container"></nowiki></code> 
    <code><nowiki><img id="runImage" src="ACPIframe02.png"></nowiki></code> 
    <code><nowiki><button id="maximizeButton" class="control-button" title="Click to use full screen"></button></nowiki></code> 
    <code><nowiki><button id="minimizeButton" class="control-button" title="Exit full screen"></button></nowiki></code> 
    <code><nowiki><button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button></nowiki></code> 
  <code><nowiki></div></nowiki></code> 
</div>
<div style="margin-left: 2em;">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code> 
    <code><nowiki>let iframeAdded = false;</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 
    <code><nowiki>function showIframe() {</nowiki></code> 
      <code><nowiki>runImage.style.display = 'none';</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (!iframeAdded) {</nowiki></code> 
        <code><nowiki>const iframe = document.createElement('iframe');</nowiki></code> 
        <code><nowiki>iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';</nowiki></code> 
        <code><nowiki>iframe.style.width = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.height = '100%';</nowiki></code> 
        <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
        <code><nowiki>container.appendChild(iframe);</nowiki></code> 
        <code><nowiki>iframeAdded = true;</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function maximizeIframe() {</nowiki></code> 
      <code><nowiki>if (container.requestFullscreen) {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.webkitRequestFullscreen();</nowiki></code> 
      <code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code> 
        <code><nowiki>container.msRequestFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>function minimizeIframe() {</nowiki></code> 
      <code><nowiki>if (document.exitFullscreen) {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.webkitExitFullscreen();</nowiki></code> 
      <code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code> 
        <code><nowiki>document.msExitFullscreen();</nowiki></code> 
      <code><nowiki>}</nowiki></code> 
      <code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>maximizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>minimizeIframe();</nowiki></code> 
    <code><nowiki>});</nowiki></code> 
    <code><nowiki>container.addEventListener('click', showIframe);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
<code><nowiki></body></nowiki></code> 
<code><nowiki></html></nowiki></code>
</div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page. Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model.
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

'''Code for an ACP model playing in an Iframe in elementor.'''
<div style="margin-left: 2em;">
<code><nowiki><script></nowiki></code> 
  <code><nowiki>function showIframe() {</nowiki></code> 
    <code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code> 

    <code><nowiki>// Hide the "Interact" button if present</nowiki></code> 
    <code><nowiki>if (interactButton) {</nowiki></code> 
      <code><nowiki>interactButton.style.display = 'none';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 

    <code><nowiki>// Check if iframe is already present</nowiki></code> 
    <code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code> 
    <code><nowiki>if (!iframe) {</nowiki></code> 
      <code><nowiki>iframe = document.createElement('iframe');</nowiki></code> 
      <code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code> 
      <code><nowiki>iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>iframe.style.border = 'none';</nowiki></code> 
      <code><nowiki>container.appendChild(iframe);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>iframe.style.display = 'block';</nowiki></code> 

    <code><nowiki>// Ensure maximize button is displayed</nowiki></code> 
    <code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>if (!maximizeButton) {</nowiki></code> 
      <code><nowiki>maximizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code> 
      <code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code> 
      <code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code> 
      <code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>maximizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>maximizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>maximizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>container.requestFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = "100%";</nowiki></code> 
        <code><nowiki>iframe.style.height = "100%";</nowiki></code> 
        <code><nowiki>maximizeButton.style.display = 'none';</nowiki></code> 
        <code><nowiki>minimizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(maximizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
    <code><nowiki>// Ensure minimize button is created</nowiki></code> 
    <code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>if (!minimizeButton) {</nowiki></code> 
      <code><nowiki>minimizeButton = document.createElement('button');</nowiki></code> 
      <code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code> 
      <code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code> 
      <code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code> 
      <code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.right = '110px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code> 
      <code><nowiki>minimizeButton.style.border = 'none';</nowiki></code> 
      <code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code> 
      <code><nowiki>minimizeButton.style.width = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.height = '30px';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code> 
      <code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code> 
      <code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code> 
      <code><nowiki>minimizeButton.onclick = function() {</nowiki></code> 
        <code><nowiki>document.exitFullscreen();</nowiki></code> 
        <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
        <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
      <code><nowiki>};</nowiki></code> 
      <code><nowiki>container.appendChild(minimizeButton);</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>}</nowiki></code> 

  <code><nowiki>// Event listener to handle fullscreen changes</nowiki></code> 
  <code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code> 
    <code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code> 
    <code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code> 
    <code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code> 

    <code><nowiki>// Check if in fullscreen mode</nowiki></code> 
    <code><nowiki>if (document.fullscreenElement) {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code> 
    <code><nowiki>} else {</nowiki></code> 
      <code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code> 
      <code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code> 
      <code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code> 
      <code><nowiki>iframe.style.width = '1210px';</nowiki></code> 
      <code><nowiki>iframe.style.height = '600px';</nowiki></code> 
    <code><nowiki>}</nowiki></code> 
  <code><nowiki>});</nowiki></code> 

  <code><nowiki>// Create the "Click to interact" button</nowiki></code> 
  <code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code> 
    <code><nowiki>const container = document.getElementById('container');</nowiki></code> 
    <code><nowiki>const interactButton = document.createElement('button');</nowiki></code> 
    <code><nowiki>interactButton.id = 'interactButton';</nowiki></code> 
    <code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code> 
    <code><nowiki>interactButton.style.position = 'absolute';</nowiki></code> 
    <code><nowiki>interactButton.style.bottom = '13px';</nowiki></code> 
    <code><nowiki>interactButton.style.right = '140px';</nowiki></code> 
    <code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code> 
    <code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code> 
    <code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code> 
    <code><nowiki>interactButton.style.color = 'black';</nowiki></code> 
    <code><nowiki>interactButton.style.border = 'none';</nowiki></code> 
    <code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code> 
    <code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code> 
    <code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code> 

    <code><nowiki>interactButton.onclick = function(event) {</nowiki></code> 
      <code><nowiki>event.stopPropagation();</nowiki></code> 
      <code><nowiki>showIframe();</nowiki></code> 
    <code><nowiki>};</nowiki></code> 
    <code><nowiki>container.appendChild(interactButton);</nowiki></code> 
  <code><nowiki>});</nowiki></code> 
<code><nowiki></script></nowiki></code> 
 
<code><nowiki><div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"></nowiki></code> 
  <code><nowiki><img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210px" height="648px" onclick="showIframe()" style="cursor: pointer;"></nowiki></code> 
<code><nowiki></div></nowiki></code>
</div>



==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]