MyDashboards

A collection of interactive and informative dashboards built with p5.js, exploring how live data streams and AI-driven generation can be transformed into dynamic, visual interfaces.

🎓 Educational material for ISTEC students
🌐 Live Demo: istec-for340.github.io/MyDashboards

---

🌐 Overview

MyDashboards explores the intersection of creative coding and real-time data APIs. By leveraging p5.js, these projects demonstrate how raw information—from global weather patterns to generative text-to-image AI—can be translated into responsive, visual systems.

Rather than treating data as rigid statistics, these works emphasize:

• Context over raw data – Transforming numbers into visual narratives.
• Co-creation with AI – Shifting from static layouts to generative, user-guided systems.
• Process over final form – Highlighting the flow of data ingestion, processing, and output.

The gallery landing page (index.html) links to both sketches. Each sketch includes a ← Home control to return to the gallery and uses a full-width, responsive canvas that adapts to the browser window.

---

🧩 Dashboards

1. Informative Dashboard (Non-Interactive Visual)

European Weather & Finance Board — a passive data-visualization interface that aggregates live information from multiple public web APIs. It translates real-time global shifts into an expressive, unified visual layout.

Folder	Quilled_cord_2026_05_18_10_26_28/
Entry point	Quilled_cord_2026_05_18_10_26_28/index.html

Features:

• Live weather metrics — Current conditions for five European capitals (Madrid, Paris, Berlin, Rome, London) via Open-Meteo.
• Currency exchange rates — EUR-based rates (USD, GBP, JPY, CHF) via open.er-api.com (no API key required).
• Ambient UI — Clock, gradient background, city cards with monument silhouettes, weather icons, and temperature gauges drawn entirely on the p5.js canvas.

APIs used:

• https://api.open-meteo.com/v1/forecast
• https://open.er-api.com/v6/latest/EUR

Concept: Investigates how continuous, asynchronous data streams can create an ambient digital ecosystem.

---

2. Edition Dashboard (Interactive Generative System)

AI Image Lab & Editor — a multi-stage, interactive dashboard where the user collaborates with generative artificial intelligence.

Folder	Candle_sushi_2026_05_18_10_27_00/
Entry point	Candle_sushi_2026_05_18_10_27_00/index.html

Features:

• Text-to-image generation — Ingests user text prompts and requests images from the Pollinations API, sized to the current canvas dimensions.
• Interactive post-processing — Grayscale, invert, posterize, threshold, and color tint filters applied with p5.js filter() on a working copy of the image.
• Export — Save the edited result as JPG from the canvas.

API used:

• https://image.pollinations.ai/prompt/{prompt}

Concept: Explores the role of the user not just as a consumer of AI, but as an editor and post-processor of machine-generated media.

---

📁 Project structure

MyDashboards/
├── index.html                              # Gallery / home page
├── styles.css                              # Gallery styles
├── README.md
├── Quilled_cord_2026_05_18_10_26_28/       # Informative dashboard
│   ├── index.html
│   ├── sketch.js
│   ├── style.css
│   ├── p5.js
│   └── p5.sound.min.js
└── Candle_sushi_2026_05_18_10_27_00/       # Edition dashboard
    ├── index.html
    ├── p5.min.js
    └── style.css

---

🎓 Educational Purpose

Developed for ISTEC students (course FOR340), these dashboards introduce advanced concepts in modern web development and creative coding:

• Asynchronous data loading — preload() with loadJSON() / loadImage() in p5.js, and how the same patterns map to fetch() in plain JavaScript.
• State management in p5.js — Separating data retrieval from the continuous draw() loop; keeping a baseImg vs editedImg copy for non-destructive edits.
• UI/UX for generative art — Designing interfaces for both passive viewing and active manipulation; responsive layout with HTML/CSS toolbars and a resizable canvas.

The codebase is structured to be modular and readable, encouraging students to:

1. Understand the API lifecycle (Request → Response → Render).
2. Swap existing APIs for new data sources (e.g. sports, crypto, transit).
3. Experiment with alternative image manipulation algorithms and layout logic.

---

🛠 Technologies

Technology	Role
p5.js	Canvas rendering, preload(), filters, and image handling
JavaScript (ES6+)	API integration and UI logic
Web REST APIs	Weather, currency, and text-to-image generation
HTML5 / CSS3	Gallery layout, toolbars, responsive flex layout

---

🚀 Usage

Option 1: View online

Explore the live, deployed dashboards instantly:

👉 Launch MyDashboards Live Preview

From the gallery, open either project card. Use ← Home inside each sketch to return to the main page.

---

Option 2: Local development

To run the project locally and experiment with the code:

1. Clone the repository:

   git clone https://github.com/ISTEC-FOR340/MyDashboards.git
   cd MyDashboards

2. Serve the folder over HTTP (recommended; avoids some browser restrictions with file://):

   # Python 3
   python -m http.server 8080
   
   # Node.js (npx, no install)
   npx serve .

3. Open in the browser:

   • Gallery: http://localhost:8080/
   • Weather dashboard: http://localhost:8080/Quilled_cord_2026_05_18_10_26_28/
   • AI editor: http://localhost:8080/Candle_sushi_2026_05_18_10_27_00/

   Alternatively, open index.html directly from the file system if a local server is not available.

4. Resize the window to see the responsive, full-width canvas behavior.

Note: The AI image API may rate-limit requests (HTTP 429). Wait a few seconds between generations if you hit limits during testing.

---

📄 License & attribution

Educational project for ISTEC — FOR340. Public APIs are subject to their respective terms of service; see each provider’s documentation for usage limits.

---

ISTEC-FOR340 · GitHub Pages · Built with p5.js