Das dashing.io Dashboard kann unter anderem in Empfangsbereichen von Firmen eingesetzt werden. Steht nun zum Beispiel ein Besuch eines Kunden an, so könnte man Ihn auf dem Dashboard willkommen heißen. Damit die Willkommensnachricht nicht nur unscheinbar in einer Kachel erscheint, habe ich dieses Widget erstellt. Die job Datei(rb) prüft ob es einen zeitlich passenden Eintrag in der csv Datei gibt und setzt das Widget per css auf Display Block. Das Widget legt sich über den gesamten Bildschirm, ist die Zeit des hinterlegten Kundenbesuchs abgelaufen so wird das Widget wieder ausgeblendet.
Folgende Dateien müssen in einem Verzeichnis Namens overlay abgelegt werden
overlay.coffee
class Dashing.Overlay extends Dashing.Widget
constructor: ->
super
onData: (data) ->
schalter = @schalter
node = $(@node)
if schalter == false then node.css(‚display‘,’none‘) else node.css(‚display‘,’block‘)
ready: ->
@onData(null)
overlay.html
<span data-bind=“titel“></span>
<div class=“bild“ ><img data-bind-src=“kunde“ ></div>
<div class=“text“ data-bind=“text | raw“></div>
overlay.scss
// —————————————————————————-
// Sass declarations
// —————————————————————————-
$background-color: #ec663c;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color:rgba(255, 255, 255, 0.7);
// —————————————————————————-
// Widget-text styles
// —————————————————————————-
.widget-overlay {
position: fixed;
bottom: 1px;
z-index:1000;
width:100%;
height:95%;
background-color: $background-color;
.title {
color: $title-color;
}
.more-info {
color: $moreinfo-color;
}
.updated-at {
color: rgba(255, 255, 255, 0.7);
}
.text{
color:#ffffff;
font-weight:bold;
margin-top:20%;
}
.bild{
height:100px;
width:95%;
text-align:right;
}
&.large h3 {
font-size: 65px;
}
}
Die rb Datei muss unter dem Verzeichnis jobs abgelegt werden, natürlich muss der Pfad zur CSV Datei angepasst werden.
overlay.rb
require ‚csv‘
require ‚json‘
require ‚date‘
require ‚time‘
ENV[‚TZ‘] = ‚Europe/Berlin‘
schalter = false
kunde = „x“
text = „x“
SCHEDULER.every ’30s‘ do
zeit = Time.now.to_i
schalter_zaehler = 0
ausgabe = {}
idx = 0
CSV.foreach(‚/home/dashing/sweet_dashboard_project/jobs/overlay.csv‘, col_sep: ‚;‘) do |row|
start = Time.parse(„#{row[0]} #{row[1]}:00 „).to_i
stop = Time.parse(„#{row[0]} #{row[2]}:00 „).to_i
if zeit.between?(start, stop)
schalter_zaehler += 1
kunde = row[3]
text = row[4]
ausgabe[0] = {:kunde => row[3],:text => row[4]}
end
end
if schalter_zaehler == 1
schalter = true
else
schalter = false
end
send_event(„overlay“,{ kunde: kunde , text: text, schalter: schalter })
#puts JSON.pretty_generate(ausgabe)
end
Aufbau der overlay.csv
2017-01-02;10:00;12:00;/assets/logo.png;Moin zusammen;
2017-05-08;20:00;21:51;/assets/logo.png;Willkommen Firma Kassupke<br/>bei der Tagung;
Die Logos der Firmen müssen unter dem Verzeichnis assets/images abgelegt werden.
Die Einbindung des Widgets erfolgt in der erb Datei in der letzten Zeile wie folgt:
<div data-id=“overlay“ data-view=“Overlay“ ></div>
Hier kann alles heruntergeladen werden.
