+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: OLD visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Text over background (/showthread.php?tid=4329)
Text over background - Fahd - 28.10.2022
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
RE: Text over background - admin - 31.10.2022
Try adding z-index: 1 !important; to .item-bgm styles.
RE: Text over background - Fahd - 31.10.2022
(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);
});
}
});
});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
I want to know if it is possible to change the border color of the css style depending on the mode of the thermostat,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); }); } }); });
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
RE: Text over background - admin - 31.10.2022
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.
RE: Text over background - Fahd - 31.10.2022
(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)
RE: Text over background - admin - 31.10.2022
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);
}
});
});RE: Text over background - Fahd - 31.10.2022
(31.10.2022, 13:22)admin Wrote: Try this:It works.
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); } }); });
Your support is gratifying, thank you for your support
