ImpVis Wiki - User contributions [en-gb]

Module Timetable

2021-09-17T10:14:13Z

Jhc4318: /* Week 8: Project work */

This rough timetable is intended as a guide only to help you understand the structure of the course and the progress you should be making by different points. You should additionally be updating your personal portfolio throughout the project. The times indicated are just a rough guide and tasks may take longer.

== Week 1: Introduction to Course ==

* 30 minute introduction lecture
* 15 minute intro to ImpVis lecture
* 15 minute intro to using Gather Town and Miro boards
* 30 minute ice breaker activity
* 15 minute creating assessment criteria on menti
* Homework: Fill out short form to help assign you to groups.

== Week 2: Project Introduction ==

* 30 minute lecture by Freddie with Q/A on design principles and Freddie's experience designing MOOC visualisations.
* 10 minute lecture explaining group project work and how groups have been decided
* 10 minute introduction with other team members on Gather Town
* 20 minute topic discussion with group (Discuss when you can all meet and how you want to work together.)
*20 minute lecture introducing you to the portfolio and self reflection you should do each week.
*Homework: Research your topic to explain to your group next week.
*Homework: Miro brainstorm in groups ideas for educational design.

== Week 3: Educational Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group activity where each team member tries to explain their topic to each other
* 30 minute group discussion of the application of educational design ideas to their project
* 15 minute updating of assessment criteria and tasks tree (and skills matrix if necessary)
* Homework: Miro brainstorm ideas for graphical design in groups

== Week 4: Graphical Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group discussion of application of graphical design ideas to their project and what elements they will need
* 10 minute updating the skills matrix/task tree and assessment criteria
* Homework: Miro brainstorm ideas for interaction design in groups

== Week 5: Interaction Design ==
[[File:VisCritique.png|thumb|An example of how students should critique their chosen visualisation.]]
* 30 minute lecture by subject expert + Q/A
* 30 minute hands on test of different visualisations and how they deal with interaction
* 30 minute group discussion of the application of interaction design ideas to their project
* 10 minute update of assessment criteria and skills matrix/task tree
* Homework: Annotate your favourite visualisation with what you do and don't like.

== Week 6: Project work ==

* 60 minute workshop session
* 10 minute talk on project timeline
* 20 minute discussion of skills matrix/task tree
* 20 minute discussion of important aspects of design related to each strand (education, graphical, interaction)
* 10 minute finalise assessment criteria for cohort and groups.
* Homework: Group work

'''Recommended project status'''
[[File:Page1 Revised.png|thumb|A sketch of how the visualisation design should look in week 6.]]
* Task tree mostly complete, individual tasks ready to be assigned
* Personal Learning Goals complete (can be changed in the future)
* Have a good idea of how your visualisation will look, what components, etc.
* Adding info to wiki submission as you go along

==Week 7: Project work==

*60 minute workshop session
*20 minute lecture on how to give good feedback
*30 minute rapid feedback session
*10 minute update of assessment criteria and task tree/skills matrix
*Homework: Group work

'''Recommended project status'''
[[File:Page1 Final.png|thumb|An example of a more polished visualisation design, which you should have in week 7.]]
* Wiki submission should be up to date with group's progress
* Design should be mostly complete, graphics made to whatever standard is possible with the timeframe and resources

==Week 8: Project work==

*30 minute rapid feedback session
*60-90 minute group discussion of project design
*Homework: Group work

'''Recommended project status'''

* By the end of the session, you should have received your feedback
* Make the changes to the design and your wiki submission, these should be mostly complete

==Week 9: Project work==

*30 minute rapid feedback session
*30 minute lecture introducing the self assessment
*Homework: Create a poster and upload miroboard link to GatherTown
*Homework: Critique your own visualisation design based on the 3 design strands (same format as week 5)

'''Recommended project status'''

* The design and wiki submission should be finalised
* Start and finish the poster

==Week 10: Review==

*60 minute GatherTown poster presentation (feel free to leave comments on other team's posters as feedback)
*30 minute final wrap up lecture reflecting on what has been done, and explain impvis wiki. Introduce students to Code & Crisps and give them the option to implement their designs.
*Homework: Complete self assessment and reflection, finish portfolio

[[Category:iExplore Module]]

Module Timetable

2021-09-16T10:53:29Z

Jhc4318: /* Week 7: Project work */

This rough timetable is intended as a guide only to help you understand the structure of the course and the progress you should be making by different points. You should additionally be updating your personal portfolio throughout the project. The times indicated are just a rough guide and tasks may take longer.

== Week 1: Introduction to Course ==

* 30 minute introduction lecture
* 15 minute intro to ImpVis lecture
* 15 minute intro to using Gather Town and Miro boards
* 30 minute ice breaker activity
* 15 minute creating assessment criteria on menti
* Homework: Fill out short form to help assign you to groups.

== Week 2: Project Introduction ==

* 30 minute lecture by Freddie with Q/A on design principles and Freddie's experience designing MOOC visualisations.
* 10 minute lecture explaining group project work and how groups have been decided
* 10 minute introduction with other team members on Gather Town
* 20 minute topic discussion with group (Discuss when you can all meet and how you want to work together.)
*20 minute lecture introducing you to the portfolio and self reflection you should do each week.
*Homework: Research your topic to explain to your group next week.
*Homework: Miro brainstorm in groups ideas for educational design.

== Week 3: Educational Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group activity where each team member tries to explain their topic to each other
* 30 minute group discussion of the application of educational design ideas to their project
* 15 minute updating of assessment criteria and tasks tree (and skills matrix if necessary)
* Homework: Miro brainstorm ideas for graphical design in groups

== Week 4: Graphical Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group discussion of application of graphical design ideas to their project and what elements they will need
* 10 minute updating the skills matrix/task tree and assessment criteria
* Homework: Miro brainstorm ideas for interaction design in groups

== Week 5: Interaction Design ==
[[File:VisCritique.png|thumb|An example of how students should critique their chosen visualisation.]]
* 30 minute lecture by subject expert + Q/A
* 30 minute hands on test of different visualisations and how they deal with interaction
* 30 minute group discussion of the application of interaction design ideas to their project
* 10 minute update of assessment criteria and skills matrix/task tree
* Homework: Annotate your favourite visualisation with what you do and don't like.

== Week 6: Project work ==

* 60 minute workshop session
* 10 minute talk on project timeline
* 20 minute discussion of skills matrix/task tree
* 20 minute discussion of important aspects of design related to each strand (education, graphical, interaction)
* 10 minute finalise assessment criteria for cohort and groups.
* Homework: Group work

'''Recommended project status'''
* Task tree mostly complete, individual tasks ready to be assigned
* Personal Learning Goals complete (can be changed in the future)
* Have a good idea of how your visualisation will look, what components, etc.
* Adding info to wiki submission as you go along

==Week 7: Project work==

*60 minute workshop session
*20 minute lecture on how to give good feedback
*30 minute rapid feedback session
*10 minute update of assessment criteria and task tree/skills matrix
*Homework: Group work

'''Recommended project status'''

* Wiki submission should be up to date with group's progress
* Design should be mostly complete, graphics made to whatever standard is possible with the timeframe and resources

==Week 8: Project work==

*30 minute rapid feedback session
*60-90 minute group discussion of project design
*Homework: Group work

==Week 9: Project work==

*30 minute rapid feedback session
*30 minute lecture introducing the self assessment
*Homework: Create a poster and upload miroboard link to GatherTown
*Homework: Critique your own visualisation design based on the 3 design strands (same format as week 5)

==Week 10: Review==

*60 minute GatherTown poster presentation (feel free to leave comments on other team's posters as feedback)
*30 minute final wrap up lecture reflecting on what has been done, and explain impvis wiki. Introduce students to Code & Crisps and give them the option to implement their designs.
*Homework: Complete self assessment and reflection

[[Category:iExplore Module]]

Module Timetable

2021-09-16T10:47:21Z

Jhc4318: /* Week 6: Project work */

This rough timetable is intended as a guide only to help you understand the structure of the course and the progress you should be making by different points. You should additionally be updating your personal portfolio throughout the project. The times indicated are just a rough guide and tasks may take longer.

== Week 1: Introduction to Course ==

* 30 minute introduction lecture
* 15 minute intro to ImpVis lecture
* 15 minute intro to using Gather Town and Miro boards
* 30 minute ice breaker activity
* 15 minute creating assessment criteria on menti
* Homework: Fill out short form to help assign you to groups.

== Week 2: Project Introduction ==

* 30 minute lecture by Freddie with Q/A on design principles and Freddie's experience designing MOOC visualisations.
* 10 minute lecture explaining group project work and how groups have been decided
* 10 minute introduction with other team members on Gather Town
* 20 minute topic discussion with group (Discuss when you can all meet and how you want to work together.)
*20 minute lecture introducing you to the portfolio and self reflection you should do each week.
*Homework: Research your topic to explain to your group next week.
*Homework: Miro brainstorm in groups ideas for educational design.

== Week 3: Educational Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group activity where each team member tries to explain their topic to each other
* 30 minute group discussion of the application of educational design ideas to their project
* 15 minute updating of assessment criteria and tasks tree (and skills matrix if necessary)
* Homework: Miro brainstorm ideas for graphical design in groups

== Week 4: Graphical Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group discussion of application of graphical design ideas to their project and what elements they will need
* 10 minute updating the skills matrix/task tree and assessment criteria
* Homework: Miro brainstorm ideas for interaction design in groups

== Week 5: Interaction Design ==
[[File:VisCritique.png|thumb|An example of how students should critique their chosen visualisation.]]
* 30 minute lecture by subject expert + Q/A
* 30 minute hands on test of different visualisations and how they deal with interaction
* 30 minute group discussion of the application of interaction design ideas to their project
* 10 minute update of assessment criteria and skills matrix/task tree
* Homework: Annotate your favourite visualisation with what you do and don't like.

== Week 6: Project work ==

* 60 minute workshop session
* 10 minute talk on project timeline
* 20 minute discussion of skills matrix/task tree
* 20 minute discussion of important aspects of design related to each strand (education, graphical, interaction)
* 10 minute finalise assessment criteria for cohort and groups.
* Homework: Group work

'''Recommended project status'''

* Task tree mostly complete, individual tasks ready to be assigned
* Personal Learning Goals complete (can be changed in the future)
* Have ideas of how your visualisation will look, some concept sketches, very rough
* Adding info to wiki submission as you go along

==Week 7: Project work==

*60 minute workshop session
*20 minute lecture on how to give good feedback
*30 minute rapid feedback session
*10 minute update of assessment criteria and task tree/skills matrix
*Homework: Group work

==Week 8: Project work==

*30 minute rapid feedback session
*60-90 minute group discussion of project design
*Homework: Group work

==Week 9: Project work==

*30 minute rapid feedback session
*30 minute lecture introducing the self assessment
*Homework: Create a poster and upload miroboard link to GatherTown
*Homework: Critique your own visualisation design based on the 3 design strands (same format as week 5)

==Week 10: Review==

*60 minute GatherTown poster presentation (feel free to leave comments on other team's posters as feedback)
*30 minute final wrap up lecture reflecting on what has been done, and explain impvis wiki. Introduce students to Code & Crisps and give them the option to implement their designs.
*Homework: Complete self assessment and reflection

[[Category:iExplore Module]]

Module Timetable

2021-09-16T10:38:52Z

Jhc4318: /* Week 1: Introduction to Course */

This rough timetable is intended as a guide only to help you understand the structure of the course and the progress you should be making by different points. You should additionally be updating your personal portfolio throughout the project. The times indicated are just a rough guide and tasks may take longer.

== Week 1: Introduction to Course ==

* 30 minute introduction lecture
* 15 minute intro to ImpVis lecture
* 15 minute intro to using Gather Town and Miro boards
* 30 minute ice breaker activity
* 15 minute creating assessment criteria on menti
* Homework: Fill out short form to help assign you to groups.

== Week 2: Project Introduction ==

* 30 minute lecture by Freddie with Q/A on design principles and Freddie's experience designing MOOC visualisations.
* 10 minute lecture explaining group project work and how groups have been decided
* 10 minute introduction with other team members on Gather Town
* 20 minute topic discussion with group (Discuss when you can all meet and how you want to work together.)
*20 minute lecture introducing you to the portfolio and self reflection you should do each week.
*Homework: Research your topic to explain to your group next week.
*Homework: Miro brainstorm in groups ideas for educational design.

== Week 3: Educational Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group activity where each team member tries to explain their topic to each other
* 30 minute group discussion of the application of educational design ideas to their project
* 15 minute updating of assessment criteria and tasks tree (and skills matrix if necessary)
* Homework: Miro brainstorm ideas for graphical design in groups

== Week 4: Graphical Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group discussion of application of graphical design ideas to their project and what elements they will need
* 10 minute updating the skills matrix/task tree and assessment criteria
* Homework: Miro brainstorm ideas for interaction design in groups

== Week 5: Interaction Design ==
[[File:VisCritique.png|thumb|An example of how students should critique their chosen visualisation.]]
* 30 minute lecture by subject expert + Q/A
* 30 minute hands on test of different visualisations and how they deal with interaction
* 30 minute group discussion of the application of interaction design ideas to their project
* 10 minute update of assessment criteria and skills matrix/task tree
* Homework: Annotate your favourite visualisation with what you do and don't like.

== Week 6: Project work ==

* 60 minute workshop session
* 10 minute talk on project timeline
* 20 minute discussion of skills matrix/task tree
* 20 minute discussion of important aspects of design related to each strand (education, graphical, interaction)
* 10 minute finalise assessment criteria for cohort and groups.
* Homework: Group work, task tree should be at a stage where individual tasks are ready to be assigned.

== Week 7: Project work ==

* 60 minute workshop session
* 20 minute lecture on how to give good feedback
* 30 minute rapid feedback session
* 10 minute update of assessment criteria and task tree/skills matrix
* Homework: Group work

== Week 8: Project work ==

* 30 minute rapid feedback session
* 60-90 minute group discussion of project design
* Homework: Group work

== Week 9: Project work ==

* 30 minute rapid feedback session
* 30 minute lecture introducing the self assessment
* Homework: Create a poster and upload miroboard link to GatherTown
* Homework: Critique your own visualisation design based on the 3 design strands (same format as week 5)

== Week 10: Review ==

* 60 minute GatherTown poster presentation (feel free to leave comments on other team's posters as feedback)
* 30 minute final wrap up lecture reflecting on what has been done, and explain impvis wiki. Introduce students to Code & Crisps and give them the option to implement their designs.
* Homework: Complete self assessment and reflection

[[Category:iExplore Module]]

Module Timetable

2021-09-16T10:38:08Z

Jhc4318: /* Week 6: Project work */

This rough timetable is intended as a guide only to help you understand the structure of the course and the progress you should be making by different points. You should additionally be updating your personal portfolio throughout the project. The times indicated are just a rough guide and tasks may take longer.

== Week 1: Introduction to Course ==

* 30 minute introduction lecture
* 15 minute intro to ImpVis lecture
* 15 minute into to using Gather Town and Miro boards
* 30 minute ice breaker activity
* 15 minute creating assessment criteria on menti
* Homework: Fill out short form to help assign you to groups.

== Week 2: Project Introduction ==

* 30 minute lecture by Freddie with Q/A on design principles and Freddie's experience designing MOOC visualisations.
* 10 minute lecture explaining group project work and how groups have been decided
* 10 minute introduction with other team members on Gather Town
* 20 minute topic discussion with group (Discuss when you can all meet and how you want to work together.)
*20 minute lecture introducing you to the portfolio and self reflection you should do each week.
*Homework: Research your topic to explain to your group next week.
*Homework: Miro brainstorm in groups ideas for educational design.

== Week 3: Educational Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group activity where each team member tries to explain their topic to each other
* 30 minute group discussion of the application of educational design ideas to their project
* 15 minute updating of assessment criteria and tasks tree (and skills matrix if necessary)
* Homework: Miro brainstorm ideas for graphical design in groups

== Week 4: Graphical Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group discussion of application of graphical design ideas to their project and what elements they will need
* 10 minute updating the skills matrix/task tree and assessment criteria
* Homework: Miro brainstorm ideas for interaction design in groups

== Week 5: Interaction Design ==
[[File:VisCritique.png|thumb|An example of how students should critique their chosen visualisation.]]
* 30 minute lecture by subject expert + Q/A
* 30 minute hands on test of different visualisations and how they deal with interaction
* 30 minute group discussion of the application of interaction design ideas to their project
* 10 minute update of assessment criteria and skills matrix/task tree
* Homework: Annotate your favourite visualisation with what you do and don't like.

== Week 6: Project work ==

* 60 minute workshop session
* 10 minute talk on project timeline
* 20 minute discussion of skills matrix/task tree
* 20 minute discussion of important aspects of design related to each strand (education, graphical, interaction)
* 10 minute finalise assessment criteria for cohort and groups.
* Homework: Group work, task tree should be at a stage where individual tasks are ready to be assigned.

== Week 7: Project work ==

* 60 minute workshop session
* 20 minute lecture on how to give good feedback
* 30 minute rapid feedback session
* 10 minute update of assessment criteria and task tree/skills matrix
* Homework: Group work

== Week 8: Project work ==

* 30 minute rapid feedback session
* 60-90 minute group discussion of project design
* Homework: Group work

== Week 9: Project work ==

* 30 minute rapid feedback session
* 30 minute lecture introducing the self assessment
* Homework: Create a poster and upload miroboard link to GatherTown
* Homework: Critique your own visualisation design based on the 3 design strands (same format as week 5)

== Week 10: Review ==

* 60 minute GatherTown poster presentation (feel free to leave comments on other team's posters as feedback)
* 30 minute final wrap up lecture reflecting on what has been done, and explain impvis wiki. Introduce students to Code & Crisps and give them the option to implement their designs.
* Homework: Complete self assessment and reflection

[[Category:iExplore Module]]

Module Timetable

2021-09-16T10:35:00Z

Jhc4318: /* Week 3: Educational Design */

This rough timetable is intended as a guide only to help you understand the structure of the course and the progress you should be making by different points. You should additionally be updating your personal portfolio throughout the project. The times indicated are just a rough guide and tasks may take longer.

== Week 1: Introduction to Course ==

* 30 minute introduction lecture
* 15 minute intro to ImpVis lecture
* 15 minute into to using Gather Town and Miro boards
* 30 minute ice breaker activity
* 15 minute creating assessment criteria on menti
* Homework: Fill out short form to help assign you to groups.

== Week 2: Project Introduction ==

* 30 minute lecture by Freddie with Q/A on design principles and Freddie's experience designing MOOC visualisations.
* 10 minute lecture explaining group project work and how groups have been decided
* 10 minute introduction with other team members on Gather Town
* 20 minute topic discussion with group (Discuss when you can all meet and how you want to work together.)
*20 minute lecture introducing you to the portfolio and self reflection you should do each week.
*Homework: Research your topic to explain to your group next week.
*Homework: Miro brainstorm in groups ideas for educational design.

== Week 3: Educational Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group activity where each team member tries to explain their topic to each other
* 30 minute group discussion of the application of educational design ideas to their project
* 15 minute updating of assessment criteria and tasks tree (and skills matrix if necessary)
* Homework: Miro brainstorm ideas for graphical design in groups

== Week 4: Graphical Design ==

* 30 minute lecture by subject expert + Q/A
* 30 minute group discussion of application of graphical design ideas to their project and what elements they will need
* 10 minute updating the skills matrix/task tree and assessment criteria
* Homework: Miro brainstorm ideas for interaction design in groups

== Week 5: Interaction Design ==
[[File:VisCritique.png|thumb|An example of how students should critique their chosen visualisation.]]
* 30 minute lecture by subject expert + Q/A
* 30 minute hands on test of different visualisations and how they deal with interaction
* 30 minute group discussion of the application of interaction design ideas to their project
* 10 minute update of assessment criteria and skills matrix/task tree
* Homework: Annotate your favourite visualisation with what you do and don't like.

== Week 6: Project work ==

* 60 minute workshop session
* 10 minute talk on project timeline
* 20 minute discussion of skills matrix/task tree
* 20 minute discussion of important aspects of design related to each strand (education, graphical, interaction)
* 10 minute update of assessment criteria and task tree/skills matrix
* Homework: Group work

== Week 7: Project work ==

* 60 minute workshop session
* 20 minute lecture on how to give good feedback
* 30 minute rapid feedback session
* 10 minute update of assessment criteria and task tree/skills matrix
* Homework: Group work

== Week 8: Project work ==

* 30 minute rapid feedback session
* 60-90 minute group discussion of project design
* Homework: Group work

== Week 9: Project work ==

* 30 minute rapid feedback session
* 30 minute lecture introducing the self assessment
* Homework: Create a poster and upload miroboard link to GatherTown
* Homework: Critique your own visualisation design based on the 3 design strands (same format as week 5)

== Week 10: Review ==

* 60 minute GatherTown poster presentation (feel free to leave comments on other team's posters as feedback)
* 30 minute final wrap up lecture reflecting on what has been done, and explain impvis wiki. Introduce students to Code & Crisps and give them the option to implement their designs.
* Homework: Complete self assessment and reflection

[[Category:iExplore Module]]

Tech Team Final Documentation

2021-08-04T11:54:15Z

Jhc4318: /* Visualisations Updated */

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

# 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-22T08:36:03Z

Jhc4318: /* Visualisations Updated */

''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)
*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
*Differentiation Collection https://impvis.co.uk/launch/differentiation-finite-difference/first.html?collection=36

==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 - follow up for reply in September.

Tech Team Final Documentation

2021-07-21T11:02:17Z

Jhc4318: /* Things We Wanted to Do but Failed */

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

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

Slider

2021-07-05T09:47:12Z

Jhc4318: /* Events */

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

Name: playButton

Type: Boolean

Default: false

Description: used to create a Play/Pause button for the slider to increment continuously upon click.

Name: time_step

Type: Number

Default: 100

Description: sets the delay (in ms) between incrementations when using the Play button.

<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

Name: sliderChangedbyPlay

Triggered: Mousedown on Play button

Description: Emit slider value whilst slider increments after pressing Play

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

Slider

2021-07-02T10:25:43Z

Jhc4318: /* Props */

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

Name: playButton

Type: Boolean

Default: false

Description: used to create a Play/Pause button for the slider to increment continuously upon click.

Name: time_step

Type: Number

Default: 100

Description: sets the delay (in ms) between incrementations when using the Play button.

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

Slider

2021-07-02T10:25:04Z

Jhc4318: /* Props */

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

Name: playButton

Type: Boolean

Default: false

Description: used to create a Play/Pause button for the slider to increment continuously upon click.

Name: time_step

Type: Number

Default: 100

Description: sets the delay (in ms) between incrementations when using the Play button.

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