220 lines
15 KiB
HTML
220 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ca">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Requisits de programari — Visor de trajectòries lagrangianes</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||
<style>
|
||
:root { --border: #e0e0e0; --muted: #555; --accent: #1a5f7a; --bg-note: #f8f9fa; --bg-capture: #fff9e6; }
|
||
body { font-family: 'Segoe UI', Calibri, sans-serif; max-width: 780px; margin: 2rem auto; padding: 0 1.5rem; line-height: 1.6; color: #1a1a1a; }
|
||
h1 { font-size: 1.6rem; font-weight: 700; border-bottom: 2px solid var(--border); padding-bottom: 0.4rem; margin: 0 0 0.25rem 0; }
|
||
h2 { font-size: 1.2rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.5rem; color: #333; }
|
||
h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.35rem; color: #444; }
|
||
p { margin: 0.5rem 0; }
|
||
ul, ol { margin: 0.6rem 0; padding-left: 1.5rem; }
|
||
li { margin: 0.4rem 0; }
|
||
.meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.25rem; }
|
||
.lead { font-size: 0.95rem; color: var(--muted); margin-bottom: 1.5rem; }
|
||
.toc { font-size: 0.9rem; background: var(--bg-note); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem; margin: 1.25rem 0; }
|
||
.toc ul { list-style: none; padding-left: 0; margin: 0; }
|
||
.toc li { margin: 0.2rem 0; }
|
||
.toc a { color: var(--accent); text-decoration: none; }
|
||
.toc a:hover { text-decoration: underline; }
|
||
.note { background: var(--bg-note); border-left: 4px solid var(--accent); padding: 0.75rem 1rem; margin: 1rem 0; font-size: 0.9rem; border-radius: 0 4px 4px 0; }
|
||
.capture-box { background: var(--bg-capture); border: 1px solid #e6d9b3; border-radius: 6px; padding: 0.85rem 1rem; margin: 1rem 0; font-size: 0.9rem; }
|
||
.capture-box h4 { margin: 0 0 0.5rem 0; font-size: 0.95rem; color: #7a6215; }
|
||
.capture-box ul { margin: 0.35rem 0 0 0; padding-left: 1.25rem; }
|
||
.req-id { font-family: monospace; font-size: 0.9em; color: var(--accent); }
|
||
a { color: var(--accent); }
|
||
a:hover { text-decoration: underline; }
|
||
hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
|
||
.mermaid { margin: 1.25rem 0; text-align: center; }
|
||
.diagram-caption { font-size: 0.85rem; color: var(--muted); margin-top: 0.25rem; font-style: italic; }
|
||
.section { margin-bottom: 1rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Requisits de programari — Visor de trajectòries lagrangianes</h1>
|
||
<p class="meta"><strong>Document de requisits · Client</strong></p>
|
||
|
||
<nav class="toc" aria-label="Contingut">
|
||
<strong>Índex</strong>
|
||
<ul>
|
||
<li>1. <a href="#intro">Introducció</a></li>
|
||
<li>2. <a href="#descripcio">Descripció general del producte</a></li>
|
||
<li>3. <a href="#actors">Actors i rols</a></li>
|
||
<li>4. <a href="#requisits">Requisits funcionals</a></li>
|
||
<li>5. <a href="#flux">Flux del sistema</a></li>
|
||
<li>6. <a href="#entregables">Entregables</a></li>
|
||
<li>7. <a href="#acceptacio">Criteris d'acceptació</a></li>
|
||
<li>8. <a href="#annexos">Annexos i referències</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<hr>
|
||
|
||
<section class="section" id="intro">
|
||
<h2>1. Introducció</h2>
|
||
<h3>1.1 Objectiu del document</h3>
|
||
<p>Aquest document defineix els requisits de programari del projecte <strong>Visor de trajectòries lagrangianes</strong>. Està dirigit al client i estableix l’abast funcional, els actors, els requisits i els criteris d’acceptació.</p>
|
||
<h3>1.2 Abast</h3>
|
||
<p>Inclou el visor web de visualització de trajectòries, l’àrea d’administració per a la càrrega i gestió de dades, el processament de fitxers NetCDF i el desplegament del conjunt. Queden fora d’abast els detalls d’arquitectura i implementació.</p>
|
||
</section>
|
||
|
||
<section class="section" id="descripcio">
|
||
<h2>2. Descripció general del producte</h2>
|
||
<ul>
|
||
<li>El producte és una <strong>aplicació web</strong> (visor) accessible des del navegador que permet visualitzar partícules contaminants (o similars) en moviment al Mediterrani occidental sobre un mapa.</li>
|
||
<li>Les partícules tenen origen en punts de la costa catalana, es dispersen amb els corrents durant un període definit (p. ex. 72 h) i, en arribar a la costa, queden encallades i s’acumulen. El visor permet identificar aquestes zones d’impacte de forma visual.</li>
|
||
<li>El mapa és interactiu (vistes 2D i 3D), amb animació temporal i controls per analitzar les dades. El producte està pensat per a l’anàlisi tècnica i per a la comunicació de resultats (reunions, informes).</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="section" id="actors">
|
||
<h2>3. Actors i rols</h2>
|
||
<ul>
|
||
<li><strong>Administrador:</strong> usuari amb permisos per pujar fitxers de dades (format NetCDF) i per gestionar les simulacions (consultar llistat, eliminar i, si es pacta, actualitzar o substituir). És l’únic rol amb accés a aquestes operacions.</li>
|
||
<li><strong>Usuari final:</strong> usuari que accedeix al visor per consultar simulacions ja publicades. Pot seleccionar simulació, utilitzar el mapa i els controls d’animació, filtres i llegenda. No pot pujar ni eliminar dades.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="section" id="requisits">
|
||
<h2>4. Requisits funcionals</h2>
|
||
|
||
<h3>4.1 Administració i càrrega de dades</h3>
|
||
<ul>
|
||
<li><span class="req-id">REQ-F-01</span> El sistema ha de permetre a l’administrador pujar fitxers NetCDF des d’una àrea d’administració dedicada.</li>
|
||
<li><span class="req-id">REQ-F-02</span> Els fitxers NetCDF hauran d’ajustar-se al format acordat (variables de longitud, latitud, velocitats, estat d’encallament, eixos de temps i partícules).</li>
|
||
<li><span class="req-id">REQ-F-03</span> El sistema ha de mostrar a l’administrador un llistat de simulacions disponibles (identificador, nom o data, segons implementació).</li>
|
||
<li><span class="req-id">REQ-F-04</span> El sistema ha de permetre a l’administrador eliminar simulacions. La simulació eliminada deixa d’estar disponible per als usuaris finals.</li>
|
||
<li><span class="req-id">REQ-F-05</span> Si es pacta, el sistema ha de permetre actualitzar o substituir fitxers existents sense crear una simulació nova.</li>
|
||
<li><span class="req-id">REQ-F-06</span> Un cop pujat un fitxer NetCDF, el sistema ha de validar-lo, processar-lo i deixar les dades disponibles per al visor sense intervenció manual addicional de l’administrador.</li>
|
||
</ul>
|
||
|
||
<h3>4.2 Visor — Mapa i visualització</h3>
|
||
<ul>
|
||
<li><span class="req-id">REQ-F-07</span> El visor ha de mostrar un mapa base interactiu sobre el qual es dibuixen les trajectòries, amb zoom i desplaçament (pan).</li>
|
||
<li><span class="req-id">REQ-F-08</span> El visor ha de oferir diversos estils de mapa base (p. ex. clar, fosc) seleccionables per l’usuari.</li>
|
||
<li><span class="req-id">REQ-F-09</span> El visor ha de suportar visualització en 2D i 3D de les trajectòries.</li>
|
||
<li><span class="req-id">REQ-F-10</span> El visor ha de mostrar l’estela del moviment de cada partícula (traça temporal) per diferenciar les partícules en moviment de les encallades.</li>
|
||
<li><span class="req-id">REQ-F-11</span> El visor ha de assignar un color per punt d’origen (llançament) per permetre identificar l’origen de cada partícula.</li>
|
||
<li><span class="req-id">REQ-F-12</span> El visor ha de diferenciar visualment les partícules actives (en moviment) de les encallades (p. ex. mitjançant color o símbol).</li>
|
||
</ul>
|
||
|
||
<h3>4.3 Visor — Animació i temps</h3>
|
||
<ul>
|
||
<li><span class="req-id">REQ-F-13</span> El visor ha de oferir controls de reproducció: iniciar (play) i aturar (pausa) l’animació temporal.</li>
|
||
<li><span class="req-id">REQ-F-14</span> El visor ha de oferir un control de velocitat de l’animació (múltiples graus, des de més lent fins a més ràpid).</li>
|
||
<li><span class="req-id">REQ-F-15</span> El visor ha de oferir un control (slider o equivalent) per desplaçar-se directament a un instant temporal concret sense reproduir l’animació completa.</li>
|
||
<li><span class="req-id">REQ-F-16</span> El visor ha de mostrar l’instant temporal actual (p. ex. “Dia 2 · 14:00” o data real si les dades la inclouen).</li>
|
||
</ul>
|
||
|
||
<h3>4.4 Visor — Filtres i capes</h3>
|
||
<ul>
|
||
<li><span class="req-id">REQ-F-17</span> El visor ha de oferir un panell o menú de filtres per activar o desactivar capes visuals: esteles de moviment, partícules actives i partícules encallades.</li>
|
||
<li><span class="req-id">REQ-F-18</span> El visor ha de permetre canviar l’estil del mapa base des del panell de filtres o un menú equivalent.</li>
|
||
</ul>
|
||
|
||
<h3>4.5 Visor — Informació i ajuda</h3>
|
||
<p>Informació contextual en passar el cursor sobre elements del mapa i llegenda per interpretar colors i estats.</p>
|
||
<ul>
|
||
<li><span class="req-id">REQ-F-19</span> Tooltip sobre partícula: com a mínim origen i velocitat en aquell instant.</li>
|
||
<li><span class="req-id">REQ-F-20</span> Llegenda amb el significat dels colors, orígens i estats (actiu / encallat).</li>
|
||
</ul>
|
||
|
||
<h3>4.6 Visor — Navegació i simulacions</h3>
|
||
<ul>
|
||
<li><span class="req-id">REQ-F-21</span> El visor ha de oferir una acció (p. ex. botó) per encuadrar totes les partícules visibles al mapa mitjançant zoom automàtic.</li>
|
||
<li><span class="req-id">REQ-F-22</span> Quan existeixin diverses simulacions, el visor ha de permetre seleccionar quina simulació visualitzar (desplegable, selector o paràmetre d’URL) i carregar les dades corresponents.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="section" id="flux">
|
||
<h2>5. Flux del sistema</h2>
|
||
|
||
<h3>5.1 Flux de dades</h3>
|
||
<p>L’administrador puja fitxers NetCDF. El sistema els valida, els processa (incloent submostreig horari quan sigui aplicable) i genera les dades i metadades necessàries per al visor. Les simulacions queden disponibles per a tots els usuaris amb accés al visor. L’usuari final obre el visor, selecciona una simulació i utilitza els controls d’animació, filtres, tooltips i llegenda.</p>
|
||
<div class="mermaid">
|
||
flowchart LR
|
||
A[Administrador<br/>puja NetCDF] --> B[Sistema<br/>valida i processa]
|
||
B --> C[Simulacions<br/>disponibles]
|
||
C --> D[Usuari<br/>visualitza al visor]
|
||
</div>
|
||
<p class="diagram-caption">Figura 1 — Flux de dades.</p>
|
||
|
||
<h3>5.2 Flux d’ús del visor</h3>
|
||
<p>L’usuari accedeix al visor des del navegador, selecciona simulació (o se n’ofereix una per defecte), el mapa es carrega amb les trajectòries i l’usuari pot utilitzar zoom, desplaçament, controls de reproducció, filtres, tooltips i zoom a partícules.</p>
|
||
<div class="mermaid">
|
||
flowchart TB
|
||
O([Obrir visor]) --> T[Triar simulació]
|
||
T --> M[Mapa amb trajectòries]
|
||
M --> C{Controls}
|
||
C --> P[Play / Pausa / Velocitat]
|
||
C --> S[Slider temporal]
|
||
C --> F[Filtres i capes]
|
||
C --> Z[Zoom a partícules]
|
||
C --> L[Tooltips i llegenda]
|
||
</div>
|
||
<p class="diagram-caption">Figura 2 — Flux d’ús del visor.</p>
|
||
</section>
|
||
|
||
<section class="section" id="entregables">
|
||
<h2>6. Entregables</h2>
|
||
<ul>
|
||
<li><strong>Visor web:</strong> aplicació accessible des del navegador que implementa els requisits de les seccions 4.2 a 4.6 (mapa, animació, controls de temps, filtres, tooltips, llegenda).</li>
|
||
<li><strong>Àrea d’administració:</strong> interfície que implementa els requisits REQ-F-01 a REQ-F-06 (pujada de NetCDF, llistat, eliminació i, si s’acorda, actualització o substitució).</li>
|
||
<li><strong>Processament de dades:</strong> pipeline de validació i transformació dels fitxers NetCDF pujats per deixar les dades disponibles per al visor sense accions manuals addicionals.</li>
|
||
<li><strong>Documentació d’ús:</strong> instruccions per a l’administrador (càrrega i gestió de fitxers) i per a l’usuari final (ús del visor i controls), segons pacte.</li>
|
||
<li><strong>Desplegament:</strong> conjunt (visor, administració i processament) desplegat de forma reproducible (p. ex. contenidors), segons acord, per a la posada en marxa en l’entorn del client.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="section" id="acceptacio">
|
||
<h2>7. Criteris d’acceptació</h2>
|
||
<p>El projecte es donarà per acceptat quan es compleixin les condicions següents:</p>
|
||
<ul>
|
||
<li>L’administrador pot pujar fitxers NetCDF en el format acordat i pot llistar i eliminar simulacions des de la interfície d’administració.</li>
|
||
<li>El visor mostra les trajectòries amb animació temporal i diferenciació clara entre partícules en moviment i encallades, i entre orígens (mitjançant colors i llegenda).</li>
|
||
<li>L’usuari final pot utilitzar sense errors els controls de reproducció (play, pausa, velocitat, slider), el panell de filtres i capes, els tooltips i la llegenda, la selecció de simulació i el zoom a partícules.</li>
|
||
<li>El rendiment del visor és acceptable amb el volum de partícules i passos temporals definits al projecte (reproducció fluida sense bloquejos evidents).</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="section" id="annexos">
|
||
<h2>8. Annexos i referències</h2>
|
||
<p>Referències externes per contextualitzar el tipus de visualització. Les captures recomanades poden emprar-se per a documentació o presentacions del client.</p>
|
||
|
||
<h3>8.1 Enllaços de referència</h3>
|
||
<ul>
|
||
<li><a href="https://deck.gl" target="_blank" rel="noopener">deck.gl</a> — motor de visualització del visor.</li>
|
||
<li><a href="https://deck.gl/examples/trips-layer" target="_blank" rel="noopener">Trips Layer</a> — exemple de trajectòries animades amb estela; referència propera al comportament del visor.</li>
|
||
<li><a href="https://deck.gl/examples" target="_blank" rel="noopener">Exemples deck.gl</a>.</li>
|
||
<li><a href="https://maplibre.org" target="_blank" rel="noopener">MapLibre</a> — mapes base (sense clau d’API). <a href="https://maplibre.org/demos/" target="_blank" rel="noopener">Demos</a>.</li>
|
||
<li><a href="https://arrow.apache.org" target="_blank" rel="noopener">Apache Arrow</a> — format intern de dades (informatiu).</li>
|
||
</ul>
|
||
|
||
<h3>8.2 Captures recomanades per a documentació o presentació</h3>
|
||
<div class="capture-box">
|
||
<ul>
|
||
<li><strong>Captura principal:</strong> <a href="https://deck.gl/examples/trips-layer" target="_blank" rel="noopener">deck.gl — Trips Layer</a>. Obrir l’enllaç, activar l’animació (Play) i realitzar una captura de pantalla amb trajectòries amb estela i colors. Representa de forma adequada el tipus de visualització del producte.</li>
|
||
<li><strong>Captura opcional:</strong> <a href="https://maplibre.org/demos/" target="_blank" rel="noopener">MapLibre — Demos</a>. Seleccionar un estil de mapa (clar o fosc) i realitzar una captura per il·lustrar l’aspecte del mapa base del visor.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<hr>
|
||
<p class="meta"><em>Document de requisits de programari. Per a consultes sobre requisits o abast, contactar amb el proveïdor.</em></p>
|
||
|
||
<div class="note">
|
||
<strong>Ús del document en Word</strong><br>
|
||
Seleccioneu tot el contingut (Ctrl+A), copieu i enganxeu en un document Word. Per incloure els diagrames, obrir aquest fitxer al navegador, realitzar una captura de pantalla de cada diagrama (p. ex. Win+Shift+S) i enganxar-les al document. Per il·lustrar el visor, afegir la captura de <a href="https://deck.gl/examples/trips-layer" target="_blank" rel="noopener">Trips Layer</a> amb l’animació activa (secció 8.2).
|
||
</div>
|
||
|
||
<script>
|
||
mermaid.initialize({ startOnLoad: true, theme: 'neutral' });
|
||
</script>
|
||
</body>
|
||
</html>
|