Gå til innhold
  • Bli medlem

GUIDE: Tibber-widget for iOS!


Anbefalte innlegg

Mange har savnet at det ikke finnes en iOS-widget til Tibber-appen.

Men, Tibber har jo et fantastisk API, så da kan man jo lage det selv! ;)

 

Her er fremgangsmåten:

1. Last ned appen "Scriptable": https://apps.apple.com/no/app/scriptable/id1405459188

2. Start appen, trykk på "+" oppe i høyre hjørne

3. Trykk på teksten "Untitled Scripts" helt øverst og bytt navn til "TibberSmall"/"TibberMedium"/"TibberLarge" (avhengig av hvilken størrelse widget du skal ha).

4.

a) For liten widget, lim inn denne teksten i TibberSmall:

Spoiler
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: cyan; icon-glyph: bolt;
// Tibber-widget
// v1.0.0 - første versjon - Sven-Ove Bjerkan
// v1.0.1 - Lagt til "HOME_NR" som innstilling
// v1.5.0 - Laget medium- og large-størrelse widget (foreløpig som 3 separate script)

// Finn din token ved å logge på med Tibber-kontoen din her:
// https://developer.tibber.com/settings/accesstoken
// OBS! Din token er privat, ikke del den med noen!
const TIBBERTOKEN = "476c477d8a039529478ebd690d35ddd80e3308ffc49b59c65b142321aee963a4";

// I de fleste tilfeller skal HOME_NR være 0, men om man har flere abonnement (hus+hytte f.eks)
// så kan det være at man må endre den til 1 (eller 2). 
// Prøv 0 først og om det kommer feilmelding, prøv med 1 (og deretter 2).
const HOME_NR = 0;

// HTML-koden for bakgrunnsfarge på widget (#000000 er svart)
const BAKGRUNNSFARGE = "#000000";

// HTML-koden for tekstfarge (#FFFFFF er hvit)
const TEKSTFARGE = "#FFFFFF";

// Når prisen denne timen er høyere enn snittprisen i dag, så brukes denne tekstfargen (rød)
const TEXTFARGE_HOY = "#de4035";

// Når prisen denne timen er lavere enn snittprisen i dag, så brukes denne tekstfargen (grønn)
const TEXTFARGE_LAV = "#35de3b";




// DU TRENGER IKKE ENDRE NOE LENGRE NED !
// --------------------------------------

// GraphQL-spørring
let body = {
  "query": "{ \
    viewer { \
      homes { \
        currentSubscription { \
          priceInfo { \
            current { \
              total \
            } \
            today { \
              total \
            } \
          } \
        } \
        consumption (resolution: HOURLY, last: " + new Date().getHours() + ") { \
          pageInfo { \
            totalConsumption \
            totalCost \
          } \
        } \
      } \
    } \
  }"
}

let req = new Request("https://api.tibber.com/v1-beta/gql")
req.headers = {
  "Authorization": "Bearer " + TIBBERTOKEN,
  "Content-Type": "application/json"
}
req.body = JSON.stringify(body)
req.method = "POST";
let json = await req.loadJSON()

// Array med alle dagens timepriser
let allToday = json["data"]["viewer"]["homes"][HOME_NR]["currentSubscription"]["priceInfo"]["today"]

// Loop igjennom alle dagens timepriser for å finne min/max/snitt
let minPrice = 100000
let maxPrice = 0
let avgPrice = 0
for (var i = 0; i < allToday.length; i++) {
  if (allToday[i].total * 100 < minPrice)
    minPrice = Math.round(allToday[i].total * 100)
  if (allToday[i].total * 100 > maxPrice)
    maxPrice = Math.round(allToday[i].total * 100)
  avgPrice += allToday[i].total
}
avgPrice = avgPrice / allToday.length * 100

// Hent ut totalt forbruk/kostnad hittil i dag
let totCost = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["consumption"]["pageInfo"]["totalCost"])
let totForbruk = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["consumption"]["pageInfo"]["totalConsumption"])

// Hent ut pris i kroner for inneværende time
let price = (json["data"]["viewer"]["homes"][HOME_NR]["currentSubscription"]["priceInfo"]["current"]["total"]);

// Omregn til øre
let priceOre = Math.round(price * 100)

// Hent Tibber-logoen
const TIBBERLOGO = await new Request("https://tibber.imgix.net/zq85bj8o2ot3/6FJ8FvW8CrwUdUu2Uqt2Ns/3cc8696405a42cb33b633d2399969f53/tibber_logo_blue_w1000.png").loadImage()


// Opprett widget
async function createWidget() {
  // Create new empty ListWidget instance
  let lw = new ListWidget();

  // Set new background color
  lw.backgroundColor = new Color(BAKGRUNNSFARGE);

  // Man kan ikke styre når widget henter ny pris
  // men, prøver her å be widget oppdatere seg etter 1 min over neste time
  var d = new Date();
  d.setHours(d.getHours() + 1);
  d.setMinutes(1);
  lw.refreshAfterDate = d;

  // Legg til Tibber-logo i en egen stack
  let stack = lw.addStack()
  stack.addSpacer(12)
  let imgstack = stack.addImage(TIBBERLOGO)
  imgstack.imageSize = new Size(100, 30)
  imgstack.centerAlignImage()
  stack.setPadding(0, 0, 25, 0)

  let stack2 = lw.addStack()

  // Venstre kolonne
  let stackV = stack2.addStack();
  stackV.layoutVertically()
  stackV.centerAlignContent()
  stackV.setPadding(0, 10, 0, 0)

  // Legg til inneværende pris i v.kolonne
  let price = stackV.addText(priceOre + "");
  price.centerAlignText();
  price.font = Font.lightSystemFont(20);
  // Pris høyere eller lavere enn snitt avgjør farge
  if (priceOre < avgPrice)
    price.textColor = new Color(TEXTFARGE_LAV)
  if (priceOre > avgPrice)
    price.textColor = new Color(TEXTFARGE_HOY)

  const priceTxt = stackV.addText("øre/kWh");
  priceTxt.centerAlignText();
  priceTxt.font = Font.lightSystemFont(10);
  priceTxt.textColor = new Color(TEKSTFARGE);

  // Legg til dagens "max | min"-timespris
  let maxmin = stackV.addText(minPrice + " | " + maxPrice)
  maxmin.centerAlignText()
  maxmin.font = Font.lightSystemFont(10);
  maxmin.textColor = new Color(TEKSTFARGE);

  // Avstand mellom kolonnene
  stack2.addSpacer(20)

  // Høyre kolonne
  let stackH = stack2.addStack();
  stackH.layoutVertically()

  // Legg til forbruk hittil i dag i h.kolonne
  let forbruk = stackH.addText(totCost + " kr");
  forbruk.rightAlignText();
  forbruk.font = Font.lightSystemFont(16);
  forbruk.textColor = new Color(TEKSTFARGE);

  let forbruk2 = stackH.addText(totForbruk + " kWh");
  forbruk2.rightAlignText();
  forbruk2.font = Font.lightSystemFont(14);
  forbruk2.textColor = new Color(TEKSTFARGE);

  let forbrukTxt = stackH.addText("Hittil i dag");
  forbrukTxt.rightAlignText();
  forbrukTxt.font = Font.lightSystemFont(10);
  forbrukTxt.textColor = new Color(TEKSTFARGE);

  // Avstand ned til bunntekst
  lw.addSpacer(30)

  // Legg til info om når widget sist hentet prisen
  d = new Date()
  let hour = d.getHours();

  // Omgjør til formatet HH:mm
  if (hour < 10) hour = "0" + hour;
  let min = d.getMinutes();
  if (min < 10) min = "0" + min;

  let time = lw.addText("Oppdatert: " + hour + ":" + min);
  time.centerAlignText();
  time.font = Font.lightSystemFont(8);
  time.textColor = new Color(TEKSTFARGE);

  // Return the created widget
  return lw;
}

let widget = await createWidget();

// Check where the script is running
if (config.runsInWidget) {
  // Runs inside a widget so add it to the homescreen widget
  Script.setWidget(widget);
} else {
  // Show the medium widget inside the app
  widget.presentSmall();
}
Script.complete();

 

IMG_1589.jpg.3e56b8234a92f7cb0559692d40eea6c4.jpg

 

b) For medium widget, lim inn denne teksten i TibberMedium:

Spoiler
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: cyan; icon-glyph: bolt;
// Tibber-widget
// v1.0.0 - første versjon - Sven-Ove Bjerkan
// v1.0.1 - Lagt til "HOME_NR" som innstilling
// v1.5.0 - Laget medium- og large-størrelse widget (foreløpig som 3 separate script)

// Finn din token ved å logge på med Tibber-kontoen din her:
// https://developer.tibber.com/settings/accesstoken
// OBS! Din token er privat, ikke del den med noen!
const TIBBERTOKEN = "476c477d8a039529478ebd690d35ddd80e3308ffc49b59c65b142321aee963a4";
// I de fleste tilfeller skal HOME_NR være 0, men om man har flere abonnement (hus+hytte f.eks)
// så kan det være at man må endre den til 1 (eller 2).
// Prøv 0 først og om det kommer feilmelding, prøv med 1 (og deretter 2).
const HOME_NR = 0;

// HTML-koden for bakgrunnsfarge på widget (#000000 er svart)
const BAKGRUNNSFARGE = "#000000";

// HTML-koden for tekstfarge (#FFFFFF er hvit)
const TEKSTFARGE = "#FFFFFF";

// Når prisen denne timen er høyere enn snittprisen i dag, så brukes denne tekstfargen (rød)
const TEXTFARGE_HOY = "#de4035";

// Når prisen denne timen er lavere enn snittprisen i dag, så brukes denne tekstfargen (grønn)
const TEXTFARGE_LAV = "#35de3b";




// DU TRENGER IKKE ENDRE NOE LENGRE NED !
// --------------------------------------

// GraphQL-spørring
let body = {
  "query": "{ \
    viewer { \
      homes { \
        currentSubscription { \
          priceInfo { \
            current { \
              total \
            } \
            today { \
              total \
            } \
          } \
        } \
        dayConsumption: consumption (resolution: HOURLY, last: " + new Date().getHours() + ") { \
          pageInfo { \
            totalConsumption \
            totalCost \
          } \
        } \
        monthConsumption: consumption (resolution: DAILY, last: " + (new Date().getDate()-1) + ") { \
	      pageInfo { \
		    totalConsumption \
		    totalCost \
	      } \
        } \
      } \
    } \
  }"
}

let req = new Request("https://api.tibber.com/v1-beta/gql")
req.headers = {
  "Authorization": "Bearer " + TIBBERTOKEN,
  "Content-Type": "application/json"
}
req.body = JSON.stringify(body)
req.method = "POST";
let json = await req.loadJSON()

// Array med alle dagens timepriser
let allToday = json["data"]["viewer"]["homes"][HOME_NR]["currentSubscription"]["priceInfo"]["today"]

// Loop igjennom alle dagens timepriser for å finne min/max/snitt
let minPrice = 100000
let maxPrice = 0
let avgPrice = 0
for (var i = 0; i < allToday.length; i++) {
  if (allToday[i].total * 100 < minPrice)
    minPrice = Math.round(allToday[i].total * 100)
  if (allToday[i].total * 100 > maxPrice)
    maxPrice = Math.round(allToday[i].total * 100)
  avgPrice += allToday[i].total
}
avgPrice = avgPrice / (allToday.length-1) * 100

// Hent ut totalt forbruk/kostnad hittil i dag
let totCostD = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["dayConsumption"]["pageInfo"]["totalCost"])
let totForbrukD = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["dayConsumption"]["pageInfo"]["totalConsumption"])

// Hent ut totalt forbruk/kostnad hittil denne mnd
let totCostM = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["monthConsumption"]["pageInfo"]["totalCost"]) + totCostD
let totForbrukM = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["monthConsumption"]["pageInfo"]["totalConsumption"]) + totForbrukD

// Hent ut pris i kroner for inneværende time
let price = (json["data"]["viewer"]["homes"][HOME_NR]["currentSubscription"]["priceInfo"]["current"]["total"]);

// Omregn til øre
let priceOre = Math.round(price * 100)

// Hent Tibber-logoen
const TIBBERLOGO = await new Request("https://tibber.imgix.net/zq85bj8o2ot3/6FJ8FvW8CrwUdUu2Uqt2Ns/3cc8696405a42cb33b633d2399969f53/tibber_logo_blue_w1000.png").loadImage()


// Opprett widget
async function createWidget() {
  // Create new empty ListWidget instance
  let lw = new ListWidget();

  // Set new background color
  lw.backgroundColor = new Color(BAKGRUNNSFARGE);

  // Man kan ikke styre når widget henter ny pris
  // men, prøver her å be widget oppdatere seg etter 1 min over neste time
  var d = new Date();
  d.setHours(d.getHours() + 1);
  d.setMinutes(1);
  lw.refreshAfterDate = d;

  // Legg til Tibber-logo i en egen stack
  let stack = lw.addStack()
  stack.addSpacer(100)
  let imgstack = stack.addImage(TIBBERLOGO)
  imgstack.imageSize = new Size(100, 30)
  imgstack.centerAlignImage()
  stack.setPadding(0, 0, 15, 0)

  let stack2 = lw.addStack()

  // Venstre kolonne
  let stackV = stack2.addStack();
  stackV.layoutVertically()
  stackV.centerAlignContent()
  stackV.setPadding(0, 30, 0, 0)

  // Legg til inneværende pris i v.kolonne
  let price = stackV.addText(priceOre + "");
  price.centerAlignText();
  price.font = Font.lightSystemFont(20);
  // Pris høyere eller lavere enn snitt avgjør farge
  if (priceOre < avgPrice)
    price.textColor = new Color(TEXTFARGE_LAV)
  if (priceOre > avgPrice)
    price.textColor = new Color(TEXTFARGE_HOY)

  const priceTxt = stackV.addText("øre/kWh");
  priceTxt.centerAlignText();
  priceTxt.font = Font.lightSystemFont(10);
  priceTxt.textColor = new Color(TEKSTFARGE);

  // Legg til dagens "max | min"-timespris
  let maxmin = stackV.addText(minPrice + " | " + maxPrice)
  maxmin.centerAlignText()
  maxmin.font = Font.lightSystemFont(10);
  maxmin.textColor = new Color(TEKSTFARGE);

  // Avstand mellom kolonnene
  stack2.addSpacer(40)

  // Midtre kolonne
  let stackM = stack2.addStack();
  stackM.layoutVertically()

  // Legg til forbruk hittil i dag i m.kolonne
  let forbruk = stackM.addText(totCostD + " kr");
  forbruk.rightAlignText();
  forbruk.font = Font.lightSystemFont(16);
  forbruk.textColor = new Color(TEKSTFARGE);

  let forbruk2 = stackM.addText(totForbrukD + " kWh");
  forbruk2.rightAlignText();
  forbruk2.font = Font.lightSystemFont(14);
  forbruk2.textColor = new Color(TEKSTFARGE);

  let forbrukTxt = stackM.addText("Hittil i dag");
  forbrukTxt.rightAlignText();
  forbrukTxt.font = Font.lightSystemFont(10);
  forbrukTxt.textColor = new Color(TEKSTFARGE);

  // Avstand mellom kolonnene
  stack2.addSpacer(40)

  // Høyre kolonne
  let stackH = stack2.addStack();
  stackH.layoutVertically()

  // Legg til forbruk hittil denne mnd i h.kolonne
  forbruk = stackH.addText(totCostM + " kr");
  forbruk.rightAlignText();
  forbruk.font = Font.lightSystemFont(16);
  forbruk.textColor = new Color(TEKSTFARGE);

  forbruk2 = stackH.addText(totForbrukM + " kWh");
  forbruk2.rightAlignText();
  forbruk2.font = Font.lightSystemFont(14);
  forbruk2.textColor = new Color(TEKSTFARGE);

  forbrukTxt = stackH.addText("Hittil denne mnd");
  forbrukTxt.rightAlignText();
  forbrukTxt.font = Font.lightSystemFont(10);
  forbrukTxt.textColor = new Color(TEKSTFARGE);


  // Avstand ned til bunntekst
  lw.addSpacer(30)

  // Legg til info om når widget sist hentet prisen
  d = new Date()
  let hour = d.getHours();

  // Omgjør til formatet HH:mm
  if (hour < 10) hour = "0" + hour;
  let min = d.getMinutes();
  if (min < 10) min = "0" + min;

  let time = lw.addText("Oppdatert: " + hour + ":" + min);
  time.centerAlignText();
  time.font = Font.lightSystemFont(8);
  time.textColor = new Color(TEKSTFARGE);

  // Return the created widget
  return lw;
}

let widget = await createWidget();

// Check where the script is running
if (config.runsInWidget) {
  // Runs inside a widget so add it to the homescreen widget
  Script.setWidget(widget);
} else {
  // Show the medium widget inside the app
  widget.presentMedium();
}
Script.complete();

 

tibbermedium.jpeg.6f75a866b13e6840645de2292c8e83d9.jpeg

 

c) For stor widget, lim inn denne teksten i TibberLarge:

Spoiler
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: cyan; icon-glyph: bolt;
// Tibber-widget
// v1.0.0 - første versjon - Sven-Ove Bjerkan
// v1.0.1 - Lagt til "HOME_NR" som innstilling
// v1.5.0 - Laget medium- og large-størrelse widget (foreløpig som 3 separate script)
// v2.0.0 - Viser 3 timer bakover og inntil 21 timer fremover (konfigurerbart)
// v2.0.1 - Mulighet for å legge til nettleie
// v2.0.2 - småfiks på fontfarger, o.l

// Finn din token ved å logge på med Tibber-kontoen din her:
// https://developer.tibber.com/settings/accesstoken
// OBS! Din token er privat, ikke del den med noen!
const TIBBERTOKEN = "476c477d8a039529478ebd690d35ddd80e3308ffc49b59c65b142321aee963a4";
// I de fleste tilfeller skal HOME_NR være 0, men om man har flere abonnement (hus+hytte f.eks)
// så kan det være at man må endre den til 1 (eller 2).
// Prøv 0 først og om det kommer feilmelding, prøv med 1 (og deretter 2).
const HOME_NR = 0;

// HTML-koden for bakgrunnsfarge på widget (#000000 er svart)
const BAKGRUNNSFARGE = "#000000";

// HTML-koden for tekstfarge (#FFFFFF er hvit)
const TEKSTFARGE = "#FFFFFF";

// Når prisen denne timen er høyere enn snittprisen i dag, så brukes denne tekstfargen (rød)
const TEXTFARGE_HOY = "#de4035";

// Når prisen denne timen er lavere enn snittprisen i dag, så brukes denne tekstfargen (grønn)
const TEXTFARGE_LAV = "#35de3b";

// Angi hvor mange timer bakover og fremover fra inneværende time den skal bruke
const TIMER_BAKOVER = 3;
const TIMER_FREMOVER = 21;

// Skal nettleie legges til i beløpene?
const NETTLEIE = true; // (true eller false)
const NETT_FAST = 198; // I kroner pr mnd
const NETT_KWH = 35.51; // I øre pr kWh, med punktum som desimaltegn


// Angi størrelsen på grafen
const GRAPH_WIDTH = 2400;
const GRAPH_HEIGHT = 1200;





// DU TRENGER IKKE ENDRE NOE LENGRE NED !
// --------------------------------------

// GraphQL-spørring
let body = {
  "query": "{ \
    viewer { \
      homes { \
        currentSubscription { \
          priceRating { \
            hourly { \
              entries { \
                total \
                time \
              } \
            } \
          } \
        } \
        dayConsumption: consumption (resolution: HOURLY, last: " + new Date().getHours() + ") { \
          pageInfo { \
            totalConsumption \
            totalCost \
          } \
        } \
        monthConsumption: consumption (resolution: DAILY, last: " + (new Date().getDate()-1) + ") { \
	      pageInfo { \
		    totalConsumption \
		    totalCost \
	      } \
        } \
      } \
    } \
  }"
}

let req = new Request("https://api.tibber.com/v1-beta/gql")
req.headers = {
  "Authorization": "Bearer " + TIBBERTOKEN,
  "Content-Type": "application/json"
}
req.body = JSON.stringify(body)
req.method = "POST";
let json = await req.loadJSON()

// Array med alle timepriser
let allPrices = json["data"]["viewer"]["homes"][HOME_NR]["currentSubscription"]["priceRating"]["hourly"]["entries"]

// Date-objekt for akkurat denne timen
let d = new Date();
d.setMinutes(0)
d.setSeconds(0)
d.setMilliseconds(0)//

// Loop for å finne array-key for inneværende time
let iNow, iStart, iEnd, dLoop
for (let i = 0; i < allPrices.length; i++) {
 dLoop = new Date(allPrices[i].time)
 if (d.getTime() == dLoop.getTime()) {
   iNow = i
   iStart = (iNow-TIMER_BAKOVER)
   iEnd = (iNow + TIMER_FREMOVER)
   if (iEnd > allPrices.length) {
	   iEnd = (allPrices.length-1)
   }
   break;
  }
}

// Loop for å finne snittpris
let avgPrice = 0
let minPrice = 100000
let maxPrice = 0
let prices = [];
let colors = [];
let pointsize = [];
for (let i = iStart; i <= iEnd; i++) {
  if (NETTLEIE) {
    allPrices[i].total = allPrices[i].total+(NETT_KWH/100);
  }
  avgPrice += allPrices[i].total
  prices.push(allPrices[i].total * 100);

  if (allPrices[i].total * 100 < minPrice)
    minPrice = Math.round(allPrices[i].total * 100)
   if (allPrices[i].total * 100 > maxPrice)
     maxPrice = Math.round(allPrices[i].total * 100)

  if (i == iNow) {
  	colors.push("'yellow'");
    pointsize.push(20);
  }
  else {
    colors.push("'cyan'");
    pointsize.push(7);
  }
}
avgPrice = Math.round(avgPrice / (prices.length) * 100)

// Loop for å lage strek for snittprisen
let dTemp
let avgPrices = []
let labels = []
for (let i = iStart; i <= iEnd; i++) {
  avgPrices.push(avgPrice);
  dTemp = new Date(allPrices[i].time)
  let hours = dTemp.getHours();
  if (hours < 10)
    hours = "0"+hours;
  labels.push("'" + hours + "'");
}

let url = "https://quickchart.io/chart?w="+ GRAPH_WIDTH + "&h=" + GRAPH_HEIGHT + "&devicePixelRatio=1.0&c="
url += encodeURI("{ \
   type:'line', \
   data:{ \
      labels:[ \
         " + labels + " \
      ], \
      datasets:[ \
         { \
            label:'Øre pr kWh', \
            data:[ \
               " + prices + " \
            ], \
            fill:false, \
            borderColor:'cyan', \
            borderWidth: 7, \
            pointBackgroundColor:[ \
               " + colors + " \
            ], \
            pointRadius:[ \
               " + pointsize + " \
            ] \
         }, \
         { \
            label:'Snitt (" + avgPrice + " øre)', \
            data:[ \
               " + avgPrices + " \
            ], \
            fill:false, \
            borderColor:'red', \
            borderWidth: 7, \
            pointRadius: 0 \
         } \
      ] \
   }, \
   options:{ \
      legend:{ \
         labels:{ \
            fontSize:90, \
            fontColor:'white' \
         } \
      }, \
      scales:{ \
         yAxes:[ \
            { \
               ticks:{ \
                  beginAtZero:false, \
                  fontSize:100, \
                  fontColor:'white' \
               } \
            } \
         ], \
         xAxes:[ \
            { \
               ticks:{ \
                  fontSize:60, \
                  fontColor:'white' \
               } \
            } \
         ] \
      } \
   } \
}")

const GRAPH = await new Request(url).loadImage()


// Hent ut totalt forbruk/kostnad hittil i dag
let totCostD = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["dayConsumption"]["pageInfo"]["totalCost"])
let totForbrukD = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["dayConsumption"]["pageInfo"]["totalConsumption"])
// Hent ut totalt forbruk/kostnad hittil denne mnd
let totCostM = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["monthConsumption"]["pageInfo"]["totalCost"]) + totCostD
let totForbrukM = Math.round(json["data"]["viewer"]["homes"][HOME_NR]["monthConsumption"]["pageInfo"]["totalConsumption"]) + totForbrukD

// Legg til nettleie i dagssummen?
if (NETTLEIE) {
	totCostD += NETT_FAST/new Date(d.getYear(), d.getMonth()+1, 0).getDate();
	totCostD += totForbrukD*(NETT_KWH/100);
	totCostD = Math.round(totCostD);
}

// Legg til nettleie i månedssummen?
if (NETTLEIE) {
	totCostM += NETT_FAST;
	totCostM += totForbrukM*(NETT_KWH/100);
	totCostM = Math.round(totCostM);
}

// Hent ut pris i øre for inneværende time
let priceOre = Math.round(allPrices[iNow].total * 100)

// Hent Tibber-logoen
const TIBBERLOGO = await new Request("https://tibber.imgix.net/zq85bj8o2ot3/6FJ8FvW8CrwUdUu2Uqt2Ns/3cc8696405a42cb33b633d2399969f53/tibber_logo_blue_w1000.png").loadImage()


// Opprett widget
async function createWidget() {
  // Create new empty ListWidget instance
  let lw = new ListWidget();

  // Set new background color
  lw.backgroundColor = new Color(BAKGRUNNSFARGE);

  // Man kan ikke styre når widget henter ny pris
  // men, prøver her å be widget oppdatere seg etter 1 min over neste time
  var d = new Date();
  d.setHours(d.getHours() + 1);
  d.setMinutes(1);
  lw.refreshAfterDate = d;

  // Legg til Tibber-logo i en egen stack
  let stack = lw.addStack()
  stack.addSpacer(100)
  let imgstack = stack.addImage(TIBBERLOGO)
  imgstack.imageSize = new Size(100, 30)
  imgstack.centerAlignImage()
  stack.setPadding(0, 0, 5, 0)

  if (NETTLEIE) {
    let txtStack = lw.addStack();
    txtStack.addSpacer(100);
    let txtNett = txtStack.addText("Alle beløp inkl nettleie");
    txtNett.centerAlignText();
    txtNett.font = Font.lightSystemFont(10);
  }

  lw.addSpacer(10);

  let stack2 = lw.addStack()

  // Venstre kolonne
  let stackV = stack2.addStack();
  stackV.layoutVertically()
  stackV.centerAlignContent()
  stackV.setPadding(0, 30, 0, 0)

  // Legg til inneværende pris i v.kolonne
  let price = stackV.addText(priceOre + "");
  price.centerAlignText();
  price.font = Font.lightSystemFont(20);
  // Pris høyere eller lavere enn snitt avgjør farge
  if (priceOre < avgPrice)
    price.textColor = new Color(TEXTFARGE_LAV)
  else if (priceOre > avgPrice)
    price.textColor = new Color(TEXTFARGE_HOY)

  const priceTxt = stackV.addText("øre/kWh");
  priceTxt.centerAlignText();
  priceTxt.font = Font.lightSystemFont(10);
  priceTxt.textColor = new Color(TEKSTFARGE);

  // Legg til dagens "max | min"-timespris
  let maxmin = stackV.addText(minPrice + " | " + maxPrice)
  maxmin.centerAlignText()
  maxmin.font = Font.lightSystemFont(10);
  maxmin.textColor = new Color(TEKSTFARGE);

  // Avstand mellom kolonnene
  stack2.addSpacer(40)

  // Midtre kolonne
  let stackM = stack2.addStack();
  stackM.layoutVertically()

  // Legg til forbruk hittil i dag i m.kolonne
  let forbruk = stackM.addText(totCostD + " kr");
  forbruk.rightAlignText();
  forbruk.font = Font.lightSystemFont(16);
  forbruk.textColor = new Color(TEKSTFARGE);

  let forbruk2 = stackM.addText(totForbrukD + " kWh");
  forbruk2.rightAlignText();
  forbruk2.font = Font.lightSystemFont(14);
  forbruk2.textColor = new Color(TEKSTFARGE);

  let forbrukTxt = stackM.addText("Hittil i dag");
  forbrukTxt.rightAlignText();
  forbrukTxt.font = Font.lightSystemFont(10);
  forbrukTxt.textColor = new Color(TEKSTFARGE);

  // Avstand mellom kolonnene
  stack2.addSpacer(40)

  // Høyre kolonne
  let stackH = stack2.addStack();
  stackH.layoutVertically()

  // Legg til forbruk hittil denne mnd i h.kolonne
  forbruk = stackH.addText(totCostM + " kr");
  forbruk.rightAlignText();
  forbruk.font = Font.lightSystemFont(16);
  forbruk.textColor = new Color(TEKSTFARGE);

  forbruk2 = stackH.addText(totForbrukM + " kWh");
  forbruk2.rightAlignText();
  forbruk2.font = Font.lightSystemFont(14);
  forbruk2.textColor = new Color(TEKSTFARGE);

  forbrukTxt = stackH.addText("Hittil denne mnd");
  forbrukTxt.rightAlignText();
  forbrukTxt.font = Font.lightSystemFont(10);
  forbrukTxt.textColor = new Color(TEKSTFARGE);


  // Avstand ned til grafen
  lw.addSpacer(25)


  graphTxt = lw.addText("Timepriser");
  graphTxt.centerAlignText();
  graphTxt.font = Font.lightSystemFont(16);
  graphTxt.textColor = new Color(TEKSTFARGE);

  lw.addSpacer(10)

  let stackGraph = lw.addStack()
  let imgstack2 = stackGraph.addImage(GRAPH)
  imgstack2.imageSize = new Size(300, 150)
  imgstack2.centerAlignImage()
  stackGraph.setPadding(0, 0, 0, 0)


  // Avstand ned til bunntekst
  lw.addSpacer(20)


  // Legg til info om når widget sist hentet prisen
  d = new Date()
  let hour = d.getHours();

  // Omgjør til formatet HH:mm
  if (hour < 10) hour = "0" + hour;
  let min = d.getMinutes();
  if (min < 10) min = "0" + min;

  let time = lw.addText("Oppdatert: " + hour + ":" + min);
  time.centerAlignText();
  time.font = Font.lightSystemFont(8);
  time.textColor = new Color(TEKSTFARGE);

  // Return the created widget
  return lw;
}

let widget = await createWidget();

// Check where the script is running
if (config.runsInWidget) {
  // Runs inside a widget so add it to the homescreen widget
  Script.setWidget(widget);
} else {
  // Show the medium widget inside the app
  widget.presentLarge();
}
Script.complete();

 

tibberlarge.jpeg.1234ddd2757ffdb7ab90b08aba0a746a.jpeg

 

5. Finn din personlige Tibber-token ved å logge inn med din Tibber-konto her: https://developer.tibber.com/settings/accesstoken

6. Bytt ut token på linjen med "TIBBERTOKEN=" i scriptet med din personlige token og velg "Done".

7. For TibberLarge, sett variablen i linje 34 til true eller false for å velge om du vil vise med nettleie. Husk også å endre beløpene i linje 35 og 36.

8. Lukk "Scriptable"-appen og trykk og hold på hjemskjermen der du vil ha widget (slik at appene begynner å "riste"), trykk på "+" øverst til venstre, velg "Scriptable". Velg liten, medium eller stor widget og trykk "Legg til widget".

9. Widget ligger nå der med "Select script in widget configurator". Trykk og hold på den, og velg "Rediger widget".

10. For "Script", velg "TibberSmall"/"TibberMedium"/"TibberLarge" (avhengig av hvilken størrelse widget du valgte),
"When interacting"="Open URL",
"URL"="tibber://"

 

Widget er nå klar til bruk! :) 

 

Kom gjerne med innspill til endringer eller del dine egne forbedringer! :) 
 

PS:

Er du ikke Tibber-kunde finner du invite-lenke i signaturen min, som gir oss 500 kr hver. :) 

Endret av ZoRaC
Oppdatert til v2.0.2 for Large
  • Like 4
Lenke til kommentar
Del på andre sider

Moskus skrev (6 minutter siden):

Merk at det er begrensninger på hvor mange ganger token kan brukes samtidig... det kan være man får begrensninger hvis man har koblet Tibber til smarthuset også. Lurer på om begrensningen er to samtidige oppkoblinger.


Godt poeng. :) 

Men siden denne ikke bruker stream, men henter bare en enkelt gang ved hver oppdatering ca 1-3 ganger i timen, så rammes man kanskje ikke av det?

Lenke til kommentar
Del på andre sider

Hva gjør jeg feil når jeg får følgende feilmelding?

Quote

 

Exception Occured

Error on line 66:73: TypeError: null is not an object (evaluating 'json["data"]["viewer"]["homes"][0]["currentSubscription"]["pricaInfo"]

 

Er det begrensningen Moskus nevner som jeg støter på?

Eller kan det være det at jeg har 2 målere i koblet mot min Tibber-bruker?

Lenke til kommentar
Del på andre sider

Hillmar skrev (39 minutter siden):

Hva gjør jeg feil når jeg får følgende feilmelding?

Er det begrensningen Moskus nevner som jeg støter på?

Eller kan det være det at jeg har 2 målere i koblet mot min Tibber-bruker?

 

Over denne linjen:

"// Array med alle dagens timepriser"

Kan du legge til:

console.log(json["data"]["viewer"]["homes"]);

 

Trykk deretter på "play" nede til høyre i det vinduet. Det skal da dukke opp et ettall ved siden av knappen som du kan trykke på. Legg ut et skjermbilde av det den viser her.

Lenke til kommentar
Del på andre sider

8 hours ago, ZoRaC said:

 

Over denne linjen:

"// Array med alle dagens timepriser"

Kan du legge til:

console.log(json["data"]["viewer"]["homes"]);

 

Trykk deretter på "play" nede til høyre i det vinduet. Det skal da dukke opp et ettall ved siden av knappen som du kan trykke på. Legg ut et skjermbilde av det den viser her.

Hjelper dette deg å forstå?

4797E70D-C398-4A43-94E8-CC0C8763028B.thumb.png.50590286ea2a4dd3e55d0b8441d737eb.png

Lenke til kommentar
Del på andre sider

26 minutes ago, ZoRaC said:


Jeg antar det står noe litt lengre opp i den console-loggen også? Kan du lime inn det her?

Quote

2021-12-13 23:33:20: [{"currentSubscription":null,"consumption":null},{"currentSubscription":{"priceInfo":{"current":{"total":1.6568},"today":[{"total":1.6806},{"total":1.6675},{"total":1.6183},{"total":1.5742},{"total":1.6545},{"total":1.7097},{"total":1.732},{"total":1.7531},{"total":1.8045},{"total":1.796},{"total":1.7816},{"total":1.7769},{"total":1.7812},{"total":1.7806},{"total":1.7862},{"total":1.7835},{"total":1.8211},{"total":1.786},{"total":1.7677},{"total":1.7366},{"total":1.6766},{"total":1.674},{"total":1.616},{"total":1.6568}]}},"consumption":{"pageInfo":{"totalCost":103.236065625,"totalConsumption":59.58}}}]
2021-12-13 23:33:20: Error on line 67:73: TypeError: null is not an object (evaluating 'json["data"]["viewer"]["homes"][0]["currentSubscription"]["priceInfo"]')

Her har jeg kopiert ut hele.

Lenke til kommentar
Del på andre sider

FreddySB skrev (10 minutter siden):

 

Diggar Widget'en. Er det mulig å legge inn ID/postnr./adresse i denne, for dei av oss som har fleire bustadar inne i Tibber-appen..?

 


Enkleste løsning er å bytte ut ordet «oppdatert» med adressen i hver sin kopi av scriptet:

let time = lw.addText("Oppdatert: " + hour + ":" + min);
  • Like 1
Lenke til kommentar
Del på andre sider

FreddySB skrev (På 27.12.2021 den 21.29):

Ser at Tibber-API'et har eit field som heiter "appNickname", om det evt. i framtida lar seg gjere å implementere. Sjølv er eg for grønn på dette. 

 

Får se om det er mange som etterspør dette, i såfall kan jeg sikkert legge det til. :) 

Lenke til kommentar
Del på andre sider

Bli med i samtalen

Du kan publisere innhold nå og registrere deg senere. Hvis du har en konto, logg inn nå for å poste med kontoen din.

Gjest
Skriv svar til emnet...

×   Du har limt inn tekst med formatering.   Lim inn uten formatering i stedet

  Du kan kun bruke opp til 75 smilefjes.

×   Lenken din har blitt bygget inn på siden automatisk.   Vis som en ordinær lenke i stedet

×   Tidligere tekst har blitt gjenopprettet.   Tøm tekstverktøy

×   Du kan ikke lime inn bilder direkte. Last opp eller legg inn bilder fra URL.

 Del

×
×
  • Opprett ny...