06-17-2018 07:14
06-17-2018 07:14
Hi!
Do you guys have any idea of how to add an custom png icon into
In the index.gui file I have an image like this:
<image id="stepsIcon" href="Images/heart-walk.png" load="sync" />
What I try do is to get this image into one variable. At the moment as an example I do this with an HTML heart icon as you can see below in the code. The reason for this is that I would like to "group" the icon and the text as one single element, so I can position this a bit easier, instead of having two element, one for the image and one for the text.
Any ideas?
const hrm = new HeartRateSensor();
hrm.onreading = function() {
currentHeartRate.text = ("♥ " + hrm.heartRate || 0);
currentSteps.text = (today.local.steps || 0 );
hrm.stop();
}
function updateOther() {
hrm.start();
}
setInterval(updateOther, 1000);
06-22-2018 23:12
06-22-2018 23:12
Hi! Yes you can group them inside a svg, like this:
<svg id="gr_23" > <image id="stepsIcon" href="..." load="sync" /> <text id="stepsLabel" /> </svg>
and then, in your styles.css, position them as desired
#gr_23 { x: 68%; y: 91; width: 33%; height: 24; } #stepsIcon { x: 0; y: 0; width: 24; height: 24; fill: red; } #stepsLabel { font-size: 24; font-family: System; text-length: 8; text-anchor: end; x: 100%; y: 100%; fill: red; }
The fun part? coordinates for the icon and label refer to the parent svg, so it's really easy to layout this ensemble.