This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Circularslider css
#1
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.

[Image: azimut.png]

Best regards,

Joep
Reply
#2
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
Reply
#3
Instead of using circular slider you can rotate an icon with Custom JS: https://forum.logicmachine.net/showthread.php?tid=1831
Reply
#4
(03.10.2023, 07:25)AlexLV Wrote: 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

(03.10.2023, 07:31)admin Wrote: 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.
Reply
#5
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.

[Image: azimut.png]

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');
      }
    });
  });
});
Reply
#6
Hi Joep, 

Can you share the icon ?


(03.10.2023, 13:54)Joep Wrote: 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.

[Image: azimut.png]

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');
      }
    });
  });
});
Reply
#7
(03.10.2023, 16:51)Fahd Wrote: Hi Joep, 

Can you share the icon ?


(03.10.2023, 13:54)Joep Wrote: 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.

[Image: azimut.png]

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.

Attached Files Thumbnail(s)
   
Reply


Forum Jump: