Anzeige der Wetter Mit Serverlose und Farben

0
17

Ich mag zu joggen. Manchmal ist es draußen kalt. Manchmal ist es kalt draußen, aber es sieht aus wie es ist nicht. Die Sonne scheint, die Vögel Zwitschern. Dann haben Sie den Schritt nach draußen in shorts und ein t-shirt und erkennen, Sie haben etwa 2 Minuten, bevor Sie die Belichtung einstellt.

Ich beschloss, zu lösen dieses erste-Welt-problem mit einer Glühbirne zur Anzeige einer bestimmten Farbe auf, was der Temperatur draußen ist. Es funktioniert besser als ich erwartet habe, und das sagt etwas, weil in der Regel nichts klappt wie ich es mir vorstelle.

Das war ein Spaß-Projekt zu bauen, und da ist es im wesentlichen ein gehosteter Dienst, der auf einem timer, es ist ein perfekter Anwendungsfall für Serverlose.

Nun könnte man denken, “äh, wäre es nicht einfacher, nur überprüfen Sie das Wetter?” Gut, es wäre, aber dann würde ich nicht haben eine Entschuldigung zu kaufen eine teure Glühbirne oder einen Artikel schreiben mit dem Wort “Serverlose.”

Also schauen wir uns an, wie Sie bauen Sie Ihre eigenen Wetter-Birne. Der endgültige code ist nicht kompliziert, aber es hat einige interessante Stücke, die es Wert sind, erwähnt zu werden. By the way, habe ich erwähnt, dass es Serverlose?

Gebäude das Wetter Birne

Das erste, was Sie gehen zu müssen, ist die Glühbirne. Man kann nicht eine Wetter-Birne sans-Lampe. Sagen, das Wort “bulb”, laut über 10-mal und Sie werden feststellen, was für ein skurriles Wort es ist. Birne, Birne, Birne, Birne — sehen? Komisch.

Ich bin mit der LIFX-Mini-Farbe. Es ist nicht *zu* teuer, aber noch wichtiger ist, es hat eine API, die ist weit offen.

Die API verfügt über zwei Methoden der Authentifizierung. Die erste enthält das Wort “OAuth” und ich bin jetzt schon Leid, dass Sie hatte, zu Lesen. Keine Sorge, es ist ein einfacher Weg, die nicht die OAu…. das, was nicht benannt werden.

Die zweite Möglichkeit ist die Registrierung von einer Anwendung mit LIFX. Sie wieder eine Taste, und alles, was Sie tun müssen, ist, übergeben Sie die Schlüssel mit jeder HTTP-Anforderung. Das ist es, was ich für dieses demo.

Zum Beispiel, wenn wir wollten, ändern Sie die Glühbirne Farbe blau, wir können nur pass-Farbe: blau /Staat Endpunkt.

Die API unterstützt ein paar verschiedenen Farb-Formate, einschließlich benannte Farben (z.B. rot, blau), hex-Werte, RBG, Kevlin, Farbton, Helligkeit und Sättigung. Dies ist wichtig, weil es Faktoren, in was erwies sich als der schwierigste Teil des Projekts: ein-Temperatur in Farbe.

Vertretung Der Temperatur Mit Farbe

Wenn Sie jemals ein Wetter-Bericht ist, werden Sie vertraut mit der Art und Weise, die Meteorologie stellt Wetterbedingungen mit Farbe auf einer Karte.

In der Regel geschieht dies zu visualisieren, Niederschlag. Sie haben wahrscheinlich gesehen, dass die ominösen grünen Streifen Stürme gegenüber, die sich auf Sie auf eine Wetter-Karte, während Sie versuchen, herauszufinden, wenn Sie in die Badewanne, weil Sie in den Weg eines Tornados. Oder vielleicht ist das nur uns alle unglücklichen Seelen, die hier in Amerikas Tornado-Alley.

Farbe wird auch verwendet, um darzustellen Temperatur. Das ist genau das, was ich wollte zu tun mit der Glühbirne. Die schwierige Sache ist, dass es scheint nicht zu einem standardisierten Weg, um dies zu tun. Einige Karten zeigen ihn als soliden Farben in bands. In diesem Fall, blau darstellen könnten, die band von 0 ° f – 32℉.

Andere haben es als gradient Waage, die ist genauer. Das ist, was ich nach dem Wetter und der Birne.

Meine erste Stich an der Lösung dieser war gerade auf Google “Temperatur-Farbskala” und anderen verschiedenen Iterationen der Suchbegriff. Ich habe wieder eine Menge Informationen über Kelvin.

Kelvin ist eine Darstellung der Temperatur einer Farbe. Buchstäblich. Für jede Lichtquelle (Glühbirne, Sonne, ect) die tatsächliche Temperatur der Quelle wird auf die Farbe des abgestrahlten Lichts. Ein Feuer brennt, eine gelblich-rote Farbe. Je heißer das Feuer kommt, desto mehr bewegt es sich in Richtung weiß. Daher das Sprichwort, “white hot”. Also, wenn jemand immer sagt “red hot” Sie können korrigieren Sie Sie, vor alle, weil wer nicht liebt, ein pedantisch-Ruck?

Die LIFX Glühbirne unterstützt Kelvin, so dass Sie vielleicht denken, dass dies funktionieren würde. Immerhin ist dies die Kelvin-Skala….

Das problem ist, dass es einfach nicht genug Farbe variation, denn diese sind nicht die tatsächlichen Farben, sondern die Tönung der Farbe, die eine Licht emittierende basierend auf der “Temperatur.” Hier ist die Kelvin-Farbe, Rad, kommt mit der LIFX-app.

Diese Farben sind kaum zu unterscheiden von einander auf die Birne. Nicht genau das, was ich nach.

Das hinterlässt bei mir versuchen, konvertieren Sie die Farbe auf entweder Hex -, RGB-oder einem anderen format. Das ist hart, denn wo soll man beginnen? Ich verbrachten ein peinliche Menge an Zeit anpassen der RGB-Skala Werte zwischen blau für kalt (0, 0, 255) und rot für heiß (255, 0, 0). Es war zu dieser Zeit, es schwante mir, dass vielleicht HSL wäre ein besserer Weg, hier zu gehen. Warum? Denn hue ist eine ganze Menge einfacher zu verstehen.

Farbton

Hue ist eine Darstellung der Farbe auf einer Skala zwischen 0 und 360. Dies ist der Grund, warum wir oft sehen, Farbe, dargestellt auf einem Rad (360°). Das ist eine riesige Vereinfachung, aber es sei denn, Sie wünschen mich zu sprechen beginnen, über Wellenlängen, let ‘ s go mit dieser definition.

Das hue color wheel sieht so aus….

Wenn wir glätten Sie es aus, es ist leichter zu Grunde geht.

Wir sind bereit zu konvertieren Temperatur Farbe. Das erste, was wir tun müssen, ist herauszufinden, einer eingestellten Temperatur-Bereich. Ich ging mit 0℉ zu 100℉. Wir können nicht mit unendlich hoher Temperatur Farbkombinationen. Die zahlen gehen auf ewig, Farben nicht. Es kann nur so heiß sein, bevor unsere Lampe ist nur hell-rot die ganze Zeit, und das ist 100℉. Das gleiche gilt für Kälte.

Wenn das Licht blau steht für 0℉, kann ich beginnen bei rund 200 mark auf den Farbton-Skala. Rot repräsentieren 100℉. Sie können sehen, dass rot ist in beiden extremen, so kann ich entweder Links ODER rechts, je nachdem, welche Farben ich verwenden möchten, stellen Sie die Temperatur. Es ist nicht das gleiche wie die Farben, die Sie im aktuellen Wetter-Programme, aber who cares? Offensichtlich nicht bei mir.

Ich entschied mich zu gehen zu Recht, denn es ist kein pink, auf der linken und rosa ist meine Lieblingsfarbe. Ich fühlte mich auch wie pink repräsentiert warm etwas besser als grüne. Grüne Regen und Tornados.

Jetzt können wir wieder in einem Farbton, basierend auf der Temperatur. Sind Sie bereit? Hier gehen wir.

Lassen Sie uns so tun, es ist ein flotter 50℉ außerhalb.

Wenn 100℉ am heißesten ist, gehen wir (360) und 0℉ ist der kälteste (200), dann haben wir eine Farbskala von 160 Punkten. Um herauszufinden, wo in dieser 160 Punkt-Bereich, die wir brauchen werden, können wir teilen die aktuelle Temperatur den oberen Grenzwert von 100℉, die uns den genauen Prozentsatz müssen wir verschieben in unserem Sortiment, oder 50%. Wenn wir 50% von der Weg in einer 160-Punkt-Bereich, das lässt uns in der 80. Da wir ab 200, das gibt uns ein Farbton von 280.

Das klingt kompliziert, aber nur, weil word Probleme in Mathe SAUGEN. Hier ist, wie der code aussieht, wenn es alle gesagt und getan…

Farbton = 200 + (160 * ( Temperatur / 100 ));

OK! Wir haben eine dynamische Farbskala basiert auf Farbton, und würden Sie nicht wissen, können wir einfach die hue und LIFX so einfach, wie wir an eine benannte Farbe.

Jetzt müssen wir nur noch herausfinden, was die aktuelle Temperatur ist, wieder in eine Farbton-und das alle paar Minuten. Die serverlose, hier kommen wir!

Serverlose Timer-Funktionen

Serverlose ist in aller Munde. Es ist wie HTML5 verwendet werden: es ist egal, was es ist, ist es nur wichtig, dass Sie wissen, das Wort und scheuen sich auch nicht, um es in einem blog-post.

Für dieses Beispiel verwenden wir Azure-Funktionen, da gibt es Unterstützung für die timer-Trigger, und wir können testen dieser timer löst lokal, bevor wir bereitstellen mit VS Code. Eines der Dinge, über die Serverlose, die reizt mich ohne Ende, wenn ich kann nicht Debuggen, es lokal.

Mithilfe der Azure-Funktionen der Core Tools und den Azure-Funktionen-Erweiterung für VS-Code kann ich eine neue Serverlose Projekt, und wählen Sie einen Timer-Trigger.

Timer-Trigger in der Azure-Funktionen angegeben werden, da Cron-Ausdrücken. Keine Sorge, ich wusste nicht, was das war.

Cron-Ausdrücke ermöglichen Sie, um sehr spezifische, mit Intervall-definition. Cron bricht Dinge nach unten in Sekunde, minute, Stunde, Tag, Monat, Jahr. Also, wenn Sie wollte noch etwas laufen jede Sekunde jede minute jede Stunde jeden Tag jedes Jahr, Ihren Ausdruck würde wie folgt Aussehen…

* * * * * *

Wenn Sie wollte es starten jeden Tag um 10:15, es würde so Aussehen…

* 15 10 * * *

Wenn Sie laufen wollten es alle 5 Minuten (das ist, was Azure standardmäßig), können Sie angeben, indem Sie sagen: “wenn Minuten ist teilbar durch 5.”

0 */5 * * * *

Für die Zwecke dieser Funktion, wir setzen Sie es auf 2 Minuten.

Ich bin mit einem 2-Minuten-Intervall, weil das ist, wie oft wir anrufen können, die Wetter-API für freie 💰.

Immer die Prognose Von DarkSky

DarkSky hat eine wunderbare Wetter-API, die Sie aufrufen können bis zu 1.000 mal pro Tag kostenlos. Wenn es 1.440 Minuten eines Tages (und gibt es), bedeutet das, dass wir anrufen können DarkSky jeden 1.44 Minuten pro Tag und Aufenthalt in der freien zone. Ich habe gerade gerundet bis zu 2 Minuten, da die Temperatur ändert sich nicht so schnell.

Dies ist, was unsere Funktion aussieht, wenn wir nennen die DarkSky-API. Alle meine tokens, keys, Längen-und Breitengrad-Einstellungen in Umgebungsvariablen, so dass Sie nicht fest verdrahtet. Diese sind festgelegt in den lokalen.Einstellungen.json-Datei. Ich verwendet axios für meine HTTP-Anfragen, denn es ist ein Magischer, Magisches Paket.

const axios = require(‘axios’);

– Modul.exports = function (context, myTimer) {
// Aufbau der DarkSky Endpunkt
lassen Sie endpoint = `${Prozess.env.DS_API}/${Prozess.env.DS_SECRET}/${Prozess.env.LAT},
${Prozess.env.LNG}`;

// axios zu nennen DarkSky für das Wetter
axios
.bekommen(Endpunkt)
.dann(response => {
let temp = Math.Runde(response.Daten.derzeit.Temperatur);

// TODO: Legen Sie die Farbe der LIFX-Birne
})
.catch(err => {
Kontext.log(err.message);
});
};

Jetzt, wo ich die Temperatur, muss ich anrufen die LIFX-API. Und würden Sie nicht wissen, jemand hat bereits ein npm-Paket, das zu tun dieses namens lifx-http-api. Dies ist der Grund, warum Sie Liebe JavaScript.

Einstellung der Lampe Farbton

Nachdem das Wetter Ergebnis kommt zurück, ich muss an die LIFX-API-Instanz und Aufruf der setState-Methode. Diese Methode gibt ein Versprechen, das heißt, wir müssen zum nest verspricht. Verschachtelung Versprechungen aus der hand und landen konnte, uns wieder in der callback-Hölle, das ist, was wir versuchen zu vermeiden, mit dem Versprechen in den ersten Platz.

Stattdessen werden wir mit der ersten Versprechen und dann wieder Versprechen.alle, die wir behandeln können, auf eine andere top-level. Dies nur verhindert, dass uns von Schachteln Aussagen.

Denken Sie daran, Kinder, Versprechen sind nur sozial akzeptabel Rückrufe.

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

lassen Sie client = new LIFX({
bearerToken: Prozess.env.LIFX_TOKEN
});

– Modul.exports = function (context, myTimer) {
// Aufbau der DarkSky Endpunkt
lassen Sie endpoint = <code>${Prozess.env.DS_API}/${Prozess.env.DS_SECRET}/${
Prozess.env.LAT
},${Prozess.env.LNG}<code>;

// axios zu nennen DarkSky für das Wetter
axios
.bekommen(Endpunkt)
.dann(response => {
let temp = Math.Runde(response.Daten.derzeit.Temperatur);

// sicherstellen, dass die temp nicht über 100, weil das so hoch, wie wir können gehen
temp = temp < 100 ? temp : 100;

// bestimmen Sie den Farbton
Farbton = 200 + (160 * (temp / 100));

// zurück-Versprechen.alle, so dass wir beheben können, auf der obersten Ebene
Rendite Versprechen.alle([
Daten,
client.setState(‘all’, { color: <code>Farbton:${hue}<code> })
]);
})
.dann(Ergebnis => {
// Ergebnis[0] enthält das Ergebnis darksky
// Ergebnis[1] enthält die LIFX Ergebnis
Kontext.log(result[1]);
})
.catch(err => {
Kontext.log(err.message);
});
};

Jetzt können wir das Ding lokal und sehen Sie sich unser timer der thang.

Das ist es! Lassen Sie uns bereitstellen.

Die Bereitstellung Von Wetter-Birne

Ich kann eine neue erstellen, Funktionen Projekt von der VS-Code-Erweiterung.

Ich kann mit der rechten Maustaste, um “Öffnen Sie im portal” wo kann ich definieren, eine deployment-Quelle, so dass es saugt meinen code von Github und setzt es. Dies ist ideal, weil jetzt, wenn ich drücke einen Wechsel zu Github, meine Anwendung wird automatisch neu bereitgestellt.

Alle Hagel, das Wetter Birne

Jetzt lehnen Sie sich zurück und siehe da das weiche glühen von der Wetter-Birne! Warum schauen auf die tatsächliche Temperatur, wenn Sie können, schauen Sie an diesem schönen Schatten von pink statt?

Können Sie erraten, was die Temperatur ist davon abhängig, was wissen Sie von diesem Artikel? Die person, die einen Kommentar hinterlässt bekommt und die nächsten bekommen ein gratis LIFX Glühbirne von mir (weil ich ❤️ alle von Ihnen), oder die Kosten für die Glühbirne, wenn Sie außerhalb der USA (~$40).

Du kannst dir den gesamten code für dieses Projekt von Github.