Tech Team Final Documentation

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

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)

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

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.