Posts: 110
Threads: 26
Joined: Mar 2021
Reputation:
0
Hi,
I am using the Java code below to change the color of the object when it's 1 (1 = Alarm, 0 = No Alarm)
However, Is it possible to make the text blink when it's equal to 1?
If yes, how could I do that?
Thankfully in advance
Code: $(function() {
$('.color-by-value').each(function(_, el) {
var addr = $(el).data('object');
if (addr) {
grp.listen(addr, function(obj) {
var color;
if (obj.value) {
color = 'red';
}
else {
color = 'Green';
}
$(el).css('color', color);
});
}
});
});
e to change the color of the
Posts: 6477
Threads: 35
Joined: Jun 2015
Reputation:
360
Add to custom CSS:
Code: @keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.blink{
animation-name: blinker;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
Modify custom JS like this:
Code: $(function() {
$('.color-by-value').each(function(_, el) {
var addr = $(el).data('object');
if (addr) {
grp.listen(addr, function(obj) {
var color;
if (obj.value) {
color = 'red';
}
else {
color = 'Green';
}
$(el).css('color', color).toggleClass('blink', obj.value);
});
}
});
});
Posts: 110
Threads: 26
Joined: Mar 2021
Reputation:
0
(29.06.2022, 08:04)admin Wrote: Add to custom CSS:
Code: @keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.blink{
animation-name: blinker;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
Modify custom JS like this:
Code: $(function() {
$('.color-by-value').each(function(_, el) {
var addr = $(el).data('object');
if (addr) {
grp.listen(addr, function(obj) {
var color;
if (obj.value) {
color = 'red';
}
else {
color = 'Green';
}
$(el).css('color', color).toggleClass('blink', obj.value);
});
}
});
});
Thanks a lot
Posts: 292
Threads: 64
Joined: Jun 2017
Reputation:
4
Hi,
for me blink not working for latest Mozilla (v.103.0) Chrome and MS Edge are OK. Is it possible to start work blink function for Mozilla? I use it because with Mozilla is possible to see video stream from cams. Or .blink is obsolete function for Mozilla and no variants?
BR,
Alex
Posts: 6477
Threads: 35
Joined: Jun 2015
Reputation:
360
Works for me in Firefox 103. It uses CSS animation for blinking. This is a standard feature supported by all modern browsers.
Posts: 110
Threads: 26
Joined: Mar 2021
Reputation:
0
(01.08.2022, 13:05)admin Wrote: Works for me in Firefox 103. It uses CSS animation for blinking. This is a standard feature supported by all modern browsers.
Hi Guys,
In the last two weeks, the function worked fine, but I just find out that it doesn't work anymore as long as the object is read-only,
If I disable the read-only function it will start working again.
nb: I didn't change anything form the CSS and JS code
Posts: 6477
Threads: 35
Joined: Jun 2015
Reputation:
360
Read-only class overrides the animation. Modify Custom JS like this:
Code: $(function() {
$('.color-by-value').each(function(_, el) {
var $el = $(el), addr = $el.data('object');
if ($el.hasClass('item-read-only')) {
$el.removeClass('item-read-only').css('pointer-events', 'none');
}
if (addr) {
grp.listen(addr, function(obj) {
var color = obj.value ? 'red' : 'green';
$el.css('color', color).toggleClass('blink', obj.value);
});
}
});
});
Posts: 292
Threads: 64
Joined: Jun 2017
Reputation:
4
admin thanks !!
My problem also solved when I modified Custom JS  So it was linked with read-only settings.
Alex
Posts: 21
Threads: 1
Joined: Mar 2021
Reputation:
0
Hi.
Im trying to use this code:
Code: $(function() {
$('.java_test').each(function(_, el) {
var addr = $(el).data('object');
if (addr) {
grp.listen(addr, function(obj) {
var color_1;
if (obj.value) {
color_1 = 'red';
}
else {
color_1 = 'Green';
}
$(el).css('color_1',obj.value).toggleClass('class_for_1', obj.value);
});
}
});
});
to toggle a css class. For value 1 i would like to set css class f.e. class_for_1 with parameter filter: drop-shadow (x1, y1, b1, c1), if value is 0 class should be changed to class_for_0 with parameter filter: drop-shadow (x2, y2, b2, c2). It's working only for value=1. Please help.
Thanks
Posts: 6477
Threads: 35
Joined: Jun 2015
Reputation:
360
Use this:
Code: $(el).css('color_1',obj.value).toggleClass('class_for_1', obj.value).toggleClass('class_for_0', !obj.value);
Posts: 21
Threads: 1
Joined: Mar 2021
Reputation:
0
(13.02.2023, 07:03)admin Wrote: Use this:
Code: $(el).css('color_1',obj.value).toggleClass('class_for_1', obj.value).toggleClass('class_for_0', !obj.value);
Thanks.
|