Het weergeven van het Weer Met de Serverloze en Kleuren

0
65

Ik hou van om te joggen. Soms is het koud buiten. Soms is het koud buiten, maar het lijkt alsof het niet. De zon schijnt, de vogels fluiten. Dan stap je buiten in een korte broek en een t-shirt en realiseert dat je ongeveer 2 minuten vóór de blootstelling sets in.

Ik besloot om dit op te lossen eerste wereld probleem met behulp van een gloeilamp voor het weergeven van een bepaalde kleur worden gebaseerd op wat de temperatuur buiten is. Het werkt beter dan ik had verwacht, en dat zegt iets is, want niets werkt zoals ik het hebben wil.

Dit was een leuk project om te bouwen, en omdat het in wezen een gehoste service die wordt uitgevoerd op een timer, het is een perfecte gebruik van een server is niet vereist.

Nu zou u kunnen denken “uhm, zou het niet makkelijker om gewoon contact op met het weer?” Nou, het zou doen, maar dan zou ik het niet een excuus hebben om te kopen een dure gloeilamp of een artikel schrijven met het woord “server is niet vereist.”

Dus laten we kijken hoe kunt u het bouwen van uw eigen Weer Bol. De laatste code is niet ingewikkeld, maar het heeft wel een aantal interessante stukken die de moeite waard zijn. Door de manier waarop, had ik al gezegd dat het Serverloze?

Gebouw het Weer Bol

Het eerste wat je nodig hebt is de lamp. Je kunt niet een Weer Bol sans-lamp. Zeg het woord “lamp” hardop ongeveer 10 keer en je zult merken wat een bizarre woord het is. Bol, bol, bol, bol — zie? Raar.

Ik ben met behulp van de LIFX Mini Kleur. Het is niet *te* duur, maar belangrijker nog, het heeft een API die wijd open staat.

De API heeft twee methoden van verificatie. De eerste bevat het woord “OAuth” en ik ben al sorry dat je moest lezen. Maak je geen zorgen, er is een makkelijkere manier dat geen sprake is van Oae…. dat die niet bij naam genoemd worden.

De tweede manier is om een aanvraag indient met LIFX. U krijgt dan een sleutel en alles wat je hoeft te doen is het doorgeven van die toets met elk HTTP-verzoek. Dat is wat ik gebruik voor deze demo.

Bijvoorbeeld, als we wilden vervang de gloeilamp kleur blauw, we kunnen gewoon passeren kleur: blauw /staat eindpunt.

De API ondersteunt een aantal verschillende indelingen kleur, inclusief de benoemde kleuren (zoals rood, blauw), hex-waarden van RBG, Kevlin, kleurtoon, helderheid en verzadiging. Dit is belangrijk omdat het factoren en wat bleek het moeilijkste deel van dit project zijn: het draaien van de temperatuur in kleur.

Het Vertegenwoordigen Van De Temperatuur Van De Kleur

Als je ooit keek naar een rapport van het weer, zult u vertrouwd zijn met de manier waarop de meteorologie vertegenwoordigt weersomstandigheden met kleur op een kaart.

Meestal is dit gedaan voor het visualiseren van de neerslag. U hebt waarschijnlijk gezien dat onheilspellende groene strook van de stormen van de lagering op je neer op een weerkaart, terwijl u probeert om erachter te komen of je moet in het bad, omdat je je in het pad van een tornado. Of misschien is dat gewoon alles van ons ongelukkige zielen hier in Amerika Tornado Alley.

De kleur wordt ook gebruikt om aan te geven temperatuur. Dit is precies wat ik wilde doen met de lamp. Het moeilijke zaak is dat er niet lijkt te worden op een gestandaardiseerde manier om dit te doen. Sommige kaarten laten zien het als effen kleuren in bands. In dit geval, blauw kunnen vertegenwoordigen de band van 0 ° f – 32℉.

Anderen hebben het als een gradiënt schaal die is nu nog nauwkeuriger. Dit is wat ik zocht voor de Weather-Lamp.

Mijn eerste steken in het oplossen van dit was het alleen maar om Google “temperatuur van de kleur schaal” en andere diverse iteraties van die zoekterm. Ik heb weer een heleboel informatie over Kelvin.

Kelvin is een weergave van de temperatuur van een kleur. Letterlijk. Voor elke lichtbron (lamp, de zon, enz.), de werkelijke temperatuur van de bron zijn van invloed op de kleur van het licht zendt. Er brandt een vuur in een geel-rood van kleur. Hoe heter het vuur wordt, hoe meer het beweegt in de richting van wit. Vandaar het gezegde, “warm wit”. Dus als iemand ooit zegt: “red hot” u kunt corrigeren in het bijzijn van iedereen, want wie houdt er niet van een pedante kwal?

De LIFX lamp ondersteunt Kelvin, dus je zou kunnen denken dat dit zou werken. Immers, dit is de Kelvin-schaal….

Het probleem is dat er gewoon niet genoeg kleur variant, want deze zijn eigenlijk geen echte kleuren, maar de tint van de kleur die een licht uitzenden gebaseerd op het “temperatuur toont.” Hier is de Kelvin kleur wiel dat komt met de LIFX app.

Deze kleuren zijn nauwelijks van elkaar te onderscheiden zijn op de lamp. Niet precies wat ik zocht.

Dat laat mij proberen om de kleur converteren naar ofwel Hex, RGB of een ander formaat. Dit is lastig, want waar moet je beginnen? Ik heb een pijnlijke hoeveelheid van de tijd aanpassen van de RGB-schaal waarden tussen blauw voor koud (0, 0, 255) en rood voor heet (255, 0, 0). Het was omstreeks deze tijd dat drong het tot me door dat misschien HSL zou een betere manier om te gaan hier. Waarom? Omdat hue is een heel stuk makkelijker om te begrijpen.

Hue

Hue is een weergave van de kleur op een schaal tussen 0 en 360. Dit is de reden waarom we vaak zien in kleur weergegeven op een wiel (360°). Dat is een enorme oversimplificatie, maar tenzij je me wilt praten over de golflengten, laten we verder gaan met die definitie.

De tint van de kleur wiel ziet er zo uit….

Als we strijk het uit, het is makkelijker om te redeneren over.

We zijn klaar om te converteren temperatuur te kleuren. Het eerste wat we moeten doen is het uitzoeken van een ingestelde temperatuur. Ik ging met 0 ° f 100 ° f. We kunnen niet werken met oneindige temperatuur kleur combinaties. De nummers gaan voor altijd, de kleuren niet. Het kan alleen zo warm voor onze lamp is gewoon helder rood, en dat is 100℉. Hetzelfde geldt voor koude.

Als er licht blauw vertegenwoordigt 0℉, ik kan starten bij ongeveer 200 mark op de tint schaal. Rood staan 100℉. U kunt zien dat het rood is bij beide extremen, dus ik kan verplaatsen naar keuze, links OF rechts, afhankelijk van welke kleuren ik wil gebruiken om te vertegenwoordigen de temperatuur. Het is niet hetzelfde zijn als de kleuren die ze gebruiken in de actuele weersverwachting programma ‘ s, maar who cares? Uiteraard ben ik niet.

Ik koos om te gaan, want er is geen roze op de linker en roze is mijn favoriete kleur. Ik voelde ook als pink vertegenwoordigt warm een beetje beter dan groen. Groen is regen en tornado ‘ s.

Nu kunnen we weer in een tint die gebaseerd is op temperatuur. Klaar? Hier gaan we.

Laten we doen alsof het een stevige 50℉ buiten.

Als 100℉ is de heetste gaan we (360) en 0℉ is de koudste (200), vervolgens hebben we een kleur schaal van 160 punten. Om erachter te komen waar in die 160 punt bereik moeten we zijn, kunnen we verdelen de huidige temperatuur door de bovengrens van 100℉, die ons het exacte percentage dat we nodig hebben om te bewegen in ons assortiment, of 50%. Als we 50% van de weg in een 160 punt bereik, dat laat ons bij 80. Omdat we vanaf 200, dat geeft ons een tint van 280.

Dat klinkt ingewikkeld, maar alleen omdat het woord van problemen in de wiskunde ZUIGEN. Hier is hoe de code eruit ziet als het allemaal gezegd en gedaan…

laat hue = 200 + (160 * ( temperatuur / 100 ));

OK! We hebben een dynamische kleur schaal op basis van tint, en zou je niet weten, kunnen we net voorbij de tint aan LIFX zo eenvoudig als we langs een named color.

Nu hoeven we alleen maar te weten wat de huidige temperatuur is, terug in een tint en doen dat om de paar minuten. Serverloze, here we come!

Serverloze Timer Functie

Serverloze is al de woede. Het is zoals HTML5 gebruikt te worden: het maakt niet uit wat het is, is het alleen van belang dat u weet dat het woord en zijn niet bang om het te gebruiken in een blog post.

Voor dit voorbeeld gebruiken we Azure Functies, want er is ondersteuning voor timer activeert, en kunnen we het testen van deze timer activeert lokaal voordat we implementeren het gebruik van VS-Code. Een van de dingen die over de Serverloze dat irriteert me geen eind is als ik niet kan debuggen van het lokaal.

Met behulp van de Azuurblauwe Functies Core Tools en de Azuurblauwe Functies Extension voor VS-Code, ik kan het maken van een nieuwe server is niet vereist project en selecteer een Timer Activeren.

Timer Activeert in Azure Functies worden opgegeven als Cron-Expressies. Maak je geen zorgen, ik wist niet wat dat was.

Cron-Expressies kunt u heel specifiek met interval definitie. Cron dingen afbreekt in seconde, minuut, uur, dag, maand, jaar. Dus als je wilde iets te draaien, elke seconde van elke minuut van elk uur van elke dag van elk jaar, je expressie zou er als volgt uitzien…

* * * * * *

Als je wilde om het te draaien iedere dag om 10:15, het zou er als volgt uitzien…

* 15 10 * * *

Als je wilde om het te draaien om de 5 minuten (dat is wat Azure standaard), geeft u dat door te zeggen: “wanneer minuten is deelbaar door 5 te maken.”

0 */5 * * * *

Voor de toepassing van deze functie, zijn wij ingesteld op 2 minuten.

Ik ben met behulp van een 2-minuten interval, want dat is hoe vaak bellen we de weather API gratis 💰.

Aan de Weersverwachting Van DarkSky

DarkSky heeft een prachtig weer API die je kunt bellen tot 1000 keer per dag gratis. Als er 1440 minuten per dag (en er zijn), dat betekent dat we kunnen bellen DarkSky elke 1.44 minuten per dag en verblijf in de vrije zone. Ik heb net naar boven afgerond op 2 minuten omdat de temperatuur niet verandert dat snel.

Dit is wat onze functie eruit ziet wanneer we noemen de DarkSky API. Al mijn penningen, sleutels, latitude en longitude instellingen zijn in de omgeving van de variabelen zodat ze niet hardcoded. Deze zijn vastgelegd in het lokaal.instellingen.json-bestand. Ik gebruikte axios voor mijn HTTP-verzoeken, want het is een betoverende, magische pakket.

const axios = (‘axios’);

de module.export = function (context, myTimer) {
// de opbouw van de DarkSky eindpunt
laat eindpunt = `${proces.env.DS_API}/${proces.env.DS_SECRET}/${proces.env.LAT},
${proces.env.LNG}`;

// gebruik axios te bellen DarkSky voor het weer
axios
.krijgen(eindpunt)
.vervolgens(respons => {
laat temp = Wiskunde.ronde(reactie.de gegevens.momenteel is.de temperatuur);

// TODO: Stel de kleur in van de LIFX lamp
})
.catch(err => {
de context.log(err.bericht);
});
};

Nu dat ik de temperatuur moet ik bellen om de LIFX-API. En zou je niet weten, iemand heeft al een npm-pakket om dit te doen heet lifx-http-api. Dit is de reden waarom je de liefde van JavaScript.

Het instellen van de Hue-Lamp

Na het resultaat weer terug komt, ik moet gebruik maken van de LIFX API aanleg en bel de setState methode. Deze methode retourneert een belofte dat betekent dat we moeten nest beloften. Nesten beloften kunnen uit de hand en kon het land ons meteen terug in callback de hel, dat is wat we proberen te vermijden met in de eerste plaats belooft.

In plaats daarvan, wij zorgen voor de eerste belofte en dan terug Belofte.alles wat we kunnen doen op een andere top-niveau. Dit voorkomt dat we nesten dan verklaringen.

Onthoud kinderen, beloften zijn alleen sociaal acceptabel callbacks.

const axios = (‘axios’);
const LIFX = (‘lifx-http-api’);

laat client = nieuwe LIFX({
bearerToken: proces.env.LIFX_TOKEN
});

de module.export = function (context, myTimer) {
// de opbouw van de DarkSky eindpunt
laat eindpunt = <code>${proces.env.DS_API}/${proces.env.DS_SECRET}/${
proces.env.LAT
},${proces.env.LNG}<code>;

// gebruik axios te bellen DarkSky voor het weer
axios
.krijgen(eindpunt)
.vervolgens(respons => {
laat temp = Wiskunde.ronde(reactie.de gegevens.momenteel is.de temperatuur);

// zorg ervoor dat de temp niet boven de 100, want dat is zo hoog als we kunnen gaan
temp = temp < 100 ? temp : 100;

// bepalen de tint
laat hue = 200 + (160 * (temp / 100));

// terug Belofte.zo kunnen we oplossen door op het hoogste niveau
rendement Beloven.alle([
gegevens
client.setState(‘alle’, { color: <code>tint:${tint}<code> })
]);
})
.vervolgens(resultaat => {
// resultaat[0] bevat de in de darksky resultaat
// resultaat[1] bevat de LIFX resultaat
de context.log ([1]);
})
.catch(err => {
de context.log(err.bericht);
});
};

Nu kunnen we dit ding lokaal en bekijk onze timer doen het thang.

Dat is het! Laten we inzetten.

Het Implementeren Weer Bol

Ik kan het maken van een nieuwe Functies project van de VS-Code extensie.

Ik kan rechts-klik op “Open in portal” waar kan ik het definiëren van een implementatie bron, dus het is klote mijn code in van Github en implementeert. Dit is ideaal, want nu wanneer ik op een wijziging van Github, mijn aanvraag automatisch wordt geïmplementeerd.

All Hail de Weer Bol

Nu leun achterover en zie de zachte gloed van het Weer Bol! Waarom kijken naar de werkelijke temperatuur als u kunt kijken naar dit mooie schaduw van hot pink in plaats?

Kunt u raden wat de temperatuur is gebaseerd op wat weet je van dit artikel? De persoon die een reactie achterlaat en krijgt het dichtst krijgt een gratis LIFX gloeilamp van mij (omdat ik ❤️ alle van u), of de kosten van de lamp als u buiten de V.S. (~$40).

U kunt grijpen alles van de code voor dit project van Github.