Multimedia Web-based Programming Development Environment

Richard Perry
Villanova University
Department of Electrical and Computer Engineering
richard.perry@villanova.edu
http://ftp.ece.villanova.edu/

---

Introduction

Web-based Integrated Development Environment
C, Java, and Unix shell programming

Graduate Level Programming Course

C Programming
Unix Commands
Shell Scripts
HTML output (interactive forms)

Graduate Level Computer Security Course

Java BigInteger, security, crypto packages
Distribute Prototype Programs or Input Data
Collect Programs/Results

Engineering Freshman C Programming Course

Programming, Multimedia Output, etc. - this presentation

---

Outline

Student vs. Instructor Views

General Features

Comparison with Dev-C++

Options Added and Removed

Multimedia Features, Examples

Customization per-course, per-student

(I/O Applet)

Future Directions

---

Projects Homepage for User Alice, Course fc

alice - fc - projects

a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, iPlot, HTML,
zip - download all projects
documentation and source code

---

Projects Homepage for Instructor rperry, Course fc

alice - fc - projects

a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, iPlot, HTML,
zip - download all projects
documentation and source code

---

Instructor Access and Customization

SetUserID - Web-based, access student files as the student

Unix Command-line

# ls -l logs/LOG
-rw-r-----   1 root root 3330 May 28 07:07 logs/LOG
# ls -l fc/home/alice/a1
drwx------   2 3025 3025  512 May 24 09:30 .
drwxr-x---  15 root 3025  512 May  3 11:32 ..
lrwxrwxrwx   1 3025 3025   26 Mar  9 18:20 Makefile -> ../../../proto/a1/Makefile
-rw-------   1 3025 3025  193 Mar 10 11:57 p1.c
-rw-------   1 3025 3025 1086 Mar 10 11:52 p1.c.OLD
#

Modify or Create Code

if [ ! -r "$file" ]; then
~~case "$COURSE" in
~~~~fc)
~~~~~~case "$sub" in
~~~~~~~~a2) case "$file" in
~~~~~~~~~~~~~~p4.c) /vecr/fc/a2/p4.sh "$user" > p4.c ;;
~~~~~~~~~~~~~~~~~*) touch "$file" ;;
~~~~~~~~~~~~esac
~~~~~~~~~~~~;;
~~...

---

Project a1, List of Files to Edit or View

alice - fc - a1

Home

Edit:

p1.c, p2.c, p3.c, p4.c, p1.java, p2.java, p3.java, p4.java,

p1.sh, p2.sh, p3.sh, p4.sh, p1.txt, p2.txt, p3.txt, p4.txt,

Makefile, p1.h, p2.h, p3.h, p4.h,

View:

     360 Jan 23  2005 Makefile
     870 Mar  9 18:20 p1.c

---

Project a1, Editing File p1.c

alice - fc - a1/p1.c

a1 - Home - preproc - asm - asmopt - cerr - reload - +linenums - -linenums

Compile args:

<-save changes args:
#include <stdio.h> #include <math.h> int main( void) { double x; setbuf( stdout, 0); while( scanf( "%lf", &x) == 1) printf( "x = %g, exp(x) = %g\n", x, exp(x)); return 0; }

---

Dev-C++ Example

---

Dev-C++/VECR Comparison

Dev-C++

49 top-level options
94 second-level options
63 third-level options

VECR

23 top-level options

---

Extra Submit, Update/Compile, etc. Options

alice - fc - a1/p1.c - submit - view submissions

a1 - Home - preproc - asm - asmopt - cerr - reload - +linenums - -linenums

Compile args:

<-save changes args:
#include <stdio.h> #include <math.h> int main( void) { double x; setbuf( stdout, 0); while( scanf( "%lf", &x) == 1) printf( "x = %g, exp(x) = %g\n", x, exp(x)); return 0; }

---

Interactive I/O Example

---

Interactive Plotting Example

---

Example Using Newton's Method

---

Sum of Two Sine Waves

sin( 2 π t / T₁) + sin( 2 π t / T₂) ⇒ period = lcm( T₁, T₂)

---

Product of Two Sine Waves

sin( ω₁ t ) sin( ω₂ t ) = ( cos( (ω₁ - ω₂) t ) - cos( (ω₁ + ω₂) t ) ) / 2

---

Audio Example

---

3D Plot Example

---

Customized Per-student Program and Automated Testing

---

Interactive I/O Initial Applet Connection

---

Interactive I/O Applet and Server Processes

---

Future Directions

Incremental Expansion

bison/flex projects
user-defined file names

More HTML Projects
GUI front-end for command-line C code
Batch Spreadsheet

Image Processing Projects
More use of 3D graphics

Extend Concept to Large OpenSource Projects

apache/, bind/, openssl/ vs. a1/, a2/, a3/
Concurrent Team Programming

Multimedia Web-based Programming Development Environment

Richard Perry
Villanova University
Department of Electrical and Computer Engineering
richard.perry@villanova.edu
http://ftp.ece.villanova.edu/

Introduction

Outline

Student vs. Instructor Views

General Features

Comparison with Dev-C++

Options Added and Removed

Multimedia Features, Examples

Customization per-course, per-student

(I/O Applet)

Future Directions

Projects Homepage for User Alice, Course fc

alice - fc - projects

a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, iPlot, HTML,
zip - download all projects
documentation and source code

Projects Homepage for Instructor rperry, Course fc

alice - fc - projects

a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, iPlot, HTML,
zip - download all projects
documentation and source code

Instructor Access and Customization

SetUserID - Web-based, access student files as the student

Unix Command-line

Modify or Create Code

if [ ! -r "$file" ]; then case "$COURSE" in fc) case "$sub" in a2) case "$file" in ~~p4.c) /vecr/fc/a2/p4.sh "$user" > p4.c ;; ~*) touch "$file" ;; esac ~~;; ...

Project a1, List of Files to Edit or View

alice - fc - a1

Home
Edit:
   p1.c, p2.c, p3.c, p4.c, p1.java, p2.java, p3.java, p4.java,
   p1.sh, p2.sh, p3.sh, p4.sh, p1.txt, p2.txt, p3.txt, p4.txt,
   Makefile, p1.h, p2.h, p3.h, p4.h,
View:
360 Jan 23 2005 Makefile 870 Mar 9 18:20 p1.c

Project a1, Editing File p1.c

alice - fc - a1/p1.c

a1 - Home - preproc - asm - asmopt - cerr - reload - +linenums - -linenums

Compile args:

<-save changes args:
#include <stdio.h> #include <math.h> int main( void) { double x; setbuf( stdout, 0); while( scanf( "%lf", &x) == 1) printf( "x = %g, exp(x) = %g\n", x, exp(x)); return 0; }

Dev-C++ Example

Dev-C++/VECR Comparison

Dev-C++

49 top-level options
94 second-level options
63 third-level options

VECR

23 top-level options

Extra Submit, Update/Compile, etc. Options

alice - fc - a1/p1.c - submit - view submissions

a1 - Home - preproc - asm - asmopt - cerr - reload - +linenums - -linenums

Compile args:

<-save changes args:
#include <stdio.h> #include <math.h> int main( void) { double x; setbuf( stdout, 0); while( scanf( "%lf", &x) == 1) printf( "x = %g, exp(x) = %g\n", x, exp(x)); return 0; }

Interactive I/O Example

Interactive Plotting Example

Example Using Newton's Method

Sum of Two Sine Waves

sin( 2 π t / T₁) + sin( 2 π t / T₂) ⇒ period = lcm( T₁, T₂)

Product of Two Sine Waves

sin( ω₁ t ) sin( ω₂ t ) = ( cos( (ω₁ - ω₂) t ) - cos( (ω₁ + ω₂) t ) ) / 2

Audio Example

3D Plot Example

Customized Per-student Program and Automated Testing

Interactive I/O Initial Applet Connection

Interactive I/O Applet and Server Processes

Future Directions

Multimedia Web-based Programming Development Environment

Richard Perry Villanova University Department of Electrical and Computer Engineering richard.perry@villanova.edu http://ftp.ece.villanova.edu/

Introduction

Outline

Student vs. Instructor Views General Features Comparison with Dev-C++ Options Added and Removed Multimedia Features, Examples Customization per-course, per-student (I/O Applet) Future Directions

Projects Homepage for User Alice, Course fc

alice - fc - projects

a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, iPlot, HTML, zip - download all projects documentation and source code

Projects Homepage for Instructor rperry, Course fc

alice - fc - projects

a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, iPlot, HTML, zip - download all projects documentation and source code rperry alice frodo jsmith vjones

Instructor Access and Customization

SetUserID - Web-based, access student files as the student Unix Command-line

Modify or Create Code

if [ ! -r "$file" ]; then ~~case "$COURSE" in ~~~~fc) ~~~~~~case "$sub" in ~~~~~~~~a2) case "$file" in ~~~~~~~~~~~~~~p4.c) /vecr/fc/a2/p4.sh "$user" > p4.c ;; ~~~~~~~~~~~~~~~~~*) touch "$file" ;; ~~~~~~~~~~~~esac ~~~~~~~~~~~~;; ~~...

Project a1, List of Files to Edit or View

alice - fc - a1

HomeEdit: p1.c, p2.c, p3.c, p4.c, p1.java, p2.java, p3.java, p4.java, p1.sh, p2.sh, p3.sh, p4.sh, p1.txt, p2.txt, p3.txt, p4.txt, Makefile, p1.h, p2.h, p3.h, p4.h, View: 360 Jan 23 2005 Makefile 870 Mar 9 18:20 p1.c

Project a1, Editing File p1.c

alice - fc - a1/p1.c

Dev-C++ Example

Dev-C++/VECR Comparison

Dev-C++ 49 top-level options 94 second-level options 63 third-level options VECR 23 top-level options

Extra Submit, Update/Compile, etc. Options

alice - fc - a1/p1.c - submit - view submissions

Interactive I/O Example

Interactive Plotting Example

Example Using Newton's Method

Sum of Two Sine Waves

sin( 2 π t / T1) + sin( 2 π t / T2) ⇒ period = lcm( T1, T2)

Product of Two Sine Waves

sin( ω1 t ) sin( ω2 t ) = ( cos( (ω1 - ω2) t ) - cos( (ω1 + ω2) t ) ) / 2

Audio Example

3D Plot Example

Customized Per-student Program and Automated Testing

Interactive I/O Initial Applet Connection

Interactive I/O Applet and Server Processes

Future Directions

Richard Perry
Villanova University
Department of Electrical and Computer Engineering
richard.perry@villanova.edu
http://ftp.ece.villanova.edu/

Student vs. Instructor Views

General Features

Comparison with Dev-C++

Options Added and Removed

Multimedia Features, Examples

Customization per-course, per-student

(I/O Applet)

Future Directions

a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, iPlot, HTML,
zip - download all projects
documentation and source code

a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, iPlot, HTML,
zip - download all projects
documentation and source code

SetUserID - Web-based, access student files as the student

Unix Command-line

if [ ! -r "$file" ]; then case "$COURSE" in fc) case "$sub" in a2) case "$file" in ~~p4.c) /vecr/fc/a2/p4.sh "$user" > p4.c ;; ~*) touch "$file" ;; esac ~~;; ...

Home
Edit:
p1.c, p2.c, p3.c, p4.c, p1.java, p2.java, p3.java, p4.java,
p1.sh, p2.sh, p3.sh, p4.sh, p1.txt, p2.txt, p3.txt, p4.txt,
Makefile, p1.h, p2.h, p3.h, p4.h,
View:
360 Jan 23 2005 Makefile 870 Mar 9 18:20 p1.c

Dev-C++

49 top-level options
94 second-level options
63 third-level options

VECR

23 top-level options

sin( 2 π t / T₁) + sin( 2 π t / T₂) ⇒ period = lcm( T₁, T₂)

sin( ω₁ t ) sin( ω₂ t ) = ( cos( (ω₁ - ω₂) t ) - cos( (ω₁ + ω₂) t ) ) / 2