Upgrading Visualisation's Templates - Revision history

He120: /* Adding Text */

2022-07-18T11:14:51Z

Adding Text

← Older revision		Revision as of 11:14, 18 July 2022
Line 29:		Line 29:


	<syntaxhighlight lang="~~JavaScript~~" line>		<syntaxhighlight lang="html" line>
	<iv-visualisation :title="projectName">		<iv-visualisation :title="projectName">
	<template #hotspots>		<template #hotspots>

He120: /* Adding Text */

2022-07-18T11:13:34Z

Adding Text

← Older revision		Revision as of 11:13, 18 July 2022
Line 29:		Line 29:


	<syntaxhighlight lang="~~html~~" line>		<syntaxhighlight lang="JavaScript" line>
	<iv-visualisation :title="projectName">		<iv-visualisation :title="projectName">
	<template #hotspots>		<template #hotspots>

He120: /* Adding Text */

2022-07-18T11:13:08Z

Adding Text

← Older revision		Revision as of 11:13, 18 July 2022
Line 27:		Line 27:
	=== Adding Text ===		=== Adding Text ===
	First configure a side pane as shown, set showPagination to true in iv-sidebar-content if you are making a multipage visualisation or collection, the next and previous buttons wont work locally but should work when your visualisation is on the website and published. Copy text over from the old vis into iv-sidebar-section components in the side pane. Replace any equations, using the equation box component (you may want to add some linebreaks <nowiki><br></nowiki> to make it look nicer).		First configure a side pane as shown, set showPagination to true in iv-sidebar-content if you are making a multipage visualisation or collection, the next and previous buttons wont work locally but should work when your visualisation is on the website and published. Copy text over from the old vis into iv-sidebar-section components in the side pane. Replace any equations, using the equation box component (you may want to add some linebreaks <nowiki><br></nowiki> to make it look nicer).


			<syntaxhighlight lang="html" line>
			<iv-visualisation :title="projectName">
			<template #hotspots>
			<iv-pane position="left">
			<iv-sidebar-content :showPagination="false">
			<iv-sidebar-section :title="projectName">
			Next all we have to do is incorporate Snell's Law of refraction. This law states that: <br>
			<iv-equation-box equation="\frac{sin(\theta_{i})}{sin(\theta_{t})} - \frac{n_{t}}{n_{i}}"></iv-equation-box>
			<br>
			From this we can see that given a certain refractive index ratio, the outgoing direction of a wave can be det...
			So Snell's Law combined with boundary conditions allows us to calculate reflected and refractive waves given...

			</iv-sidebar-section>
			</iv-sidebar-content>
			</iv-pane>
			‎</syntaxhighlight>

	=== Copying Code ===		=== Copying Code ===

He120: /* Setting Up a New Template */

2022-07-15T10:59:12Z

Setting Up a New Template

← Older revision		Revision as of 10:59, 15 July 2022
Line 17:		Line 17:

	Add a title to your vis by creating a title prop with default value of a string with your desired name and binding it to the <iv-visualisation> tag as shown.		Add a title to your vis by creating a title prop with default value of a string with your desired name and binding it to the <iv-visualisation> tag as shown.


	‎<syntaxhighlight lang="JavaScript" line>		‎<syntaxhighlight lang="JavaScript" line>

He120: /* Setting Up a New Template */

2022-07-15T10:59:03Z

Setting Up a New Template

← Older revision		Revision as of 10:59, 15 July 2022
Line 14:		Line 14:
	This section assumes that NPM and the ImpVis front-end library have been installed on your machine. Open up a Command Line/Terminal and navigate to the folder you wish to work in. To set up a new template, key in "impvis create --visualisation name--" and press "Enter". There will be a section asking for packages you want to install. Please ensure that you include packages you may require for the visualisation, for example d3.js.		This section assumes that NPM and the ImpVis front-end library have been installed on your machine. Open up a Command Line/Terminal and navigate to the folder you wish to work in. To set up a new template, key in "impvis create --visualisation name--" and press "Enter". There will be a section asking for packages you want to install. Please ensure that you include packages you may require for the visualisation, for example d3.js.
	Once the new template is set up, you may install additional legacy packages such as plotly.js or jquery (note “jQuery” is depreciated and “jquery” must be installed instead), by navigating to the new template folder using “cd” and running the command “npm install plotly.js”. An example of using a legacy package would be to add <code>import Plotly from “plotly.js/dist/plotly.min.js”;</code> at the top of the script section in App.vue.		Once the new template is set up, you may install additional legacy packages such as plotly.js or jquery (note “jQuery” is depreciated and “jquery” must be installed instead), by navigating to the new template folder using “cd” and running the command “npm install plotly.js”. An example of using a legacy package would be to add <code>import Plotly from “plotly.js/dist/plotly.min.js”;</code> at the top of the script section in App.vue.
	~~[[File:Title binding.png\|thumb\|Binding~~ title ~~prop~~ to ~~set the~~ title of the visualisation. ]]

			Add a title to your vis by creating a title prop with default value of a string with your desired name and binding it to the <iv-visualisation> tag as shown.


	‎<syntaxhighlight lang="JavaScript" line>		‎<syntaxhighlight lang="JavaScript" line>
	<iv-visualisation: title="projectName">		<iv-visualisation: title="projectName">
	‎</syntaxhighlight>		‎</syntaxhighlight>

	~~Add a title to your vis by creating a title prop with default value of a string with your desired name and binding it to the <iv-visualisation> tag as shown.~~

	== Transferring Old Vis ==		== Transferring Old Vis ==

He120: /* Setting Up a New Template */

2022-07-15T10:57:55Z

Setting Up a New Template

← Older revision		Revision as of 10:57, 15 July 2022
Line 16:		Line 16:
	[[File:Title binding.png\|thumb\|Binding title prop to set the title of the visualisation. ]]		[[File:Title binding.png\|thumb\|Binding title prop to set the title of the visualisation. ]]

	‎<syntaxhighlight lang="~~Java~~" line>		‎<syntaxhighlight lang="JavaScript" line>
	<iv-visualisation: title="projectName">		<iv-visualisation: title="projectName">
	‎</syntaxhighlight>		‎</syntaxhighlight>

He120: /* Setting Up a New Template */

2022-07-15T10:57:43Z

Setting Up a New Template

← Older revision		Revision as of 10:57, 15 July 2022
Line 16:		Line 16:
	[[File:Title binding.png\|thumb\|Binding title prop to set the title of the visualisation. ]]		[[File:Title binding.png\|thumb\|Binding title prop to set the title of the visualisation. ]]

	‎<syntaxhighlight lang="~~html~~" line>		‎<syntaxhighlight lang="Java" line>
	<iv-visualisation: title="projectName">		<iv-visualisation: title="projectName">
	‎</syntaxhighlight>		‎</syntaxhighlight>

He120: /* Setting Up a New Template */

2022-07-15T10:53:09Z

Setting Up a New Template

← Older revision		Revision as of 10:53, 15 July 2022
Line 16:		Line 16:
	[[File:Title binding.png\|thumb\|Binding title prop to set the title of the visualisation. ]]		[[File:Title binding.png\|thumb\|Binding title prop to set the title of the visualisation. ]]

	‎<syntaxhighlight lang="~~JavaScript~~" line>		‎<syntaxhighlight lang="html" line>
	<iv-visualisation: title="projectName">		<iv-visualisation: title="projectName">
	‎</syntaxhighlight>		‎</syntaxhighlight>

He120: /* Setting Up a New Template */

2022-07-15T10:52:52Z

Setting Up a New Template

← Older revision		Revision as of 10:52, 15 July 2022
Line 16:		Line 16:
	[[File:Title binding.png\|thumb\|Binding title prop to set the title of the visualisation. ]]		[[File:Title binding.png\|thumb\|Binding title prop to set the title of the visualisation. ]]

	‎<syntaxhighlight lang="~~python~~" line>		‎<syntaxhighlight lang="JavaScript" line>
	<iv-visualisation: title="projectName">		<iv-visualisation: title="projectName">
	‎</syntaxhighlight>		‎</syntaxhighlight>

He120: /* Setting Up a New Template */

2022-07-15T10:52:23Z

Setting Up a New Template

← Older revision		Revision as of 10:52, 15 July 2022
Line 17:		Line 17:

	‎<syntaxhighlight lang="python" line>		‎<syntaxhighlight lang="python" line>
			<iv-visualisation: title="projectName">
	‎</syntaxhighlight>		‎</syntaxhighlight>