Companion App Background Picture

[JLHedge]

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

[Gondwana]

app/index.js doesn't seem to have any code to handle receiving the file and displaying it.

[JLHedge]

Thank you. Is there an example I can use for that code

Get Outlook for Android

[JLHedge]

Thank you.  Is there an example I can use for that code?  I'm still really new to this

[Gondwana]

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

[JLHedge]

Thank you.  I will check it out