Comments (18)
If you look in the coffee file for a widget you'll see the code that gets
called whenever new data comes in. From that function changing the
background colour of the widget is a few simple lines of js.
On Nov 12, 2012 9:52 AM, "spiddy" [email protected] wrote:
A simple use case of this would be to make a box color greenish when good
values are given, and redish when bad values are given, giving a visual
alert of things to notice.It would be good to see a generic solution for existing widgets, or
explain how a new widget could be implemented to do that.β
Reply to this email directly or view it on GitHubhttps://github.com//issues/24.
from dashing.
I hate to be a pest, but could you perhaps provide an example of such code, @davefp ? It would be very much appreciated. :)
from dashing.
onData: (data) ->
if data.something
$(@node).css('background-color', '#fff')
from dashing.
Also try adding the class 'status-danger' or 'status-warning' to the widget. It makes the panel pulsate yellow or red.
from dashing.
I seem to be struggling a bit with this...
The classes status-danger and status-warning actually don't pulsate...
But my biggest problem is setting the class for a widget to this status from a certain outcome in de scheduler job...
Any help with this would be much appreciated..
from dashing.
This is a snippet from the ruby job that sends the status to the widget. It is used to monitor the depth of a queue. If it gets above 3 then I get worried. If it gets above 9 then something's very wrong. This sends an event to any widgets listening for (i.e. with data-id
equal to) report-queue
events. Note that 'danger'
and 'warning'
are flipped because that's how the CSS came in the dashing library and I was too lazy to fix it.
# set status based on queue depth
status = case current_queue_depth
when 0..3 then 'ok'
when 4..9 then 'danger'
else 'warning'
end
send_event('report-queue', { current: current_depth, status: status })
I'm changing the background of a Number widget, so in the Number.coffee widget I have this function to set the class to status-warning
, status-danger
, or status-ok
:
onData: (data) ->
if data.status
# clear existing "status-*" classes
$(@get('node')).attr 'class', (i,c) ->
c.replace /\bstatus-\S+/g, ''
# add new class
$(@get('node')).addClass "status-#{data.status}"
from dashing.
@crcastle Thanks for your reply....
I had some problems resetting the status and knew that clearing the status classes would help but didn't know how to..
Your code did the trick..
from dashing.
@crcastle Are you having some issues with the animation for the status classes ?
This doesn't seem to work...
from dashing.
hmmm.... what browser are you using? i've only tested in chrome.
On Mon, Dec 10, 2012 at 4:10 AM, Dieter De Meyer
[email protected]:
@crcastle https://github.com/crcastle Are you having some issues with
the animation for the status classes ?
This doesn't seem to work...β
Reply to this email directly or view it on GitHubhttps://github.com//issues/24#issuecomment-11190783.
from dashing.
I'm using Firefox 10.05 on CentOS 6.3.
from dashing.
I can confirm that the animations on Chrome work, but not on Firefox...
from dashing.
Look at the animation styles set in application.scss as well as the compiled styles. I have a hunch that there's something in there that FF is puking on.
from dashing.
My guess is that application.scss is not generating the framesets needed for -moz-animation or -ms-animation.
(Caveat emptor, as I'm not terribly web-development oriented!) I was able to get things working by deleting the @-webkit-keyframes status-warning-background
and @-webkit-keyframes
status-danger-background definitions, then adding the following:
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@include keyframes(status-warning-background) {
0% { background-color: $background-warning-color-1; }
50% { background-color: $background-warning-color-2; }
100% { background-color: $background-warning-color-1; }
}
@include keyframes(status-danger-background) {
0% { background-color: $background-danger-color-1; }
50% { background-color: $background-danger-color-2; }
100% { background-color: $background-danger-color-1; }
}
As a trivial test, it works in FF19.0.2 and Chrome 25.0.1364.172 (both running on MacOSX).
from dashing.
As far as I can see, this change hasn't been included in the master branch. Is it possible to do it?
I can confirm that the change actually works.
from dashing.
Some widgets do it..check the number widget for example. From: jbogarinSent: Thursday, July 10, 2014 8:07 PMTo: Shopify/dashingReply To: Shopify/dashingSubject: Re: [dashing] Can dashing change style (e.g. background-color) depending of the job's value? (#24)As far as I can see, this change hasn't been included in the master branch. Is it possible to do it?
I can confirm that the change actually works.
βReply to this email directly or view it on GitHub.
from dashing.
Yeah, I know. What I'm talking about is that animations don't work in Firefox, but they do if you put the changes that cyl-moz described above.
from dashing.
Agreed - works for me as well. The diff I have looks like this:
--- application.scss.orig 2014-07-11 13:35:58.551965551 -0400
+++ application.scss 2014-07-11 13:36:02.010226539 -0400
@@ -16,16 +16,33 @@
$background-danger-color-2: #ff9618;
$text-danger-color: #fff;
-@-webkit-keyframes status-warning-background {
+@mixin keyframes($name) {
+ @-webkit-keyframes #{$name} {
+ @content;
+ }
+ @-moz-keyframes #{$name} {
+ @content;
+ }
+ @-ms-keyframes #{$name} {
+ @content;
+ }
+ @keyframes #{$name} {
+ @content;
+ }
+}
+
+@include keyframes(status-warning-background) {
0% { background-color: $background-warning-color-1; }
50% { background-color: $background-warning-color-2; }
100% { background-color: $background-warning-color-1; }
}
-@-webkit-keyframes status-danger-background {
+
+@include keyframes(status-danger-background) {
0% { background-color: $background-danger-color-1; }
50% { background-color: $background-danger-color-2; }
100% { background-color: $background-danger-color-1; }
}
+
@mixin animation($animation-name, $duration, $function, $animation-iteration-count:""){
-webkit-animation: $animation-name $duration $function #{$animation-iteration-count};
-moz-animation: $animation-name $duration $function #{$animation-iteration-count};
from dashing.
how can i use this for dashing-icinga2 ?
i want that my kachel-color for blue to red change when the count of critical is 1 or more
did someone have any idear ?
from dashing.
Related Issues (20)
- Eclipse IDE
- Scheduler, :handle_exception
- How to inject variables in the html of widgets HOT 1
- You have to install development tools first
- Installation on windows throws auth token error HOT 1
- Dashing Dashobarding
- How to leave blank space between widgets HOT 1
- Avoid refreshing the list widget if the data is the same HOT 3
- Dynamically getting values based on data-id HOT 2
- Remove the 'Le' words from the wiki
- Issue Installing on Raspberry Pi HOT 1
- Add widget dynamically based on Server Result
- Save automatically gridster layout after drag widgets
- run job on page refresh
- Upgrade gemspec to run with Rack 1.6 aka Rails 4.2.10 HOT 1
- Suspected plagiarism HOT 1
- Margins around Dashboard
- Push successful but getting "Something Went Wrong"
- Smashing dashboard is displaying random value of "Last updated at"
- Dynamically change widgets data-id does nothing
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dashing.