06-02-2019 12:32
06-02-2019 12:32
Hi - I'm pretty new to this (something you're probably tired of reading)
I'm trying to just get this set up so the Companion App can change the background picture. My code is very similar to that of the the demo I seen but I still cannot seem to get it to change the background in the simulator. Could someone offer some help with what I'm doing incorrectly in my code? Effectively just looking for direction
Thank you
Breaking the code down by folder
/* app/index.js */
import clock from "clock"; import document from "document"; import { preferences } from "user-settings"; import * as util from "../common/utils"; // Update the clock every minute clock.granularity = "minutes"; // Get a handle on the <text> element const myLabel = document.getElementById("myLabel"); // Update the <text> element every tick with the current time clock.ontick = (evt) => { let today = evt.date; let hours = today.getHours(); if (preferences.clockDisplay === "12h") { // 12h format hours = hours % 12 || 12; } else { // 24h format hours = util.zeroPad(hours); } let mins = util.zeroPad(today.getMinutes()); myLabel.text = `${hours}:${mins}`; }
/* common/utils.js */
// Add zero in front of numbers < 10 export function zeroPad(i) { if (i < 10) { i = "0" + i; } return i; }
/* companion/index.js */
import { device } from "peer"; import { settingsStorage } from "settings"; import { outbox } from "file-transfer"; import { Image } from "image"; settingsStorage.setItem("screenWidth", device.screen.width); settingsStorage.setItem("screenHeight", device.screen.height); settingsStorage.onchange = function(evt) { if (evt.key === "background-image") { compressAndTransferImage(evt.newValue); } }; function compressAndTransferImage(settingsValue) { const imageData = JSON.parse(settingsValue); Image.from(imageData.imageUri) .then(image => image.export("image/jpeg", { background: "#FFFFFF", quality: 40 }) ) .then(buffer => outbox.enqueue(`${Date.now()}.jpg`, buffer)) .then(fileTransfer => { console.log(`Enqueued ${fileTransfer.name}`); }); }
/* resources/index.gui */
<svg class="background"> <text id="myLabel" /> </svg>
/* resources/styles.css */
.background { viewport-fill: red; } #myLabel { font-size: 80; font-family: System-Bold; text-length: 32; text-anchor: middle; x: 50%; y: 50%+40; fill: white; }
/* resources/widgets.gui */
<svg> <defs> <link rel="stylesheet" href="styles.css" /> <link rel="import" href="/mnt/sysassets/widgets_common.gui" /> </defs> </svg>
/* settings/index.js */
function mySettings(props) { let screenWidth = props.settingsStorage.getItem("screenWidth"); let screenHeight = props.settingsStorage.getItem("screenHeight"); return ( <Page> <ImagePicker title="Background Image" description="Pick an image to use as your background." label="Pick a Background Image" sublabel="Background image picker" settingsKey="background-image" imageWidth={ screenWidth } imageHeight={ screenHeight } /> </Page> ); } registerSettingsPage(mySettings);
06-02-2019 13:39
06-02-2019 13:39
app/index.js doesn't seem to have any code to handle receiving the file and displaying it.
06-02-2019 13:42
06-02-2019 13:42
06-02-2019 13:50
06-02-2019 13:50
Thank you. Is there an example I can use for that code? I'm still really new to this
06-02-2019 13:50
06-02-2019 13:50
There is, somewhere, but I can't find it immediately. Try https://github.com/Fitbit/sdk-image-clock or https://github.com/fitbit/sdk-photo-picker
06-02-2019 13:51
06-02-2019 13:51
Thank you. I will check it out