Ich habe kürzlich einen Artikel über die Grundlagen der Pebble Watch Development mit JavaScript geschrieben. Zusammenfassend machten wir ein Watchface, in dem die Foursquare -API den Benutzer mitgeteilt hat, wo sich der nächste Starbucks zu jeder Zeit befand. So sah es in Aktion aus:
Ich erwähnte, dass es mit JavaScript ein bisschen mehr möglich war, was ich in diesem Artikel nicht behandeln konnte. Dies ist mein Follow -up, der die anderen Merkmale des Pebblekit JavaScript -Frameworks abdeckt.
In diesem Artikel werde ich behandeln, wie Sie die App „Find Me Starbucks“ erweitern, die wir im vorherigen Artikel entwickelt haben, damit der Benutzer die Art des Ortes auswählen kann, die die App für sie findet. Nicht jeder ist so groß wie ich! Wir fügen einen Konfigurationsbildschirm hinzu, der es ihnen ermöglicht, an ihrem eigenen Platz von Interesse einzutippen und diese Einstellung für sie jedes Mal zu speichern, wenn sie die App verwenden.
Wenn Sie diesem Tutorial folgen möchten, benötigen Sie:
, anstatt den gesamten Code aus unserem letzten Tutorial in diesen Artikel einzugeben, können Sie den Code für "Find Me Starbucks" auf GitHub überprüfen oder das vorherige Tutorial durchlesen. Der Code für unsere aktualisierte App ist auch bei "Find Me Anything" auf GitHub verfügbar. Wenn Sie also den Code herunterladen und mitmachen möchten - fühlen Sie sich frei!
Vor der Einführung des Pebblekit JavaScript -Frameworks in Version 2.0 des SDK mussten Pebble -Apps eine Begleit -App auf dem Telefon des Benutzers installieren, um benutzerdefinierte Einstellungen zu akzeptieren. Wenn ein Benutzer eine Wetter -App wollte, um ihnen das Wetter in Celsius anstelle von Fahrenheit anzuzeigen, müssten er zuerst die Begleiter -App installieren und diese öffnen, um die Einstellungen zu ändern (oder ein Roheinstellungsfenster auf der Watchface -App selbst zu haben).
Mit dem neuen SDK können wir jetzt eine Konfigurationsseite definieren, auf die in der Android/iOS -App von Pebble selbst zugegriffen werden kann. Die Einstellungen werden an derselben Stelle wie der Ort zugegriffen, an dem der Benutzer seine Uhren -Apps installiert und arrangieren. Reiniger und logischer vom Standpunkt eines Benutzers.
Das neue SDK -JavaScript verwendet auch die W3C -Empfehlung für den Webspeicher, sodass Sie Einstellungen innerhalb der App für die zukünftige Verwendung speichern können. Wenn der Benutzer nach einer Einstellung von Celsius/Fahreinheit bittet, können wir mit dem Webspeicher die Präferenz des Benutzers berücksichtigen. In unserem Fall möchten wir den Ort speichern, an dem der Benutzer interessiert ist.
Die Einstellungsseite ist eine einzelne Seite im Web, die ein Formular enthält, um die Einstellungen Ihrer App umzuschalten. Das JavaScript in Ihrer App wartet darauf, dass alle angepassten Einstellungen über das Formular zurück in das JavaScript Ihrer App eingereicht werden und die Einstellungen im lokalen Speicher gespeichert werden.
Klang verwirrend? Es ist für einige Fälle keine ideale Einrichtung, da Sie Ihre eigene Einstellungsseite irgendwo im Web hosten müssen, damit andere zugreifen können. Es scheint, dass Pebble plant, diese Einstellungsseite in Zukunft mit der App zu bündeln, was für einige Apps da draußen großartig wäre. Das aktuelle Setup ist mit Vorteilen ausgestattet. Wenn Sie etwas allein auf der Seite "Einstellungen anpassen möchten" müssen die App selbst nicht aktualisieren, da die Einstellungsseite unabhängig ist.
Um die Einstellungsseite in Ihrer Anwendung zu aktivieren, fügen wir dem Funktionsarray, mit dem wir zuvor den Zugriff auf die Geolocation -API über das Schlüsselwort "Speicherort" auf die Geolocation -API zu definieren, "Konfigurierbar" hinzu:
<span>"capabilities": ["location", "configurable"]</span>
Wir fügen auch einen zusätzlichen Schlüssel hinzu, damit unsere App "Suchen" verwendet wird. Dies ist die Zeichenfolge, die entweder "Starbucks" oder eine benutzerdefinierte Art von Speicherort ist, die der Benutzer anfordert:
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>Wie oben erwähnt, müssen Sie eine Webseite mit einem Formular hosten, damit der Benutzer das ändern kann, wonach er sucht. Meins sieht aus wie SO:
Die grundlegende HTML, die Sie benötigen, sieht so aus (ich habe mein Styling und mein Rahmenbezogene Markup für den Einfachheit halber entfernt):
<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span> </span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>
Wir verwenden dann JavaScript auf unserer Einstellungsseite, um Änderungen an das JavaScript unseres Pebble zu senden und die aktuellen Einstellungen des Benutzers vorzuführen.
Wir bieten zwei Optionen, sie können stornieren - verhindern, dass eine ihrer Änderungen sparen, oder sie können das Formular einreichen, das diese Änderungen in die zu speichernde App übergibt.
Um ihre Änderungen zu stornieren, setzen wir das Dokument. Die Lokalisierung in PebbleJS: // Close. Dies sendet eine leere Antwort auf unseren Pebble JavaScript -Code, der nichts ändert:
<span>$('#b-cancel').click(function() {
</span> <span>document.location = 'pebblejs://close';
</span><span>});</span>Wenn sie ihre Änderungen einreichen, übergeben wir die Eingabe aus der Textbereich in eine Zeichenfolge. Die folgende Funktion SaveOpions () bringt den Wert aus dem Textbereich in ein Objekt:
<span>function saveOptions() {
</span> <span>var options = {
</span> <span>searchingFor: $('#searchingFor').val()
</span> <span>}
</span> <span>return options;
</span><span>}</span>Unsere Klickfunktion legt unsere Daten ein, indem wir das Objekt in eine Zeichenfolge verwandeln und seine Zeichen codieren, damit wir es in die URL einfügen können, die wir mit Dokument abzielen. Änderung):
<span>$('#b-submit').click(function() {
</span> <span>var location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(saveOptions()));
</span> <span>document.location = location;
</span><span>});</span>, das die Einstellungen, die wir möchten, an den Pebble JavaScript erfolgreich gesendet werden.
Wenn der Benutzer bereits eine Änderung der Einstellungen vorgenommen hat, sagen er, dass die App sie stattdessen Gelato findet, möchten wir, dass die vorherige Einstellung von „Gelato“ im Textfeld angezeigt wird, wenn er die öffnet Einstellungen. Zu diesem Zweck senden wir die Konfiguration HTML -Seite A Variable in der URL, die als Suchanlage bezeichnet wird. Ein Beispiel hier
Ich habe eine Funktion, die ich vor langer Zeit gefunden habe, die ich ziemlich wieder verwendete, um Variablen aus URLs zu erhalten:
<span>"capabilities": ["location", "configurable"]</span>
verwandeln
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>Anpassung unseres JavaScript, um Einstellungen
Zunächst benötigen wir eine neue Variable in unserem JavaScript. Nennen wir es für die Suche, um unseren Schlüssel in der Datei AppInfo.json zu entsprechen (es ist nicht erforderlich, sie gleich zu benennen, aber für Konsistenz und Klarheit habe ich das getan). Was diese Variable tun muss
Webspeicher in Pebble Apps
, um es abzurufen:
<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span> </span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>
<span>"capabilities": ["location", "configurable"]</span>
In unserem Fall möchten wir unsere Suchdaten im lokalen Speicher unserer Pebble -App speichern. Wir werden eine JavaScript -Variable verwenden, um während unserer App darauf zugreifen zu können. In Zeiten, wenn wir die App zum ersten Mal laden oder aus dem Konfigurationsbildschirm zurückkehren, setzen wir diese Suchvariable aus unserem lokalen Speicher.
wir werden uns in unseren lokalen Speicher befassen, sobald unser JavaScript ausgeführt wird. Wenn unsere Suchdaten im lokalen Speicher nicht gefunden werden, setzen wir die Standardeinstellung auf "Starbucks". Dies ist dies ordentlich platziert, nachdem unsere Standort-Definition zu Beginn der Pebble-js-App.js-Datei.
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>Wir fügen dann diese Variable unserer AJAX -Anfrage anstelle der Starbucks hinzu:
<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span> </span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>
Bisher wird unsere App das Gleiche tun, was sie zuvor getan hat - finden Sie uns Starbucks. Wir müssen es wissen lassen, was zu tun ist, wenn ein Benutzer die Schaltfläche „Einstellungen“ für Ihre App drückt. Wir machen dies mit dem Showconfiguration Event Hörer:
<span>$('#b-cancel').click(function() {
</span> <span>document.location = 'pebblejs://close';
</span><span>});</span>, das den Benutzer mit dem Formular zu Ihrer Seite bringt, um diese Einstellungen auszufüllen. Wenn sie ihre neuen Einstellungen einreichen (z. B. „Gelato“, wie oben erwähnt), möchten wir, dass unser JavaScript in Pebble-JS-App.js bereit ist und auf diese Daten wartet.
Um dies zu tun, verwenden wir den WebViewCleared Event -Listener. Hier dekodieren wir es aus unserer URI -Zeichenfolge zurück (die codierte Version mit für Räume und dergleichen) und analysieren sie noch einmal in ein JSON -Objekt. Wir erhalten den Wert von diesem JSON -Objekt und codieren es noch einmal, jetzt ist es nicht aus unserer JSON -String. Das letzte Bit der Codierung speichert es bereit, in die URL -Zeichenfolge für den zuvor diskutierten Foursquare -API -Anruf aufgenommen zu werden (die https://api.foursquare.com/v2/venues/search?client_id= 'clientID' & client_secret = 'clientecret '& v =' Version '& ll =' Latitude ',' Longitude '& query =' suchanfragen):
<span>function saveOptions() {
</span> <span>var options = {
</span> <span>searchingFor: $('#searchingFor').val()
</span> <span>}
</span> <span>return options;
</span><span>}</span>Wenn unser Wert als undefiniert ist (es scheint eine Reihe von Gründen zu geben, die dies möglicherweise passieren könnte, aber sie waren Kantenfälle), habe ich ein letztes Ausweg, wenn ich es wieder auf "Starbucks" umschaltet. Es wäre wahrscheinlich eine schönere Art, dies in Zukunft zu bewältigen, möglicherweise mit einem Fehler, aber um die Dinge für diese Demo einfach zu halten, habe ich Starbucks in einem schlimmsten Fall verlegt:
<span>$('#b-submit').click(function() {
</span> <span>var location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(saveOptions()));
</span> <span>document.location = location;
</span><span>});</span>Sobald wir die Suchanforderung verstanden und gespeichert haben, speichern wir sie im lokalen Speicher mit der oben erwähnten Fenster. Auf diese Weise wird es das nächste Mal dort sein, wenn sie die App öffnen.
<span>function getURLVariable(name) {
</span> name <span>= name.replace(<span>/<span><span>[\[]</span></span>/</span>,"\\[").replace(<span>/<span><span>[\]]</span></span>/</span>,"\\]");
</span> <span>var regexS = "[\?&]"+name+"=([^&#]*)",
</span> regex <span>= new RegExp(regexS),
</span> results <span>= regex.exec(window.location.href);
</span> <span>if (results == null) return "";
</span> <span>else return results[1];
</span><span>}</span>Jetzt haben wir die neue Einstellungsanforderung erhalten. Wir führen das Fenster.Navigator.Geolocation.WatchPosition () -Funktion erneut mit unserem neuen Wert aus. Dadurch werden unsere Geolocation -Suche gegen die Foursquare -API durchgeführt, wobei die neue angeforderte festgelegt wird, sobald sie das Einstellungsfenster schließen.
<span>$(document).ready(function() {
</span> <span>var priorSearch = getURLVariable('searchingFor');
</span> priorSearch <span>= decodeURI(priorSearch);
</span>
<span>if (priorSearch) {
</span> <span>$('#searchingFor').html(priorSearch);
</span> <span>}</span>Unser JavaScript versteht diese neue Einstellung jetzt, aber es gibt ein bisschen mehr zu tun.
unsere Datei find_me_anything.c muss nicht zu stark ändern. Ich habe die folgenden Ergänzungen und Änderungen vorgenommen.
Ich habe die Größe des Nachrichtenpuffers auf 124 Bytes erhöht. Ich glaube, dies ist das Maximum, das Sie auf die Kieseluhr bringen können. Die zusätzliche Puffergröße war so, dass ich potenziell größere Standortnamen und Abfragen senden konnte. Wir haben eine größere Variation der Datenlängen mit den neuen Einstellungen, daher möchten wir so viel Spielraum wie möglich bieten!
Die Änderung wurde zu Beginn der Datei vorgenommen, als sync_buffer definiert wurde:
<span>"capabilities": ["location", "configurable"]</span>
Es wurde auch in unserer Init () -Funktion weiter nach unten geändert, wenn wir unsere Nachrichtensynchronisierung öffnen:
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>Wir müssen auch unseren neuen Schlüssel hinzufügen, der zwischen dem Pebble JavaScript und dem C -Code übergeben wird: der Suche für die Einstellung. Im C -Code verfolgte ich die Konvention und verwendete aktivierte Buchstaben mit Unterstrichen, um die Wörter zu trennen. Wir definieren 1 als 0x1 in Hexadezimal, was bedeutet
<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span> </span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>
<span>$('#b-cancel').click(function() {
</span> <span>document.location = 'pebblejs://close';
</span><span>});</span>
<span>function saveOptions() {
</span> <span>var options = {
</span> <span>searchingFor: $('#searchingFor').val()
</span> <span>}
</span> <span>return options;
</span><span>}</span>
<span>$('#b-submit').click(function() {
</span> <span>var location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(saveOptions()));
</span> <span>document.location = location;
</span><span>});</span>Dank der Kraft des Pebblekit JavaScript -Frameworks lassen wir jetzt die Besitzer von Pebble Watch entscheiden, wie sie unsere App verwenden möchten. Es ist angepasst und persönlicher. Wir nutzen jetzt auch einen lokalen Speicher, damit unsere App sich an Dinge erinnern kann. Es ist eine viel wertvollere App als zuvor und wir verwenden das volle Ausmaß dessen, was JavaScript auf der Pebble -Uhr tun kann.
Schließlich können meine Benutzer jetzt eher ihre eigene Besessenheit als meine persönlichen Starbucks verwöhnen. Auch wenn Sie keine Uhr erstellen möchten, die Ihnen Adressen gibt, hat dieses Beispiel hoffentlich eine Anleitung zum Hinzufügen von Personalisierung zu Ihren eigenen Apps gegeben. Versuchen Sie, den Menschen ihren Hintergrund von Schwarz zu Weiß zu wechseln oder sie eine andere API oder einen anderen Feed zu wählen, um Daten auszuziehen. Lassen Sie sie sich für kleine Dinge entscheiden, die Ihre App letztendlich nur so ein bisschen nützlicher und ansprechender machen.
Nehmen Sie ein Wochenende frei, um wie Mad wie Mad zu codieren oder etwas in Ihrer Zugfahrt nach Hause zu codieren! Verwenden Sie dieses JavaScript -Wissen für etwas, das Sie nie für möglich gehalten haben, und haben Sie dabei eine Menge Spaß!
Was ist die Akkulaufzeit einer Kieseluhr? Verwendung. Die meisten Pebble -Uhren können jedoch zwischen 5 und 7 Tagen unter normalem Gebrauch zwischen 5 und 7 Tagen dauern. Faktoren wie die Anzahl der von Ihnen erhaltenen Benachrichtigungen, die von Ihnen verwendete Uhrengesicht und die Verwendung von Apps können die Akkulaufzeit beeinflussen.
Kann ich meine Kieseluhr mit einem iPhone verwenden? iOS -Geräte. Sie können Ihre Pebble -Uhr über Bluetooth an Ihr iPhone anschließen und die Pebble -App verwenden, um Einstellungen zu verwalten, Uhrenflächen zu installieren und mehr. Um Ihre Pebble -Uhr auf die Werkseinstellungen zurückzusetzen, gehen Sie zum Einstellungsmenü auf Ihrer Uhr und wählen Sie dann das System, gefolgt von "Factory Reset". Dadurch werden alle Daten und Einstellungen auf Ihrer Uhr gelöscht. Beachten Sie, dass diese Aktion nicht rückgängig gemacht werden kann.
Das obige ist der detaillierte Inhalt vonErweiterte Konfiguration von Pebble Watch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Unterschied zwischen vscode und Visual Studio
Welche privaten Informationen werden Douyins enge Freunde sehen?
Lösung für das Problem, dass exe-Dateien im Win10-System nicht geöffnet werden können
Gängige hexadezimale Farbcodes
Was ist eine .Xauthority-Datei?
So ändern Sie das Passwort in MySQL
So erhalten Sie die Länge eines Arrays in js
Befehlsverwendung konvertieren
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
