Circularslider css

[Joep]

Hi Joep, 

Can you share the icon ?

Here's the result using a rotated icon as the sun. I used the custom Javascript code below to make it work. The first code is to rotate the sun regarding the azimut value. The second code is to hide the sun icon when the altitude value has become 0.

Code:

$(function(){
  $('.azimut').each(function(i, el) {
    var $el = $(el), addr = $el.data('object'); // or 'status-object'

    grp.listen(addr, function(obj) {
      $el.each(function () {
        this.style.setProperty('transform', 'rotate(' + obj.value + 'deg)', 'important');
      });
    });
  });
});

Code:

$(function(){
  $('.altitude').each(function(i, el) {
    var $el = $(el), addr = $el.data('object'); // or 'status-object'

    grp.listen(addr, function(obj) {
      if (obj.value == 0) {
        $('.azimut').addClass('hide');
      } else {
        $('.azimut').removeClass('hide');
      }
    });
  });
});

Attached the icon. It has a lot of whitespace otherwise it wound follow the arc of the Azimut when rotating.