Difference between revisions of "Embed an ACP model in a Web Page"
m (→‎ACP in an Iframe on a wordpress site: added highlighting for clarity)
 
(81 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
[[Analytica_Cloud_Player|<<back]]
+
[[Category: Analytica Cloud Platform]]
 +
[[Category:  Models]]
  
 +
[[Analytica_Cloud_Platform|<<back]]
  
 
==Overview==
 
==Overview==
−
Suppose you want to allow users to play your model from a web page on your web site.  With Analytica Cloud Player (ACP) you can do this.
+
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.
  
−
<font color = "blue">''Prerequisite: You must already have an ACP account.''</font>
+
This page explains how to configure your own web page to display an ACP model.
  
−
There are a number of approaches, and so far the way we have found the easiest is to just create a page that uses frames on your web site, and then have your model shown in one of those frames.
+
'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.
  
−
If for some reason HTML frames are not a viable option, the second example on this page will show another approach of embedding some Javascript code directly into your web page that you want to use for playing models in ACP.
+
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.
  
−
When a new user arrives at your web page with the model embedded, the model will appear and an ACP session credit will be consumed.
+
==Showing your model in an inline Frame (Iframe)==
 +
An inline frame is just an HTML document embedded inside another HTML document on a website.  
  
−
<font color = "blue">''If you want to display the model without the banner section of the ACP web page, you can find out how to do it '' [http://wiki.lumina.com/index.php/CloudPlayerStyles_Attribute_Values#Hide_the_Banner_and_Logo here].</font>
+
=== 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.
−
==Example 1 - Showing your model in a Frame==
 
−
 
 
−
To keep it simple, let’s say you just want to display your header logo and navigation tabs at the top of the parent web page, and then have the ACP model shown below that. I’ll show you an example of how to do this, 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.   
 
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.
+
*Your Server, the server where your web site resides.  This is the server you are able to upload and edit pages on.
−
#And there’s ACP’s server, AnalyticaCloud.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.''
+
*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.''
  
−
If you are not familiar with HTML frames, you should probably take a minute to google “HTML Frames Tutorial” and find a one page tutorial on how HTML frames work.  
+
#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.
  
−
*Basically, you create a “parent” web page which contains a number of other web pages within it.<br/>
+
<div style="margin-left: 2em;">
−
*The subpages which are displayed within the parent frame can be specified to use a certain amount of vertical or horizontal space.<br/>
+
<code><nowiki>&lt;html&gt;</nowiki></code><br>
−
*The most common way of setting up the frames for displaying a model is by tiling the frames vertically.
+
<code><nowiki>&lt;head&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;title&gt;Look at My Analytica Model&lt;/title&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/head&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;body&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;h1&gt;Look at My Analytica Model&lt;/h1&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/body&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/html&gt;</nowiki></code>
 +
</div>
  
−
=== Step 1 - Creating the Parent Web Page ===
+
When opened in the Chrome browser this is what this web page initially displays :
−
The first thing we need to do is to create the parent web page which will contain (in this case) two frames.  For the purpose of this example, let’s say you want to display the header of your web site with the logo and navigation tabs at the top of the page.  And in the second frame below that you want visitors to your web site to be able to play your model. 
 
  
−
*Create a parent web page <font color ="red"> 'parent.htm' </font> in a text editor or whatever website software you are using. Here’s the html code for a basic web page:
+
:[[File:ACPIFrame01.png]]
  
−
:<code>&lt;html&gt;
+
=== Step 2 - Creating the Link to Play Your Model ===
−
:&lt;head&gt;&lt;title&gt;Your title&lt;/title&gt;&lt;/head&gt;
+
Use ACP’s Email Invite functionality to create the link which will play your model.
−
:&lt;frameset rows="100,*" border="0"&gt;</code>
 
−
::<code>&lt;frame noresize="true" src="<font color = "red">yourHeader.htm</font>" &gt;&lt;/frame&gt;
 
−
::&lt;frame noresize="true" src=""&gt;&lt;/frame&gt;
 
−
:&lt;/frameset&gt;
 
−
:&lt;/html&gt;</code>
 
  
−
The web page above contains two frames (pages).
+
#[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.
−
#The first <font color = "red">yourHeader.htm</font> is your web site’s header and contains UI for navigation of your web site.  The parent page says to give this header page the top 100 pixels of the parent web to display the header’s content.
+
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
−
#The rest of the parent web page will display the second frame page. This second page is on the AnalyticaCloud.com web server.  You cannot author it, but you can “pass in” information using “URL encoding”. The URL encoding will contain the information so ACP knows which model to play among other things.
+
#:[[File:ACPFrame01.png|720px|thumb|left]]
−
 
+
#Click the '''Email Invite''' button to show the email invitation dialog:
−
=== step 2 - Creating the Link to Play Your Model ===
 
−
Currently, you can use ACP’s Email Invite functionality to create the link which will play your model.
 
−
 
 
−
#[https://www.analyticacloud.com/acp/client/AnalyticaCloudPlayer.aspx Sign into your ACP account]   
 
−
#Ensure the model you want to play in your web page is in the Model folder of ACP - ''it will need to remain there as long as it is embedded in your web page'' (deleting it would cause an error message for visitors to your web page that the model can't be found).
 
−
#Use the radio button to select your model.
 
−
#:[[File:ACP inn a web page 01 - model folder.png]]<br/>
 
−
#Then click the [Email Invite] button. This starts the email invite creation process and exposes some more UI including the text of the email invite.
 
 
#Copy the link from this email invite. <br/>
 
#Copy the link from this email invite. <br/>
−
#:[[File:ACP_inn_a_web_page_02_-_email_invite.png]]<br/>
+
#:[[File:ACPFrame02.png|720px|thumb|left]]<br/>
−
#After you copy the link, you press the [Cancel] button since we aren’t sending the invite to anyone.
+
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.
−
#Go back to <font color = "red">parent.htm</font>, and paste the text from this link into the “scr” attribute for the second frame as shown in red below:<br/>
 
−
#:<code>&lt;html&gt;
 
−
#:&lt;head&gt;&lt;title&gt;Your title&lt;/title&gt;&lt;/head&gt;
 
−
#:&lt;frameset rows="100,*" border="0"&gt;</code>
 
−
#::<code>&lt;frame noresize="true" src="yourHeader.htm" &gt;&lt;/frame&gt;
 
−
#::&lt;frame noresize="true" src="<font color = "red><nowiki>https://www.analyticacloud.com/acp/ClientAs3/AcpFlex.aspx?inviteId=30&inviteCode=905163&subName=fredbrunt%40gmail%2Ecom</nowiki></font>"&gt;&lt;/frame&gt;
 
−
#:&lt;/frameset&gt;
 
−
#:&lt;/html&gt;</code><br/>
 
−
#Now save <font color = "red">parent.htm</font> to a folder on your hard drive.
 
  
−
=== Step 3 - Creating <Font color = "red">yourHeader.htm</font> ===
+
''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".
  
−
In this example, the top frame is your web site’s logo, title and navigation tabs.  This content is going to be based on your web site.<br/>
+
===Step 3: Insert the code for an Iframe. ===
−
For the sake of this example, I will mock up a header which is just an image.
+
<ol>
−
#Create the file <font color = "red">yourHeader.htm</font> which you will insert into the "src" attribute of the first frame. Here is the code:<Br/>
+
<li> Now in the web page source Insert the code for an Iframe with the link to your model in it.</li>
−
#:<code>&lt;html&gt;
+
<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>
−
#:&lt;body&gt;
+
<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>
−
#:&lt;img src="<font color = "red'><nowiki>yourHeader.pn</nowiki>g</font>"/&gt;
 
−
#:&lt;/body&gt;
 
−
#:&lt;/html&gt;</code><br/>
 
−
#Save <font color = "red'> yourHeader.htm</font> to the same folder as parent.htm. This file just loads the <font color = "red">yourHeader.png</font> image, shown below:<br/>
 
−
#:[[File:ACP in a web page 03 - yourHeader.png]]<br/>
 
−
# So now copy this logo and save it as <font color = "red">yourHeader.png</font> into the same folder as the other two files.
 
  
−
===Step 4 - Finishing the Example===
+
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
−
So now we’ve completed making the files. In this example the files you are going to place on your server are parent.htm, yourHeader.htm, and yourHeader.png.  Just upload them into a folder, and then load parent.htm in a browser.  In this case, the model will play on the web page looking like this:
+
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
 +
<div class="mw-collapsible-content">
 +
<code><nowiki>&lt;html&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;head&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;title&gt;Look at My Analytica Model&lt;/title&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/head&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;body&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;h1&gt;Look at My Analytica Model&lt;/h1&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;iframe width="</nowiki><span style="background-color: cyan;">900</span>" height="<span style="background-color: cyan;">446</span><nowiki>" src="</nowiki><span style="background-color: yellow;"><nowiki>https://acp.analytica.com/view?invite=4771&amp;code=2359748081441958275</nowiki></span>"&gt;&lt;/iframe&gt;</code><br>
 +
<code><nowiki>&lt;/body&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/html&gt;</nowiki></code>
 +
</div></div>
  
−
[[File:ACP in a web page 04 - finished frames.png]]
 
  
−
I’ve uploaded these files onto another one of Lumina’s servers in case you want to test it out.
+
<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]].
  
−
See http://analyticaonline.com/acp3Inawebpage/parent.htm to see ACP playing a model within another web page.
+
</ol>
−
 
+
<!--
−
Or, if you just want to test this out on your computer, launch a browser, from the File menu select Open, and open parent.htm.
+
You can follow this link http://analyticaonline.com/acp3Inawebpage/acp3Iframe.htm to see ACP playing a model in an iframe on one of our servers.
−
 
+
-->
−
==Example 2 - Using an IFrame (Inline Frame)==
 
−
 
 
−
An inline frame is just an HTML document embedded inside another HTML document on a website.
 
−
 
 
−
There's no need for a frameset when using an iframe, just insert the link to your model into the "src" Attribute for the Iframe.
 
−
 
 
−
=== Step 1: Create a Web page. ===
 
  
−
*First, create a web page that we can start with. Here is one that just contains a title, 'Look at My Model'.  
+
==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.  
  
−
:<code>&lt;html&gt;
+
'''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%.
−
:&lt;head&gt;</code>
 
−
::<code>&lt;title&gt;Look at My Model&lt;/title&gt;
 
−
:&lt;/head&gt;
 
−
:&lt;body&gt;
 
−
:&lt;h1&gt;Look at My Model&lt;/h1&gt;
 
−
:&lt;/body&gt;
 
−
:&lt;/html&gt;</code>
 
  
−
This is what this web page initially displays:
+
<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>&lt;html&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;head&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;title&gt;Look at My Analytica Model&lt;/title&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/head&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;body&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;h1&gt;Look at My Analytica Model&lt;/h1&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: </nowiki><span style="background-color: cyan;">900px</span>; height: </nowiki><span style="background-color: cyan;">447px</span><nowiki>;"&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;/div&gt;</nowiki></code><br><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;script&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>function showIframe() {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Hide the image</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code><br><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Create and configure the iframe</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const iframe = document.createElement('iframe');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.src = '</nowiki><span style="background-color: yellow;"><nowiki>https://acp.analytica.com/view?invite=4714&code=4200729999208732852</nowiki></span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '</nowiki><span style="background-color: cyan;">900px</span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = '</nowiki><span style="background-color: cyan;">446px</span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.border = 'none';</nowiki></code><br><br>
  
−
[[File:ACP in a web page 05 - Look at my model.png]]
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Append the iframe to the container</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
  
−
=== Step 2: Create the Link. ===
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Add click event listener to the image container</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;/script&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/body&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/html&gt;</nowiki></code>
 +
</div></div>
  
−
* The steps for getting the link to your model are the same as in Step two above. I.e. create the link in an email Invite and then copy the link.
 
−
 
−
===Step 3: Insert the code for an Iframe. ===
 
−
 
−
* Now Insert the code for an Iframe with the link to your model in it -
 
−
* I will set the iframe to be 600 pixels wide by 400 pixels high...
 
−
 
−
so the code for your web page would look like this:
 
−
 
−
:<code>&lt;html&gt;
 
−
:&lt;head&gt;</code>
 
−
::<code>&lt;title&gt;Look at My Model&lt;/title&gt;
 
−
:&lt;/head&gt;
 
−
:&lt;body&gt;
 
−
:&lt;h1&gt;Look at My Model&lt;/h1&gt;
 
−
::&lt;iframe width="600" height="400" src="<font color = "red><nowiki>https://www.analyticacloud.com/acp/ClientAs3/AcpFlex.aspx?inviteId=30&inviteCode=905163&subName=fredbrunt%40gmail%2Ecom
 
−
</nowiki></font>"&gt;&lt;/iframe&gt;
 
−
:&lt;/body&gt;
 
−
:&lt;/html&gt;</code>
 
−
 
−
*Now you can save the web page and load the page into a browser and it will display the model in the iframe like this:
 
−
 
−
[[File:ACP_in_a_web_page_03_-_iframe.png]]
 
−
 
−
 
−
You can follow this link http://analyticaonline.com/acp3Inawebpage/acp3Iframe.htm to see ACP playing a model in an iframe on one of our servers.
 
  
−
==Example 3 – No Frames – JavaScript==
+
Download the example html file and image [[File:ACPIModelBehindImage.zip]]
−
It’s not uncommon to find out that frames are not a viable option; for example because you are using an existing framework that doesn’t support frames, or would require a lot work.  Here’s another approach which may work for you.
 
  
−
===Step 1 - Start with Your HTML Page===
+
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]
−
This approach should work with any HTML page you want to use. You just tweak the existing page by adding a javascript include and some code to the &lt;head&gt; and then paste a block of javascript code into the &lt;body&gt;.
 
  
−
===Step 2 - &lt;Head&gt;s up===
+
== Buttons to expand to full screen and minimize==
  
−
Let’s start with the &lt;Head&gt; section of your HTML page.  Usually ACP is loaded using a popular javascript library called swfObject.js. I’m not going to go into the technical reasons for doing this, but just google “swfObject.js” and you’ll find plenty.
+
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]
  
−
To get started we need a web page, so I’m going to start the same as with the iframe - a blank web page that just contains a title, 'Look at My Model'.  Here’s the HTML page we are going to start with:
 
  
−
:<code>&lt;html&gt;
+
Here is how to add
−
:&lt;head&gt;</code>
+
* 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.
−
::<code>&lt;title&gt;Look at My Model&lt;/title&gt;
+
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
−
:&lt;/head&gt;
+
* 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.
−
:&lt;body&gt;
+
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
−
:&lt;h1&gt;Look at My Model&lt;/h1&gt;
+
* 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.
−
:&lt;/body&gt;
 
−
:&lt;/html&gt;</code>
 
  
−
This is what this web page initially displays:
+
Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]
  
−
[[File:ACP in a web page 05 - Look at my model.png]]
+
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).
  
−
===Step 3 - Insert the Source code for the ACP model===
 
  
−
So now we are going to add ACP to this page and have it play a model below the title.
+
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
−
Similar to Examples 1 and 2, we will start by creating a link that will open your model using ACP’s Email Invite feature.
+
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
 +
<div class="mw-collapsible-content">
 +
<code><nowiki>&lt;!DOCTYPE html&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;html&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;head&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;title&gt;Interactive Analytica Model&lt;/title&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;style&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#container {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>position: relative;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>cursor: pointer;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>width: </nowiki><span style="background-color: cyan;">900px</span><nowiki>;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>height: </nowiki><span style="background-color: cyan;">447px</span><nowiki>;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>margin: 0 auto;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>border: 1px solid #ccc;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#runImage {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>width: 100%;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>height: 100%;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>display: block;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>.control-button {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>position: absolute;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>width: 30px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>height: 30px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-size: contain;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-repeat: no-repeat;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-color: transparent;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>border: none;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>cursor: pointer;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#maximizeButton {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>bottom: 10px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>right: 120px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-image: url("</nowiki><span style="background-color: lime;"><nowiki>https://docs.analytica.com/images/9/9c/Arrows-maximize.png</nowiki></span>");</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>display: none;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#minimizeButton {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>bottom: 10px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>right: 120px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-image: url("</nowiki><span style="background-color: lime;"><nowiki>https://docs.analytica.com/images/8/82/Arrows-minimize.png</nowiki></span><nowiki>");</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>display: none;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#interactButton {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>position: absolute;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>bottom: 10px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>right: 120px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>padding: 5px 10px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>font-size: 16px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>font-weight: bold;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-color: #e4e4e4;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>color: black;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>border: none;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>border-radius: 5px;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>cursor: pointer;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>opacity: 0.9;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>display: inline-block;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;/style&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/head&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;body&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;div id="container"&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;img id="runImage" src="</nowiki><span style="background-color: pink;">ACPIframe02.png</span><nowiki>"&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;button id="maximizeButton" class="control-button" title="Click to use full screen"&gt;&lt;/button&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;button id="minimizeButton" class="control-button" title="Exit full screen"&gt;&lt;/button&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;button id="interactButton"&gt;Click to interact with the model in Analytica Cloud Platform&lt;/button&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;/div&gt;</nowiki></code><br>
 +
</div></div>
  
−
*[https://www.analyticacloud.com/acp/client/AnalyticaCloudPlayer.aspx Sign into your ACP account] 
+
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
−
*Ensure the model you want to play in your web page is in the Model folder of ACP - ''it will need to remain there as long as it is embedded in your web page'' (deleting it would cause an error message for visitors to your web page that the model can't be found).
+
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
−
*Use the radio button to select your model. Here we'll use the 'car cost in a web page' model
+
<div class="mw-collapsible-content">
−
*:[[File:ACP in web page 04 select car cost.png]]<br/>
+
<code><nowiki>&lt;script&gt;</nowiki></code><br>
−
*Then click the [Email Invite] button. This starts the email invite creation process and exposes some more UI including the text of the email invite.
+
&nbsp;&nbsp;<code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code><br>
−
*Copy the link from this email invite. <br/>
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>let iframeAdded = false;</nowiki></code><br>
−
*:[[File:ACP in a web page 5 copy car cost link.png]]<br/>
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const container = document.getElementById('container');</nowiki></code><br>
−
*After you copy the link, you press the [Cancel] button since we aren’t sending the invite to anyone.
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code><br>
−
*Go to FireFox, paste this link into the address bar and press enter. This should load your model into the browser.
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code><br>
−
*Click on the address bar (to ensure focus is on the browser window and not the embedded flash player).<br/>
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code><br>
−
:[[File:ACP in a web page 6 - Address bar car cost.png]]<br/>
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code><br><br>
−
*What we are after is the source code, so Press ‘Ctrl+U’ (View source).
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>function showIframe() {</nowiki></code><br>
−
*Now the source code we need is shown. You may need to scroll down a little to the end of the &lt;/head&gt;, then copy the block of text shown below:
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>runImage.style.display = 'none';</nowiki></code><br>
−
:[[File:ACP in a web page 7 copy js code.png]]<br/>
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.display = 'none';</nowiki></code><br><br>
−
*Now paste this source code - in red below - into the &lt;head&gt; of our 'Look at my Model' web page. So far this is how the page looks.
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (!iframeAdded) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const iframe = document.createElement('iframe');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.src = '</nowiki><span style="background-color: yellow;"><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275</nowiki></span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '100%';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = '100%';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.border = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(iframe);</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframeAdded = true;</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>function maximizeIframe() {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (container.requestFullscreen) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.requestFullscreen();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.webkitRequestFullscreen();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.msRequestFullscreen();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.display = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>function minimizeIframe() {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (document.exitFullscreen) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.exitFullscreen();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.webkitExitFullscreen();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.msExitFullscreen();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.display = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>event.stopPropagation();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>showIframe();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>event.stopPropagation();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeIframe();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>event.stopPropagation();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeIframe();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.addEventListener('click', showIframe);</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br>
 +
<code><nowiki>&lt;/script&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/body&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/html&gt;</nowiki></code>
 +
</div></div>
  
−
<code>&lt;html&gt;<br/>
+
==ACP in an Iframe on a wiki==
−
&lt;head&gt;</code>
+
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.
−
:<code>&lt;title&gt;Look at My Model&lt;/title&gt;</code>
+
*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].
−
:<font color="red"><code>&lt;script type="text/javascript" src="swfobject.js"&gt&lt;/script&gt;
+
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>.  
−
:&lt;script type="text/javascript"&gt;
+
*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].
−
::// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
 
−
::var swfVersionStr = "11.1.0";
 
−
::// To use express install, set to playerProductInstall.swf, otherwise the empty string.
 
−
::var xiSwfUrlStr = "playerProductInstall.swf";
 
−
::var flashvars = {};
 
−
::flashvars.inviteId = '6';
 
−
::flashvars.inviteCode = '220947';
 
−
::flashvars.subName = 'acp demos';
 
−
::var params = {};
 
−
::params.quality = "high";
 
−
::params.bgcolor = "#ffffff";
 
−
::params.allowscriptaccess = "sameDomain";
 
−
::params.allowfullscreen = "true";
 
−
::params.wmode = "transparent";
 
−
::var attributes = {};
 
−
::attributes.id = "AcpAs3";
 
−
::attributes.name = "AcpAs3";
 
−
::attributes.align = "left";
 
−
::swfobject.embedSWF(
 
−
:::"AcpAs3.swf", "flashContent",
 
−
:::"100%", "100%",
 
−
:::swfVersionStr, xiSwfUrlStr,
 
−
:::flashvars, params, attributes);
 
−
::// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
 
−
::swfobject.createCSS("#flashContent", "display:block;text-align:left;");
 
−
:&lt;/script&gt;</code></font> 
 
−
<code>&lt;head&gt;<br/>
 
  
−
&lt;body&gt;<br/>
+
==ACP in an Iframe on a wordpress site==
−
&lt;h1&gt;Look at My Model&lt;/h1&gt;<br/>
+
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
−
&lt;/body&gt;<br/>
+
To add an iframe running an ACP model on an Elementor page:
−
&lt;/html&gt;</code>
+
*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.
  
−
*Next, go back to the source code and scroll down to the &lt;body&gt; and copy this block of code - including the <code>&lt;div&gt;&lt;/div&gt;</code> tags.:
+
Here is example code to do this. You will need to change the following highlighted code to customize it properly for your page:
−
[[File:ACP in a web page 8 copy js code.png]]<br/>
+
* Yellow: Your model's URL
−
*Paste this code into the &lt;body&gt; as shown below in red; so the web page code looks like this:
+
* 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)
  
−
<code>&lt;html&gt;<br/>
 
−
&lt;head&gt;</code>
 
−
:<code>&lt;title&gt;Look at My Model&lt;/title&gt;</code>
 
−
:<code>&lt;script type="text/javascript" src="swfobject.js"&gt;&lt;/script&gt;
 
−
:&lt;script type="text/javascript"&gt;
 
−
::// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
 
−
::var swfVersionStr = "11.1.0";
 
−
::// To use express install, set to playerProductInstall.swf, otherwise the empty string.
 
−
::var xiSwfUrlStr = "playerProductInstall.swf";
 
−
::var flashvars = {};
 
−
::flashvars.inviteId = '6';
 
−
::flashvars.inviteCode = '220947';
 
−
::flashvars.subName = 'acp demos';
 
−
::var params = {};
 
−
::params.quality = "high";
 
−
::params.bgcolor = "#ffffff";
 
−
::params.allowscriptaccess = "sameDomain";
 
−
::params.allowfullscreen = "true";
 
−
::params.wmode = "transparent";
 
−
::var attributes = {};
 
−
::attributes.id = "AcpAs3";
 
−
::attributes.name = "AcpAs3";
 
−
::attributes.align = "left";
 
−
::swfobject.embedSWF(
 
−
:::"AcpAs3.swf", "flashContent",
 
−
:::"100%", "100%",
 
−
:::swfVersionStr, xiSwfUrlStr,
 
−
:::flashvars, params, attributes);
 
−
::// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
 
−
::swfobject.createCSS("#flashContent", "display:block;text-align:left;");
 
−
:&lt;/script&gt; 
 
−
&lt;head&gt;<br/>
 
−
&lt;body&gt;<br/>
 
−
&lt;h1&gt;Look at My Model&lt;/h1&gt;<br/>
 
−
:<font color ="red>&lt;div id="flashContent"&gt;<br/>
 
−
::&lt;p&gt;
 
−
:::To view this page ensure that Adobe Flash Player version
 
−
:::11.1.0 or greater is installed.
 
−
::&lt;/p&gt;
 
−
::&lt;script type="text/javascript"&gt;
 
−
:::var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
 
−
:::document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
 
−
::::::+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );<br/>
 
−
::&lt;/script&gt;<br/>
 
−
:&lt;div&gt;</font><br/>
 
−
&lt;/body&gt;<br/>
 
−
&lt;/html&gt;</code>
 
  
−
===Step 4 - A Couple More Tweaks===
+
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
−
Now we are getting close to being finished. Just a couple more tweaks.
+
<div style="font-weight:bold;line-height:1.6;">Code for an ACP model playing in an Iframe in elementor</div>
−
*Edit the path to the swfObject.js file in &lt;head&gt; of your html page from this:
+
<div class="mw-collapsible-content">
 +
<code><nowiki>&lt;script&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>function showIframe() {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const container = document.getElementById('container');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code><br><br>
  
−
:<code>&lt;script type="text/javascript" src="swfobject.js"&lt;/script&gt;</code>
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Hide the "Interact" button if present</nowiki></code><br>
−
...to this (type/paste the code in red below):<br/>
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (interactButton) {</nowiki></code><br>
−
:<code><font color ="red">&lt;script type="text/javascript"<br/>src="<nowiki>https://www.analyticacloud.com/acp/clientAs3/swfobject.js"</nowiki>&lt;/script&gt;</font></code><br/>
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.display = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
  
−
*Continuing with the script in the &lt;head&gt;, we need to edit the link to the shockwave file to that shown in red below:
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Check if iframe is already present</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (!iframe) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe = document.createElement('iframe');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.src = '</nowiki><span style="background-color: yellow;"><nowiki>https://acp.analytica.com/view0?invite=4314&amp;code=2462049136540573676</nowiki></span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '</nowiki><span style="background-color: cyan;">1210px</span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = '</nowiki><span style="background-color: cyan;">600px</span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.border = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(iframe);</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.display = 'block';</nowiki></code><br><br>
  
−
before:
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Ensure maximize button is displayed</nowiki></code><br>
−
::<code>swfobject.embedSWF(
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code><br>
−
:::"AcpAs3.swf", "flashContent",
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (!maximizeButton) {</nowiki></code><br>
−
:::"100%", "100%",</code>
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton = document.createElement('button');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.right = '110px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.border = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.width = '30px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.height = '30px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.backgroundImage = 'url("</nowiki><span style="background-color: lime;"><nowiki>https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png</nowiki></span><nowiki>")';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.onclick = function() {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.requestFullscreen();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = "100%";</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = "100%";</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.display = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.display = 'block';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>};</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(maximizeButton);</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Ensure minimize button is created</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (!minimizeButton) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton = document.createElement('button');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.right = '110px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.border = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.width = '30px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.height = '30px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.backgroundImage = 'url("</nowiki><span style="background-color: lime;"><nowiki>https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png</nowiki></span><nowiki>")';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.onclick = function() {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.exitFullscreen();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '</nowiki><span style="background-color: cyan;">1210px</span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = '</nowiki><span style="background-color: cyan;">600px</span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>};</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(minimizeButton);</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
  
−
after:
+
&nbsp;&nbsp;<code><nowiki>// Event listener to handle fullscreen changes</nowiki></code><br>
−
::<code>swfobject.embedSWF(
+
&nbsp;&nbsp;<code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code><br>
−
:::<font color="red"><nowiki>"https://www.analyticacloud.com/acp/ClientAs3/AcpAs3.swf"</nowiki>,</font> "flashContent",
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code><br>
−
:::"100%", "100%",</code> <br/>
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code><br><br>
  
−
===Step 5 - Optional - Set the size for the ACP rectangle on your web page===
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Check if in fullscreen mode</nowiki></code><br>
−
*In the previous line of code you can substitute your desired width and height for the ACP rectangle on your web site e.g.:<br/>:<code>"400", "300", </code> to replace the <code>"100%", "100%",</code>
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (document.fullscreenElement) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '</nowiki><span style="background-color: cyan;">1210px</span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height ='</nowiki><span style="background-color: cyan;">600px</span><nowiki>';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br><br>
  
−
===Step 6 - Time to test it===
+
&nbsp;&nbsp;<code><nowiki>// Create the "Click to interact" button</nowiki></code><br>
−
So now you can try saving the html file and loading this page onto your webserver and then loading the page in a browser window. Hopefully, it will display your model below the page’s title something like this:
+
&nbsp;&nbsp;<code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const container = document.getElementById('container');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const interactButton = document.createElement('button');</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.id = 'interactButton';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.position = 'absolute';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.bottom = '13px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.right = '140px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.color = 'black';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.border = 'none';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code><br><br>
  
−
[[File:ACP in a web page 9 finished.png]]
+
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.onclick = function(event) {</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>event.stopPropagation();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>showIframe();</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>};</nowiki></code><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(interactButton);</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br>
 +
<code><nowiki>&lt;/script&gt;</nowiki></code><br>
 +
<br>
 +
<code><nowiki>&lt;div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"&gt;</nowiki></code><br>
 +
&nbsp;&nbsp;<code><nowiki>&lt;img id="runImage" src="</nowiki><span style="background-color: pink;"><nowiki>https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp</nowiki></span><nowiki>" width="</nowiki><span style="background-color: magenta;">1210px</span><nowiki>" height="</nowiki><span style="background-color: magenta;">648px</span><nowiki>" onclick="showIframe()" style="cursor: pointer;"&gt;</nowiki></code><br>
 +
<code><nowiki>&lt;/div&gt;</nowiki></code>
 +
</div></div>
  
−
==Summary==
+
<!--
−
Hopefully these two examples are a clear enough demonstration of how to play a model on a web page on your site by either using an HTML frame or using some Javascript code.  
+
'''<font color="blue">Coming...this section is under construction.</font>'''-->
  
−
If you have questions, or if something isn’t working, please email us at acp@lumina.com and we will be happy to help you out.
+
==See Also==
 +
* [[Analytica Cloud Player]]
 +
* [[Example Models]]
 +
* [[Tutorial: Sharing a model with ACP]]
 +
* [[Model Licensing]]

Latest revision as of 05:32, 22 November 2024


<<back

Overview

People normally view Analytica Cloud Platform (ACP) models on an acp server such as 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.
  1. 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.

<html>
<head>
  <title>Look at My Analytica Model</title>
</head>
<body>
  <h1>Look at My Analytica Model</h1>
</body>
</html>

When opened in the Chrome browser this is what this web page initially displays :

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.

  1. Sign into your ACP account
  2. If your model doesn't already use 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.
  3. Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
    ACPFrame01.png
  4. Click the Email Invite button to show the email invitation dialog:
  5. Copy the link from this email invite.
    ACPFrame02.png

  6. 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.

  1. Now in the web page source Insert the code for an Iframe with the link to your model in it.
  2. 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.
  3. 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:
    4. Collapse
    ACPIframe.html sample code

    <html>
    <head>
      <title>Look at My Analytica Model</title>
    </head>
    <body>
      <h1>Look at My Analytica Model</h1>
      <iframe width="900" height="446" src="https://acp.analytica.com/view?invite=4771&code=2359748081441958275"></iframe>
    </body>
    </html>


  4. 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 It will display the model in the iframe like this:
    5. ACPIFrame02.png
    Download the example html File:ACPIframe.zip.

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:
    1. 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;.
      ACPIFrame05.png
    2. Take a screenshot, crop it to remove all but the model and the top bar and save the image.
      ACPIFrame06.png
    3. Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.
    4. 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.
    Collapse
    Model behind image sample code

    <html>
    <head>
      <title>Look at My Analytica Model</title>
    </head>
    <body>
      <h1>Look at My Analytica Model</h1>
      <div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: 900px; height: </nowiki>447px;">
        <img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;">
      </div>

      <script>
        document.addEventListener('DOMContentLoaded', function () {
          function showIframe() {
            // Hide the image
            document.getElementById('runImage').style.display = 'none';

            // Create and configure the iframe
            const iframe = document.createElement('iframe');
            iframe.src = 'https://acp.analytica.com/view?invite=4714&code=4200729999208732852';
            iframe.style.width = '900px';
            iframe.style.height = '446px';
            iframe.style.border = 'none';

            // Append the iframe to the container
            document.getElementById('container').appendChild(iframe);
          }

          // Add click event listener to the image container
          document.getElementById('container').addEventListener('click', showIframe);
        });
      </script>
    </body>
    </html>


    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

    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


    Here is how to add

    • a maximize button Arrows-maximize.png to show the Iframe fullscreen - visible in the Iframe when the model is running at normal size.
    • a minimize button Arrows-minimize.png 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).


    Collapse
    Updated HTML for minimize/maximize buttons

    <!DOCTYPE html>
    <html>
    <head>
      <title>Interactive Analytica Model</title>
      <style>
        #container {
          position: relative;
          cursor: pointer;
          width: 900px;
          height: 447px;
          margin: 0 auto;
          border: 1px solid #ccc;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        #runImage {
          width: 100%;
          height: 100%;
          display: block;
        }
        .control-button {
          position: absolute;
          width: 30px;
          height: 30px;
          background-size: contain;
          background-repeat: no-repeat;
          background-color: transparent;
          border: none;
          cursor: pointer;
        }
        #maximizeButton {
          bottom: 10px;
          right: 120px;
          background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");</nowiki>
          display: none;
        }
        #minimizeButton {
          bottom: 10px;
          right: 120px;
          background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");
          display: none;
        }
        #interactButton {
          position: absolute;
          bottom: 10px;
          right: 120px;
          padding: 5px 10px;
          font-size: 16px;
          font-weight: bold;
          background-color: #e4e4e4;
          color: black;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          opacity: 0.9;
          display: inline-block;
        }
      </style>
    </head>
    <body>
      <div id="container">
        <img id="runImage" src="ACPIframe02.png">
        <button id="maximizeButton" class="control-button" title="Click to use full screen"></button>
        <button id="minimizeButton" class="control-button" title="Exit full screen"></button>
        <button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button>
      </div>

    Collapse
    Updated script for minimize/maximize buttons

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        let iframeAdded = false;
        const container = document.getElementById('container');
        const runImage = document.getElementById('runImage');
        const maximizeButton = document.getElementById('maximizeButton');
        const minimizeButton = document.getElementById('minimizeButton');
        const interactButton = document.getElementById('interactButton');

        function showIframe() {
          runImage.style.display = 'none';
          interactButton.style.display = 'none';

          if (!iframeAdded) {
            const iframe = document.createElement('iframe');
            iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';
            iframe.style.width = '100%';
            iframe.style.height = '100%';
            iframe.style.border = 'none';
            container.appendChild(iframe);
            iframeAdded = true;
            maximizeButton.style.display = 'inline-block';
          }
        }

        function maximizeIframe() {
          if (container.requestFullscreen) {
            container.requestFullscreen();
          } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
          } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
          }
          maximizeButton.style.display = 'none';
          minimizeButton.style.display = 'inline-block';
        }

        function minimizeIframe() {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          maximizeButton.style.display = 'inline-block';
          minimizeButton.style.display = 'none';
        }

        interactButton.addEventListener('click', function (event) {
          event.stopPropagation();
          showIframe();
        });

        maximizeButton.addEventListener('click', function (event) {
          event.stopPropagation();
          maximizeIframe();
        });

        minimizeButton.addEventListener('click', function (event) {
          event.stopPropagation();
          minimizeIframe();
        });

        container.addEventListener('click', showIframe);
      });
    </script>
    </body>
    </html>

    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.

    ACP in an Iframe on a wordpress site

    Running live on this page: 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)


    Collapse
    Code for an ACP model playing in an Iframe in elementor

    <script>
      function showIframe() {
        document.getElementById('runImage').style.display = 'none';
        const container = document.getElementById('container');
        const interactButton = document.getElementById('interactButton');

        // Hide the "Interact" button if present
        if (interactButton) {
          interactButton.style.display = 'none';
        }

        // Check if iframe is already present
        let iframe = document.getElementById('embeddedIframe');
        if (!iframe) {
          iframe = document.createElement('iframe');
          iframe.id = 'embeddedIframe';
          iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';
          iframe.style.width = '1210px';
          iframe.style.height = '600px';
          iframe.style.border = 'none';
          container.appendChild(iframe);
        }
        iframe.style.display = 'block';

        // Ensure maximize button is displayed
        let maximizeButton = document.getElementById('maximizeButton');
        if (!maximizeButton) {
          maximizeButton = document.createElement('button');
          maximizeButton.id = 'maximizeButton';
          maximizeButton.title = 'Click to use full screen';
          maximizeButton.style.position = 'absolute';
          maximizeButton.style.bottom = '10px';
          maximizeButton.style.right = '110px';
          maximizeButton.style.background = 'transparent';
          maximizeButton.style.border = 'none';
          maximizeButton.style.cursor = 'pointer';
          maximizeButton.style.width = '30px';
          maximizeButton.style.height = '30px';
          maximizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png")';
          maximizeButton.style.backgroundSize = 'contain';
          maximizeButton.style.backgroundRepeat = 'no-repeat';
          maximizeButton.onclick = function() {
            container.requestFullscreen();
            iframe.style.width = "100%";
            iframe.style.height = "100%";
            maximizeButton.style.display = 'none';
            minimizeButton.style.display = 'block';
          };
          container.appendChild(maximizeButton);
        }

        // Ensure minimize button is created
        let minimizeButton = document.getElementById('minimizeButton');
        if (!minimizeButton) {
          minimizeButton = document.createElement('button');
          minimizeButton.id = 'minimizeButton';
          minimizeButton.title = 'Exit full screen';
          minimizeButton.style.position = 'fixed';
          minimizeButton.style.bottom = '10px';
          minimizeButton.style.right = '110px';
          minimizeButton.style.background = 'transparent';
          minimizeButton.style.border = 'none';
          minimizeButton.style.cursor = 'pointer';
          minimizeButton.style.width = '30px';
          minimizeButton.style.height = '30px';
          minimizeButton.style.backgroundImage = 'url("https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png")';
          minimizeButton.style.backgroundSize = 'contain';
          minimizeButton.style.backgroundRepeat = 'no-repeat';
          minimizeButton.style.display = 'none'; // Hidden initially
          minimizeButton.onclick = function() {
            document.exitFullscreen();
            iframe.style.width = '1210px';
            iframe.style.height = '600px';
          };
          container.appendChild(minimizeButton);
        }
      }

      // Event listener to handle fullscreen changes
      document.addEventListener('fullscreenchange', function() {
        const maximizeButton = document.getElementById('maximizeButton');
        const minimizeButton = document.getElementById('minimizeButton');
        const iframe = document.getElementById('embeddedIframe');

        // Check if in fullscreen mode
        if (document.fullscreenElement) {
          if (maximizeButton) maximizeButton.style.display = 'none';
          if (minimizeButton) minimizeButton.style.display = 'block';
        } else {
          if (maximizeButton) maximizeButton.style.display = 'block';
          if (minimizeButton) minimizeButton.style.display = 'none';
          // Restore iframe size when exiting fullscreen
          iframe.style.width = '1210px';
          iframe.style.height ='600px';
        }
      });

      // Create the "Click to interact" button
      document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('container');
        const interactButton = document.createElement('button');
        interactButton.id = 'interactButton';
        interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";
        interactButton.style.position = 'absolute';
        interactButton.style.bottom = '13px';
        interactButton.style.right = '140px';
        interactButton.style.padding = '5px 10px';
        interactButton.style.fontSize = '16px';
        interactButton.style.fontWeight = 'bold';
        interactButton.style.backgroundColor = '#d3d3d3';
        interactButton.style.color = 'black';
        interactButton.style.border = 'none';
        interactButton.style.borderRadius = '5px';
        interactButton.style.cursor = 'pointer';
        interactButton.style.opacity = '0.9';

        interactButton.onclick = function(event) {
          event.stopPropagation();
          showIframe();
        };
        container.appendChild(interactButton);
      });
    </script>

    <div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;">
      <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;">
    </div>


    See Also

Comments


You are not allowed to post comments.