https://wiki.impvis.co.uk/api.php?action=feedcontributions&feedformat=atom&user=Rishavc7 2026-04-13T06:01:44Z User contributions MediaWiki 1.36.0 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1391 2022-07-12T09:52:21Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> Code to implement the Pane seen on the right.<br /> <br /> ‎&lt;syntaxhighlight lang=&quot;python&quot; line&gt;<br /> def quick_sort(arr):<br /> less = []<br /> pivot_list = []<br /> more = []<br /> if len(arr) &lt;= 1:<br /> return arr<br /> else:<br /> pass<br /> ‎&lt;/syntaxhighlight&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1372 2022-07-07T11:04:04Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> Code to implement the Pane seen on the right.<br /> <br /> ‎&lt;pre&gt;<br /> def quick_sort(arr):<br /> less = []<br /> pivot_list = []<br /> more = []<br /> if len(arr) &lt;= 1:<br /> return arr<br /> else:<br /> pass<br /> ‎&lt;/pre&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1371 2022-07-07T11:01:56Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;pre&gt;<br /> def quick_sort(arr):<br /> less = []<br /> pivot_list = []<br /> more = []<br /> if len(arr) &lt;= 1:<br /> return arr<br /> else:<br /> pass<br /> ‎&lt;/pre&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1370 2022-07-07T10:58:41Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;syntaxhighlight lang=&quot;python&quot; line&gt;<br /> def quick_sort(arr):<br /> less = []<br /> pivot_list = []<br /> more = []<br /> if len(arr) &lt;= 1:<br /> return arr<br /> else:<br /> pass<br /> ‎&lt;/syntaxhighlight&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1369 2022-07-07T10:54:35Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;pre&gt;<br /> def quick_sort(arr):<br /> less = []<br /> pivot_list = []<br /> more = []<br /> if len(arr) &lt;= 1:<br /> return arr<br /> else:<br /> pass<br /> ‎&lt;/pre&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1368 2022-07-07T10:54:07Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;pre&gt;<br /> <br /> def quick_sort(arr):<br /> <br /> less = []<br /> <br /> pivot_list = []<br /> <br /> more = []<br /> <br /> if len(arr) &lt;= 1:<br /> <br /> return arr<br /> <br /> else:<br /> <br /> pass<br /> <br /> ‎&lt;/pre&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1367 2022-07-07T10:53:01Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;source lang=&quot;python&quot;&gt;<br /> <br /> def quick_sort(arr):<br /> <br /> less = []<br /> <br /> pivot_list = []<br /> <br /> more = []<br /> <br /> if len(arr) &lt;= 1:<br /> <br /> return arr<br /> <br /> else:<br /> <br /> pass<br /> <br /> ‎&lt;/source&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1366 2022-07-07T10:52:41Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;source lang=&quot;python&quot;&gt;<br /> <br /> def quick_sort(arr):<br /> <br /> less = []<br /> <br /> pivot_list = []<br /> <br /> more = []<br /> <br /> if len(arr) &lt;= 1:<br /> <br /> return arr<br /> <br /> else:<br /> <br /> pass<br /> <br /> ‎&lt;/code&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1365 2022-07-07T10:51:24Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;code&gt;<br /> <br /> def quick_sort(arr):<br /> <br /> less = []<br /> <br /> pivot_list = []<br /> <br /> more = []<br /> <br /> if len(arr) &lt;= 1:<br /> <br /> return arr<br /> <br /> else:<br /> <br /> pass<br /> <br /> ‎&lt;/code&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1364 2022-07-07T10:50:37Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;code&gt;<br /> <br /> def quick_sort(arr):\n<br /> less = []<br /> pivot_list = []<br /> more = []<br /> if len(arr) &lt;= 1:<br /> return arr<br /> else:<br /> pass<br /> <br /> ‎&lt;/code&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1363 2022-07-07T10:50:19Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;code&gt;<br /> <br /> def quick_sort(arr):<br /> less = []<br /> pivot_list = []<br /> more = []<br /> if len(arr) &lt;= 1:<br /> return arr<br /> else:<br /> pass<br /> <br /> ‎&lt;/code&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1362 2022-07-07T10:43:43Z

<p>Rishavc7: /* Panes */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;syntaxhighlight lang=&quot;python&quot; style=&quot;border: 3px dashed blue;&quot;&gt;<br /> <br /> def quick_sort(arr):<br /> less = []<br /> pivot_list = []<br /> more = []<br /> if len(arr) &lt;= 1:<br /> return arr<br /> else:<br /> pass<br /> <br /> ‎&lt;/syntaxhighlight&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1361 2022-07-07T10:43:08Z

<p>Rishavc7: /* Panes */ - Syntax highlighting demo</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> ‎&lt;syntaxhighlight lang=&quot;python&quot; style=&quot;border: 3px dashed blue;&quot;&gt;<br /> def quick_sort(arr):<br /> less = []<br /> pivot_list = []<br /> more = []<br /> if len(arr) &lt;= 1:<br /> return arr<br /> else:<br /> pass<br /> ‎&lt;/syntaxhighlight&gt;<br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Basic_Component_Tutorial&diff=1348 2022-06-23T15:10:42Z

<p>Rishavc7: /* Toggleable hotspots */</p> <hr /> <div>This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]]. <br /> [[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]<br /> <br /> == Panes ==<br /> <br /> [[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page]. <br /> [[File:Pane code.06188d60.png|center|thumb|518x518px|Code to implement the Pane seen on the right.]]<br /> <br /> <br /> <br /> <br /> == Adding content to the mainstage ==<br /> [[File:Shm code.3432acb7.png|left|thumb|SHM code being implemented in MainStage.vue]]<br /> <br /> This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!<br /> <br /> <br /> <br /> The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.<br /> <br /> Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Toggleable hotspots ==<br /> [[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]<br /> <br /> Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.<br /> [[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]<br /> <br /> <br /> <br /> An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> == Fixed hotspots ==<br /> Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below. <br /> <br /> [[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]<br /> [[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]<br /> Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.<br /> <br /> <br /> <br /> <br /> <br /> <br /> == Importing your own components ==<br /> Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations. <br /> [[File:Filename.png|thumb|Mainstage.vue file]]<br /> In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.<br /> <br /> For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:<br /> [[File:Mainstage code.png|center|thumb|Mainstage code.]]<br /> [[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]<br /> <br /> <br /> <br /> <br /> 1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue <br /> <br /> <br /> <br /> <br /> <br /> <br /> [[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]<br /> 2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).<br /> <br /> A screenshot of the result of this code is pasted below.<br /> [[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]<br /> [[Category:Coding Guidance]]<br /> [[Category:Tips Whilst Coding]]<br /> [[Category:ImpVis Template]]</div>

Rishavc7 https://wiki.impvis.co.uk/index.php?title=Programming_languages&diff=1317 2022-02-02T14:02:55Z

<p>Rishavc7: /* The tools we use to create visualisations */</p> <hr /> <div>== The tools we use to create visualisations ==<br /> Hypertext Markup Language (HTML) is the backbone of any webpage, and this is the case for ImpVis. HTML is less of a language and more of a collection of blocks or ‘elements’ that define what goes on your page. HTML allows us to define everything on our page, but cannot do much else. For the most part, HTML is static and cannot perform complex equations or plotting. This is where JavaScript (JS) comes in. ImpVis visualisations use JS to perform physical/mathematical calculations, plot, and achieve interactivity. These elements can contain anything from text to a slider to a graph plot, and can be styled to your preference! From the size of your element to the text color, this styling can all be specified using another language: Cascading Style Sheet (CSS).<br /> <br /> Here are a few links to relevant places on how to do some basic HTML, CSS and JS -<br /> *'''HTML''': https://www.codecademy.com/learn/learn-html https://scrimba.com/learn/htmlcss<br /> *'''CSS''': https://www.codecademy.com/learn/learn-css<br /> *'''JS''': https://www.codecademy.com/learn/introduction-to-javascript https://scrimba.com/learn/learnjavascript<br /> For the HTML course, you will most likely require sections 1. ''Elements and Structure'', and 3. ''Forms''. You may choose to opt-out on learning CSS as we have a set of predefined components, like sliders and buttons, which will be introduced later! If you are interested in customising the components, you may come back and learn CSS. As for JS, sections 2-7 are essential, and sections 8 and 9 are useful for object-oriented programming.<br /> <br /> While coding a visualisation, you will inevitably have to use some mathematical functions. ''Math.js'' is an extensive JS math library that provides many useful tools. For more information, https://mathjs.org/.<br /> <br /> == Further links ==<br /> Have a look at our [[Help on HTML, CSS, JS and JS libraries]] page for further guidance on these coding languages.<br /> [[Category:Setting Up]]</div>

Rishavc7