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

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

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 http://itsdev3.vip.gatech.edu/~rzhang315/ 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….

Matlab GUI

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.

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.

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

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

Input Slider Slider object from JSXGraph Library

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

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

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

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

Question & Formula Output Basic HTML

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

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

- 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

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

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

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