Skip to content

Instantly share code, notes, and snippets.

@Ishotihadus

Ishotihadus/cpu-bar.widget - index.coffee

Created February 25, 2016 01:25
Show Gist options
  • Save Ishotihadus/c8d49c43efbb1673abd5 to your computer and use it in GitHub Desktop.
Save Ishotihadus/c8d49c43efbb1673abd5 to your computer and use it in GitHub Desktop.
Download ZIP
Übersichtのスクリプト集（サブディレクトリが作れないので、ディレクトリ名は - で区切った）
Raw
cpu-bar.widget - index.coffee
command: "top -u -l 1"
refreshFrequency: 3000
style: """
// Change bar height
bar-height = 6px
// Align contents left or right
widget-align = left
// Position this where you want
top 20px
left 20px
// Statistics text settings
color #fff
font-family Helvetica Neue
background rgba(#000, .0)
padding 10px 10px 15px
border-radius 5px
.container
width: 300px
text-align: widget-align
position: relative
clear: both
.widget-title
text-align: widget-align
text-shadow: 0 0 5px #000
.stats-container
margin-bottom 5px
border-collapse collapse
td
font-size: 14px
font-weight: 300
color: rgba(#fff, .9)
text-shadow: 0 0 5px #000
text-align: widget-align
width: 70px
.widget-title
font-size 10px
text-transform uppercase
font-weight bold
.label
font-size 8px
text-transform uppercase
font-weight bold
.bar-container
width: 100%
height: bar-height
border-radius: bar-height
float: widget-align
clear: both
background: rgba(#fff, .5)
position: absolute
margin-bottom: 5px
box-shadow: 0 0 3px #ccc
.bar
height: bar-height
float: widget-align
transition: width .2s ease-in-out
.bar:first-child
if widget-align == left
border-radius: bar-height 0 0 bar-height
else
border-radius: 0 bar-height bar-height 0
.bar:last-child
if widget-align == right
border-radius: bar-height 0 0 bar-height
else
border-radius: 0 bar-height bar-height 0
.bar-inactive
background: rgba(#0bf, .5)
.bar-sys
background: rgba(#fc0, .5)
.bar-user
background: rgba(#c00, .5)
"""
render: -> """
<div class="container">
<div class="widget-title">CPU</div>
<table class="stats-container">
<tr>
<td class="stat"><span class="user"></span>%</td>
<td class="stat"><span class="sys"></span>%</td>
<td class="stat"><span class="idle"></span>%</td>
</tr>
<tr>
<td class="label">user</td>
<td class="label">sys</td>
<td class="label">idle</td>
</tr>
</table>
<div class="bar-container">
<div class="bar bar-user"></div>
<div class="bar bar-sys"></div>
<div class="bar bar-idle"></div>
</div>
</div>
"""
update: (output, domEl) ->
updateStat = (sel, usage) ->
percent = usage + "%"
$(domEl).find(".#{sel}").text usage
$(domEl).find(".bar-#{sel}").css "width", percent
lines = output.split "\n"
userRegex = /(\d+\.\d+)%\suser/
user = userRegex.exec(lines[3])[1]
systemRegex = /(\d+\.\d+)%\ssys/
sys = systemRegex.exec(lines[3])[1]
idleRegex = /(\d+\.\d+)%\sidle/
idle = idleRegex.exec(lines[3])[1]
updateStat 'user', user
updateStat 'sys', sys
updateStat 'idle', idle
Raw
diskusage-bar.widget - index.coffee
# You may exclude certain drives (separate with a pipe)
# Example: exclude = 'MyBook' or exclude = 'MyBook|WD Passport'
exclude = 'NONE'
# Use base 10 numbers, i.e. 1GB = 1000MB. Leave this true to show disk sizes as
# OS X would (since Snow Leopard)
base10 = true
# appearance
filledStyle = false # set to true for the second style variant. bgColor will become the text color
# You may optionally limit the number of disk to show
maxDisks: 10
command: "df -#{if base10 then 'H' else 'h'} | grep '/dev/' | while read -r line; do fs=$(echo $line | awk '{print $1}'); name=$(diskutil info $fs | grep 'Volume Name' | awk '{print substr($0, index($0,$3))}'); echo $(echo $line | awk '{print $2, $3, $4, $5}') $(echo $name | awk '{print substr($0, index($0,$1))}'); done | grep -vE '#{exclude}'"
refreshFrequency: 50000
style: """
// Change bar height
bar-height = 6px
// Align contents left or right
widget-align = left
// Position this where you want
top 260px
left 20px
// Statistics text settings
color #fff
font-family Helvetica Neue
padding 10px 10px 15px
border-radius 5px
.container
width: 300px
text-align: widget-align
position: relative
clear: both
.container:not(:first-child)
margin-top: 20px
.widget-title
text-align: widget-align
text-shadow: 0 0 5px #000
.stats-container
margin-bottom 5px
border-collapse collapse
td
font-size: 14px
font-weight: 300
color: rgba(#fff, .9)
text-shadow: 0 0 5px #000
text-align: widget-align
.widget-title, p
font-size 10px
text-transform uppercase
font-weight bold
.label
font-size 8px
text-transform uppercase
font-weight bold
.bar-container
width: 100%
height: bar-height
border-radius: bar-height
float: widget-align
clear: both
background: rgba(#fff, .5)
position: absolute
margin-bottom: 5px
box-shadow: 0 0 3px #ccc
.bar
height: bar-height
float: widget-align
transition: width .2s ease-in-out
.bar:first-child
border-radius: bar-height bar-height bar-height bar-height
.bar-used
background: rgba(#c00, .5)
"""
humanize: (sizeString) ->
sizeString + 'B'
renderInfo: (total, used, free, pctg, name) -> """
<div class="container">
<div class="widget-title">#{name} #{@humanize(total)}</div>
<table class="stats-container" width="100%">
<tr>
<td class="stat"><span class="used">#{@humanize(used)}</span></td>
<td class="stat"><span class="free">#{@humanize(free)}</span></td>
<td class="stat pctg"><span class="pctg">#{pctg}</span></td>
</tr>
<tr>
<td class="label">used</td>
<td class="label">free</td>
<td class="label pctg">pctg</td>
</tr>
</table>
<div class="bar-container">
<div class="bar bar-used" style="width: #{pctg}"></div>
</div>
</div>
"""
update: (output, domEl) ->
disks = output.split('\n')
$(domEl).html ''
for disk, i in disks[..(@maxDisks - 1)]
args = disk.split(' ')
if (args[4])
args[4] = args[4..].join(' ')
$(domEl).append @renderInfo(args...)
$(domEl).append ''
Raw
hcal.widget - index.coffee
command: "",
// command: 'date -v1d +"%e"; date -v1d -v+1m -v-1d +"%d"; date +"%d%n%m%n%Y"',
dayNames: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
offdayIndices: [0, 6], // Fr, Sa
refreshFrequency: 5000,
displayedDate: null,
render: function () {
return "<div class=\"cal-container\">\
<div class=\"title\"></div>\
<table>\
<tr class=\"weekday\"></tr>\
<tr class=\"midline\"></tr>\
<tr class=\"date\"></tr>\
</table>\
</div>";
},
style: " \n\
top: 20px \n\
left: 350px \n\
font-family: Helvetica Neue \n\
font-size: 14px \n\
font-weight: 500 \n\
color: #fff \n\
\n\
.cal-container \n\
border-radius: 10px \n\
padding: 10px \n\
\n\
.title \n\
color: #fff \n\
text-shadow: 0 0 5px #666 \n\
font-size: 14px \n\
font-weight: 500 \n\
padding-bottom: 5px \n\
text-transform uppercase \n\
\n\
table \n\
border-collapse: collapse \n\
\n\
td \n\
padding-left: 4px \n\
padding-right: 4px \n\
text-align: center \n\
text-shadow: 0 0 5px #666 \n\
\n\
.weekday td \n\
padding-top: 3px \n\
\n\
.date td \n\
padding-bottom: 3px \n\
\n\
.today, .off-today \n\
background: rgba(#00f, 0.1) \n\
\n\
.weekday .today, \n\
.weekday .off-today \n\
border-radius: 3px 3px 0 0 \n\
\n\
.date .today, \n\
.date .off-today \n\
border-radius: 0 0 3px 3px \n\
\n\
.midline \n\
height: 3px \n\
background: rgba(#fff, .5) \n\
\n\
.midline .today \n\
background: rgba(#0bf, .8) \n\
\n\
.midline .offday \n\
background: rgba(#f77, .5) \n\
\n\
.midline .off-today \n\
background: rgba(#fc3, .8) \n\
\n\
.offday, .off-today \n\
color: rgba(#f77, 1) \n\
",
update: function (output, domEl) {
// var date = output.split("\n"), firstWeekDay = date[0], lastDate = date[1], today = date[2], m = date[3]-1, y = date[4];
// // DON'T MANUPULATE DOM IF NOT NEEDED
// if(this.displayedDate != null && this.displayedDate == output) return;
// else this.displayedDate = output;
var date = new Date(), y = date.getFullYear(), m = date.getMonth(), today = date.getDate();
// DON'T MANUPULATE DOM IF NOT NEEDED
var newDate = [today, m, y].join("/");
if(this.displayedDate != null && this.displayedDate == newDate) return;
else this.displayedDate = newDate;
var firstWeekDay = new Date(y, m, 1).getDay();
var lastDate = new Date(y, m + 1, 0).getDate();
var weekdays = "", midlines = "", dates = "";
for (var i = 1, w = firstWeekDay; i <= lastDate; i++, w++) {
w %= 7;
var isToday = (i == today), isOffday = (this.offdayIndices.indexOf(w) != -1);
var className = "ordinary";
if(isToday && isOffday) className = "off-today";
else if(isToday) className = "today";
else if(isOffday) className = "offday";
weekdays += "<td class=\""+className+"\">" + this.dayNames[w] + "</td>";
midlines += "<td class=\""+className+"\"></td>";
dates += "<td class=\""+className+"\">" + i + "</td>";
};
$(domEl).find(".title").html(this.monthNames[m]+" "+y);
$(domEl).find(".weekday").html(weekdays);
$(domEl).find(".midline").html(midlines);
$(domEl).find(".date").html(dates);
}
Raw
hcal.widget - index_next.coffee
command: "",
// command: 'date -v1d +"%e"; date -v1d -v+1m -v-1d +"%d"; date +"%d%n%m%n%Y"',
dayNames: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
offdayIndices: [0, 6], // Fr, Sa
refreshFrequency: 5000,
displayedDate: null,
render: function () {
return "<div class=\"cal-container\">\
<div class=\"title\"></div>\
<table>\
<tr class=\"weekday\"></tr>\
<tr class=\"midline\"></tr>\
<tr class=\"date\"></tr>\
</table>\
</div>";
},
style: " \n\
top: 110px \n\
left: 350px \n\
font-family: Helvetica Neue \n\
font-size: 14px \n\
font-weight: 300 \n\
color: #fff \n\
\n\
.cal-container \n\
border-radius: 10px \n\
padding: 10px \n\
\n\
.title \n\
color: #fff \n\
text-shadow: 0 0 5px #666 \n\
font-size: 14px \n\
font-weight: 500 \n\
padding-bottom: 5px \n\
text-transform uppercase \n\
\n\
table \n\
border-collapse: collapse \n\
\n\
td \n\
padding-left: 4px \n\
padding-right: 4px \n\
text-align: center \n\
text-shadow: 0 0 5px #666 \n\
\n\
.weekday td \n\
padding-top: 3px \n\
\n\
.date td \n\
padding-bottom: 3px \n\
\n\
.midline \n\
height: 3px \n\
background: rgba(#fff, .5) \n\
\n\
.midline .today \n\
background: rgba(#0bf, .8) \n\
\n\
.midline .offday \n\
background: rgba(#f88, .5) \n\
",
update: function (output, domEl) {
// var date = output.split("\n"), firstWeekDay = date[0], lastDate = date[1], today = date[2], m = date[3]-1, y = date[4];
// // DON'T MANUPULATE DOM IF NOT NEEDED
// if(this.displayedDate != null && this.displayedDate == output) return;
// else this.displayedDate = output;
var date = new Date(), y = date.getFullYear(), m = date.getMonth();
m += 1
// DON'T MANUPULATE DOM IF NOT NEEDED
var newDate = [1, m, y].join("/");
if(this.displayedDate != null && this.displayedDate == newDate) return;
else this.displayedDate = newDate;
var firstWeekDay = new Date(y, m, 1).getDay();
var lastDate = new Date(y, m + 1, 0).getDate();
var weekdays = "", midlines = "", dates = "";
for (var i = 1, w = firstWeekDay; i <= lastDate; i++, w++) {
w %= 7;
var isOffday = (this.offdayIndices.indexOf(w) != -1);
var className = "ordinary";
if(isOffday) className = "offday";
weekdays += "<td class=\""+className+"\">" + this.dayNames[w] + "</td>";
midlines += "<td class=\""+className+"\"></td>";
dates += "<td class=\""+className+"\">" + i + "</td>";
};
$(domEl).find(".title").html(this.monthNames[m]+" "+y);
$(domEl).find(".weekday").html(weekdays);
$(domEl).find(".midline").html(midlines);
$(domEl).find(".date").html(dates);
}
Raw
ical.widget - index.coffee
# A widget that displays your calendar events for today and tomorrow
# Made by David Brooks
# First time ever writing in JavaScript
# Using icalBuddy found here: http://hasseg.org/icalBuddy/
# This command shows all of your events for today and tomorrow
command: "'ical.widget/icalBuddy' -nc -nrd -npn -std -df '%m/%d' -tf '%H:%M' -b '$$$$' eventsToday+60 2>/dev/null"
# the refresh frequency is 1 hour
refreshFrequency: 600000
style: """
top: 30px
left: 1170px
color: #fff
text-shadow: 0 0 5px #666
line-height: 15pt
font-size: 11pt
.name
font-family: "A-OTF 新ゴ Pr6N L"
padding-right: 10px
.date
font-family: "Helvetica Neue"
font-weight: 300
font-size: 12.2pt
transform: translateY(-1px)
"""
render: -> """
<div class="ical">
</div>
"""
update: (output, domEl) ->
lines = output.split('$$$$')
str = '<table>'
for line in lines
continue if line == ""
split = line.split('\n')
str += """
<tr>
<td class="name">#{split[0]}</td>
<td class="date">#{split[1]}</td>
</tr>
"""
str += '</table>'
$('.ical').html(str)
Raw
iTunesinfo.widget - index.coffee
# Version: 0.0.2
refreshFrequency: 1000
style: """
bottom: 50px
left: 50px
right: 50px
color: #fff
text-align: right
text-shadow: 0 0 5px #666
#title
font-family: "A-OTF 新ゴ Pr6N L"
font-size: 2rem
line-height: 2rem
padding-bottom: 0.5rem
#detail
font-family: "A-OTF 新ゴ Pr6N EL"
font-size: 1.2rem
line-height: 1.5rem
"""
render: -> """
<div id="content">
<div id="title"></div>
<div id="detail"><span id="artist"></span><span id="splitter"> / </span><span id="album"></span></div>
</div>
"""
command: "osascript 'iTunesinfo.widget/iTunes.scpt'"
update: (output, domEl) ->
iTunesvalues = output.split("\n")
$(domEl).find('#title').text("#{iTunesvalues[0]}")
$(domEl).find('#artist').text("#{iTunesvalues[1]}")
$(domEl).find('#album').text("#{iTunesvalues[2]}")
if(iTunesvalues[1].trim() != "" && iTunesvalues[2].trim() != "")
$(domEl).find('#splitter').show()
else
$(domEl).find('#splitter').hide()
Raw
iTunesinfo.widget - iTunes.scpt
global tname, aname, alname, cfolder, coverTarget, coverStatus
set {tname, aname, alname} to {" ", " ", " "}
set status to my check()
try
if status is not false then
if status is "playing" then
tell application "iTunes"
set {tname, aname, alname} to {name, artist, album} of current track
end tell
else if status is "paused" then
tell application "iTunes"
set {tname, aname, alname} to {name, artist, album} of current track
end tell
else
set {tname, aname, alname} to {" ", " ", " "}
end if
end if
on error e
set {tname, aname, alname} to {" ", " ", " "}
end try
return tname & "
" & aname & "
" & alname & "
" & status
on check()
tell application "System Events" to set state to (name of processes) contains "iTunes"
if state is true then
using terms from application "iTunes"
tell application "iTunes" to if player state is playing then return "playing"
tell application "iTunes" to if player state is paused then return "paused"
tell application "iTunes" to if player state is stopped then return "stopped"
end using terms from
end if
return false
end check
Raw
memory-bar.widget - index.coffee
command: "memory_pressure && sysctl -n hw.memsize"
refreshFrequency: 10000
style: """
// Change bar height
bar-height = 6px
// Align contents left or right
widget-align = left
// Position this where you want
top 100px
left 20px
// Statistics text settings
color #fff
font-family Helvetica Neue
padding 10px 10px 15px
border-radius 5px
.container
width: 300px
text-align: widget-align
position: relative
clear: both
.widget-title
text-align: widget-align
text-shadow: 0 0 5px #000
.stats-container
margin-bottom 5px
border-collapse collapse
td
font-size: 14px
font-weight: 300
color: rgba(#fff, .9)
text-shadow: 0 0 5px #000
text-align: widget-align
.widget-title
font-size 10px
text-transform uppercase
font-weight bold
.label
font-size 8px
text-transform uppercase
font-weight bold
.bar-container
width: 100%
height: bar-height
border-radius: bar-height
float: widget-align
clear: both
background: rgba(#fff, .5)
position: absolute
margin-bottom: 5px
box-shadow: 0 0 3px #ccc
.bar
height: bar-height
float: widget-align
transition: width .2s ease-in-out
.bar:first-child
if widget-align == left
border-radius: bar-height 0 0 bar-height
else
border-radius: 0 bar-height bar-height 0
.bar:last-child
if widget-align == right
border-radius: bar-height 0 0 bar-height
else
border-radius: 0 bar-height bar-height 0
.bar-inactive
background: rgba(#0bf, .5)
.bar-active
background: rgba(#fc0, .5)
.bar-wired
background: rgba(#c00, .5)
"""
render: -> """
<div class="container">
<div class="widget-title">Memory</div>
<table class="stats-container" width="100%">
<tr>
<td class="stat"><span class="wired"></span></td>
<td class="stat"><span class="active"></span></td>
<td class="stat"><span class="inactive"></span></td>
<td class="stat"><span class="free"></span></td>
<td class="stat"><span class="total"></span></td>
</tr>
<tr>
<td class="label">wired</td>
<td class="label">active</td>
<td class="label">inactive</td>
<td class="label">free</td>
<td class="label">total</td>
</tr>
</table>
<div class="bar-container">
<div class="bar bar-wired"></div>
<div class="bar bar-active"></div>
<div class="bar bar-inactive"></div>
</div>
</div>
"""
update: (output, domEl) ->
usage = (pages) ->
mb = (pages * 4096) / 1024 / 1024
usageFormat mb
usageFormat = (mb) ->
if mb > 1024
gb = mb / 1024
"#{parseFloat(gb.toFixed(2))}GB"
else
"#{parseFloat(mb.toFixed())}MB"
updateStat = (sel, usedPages, totalBytes) ->
usedBytes = usedPages * 4096
percent = (usedBytes / totalBytes * 100).toFixed(1) + "%"
$(domEl).find(".#{sel}").text usage(usedPages)
$(domEl).find(".bar-#{sel}").css "width", percent
lines = output.split "\n"
freePages = lines[3].split(": ")[1]
inactivePages = lines[13].split(": ")[1]
activePages = lines[12].split(": ")[1]
wiredPages = lines[16].split(": ")[1]
totalBytes = lines[28]
$(domEl).find(".total").text usageFormat(totalBytes / 1024 / 1024)
updateStat 'free', freePages, totalBytes
updateStat 'active', activePages, totalBytes
updateStat 'inactive', inactivePages, totalBytes
updateStat 'wired', wiredPages, totalBytes
Raw
simple-clock.widget - index.coffee
command: "date \"+%Y%n%m%n%d%n%a%n%H%n%M%n%S\""
refreshFrequency: 2000
render: -> """
<div id="simpleClock">
<div class="clock">
<span class="hour"></span>:<span class="minute"></span>
</div>
<div class="date">
<span class="year"></span>.<span class="month"></span>.<span class="day"></span> <span class="wod"></span>
</div>
</div>
"""
update: (output, domEl) ->
zerotrim = (str) ->
str.match(/^0*(\d+)$/)[1]
updateElem = (sel, text) ->
$(domEl).find(".#{sel}").text(text)
date = output.split('\n')
updateElem 'year', date[0]
updateElem 'month', date[1]
updateElem 'day', date[2]
updateElem 'wod', date[3]
updateElem 'hour', zerotrim(date[4])
updateElem 'minute', date[5]
style: """
color: #fff
font-family: Helvetica Neue
font-weight: 100
text-shadow: 0 0 5px #999
text-align: right
right: 50px
top: 25px
#simpleClock .clock
font-size: 9rem
line-height: 8rem
#simpleClock .date
font-size: 2.5rem
font-weight: 200
"""
Raw
wifi-bar.widget - index.coffee
command: "/System/Library/PrivateFrameworks/Apple80211.framework/Versions/A/Resources/airport -I && networksetup -getinfo wi-fi | grep -Ei '(^IP address:)' | awk '{print $3}'"
refreshFrequency: 5000
style: """
// Change bar height
bar-height = 6px
// Align contents left or right
widget-align = left
// Position this where you want
top 180px
left 20px
// Statistics text settings
color #fff
font-family Helvetica Neue
padding 10px 10px 15px
border-radius 5px
.container
width: 300px
text-align: widget-align
position: relative
clear: both
.container:not(:first-child)
margin-top: 20px
.widget-title
text-align: widget-align
text-shadow: 0 0 5px #000
.stats-container
margin-bottom 5px
border-collapse collapse
td
font-size: 14px
font-weight: 300
color: rgba(#fff, .9)
text-shadow: 0 0 5px #000
text-align: widget-align
.widget-title, p
font-size 10px
text-transform uppercase
font-weight bold
.label
font-size 8px
text-transform uppercase
font-weight bold
.bar-container
width: 100%
height: bar-height
border-radius: bar-height
float: widget-align
clear: both
background: rgba(#fff, .5)
position: absolute
margin-bottom: 5px
box-shadow: 0 0 3px #ccc
.bar
height: bar-height
float: widget-align
transition: width .2s ease-in-out
.bar:first-child
border-radius: bar-height bar-height bar-height bar-height
"""
renderInfo: (ssid, rssi, ip, pctg, bg) -> """
<div class="container">
<div class="widget-title">Wi-fi</div>
<table class="stats-container" width="100%">
<tr>
<td class="stat"><span class="ssid">#{ssid}</span></td>
<td class="stat"><span class="rssi">#{rssi} dBm</span></td>
<td class="stat"><span class="ip">#{ip}</span></td>
</tr>
<tr>
<td class="label">SSID</td>
<td class="label">RSSI</td>
<td class="label">Local IP</td>
</tr>
</table>
<div class="bar-container">
<div class="bar" style="width: #{pctg}%; background: #{bg}"></div>
</div>
</div>
"""
update: (output, domEl) ->
regexp = output.match(/state: (\w+)\n/)
if(regexp == null)
$(domEl).html @renderInfo('OFF', 0, '', 0, 'rgba(0,0,0,0)')
else
state = regexp[1]
if(state == 'running')
ssid = output.match(/\sSSID: (.*)\n/)[1]
rssi = parseInt(output.match(/agrCtlRSSI: (.*)\n/)[1])
pctg = 0
if rssi > -40
pctg = 100
else if rssi > -80
pctg = (rssi + 80) * 100 / 40
color = 'rgba(204,0,0,.5)'
if rssi > -50
color = 'rgba(0,187,255,.5)'
if rssi > -60
color = 'rgba(255,204,0,.5)'
ip = output.match(/\n([^\n]+)\n?$/)[1]
$(domEl).html @renderInfo(ssid, rssi, ip, pctg, color)
else
$(domEl).html @renderInfo('Not connected', 0, '', 0, 'rgba(0,0,0,0)')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment