Files

PaulVua 7479344df7 Mise à jour capteur bruit: ancien I2C → NSRT MK4 USB

- Nouveau script sound_meter/read.py pour lecture à la demande (JSON)
- launcher.php: appel du script Python au lieu de l'ancien binaire C
- sensors.html: carte USB, suppression boutons start/stop, affichage JSON
- Traductions fr/en: I2C → USB, NSRT MK4

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-12 15:23:54 +01:00

en.json

Mise à jour capteur bruit: ancien I2C → NSRT MK4 USB

2026-03-12 15:23:54 +01:00

fr.json

Mise à jour capteur bruit: ancien I2C → NSRT MK4 USB

2026-03-12 15:23:54 +01:00

README.md

Implement lightweight offline i18n system with French/English support

2026-01-05 18:10:06 +01:00

README.md

NebuleAir i18n System

Lightweight internationalization (i18n) system for NebuleAir web interface.

Features

Offline-first: Works completely offline with local JSON translation files
Database-backed: Language preference stored in SQLite config_table
Automatic: Translations apply on page load and when language changes
Simple API: Easy-to-use data attributes and JavaScript API

Quick Start

1. Include i18n.js in your HTML page

<script src="assets/js/i18n.js"></script>

The i18n system will automatically initialize when the page loads.

2. Add translation keys to HTML elements

Use the data-i18n attribute to mark elements for translation:

<h1 data-i18n="page.title">Titre en français</h1>
<p data-i18n="page.description">Description en français</p>
<button data-i18n="common.submit">Soumettre</button>

The text content serves as a fallback if translations aren't loaded.

3. Add translations to JSON files

Edit lang/fr.json and lang/en.json:

{
  "page": {
    "title": "Mon Titre",
    "description": "Ma description"
  },
  "common": {
    "submit": "Soumettre"
  }
}

Translation keys use dot notation for nested objects.

Translation Files

fr.json: French translations (default)
en.json: English translations

File Structure Example

{
  "common": {
    "save": "Enregistrer",
    "cancel": "Annuler",
    "delete": "Supprimer"
  },
  "navigation": {
    "home": "Accueil",
    "settings": "Paramètres"
  },
  "sensors": {
    "title": "Capteurs",
    "description": "Liste des capteurs"
  }
}

JavaScript API

Get Current Language

const currentLang = i18n.currentLang; // 'fr' or 'en'

Change Language Programmatically

await i18n.setLanguage('en'); // Switch to English

Get Translation in JavaScript

const translation = i18n.get('sensors.title'); // Returns translated string

Manual Translation Application

If you dynamically create HTML elements, call applyTranslations() after adding them to the DOM:

// Create new element
const div = document.createElement('div');
div.setAttribute('data-i18n', 'mypage.newElement');
div.textContent = 'Fallback text';
document.body.appendChild(div);

// Apply translations
i18n.applyTranslations();

Listen for Language Changes

document.addEventListener('languageChanged', (event) => {
  console.log('Language changed to:', event.detail.language);
  // Reload dynamic content, update charts, etc.
});

Special Cases

Input Placeholders

For input fields, the translation applies to the placeholder attribute:

<input type="text" data-i18n="form.emailPlaceholder" placeholder="Email...">

Button Values

For input buttons, the translation applies to the value attribute:

<input type="submit" data-i18n="common.submit" value="Submit">

Dynamic Content

For content created with JavaScript (like sensor cards), add data-i18n attributes to your template strings and call i18n.applyTranslations() after inserting into the DOM.

Example: Migrating an Existing Page

Before (French only):

<!DOCTYPE html>
<html>
<head>
  <title>Capteurs</title>
</head>
<body>
  <h1>Liste des capteurs</h1>
  <button onclick="getData()">Obtenir les données</button>
</body>
</html>

After (Multilingual):

<!DOCTYPE html>
<html>
<head>
  <title data-i18n="sensors.pageTitle">Capteurs</title>
  <script src="assets/js/i18n.js"></script>
</head>
<body>
  <h1 data-i18n="sensors.title">Liste des capteurs</h1>
  <button onclick="getData()" data-i18n="common.getData">Obtenir les données</button>
</body>
</html>

Add to lang/fr.json:

{
  "sensors": {
    "pageTitle": "Capteurs",
    "title": "Liste des capteurs"
  },
  "common": {
    "getData": "Obtenir les données"
  }
}

Add to lang/en.json:

{
  "sensors": {
    "pageTitle": "Sensors",
    "title": "Sensor List"
  },
  "common": {
    "getData": "Get Data"
  }
}

Backend Integration

Get Language Preference

const response = await fetch('launcher.php?type=get_language');
const data = await response.json();
console.log(data.language); // 'fr' or 'en'

Set Language Preference

const response = await fetch('launcher.php?type=set_language&language=en');
const data = await response.json();
console.log(data.success); // true

Language preference is stored in SQLite config_table with key language.

Completed Pages

✅ sensors.html - Fully translated with French/English support

TODO: Pages to Migrate

⏳ index.html
⏳ admin.html
⏳ wifi.html
⏳ saraR4.html
⏳ map.html

Tips

Reuse common translations: Put frequently used strings (buttons, actions, status messages) in the common section
Keep keys descriptive: Use sensors.bme280.title instead of s1 for maintainability
Test both languages: Always verify that both French and English translations display correctly
Fallback text: Always provide fallback text in HTML for graceful degradation

Support

For issues or questions about the i18n system, refer to the implementation in:

/html/assets/js/i18n.js - Core translation library
/html/lang/fr.json - French translations
/html/lang/en.json - English translations
/html/sensors.html - Example implementation