07-29-2018 10:00
07-29-2018 10:00
I have successfully created a watch face for my Ionic, and have my current pulse rate as the central item.
What I want to do is make it "flash" so switch between bold and normal twice per second
I know this should be possible but am struggling for any guides of sample code that will achieve this
Any ideas
Answered! Go to the Best Answer.
07-29-2018 10:15
07-29-2018 10:15
Thanks for the speedy response, I will give that a go and report back on how I get on
07-29-2018 10:07
07-29-2018 10:07
Probably the easiest way would be to have 2 text elements, one bold, one not. Then toggle the visibility of each.
https://dev.fitbit.com/build/guides/user-interface/javascript/#hiding-showing-an-element
You can use setInterval() to to make it happen every 500ms, but make sure you stop the timer when the screen is turned off, otherwise it will drain the battery.
Something like:
import { display } from "display"; let myTimer = { watchID: null, start: function() { if (!this.watchID) { this.watchID = setInterval(this.doInterval.bind(this), 500); } }, stop: function() { clearInterval(this.watchID); this.watchID = null; }, doInterval: function() { // TOGGLE ELEMENTS HERE }, wake: function() { this.doInterval(); this.start(); } } myTimer.start(); display.onchange = function() { if (display.on) { myTimer.wake(); } else { myTimer.stop(); } }
07-29-2018 10:15
07-29-2018 10:15
Thanks for the speedy response, I will give that a go and report back on how I get on
07-30-2018 00:36
07-30-2018 00:36
Thanks for your pointers, the link to the animation page in particular helped. I solved the requirement by adding this code to index.gui, which put a flashing heart symbol in front of the HR value
<image x="55" y="40%" fill="red" href="Heart.png" height="48" width="48" load="sync" >
<animate attributeName="fill-opacity" begin="load" repeatCount="indefinite" from="1" to="0.5" dur="1" />
</image>