Gtk image blink and color change at runtime

[Dario (D)]

Hi,

I wanted to display the status of my sensors using circles of various colors: green, yellow, and flashing red.

I’m unsure which widget would perform best, and what the best approach is to achieve this.

I can change a button’s shape via CSS to make it round, and I can change its color, but I’m uncertain whether it’s correct to manually change the background color of the buttons every time the GUI update timer occurs. My hardware isn’t powerful, and I would like to know the best approach to achieve this.

I can make some icons representing my state (maybe for blinking change color from red to gray in a timer) and try to use this piece of css posted by @ntd in Link

.i, .o, .um {
  font-size: 75%;
}
.i label, .o label {
  color: inherit;
  padding: 0;
  margin: 0;
}
.i check, .o check {
  -gtk-icon-source: -gtk-scaled(url("assets/led-off.svg"));
  background: none;
  border-width: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 2px 4px 2px 0;
  transition: none;
  min-width: 18px;
  min-height: 18px;
}
.i check:active, .o check:active {
  -gtk-icon-transform: none;
}
.i check:checked {
  background: none;
  -gtk-icon-source: -gtk-scaled(url("assets/led-green.svg"));
}
.o check:checked {
  -gtk-icon-source: -gtk-scaled(url("assets/led-red.svg"));
}

But again i’m not sure how to set my three state into the GtkCheckButton that Nicola was using.

Thank you for any reply.

[Dario (D)]

I achieved the result with these step:

• Make a Css named entry for every status: green, yellow, red blink and gray:

#sensor_green {
  background-color: rgb(0,200,100);
  border-radius: 50px; 
}

#sensor_red {
  background-color: rgb(173, 0, 0);
  border-radius: 50px; 
  animation:blink 1s linear infinite;
}

#sensor_yellow{
  background-color: rgb(255, 244, 104);
  border-radius: 50px; 
}

#sensor_gray{
  background-color: rgb(105,105,105);
  border-radius: 50px; 
}

@keyframes blink{
0%{opacity: 1;}
25%{opacity: 0.75;}
50%{opacity: 0.5;}
75%{opacity: 0.75;}
100%{opacity: 1;}
}

In the Code when the the color change occur i simply set the name of the widget to the one desired:

gtk_widget_set_name(btn_sensor, “sensor_red”);