Le fil des Temps

Le fil des Temps est une application web de calendrier interactif qui a pour but d'agréger et d'afficher diverses données environnementales (météo, astronomiques, observations naturalistes, etc...) basées sur un lieu géographique déterminé. L'interface permet de visualiser ces informations sous la forme d'une timeline (agenda) qui permet 3 types de "vue" : vue mensuelle, hebdomadaire et quotidienne.

"Le fil des Temps" est un outil utilisé ici dans le cadre d'un projet IUT Lannion | Métiers du Multimédia & de l'Internet | BUT 3 qui vise à produire des représentations visuelles créatives du lieu ainsi "monitoré".

🏗️ Architecture technique

La classe principale Calendar

gère l'ensemble de l'application :

class Calendar {
    constructor() {
        this.currentDate = new Date();
        this.currentView = 'month';
        this.dataSources = {};
        this.sourceConfigs = [];
    }
}

📊 Sources de données

Chaque source de données possède :

getDataSourceConfigs() {
    return [
        {
            id: 'meteo',
            name: 'Météo',
            icon: '🌤️',
            color: '#26b5fc',
            files: ['json/meteo/fr_fr_meteo_1.json', 'json/meteo/fr_fr_meteo_2.json'],
            dataProcessor: this.processMeteoData.bind(this),
            eventRenderer: this.renderMeteoEvent.bind(this),
            detailRenderer: this.renderMeteoDetails.bind(this)
        }
        // ...
    ];
}

📅 Données météorologiques

{
    "history": {
        "2025-08-25": {
            "12:00": {
                "temperature": {
                    "current": 23,
                    "feels_like": 25
                },
                "weather": {
                    "description": "ensoleillé"
                },
                "atmosphere": {
                    "humidity": 65,
                    "pressure": 1015,
                    "clouds": 20
                },
                "wind": {
                    "speed": 10,
                    "direction_text": "SO"
                }
            }
        }
    }
}

🌙 Données astronomiques

{
    "moon_phases": [
        {
            "date": "2025-08-24",
            "phase": "new_moon",
            "phase_name": "Nouvelle Lune",
            "illumination": 0,
            "time": "12:07",
            "jd": 2460547.00
        }
    ]
}

🐟 Données de pêche électrique

{
    "metadata": {
        "last_update": "2025-08-25T10:00:00Z",
        "source": "Pêche électrique",
        "zone": "Léguer - Trégrom"
    },
    "events": [
        {
            "date": "2025-08-15",
            "type": "peche_electrique",
            "station": {
                "nom": "Kernansquillec",
                "cours_eau": "Léguer",
                "commune": "Trégrom"
            },
            "species_observed": {
                "Truite fario": 12,
                "Saumon atlantique": 3
            }
        }
    ]
}

🦌 Données faunistiques

{
    "metadata": {
        "last_update": "2025-09-08T17:22:02.110Z",
        "source": "Observations naturalistes",
        "zone": "Zone d'étude",
        "type": "faune"
    },
    "events": [
        {
            "date": "2024-06-27",
            "time_start": "11:00",
            "time_end": "13:00",
            "type": "observation_naturaliste",
            "group": "Insectes",
            "species": "Coccinelle à 7 points",
            "count": 1,
            "location": "Zone d'étude"
        }
    ]
}

🌿 Données floristiques

{
    "metadata": {
        "last_update": "2025-09-08T17:22:02.110Z",
        "source": "Observations naturalistes",
        "zone": "Zone d'étude",
        "type": "flore"
    },
    "events": [
        {
            "date": "2024-05-27",
            "time_start": "11:00",
            "time_end": "13:00",
            "type": "observation_naturaliste",
            "group": "Angiospermes",
            "species": "Orchis mâle",
            "count": 1,
            "location": "Zone d'étude"
        }
    ]
}

🎨 Design et couleurs

Les couleurs principales sont définies dans getDataSourceConfigs() :

• #26b5fc (bleu clair) - Météo
• #1e0278 (violet foncé) - Astronomie
• #ffa07a (saumon) - Poissons
• #a3007d (violet/rose) - Faune
• #aceb00 (vert citron) - Flore

Le fichier styles.css utilise des variables CSS et classes modulaires pour faciliter la personnalisation :

:root {
    --primary-color: #26b5fc;
    --secondary-color: #1e0278;
    --accent-color: #ffa07a;
    --faune-color: #a3007d;
    --flore-color: #aceb00;
}

📱 Responsive Design

L'application s'adapte automatiquement aux différentes tailles d'écran :

📁 Structure des fichiers

json/
├── meteo/
│   ├── fr_fr_meteo_1.json
│   └── fr_fr_meteo_2.json
├── astro/
│   └── astro_fr_fr.json
├── fish/
│   └── fr_fr_fish.json
└── environnement/
    ├── faune.json
    └── flore.json

⚡ Fonctionnalités

🛠️ Technologies

Ce projet utilise des données météorologiques et astronomiques publiques, ainsi que des observations naturalistes. L'interface est développée en JavaScript vanilla pour une compatibilité maximale.