- Hi there,
I am just starting out making my first watch face and these forums have been incredibly helpful - just wanted to say thanks to the community for this!
For context in my watch face I am trying to recreate Lukes Targeting Computer from episode 4, where when looking at my watch face I want to animate the two red lines to move towards the center of the grid. I have loaded my grid as a .png and that appears fine, I have also been able to draw a rectangle that lines up with my grid. However when trying to use a timer to move the line horizontally onExitSleep nothing appears to be happening. I wasnt sure whether I was missing something painfully obvious in the simulator or whether my code (in which my knowledge is very shallow as I predominantly use visual scripting languages like blueprinting in unreal) is wrong.
If anyone is able to shed any light on whether I am close or am completely down the wrong street it would be greatly appreciated!
I am specifically looking to build for personal use on my vivoactive 5.
Please see code below - sorry tried posting as a snippet but the forum would not allow it, not sure why!
class SW_Luke_TargettingComputerView extends WatchUi.WatchFace {
var backgroundimage;
var leftRedLine;
var rightRedLine;
var filmeffect;
var startX = 65; // Initial X position
var startY = 75;
var endX = startX;
var targetX = startX + 120; // Target X position after wake-up
var animationRunning = false;
var animationStep = 5; // Pixels per frame
var timer;
function initialize() {
WatchFace.initialize();
}
// Load your resources here
function onLayout(dc as Dc) as Void {
setLayout(Rez.Layouts.WatchFace(dc));
backgroundimage = WatchUi.loadResource(Rez.Drawables.BackgroundImage_RS);
filmeffect = WatchUi.loadResource(Rez.Drawables.FilmEffect);
}
// Update the view
function onUpdate(dc as Dc) as Void {
var date = Gregorian.info(Time.now(), Time.FORMAT_SHORT);
var systemstats = System.getSystemStats();
var activitystats = ActivityMonitor.getInfo();
var datetext = View.findDrawableById("Date") as Text;
var hoursminstext = View.findDrawableById("HoursMinutes") as Text;
var secondstext = View.findDrawableById("Seconds") as Text;
var batterytext = View.findDrawableById("Battery") as Text;
var stepstext = View.findDrawableById("Steps") as Text;
datetext.setText( "{" + date.day.format("%02d") + "-" + date.month.format("%02d") + "{");
hoursminstext.setText(date.hour.format("%02d") + ":" + date.min.format("%02d"));
secondstext.setText(date.sec.format("%02d"));
batterytext.setText(systemstats.battery.format("%d") + "%");
stepstext.setText(activitystats.steps.format("%05d"));
// Draw the background color first
dc.setColor(Graphics.COLOR_BLACK,Graphics.COLOR_BLACK);
dc.clear();
dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_TRANSPARENT);
dc.fillRectangle(endX, startY, 4, 160); // Draw a 4px wide red line
dc.drawBitmap(0,0,backgroundimage);
datetext.draw(dc);
hoursminstext.draw(dc);
secondstext.draw(dc);
batterytext.draw(dc);
stepstext.draw(dc);
dc.drawBitmap(0,0,filmeffect);
}
// The user has just looked at their watch. Timers and animations may be started here.
function onExitSleep() as Void {
if (!animationRunning) {
animationRunning = true;
//stop existing timer before starting new one
if (timer != null) {
timer.stop();
timer = null;
}
timer = new Timer.Timer();
timer.start(method(:animateLine), 100,true);
}
}
function animateLine() as Void {
if (endX < targetX) {
endX += animationStep;
if (endX > targetX) {
endX = targetX;
}
WatchUi.requestUpdate();
} else {
animationRunning = false;
if (timer != null) {
timer.stop();
timer = null;
}
timer.stop(); // Stop the timer when animation is complete
}
}
// Terminate any active timers and prepare for slow updates.
function onEnterSleep() as Void {
if (timer != null) {
timer.stop();
timer = null;
}
animationRunning = false;
endX = startX;
WatchUi.requestUpdate();
}
}