Publisert i bloggen, mandag 7. juli 2014:

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!

Vindpølse

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

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å.

Relatert innhold

Scalable Vector Graphics
Værdata fra yr.no

Bloggen

Paid and organic last click
Are og Ida på date
Kunstig intelligens
Vekst- prosjektet
Da Outlook stjal ikonet mitt
Sen eller tidlig påske?
Koordinater i SVG
Påstand: Corner er mål
Vestfold-Rogaland kalkulator
Twitter og VM på ski
My New Year's Resolutions
Et bilde sier mer enn tusen ord
Rogaland blir nye Vestfold
På størrelse med Vestfold
Datoformat i Excel og Google Analytics
what3words Hvilke tre ord?
Covfefe will make America great again
Om domenenavn og firmanavn
Fotballfrue: Jeg tar innpå deg
Sakte-TV: Se gresset gro
Sakte-TV: Se maling tørke
Første generasjon iPapp har kommet
Jukselapp fotografering
Det sorte hullet cookies disabled
Høysesong for kjipe annonser
Om analsex og popups
Rotasjon av vindsymboler
Hvor mye er Fotballfrue verdt?
Slik tar du et screenshot
Nyttige husketrekanter
Enklere utregning med kryssmultiplisering
Min egen lille adventskalender
Logge antall likes på Facebook
Hva er sitemap.xml?
Hva er robots.txt?
Responsivt design
Webscraping med PHP
Jeg sammenligner epler og pærer
Scalable Vector Graphics
Google Analytics API: Hente data
Google Analytics API: Muligheter
HTML5: Video
Big Data
Cookies: Hvordan det brukes
Cookies: Hva er det?
Excel i to vinduer
CRM-systemet «Kontor»
Gigantisk timelapse
Hva er jQuery?
Overvåke ReadyNAS DUO med PHP
Favicon - ikonet i adressefeltet
Animert heading på hardcode.no
CSS -sprites
Komprimere PNG-bilder
Redesign av hardcode.no
Klikkbar flash uten clickTAG
Relevans har stor verdi
Alle har wide- screen i 2013
Markedsandeler nettlesere 2010
Internet Explorer-vindu i feil størrelse
Hvor stor er en piksel?
Markedsføring og kundelojalitet
Flash-versjoner
Vestre Sylling og Øverskogen JFF
Sidevisninger, besøk og brukere
Widescreen kommer
Hvor brede bør sidene være?
Fortsatt lese hele saken?
Lese hele saken nå?
Første møte med AdWords
Bort med IE6
Utviklingen på nettleserfronten
Nyttige jukselapper
Nye Sylling.no
Klær med egen logo?
Værdata fra yr.no
Logodesign trender i 2008
Gmail grimaser
Google Analytics
Publiseringssystemet Outpost
Hardcode.no relanseres
Publiserings -systemet