ImpVis Wiki - User contributions [en-gb]

Sidebar section

2021-07-22T10:50:07Z

Shahbanno:

The <code>iv-sidebar-section</code>component creates a content section within the pane. It is placed inside the [[pane]] component (and inside the [[sidebar content]] component, if there is one). You can add multiple sections.
[[File:Sidebarsection.png|839x839px]]

==Technical Information==
===Props===
'''theme'''

Type: String

Default: 'Blue'

Description: Used to set the colour of the sidebar section. Can choose from the following:
[[File:Themes.png|none|thumb|Available themes. ]]

'''title'''

Type: String

Required: true

Description: Title of the sidebar section

'''icon'''

Type: String

Default: 'star'

Description: Can specify the icon displayed next to the sidebar section title. Can choose any icon from [https://fontawesome.com/v5.15/icons?d=gallery&p=2 this website].

'''highlight'''

Type: Boolean

Default: false

Description: If true, highlights the sidebar section.
[[File:SidebarSectionHighlight.png|none|thumb|Sidebar section when highlight prop is set to true.]]

==Design Choice==
The sidebar section title is in a boxed shape to make it stand out against any text. Icons can be specified to add a graphical visual element.

[[Category:Layouts]]

Sidebar content

2021-07-22T10:45:08Z

Shahbanno:

The <code>iv-sidebar-content</code>component creates a summary of all the sidebar sections at the top of the pane. It is placed inside the [[pane]] component. As the user scrolls down the pane, the display at the top of the pane reflects which sidebar section the user is on. Pagination can also be turned on, which shows previous/next buttons at the bottom of the pane which link to previous/next pages in the visualisation.

[[File:SidebarContent.png|839x839px]]

==Technical Information==
===Props===
'''showPagination'''

Type: Boolean

Default: true

Description: If true, will show previous/next buttons at the bottom of the pane which link to previous/next pages in the visualisation
===Events===
'''scrollTo'''

''Description:''

'''themeVars'''

''Description:''

==Design Choice==
The progress bar at the top of the pane allows the user to see how far through the pane content they are, and clearly see which section they're on by showing only the icons for the other sections. The next/previous buttons at the bottom of the pane match the styling of the pane for consistency.

[[Category:Layouts]]

Sidebar content

2021-07-22T10:42:30Z

Shahbanno: Created page with "The <code>iv-sidebar-content</code>component creates a summary of all the sidebar sections at the top of the pane. It is placed inside the pane component. As the user scro..."

The <code>iv-sidebar-content</code>component creates a summary of all the sidebar sections at the top of the pane. It is placed inside the [[pane]] component. As the user scrolls down the pane, the display at the top of the pane reflects which sidebar section the user is on. Pagination can also be turned on, which shows previous/next buttons at the bottom of the pane which link to previous/next pages in the visualisation.

[[File:SidebarContent.png|839x839px]]

==Technical Information==
===Props===
'''showPagination'''

Type: Boolean

Default: true

Description: If true, will show previous/next buttons at the bottom of the pane which link to previous/next pages in the visualisation
[[File:Themes.png|none|thumb|Available themes. ]]

'''title'''

Type: String

Required: true

Description: Title of the sidebar section

'''icon'''

Type: String

Default: 'star'

Description: Can specify the icon displayed next to the sidebar section title. Can choose any icon from [https://fontawesome.com/v5.15/icons?d=gallery&p=2 this website].

'''highlight'''

Type: Boolean

Default: false

Description: If true, highlights the sidebar section.
[[File:SidebarSectionHighlight.png|none|thumb|Sidebar section when highlight prop is set to true.]]

==Design Choice==
The sidebar section title is in a boxed shape to make it stand out against any text. Icons can be specified to add a graphical visual element.

[[Category:Layouts]]

File:SidebarContent.png

2021-07-22T10:27:23Z

Shahbanno:

screenshot of sidebar content

Sidebar section

2021-07-22T10:25:08Z

Shahbanno:

The <code>iv-sidebar-section</code>component creates a content section within the pane. It is placed inside the [[pane]] component (and inside the sidebar content component, if there is one). You can add multiple sections.
[[File:Sidebarsection.png|839x839px]]

==Technical Information==
===Props===
'''theme'''

Type: String

Default: 'Blue'

Description: Used to set the colour of the sidebar section. Can choose from the following:
[[File:Themes.png|none|thumb|Available themes. ]]

'''title'''

Type: String

Required: true

Description: Title of the sidebar section

'''icon'''

Type: String

Default: 'star'

Description: Can specify the icon displayed next to the sidebar section title. Can choose any icon from [https://fontawesome.com/v5.15/icons?d=gallery&p=2 this website].

'''highlight'''

Type: Boolean

Default: false

Description: If true, highlights the sidebar section.
[[File:SidebarSectionHighlight.png|none|thumb|Sidebar section when highlight prop is set to true.]]

==Design Choice==
The sidebar section title is in a boxed shape to make it stand out against any text. Icons can be specified to add a graphical visual element.

[[Category:Layouts]]

Sidebar section

2021-07-22T10:22:34Z

Shahbanno: /* Technical Information */

Sidebar section

2021-07-22T10:22:03Z

Shahbanno: wrote page

The <code>iv-sidebar-section</code>component creates a content section within the pane. It is placed inside the [[pane]] component (and inside the sidebar content component, if there is one). You can add multiple sections.
[[File:Sidebarsection.png|839x839px]]

==Technical Information==
===Props===
'''theme'''

Type: String

Default: 'Blue'

Description: Used to set the colour of the sidebar section. Can choose from the following:
[[File:Themes.png|none|thumb|Available themes. ]]

'''title'''

Type: String

Required: true

Description: Title of the sidebar section

'''icon'''

Type: String

Default: 'star'

Description: Can specify the icon displayed next to the sidebar section title. Can choose any icon from [https://fontawesome.com/v5.15/icons?d=gallery&p=2 this website].

'''highlight'''

Type: Boolean

Default: false

Description: If true, highlights the sidebar section.
[[File:SidebarSectionHighlight.png|thumb|Sidebar section when highlight prop is set to true.]]
==Design Choice==
The sidebar section title is in a boxed shape to make it stand out against any text. Icons can be specified to add a graphical visual element.

File:SidebarSectionHighlight.png

2021-07-22T10:18:29Z

Shahbanno:

highlight prop = true

File:Themes.png

2021-07-22T10:14:21Z

Shahbanno:

screenshot of available themes

File:Sidebarsection.png

2021-07-22T10:09:53Z

Shahbanno:

screenshot of sidebar section

Tech Team Final Documentation

2021-07-22T09:56:32Z

Shahbanno: /* To follow up */

''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.
==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-22T09:54:06Z

Shahbanno: /* Accomplished Works */

Tech Team Final Documentation

2021-07-22T09:45:19Z

Shahbanno:

''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 capability 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.
==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)

Tech Team Final Documentation

2021-07-21T13:38:03Z

Shahbanno: added content

''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 capability 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
* Matrices: Transformations and Eigenvectors Collection (3/4 pages)
*Rainbows

=== 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

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

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

==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.
==To follow up==
1. Contacted staff partner for Quantum spin collection (Richard Thompson) for feedback - follow up for reply in September.

Basic toggle

2021-07-19T10:09:57Z

Shahbanno: /* Technical information */

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

The basic toggle component appears as a button that slides upon clicking and serves to allow user to pick between two choices. This component can be called using the <code>iv-toggle-basic</code> tag.

<div class="res-img">
[[File:ToggleBasic.png]]
</div>

== Technical information ==
It is possible to disable the toggle.

=== Props ===
Name: value

Type: Boolean

Default: false

Description: Setting the initial toggle boolean

Name: resetCapability

Type: Boolean

Default: false

Description: When the toggle is moved to the left, all [[Slider|sliders]], [[Basic toggle|basic toggles]], [[advance toggle]]<nowiki/>s, [[Increment button|increment buttons]], and [[Dropdown List|dropdown lists]] are reset to their intial values.
=== Events ===
Name: input

Description: Emitted when the toggle is clicked

Value: toggleMode

=== Usage ===
You may change the default mode by setting the initialMode prop to "false". To disable the toggle, set the toggleDisabled prop to "true".

<div class="res-img">
[[File:ToggleBasicTrueMode.png]]
</div>
<div class="res-img">
[[File:ToggleBasicFalseMode.png]]
</div>
<div class="res-img">
[[File:ToggleBasicDisabled.png]]
</div>

== Design choice ==
The blue button is chosen to fit in the general ImpVis blue while the grey button (toggle disabled mode) gives a sense of inactive.

[[Category:Toggles]]

Reset button

2021-07-19T10:09:00Z

Shahbanno: updated with dropdown list feature

The reset button component resets any [[slider]], [[basic toggle]], [[advance toggle]], [[increment button]], and [[Dropdown List|dropdown list]] components on the page to their initial values, and is an extension of the ImpVis [[button]] component.

Also see [[basic toggle]]'s resetCapability prop, for details on how to use the reset functionality in the form of a toggle instead.
[[File:Button.png|thumb|The iv-reset-button component when active.]]

==Technical information==
The <code>iv-reset-button</code> is for use as a button which resets any [[slider]], [[basic toggle]], [[advance toggle]], [[increment button]], and [[Dropdown List|dropdown list]] components on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

===Props===

====== disabled ======
Type: Boolean

Required: false

Default: false

Description: When true the button is greyed out.
[[File:ButtonDisabled.png|thumb|The iv-button component when the disabled prop is set to true.]]

=== Events ===

====== mouseover ======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over button.

====== mouseleave ======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves button.

====== click ======
Trigger: click

Description: Event resetting sliders and toggles on the page to their default values, as well as carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

</div>

==Design Choices==
The green button is chosen to stand out against the general ImpVis blue. The lighter green upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]

Dropdown List

2021-07-19T09:36:22Z

Shahbanno: corrected event names

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

The dropdown list component appears as a button with a tray of options that becomes available or unavailable upon clicking. It serves as a way to hide multiple options for saving space. This component can be called using the <code>iv-dropdown-list</code> tag.

<div class="res-img">
[[File:DropdownList.png]]
</div>

== Technical information ==
The <code>iv-dropdown-list</code> is a button allows users to select a mode from a display/hide list of modes.
It is possible to disable the dropdown. This component builds on [[Dropdown List Element]].

=== Props ===
Name: dropdownItems

Type: Array

Required: true

Default: ["Option 1", "Option 2", "Option 3"]

Description: The array container for the dropdown list text

Name: initialDropdownIndex

Type: Number

Default: 0

Description: Setting the initial dropdown mode

Name: dropdownDisabled

Type: Boolean

Default: false

Description: Disable the dropdown button

=== Events ===
Name: dropdownbuttonclicked

Description: Emitted when the dropdown button is clicked

Value: dropdownIndex

Name: dropdownelementclicked

Description: Emitted when the list element is clicked

Value: click event

=== Usage ===
To set the text for the options, create a prop with an array of the strings and bind the prop to modes. To disable the dropdown, set the dropdownDisabled prop as 'true'.

<div class="res-img">
[[File:DropdownListMode1.png]]
</div>
<div class="res-img">
[[File:DropdownListDropdownMode.png]]
</div>
<div class="res-img">
[[File:DropdownListSelectMode.png]]
</div>

== Design choice ==
The blue button is chosen to fit in the general ImpVis blue. The lighter blue on the option upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Dropdowns]]

Symbol Button

2021-07-16T13:05:53Z

Shahbanno: added new event

[[File:SymbolButton.png|thumb|The iv-symbol button with the "Pause" symbol.]]
The symbol button component is designed to be used as an alternative button for common functions such as a "Play/Pause" button, as well as "Stop", "Reset" and "Help".
==Technical information==
The <code>iv-symbol-button</code> is for use as an alternative button for common functions.

===Props===

======symbol======
Type: String

Required: true

Default: N/A

Possible Values: "Play", "Pause", "Stop", "Reset", "Help"

Description: The symbol to be displayed on the button.

====== size ======
Type: String

Required: false

Default: N/A

Possible Values: "small", "large"

Description: Alters the size of the button component.

===Events===
======click======
Trigger: click

Description: Simple event carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

==Design Choices==
The red button is chosen to contrast with the general ImpVis blue. The lighter red upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]

Increment button

2021-07-14T10:23:20Z

Shahbanno:

The increment button component allows the user to increase/decrease a given initial value by a given amount. The increase/decrease buttons are disabled appropiately on reaching the specified maximum/minimum values.
[[File:Incrementbutton.png|thumb|The iv-increment-button when both increase/decease buttons are active.]]

[[File:IncrementButtonMax.png|thumb|The iv-increment-button when the current value is at its maximum.]]

==Technical information ==
The <code>iv-increment-button</code> is a component which comes with an increase and decrease button, with a display of the current number. The increment amount and initial value can be specified through the props, alongside maximum and minimum allowed values, at which point the respective increase/decrease buttons will be disabled. If the minimum and maximum values are set as the current value, both increase/decrease buttons will be disabled.

===Props===
======initialValue======
Type: Number

Required: false

Default: 1

Description: The number at which the component starts off at.
======increment======
Type: Number

Required: false

Default: 1

Description: The amount by which the number is incremented/decremented by.
======minimum======
Type: Number

Required: false

Default: 0

Description: The minimum allowed value. When the component reaches this value, the decrease button will be disabled.
======maximum======
Type: Number

Required: false

Default: 10

Description: The maximum allowed value. When the component reaches this value, the increase button will be disabled.
======minusDisabled======
Type: Boolean

Required: false

Default: true (if initial value at minimum), false (otherwise)

Description: Manually disable the decrease button.
======plusDisabled======
Type: Boolean

Required: false

Default: true (if initial value at maximum), false (otherwise)

Description: Manually disable the increase button.

===Events===
======mouseover======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over either increase/decrease button respectively.
======mouseleave======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves either increase/decrease button respectively.
======change======
Trigger: click

Description: Emits new current value when increase/decrease button is clicked, and changes display.<div class="res-img"></div>
==Design Choices==
The increase/decrease buttons are styled the same as the [[button]] component to create a consistent look (see [[button]] design choices for more).

[[Category:Buttons]]

Increment button

2021-07-14T10:18:32Z

Shahbanno: moved image

Increment button

2021-07-14T10:17:01Z

Shahbanno: wrote page

The increment button component allows the user to increase/decrease a given initial value by a given amount. The increase/decrease buttons are disabled appropiately on reaching the specified maximum/minimum values.
[[File:Incrementbutton.png|thumb|The iv-increment-button when both increase/decease buttons are active.]]

==Technical information==
The <code>iv-increment-button</code> is a component which comes with an increase and decrease button, with a display of the current number. The increment amount and initial value can be specified through the props, alongside maximum and minimum allowed values, at which point the respective increase/decrease buttons will be disabled. If the minimum and maximum values are set as the current value, both increase/decrease buttons will be disabled.
[[File:IncrementButtonMax.png|thumb|The iv-increment-button when the current value is at its maximum.]]
===Props===
======initialValue======
Type: Number

Required: false

Default: 1

Description: The number at which the component starts off at.
======increment======
Type: Number

Required: false

Default: 1

Description: The amount by which the number is incremented/decremented by.
======minimum======
Type: Number

Required: false

Default: 0

Description: The minimum allowed value. When the component reaches this value, the decrease button will be disabled.
======maximum======
Type: Number

Required: false

Default: 10

Description: The maximum allowed value. When the component reaches this value, the increase button will be disabled.
======minusDisabled======
Type: Boolean

Required: false

Default: true (if initial value at minimum), false (otherwise)

Description: Manually disable the decrease button.
======plusDisabled======
Type: Boolean

Required: false

Default: true (if initial value at maximum), false (otherwise)

Description: Manually disable the increase button.

===Events===
======mouseover======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over either increase/decrease button respectively.
======mouseleave======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves either increase/decrease button respectively.
======change======
Trigger: click

Description: Emits new current value when increase/decrease button is clicked, and changes display.<div class="res-img"></div>
==Design Choices==
The increase/decrease buttons are styled the same as the [[button]] component to create a consistent look (see [[button]] design choices for more).

File:IncrementButtonMax.png

2021-07-14T09:52:46Z

Shahbanno:

The increase button is disabled as the current value is at its maximum

File:Incrementbutton.png

2021-07-14T09:48:35Z

Shahbanno:

Increment button

Reset button

2021-07-14T09:26:55Z

Shahbanno: referred to resetCapability prop on basic toggle

The reset button component resets any [[slider]], [[basic toggle]], [[advance toggle]], and increment button components on the page to their initial values, and is an extension of the ImpVis [[button]] component.

Also see [[basic toggle]]'s resetCapability prop, for details on how to use the reset functionality in the form of a toggle instead.
[[File:Button.png|thumb|The iv-reset-button component when active.]]

==Technical information==
The <code>iv-reset-button</code> is for use as a button which resets any [[slider]], [[basic toggle]], [[advance toggle]], and increment buttons on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

===Props===

====== disabled ======
Type: Boolean

Required: false

Default: false

Description: When true the button is greyed out.
[[File:ButtonDisabled.png|thumb|The iv-button component when the disabled prop is set to true.]]

=== Events ===

====== mouseover ======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over button.

====== mouseleave ======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves button.

====== click ======
Trigger: click

Description: Event resetting sliders and toggles on the page to their default values, as well as carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

</div>

==Design Choices==
The green button is chosen to stand out against the general ImpVis blue. The lighter green upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]

Basic toggle

2021-07-14T09:25:24Z

Shahbanno: added new resetCapability prop

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

The basic toggle component appears as a button that slides upon clicking and serves to allow user to pick between two choices. This component can be called using the <code>iv-toggle-basic</code> tag.

<div class="res-img">
[[File:ToggleBasic.png]]
</div>

== Technical information ==
It is possible to disable the toggle.

=== Props ===
Name: value

Type: Boolean

Default: false

Description: Setting the initial toggle boolean

Name: resetCapability

Type: Boolean

Default: false

Description: When the toggle is moved to the left, all [[Slider|sliders]], basic toggles, [[advance toggle]]<nowiki/>s, and increment buttons are reset to their intial values.
=== Events ===
Name: input

Description: Emitted when the toggle is clicked

Value: toggleMode

=== Usage ===
You may change the default mode by setting the initialMode prop to "false". To disable the toggle, set the toggleDisabled prop to "true".

<div class="res-img">
[[File:ToggleBasicTrueMode.png]]
</div>
<div class="res-img">
[[File:ToggleBasicFalseMode.png]]
</div>
<div class="res-img">
[[File:ToggleBasicDisabled.png]]
</div>

== Design choice ==
The blue button is chosen to fit in the general ImpVis blue while the grey button (toggle disabled mode) gives a sense of inactive.

[[Category:Toggles]]

Advance toggle

2021-07-14T09:22:00Z

Shahbanno: added new width prop

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

The advance toggle component appears as a tray of options. It serves as a way to display options and highlighting the active one. This component can be called using the <code>iv-toggle-advance</code> tag.

<div class="res-img">
[[File:ToggleAdvance.png]]
</div>

== Technical information ==
The <code>iv-toggle-advance</code> is a button that allows users to switch between multiple modes.
It is possible to disable the toggle. This component builds on [[Advance toggle button]].

=== Props ===
Name: modes

Type: Array

Required: true

Default: ["Option 1", "Option 2", "Option 3"]

Description: The array container for the toggle modes text

Name: initialModeIndex

Type: Number

Default: 0

Description: Setting the initial toggle mode

Name: toggleDisabled

Type: Boolean

Default: false

Description: Disable the input

Name: width

Type: String

Default: '95px'

Description: Change the width of the toggle tabs

=== Events ===
Name: toggleswitched

Description: Emitted when the toggle is clicked

Value: toggleMode

=== Usage ===
To set the text for the options, create a prop with an array of the strings and bind the prop to modes. To disable the toggle, set the toggleDisabled prop as 'true'.

<div class="res-img">
[[File:ToggleAdvanceMode1.png]]
</div>
<div class="res-img">
[[File:ToggleAdvanceMode3.png]]
</div>
<div class="res-img">
[[File:ToggleAdvanceDisabled.png]]
</div>

== Design choice ==
The blue button is chosen to fit in the general ImpVis blue. The lighter blue on the option upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Toggles]]

Reset button

2021-07-13T09:14:12Z

Shahbanno: added description of other componenets which reset button is now compatible with

The reset button component resets any [[slider]], [[basic toggle]], [[advance toggle]], and increment button components on the page to their initial values, and is an extension of the ImpVis [[button]] component.
[[File:Button.png|thumb|The iv-reset-button component when active.]]

==Technical information==
The <code>iv-reset-button</code> is for use as a button which resets any [[slider]], [[basic toggle]], [[advance toggle]], and increment buttons on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

===Props===

====== disabled ======
Type: Boolean

Required: false

Default: false

Description: When true the button is greyed out.
[[File:ButtonDisabled.png|thumb|The iv-button component when the disabled prop is set to true.]]

=== Events ===

====== mouseover ======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over button.

====== mouseleave ======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves button.

====== click ======
Trigger: click

Description: Event resetting sliders and toggles on the page to their default values, as well as carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

</div>

==Design Choices==
The green button is chosen to stand out against the general ImpVis blue. The lighter green upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]

Basic toggle

2021-07-07T13:58:00Z

Shahbanno: corrected which props it uses

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

The basic toggle component appears as a button that slides upon clicking and serves to allow user to pick between two choices. This component can be called using the <code>iv-toggle-basic</code> tag.

<div class="res-img">
[[File:ToggleBasic.png]]
</div>

== Technical information ==
It is possible to disable the toggle.

=== Props ===
Name: value

Type: Boolean

Default: false

Description: Setting the initial toggle boolean
=== Events ===
Name: toggleswitched

Description: Emitted when the toggle is clicked

Value: toggleMode

=== Usage ===
You may change the default mode by setting the initialMode prop to "false". To disable the toggle, set the toggleDisabled prop to "true".

<div class="res-img">
[[File:ToggleBasicTrueMode.png]]
</div>
<div class="res-img">
[[File:ToggleBasicFalseMode.png]]
</div>
<div class="res-img">
[[File:ToggleBasicDisabled.png]]
</div>

== Design choice ==
The blue button is chosen to fit in the general ImpVis blue while the grey button (toggle disabled mode) gives a sense of inactive.

[[Category:Toggles]]

Reset button

2021-07-01T14:22:26Z

Shahbanno:

The reset button component resets any slider and toggle components on the page to their initial values, and is an extension of the ImpVis [[button]] component.
[[File:Button.png|thumb|The iv-reset-button component when active.]]

==Technical information==
The <code>iv-reset-button</code> is for use as a button which resets any sliders and toggles on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

===Props===

====== disabled ======
Type: Boolean

Required: false

Default: false

Description: When true the button is greyed out.
[[File:ButtonDisabled.png|thumb|The iv-button component when the disabled prop is set to true.]]

=== Events ===

====== mouseover ======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over button.

====== mouseleave ======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves button.

====== click ======
Trigger: click

Description: Event resetting sliders and toggles on the page to their default values, as well as carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

</div>

==Design Choices==
The green button is chosen to stand out against the general ImpVis blue. The lighter green upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]

Reset button

2021-07-01T14:21:20Z

Shahbanno:

The reset button component is an extension of the ImpVis [[button]] component, which resets any slider and toggle components on the page to their initial values.
[[File:Button.png|thumb|The iv-button component when active.]]

==Technical information==
The <code>iv-reset-button</code> is for use as a button which resets any sliders and toggles on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

===Props===

====== disabled ======
Type: Boolean

Required: false

Default: false

Description: When true the button is greyed out.
[[File:ButtonDisabled.png|thumb|The iv-button component when the disabled prop is set to true.]]

=== Events ===

====== mouseover ======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over button.

====== mouseleave ======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves button.

====== click ======
Trigger: click

Description: Event resetting sliders and toggles on the page to their default values, as well as carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

</div>

==Design Choices==
The green button is chosen to stand out against the general ImpVis blue. The lighter green upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]

Reset button

2021-07-01T14:05:39Z

Shahbanno:

The reset button component is an extension of the ImpVis [[button]] component, which resets any sliders and toggles components on the page to their initial values.
[[File:Button.png|thumb|The iv-button component when active.]]

==Technical information==
The <code>iv-button</code> is for use as a simple button, e.g. "play/pause"/"reset" etc. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

===Props===

====== disabled ======
Type: Boolean

Required: false

Default: false

Description: When true the button is greyed out.
[[File:ButtonDisabled.png|thumb|The iv-button component when the disabled prop is set to true.]]

=== Events ===

====== mouseover ======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over button.

====== mouseleave ======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves button.

====== click ======
Trigger: click

Description: Simple event carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

</div>

==Design Choices==
The green button is chosen to stand out against the general ImpVis blue. The lighter green upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]

Reset button

2021-07-01T14:05:02Z

Shahbanno:

The reset button component is an extension of the ImpVis [[button component]], which resets any sliders and toggles components on the page to their initial values.
[[File:Button.png|thumb|The iv-button component when active.]]

==Technical information==
The <code>iv-button</code> is for use as a simple button, e.g. "play/pause"/"reset" etc. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

===Props===

====== disabled ======
Type: Boolean

Required: false

Default: false

Description: When true the button is greyed out.
[[File:ButtonDisabled.png|thumb|The iv-button component when the disabled prop is set to true.]]

=== Events ===

====== mouseover ======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over button.

====== mouseleave ======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves button.

====== click ======
Trigger: click

Description: Simple event carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

</div>

==Design Choices==
The green button is chosen to stand out against the general ImpVis blue. The lighter green upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]

Reset button

2021-07-01T14:03:15Z

Shahbanno: Created page with "The button component is just a simple button which is designed to fit the ImpVis Theme and emit events which are easy to use. File:Button.png|thumb|The iv-button component w..."

The button component is just a simple button which is designed to fit the ImpVis Theme and emit events which are easy to use.
[[File:Button.png|thumb|The iv-button component when active.]]

==Technical information==
The <code>iv-button</code> is for use as a simple button, e.g. "play/pause"/"reset" etc. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

===Props===

====== disabled ======
Type: Boolean

Required: false

Default: false

Description: When true the button is greyed out.
[[File:ButtonDisabled.png|thumb|The iv-button component when the disabled prop is set to true.]]

=== Events ===

====== mouseover ======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over button.

====== mouseleave ======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves button.

====== click ======
Trigger: click

Description: Simple event carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

</div>

==Design Choices==
The green button is chosen to stand out against the general ImpVis blue. The lighter green upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]