1. Continuous - Discrete Sampling Demo (CON2DIS) team
Intelligent Tutoring System (ITS)
Ruo Zhang
Wenqi Xian
12/9/2015

2. Fall 2015 Goal
Implement GUI to demonstrate Digital Signal Processing concepts for students in ECE 2026.
Based on existing Matlab GUI
Creating more interactive visualization and animation
Web-based interface
Learn front-end web development with the use of HTML, CSS, JavaScript, and 3rd party JavaScript library JSXGraph
Learn Linux operating environment and how to use Github as means of source control.
partitioning the layout into logical units
adding more options for the user

3. Project Overview
The Continuous-Discrete Sampling Demo is a program that shows the continuous and discrete spectra (of the input and reconstructed signals) during sampling.
This program covers the content in Matlab GUI CON2DIS demo, Nyquist theorem and Sampling theorem.
GUI DEMO: link
this demo depicts the sampling of a sine wave as it rises in frequency.
the blue sinusoid represents a input signal, the red sinusoid represents its reconstructed signal after sampling or aliasing.
In order to construct an input signal, a user has to specify the original frequency and phase.
In order to take “samples” of the continuous time signal at specific time instant, user has to input a specific sampling rate
Finally, after updating these information, the user can observe the sampling process and its spectra as well.
Play: Here is the basic idea this demo want to demonstrate. We can accurately sample our signal when the all of their frequency content is beneath the nyquest frequency which is the half of the sampling rate. In the graph, you can see blue and red overlapped. But, when we try to sample a signal containing a frequency higher than nyquest frequency, something very strange happens. As The frequency of the input signal is increasing, and it passes the nyquest frequency, the red line is distinguished from the blue line and the recontructed signal ended up representing a sine wave which is flipped or reflected about the nyquest frequency. In practice, we will measure the red line which does not even exist but it happens because of sampling or alising.
Additionally, show function….output formula….

4. Matlab GUI

5. Overall Layout of CON2DIS demo
On the left: control panel guides the user step by step: The user is allowed to control input sinusoid frequency, sampling rate and phase by updating input in textbox or dragging sliders. The input and sampled signal then change according to that.
On the right, In this way, users are able to focus on one board, and see how sampled signal is distinguished from the input signal while the frequency arrow traveling across the Nyquist frequency.

6. Module 1: Animation Purpose: Reduce cognitive load
Better understand the process
- A “play” button is designed to run a quick demo for users before they begin to change parameters of the signal.

7. Play button is pressed→ call player()
1: if (not playing) → start the timer “animate” → call sliderAnimation()
2: if (playing) → stop the timer “animate” → clear the timer

8. sliderAnimation() →set timer
→update slider →update function of sinusoids and spectra.

9. Input Slider
Slider object from JSXGraph Library

10. Module 2: Graph function implementation
Function graph object from JSXGraph Library

12. Segments
Line objects based on ‘Point’ Object from JSXGraph Library

13. Module 3: Continuous Time Spectrum & Discrete Time Spectrum
Line objects and Rectangle objects based on Point Object from JSXGraph Library

14. Module 3: Continuous Time Spectrum Discrete Time Spectrum
Line objects and Rectangle objects based on Point Object from JSXGraph Library

15. Question & Formula Output
Basic HTML

16. Code Structure HTML5 + CSS + Javascript +JSXGraph Library CSS header
affect
HTML
file
contain
Board1
(Sinewaves)
child
child
Board2
(Discrete)
Board3
(Continu.)

17. Easy to learn, comparing to D3
Analysis of JSXGraph
ADVANTAGES
Easy to learn, comparing to D3
Strong functionality, ex. built-in objects
Easy to create an object, ex. generate graph with math formula
Less compatibility issue
Cross platform
Light and Fast
add link to APIVery powerful, can create all kinds of shapes

18. - hideElement() & showElement() function with Line object
Analysis of JSXGraph
DISADVANTAGES
Strange Behaviors
- hideElement() & showElement() function with Line object
Scarce online resources and documentation
- solution towards bugs
- API hard to locate desired function

19. Challenges and Solutions
Board.update() with Javascript functions
Add boards to same parent node
Example of Dr. McClellan’s Matlab GUIs
Animation with JSXGraph
Communication between boards
Algorithm

20. Future Work Connect with ITS system More informative Q&A section
Reduce the ambiguity in the GUI
Optimization of code
Improve algorithm
Simplify hard-coding
Well-structured object oriented programming

21. Learning Outcome Technical Usage of Github to collaborate
Familiarity with Linux System Command
Mastery of Javascript, CSS, and JSXGraph library
Team-wise
Cooperating with each other
Accepting and Giving Suggestions
Time Management