Dashing Shoutbox widget

README.md

Dashing Shoutbox widget

A widget to send a message/announcement/quote etc to a Shoutbox widget.

About

The given scenario is that you want to share a message with the the dashboard viewers using a simple curl request.

Installation

From your Dashing Dashboard's directory, use the command:

dashing install 3401cd33d5375bbac81d

Using the widget

Just include a widget with a data-view of Shoutbox and you're done!

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="shoutbox" data-view="Shoutbox" data-title="Shoutbox"></div>
</li>

Now you just have to send the curl that contains the message and optionally a type.

curl -d '{ "auth_token": "[AUTH_TOKEN]", "message": "Hey, Look what I can do!", "type": "alarm"}' http://localhost:3030/widgets/shoutbox

Types

• alarm
• alert
• angry
• birthday
• black
• celebrating
• christmas
• funny
• happy
• love

Sound support

As a bonus, this widget can also play a sound when status is modified. Just add one or more data-*type*sound attributes with the value set to an absolute or relative url pointing to an audio file.

Each time the stattypeus will change, the widget will play the audio file associated to the new status.

Example:

<div data-id="shoutbox" data-view="Shoutbox" data-title="Shoutbox" data-funnysound="/mp3/funny.mp3"></div>

Thanks

Special thanks to the Dashing HotStatus Widget author as this widget is nearly forked from the HotStatus widget.

dashboard.erb

<a target="_blank" href="https://gist.github.com/yannrouillard/796fe74d4cbf0cf42f47">Details</a>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="shoutbox"
           data-view="Shoutbox"
           data-title="Shoutbox"
           data-message="Broadcast your message!"
           data-alertsound="/static/mp3/alert.mp3"
           data-angrysound="/static/mp3/angry.mp3"
           data-birthdaysound="/static/mp3/birthday.mp3"
           data-blacksound="/static/mp3/black.mp3"
           data-celebratingsound="/static/mp3/celebrating.mp3"
           data-christmassound="/static/mp3/christmas.mp3"
           data-funnysound="/static/mp3/funny.mp3"
           data-happysound="/static/mp3/happy.mp3"
           data-neutralsound="/static/mp3/neutral.mp3"
           data-lovesound="/static/mp3/love.mp3"></div>
    </li>
  </ul>
</div>
<center><div style="font-size: 12px">Shoutbox Usage: curl -d '{ "auth_token": "[AUTH_TOKEN]", "message": "Hey, Look what I can do!", "type": "alarm|alert|angry|birthday|black|celebration|christmas|funny|happy|love|neutral"}' http://<%=request.host%>:<%=request.port%>/widgets/shoutbox</div></center>

shoutbox.coffee

class Dashing.Shoutbox extends Dashing.Widget

  constructor: ->
    super

  onData: (data) ->
    if @type
      type = @type.toLowerCase()
    else
      type = ""

    if [
      'alarm',
      'alert',
      'angry',
      'birthday',
      'black',
      'christmas',
      'celebrating',
      'funny',
      'happy',
      'love'
      ].indexOf(type) != -1
      currentClass = "shoutbox-#{type}"
    else
      currentClass = "shoutbox-neutral"

    lastClass = @lastClass
    if lastClass != currentClass
      $(@node).toggleClass("#{lastClass} #{currentClass}")
      @lastClass = currentClass

      audiosound = @get(type + 'sound')
      audioplayer = new Audio(audiosound) if audiosound?
      if audioplayer
        audioplayer.play()

  ready: ->
    @onData(null)

shoutbox.html

<h1 class="title" data-bind="title"></h1>

<p class="message" data-bind="message" data-hideif="lightmode"></p>

<p class="updated-at" data-bind="updatedAtMessage" data-hideif="lightmode"></p>

<p class="type" data-bind="type" data-hideif="lightmode"></p>

shoutbox.scss

// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------
@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #000000;
$title-color: rgba(255, 255, 255, 0.7);
$message-color: rgba(255, 255, 255, 0.7);
$type-color: rgba(0, 0, 0, 0.3);
$updated-at-color: rgba(0, 0, 0, 0.3);

// ----------------------------------------------------------------------------
// Widget-status styles
// ----------------------------------------------------------------------------
.widget-shoutbox {

  background-color: $background-color;
  @include transition(background-color, 1s, linear);

  .title {
    color: $title-color;
    margin-bottom: 10px;
  }

  .message {
    color: $message-color;
    font-size: 30px;
  }

  .type {
    color: $type-color;
    font-size: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .updated-at {
    color: $updated-at-color;
    font-size: 15px;
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
  }

}

.shoutbox-alarm { background-color: #FF003C; }
.shoutbox-alert { background-color: #FF003C; }
.shoutbox-angry { background-color: #FF0000; }
.shoutbox-black { background-color: #000000; }
.shoutbox-birthday { background-color: #FABE28; }
.shoutbox-celebrating { background-color: #FABE28; }
.shoutbox-christmas { background-color: #FABE28; }
.shoutbox-funny { background-color: #B76EB8; }
.shoutbox-happy { background-color: #7ABA7A; }
.shoutbox-neutral { background-color: #00C176; }
.shoutbox-love { background-color: #FF0080; }
.shoutbox-white { background-color: #FFFFFF; }

Is the sound played on the Dashing server (Physically) or on the client navigator (ex: google Chrome) ?
Thanks.