Iris — Weather Emoji ☀️🌧️❄️

Ένα πρωτότυπο σετ 45 εικονιδίων καιρού σε glossy / ελαφρύ 3D στυλ, με ζωηρά, σύγχρονα χρώματα. Κάθε εικονίδιο υπάρχει στατικό και κινούμενο, σε SVG, PNG και κινούμενο WebP, μαζί με έτοιμη αντιστοίχιση στους κωδικούς των πιο διαδεδομένων υπηρεσιών καιρού.

An original set of 45 glossy, vivid weather emoji: static & animated SVG, PNG, animated WebP, a tiny JS library with a <iris-weather> element, and ready-made mappings for WMO / Open-Meteo and OpenWeatherMap codes. MIT licensed.

Προεπισκόπηση όλων · Ζωντανή πρόγνωση

Περιεχόμενα

Φάκελος / αρχείο	Περιγραφή
svg/static/	Στατικά SVG (viewBox 128×128), κλιμακώνονται σε κάθε μέγεθος
svg/animated/	Κινούμενα SVG, με CSS μέσα στο αρχείο, χωρίς JavaScript
png/{32,64,128,256,512}/	PNG με διάφανο φόντο
webp/	Κινούμενα WebP 160 px, διάφανο φόντο, loop 4 s
dist/iris-weather-card.js	Κάρτα για Home Assistant
dist/iris.js	Βιβλιοθήκη JavaScript (ES module)
mappings/	Αντιστοίχιση κωδικών WMO / Open-Meteo, OpenWeatherMap και Home Assistant σε JSON
icons.json	Όλα τα εικονίδια με ελληνικά και αγγλικά ονόματα
index.html	Σελίδα προεπισκόπησης με αναζήτηση και λήψη αρχείων
demo.html	Ζωντανή πρόγνωση 7 ημερών για ελληνικές πόλεις
scripts/	Ο κώδικας που παράγει όλο το σετ

Εικονίδια

Μέρα / νύχτα: sunny clear-night full-moon partly-cloudy-day partly-cloudy-night mostly-cloudy-day mostly-cloudy-night cloudy overcast Βροχή: drizzle rain heavy-rain sun-shower night-rain freezing-rain umbrella-rain Καταιγίδες: thunderstorm thunderstorm-rain thunderstorm-night hail lightning Χιόνι: snow heavy-snow snow-day snow-night sleet snowflake Ατμόσφαιρα: fog fog-night haze dust smoke Άνεμος: wind windy tornado hurricane Λοιπά: rainbow sunrise sunset hot cold thermometer humidity droplet not-available

Χρήση

Απλή εικόνα

<img src="svg/animated/rain.svg" width="64" height="64" alt="Βροχή">

Τα κινούμενα SVG παίζουν αυτόματα μέσα σε <img> και σταματούν όταν ο χρήστης έχει ενεργοποιήσει τη «μείωση κίνησης» (prefers-reduced-motion).

Από CDN (χωρίς να κατεβάσεις τίποτα)

Μόλις το αποθετήριο ανέβει στο GitHub, το jsDelivr σερβίρει αυτόματα κάθε αρχείο:

<img src="https://cdn.jsdelivr.net/gh/stathisktm/iris-weather-emoji@main/svg/animated/rain.svg" width="64">

Το στοιχείο <iris-weather>

<script type="module" src="https://cdn.jsdelivr.net/gh/stathisktm/iris-weather-emoji@main/dist/iris.js"></script>

<iris-weather icon="rain"></iris-weather>                      <!-- με όνομα -->
<iris-weather wmo="95" day="false" size="96"></iris-weather>   <!-- κωδικός Open-Meteo, νύχτα -->
<iris-weather owm="10d" static></iris-weather>                 <!-- κωδικός OpenWeatherMap, στατικό -->

Η βιβλιοθήκη βρίσκει μόνη της από πού φορτώθηκε, οπότε τα εικονίδια έρχονται από το ίδιο σημείο.

Από JavaScript

import { fromWMO, fromOWM, describeWMO, iconUrl } from "./dist/iris.js";

fromWMO(61);                 // "rain"
fromWMO(0, false);           // "clear-night"
describeWMO(95);             // "Καταιγίδα"
fromOWM("10n");              // "night-rain"
fromOWM(781);                // "tornado"
iconUrl("snow", { animated: false });          // ".../svg/static/snow.svg"
iconUrl("snow", { format: "png", size: 256 }); // ".../png/256/snow.png"

Παράδειγμα με Open-Meteo (δωρεάν, χωρίς API key)

const r = await fetch("https://api.open-meteo.com/v1/forecast?latitude=37.98&longitude=23.73&current=weather_code,is_day");
const { current } = await r.json();
document.querySelector("#now").setAttribute("icon", fromWMO(current.weather_code, current.is_day === 1));

Ολοκληρωμένο παράδειγμα υπάρχει στο demo.html.

Άλλες γλώσσες

Οι πίνακες mappings/wmo.json και mappings/openweathermap.json είναι απλό JSON, οπότε χρησιμοποιούνται από Python, Kotlin, Swift ή οποιαδήποτε άλλη γλώσσα.

Home Assistant (κινούμενα)

1. Κάρτα iris-weather-card (η πιο εύκολη)

Ρυθμίσεις → Πίνακες ελέγχου → ⋮ → Πόροι → Προσθήκη πόρου

• URL: https://cdn.jsdelivr.net/gh/stathisktm/iris-weather-emoji@main/dist/iris-weather-card.js
• Τύπος: JavaScript module

Μετά πρόσθεσε κάρτα (χειροκίνητη / YAML):

type: custom:iris-weather-card
entity: weather.home
forecast: daily      # daily | hourly | twice_daily | none
days: 5
size: 96

Δείχνει κινούμενο εικονίδιο, θερμοκρασία, υγρασία, αέρα και πρόγνωση. Μέρα/νύχτα αλλάζει μόνο του από το sun.sun. Μπαίνει και από HACS → Custom repositories → stathisktm/iris-weather-emoji (Dashboard).

Χωρίς internet: αντέγραψε τους φακέλους svg/ και dist/ στο /config/www/iris-weather-emoji/ και βάλε πόρο /local/iris-weather-emoji/dist/iris-weather-card.js.

2. Σε οποιαδήποτε κάρτα, με template

Κάρτα Markdown:

type: markdown
content: >
  {% set m = {'sunny':['sunny','clear-night'],'clear-night':['clear-night','clear-night'],
  'partlycloudy':['partly-cloudy-day','partly-cloudy-night'],'cloudy':['cloudy','cloudy'],
  'rainy':['rain','night-rain'],'pouring':['heavy-rain','heavy-rain'],'snowy':['snow','snow-night'],
  'snowy-rainy':['sleet','sleet'],'fog':['fog','fog-night'],'hail':['hail','hail'],
  'lightning':['thunderstorm','thunderstorm-night'],'lightning-rainy':['thunderstorm-rain','thunderstorm-night'],
  'windy':['windy','windy'],'windy-variant':['wind','wind'],'exceptional':['hurricane','hurricane']} %}
  {% set i = m.get(states('weather.home'), ['not-available','not-available'])[0 if is_state('sun.sun','above_horizon') else 1] %}
  <img src="https://cdn.jsdelivr.net/gh/stathisktm/iris-weather-emoji@main/svg/animated/{{ i }}.svg" width="96">
  **{{ state_attr('weather.home','temperature') }}°**

Η ίδια αντιστοίχιση υπάρχει σε mappings/home-assistant.json. Με το ίδιο template μπορείς να φτιάξεις και template sensor με picture: για να βγαίνει το κινούμενο εικονίδιο σε tile / entities κάρτες.

Ανέβασμα στο GitHub

git init && git add . && git commit -m "Iris weather emoji v1.1.0"
git branch -M main
git remote add origin https://github.com/stathisktm/iris-weather-emoji.git
git push -u origin main

Μετά: Settings → Pages → Source: Deploy from a branch → main / (root). Σε λίγα λεπτά η προεπισκόπηση και η ζωντανή πρόγνωση θα είναι online. Άλλαξε το stathisktm σε αυτό το README με το δικό σου όνομα χρήστη.

Για να βγάλεις έκδοση: Releases → Draft a new release → tag v1.1.0. Έτσι μπορείς να «κλειδώσεις» μια έκδοση στο CDN (@v1.1.0 αντί για @main).

Το demo.html χρησιμοποιεί JavaScript modules, που δεν φορτώνουν όταν ανοίγεις το αρχείο απευθείας από τον δίσκο. Δοκίμασέ το μέσω GitHub Pages ή με python3 -m http.server στον φάκελο.

Αλλαγές & νέα εικονίδια

Όλο το σετ παράγεται από κώδικα, οπότε αλλάζεις χρώματα σε όλα τα εικονίδια με μία κίνηση:

pip install -r requirements.txt && playwright install chromium
sh build.sh

• Χρώματα: λεξικό DEFS στην αρχή του scripts/build.py
• Νέο εικονίδιο: μία γραμμή στη λίστα ICONS του ίδιου αρχείου
• Αντιστοιχίσεις κωδικών: scripts/mappings.py

Μόνο τα build.py, mappings.py και preview.py τρέχουν με σκέτη Python 3. Τα PNG και WebP χρειάζονται Playwright και Pillow.

Άδεια

Τα εικονίδια και ο κώδικας διατίθενται με άδεια MIT: ελεύθερη χρήση, και σε εμπορικά έργα. Τα δεδομένα στο demo.html προέρχονται από το Open-Meteo (CC BY 4.0).