group text and icon

[Cstahl]

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

[FlorinI]

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.