Introduction to MATLAB/SciLab/Web Design (IT-406) - Unit 5 Short Notes

UNIT 5: Integration of Computational Tools with Web Design (MATLAB/SciLab & Web Technologies)

5.1 Web Design Fundamentals Review & Extension

HTML5 for Structured Content

• Semantic Elements: Use tags that describe meaning to browsers/developers.

  • <article>: Independent, self-contained content.

  • <section>: Thematic grouping of content.

  • <figure> & <figcaption>: For images/diagrams with captions.

• Embedding Media:

  • <img src="path" alt="description">

  • <audio controls> & <video controls>

• Forms: <form> with inputs (<input>, <select>, <textarea>) for user data submission via GET/POST.

CSS3 for Presentation and Layout

• Advanced Selectors: Attribute selectors ([type="text"]), pseudo-classes (:hover, :nth-child(n)).

• Layout Models:

  • Flexbox: One-dimensional layout (row OR column). Container property: display: flex;.

  • CSS Grid: Two-dimensional layout (rows AND columns). Container property: display: grid;.

• Visual Effects:

  • transition: Smooth property changes (e.g., transition: all 0.3s ease;).

  • transform: 2D/3D transformations (rotate, scale, translate).

  • @keyframes: For defining animations.

• Responsive Design: @media (max-width: 768px) { ... } to apply device-specific styles.

JavaScript for Interactivity

• DOM Manipulation: document.getElementById(), querySelector(), modifying innerHTML or element styles.

• Event Handling: element.addEventListener('click', function() { ... });

• Asynchronous Data (Fetch API):

  
  fetch('data.json')
  
    .then(response => response.json())
  
    .then(data => console.log(data));
  
  

• Visualization Libraries:

  • Chart.js: Simple, canvas-based charts.

  • D3.js: Powerful, data-driven documents using SVG (steeper learning curve).

Exam Tip: Know when to use Flexbox (1D) vs. Grid (2D). For dynamic charts, D3 offers more control but Chart.js is quicker for standard plots.

5.2 MATLAB/SciLab for Data Processing and Visualization

Scripting and Automation

• Scripts (.m file): Sequence of commands. Runs in base workspace.

• Functions: Accept inputs, return outputs. Encapsulated workspace. Syntax:

  
  function [out1, out2] = myFunction(in1, in2)
  
      % code
  
  end
  
  

• Control Flow: if, for, while loops for batch processing.

• Core Data Structure: Matrices & Arrays. Operations are vectorized by default (faster).

Data Import, Analysis, and Export

• Import:

  • readmatrix('file.csv') or csvread() (MATLAB).

  • csvRead('file.csv') (SciLab).

  • load('file.mat') for .mat files.

• Basic Analysis: mean(), std(), min(), max(), corr(). Data cleaning: isnan(), rmmissing().

• Export for Web:

  • writematrix(data, 'output.csv')

  • jsonencode(data) → write to .json file.

  • xmlwrite() for XML.

  • Key: Export clean, structured data (e.g., arrays of objects for JSON).

Advanced Plotting and Figure Generation

• 2D/3D Plots: plot(), scatter(), surf(), mesh().

• Customization: xlabel(), ylabel(), title(), legend(), grid on.

• Saving for Web:

  • saveas(gcf, 'figure.png') – Raster.

  • saveas(gcf, 'figure.svg') – Vector (scalable, ideal for web).

  • print('-dpng', '-r300', 'figure.png') – Control resolution.

  • plot2svg() (File Exchange) or exportgraphics() (R2020a+) for SVG.

Exam Tip: Vector formats (SVG) are superior for responsive web design. Use exportgraphics(gcf, 'figure.svg', 'ContentType', 'vector') in modern MATLAB.

5.3 Bridging MATLAB/SciLab and the Web

Exporting Computational Results for the Web

• Automated Reports: Use MATLAB Report Generator or publish scripts (publish('script.m', 'html')) to generate HTML/PDF.

• Dynamic Code Generation: Write MATLAB code that outputs HTML/JS strings.

  
  fid = fopen('chart.js', 'w');
  
  fprintf(fid, 'var data = %s;', jsonencode(myData));
  
  fclose(fid);
  
  

• Interactive Plots: Save as .fig (MATLAB) for later editing, or use export() to create standalone HTML with embedded JavaScript (requires toolboxes).

Web Application Deployment Concepts

• Architecture: Client (Browser) ↔ Server (Computational Engine).

• MATLAB Options:

  • MATLAB Web App Server: Deploy apps built with App Designer as web apps.

  • MATLAB Compiler SDK: Package algorithms as C/C++/Java/.NET/Python libraries or RESTful web services.

  • MATLAB Production Server: Enterprise-grade for deploying MATLAB functions as scalable services.

• SciLab Options: More limited. Can generate static content or use Scinapse (web-based interface) or export to TCL/TK for simple GUIs.

Data APIs and Web Services

• RESTful API Concept: Endpoint (URL) + HTTP Method (GET/POST) → returns JSON/XML.

  • Example: GET https://api.example.com/compute?param=5 → {"result": 25}.

• MATLAB as API Provider: Use MATLAB Production Server or MATLAB Compiler SDK to wrap a function and deploy it as a RESTful endpoint.

• MATLAB as API Consumer: webread() or webwrite() to call external APIs.

  
  data = webread('https://api.example.com/data');
  
  

Exam Tip: Distinguish MATLAB Web App Server (for interactive UI apps) from Production Server (for scalable, headless computational functions).

5.4 Building a Complete Web-Integrated Project

Project Workflow Design

1. Requirements: Define input (user/file/API), processing (algorithm), output (chart/table/value).

2. Separation of Concerns:

   • Backend (MATLAB/SciLab): Heavy computation, data processing, figure generation.

   • Frontend (HTML/CSS/JS): User interface, layout, dynamic updates, rendering results.

Implementation Steps

1. Develop & Validate Core Computation: Create and test MATLAB/SciLab script/function with sample data.

2. Create Output Mechanisms:

   • Option A: Generate static files (.json, .csv, .png/.svg) on server.

   • Option B: Set up a RESTful API endpoint (using Production Server/Compiler SDK).

3. Build Responsive Frontend:

   • HTML for structure (forms, divs for charts).

   • CSS (Flex/Grid) for responsive layout.

   • JavaScript for logic, fetching data (fetch()), and rendering (using Chart.js/D3 or inserting <img> tags).

4. Connect Frontend-Backend:

   • For files: fetch('data/results.json').then(...)

   • For API: fetch('https://server/api/function?input=5').then(...)

Case Study: Interactive Data Dashboard

• Backend (MATLAB):

  • Script loads dataset (readmatrix).

  • Function processData(filterParams) returns statistics and plot data structures.

  • Saves stats.json and plotData.json OR deployed as API.

• Frontend (Single Page App):

  • HTML: Dropdowns for filters, <div id="chart1">, <div id="stats">.

  • JS: On filter change → fetch() new data → update Chart.js instance & stats table.

  • CSS: Grid layout to arrange dashboard widgets.

5.5 Best Practices, Performance, and Limitations

Performance Considerations

• Processing Location:

  • Server-side (MATLAB): Best for heavy computation, large datasets, proprietary algorithms.

  • Client-side (JS/D3): Best for small datasets, instant UI responsiveness, offline capability.

• Caching: Store frequent query results (e.g., in a database or file) to avoid re-running expensive MATLAB scripts.

• Figure Optimization: Generate figures at required display size. Use SVG for vector, compress PNGs. Consider generating only data and letting D3.js render client-side for maximum interactivity.

Security and Access

• Endpoint Security: Use HTTPS. Implement authentication (API keys, OAuth) for computational APIs.

• Input Validation: Sanitize all user inputs sent to MATLAB/SciLab to prevent code injection or malicious file access.

• Data Protection: Encrypt sensitive data in transit (TLS) and at rest. Do not expose raw .mat files or source code directly.

Tool Selection and Limitations

• Cross-Platform/Browser: SVG is widely supported. PNG is universal. Avoid deprecated/inconsistent CSS/JS features.

• Key Limitation: MATLAB-generated web content often lacks the seamless interactivity of a purpose-built JavaScript library like D3. The bridge is best for automating report generation or serving computed results, not for building highly dynamic, client-side experiences.

Exam Tip: For a project, justify your toolchain choice based on budget (MATLAB vs SciLab), required computation intensity, and desired frontend interactivity level.