ImpVis Wiki - User contributions [en-gb]

How to Make the Template Mobile Friendly

2021-07-22T11:02:13Z

FreyaHan:

The current template is using CSS grid style, the position of the hotspots are set to be in specific grid areas. To see this, go to the visualisation component under the layout folder and scroll down to css style:[[File:Grid display.png|951x951px]]

If we want to make it mobile friendly, one thing we can do is to have different grid settings in different type of screens (differ by maximum width). An example of this can be found at https://dodung1221.medium.com/best-way-to-design-web-responsive-with-grid-view-in-css-ad44cb5974a4 . In the example, the grod layout was only specified by columns. However, given the hotspot we want to implement, we need both row and column to be written in percentages.
[[Category:Maintaining ImpVis]]

How to Make the Template Mobile Friendly

2021-07-22T11:01:41Z

FreyaHan: Created page with "The current template is using CSS grid style, the position of the hotspots are set to be in specific grid areas. To see this, go to the visualisation component under the layou..."

File:Grid display.png

2021-07-22T10:51:55Z

FreyaHan:

Example css

Tech Team Final Documentation

2021-07-22T10:47:34Z

FreyaHan:

''This page summarises the work carried out by the Tech Team in the summer of 2021.''

== Team members ==

* Robert Jones
* Freya Han
* Shahbanno Hussain
* Joshua Cheng
* Hamzah Malik

==Accomplished Works==
===Template ===
'''New components:'''

# [[Increment button]] component (can specify initial value, increment amount, maximum and minimum)
# [[Reset button]] which resets all sliders, basic toggles, advance toggles, increment buttons, and dropdown lists on page back to their default/initial values

'''Feature additions to existing components:'''

# Add a label attribute to the slider
# Add transparency or glass effect to toggle hotspot
# Slider play on its own when button clicked
# Disable some tabs in toggleadvanced and automatically change the current tab selected to an enabled one if its now disabled
# Can specify width of toggle advance
# Added reset capability to basic toggle (so basic toggle can act as a reset button if specified)
# Reset button compatibility with tickbox
# Added reset compatibility to dropdown list
# Add title to fixed hotspot
# Specify which position to put play button with respect to slider
# Reset capability to dropdown list

'''Layout bugs we fixed:'''

# Adjust iv-button default bottom-padding to match other edges (about 35px)
# Category text escapes overflows out of container if too long
# Text also does not fit in the toggle anymore
# Hotspot toggle no longer wraps around text nicely
# Make pane emit event when resized or toggled (helps users to resize vis content)
# Dropdown list element text overflows

'''Functionality bugs we fixed:'''

# Slider should emit event both on mousemove and mouseup
# Tabs should emit event when tab selected
# Symbol button doesnt have any methods
# Tickbox initial state prop doesnt work
# Make slider change events (on drag, on drop, on play) as one event
# When toggles that are disabled changes, automatically move currently selected toggle to one that is allowed

=== Visualisations Updated ===
'''Below is a list of all visualisation which have been transferred to the new template this summer:'''

* Gyroscope collection https://impvis.co.uk/launch/gyroscopic-motion-2/frictionless.html?collection=23
* Introduction to divergence and curl collection https://impvis.co.uk/launch/introductions-to-divergence-and-curl-collection-2/introduction.html?collection=27
* Curvilinear Coordinates collection https://impvis.co.uk/launch/polar-coordinates-3/index.html?collection=15
* Quantum Spin in Atoms collection https://impvis.co.uk/launch/quantum-spin/quantumangmom.html?collection=37
* Snell's Law https://impvis.co.uk/launch/snells-law-v2/index.html
* Spacetime Diagrams https://impvis.co.uk/launch/spacetime-diagrams-v2/index.html
* Lattice Vibrations Collection (already in new template but bugs fixed) https://impvis.co.uk/launch/lattice-vibrations-introduction-2/introduction.html?collection=5
* Virtual Materials Lab Collection https://impvis.co.uk/launch/virtual-materials-lab-introduction/intro.html?collection=34
* Vibrations App Collection https://impvis.co.uk/launch/me2-vibrations-single-degree-of-freedom-8/index.html?collection=38
* Rotating Frames Collection (1/4 pages)
* Matrices: Transformations and Eigenvectors Collection (3/4 pages)

=== Visualisations Created ===
'''Below is a list of all new visualisation which have been created/uploaded this summer:'''

* Virtual Materials Lab Collection https://impvis.co.uk/launch/virtual-materials-lab-introduction/intro.html?collection=34
* Vibrations App Collection https://impvis.co.uk/launch/me2-vibrations-single-degree-of-freedom-8/index.html?collection=38
* Playground https://impvis.co.uk/launch/playground-v2/index.html
* ImpVis Components Demo Collection https://impvis.co.uk/launch/impvis-layouts/page1.html?collection=39
*Differentiation Collection https://impvis.co.uk/launch/differentiation-finite-difference/first.html?collection=36
*Rainbows https://impvis.co.uk/launch/rainbows-observer-height-v2/page1.html

==Things We Wanted to Do but Failed==
===Bug Fixing===
1. Attempted to rewrite the Toggle hotspot, failed because it was wrapped by the hotspotable tag and then placed under the iv-visualisation tag. The iv-visualisation tag is written in terms of grid display, changing the Toggle hotspot requires changing both hotspotable and the iv-visualisation, which may also affect the position of tittle bar and the side pane.

2. Draggable hotspot is currently using the toggle hotspot's toggle which causes bugs to toggle hotspot. When placing two toggle hotspots in the same position, instead of being placed next to each other, the toggle hotspots appears on top of each other. Attempt was made to fix this, however, more bugs such as toggle hotspot creates a huge vertical scroll bar has occured along the way, so we decided to leave it.

3. Large hotspots creates scroll bar on the page, we tried using overflow:hidden, but it was not fixed by this. This may be a problem due to elements that exist on the main stage that have a formatting problem when the hotspot is interacted with. In certain cases you are able to solve this issue by isolating which element is too big or has an overflow glitch when the hotspot is toggled and then changing some of its attributes until the scroll bars no longer appear. There might be a way to universally fix this issue by either updating the main stage or the hotspot component but no such fix has been found so far.

4. Did not come up with a good solution to slider number overflows, the current solution is to reduce tick steps.

===Moving Visualisations===
1. Two-body collisions: The original vis was written with Phaser-ce which wouldn't work with Vue. The code was rewritten to Phaser 3 (https://github.com/jhc4318/collisions-new) however there are issues with images not displaying due to needing a web server supposedly. A potential fix is to try using a variable in data to set up the image using require('@/assets/image.png') however this was only tested with p5. If this doesn't work, the vis should be rewritten with SVGs.

2. The Battery Discharge collection cannot be fully migrated to the new template as only the first page is fully functional in its current build. The author of the vis would need to finish it before the whole project can start to be migrated to the newest template.

==Future Improvements==
1. If capable, rewrite the layout so that everything can be separated out from the iv-visualisation tag.

=== Template Changes ===

# Some Changes were made to the template to make it more responsive and mobile friendly, however it still doesn't work excellently on mobile. It would be good to carefully restyle all elements of the template using css mediaqueries and flexboxes where appropriate, so that it works well on mobile devices and desktops. More information can be found on [[How to Make the Template Mobile Friendly]].
==To follow up==
1. Contacted staff partner for Quantum spin collection (Richard Thompson) for feedback via email - follow up for reply in September.

2. Sent reviewer invite to staff partner for Rainbows vis (Masoud Seifikar) requesting feedback via the issues feature on the website

Tech Team Final Documentation

2021-07-20T09:59:56Z

FreyaHan:

==Accomplished Works==
===Bug Fixing===
'''Below is a list of bugs we have fixed this summer:'''

1.Slider should emit event both on mousemove and mouseup

2.Tabs should emit event when tab selected

3.Add a label attribute to the slider

4.Adjust iv-button default bottom-padding to match other edges (about 35px)

5.Reset button which resets all the components back to their default/initial values

6.Category text escapes overflows out of container if too long

7.Add transparency or glass effect to toggle hotspot

8.Slider play on its own when button clicked

9.Disable some tabs in toggleadvanced and automatically change the current tab selected to an enabled one if its now disabled

10.Make increment button component

11.Can specify width of toggle advance

12.Text also does not fit in the toggle anymore

13.Hotspot toggle no longer wraps around text nicely

14.Reset button compatibility with tickbox

15.Added reset capability to basic toggle

16.Make pane emit event when resized or toggled (helps users to resize vis content)

17.Symbol button doesnt have any methods

18.Tickbox initial state prop doesnt work

19.Add title to fixed hotspot

20.Specify which position to put play button with respect to slider

21.Dropdown list element text overflows

22.Reset capability to dropdown list

23.Advanced toggle, when all tabs are disabled, one is still selected

==Things We Wanted to Do but Failed==
===Bug Fixing===
1. Attempted to rewrite the Toggle hotspot, failed because it was wrapped by the hotspotable tag and then placed under the iv-visualisation tag. The iv-visualisation tag is written in terms of grid display, changing the Toggle hotspot requires changing both hotspotable and the iv-visualisation, which may also affect the position of tittle bar and the side pane.

2. Draggable hotspot is currently using the toggle hotspot's toggle which causes bugs to toggle hotspot. When placing two toggle hotspots in the same position, instead of being placed next to each other, the toggle hotspots appears on top of each other. Attempt was made to fix this, however, more bugs such as toggle hotspot creates a huge vertical scroll bar has occured along the way, so we decided to leave it.

3. Large hotspots creates scroll bar on the page, we tried using overflow:hidden, but it was not fixed by this.

4. Did not come up with a good solution to slider number overflows, the current solution is to reduce tick steps.

==Future Improvements==
1. If capable, rewrite the layout so that everything can be separated out from the iv-visualisation tag.

Tech Team Final Documentation

2021-07-20T09:42:32Z

FreyaHan:

Tech Team Final Documentation

2021-07-20T09:35:23Z

FreyaHan: /* Transferring Visualistions */

==Accomplished Works==
==Things We Wanted to Do but Failed==
==Future Improvements==

Tech Team Final Documentation

2021-07-20T09:35:02Z

FreyaHan: Created page with "==Accomplished Works== ===Transferring Visualistions=== ===Fixing The Template=== ==Things We Wanted to Do but Failed== ==Future Improvements=="

==Accomplished Works==
===Transferring Visualistions===
===Fixing The Template===
==Things We Wanted to Do but Failed==
==Future Improvements==

Main Page

2021-07-20T09:29:44Z

FreyaHan:

== Navigate Categories ==

<categorytree mode="pages">Everything</categorytree>

== Wiki Divisions ==

* [[Blackboard]]
* [[Visualisations]]
* [[Knowledge]]

== Summer 2021==
*[[Tech Team Final Documentation]]

==Getting started==
Consult the [[mediawikiwiki:Special:MyLanguage/Help:Contents|User's Guide]] for information on using the wiki software.
*[[mediawikiwiki:Special:MyLanguage/Manual:Configuration_settings|Configuration settings list]]
*[[mediawikiwiki:Special:MyLanguage/Manual:FAQ|MediaWiki FAQ]]
*[https://lists.wikimedia.org/mailman/listinfo/mediawiki-announce MediaWiki release mailing list]
*[[mediawikiwiki:Special:MyLanguage/Localisation#Translation_resources|Localise MediaWiki for your language]]
*[[mediawikiwiki:Special:MyLanguage/Manual:Combating_spam|Learn how to combat spam on your wiki]]

Editing ImpVis Components

2021-07-19T09:43:55Z

FreyaHan:

If you want to make a change to one of the ImpVis components in any visualisation (referred to by <iv-component>) then you will need to follow the steps on this page.
# To edit the components library you must first clone [https://github.com/Imperial-visualizations/Vue-Components the repository]. If you are making a small change then cloning and editing directly on the "dev" branch may work, however if you are making larger changes you may want to consider making your own fork or branch.
# To start editing you must navigate to the folder you have cloned in a command prompt/terminal using "cd <directory path>". Once in the correct location you can run the example template to test your component by running <code>npm run template</code>. The code for this example template is located within the "template" folder.
#Make your edits to the components located within the "src/components" folder, and test them using the example template.
#Iterate the version number in the package.json (line 3). For minor changes, iterate the last digit; for medium changes, the middle digit; and for very large changes iterate the first digit. E.g. a medium change would make 1.1.6 -> 1.2.6.
#Create a pull request from your branch to the master branch, you will need two approving reviews to get your pull request approved and merged. The reviewers should thoroughly test your components and give suggestions for improvements.
#Now run <code>npm update @impvis/components</code> in the folders of your existing visualisations to get the latest updates.
#Update the documentation for the [[vue components]] on the wiki to include your changes.
#<code>@impvis/components</code> library is currently on version 1.4.6

[[Category:Maintaining_ImpVis]]

Loader

2021-07-08T09:08:33Z

FreyaHan:

The <code>iv-loader</code> component creates a loading spinner before the visualisation gets loaded.
<div class="res-img">
[[File:Loader.png|845x845px]]
</div>
==Techinical Information==
===Props===
None
===Events===
None

==Design Choice==
The loading spinner used the classic Imperial Blue
[[Category:ImpVis Components]]

File:Loader.png

2021-07-08T09:05:37Z

FreyaHan:

Sreenshot of loader in working

Loader

2021-07-08T08:56:49Z

FreyaHan: Created page with "The <code>iv-loader</code> component creates a loading spinner before the visualisation gets loaded. Category:ImpVis Components"

The <code>iv-loader</code> component creates a loading spinner before the visualisation gets loaded.
[[Category:ImpVis Components]]

Draggable Hotspot

2021-07-07T08:52:08Z

FreyaHan:

The <code>iv-draggableDiv</code> component is used to create a draggable hotspot across the main visualisation stage.
<div class="res-img">
[[File:Draggable-hotspot.png|740x740px]]
</div>
==Technical Information==
===How to Use===
To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:
<div class="res-img">[[File:Hotspot-example-2.png|780x780px]]
</div>
===Props===
Name: idName

Type: String

Required: true

Default: "Name_1"

Description: Need to be included so that by matching it with the idName of the iv-toggle-hotspot component, the two can be binded together

Name: glass

Type: Bollean

Default: true

Description: Used to create glass effect

Name: transparent

Type: Bollean

Default: false

Description: Used to create transparent effect

===Events===
None

==Design Choice==
The toggle hotspot button was used in the draggable hotspot to keep consistency with the toggle hotspot itself. The color of the drag me bar and the close button are set to be the same color as the toggle button

[[Category:Layouts]]

Draggable Hotspot

2021-07-07T08:50:47Z

FreyaHan: /* How to Use */

File:Hotspot-example-2.png

2021-07-07T08:49:54Z

FreyaHan:

Example code of draggable hotspot

Toggle Hotspot

2021-07-07T08:45:04Z

FreyaHan:

'''This component can be used in conjunction with [[Draggable Hotspot]].'''

The <code>iv-toggle-hotspot</code> component creates a toggle hotspot with position of user's choice.
<div class="res-img">
[[File:Toggle hotspot.png|811x811px]]
</div>
==Technical Information==
===Props===
Name: draggable

Type: Boolean

Default: false

Description: If true, the toggle button can be used with the draggable hotspot

Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: title

Type: String

Default:

Description: Used to set the name of the toggle hotspot, which will appear on the toggle button

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space

===Events===
None

== Design Choice==
The hotspot was made to be pure white to display content better, the button that toggles the hotspot was made to be yellow, which contrusts the main theme -- imperial blue.
[[Category:Layouts]]

Draggable Hotspot

2021-07-06T12:31:00Z

FreyaHan:

The <code>iv-draggableDiv</code> component is used to create a draggable hotspot across the main visualisation stage.
<div class="res-img">
[[File:Draggable-hotspot.png|740x740px]]
</div>
==Technical Information==
===How to Use===
To use the <code>iv-draggableDiv</code> component, put this tag inside the <code>iv-visualisation</code> tag but oustside the <code>#hotspots</code> template. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:
<div class="res-img">[[File:Hotspot-example-1.png|780x780px]]
</div>
===Props===
Name: idName

Type: String

Required: true

Default: "Name_1"

Description: Need to be included so that by matching it with the idName of the iv-toggle-hotspot component, the two can be binded together

Name: glass

Type: Bollean

Default: true

Description: Used to create glass effect

Name: transparent

Type: Bollean

Default: false

Description: Used to create transparent effect

===Events===
None

==Design Choice==
The toggle hotspot button was used in the draggable hotspot

[[Category:Layouts]]

File:Hotspot-example-1.png

2021-07-06T10:39:49Z

FreyaHan:

Example code of draggable hotspot

File:Hotspot-example.png

2021-07-06T10:37:14Z

FreyaHan:

Example of how to use the draggable hotspot

Draggable Hotspot

2021-07-06T10:28:45Z

FreyaHan:

File:Draggable-hotspot.png

2021-07-06T10:26:18Z

FreyaHan:

Screenshot of draggable hotspot in working

Draggable Hotspot

2021-07-06T10:22:33Z

FreyaHan: Created page with "The <code>iv-draggable-hotspot</code> component is used to create a draggable hotspot across the main visualisation stage. Category:Layouts"

The <code>iv-draggable-hotspot</code> component is used to create a draggable hotspot across the main visualisation stage.
[[Category:Layouts]]

Toggle Hotspot

2021-07-06T10:21:01Z

FreyaHan:

'''This component is currently used in conjunction with [[Draggable Hotspot]].'''

The <code>iv-toggle-hotspot</code> component creates a toggle hotspot with position of user's choice.
<div class="res-img">
[[File:Toggle hotspot.png|811x811px]]
</div>
==Technical Information==
===Props===
Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: title

Type: String

Default:

Description: Used to set the name of the toggle hotspot, which will appear on the toggle button

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space

===Events===
None

==Design Choice==
The hotspot was made to be pure white to display content better, the button that toggles the hotspot was made to be yellow, which contrusts the main theme -- imperial blue.
[[Category:Layouts]]

Toggle Hotspot

2021-07-06T10:20:00Z

FreyaHan:

'''This component is currently used in conjunction with Draggable Hotspot.'''

The <code>iv-toggle-hotspot</code> component creates a toggle hotspot with position of user's choice.
<div class="res-img">
[[File:Toggle hotspot.png|811x811px]]
</div>
==Technical Information==
===Props===
Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: title

Type: String

Default:

Description: Used to set the name of the toggle hotspot, which will appear on the toggle button

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space

===Events===
None

==Design Choice==
The hotspot was made to be pure white to display content better, the button that toggles the hotspot was made to be yellow, which contrusts the main theme -- imperial blue.
[[Category:Layouts]]

Visualisation

2021-07-01T09:43:02Z

FreyaHan:

The <code>iv-visualisation</code> is the main stage that hosts the visualisation.
<div class="res-img">
[[File:Visualisation.png|861x861px]]
</div>
==Techincal Information==
===Props===
Name: corners

Type: Array

Default: ['topleft','topright','bottomleft','bottomright']

Description: Define the corners of the page

Name: edges

Type: Array

Default: ['top','bottom','left','right']

Description: Define the edges of the page

Name: title

Type: String

Default: "Default Title"

Description: Used to set the title of the visualisation, same use as the title bar

Name:vue_config

Type: Object

Name: pageNumber

Type: Number

===Events===
None
==Design Choice==
Simple pure white page.

[[Category:Layouts]]

Visualisation

2021-07-01T09:30:29Z

FreyaHan: Created page with "The <code>iv-visualisation</code> is the main stage that hosts the visualisation. <div class="res-img"> 861x861px </div> ==Techincal Information==..."

The <code>iv-visualisation</code> is the main stage that hosts the visualisation.
<div class="res-img">
[[File:Visualisation.png|861x861px]]
</div>
==Techincal Information==

[[Category:Layouts]]

File:Visualisation.png

2021-07-01T09:29:24Z

FreyaHan:

Screenshot of main stage in working

Pane

2021-07-01T09:10:26Z

FreyaHan:

The <code>iv-pane</code> component creates a pane on either the right or the left hand side of the page.<div class="res-img">
[[File:Pane.png|839x839px]]
</div>
==Technical Information==
===Props===
Name: width

Type: Number

Default: 400

Description: Used to set the width of the pane

Name: format

Type: String

Default: 'push'

Validator: ['overlay','push']

Description: Used to set the pane to different mode (i.e. it lays on top of the main stage or it pushes the main stage to the side)

Name: glass

Type: Boolean

Default: false

Description: If true, turns the opacity of the pane to 0

Name: allowResize

Type: Boolean

Default: false

Description: If true, allows users to resize the pane

===Events===
mouseup and mousemove

description: allow draggable resize using mouse

touchmove and touchend

description: allow draggable resize using touchscreen

==Design Choice==
The pane was made to be pure white and the toggle button was made to be imperial blue to match the theme.

[[Category:Layouts]]

Fixed Hotspot

2021-07-01T09:01:54Z

FreyaHan:

The <code>iv-fixed-hotspot</code> component creates a fixed hotspot with position of user's choice.
<div class="res-img">
[[File:Fixed hotspot.png|811x811px]]
</div>
==Technical Information==
===Props===
Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: transparent

Type: Boolean

Default: false

Description: If true, the background of the hotspot will be transparent

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space

===Events===
None

==Design Choice==
The hotspot was chose to have a white background such that it can clearly present the content.
[[Category:Layouts]]

Toggle Hotspot

2021-07-01T09:01:04Z

FreyaHan:

The <code>iv-toggle-hotspot</code> component creates a toggle hotspot with position of user's choice.
<div class="res-img">
[[File:Toggle hotspot.png|811x811px]]
</div>
==Technical Information==
===Props===
Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: title

Type: String

Default:

Description: Used to set the name of the toggle hotspot, which will appear on the toggle button

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space

===Events===
None

==Design Choice==
The hotspot was made to be pure white to display content better, the button that toggles the hotspot was made to be yellow, which contrusts the main theme -- imperial blue.
[[Category:Layouts]]

Slider

2021-07-01T08:59:28Z

FreyaHan:

The <code>iv-slider</code> component appears as a range slider with costumised maximum and minimum values and number of ticks.

<div class="res-img">
[[File:Slider.png|722x722px]]
</div>

==Techical/coding information==
The Slider Component contains 4 sub-components, which are listed below:
*[[Slider: bubble.vue|bubble.vue]]
*[[Slider: inputButton.vue|inputButton.vue]]
*[[Slider: lineTicks.vue|lineTicks.vue]]
*[[Slider: numTicks.vue|numTicks.vue]]
It also has 15 props:

===Props===
Name: bubble

Type: Boolean

Default: true

Description: Used to display slider value as a bubble above the slider thumb, which follows the thumb

Name: sliderButtons

Type: Boolean

Default: flase

Description: Used to display buttons to increase or decrease the slider value by a fixed amount

Name: sliderButtons

Type: Boolean

Default: flase

Description: Used to display buttons to increase or decrease the slider value by a fixed amount

Name: buttonInput

Type: Boolean

Default: flase

Description: Used to display input to vary the sliderButton increase or decrease amount, applied to both equally

Name: lineTick

Type: Boolean

Default: flase

Description: Used to display line slider ticks at each step

Name: numTick

Type: Boolean

Default: true

Description: Used to display value slider ticks at each step

Name: numTick

Type: Boolean

Default: true

Description: Used to display value slider ticks at each step

Name: playSlider

Type: Boolean

Default: false

Description: Differnet mode of slider where slider buttons move to and from the previous and next frame

Name: min

Type: Number

Default: -1

Description: Used to set the minimum value of the slider

Name: max

Type: Number

Default: 1

Description: Used to set the maximum value of the slider

Name: step

Type: Number

Default: 0.01

Description: used to set the step size in the range of motion of the slider

Name: init_val

Type: Number

Default: -1

Description: used to set initial value of the slider

Name: init_val

Type: Number

Default: -1

Description: used to set initial value of the slider

Name: button_step_init

Type: Number

Default: 10

Description: used to set the value of the sliderButtons

Name: tick_decimals

Type: Number

Default: 0

Description: used to set the number of decimal places for the numTick

Name: tick_step

Type: Number

Default: 1

Description: used to set the step size between each numTick

Name: theme

Type: String

Default: "Blue"

Description: used to set the theme color of the slider (can choose from Blue and Green)

Name: resetButton

Type: Boolean

Default: true

Description: used to create a reset button for the slider
<div class="res-img">
[[File:Slider 1.png|880x880px]]
</div>

===Events===
Name: sliderChangedbyDragging

Triggered: Mousedown and mouseover

Description: Emit slider value when dragging the thumb

Name: sliderChangedbyClick

Triggered: Mousedown

Description: Emit slider value when changing the thumb position by clicking

Name: click

Triggered: Mousedown

Description: Set the slider value to 0 when click on the reset button

===Design Choice===
The slider has two themes that users can choose from--green and imperial blue, both contrust the white background. The thumb was made to be round so that it can display numbers better.

[[Category:ImpVis Components]]

Toggle Hotspot

2021-07-01T08:51:37Z

FreyaHan:

The <code>iv-toggle-hotspot</code> component creates a toggle hotspot with position of user's choice.
<div class="res-img">
[[File:Toggle hotspot.png|811x811px]]
</div>
===Props===
Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: title

Type: String

Default:

Description: Used to set the name of the toggle hotspot, which will appear on the toggle button

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space

===Events===
None

===Design Choice====
The hotspot was made to be pure white to display content better, the button that toggles the hotspot was made to be yellow, which contracts the main theme -- imperial blue.
[[Category:Layouts]]

Fixed Hotspot

2021-07-01T08:47:31Z

FreyaHan:

The <code>iv-fixed-hotspot</code> component creates a fixed hotspot with position of user's choice.
<div class="res-img">
[[File:Fixed hotspot.png|811x811px]]
</div>
===Props===
Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: transparent

Type: Boolean

Default: false

Description: If true, the background of the hotspot will be transparent

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space

===Events===
None

===Design Choice===
The hotspot was chose to have a white background such that it can clearly present the content.
[[Category:Layouts]]

Fixed Hotspot

2021-07-01T08:46:06Z

FreyaHan:

The Fixed Hostspot component creates a fixed hotspot with position of user's choice.
<div class="res-img">
[[File:Fixed hotspot.png|811x811px]]
</div>
===Props===
Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: transparent

Type: Boolean

Default: false

Description: If true, the background of the hotspot will be transparent

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space

===Events===
None

===Design Choice===
The hotspot was chose to have a white background such that it can clearly present the content.
[[Category:Layouts]]

Slider

2021-06-30T14:17:11Z

FreyaHan:

This page is a child of the [http://109.153.210.84/index.php/Sliders Sliders] page.

The Slider component appears as a range slider with costumised maximum and minimum values and number of ticks.

<div class="res-img">
[[File:Slider.png|722x722px]]
</div>

==Techical/coding information==
The Slider Component contains 4 sub-components, which are listed below:
*[[Slider: bubble.vue|bubble.vue]]
*[[Slider: inputButton.vue|inputButton.vue]]
*[[Slider: lineTicks.vue|lineTicks.vue]]
*[[Slider: numTicks.vue|numTicks.vue]]
It also has 15 props:

===Props===
Name: bubble

Type: Boolean

Default: true

Description: Used to display slider value as a bubble above the slider thumb, which follows the thumb

Name: sliderButtons

Type: Boolean

Default: flase

Description: Used to display buttons to increase or decrease the slider value by a fixed amount

Name: sliderButtons

Type: Boolean

Default: flase

Description: Used to display buttons to increase or decrease the slider value by a fixed amount

Name: buttonInput

Type: Boolean

Default: flase

Description: Used to display input to vary the sliderButton increase or decrease amount, applied to both equally

Name: lineTick

Type: Boolean

Default: flase

Description: Used to display line slider ticks at each step

Name: numTick

Type: Boolean

Default: true

Description: Used to display value slider ticks at each step

Name: numTick

Type: Boolean

Default: true

Description: Used to display value slider ticks at each step

Name: playSlider

Type: Boolean

Default: false

Description: Differnet mode of slider where slider buttons move to and from the previous and next frame

Name: min

Type: Number

Default: -1

Description: Used to set the minimum value of the slider

Name: max

Type: Number

Default: 1

Description: Used to set the maximum value of the slider

Name: step

Type: Number

Default: 0.01

Description: used to set the step size in the range of motion of the slider

Name: init_val

Type: Number

Default: -1

Description: used to set initial value of the slider

Name: init_val

Type: Number

Default: -1

Description: used to set initial value of the slider

Name: button_step_init

Type: Number

Default: 10

Description: used to set the value of the sliderButtons

Name: tick_decimals

Type: Number

Default: 0

Description: used to set the number of decimal places for the numTick

Name: tick_step

Type: Number

Default: 1

Description: used to set the step size between each numTick

Name: theme

Type: String

Default: "Blue"

Description: used to set the theme color of the slider (can choose from Blue and Green)

Name: resetButton

Type: Boolean

Default: true

Description: used to create a reset button for the slider
<div class="res-img">
[[File:Slider 1.png|880x880px]]
</div>
[[Category:ImpVis Components]]

Slider

2021-06-30T14:16:31Z

FreyaHan:

Pane

2021-06-30T14:13:14Z

FreyaHan:

The pane component creates a pane on either the right or the left hand side of the page.<div class="res-img">
[[File:Pane.png|839x839px]]
</div>
===Props===
Name: width

Type: Number

Default: 400

Description: Used to set the width of the pane

Name: format

Type: String

Default: 'push'

Validator: ['overlay','push']

Description: Used to set the pane to different mode (i.e. it lays on top of the main stage or it pushes the main stage to the side)

Name: glass

Type: Boolean

Default: false

Description: If true, turns the opacity of the pane to 0

Name: allowResize

Type: Boolean

Default: false

Description: If true, allows users to resize the pane
[[Category:Layouts]]

Fixed Hotspot

2021-06-30T14:12:23Z

FreyaHan: /* Props */

Toggle Hotspot

2021-06-30T14:11:31Z

FreyaHan:

The Toggle Hostspot component creates a toggle hotspot with position of user's choice.
<div class="res-img">
[[File:Toggle hotspot.png|811x811px]]
</div>
===Props===
Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: title

Type: String

Default:

Description: Used to set the name of the toggle hotspot, which will appear on the toggle button

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space
[[Category:Layouts]]

Pane

2021-06-30T14:10:42Z

FreyaHan:

Pane

2021-06-30T14:09:50Z

FreyaHan:

This page is a child of the [[Layout]] page.

The pane component creates a pane on either the right or the left hand side of the page.
<div class="res-img">
[[File:Toggle hotspot.png|839x839px]]
</div>
===Props===
Name: width

Type: Number

Default: 400

Description: Used to set the width of the pane

Name: format

Type: String

Default: 'push'

Validator: ['overlay','push']

Description: Used to set the pane to different mode (i.e. it lays on top of the main stage or it pushes the main stage to the side)

Name: glass

Type: Boolean

Default: false

Description: If true, turns the opacity of the pane to 0

Name: allowResize

Type: Boolean

Default: false

Description: If true, allows users to resize the pane
[[Category:Layouts]]

File:Toggle hotspot.png

2021-06-30T14:08:57Z

FreyaHan:

Screenshot of toggle hotspot in working

Toggle Hotspot

2021-06-30T14:06:40Z

FreyaHan:

The Toggle Hostspot component creates a toggle hotspot with position of user's choice.
<div class="res-img">
[[File:Fixed hotspot.png|811x811px]]
</div>
===Props===
Name: noWastedSpace

Type: Boolean

Default: false

Description: If true, the size of the hotspot will be just enough to fit the content, no extra space will be given

Name: title

Type: String

Default:

Description: Used to set the name of the toggle hotspot, which will appear on the toggle button

Name: glass

Type: Boolean

Default: false

Description: If true, the component covered by the hotspot will show on top of it

Name: position

Type: String

Required: true

Validator: ['top','bottom','topright','topleft','bottomright', 'bottomleft']

Description: Used to set the position of the hotspot

Name: size

Type: Number

Default: -1

Description: Used to set the explict size on the major axis of the hotspot, if set to -1 (default) will fill all available space
[[Category:Layouts]]

Toggle Hotspot

2021-06-30T14:06:03Z

FreyaHan: Created page with "The Toggle Hostspot component creates a toggle hotspot with position of user's choice. <div class="res-img"> 811x811px </div> ===Props=== Name: noWa..."

Fixed Hotspot

2021-06-30T14:01:59Z

FreyaHan:

File:Fixed hotspot.png

2021-06-30T13:27:28Z

FreyaHan:

Screen shot of fixed hotspot in working

Fixed Hotspot

2021-06-30T13:24:55Z

FreyaHan: Created page with "The Fixed Hostspot component creates a fixed hotspot with position of user's choice."

The Fixed Hostspot component creates a fixed hotspot with position of user's choice.

Pane

2021-06-30T10:50:19Z

FreyaHan:

This page is a child of the [[Layout]] page.

The pane component creates a pane on either the right or the left hand side of the page.
<div class="res-img">
[[File:Pane.png|970x970px]]
</div>
===Props===
Name: width

Type: Number

Default: 400

Description: Used to set the width of the pane

Name: format

Type: String

Default: 'push'

Validator: ['overlay','push']

Description: Used to set the pane to different mode (i.e. it lays on top of the main stage or it pushes the main stage to the side)

Name: glass

Type: Boolean

Default: false

Description: If true, turns the opacity of the pane to 0

Name: allowResize

Type: Boolean

Default: false

Description: If true, allows users to resize the pane
[[Category:Layouts]]

Pane

2021-06-30T10:49:34Z

FreyaHan: