Page Flow
2-Page Navigation
Page 01
MATLAB Listing
matlab-projects.html
Page 02
MATLAB Project Viewer
project-viewer.html?id=X&category=matlab
Page 1
MATLAB Listing Page
matlab-projects.html — Same structure as Arduino কিন্তু unique feature হলো card-এর thumbnail section-এ image carousel।
Projects
All MATLAB Projects
Simulations, Algorithms & Data Analysis
1 Project
All 1
GLB 3D
RESULT
Solar PV I-V & P-V Curve Analysis
I-V and P-V curves with irradiance/temp variation
More Projects Coming Soon
1
Hero Section
Chart-line icon, "All MATLAB Projects", "Simulations, Algorithms & Data Analysis", live count badge. Heading updates with active filter.
Filter চাপলে heading "Renewable Energy Projects" হয়।
2
5 Filter Categories
All · Renewable Energy · Power Systems · Heat Transfer · Control Systems. Currently only "Renewable Energy" has content (1 project). Others show 0.
৫টা category — এখন Renewable Energy-তে 1টা project।
3
Image Carousel in Cards
Unique to MATLAB — thumbnail area shows multiple result images as a sliding carousel with dot indicators (active dot elongates to pill shape). Images cycle automatically or on swipe.
Arduino-র একটা image-এর জায়গায় MATLAB-এ carousel — একাধিক result image।
4
RESULT Badge + GLB Badge
Red "RESULT" badge (top-left) — marks result images. If model has GLB, "GLB 3D" badge (top-right) appears.
Result image-এ "RESULT" badge, 3D model থাকলে "GLB 3D" badge।
5
"Coming Soon" Badge
Red bordered badge — "More Projects Coming Soon" — shown when a category has 0 projects. The page continues to be functional, just empty state.
Future content-এর জন্য Coming Soon badge দেখায়।
5 Filter Categories
Renewable Energy
Solar PV, wind, biomass, energy optimization.
Power Systems
Circuit analysis, load flow, fault detection.
Heat Transfer
Temperature distribution, conduction, convection.
Control Systems
Transfer functions, PID, stability analysis.
Simulink Models
Block diagrams, system dynamics, control loops.
Page 2
MATLAB Project Viewer
project-viewer.html?category=matlab — .m code viewer, result image gallery, overview।
Shared Viewer —
project-viewer.js detects ?category=matlab from URL and switches to MATLAB mode: loads matlab-data.json, shows .m MATLAB code instead of Arduino sketch, result image gallery instead of circuit diagram. Back button routes back to matlab-projects.html.
MATLAB
Solar PV Analysis · Intermediate
% Solar PV I-V Curve Analysis
clear; clc; close all;
% Parameters
G = 1000; T = 25; % irradiance
Voc = 42.1; Isc = 8.21;
plot(V, I, 'r-', 'LineWidth', 2);
clear; clc; close all;
% Parameters
G = 1000; T = 25; % irradiance
Voc = 42.1; Isc = 8.21;
plot(V, I, 'r-', 'LineWidth', 2);
Copy Code
Result Images
.m Code
ZIP
1
Project Header + Difficulty
Title and difficulty badge (Beginner/Intermediate/Advanced). Share (Web Share API) and Bookmark (localStorage) buttons in header — same as Arduino.
2
.m Code Viewer
Syntax-highlighted MATLAB code block (
.m file). Red background code section with mono font. Copy button triggers clipboard API.MATLAB code syntax highlight সহ — Copy করা যায়।
3
Result Image Gallery
Horizontal scrollable row of result images (I-V curve, P-V curve, table, etc.). Tap to view full-size.
Result graph গুলো thumbnail row-এ — tap করে full দেখা যায়।
4
Download Buttons
.m Code (primary) + ZIP (full package). ZIP includes .m file, result images, and documentation.
.m file বা full ZIP (images সহ) download করো।
All Features
MATLAB Unique Features
Result Image Carousel
Cards show a cycling carousel of result images. Active dot becomes an elongated pill shape. Auto-cycles or swipe-navigable.
Card-এ multiple result image carousel — dot indicator active হলে pill shape।
RESULT + GLB Badges
"RESULT" badge (red, top-left) marks simulation output screenshots. "GLB 3D" badge (blue, top-right) if a 3D model exists for the project.
Result image আর 3D model আলাদা badge দিয়ে mark করা।
.m MATLAB Code Viewer
Syntax-highlighted MATLAB code viewer. Keywords, functions, comments colored. One-click Copy button uses Clipboard API. Download raw .m file.
MATLAB code syntax-highlighted দেখে copy বা download করো।
Coming Soon States
Categories with 0 projects → red bordered "Coming Soon" badge instead of empty state error. Graceful placeholder for future content.
Empty category-তে error নয় — "Coming Soon" badge দেখায়।
Bookmark + Share
localStorage bookmark persists across sessions. Web Share API for native sharing. Both identical to Arduino/SolidWorks.Rich Tags
Each project has searchable tags: Solar, PV, MPPT, Renewable Energy etc. Tags show on card and are included in search index.
Tags search-এ include — full text search করা যায়।
Data Schema
matlab-data.json — Fields
| Field | Type | Description |
|---|---|---|
id | String | e.g. matlab-demo-01 |
title | String | Project name — appears on card and viewer header |
category | String | Filter key: Renewable Energy | Power Systems | Heat Transfer | Control Systems | Simulink |
difficulty | String | Beginner / Intermediate / Advanced — shown in viewer |
tags[] | Array | Searchable tags (Solar, PV, MPPT, etc.) |
topics[] | Array | Key analysis topics — shown as bullet list in viewer |
files.code | String | .m file name — code viewer content |
files.images[] | Array | Result image filenames — carousel in listing, gallery in viewer |
files.zip | String | ZIP download filename |
files.youtubeVideo | String | Optional YouTube video URL for tutorial |
files.liveScript | String | Optional MATLAB Live Script (.mlx) file |
File Map
All Files
| File | Location | Role |
|---|---|---|
matlab-projects.html | mobile/projects/ | Category listing — filter chips, carousel cards |
matlab-projects.js | mobile/projects/ | Loads JSON, renders cards with image carousel logic |
project-viewer.html | mobile/projects/ | Shared viewer, switches to MATLAB mode via URL param |
project-viewer.js | mobile/projects/ | Code display, result gallery, download, share, bookmark |
matlab-data.json | Projects Code/MATLAB/ | All MATLAB project objects |