Simple In/Out Board for Dashing

readme.md

Preview

Description

This is a simple in/out board widget for dashing. No pretty interface for updating one's status, absolutely 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.

Updates

2016-03-31: No functional changes. Only updates to the readme and the addition of some comments explaining how to change the icons on the widget.

2015-12-10: Minor improvements to make the widget less fragile. It now handles imperfect lines in the text input file and the statuses are no longer case sensitive. It will also work with docs from Google Drive, so long as the files can be downloaded directly (not using the web viewer).

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" data-title="Who's Where"></div>
</li>

Settings

You'll need to have a text file which is accessible to both the Dashing server and the users that will be updating it. Dropbox and Google Drive both work 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 widget 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, force encoding and delete is here to support Google Drive files
    people = Net::HTTP.get_response(uri).body.force_encoding('UTF-8').encode('UTF-8').delete("^\u{0000}-\u{007F}").split(/\n|\r\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 comments and blank lines
      # also ensure there's at least one delimiter and data
      if !line.match(/^\s*(#|$)/) && line.match(/.\|./)

        # 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')

        # Convert the person's status to a cute icon, default to "out"

        # These are Font Awesome icons, the icons used below can be swapped for
        # any of the ones defined by the font-awsome.css. View all the available
        # icons here: http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

        # Be totally insensitive, to case
        case givenstatus.downcase
        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 array
        values.push({ :name => name, :status => status, :comment => comment, :icon => icon })
      end
    end

    # Send to dashboard
    send_event('outboard', :values => values)
  rescue NoMethodError => err
    puts "outboard.rb: Something's wrong with the text input file. Check your text file and make sure it's referenced in your config.ru file"
  rescue => err
    puts "outboard.rb: #{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

# Simple 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
Mr. Sheldrake | Offsite | Offsite meeting

I've copied the outboard.txt and putted in the URI in the config, but I'm getting the following error:

Exception: undefined method `strip' for nil:NilClass

Hi @itscassa

This error indicates that your file is empty. If you just include this: (Without any new lines)

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

Does the issue still occur?

Newline characters at the end of the text file would cause the "strip" problem described above. I think that is fixed now. I've also added a more descriptive error message when the text file is not found or is in an unexpected format. I hope this helps people in the future.

For future commenters, Github does not notify me when people post here. So, if you want to get in touch with me. Please leave a comment on this blog post or shoot me an email.