Circularslider css

[Joep]

Hi all,

Does anyone know how to hide a complete circular slider except the current track value (red marked point of the slider track in the picture below). This is the current position of the sun / calculated azimut position. Best result would be to just show a small icon of a sun or otherwise a dot like the red marked dot in the picture.



Best regards,

Joep

[AlexLV]

Hi Joep,

cool idea to show at plan sun location. Can you explain a bit how you did at least this slider with sun location?

For sun location at your site is possible to use this useful resource:

https://www.suncalc.org/#/40.1789,-3.515.../10:24/1/3

BR,

Alex

[admin]

Instead of using circular slider you can rotate an icon with Custom JS: https://forum.logicmachine.net/showthread.php?tid=1831

[Joep]

Hi Joep,

cool idea to show at plan sun location. Can you explain a bit how you did at least this slider with sun location?

For sun location at your site is possible to use this useful resource:

https://www.suncalc.org/#/40.1789,-3.515.../10:24/1/3

BR,

Alex

Hi Alex,

Yes that's a useful API however i tested both this API and the below script from this forum. Both give the same result so i prefer to use the script.

https://forum.logicmachine.net/showthrea...673#pid673

---

Instead of using circular slider you can rotate an icon with Custom JS: https://forum.logicmachine.net/showthread.php?tid=1831

Yes i was thinking about that approche too but then i need to create an image with enough whitespace otherwise it would just rotate and don't follow the arc position.

[Joep]

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

[Fahd]

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

[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.