Continuous Discrete Sampling Demo CON 2 DIS team

Continuous - Discrete Sampling Demo (CON 2 DIS) 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, Java. Script, and 3 rd party Java. Script library JSXGraph - Learn Linux operating environment and how to use Github as means of source control.

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 CON 2 DIS demo, Nyquist theorem and Sampling theorem. - GUI DEMO: link - http: //itsdev 3. vip. gatech. edu/~rzhang 315/

Matlab GUI

Overall Layout of CON 2 DIS demo

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

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

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

Input 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 HTML 5 + CSS + Javascript +JSXGraph Library CSS header HTML affect file contain Board 1 ild ch (Sinewaves) ch ild Board 2 Board 3 (Discrete) (Continu. )

Analysis of JSXGraph ADVANTAGES • Easy to learn, comparing to D 3 • 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

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

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

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