readme.md

Preview

Description

This is a (very) poor man's in/out board widget for dashing. No pretty interface for updating one's status, absolutly no authentication and a barely passable widget design. But, it works.

Users update a simple text file (see outboard.txt example in this gist) with their status. A handful of common statuses are included, more or less might be needed for particular situation.

If you have any questions or problems, leave a comment on this post.

Usage

Install from this gist by running

dashing install d84a933bfa6e861bcfe8

Or, if you'd rather install manually, create a '/widgets/outboard' directory and copy the following files into it:

• outboard.html
• outboard.coffee
• outboard.scss

Also, copy the outboard.rb file in your /jobs folder.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="outboard" data-view="Outboard"></div>
</li>

Settings

You'll need to have a text file which is accessable to both the Dashing server and the users that will be updating it. Dropbox works well for this. You can use the 'outboard.txt' included in this gist as an example, but you can name it whatever you wish. Add the path to that text file to your 'config.ru' file. It should be within the configure block.

set :outboard_file, 'http://example.com/path/to/your/outboard.txt'

The in/out wiget is updated every minute. If this is too aggressive for your needs, you can update the frequency in the outboard.rb job file.

outboard.coffee

class Dashing.Outboard extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

outboard.html

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

<div class="content">
  <ul>
    <li data-foreach-value="values" data-bind-class="value.status">
      <i data-bind-class="value.icon"></i>
      <span class="name" data-bind="value.name"></span>
      <span class="comment" data-bind="value.comment"></span>
    </li>
  </ul>
</div>

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

outboard.rb

require 'net/http'
require 'uri'

# :first_in sets how long it takes before the job is first run. In this case, it is run immediately
SCHEDULER.every '1m', :first_in => 0 do |job|
  begin
    # Fetch the file
    uri = URI(settings.outboard_file)
    # Put the file contents into an array
    people = Net::HTTP.get_response(uri).body.split(/\n/)

    # Create an array to hold the values we are sending back to the widget
    values = Array.new

    # Sort the array (by name)
    people.sort!

    people.each do |line|
      # Ignore comment and blank lines
      if line[0] != '#' && !line.empty?

        # Split the line into an array and populate variables
        person = line.split('|')
        name = person[0].strip.force_encoding('UTF-8')
        givenstatus = person[1].strip.force_encoding('UTF-8')

        # Figure out what the person's status is, default to "out"
        case givenstatus
        when 'WAH'
          icon = 'icon-home'
          status = 'in'
        when 'Vacation'
          icon = 'icon-plane'
          status = 'out'
        when 'In'
          icon = 'icon-star'
          status = 'in'
        when "Offsite"
          icon = 'icon-glass'
          status = 'in'
        else
          icon = 'icon-remove'
          status = 'out'
        end

        # If a comment exists, get it
        if person[2]
          comment = person[2].force_encoding('UTF-8')
        end

        # Push the status into the
        values.push({ :name => name, :status => status, :comment => comment, :icon => icon })
      end
    end

    # Send to dashboard
    send_event('outboard', :values => values)
  rescue => err
    puts "Exception: #{err}"
  end
end

outboard.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  rgba(135, 135, 135, 0.7);
$title-color:       rgba(255, 255, 255, 0.7);
$in-color: rgba(255, 255, 255, 1.0);
$out-color: rgba(175, 175, 175, 1.0);
$updated-at-color: rgba(255, 255, 255, 0.7);

.widget-outboard {
  background-color: $background-color;

  .content {
    text-align: left;
  }

  .title {
    color: $title-color;
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
  }

  .updated-at {
    color: $updated-at-color;
  }

  &.large h3 {
    font-size: 65px;
  }

  li {
    font-size: 15px;
    margin-top: 8px;
    text-indent: 10px;
    font-weight: normal;
  }

  .name {
    font-weight: bold;
  }

  .comment {
    font-style: italic;
  }

  .in {
    color: $in-color;
  }

  .out {
    color: $out-color;
  }

}

outboard.txt

# Poor man's in/out board
# Format: Name | Status | Optional comment (keep it short, keep it clean)
# Possible statuses are "In", "Out", "WAH" for work at home, "Offsite" and "Vacation"

Mr. Baxter | In
Mr. Dobisch | Vacation | Back next week
Mr. Kirkeby | Out | In tomorrow
Ms. Kubelik | In
Ms. Kubelik | Out
Mr. Sheldrake | Offsite | Offsite meeting
Ms. Sheldrake | Offsite | Offsite meeting