Difference between revisions of "Tech Team Final Documentation"

From ImpVis Wiki
Jump to navigation Jump to search
(added content)
Line 1: Line 1:
==Accomplished Works==
''This page summarises the work carried out by the Tech Team in the summer of 2021.''
===Bug Fixing===
'''Below is a list of bugs we have fixed this summer:'''


1.Slider should emit event both on mousemove and mouseup
== Team members ==


2.Tabs should emit event when tab selected
* Robert Jones
* Freya Han
* Shahbanno Hussain
* Joshua Cheng
* Hamzah Malik


3.Add a label attribute to the slider
==Accomplished Works==
 
===Template ===
4.Adjust iv-button default bottom-padding to match other edges (about 35px)
'''New components:'''
 
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
# [[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


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


17.Symbol button doesnt have any methods
'''Feature additions to existing components:'''


18.Tickbox initial state prop doesnt work
# 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


19.Add title to fixed hotspot


20.Specify which position to put play button with respect to slider
'''Layout bugs we fixed:'''


21.Dropdown list element text overflows
# 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  


22.Reset capability to dropdown list
'''Functionality bugs we fixed:''' 


23.Advanced toggle, when all tabs are disabled, one is still selected
# 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 ===
=== Visualisations Updated ===
Line 63: Line 64:
* Rotating Frames Collection  
* Rotating Frames Collection  
* Matrices: Transformations and Eigenvectors Collection (3/4 pages)
* Matrices: Transformations and Eigenvectors Collection (3/4 pages)
*Rainbows


=== Visualisations Created ===
=== Visualisations Created ===
Line 92: Line 94:


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

Revision as of 13:38, 21 July 2021

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:

  1. Increment button component (can specify initial value, increment amount, maximum and minimum)
  2. 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:

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


Layout bugs we fixed:

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

Functionality bugs we fixed:

  1. Slider should emit event both on mousemove and mouseup
  2. Tabs should emit event when tab selected
  3. Symbol button doesnt have any methods
  4. Tickbox initial state prop doesnt work
  5. Make slider change events (on drag, on drop, on play) as one event
  6. 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:

Visualisations Created

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

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

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