Rotere symboler for vindretning

Dette er kanskje et snevert tema for et blogginnlegg. Og det er nettopp derfor det passer så godt inn på denne bloggen!

vindpolse.jpg

API-et fra yr.no

Jeg har opp gjennom årene drevet med en hel del lokale nettsteder og prosjekter, blant annet Liernett, Sylling.no og Finnemarka.com.

Da jeg startet Sylling.no for over 14 år siden var ikke utfordringen på det tekniske plan: Jeg kom heller til kort når det gjaldt å skaffe til veie innhold på nettsidene.

Derfor var frislippet av værvarsler fra yr.no høsten 2007 en Guds gave til hobby-webmasteren

Plutselig var det mulig å få på plass dynamisk oppdatert og relevant innhold, helt kostnadsfritt.

Nå kan det legges til at gleden var kortvarig: Når alle har tilgang til de samme dataene skal det godt gjøres å lage noe som er unikt for nettopp ditt nettsted.

I løpet av kort tid var ikke det å ha et værvarsel på nettsidene sine noe man kunne skryte av ved kaffemaskinen (ja, jeg har vanket i slike miljøer).

Værsymboler

Et enkelt og grunnleggende værvarsel består selvfølgelig av informasjon som temperatur, nedbør, vindhastighet og vindretning.

Temperatur og nedbørsmengde kan enkelt presenteres som tekst (dvs. tall).

Og når det gjelder symboler for å illustrere sol, sol bak sky, snø blandet med hagl ved siden av sol gjemt bak sky, tordenvær, regn og alt det der, finnes det utallige ikonpakker på nettet som kan benyttes, i tillegg til en standard ikonpakke fra yr.no.

Men nylig skulle jeg illustrere vindretning i værvarselet jeg implementerte på en redesignet utgave av nettstedet dedikert til skogsområdet Finnemarka. Og her kommer vi til kjernen i dette blogginnlegget.

For ordens skyld: Jeg snakker her om helt enkle piler som viser retningen, ikke piler med forskjellige størrelser og forskjellige haler ut fra hvilken vindhastighet det er.

Jeg ville ha noen enkle symboler slik som dette:

vindpiler-eksempel.png

Rotering med 360 forskjellige bilder

En pil som viser vindretningen kan peke i alle retninger, dvs. 360°.

En relativt enkel, men tidkrevende løsning ville selvsagt å lage 360 symboler, én for hver grad (retningen angis med desimaler, så gradene må avrundes).

Dette burde for øvrig vært løst med CSS-sprites, slik at man hadde en matrise med alle 360 symboler i én bildefil som dette:

Symboler for vindretning med CSS-sprites

Jeg valgte å ikke gå for denne løsningen, da dette ikke ville være noen utfordring. Bare tidkrevende arbeid.

Rotering med CSS transform

Den løsningen jeg i utgangspunktet så for meg ville fungere best i praksis var «transform» i CSS:

transform:rotate(123deg);
-ms-transform:rotate(123deg);
-webkit-transform:rotate(123deg);

Jeg hadde allerede brukt en slik løsning på Finnemarka.com noen år, men det som skjedde var at enkelte nettlesere enten ikke roterte bildet i det hele tatt, eller at bildet ble veldig kornete og at det som skulle være rette linjer ble «hakkete» linjer etter roteringen.

Her er en slik pil rotert 123 grader, altså vind fra sydøst (peker pila rett ned fungerer dette altså ikke i din nettleser):

Bruk av SVG

Den løsningen jeg til slutt endte opp med var bruk av inline SVG.

Jeg skal ikke gå inn på hver enkelt detalj her, men jeg tegnet opp bildet med SVG-koding selv. Bildet består av en sirkel og tre streker. Deretter roteres disse tre strekene riktig antall grader, med dreiepunkt satt til senteret av bildet (selve koden for dette er «transform="rotate(123 12 12)"»).

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="24" height="24">
 <circle cx="12" cy="12" r="11" stroke="black" stroke-width="2" fill="#fff" />
 <g transform="rotate(123 12 12)">
  <line x1="12" y1="4" x2="12" y2="19" stroke="black" stroke-width="2" style="stroke-linecap: round;" />
  <line x1="6" y1="12" x2="12" y2="20" stroke="black" stroke-width="2" style="stroke-linecap: round;" />
  <line x1="18" y1="12" x2="12" y2="20" stroke="black" stroke-width="2" style="stroke-linecap: round;" />
 </g>
</svg>

Resultatet med rotert SVG er svært likt hva jeg oppnådde med CSS transform, men med forhåpentligvis bredere støtte.

Her er pila rotert 123 grader med SVG:

Poenget mitt falt bort ...

Når jeg nå skriver dette blogginnlegget ser jeg til min forbauselse at rotering med CSS transform faktisk ser bedre ut enn rotering med SVG i Chrome. Jeg får skylde på at det sannsynligvis har kommet en oppdatering i Chrome siden sist...

Så poenget mitt her falt liksom litt bort, og jeg burde kanskje bytte over til CSS transform. Uansett: Dette var tre forskjellige måter man kan oppnå det samme på.

Bloggen fra Sylling Hardcode