Pour tous ceux qui ont regardé les Rangers de Power comme un enfant et rêvaient d'avoir une montre de fantaisie qui les faisait se sentir comme un super-héros, les montres intelligentes sont un rêve devenu réalité. Je suis peut-être l'un des rêveurs de Power Ranger susmentionnés. Combinez cela avec les envies de développeur qui remplissent mes veines et vous avez un enfant des années 90 qui deviendra bientôt un scientifique gris et fou comme le docteur Emmett Brown de «Back to the Future».
J'ai récemment écrit un article sur les bases de Pebble Watch Development avec JavaScript. En résumé, nous avons fait un Watchface qui a utilisé l'API Foursquare pour dire à l'utilisateur où se trouvait leur Starbucks le plus proche. C'est à quoi cela ressemblait en action:
J'ai mentionné qu'il y avait un peu plus qui était possible avec JavaScript que je ne pouvais pas couvrir dans cet article. Ceci est mon suivi qui couvrira les autres fonctionnalités du framework JavaScript Pebblekit.
Dans cet article, je couvrirai comment étendre l'application "Find Me Starbucks" que nous avons développée dans l'article précédent pour permettre à l'utilisateur de choisir le type de localisation que l'application trouvera pour eux. Tout le monde n'est pas un grand fan de Starbucks que moi! Nous allons ajouter un écran de configuration qui leur permettra de saisir leur propre place d'intérêt et d'enregistrer ce paramètre à chaque fois qu'ils utilisent l'application.
Si vous cherchez à suivre ce tutoriel, vous aurez besoin:
Plutôt que de jeter tout le code de notre dernier tutoriel dans cet article, vous pouvez consulter le code pour «Find Me Starbucks» sur GitHub ou lire le tutoriel précédent. Le code de notre application mis à jour est également disponible sur «Find Me Anything» sur GitHub, donc si vous souhaitez télécharger le code et suivre - n'hésitez pas à!
Avant l'introduction du framework JavaScript Pebblekit dans la version 2.0 du SDK, les applications Pebble devaient faire installer une application compagnon sur le téléphone de l'utilisateur afin d'accepter tout paramètre personnalisé. Si un utilisateur voulait qu'une application météorologique lui montre la météo à Celsius plutôt que Fahrenheit, il devrait d'abord installer l'application compagnon et ouvrir cela pour modifier les paramètres (ou avoir une fenêtre de paramètres bruts sur l'application WatchFace elle-même).
Avec le nouveau SDK, nous pouvons désormais définir une page de configuration qui sera accessible dans l'application Android / iOS de Pebble elle-même. Les paramètres sont accessibles au même endroit que l'endroit où l'utilisateur va installer et organiser ses applications de montre. Plus propre et plus logique du point de vue d'un utilisateur.
Le JavaScript du nouveau SDK utilise également la recommandation W3C pour le stockage Web, vous permettant de stocker des paramètres dans l'application pour une utilisation future. Si l'utilisateur demande à avoir ce paramètre Celsius / Fahreinheit, nous pouvons utiliser le stockage Web pour se souvenir de la préférence de l'utilisateur. Dans notre cas, nous voulons stocker le type d'emplacement qui l'intéresse.
La page Paramètres est une seule page sur le Web qui contient un formulaire pour basculer les paramètres de votre application. Le javascript de votre application attend que tous les paramètres ajustés soient soumis via le formulaire au JavaScript de votre application et stocke les paramètres qu'il reçoit dans le stockage local.
Sonne déroutante? Ce n'est pas une configuration idéale pour certains cas, car cela signifie que vous devez héberger votre propre page de paramètres quelque part sur le Web pour que d'autres puissent accéder. Il semble que Pebble prévoit d'avoir la possibilité de regrouper cette page Paramètres avec l'application à l'avenir, ce qui serait idéal pour certaines applications. La configuration actuelle est livrée avec des avantages - si vous souhaitez Reskin ou ajuster quelque chose sur la page Paramètres seul, il n'est pas nécessaire de mettre à jour l'application elle-même car la page Paramètres est indépendante.
Tout d'abord, pour activer la page Paramètres de votre application, nous ajoutons "Configurable" au tableau Capacités que nous avons précédemment utilisé pour définir l'accès à l'API de géolocalisation via le mot-clé "emplacement":
<span>"capabilities": ["location", "configurable"]</span>
Nous ajoutons également une clé supplémentaire pour que notre application utilise appelée "SearchingFor", ce sera la chaîne qui sera soit "Starbucks", soit un type d'emplacement personnalisé que l'utilisateur demande:
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>Comme mentionné ci-dessus, vous devrez héberger une page Web avec un formulaire pour l'utilisateur pour modifier ce qu'il recherche. Mon seul ressemble à:
Le HTML de base auquel vous aurez besoin ressemble à SO (j'ai supprimé mon style et mon balisage lié au framework pour la simplicité):
<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>
Nous utilisons ensuite JavaScript sur notre page de paramètres pour soumettre toutes les modifications au JavaScript de notre galet et pour pré-remplir les paramètres actuels de l'utilisateur.
Nous fournissons deux options, ils peuvent annuler - empêcher l'une de leurs modifications d'économiser ou ils peuvent soumettre le formulaire qui transmet ces modifications dans l'application à enregistrer.
Pour annuler leurs modifications, nous définissons le document.Location sur Pebblejs: // Close. Cela enverra une réponse vide à notre code JavaScript Pebble qui ne changera rien:
<span>$('#b-cancel').click(function() {
</span> <span>document.location = 'pebblejs://close';
</span><span>});</span>S'ils choisissent de soumettre leurs modifications, nous passons dans l'entrée de la TextArea dans une chaîne. La fonction SaveOptions () ci-dessous met la valeur de la TextArea dans un objet:
<span>function saveOptions() {
</span> <span>var options = {
</span> <span>searchingFor: $('#searchingFor').val()
</span> <span>}
</span> <span>return options;
</span><span>}</span>Notre fonction de clic soumet nos données en transformant l'objet en une chaîne et en codant ses caractères afin que nous puissions le placer dans l'URL que nous cibler avec Document.Location (tous les espaces seront codés, tout autre caractère spécial changer):
<span>$('#b-submit').click(function() {
</span> <span>var location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(saveOptions()));
</span> <span>document.location = location;
</span><span>});</span>qui enverra avec succès les paramètres que nous voulons au galet JavaScript.
Si l'utilisateur a déjà modifié les paramètres, disons qu'il a déjà demandé que l'application les trouve à la place Gelato, nous voulons que leur réglage précédent de "gelato" apparaisse dans le TextField lorsqu'il ouvrira le paramètres. Pour ce faire, nous enverrons la page de configuration HTML une variable dans l'URL appelée SearchingFor. Un exemple de cela serait l'URL http://www.yourpebbleappsettingpage.com?searchingfor=gelato.
J'ai une fonction que j'ai trouvée il y a longtemps que je réutilise pas mal pour obtenir des variables des URL:
<span>"capabilities": ["location", "configurable"]</span>
Lorsque la page est prête, nous vérifions une variable et placez le texte de cette variable dans notre champ de texte. La variable est décodée de sorte que tous les caractères formatés pour fonctionner dans une chaîne d'URL apparaissent correctement dans la TextArea. Pour ce faire, nous utilisons la fonction decodeuri (). Cela renverra nos caractères et d'autres personnages spéciaux en leurs caractères réels pour l'affichage:
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>N'hésitez pas à coiffer cet écran pour le rendre joli et saisissant les yeux! Vous pouvez le structurer et le styliser, mais vous préférez car il s'agit d'une page HTML plate. La page de paramètres d'exemple de galets a utilisé jQuery Mobile, donc je suis resté avec cela et je suis juste resté pour le rendre plus net. Utilisez n'importe quel cadre frontal ou validation JavaScript que vous souhaitez. La puissance vous appartient!
Notre application Pebble sait que nous voulons permettre que les paramètres soient modifiés, nous l'avons dit que dans notre fichier appinfo.json. Nous avons même une belle page de configuration maintenant pour notre application qui semble prometteuse. Le problème est - notre application Pebble ne sait pas où trouver cet écran de configuration que nous l'avons promis. Il ne sait même pas où nous voulons utiliser cette recherche pour les données que nous envoyons - seulement que nous avons l'intention d'en avoir une. C'est là que nous mettons à jour notre fichier Pebble-js-pp.js pour tout connecter.
Pour commencer, nous aurons besoin d'une nouvelle variable dans notre JavaScript. Appelons cela la recherche pour correspondre à notre clé dans le fichier appinfo.json (il n'est pas nécessaire de le nommer de la même manière, mais pour la cohérence et la clarté, je l'ai fait). Ce que cette variable devra faire, c'est stocker la préférence de l'utilisateur sur le type de lieu que nous rechercherons pendant qu'ils allaient à leurs paroles de vies quotidiennes.
Pour enregistrer les préférences de nos utilisateurs dans notre application, nous avons accès à l'API LocalStorage que Pebble nous fournit. Pebble a la gentillesse de suivre la recommandation W3C pour le stockage Web, donc la syntaxe ne sera pas trop étrangère à quiconque a travaillé avec le stockage Web dans le passé. Pour stocker quelque chose dans le stockage local, nous appelons:
<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>
pour le récupérer:
<span>"capabilities": ["location", "configurable"]</span>
Donc, dans notre cas, nous voulons stocker nos données de recherche dans le stockage local de notre application Pebble. Nous utiliserons une variable JavaScript pour y accéder dans toute notre application, mais dans les moments où nous chargeons l'application ou revenons de l'écran de configuration, nous définirons cette variable de recherche à partir de notre stockage local.
Nous examinerons notre stockage local au moment où notre JavaScript exécute. S'il ne trouve pas nos données de recherche dans le stockage local, nous définissons la valeur par défaut sur «Starbucks». Ceci est parfaitement placé après notre définition de localisation au début du fichier de galets-js-app.js.
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>Nous ajoutons ensuite cette variable à notre demande Ajax à la place du Starbucks Mention:
<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>
Jusqu'à présent, notre application fera la même chose que celle précédemment - nous trouvera Starbucks. Nous devons lui faire savoir quoi faire lorsqu'un utilisateur appuie sur ce bouton «Paramètres» pour votre application. Nous le faisons avec l'écouteur de l'événement ShowConfiguration:
<span>$('#b-cancel').click(function() {
</span> <span>document.location = 'pebblejs://close';
</span><span>});</span>qui amènera l'utilisateur à votre page avec le formulaire pour remplir ces paramètres. Lorsqu'ils soumettent leurs nouveaux paramètres (par exemple, «Gelato» comme mentionné ci-dessus), nous voulons que notre javascript dans Pebble-Js-pp.js soit prêt et attend ces données.
Pour ce faire, nous utilisons l'écouteur d'événements WebViewClosed. Ici, nous le décodons de notre chaîne URI (la version codée avec pour les espaces et autres) et l'analyser dans un objet JSON une fois de plus. Nous obtenons la valeur de recherche de cet objet JSON et le codons une fois de plus maintenant, il est hors de notre chaîne JSON. Ce dernier encodage est de le stocker prêt à être placé dans la chaîne URL pour l'appel de l'API Foursquare discuté plus tôt (le https://api.foursquare.com/v2/venues/search?client_id= 'ClientId' & Client_Secret = ' '& v =' version '& ll =' latitude ',' longitude '& query =' search pour la demande):
<span>function saveOptions() {
</span> <span>var options = {
</span> <span>searchingFor: $('#searchingFor').val()
</span> <span>}
</span> <span>return options;
</span><span>}</span>Si notre valeur est non définie (il semble y avoir un certain nombre de raisons que cela pourrait se produire mais ce sont des cas de pointe), j'ai un dernier recours à le retourner à "Starbucks". Il y aurait probablement une plus belle façon de gérer cela à l'avenir, potentiellement avec une erreur, mais pour garder les choses simples pour cette démo, je suis allé défaut à Starbucks dans le pire des cas:
<span>$('#b-submit').click(function() {
</span> <span>var location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(saveOptions()));
</span> <span>document.location = location;
</span><span>});</span>Une fois que nous avons la recherche de recherche comprise et prête à stocker, nous la stockons dans le stockage local à l'aide de la fonction Window.Localstorage.SetItem () mentionnée ci-dessus. De cette façon, il sera toujours là la prochaine fois qu'ils ouvriront l'application.
<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>Maintenant, nous avons reçu la nouvelle demande de réglage, nous exécutons à nouveau la fonction Window.navigator.Geolocation.WatchPosition () avec notre nouvelle valeur. Cela effectuera notre recherche de géolocalisation contre l'API Foursquare avec leur nouveau réglage demandé au moment où ils ferment la fenêtre des paramètres.
<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>Notre javascript comprend maintenant ce nouveau paramètre, mais il y a un peu plus à faire.
Notre fichier find_me_anything.c n'a pas besoin de changer trop. J'ai fait les ajouts et modifications suivants.
J'ai augmenté la taille du tampon de message à 124 octets. Je crois que c'est le maximum que vous pouvez l'apporter sur la montre Pebble. La taille de tampon supplémentaire était pour que je puisse envoyer des noms de localisation et des requêtes potentiellement plus grands. Nous avons une plus grande variation des longueurs de données qui en découlent avec les nouveaux paramètres, nous voulons donc fournir autant de latitude que possible!
Le changement a été effectué au début du fichier lorsque Sync_Buffer a été défini:
<span>"capabilities": ["location", "configurable"]</span>
Il a également été modifié plus loin dans notre fonction init () lorsque nous ouvrons notre synchronisation de message:
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>Nous devons également ajouter notre nouvelle clé qui sera transmise entre le JavaScript Pebble et le code C: le paramètre de recherche. Dans le code C, j'ai suivi la convention et utilisé des lettres capitalisées avec des soulignements pour séparer les mots. Nous définissons 1 comme 0x1 en hexadécimal, ce qui signifie que nous pouvons maintenant nous référer à Searching_For lorsque vous mentionnons la deuxième paire de clés / valeur dans notre code C:
<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>
J'ai mis à jour la fonction init_location_search () afin qu'elle définisse notre valeur initiale pour la valeur de recherche_ pour ''. Il est vide car cela sera rempli une fois que notre javascript entrera en jeu et indique à C ce que nous recherchons.
<span>$('#b-cancel').click(function() {
</span> <span>document.location = 'pebblejs://close';
</span><span>});</span>Enfin, nous mettons à jour notre fonction sync_tuple_changed_callback () afin qu'il sache répondre lorsqu'il reçoit une deuxième touche / valeur de valeur mise à jour. Quand c'est le cas, tout ce dont nous avons besoin du code C est de modifier l'étiquette sur la montre pour dire «gelato la plus proche» ou quel que soit leur nouveau paramètre, plutôt que «Starbucks le plus proche»:
<span>function saveOptions() {
</span> <span>var options = {
</span> <span>searchingFor: $('#searchingFor').val()
</span> <span>}
</span> <span>return options;
</span><span>}</span>Avec cela en place, vous devriez maintenant pouvoir modifier les paramètres de votre application à l'aide de la fenêtre de configuration. Lorsque vous soumettez vos paramètres, l'application Pebble doit mettre à jour et vous aurez une application personnalisée comme SO:
Une chose que j'ai découverte lors de la mise en œuvre de cette nouvelle fonctionnalité est que parfois l'API Foursquare n'a pas réellement d'adresse ou les valeurs dont nous avons besoin dans chaque site. Certains sites manquent ces données. Cela renvoie «indéfini» lorsque nous l'affichons sur la montre. Pas bon! J'ai donc réécrit un peu de notre fonction de charge pour vérifier nos entrées et utiliser la première qui avait une adresse et une ville:
<span>$('#b-submit').click(function() {
</span> <span>var location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(saveOptions()));
</span> <span>document.location = location;
</span><span>});</span>Ce que j'ai fait ci-dessus est de configurer une variable appelée lieu qui commence comme indéfinie. J'imagine chaque élément dans la réponse 🎜>
Grâce à la puissance du framework JavaScript Pebblekit, nous permettons maintenant aux propriétaires de GEPBLE Watch décider comment ils aimeraient utiliser notre application. Il est personnalisé et plus personnel. Nous utilisons également maintenant le stockage local, afin que notre application puisse se souvenir des choses. C'est une application beaucoup plus précieuse qu'auparavant et nous utilisons toute l'étendue de ce que JavaScript peut faire sur la montre Pebble.
Enfin, mes utilisateurs peuvent désormais se livrer à leur propre obsession, plutôt que mon Starbucks personnel. Même si vous ne faites pas une horloge qui vous donne des adresses, j'espère que cet exemple a donné quelques conseils sur l'ajout de personnalisation à vos propres applications. Essayez de laisser les gens changer de fond du noir au blanc ou de leur laisser choisir une API ou un flux différent pour tirer des données. Laissez-les décider de petites choses, ce qui rend finalement votre application un peu plus utile et engageant.
Prenez un week-end pour coder comme fou ou coder quelque chose sur votre train à la maison! Utilisez ces connaissances JavaScript pour quelque chose que vous n'avez jamais cru possible et vous amusez dans le processus!
La mise à jour de votre montre de galets vers le dernier firmware est un processus simple. Tout d'abord, assurez-vous que votre montre est connectée à votre smartphone via Bluetooth. Ensuite, ouvrez l'application Pebble sur votre smartphone. Si une mise à jour est disponible, une notification vous invitera à l'installer. Suivez simplement les instructions à l'écran pour terminer la mise à jour. N'oubliez pas de garder votre montre près de votre smartphone pendant le processus de mise à jour pour maintenir une connexion stable.
Oui, vous pouvez personnaliser le visage de la montre sur votre montre de galets. Il existe de nombreux visages de montre disponibles en téléchargement sur le Pebble App Store. Une fois que vous avez choisi un visage de montre, vous pouvez l'installer sur votre montre via l'application Pebble sur votre smartphone. Certains faces de montre vous permettent également de personnaliser des éléments tels que la couleur et la mise en page.
La durée de vie de la batterie d'une montre à galets varie en fonction du modèle et usage. Cependant, la plupart des montres de galets peuvent durer entre 5 et 7 jours sur une seule charge sous une utilisation normale. Des facteurs tels que le nombre de notifications que vous recevez, le visage de la montre que vous utilisez et l'utilisation des applications peut affecter la durée de vie de la batterie.
Il existe plusieurs façons de prolonger la durée de vie de la batterie de votre montre de galets. Ceux-ci incluent la réduction du nombre de notifications que vous recevez, en utilisant un visage de montre simple et des fonctionnalités de désactivation que vous n'utilisez pas souvent. De plus, assurez-vous que votre logiciel de montre est à jour, car les mises à jour incluent souvent des optimisations pour améliorer la durée de vie de la batterie.
Oui, toutes les montres de galets sont résistantes à l'eau . Ils peuvent résister à être submergés dans l'eau jusqu'à 30 mètres de profondeur. Cela les rend adaptés à des activités telles que la natation et la douche. Cependant, ils ne sont pas conçus pour la plongée en haute hauteère ou les sports nautiques à fort impact.
Oui, les montres Pebble sont compatibles avec Android et Appareils iOS. Vous pouvez connecter votre montre de galets à votre iPhone via Bluetooth et utiliser l'application Pebble pour gérer les paramètres, installer des faces de montre, et plus encore.
Pour réinitialiser votre montre de galet aux paramètres d'usine, accédez au menu des paramètres de votre montre, puis sélectionnez «Système», suivi de «réinitialisation d'usine». Cela effacera toutes les données et paramètres de votre montre. Notez que cette action ne peut pas être annulée.
Oui, vous pouvez utiliser des applications sur votre montre de galets. Il existe de nombreuses applications disponibles en téléchargement à partir de The Pebble App Store, notamment des trackers de fitness, des jeux et des outils de productivité. Vous pouvez installer des applications sur votre montre via l'application Pebble sur votre smartphone.
Si votre montre Pebble ne se synchronise pas avec Votre smartphone, essayez les étapes suivantes: assurez-vous que votre montre et votre smartphone sont à portée les uns des autres. Vérifiez que Bluetooth est activé sur les deux appareils. Essayez de redémarrer à la fois votre montre et votre smartphone. Si le problème persiste, essayez de vous impatienter, puis de redémarrer votre montre et votre smartphone.
pour prendre soin de votre montre à galets, nettoyez-le régulièrement avec un tissu doux et savon doux. Évitez de l'exposer à des températures extrêmes ou à des produits chimiques durs. Lorsqu'il n'est pas utilisé, conservez-le dans un endroit frais et sec. Mettez régulièrement à jour le logiciel de surveillance pour s'assurer qu'il continue de fonctionner de manière optimale.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment vérifier la mémoire vidéo de Win11
Tutoriel du portefeuille Eou web3
Comment définir un écran large ppt
Que diriez-vous de l'échange MEX
Comment résoudre l'erreur 504 dans CDN
Utilisation de strncpy
Auto-apprentissage pour débutants en langage C sans fondement
commande de capture de paquets Linux
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
