Tech Team Final Documentation

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 compatibility 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:

• Gyroscope collection https://impvis.co.uk/launch/gyroscopic-motion-2/frictionless.html?collection=23 (Approved by Caroline)
• Introduction to divergence and curl collection https://impvis.co.uk/launch/introductions-to-divergence-and-curl-collection-2/introduction.html?collection=27 (Reviewed by Caroline: most approved, two need revising)
• Curvilinear Coordinates collection https://impvis.co.uk/launch/polar-coordinates-3/index.html?collection=15 (Approved by Caroline).
• Quantum Spin in Atoms collection https://impvis.co.uk/launch/quantum-spin/quantumangmom.html?collection=37 (Reviewed by Caroline, mostly approved but page 3 still uses the 1st version as the second is unapproved).
• Snell's Law https://impvis.co.uk/launch/snells-law-v2/index.html (Reviewed by Caroline, needs minor correction).
• Spacetime Diagrams https://impvis.co.uk/launch/spacetime-diagrams-v2/index.html (Reviewed by Caroline).
• Lattice Vibrations Collection (already in new template but bugs fixed) https://impvis.co.uk/launch/lattice-vibrations-introduction-2/introduction.html?collection=5 (Approved by Caroline)
• Virtual Materials Lab Collection https://impvis.co.uk/launch/virtual-materials-lab-introduction/intro.html?collection=34 (Approved by Caroline)
• Vibrations App Collection https://impvis.co.uk/launch/me2-vibrations-single-degree-of-freedom-8/index.html?collection=38 (Needs to be approved by staff partner Christoph Schwingshackl)
• Rotating Frames Collection (1/4 pages) https://github.com/jhc4318/rotating-frames
• 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

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