Posts: 151
Threads: 38
Joined: Mar 2021
Reputation:
2
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: 7720
Threads: 42
Joined: Jun 2015
Reputation:
446
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: 151
Threads: 38
Joined: Mar 2021
Reputation:
2
(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: 335
Threads: 75
Joined: Jun 2017
Reputation:
6
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: 7720
Threads: 42
Joined: Jun 2015
Reputation:
446
Works for me in Firefox 103. It uses CSS animation for blinking. This is a standard feature supported by all modern browsers.
Posts: 151
Threads: 38
Joined: Mar 2021
Reputation:
2
(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: 7720
Threads: 42
Joined: Jun 2015
Reputation:
446
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: 335
Threads: 75
Joined: Jun 2017
Reputation:
6
admin thanks !!
My problem also solved when I modified Custom JS So it was linked with read-only settings.
Alex
Posts: 24
Threads: 2
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: 7720
Threads: 42
Joined: Jun 2015
Reputation:
446
Use this:
Code: $(el).css('color_1',obj.value).toggleClass('class_for_1', obj.value).toggleClass('class_for_0', !obj.value);
Posts: 24
Threads: 2
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.
Posts: 20
Threads: 6
Joined: Jul 2022
Reputation:
0
07.08.2023, 12:13
(This post was last modified: 07.08.2023, 12:15 by Krists.)
Hello.What I have to change for text blinking ,if I want:
object value 0 = blink
object value 1 = no blink
The code below works opposite!!
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: 41
Threads: 1
Joined: Dec 2020
Reputation:
19
07.08.2023, 12:58
(This post was last modified: 07.08.2023, 13:00 by RomansP.)
(07.08.2023, 12:13)Krists Wrote: Hello.What I have to change for text blinking ,if I want:
object value 0 = blink
object value 1 = no blink
The code below works opposite!!
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);
});
}
});
});
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: 20
Threads: 6
Joined: Jul 2022
Reputation:
0
Great!
It works!
Thank you
Posts: 92
Threads: 16
Joined: Jan 2020
Reputation:
2
Code: $(function() {
$('.color-by-door-opacity').each(function(_, el) {
var addr = $(el).data('object');
if (addr) {
grp.listen(addr, function(obj) {
var color;
var opacityValue;
if (obj.value) {
color = '#f44236';
opacityValue = 1; // Synlig
}
else {
color = 'transparent'; // Istället för att ändra färgen till grön, gör vi den genomskinlig
opacityValue = 0; // Osynlig
}
$(el).css({'color': color, 'opacity': opacityValue}).toggleClass('blink', obj.value);
});
}
});
});
Hi.
I use this script for visu an icon to blink when 1 and not be visable when 0. works well except from that my android 12 10" touch screen that runs the visu on Fully Kiosk Browser is crashing when the scripts reslut is 1, that is not happening when script result is 0.
Is this somthing with the script? Or maybe something that Fully Kiosk Browser cannot handle
|