Logic Machine Forum
Circularslider css - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Circularslider css (/showthread.php?tid=5000)

Circularslider css - Joep - 02.10.2023

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

RE: Circularslider css - AlexLV - 03.10.2023

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.5156,3/2023.10.03/10:24/1/3

BR,

Alex

RE: Circularslider css - admin - 03.10.2023

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

RE: Circularslider css - Joep - 03.10.2023

(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.5156,3/2023.10.03/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/showthread.php?tid=161&pid=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.

RE: Circularslider css - Joep - 03.10.2023

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


RE: Circularslider css - Fahd - 03.10.2023

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


RE: Circularslider css - Joep - 04.10.2023

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