This forum uses cookies

Fahd · 28.10.2022, 06:10

Hi,

I just started learning the CSS and I'm using this class to change the look of the background of a value

Quote:.item-bgm {
padding: 40px;
border-radius: 200px;
background: repeating-radial-gradient(#2babec, transparent 150px);
display:block;
width:3.5px;
height:3.5px;
line-height:22px;
border: 2px solid #f5f5f5;
border-radius: 50%;
box-shadow: 0 0 3px gray;
font-weight:bold;
align-items: flex-end;
justify-content: center;
display: flex;
}

Whatever I write over that background it will display below it, please see attached

***admin*** · 31.10.2022, 07:13

Try adding z-index: 1 !important; to .item-bgm styles.

Fahd · (This post was last modified: 31.10.2022, 07:45 by Fahd.)

(31.10.2022, 07:13)admin Wrote: Try adding z-index: 1 !important; to .item-bgm styles.

It works, thanks a lot,

I'm changing the background color of the .item-bgm style with this JS

Code:
$(function() {
  $('.item-bgm').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var value = obj.value
          , background = 'repeating-radial-gradient(red, transparent 150px)'; // default color

        if (value > 0 && value < 20 ) {
          background = 'repeating-radial-gradient(#0CAFFF, transparent 150px)';
        }
        else if (value >= 20 && value <= 23) {
          background = 'repeating-radial-gradient(#1DB954, transparent 150px)';
        }
        else if (value > 23 && value < 99) {
          background = 'repeating-radial-gradient(#7C0A02, transparent 150px)';
        }

        $(el).css('background', background);
      });
    }
  });
});

I want to know if it is possible to change the border color of the css style depending on the mode of the thermostat,
Heating Value - 1byte object
Cooling Value - 1byte object
If heating > 0 then
border: 2px solid red
else if
cooling > 0 then
border: 2px solid blue
else if cooling == 0 and heating == 0 then
border: 2px solid white

(31.10.2022, 07:33)Fahd Wrote:
(31.10.2022, 07:13)admin Wrote: Try adding z-index: 1 !important; to .item-bgm styles.

It works, thanks a lot,

I'm changing the background color of the .item-bgm style with this JS

Code:
$(function() { $('.item-bgm').each(function(_, el) { var addr = $(el).data('object'); if (addr) { grp.listen(addr, function(obj) { var value = obj.value , background = 'repeating-radial-gradient(red, transparent 150px)'; // default color if (value > 0 && value < 20 ) { background = 'repeating-radial-gradient(#0CAFFF, transparent 150px)'; } else if (value >= 20 && value <= 23) { background = 'repeating-radial-gradient(#1DB954, transparent 150px)'; } else if (value > 23 && value < 99) { background = 'repeating-radial-gradient(#7C0A02, transparent 150px)'; } $(el).css('background', background); }); } }); });
I want to know if it is possible to change the border color of the css style depending on the mode of the thermostat,
Heating Value - 1byte object
Cooling Value - 1byte object
If heating > 0 then
border: 2px solid red
else if
cooling > 0 then
border: 2px solid blue
else if cooling == 0 and heating == 0 then
border: 2px solid white

When I click on the temp it will display a widget.
The heating and cooing values are on the widget

***admin*** · 31.10.2022, 12:06

Single function can be used if setpoint / heating / cooling addresses have a common scheme where heating / cooling address can be calculated from the setpoint address. Otherwise you will need multiple grp.listen functions where you have to manually specify listening addresses for heating / cooling and the relevant elements to which to apply the styles.

Fahd · (This post was last modified: 31.10.2022, 12:12 by Fahd.)

(31.10.2022, 12:06)admin Wrote: Single function can be used if setpoint / heating / cooling addresses have a common scheme where heating / cooling address can be calculated from the setpoint address. Otherwise you will need multiple grp.listen functions where you have to manually specify listening addresses for heating / cooling and the relevant elements to which to apply the styles.

Yes, they have the same scheme,
The temp is 17/0/x
Heating value is 18/1/x
Cooling value is 18/3/x
( x is the office number)

***admin*** · 31.10.2022, 13:22

Try this:

Code:
$(function() {
  $('.item-bgm').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var value = obj.value
          , background = 'repeating-radial-gradient(red, transparent 150px)'; // default color

        if (value > 0 && value < 20 ) {
          background = 'repeating-radial-gradient(#0CAFFF, transparent 150px)';
        }
        else if (value >= 20 && value <= 23) {
          background = 'repeating-radial-gradient(#1DB954, transparent 150px)';
        }
        else if (value > 23 && value < 99) {
          background = 'repeating-radial-gradient(#7C0A02, transparent 150px)';
        }

        $(el).css('background', background);
      });
      
      var heataddr = addr.replace('17/0/', '18/1/'),
          cooladdr = addr.replace('17/0/', '18/3/'),
          heatstat, coolstat;
      
      function updatestat() {
        var color;
        
        if (heatstat) {
          color = 'red';
        }
        else if (coolstat) {
          color = 'blue';
        }
        else {
          color = 'white';
        }
        
        $(el).css('border', '2px solid ' + color);    
      }
      
      grp.listen(heataddr, function(obj) {
        heatstat = obj.value > 0;
        updatestat();
      }, true);

      grp.listen(cooladdr, function(obj) {
        coolstat = obj.value > 0;
        updatestat();
      }, true);
    }
  });
});

Fahd · 31.10.2022, 13:45

(31.10.2022, 13:22)admin Wrote: Try this:

Code:
$(function() { $('.item-bgm').each(function(_, el) { var addr = $(el).data('object'); if (addr) { grp.listen(addr, function(obj) { var value = obj.value , background = 'repeating-radial-gradient(red, transparent 150px)'; // default color if (value > 0 && value < 20 ) { background = 'repeating-radial-gradient(#0CAFFF, transparent 150px)'; } else if (value >= 20 && value <= 23) { background = 'repeating-radial-gradient(#1DB954, transparent 150px)'; } else if (value > 23 && value < 99) { background = 'repeating-radial-gradient(#7C0A02, transparent 150px)'; } $(el).css('background', background); }); var heataddr = addr.replace('17/0/', '18/1/'), cooladdr = addr.replace('17/0/', '18/3/'), heatstat, coolstat; function updatestat() { var color; if (heatstat) { color = 'red'; } else if (coolstat) { color = 'blue'; } else { color = 'white'; } $(el).css('border', '2px solid ' + color); } grp.listen(heataddr, function(obj) { heatstat = obj.value > 0; updatestat(); }, true); grp.listen(cooladdr, function(obj) { coolstat = obj.value > 0; updatestat(); }, true); } }); });

It works.
Your support is gratifying, thank you for your support Big Grin

Login
Username:
Password:	Lost Password?
	Remember me