Switch Between Multiple Images

Overview

Create a Graphic Chooser that enables switching the video display extension between multiple pictures. The example below supports 5 different graphics.


Step-by-Step Guide


  1. Create a variable to select between different graphics.


  2. Follow the steps to Add an Image in Value Collaborator or Use Overlay Variables on Graphic to add Static and Dynamic Images in the VC.


  3. Click Extensions under the Advanced tab on the Visualizer Type page.


  4. Click Create New Extension.


  5. Enter a title for the new extension in the Name field.


  6. Click to select from the Tag drop-down field.


  7. Click Create.


  8. The Init Code appears. Copy and paste the following code and then click Save.
<p style="margin-bottom:0in;line-height:normal;">
		<span class="SpellE"><span style="font-size:9pt;font-family:Consolas;color:#707070;">this.createScenarioPanel</span></span><span style="font-size:9pt;font-family:Consolas;color:#707070;"> = function(scenario)</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> if (!<span class="SpellE">this.scenarioInitialized</span>)</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> <span class="SpellE">this.scenarioInitialized</span> = [<span class="GramE">];</span></span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"><span class="SpellE">Visualizer.view.scenario.TabPanel.addListener</span>('<span class="SpellE">tabchange</span>', function(<span class="SpellE">tabpanel</span>, tab)</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"><span class="SpellE">this.panel.setActiveTab</span>(<span class="SpellE">tabpanel.items.indexOf</span>(tab)<span class="GramE">);</span></span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> }, this<span class="GramE">);</span></span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> }</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> if (!<span class="SpellE">this.scenarioInitialized</span>[<span class="SpellE">scenario.index</span>])</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"><span class="SpellE">this.scenarioInitialized</span>[<span class="SpellE">scenario.index</span>] = <span class="GramE">true;</span></span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> </span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> <span class="SpellE">this.panel.add</span>(new <span class="SpellE">Ext.Panel</span>(</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> 'title': <span class="SpellE">Visualizer.model.scenario.getNameDecorated</span>(scenario),</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> 'layout': 'fit',</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> 'border': false,</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> '<span class="SpellE">autoScroll</span>': true,</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> </span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> 'listeners':</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> 'activate': function(<span class="SpellE">tabpanel</span>, tab)</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> <span class="SpellE">Analyzer.controller.calculator.run</span>(<span class="GramE">);</span></span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> }</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> },</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> </span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> 'html': <span class="SpellE">String.format</span>('&lt;div style="background-repeat:no-repeat; height:450; width:551;"&gt;&lt;<span class="SpellE">img</span> style="vertical-<span class="GramE">align:</span> middle; height: auto" src="https://www.visualize-roi.com/vr/images/uploads/5d28b6ac82ebd-Screenshot_7.png"&gt; &lt;div id="draggables"&gt;&lt;/div&gt; &lt;/div&gt;', <span class="SpellE">scenario.index</span>)}));</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> if (<span class="SpellE">scenario.index</span> == 0)</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> <span class="SpellE">this.panel.setActiveTab</span>(0<span class="GramE">);</span></span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> }</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> };</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> <span class="SpellE">this.panel</span> = new <span class="SpellE">Ext.TabPanel</span>(</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> 'title': 'Testimonial',</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> 'listeners':</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> '<span class="SpellE">tabchange</span>': function(<span class="SpellE">tabpanel</span>, tab)</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> {</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;">  Visualizer.view.scenario.TabPanel.setActiveTab(tabpanel.items.indexOf(tab)<span class="GramE">);</span></span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> }</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> }</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> });</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"> return <span class="SpellE">this.<span class="GramE">panel</span></span><span class="GramE">;</span></span>
	</p>
<p style="margin-bottom:0.25in;line-height:18.6pt;">
		<span style="font-size:9pt;font-family:Consolas;color:#707070;"></span>
	</p>

  1. Click Update Code. Copy and paste the following code.
      <p style="margin-bottom:0.25in;line-height:18.6pt;">
		<span style="font-size:10.5pt;font-family:Arial, sans-serif;color:#405261;"></span><span style="font-size:10.5pt;font-family:Arial, sans-serif;color:#405261;"></span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		<span class="SpellE">this.createScenarioPanel</span>(scenario<span class="GramE">);</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		var selector = ".image-tab-<span class="GramE">";</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		if(<span class="SpellE">typeof</span> <span class="SpellE">window.React</span> != "undefined" || <span class="SpellE">typeof</span> <span class="SpellE">window.React</span> == "undefined" ){
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 var extID = (<span class="SpellE">typeof</span> <span class="SpellE">window.React</span> !== "undefined") ? "##<span class="SpellE">Ext_ID_Here</span>##" : "extension_6us<span class="GramE">";</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 // Value Survey
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 if (vars[0]['Code Reference to Select Graphic'].value == 1) {
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 var imgLink = '&lt;<span class="SpellE">img</span> style="width:100%;" src="https://www.visualize-roi.com/vr/images/uploads/5d2bf965508e3-VM%201.JPG"&gt;'
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 }
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 // Value Quantified
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 else if (vars[0][ Code Reference to Select Graphic'].].value == 2) {
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 var imgLink = '&lt;<span class="SpellE">img</span> style="width:100%;" src="https://www.visualize-roi.com/vr/images/uploads/5d2bf98024b39-VM%202.JPG"&gt;'
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 }
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 // Value Deployed
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 else if (vars[0]['Code Reference to Select Graphic'].].value == 3) {
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 var imgLink = '&lt;<span class="SpellE">img</span> style="width:100%;" src="https://www.visualize-roi.com/vr/images/uploads/5d2bf999b4d88-VM%203.JPG"&gt;'
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 }
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 // Value Modernized
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 else if (vars[0]['Code Reference to Select Graphic'].].value == 4) {
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 var imgLink = '&lt;<span class="SpellE">img</span> style="width:100%;" src="https://www.visualize-roi.com/vr/images/uploads/5d2bf9ac3091e-VM%204.JPG"&gt;'
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 }
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 // Value Integrated
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 else if (vars[0]['Code Reference to Select Graphic'].].value == 5) {
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 var imgLink = '&lt;<span class="SpellE">img</span> style="width:100%;" src="https://www.visualize-roi.com/vr/images/uploads/5d2bf9bdada4f-VM%205.JPG"&gt;'
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 }
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 else {
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 var imgLink = ""
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 }
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		 $('#'+ extID).append('&lt;div &gt; &lt;div style="margin: 0 auto; width:100%; position: relative;padding: 5px;background-repeat:no-repeat; height:451; width:777;"&gt; ' + imgLink + ' &lt;div id="draggables"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt;'<span class="GramE">);</span>
	</p>
<p style="margin-bottom:0in;line-height:normal;">
		}}
	</p>

  1. Replace the 'Code Reference to Select Graphic' with the code reference you will be using to select a graphic to display..


  2. The replace the x (in value == x )with the number of the graphic.


  3. Replace the URLs with the graphic previously uploaded in ValueCore you wish to show, then select Save.


  4. You can create a large graphic library by replicating the code for individual graphics.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us