Visa data på en ritning

Ibland har vi data som på något sätt hör ihop med en ritning av en byggnad, t.ex. ett lager eller en fabrik. Vi kan då använda ett kartobjekt som vi lägger exempelvis punkter över. I det här inlägget går vi igenom hur man sätter upp en kartlösning med en egen bakgrundsbild.

I vårt exempel ska vi titta på data från elmätare som sitter uppmonterade i en produktionsmiljö. Elmätaren skickar information om den momentana förbrukningen och vi ska visualisera var det under olika perioder används olika mycket el.

Bakgrundsbild
Vi ska visa förbrukningen genom att visa punkter på en karta över fabriken. På så sätt är det lätt att förstå vilken maskin som förbrukar mer el. Bakgrundsbilden som jag utgår från är denna.

Filen har en url som börjar med https://i.pinimg.com/ och för att vi ska kunna hämta bilden till Sense Cloud behöver vi godkänna adressen. Det här gör man inne i Management Console under Content Security Policy. Lägg till en ny rad med ”i.pinimg.com” som Origin och kryssa för ”img-src”.

Bilden har en storlek av 570 pixel bred och 390 pixel hög. Vi behöver skapa ett koordinatsystem som fungerar för bilden så att vi kan tilldela olika sensorer koordinater som ska visas på rätt plats. För att göra detta vill vi hålla oss mellan värden -50 och +50 i X- och Y-led.

Vi gör detta genom att titta på den sida som är längst, bredden 570 pixel, och räknar ut en faktor för att få 100: 100/570. Denna faktor applicerar vi sedan på den kortare sidan, höjden 390 pixel: 100/570*390 = 68 (lite avrundat). Välj gärna ett jämnt tal så blir det lite enklare.

Nu har vi istället en bild som kan uttryckas som 100*68. Nästa steg är att sätta origo för koordinatsystemet i mitten på bilden – mitten av 100 och mitten av 68. Det är härifrån vi kommer att utgå när vi ska beräkna koordinater.

Så om vi börjar med höjden 68 kan vi dela siffran i hälften. Längst upp i bilden är då 68/2 = +34 och längst ner i bilden är -34. På samma sätt är längst till vänster i bilden -50 och längst till höger i bilden +50. Dessa siffror behöver vi när vi lägger in ett bakgrundslager i vår karta.

Uppsättning av kartobjekt
Dra ut ett nytt kartobjekt till ett ark och gör följande inställningar:

  • Map Settings – Base map: None (den vita)
  • Map Settings – Projection: User defined (degrees)
  • Appearance – Legend – Show legend: off
  • Appearance – Presentation – Scale bar: off

Gå sedan till Layers och lägg till ett nytt bakgrundslager. Ändra följande inställningar:

Nu borde bilden synas i kartobjektet även om du kan behöva dra runt det (när du inte är i Edit-läge) för att den ska hamna i mitten på objektet.

Centrera objektet
Man kan centrera objektet på lite olika sätt och min metod går ut på att lägga en osynlig linje i över- och underkant på bilden. Linjerna kommer att centreras i kartobjektet med automatik och då får man även bilden rätt.

Vi börjar med den övre linjen som är röd i exempelbilden ovan. Den börjar i övre vänstra hörnet (-50,34) och slutar i övre högra hörnet (50,34).

Lägg till ett nytt lager i kartan och välj typen linje. Ange följande värden:

  • Data – Dimension: =1 (skriv likamed-tecken och sedan 1)
  • Data – Dimension Label: Övre linje (här får lagret sitt namn)
  • Location – Start Point – Latitude and longitude fields: Markera
  • Location – Start Point – Latitude: 34
  • Location – Start Point – Longitude: -50
  • Location – End Point – Latitude and longitude fields: Markera
  • Location – End Point – Latitude: 34
  • Location – End Point – Longitude: -50

Nu ska en linje synas i överkanten i din bakgrundsbild, men bilden är ännu inte centrerad. Linjen kommer vi senare sätta som transparent så att den finns där och styr bilden, men den kommer inte att synas.

Lägg nu till ett nytt linjelager för den undre linjen. Ge den motsvarande inställning som ovan fast den ska förstås ligga i underkant. Vad blir skillnaden? Vi ska ändra linjen i y-led, dvs latitude-vädet.

  • Location – Start Point – Latitude: -34
  • Location – Start Point – Longitude: -50
  • Location – End Point – Latitude: -34
  • Location – End Point – Longitude: 50

Med den undre linjen på plats ska bakgrundsbilden ha blivit centrerad. Vi kan nu gå in och dölja linjerna genom att sätta den som transparenta. Gå till Colors och dra slidern för Opacity hela vägen till vänster. Gör detta för båda linjerna.

Placera ut sensorer
Nu är det dags att placera ut sensorernas position. Eftersom vi har skapat ett eget koordinatsystem så behöver vi placera in sensorerna i dessa.

Låt säga att vi vill sätta ut en sensor på kartan nedan. Vi behöver då hitta longitude/latitude-värdeparet för den positionen.

Vi kan se att rutan ligger i den övre vänstra kvadranten – det vill säga positivt latitude (övre), men negativt longitude (vänster). Vi kan testa att sätta ut en punkt och justera in den. Skapa ett punktlager och ange ”=1” som dimension. Ändra Location till Latitude and Longitude och ange Latitude = 10 och Longitude = -30.

Vi hamnade nära, men inte riktigt centrerat på platsen vi vill. Genom att justera longitude- och latitude-värdena kan vi få punkten dit vi vill. Latitude = 11 och Longitude = -27. Det går också bra att skriva värden som decimaler om man vill vara noggrann. Använd punkt som decimaltecken i så fall.

De slutgiltiga värdena för sensorn kan nu läggas i någon form av datakälla kopplad till sensorn, t.ex. en databas, en Excel-fil eller direkt som en inline-tabell. Fortsätt sedan med övriga sensorer för att hitta rätt positioner.

Visa sensorer
När alla sensorers koordinater hittats och kopplats in i data kan vi skapa ett punktlager och välja Sensor som dimension. Välj sedan de två latitude- och longitude-fälten från datat som koordinater. Färglägg sedan punkterna efter ett mått – t.ex. elförbrukning.

Om bakgrundsritningen drar uppmärksamheten till sig på grund av hög kontrast så kan det vara en god idé att göra lagret lite transparent. Detta kan du göra under Options på bakgrundslagret.

Nu fungerar ritningen som en karta. Sensorerna som visas beror på vilka sensorer som finns i urvalet. Färgerna på punkterna följer med urvalet t.ex. på tidsperiod. Användaren kan också klicka en gång i bakgrunden och sedan använda lassoverktyget för att välja de punkter man vill.

Dela inlägget
LinkedIn