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);
Best Answer
