Simulator Shows Black Screen - Page build() Function Not Called

[obaidr1]

Problem Description:

I am developing a new application for Zepp OS, but I am consistently unable to render any UI in the simulator. The screen remains black. Through extensive logging, I've confirmed that the build() function within my page/index.js file is never being executed. Even a console.log() at the top level of the file does not appear in the terminal logs, which suggests the file itself is not being loaded or run by the OS, despite the build process completing successfully.

Troubleshooting Steps Already Taken:

Code Simplification: Reduced the page code to an absolute minimal "Hello World" example.

Configuration Check: Verified that app.json correctly points to "page/index" in the pages array.

Dependency Reset: Deleted node_modules, dist, and package-lock.json, and ran npm install to get a clean slate.

CLI Restart: Have repeatedly stopped and restarted the zeus dev process.

Logging: Added extensive console.log and Logger.log statements, none of which appear in the terminal from the page/index.js file.

Relevant Files:

Here is my app.json file:

{
"configVersion": "v3",
"app": {
"appId": 23548,
"appName": "FertilityTracker",
"appType": "app",
"version": {
"code": 1,
"name": "1.0.0"
},
"icon": "icon.png",
"vender": "zepp",
"description": "Scientific fertility tracking app for Amazfit smartwatches"
},
"permissions": [
"sensor"
],
"runtime": {
"apiVersion": {
"compatible": "3.0.0",
"target": "3.0.0",
"minVersion": "3.0"
}
},
"targets": {
"default": {
"module": {
"page": {
"pages": [
"page/index"
]
},
"app-side": {
"path": "app-side/index"
},
"setting": {
"path": "setting/index"
}
},
"platforms": [
{
"st": "r",
"dw": 480
}
]
}
},
"i18n": {
"en-US": {
"appName": "FertilityTracker"
}
},
"defaultLanguage": "en-US"
}

And here is the final, minimal code for page/index.js that still results in a black screen:

import { ui as hmUI } from '@zos/ui'

// This log is at the top level. It does NOT appear in the terminal.
console.log('--- page/index.js file has been loaded ---');

Page({
build() {
// This log also does not appear.
console.log('--- Build function was called ---');

try {
  hmUI.createWidget(hmUI.widget.FILL_RECT, {
    x: 0,
    y: 0,
    w: 480,
    h: 480,
    color: 0xFFFFFF
  });

  hmUI.createWidget(hmUI.widget.TEXT, {
    x: 0,
    y: 200,
    w: 480,
    h: 80,
    text: 'It Works!',
    text_size: 48,
    color: 0x000000,
    align_h: hmUI.align.CENTER_H
  });

} catch (e) {
  console.log('--- CRITICAL ERROR during build ---');
  console.log(e.message);
}

},
onDestroy() {}
})

Any help or insight into what could be causing this environmental issue would be greatly appreciated. Thank you!

[zdunex25]

You use API version v3 yet you also use v1 resources.
Correct import line is:
import * as hmUI from "@zos/ui";

[zdunex25]

Or remove all: hmUI.

[obaidr1]

thank you. now everything is rendering again. Somehow adding the temp sensor broke everything:

import { localStorage } from '@zos/storage'
import { sensor as hmSensor, BodyTemperature } from '@zos/sensor'
import { getTemperatureUnit, TEMPERATURE_UNIT_CENTIGRADE } from '@zos/settings'

const app = new App({
  globalData: {
    temperatureUnit: getTemperatureUnit()
  },
  onCreate(options) {
    console.log("app on create invoke");
    this.loadData();

    const bodyTemperature = new BodyTemperature();

    hmSensor.enableSensor({
      sensor: hmSensor.SENSOR_TYPE_BODY_TEMPERATURE
    });

    hmSensor.onSensorDataChange({
      sensor: hmSensor.SENSOR_TYPE_BODY_TEMPERATURE,
      callback: (data) => {
        console.log('Temperature data:', data);
        this.globalData.temperature = data.temperature;
      }
    });
  },

  onDestroy(options) {
    console.log("app on destroy invoke");
    this.saveData();
  },

  saveData() {
    localStorage.setItem('cycleLength', this.globalData.cycleLength || 28);
    localStorage.setItem('fertilityGoal', this.globalData.fertilityGoal || '');
    localStorage.setItem('lastPeriod', this.globalData.lastPeriod || 0);
  },

  loadData() {
    this.globalData.cycleLength = localStorage.getItem('cycleLength') || 28;
    this.globalData.fertilityGoal = localStorage.getItem('fertilityGoal') || '';
    this.globalData.lastPeriod = localStorage.getItem('lastPeriod') || 0;
  }
})

I am developing for the GTR4

[obaidr1]

is there a good documentation where i can read this? the documentation for the devs is very underwhelming.

[zdunex25]

https://docs.zepp.com/docs/reference/device-app-api/newAPI/sensor/BodyTemperature/

[zdunex25]

This is how you start listening a sensor:

[zdunex25]

Temperature unit is for weather FYI. BodyTemp is only in 'C, but GTR4 is missing this sensor anyway.

[zdunex25]

Also there is not point reading weather sensor since it has been deprecated: https://github.com/orgs/zepp-health/discussions/83