动态更改 Dashing 小部件的背景颜色答案

【问题标题】：Dynamically change background colour of a Dashing widget动态更改 Dashing 小部件的背景颜色
【发布时间】：2017-01-01 03:31:44
【问题描述】：

我已经使用基于 ruby 的 Dashing 框架构建了一个仪表板，一切似乎都运行良好，但我希望能够更改我的一个列表小部件的背景颜色（mywidget ) 基于列表中的值之一。

我的 updatelist.rb 作业文件目前看起来像：

hashdata = Hash.new({ value: 0 })

SCHEDULER.every '10s' do

  File.open('xxx.txt').each do |line|
    field = line.split(;).first
    value = line.split(;).last

    if ['Status', 'Active', 'Duration].include? field
     hashdata[field] = { label: field, value: value }
    end
  end
  send_event('mywidget', { items: hashdata.values })
end

它正在读取的文件（xxx.txt）的格式如下：

Status; Good
Active; No
Duration; 1000

我想根据 Status 的值更改列表小部件的背景颜色，即 Good=green、Average=yellow、Poor=red。

我该怎么做？在咖啡脚本中添加一些东西似乎是显而易见的解决方案，但我不知道如何实现它

【问题讨论】：

小心使用颜色来表示状态/状态。色盲会影响用户与页面的交互方式，尤其是与页面整体颜色相结合时。

标签： ruby coffeescript sinatra dashing

【解决方案1】：

您在咖啡脚本中需要代码是正确的。我建议如下：

class Dashing.List extends Dashing.List

color: () -> 
  data = @get('items')
  status = # code to process color from your data (I'm not sure exactly your format)
  switch status
    when "Good" then "#33cc33" # green
    when "Average" then "#ffff00" # yellow
    when "Poor" then "#ff0000" # red
    else "#000000"

onData: (data) ->
  # change the background color every time that new data is sent
  $(@get('node')).css 'background-color', @color()

【讨论】：