Graphical Status (Traffic-light style) widget?

Hello, I’m new to Vaadin, and I REALLY like what I’ve seen so far!

The real purpose of my thread/question, however, is: Is there some sort of widget that functions as a “traffic light” type of visual indicator to quickly see if something is happening? More detail: I’m looking for a visual status of a task or job that may be running on a different thread; I can get the status successfully, and it returns “true” if the process is running, or “false” if it isn’t. I’d somehow like to turn those two states into a visual indicator in my GUI, like a red circle or rectangle if the process is NOT running (i.e., status is “false”), and a green circle or rectangle if it IS running (i.e. status is “true”).

Is there such a widget out there that handles this already? Or, would it be better to make some sort of custom SCSS/CSS style that does this (if so, an example would be greatly appreciated since I’m NOT a CSS guru).

Many thanks in advance!

It’s pretty easy to do this with normal code + css. Note that if you update the style/status from the background thread itself itself, it will not be automatically “pushed” to the browser unless you are using Vaadin push/refresher plugin/similar.

(NB Code/CSS typed straight into browser, probably some typos in there somewhere)

Cheers,

Charles


Code:
Label statusLabel = new Label("Unknown");
String statusStyle = null;

public void updateStatus(boolean running){
  
  String style = running ? "status-running" : "status-stopped";
  statusLabel.setCaption(running ? "Running" : "Stopped");

  if(statusStyle!=null){
   statusLabel.removeStyleName(statusStyle);
  }
  statusStyle = running ? "status-running" : "status-stopped");
  statusLabel.addStyleName(statusStyle);
}

CSS : 


.status-stopped,  .status-runninig {
  color: whitesmoke;
  padding: 4px;
  border-radius: 6px;
}

.status-running {
  background: green;
}

.status-stopped {
  background : red;
}

Sweet! Thank you, sir!

I was able to adapt it slightly to load into a Table widget, so there is now a nice graphical indicator of which tasks are running!

I owe you a beer!

Cheers!
Randy

Thank you, both Randal and Charles! I was looking for this same information and you’ve both saved me a lot of time.

What exactly this code is doing ?

If a (background) thread is running, the label is colored with green. When the thread has stopped, it’s colored with red. Both of them are colored with background colors (not letter colors). I guess is somehow a circle, whose background color is changed depending on the status of the background thread.

Hope this explanation helps :slight_smile:

To elaborate a bit more on what the actual snippet is doing as you just posted another thread:
The code essentially changes the the StyleName of a Label ( here statusLabel) between .status-stopped and .status-running depending on the boolean “running” in updateStatus(). status-stopped and running just set the background to red or green. padding and border-radius are just used to have a more round look.

its not just that i want to use three status…red, orange and green and even this code dont work for me…

That’s weird. You should be able to just add something like:

[code]
.status-stopped, .status-running .status-middle {
color: whitesmoke;
padding: 4px;
border-radius: 6px;
}

.status-running {
background: green;
}

.status-stopped {
background : red;
}

.status-middle {
background : orange;
}
[/code]to your custom theme scss file, compile your theme and then use a slightly modified updateStatus() function to switch between the styles.

Things to watch out for/Check:

  • Make sure that the theme is set in your project and that you compiled it after adding it to the mytheme.scss (mytheme being the name of your own theme)
  • Make sure all stylenames in the scss and your code are written correctly
  • You could check using firebug or the standard Chrome developer console if the styles reach the client
  • When changing your theme, recompiling and redeploying your app, clear the browser cache before testing
  • When changing the StyleName in a background Process ( like a Java Thread/Runnable) use UI.access