1. Discrete Convolution Demo
Team Members: Jay Karwatsky, Cassie Xia

2. Goals
Recreate discrete convolution demo GUI using HTML/CSS, JavaScript, and JSXGraph
Learn how to use JSXGraph libraries
Use GitHub to organize collaborative work

3. Project Overview
The Discrete Convolution Demo is a program that helps visualize the process of discrete-time convolution.
The demo we created works with linear convolution.
This demo allows the user to select from a selection of signals and view the output of the discrete time convolution.

4. Matlab GUI - Discrete Convolution

5. Matlab GUI - Signal Inputs

6. JavaScript GUI - Signal Inputs

7. JavaScript GUI - Discrete Convolution

8. Tools Used
HTML
Javascript (JSXGraph)
CSS (Bootstrap)
Git

9. JSXGraph JSXGraph is a JavaScript library used to display visuals
In our demo, we use the JSXGraph to provide the graphs and sliders content to our webpage

10. Webpage Setup The webpage was laid out with a modular design structure
This design structure allowed elements of the page to be moved around easily without causing issues with the code
The modular design allowed for easy implementation of Bootstrap CSS tools.
JavaScript files were also implemented with a modular design
Each function was placed in a separate file in a JavaScript folder

11. x[n] and h[n] Input Signal Types
Pulse
User Inputs: Amplitude, Length, Delay
Cosine
User Inputs: Amplitude, Period, Phase, Length, Delay
Sine
Exponential
User Inputs: Scaling Factor, Exponential Constant, Length, Delay, Causality

12. Input Signal Features
Changes input queries based on selected signal type
Only shows input boxes for selected signal type
Select signal type through drop-down menu
Submit signal to graph user input
Make changes to input signals before convolving
Can always go back to resubmit input signals

13. Convolution
Signals were stored in a global array that all boards could access and manipulate
x[n] and h[n] are convolved point by point and added to the overall convolution board.
The delay slider determines where signals are placed on the overlay and multiplication boards.
Zoom is determined based upon the max ranges of X and Y values for respective boards.

14. Overlay Board x[n] and h[n] signals are overlaid on top of each other
Zoom is based on the range of the input signals
Ability to change whether x[n] or h[n] is flipped

15. Middle Step Board
The middle board highlights the multiplication of the overlaid signals

16. Convolution Result Board
Displays the final result of the convolution and highlights the stem associated with the stems in the middle board
Zoom is again based on the possible range of values

17. Challenges Encountered
Learning how to use the virtual machine alongside of GitHub to setup a localhost
Overcoming different levels of JavaScript experience
Locating resources for learning about JSXGraphs and how to use the JSXGraph libraries
Encountering compatibility issues when combining individual code together
Figuring out how to use design space most efficiently

18. JavaScript GUI - Signal Inputs

19. JavaScript GUI - Discrete Convolution

20. What Worked? Using a global backing array
Using a modular HTML and JavaScript design
Setting up Brackets (Text Editor) to work as an IDE
Brackets provided live feedback during development

21. What Didn’t Work? Optimal use of GitHub
Use of AJAX to format the pages
Too much to learn within the given timeframe
Could not test code without a local server
Ended up using CSS

22. Possible Improvements
Display equation of each input signal
Add an unit sample input for x[n] and h[n]
Add an user signal input for x[n] and h[n]
Improved zoom functionality and tools to configure zoom
Improved visual design
Optimization of backing code
Setting limits for the user
Display equation of each input signal
On both the input signal page and the convolution page
Add an unit sample input for x[n] and h[n]
Functionality is available in pulse input signal
Add for improved user compatibility
Add an user signal input for x[n] and h[n]
Allow user to input an array of values instead of a defined signal type

23. Learning Experience
Greatly improved knowledge of JavaScript and how to use libraries
Basic understanding of Git collaboration
Using suggestions and reference code from multiple sources
Time management and group coordination

24. Questions?