diff --git a/README.md b/README.md index 2af74ce..88c9079 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,13 @@ # tsushin (通信) Übersicht widget : Dynamically updating line chart that shows total up and down data being transferred to your Mac in kB. Heavily inspired by the work of Dion Munk - network-throughput - Of course you might want to know what tsushin means in case you haven't studied Japanese before, it means communication. - +Regular version - tsushin.widget (400px x 250px) ![alt text](screenshot.png "Tsushin") +Smaller version - tsushin_small.widget (200px x 50px) +![alt text](screenshot_small.png "Tsushin small") +(Thanks to the feedbacks from [Porco-Rosso](https://github.com/Porco-Rosso)) + ## How to use: Just copy tsushin.widget folder to your Widgets Folder. _Please let me know if you get error that says .bash_profile does not exists._ To move the widget around modify the numbers in the style section in the tsushin.coffee file: @@ -13,7 +16,10 @@ top: 10.6% left: 10% ``` -To change the size of the chart area, modify the values of width and heights in the following code block in the `render` section: +## Regular and smaller versions included +There are two versions included. The regular version, tsushin.widget, has 400 px width and 250 px height by default. The smaller version has 200 px width and 50 px height by default. When scaling down the regular version below certain size it did not scale down properly. Smaller version has also adjusted font size and line width to match its scale. + +You can still change the size of the chart area to your liking. To do so, modify the values of width and heights in the following code block in the `render` section: `
` ## How to read the graph: @@ -23,9 +29,6 @@ Blue line then is for the total of downloaded data at the given time. ## Note: This should work out of box just by placing tsushin.widget folder in your Widgets Folder. However if you entcounter any error, please let me know. -## Update: -Thanks to the feedbacks from @Porco-Rosso, there is now a smaller version in the tsuchin_small.widget. It can for instance be placed in the bottom or top of your screen among other widgets to make a visual status bar. - -![alt text](screenshot_small.png "Tsushin small") +In case you want to know what tsushin means, it means communication in Japanese. Happy coding diff --git a/tsushin.widget.zip b/tsushin.widget.zip index 3cdda4e..780c18c 100644 Binary files a/tsushin.widget.zip and b/tsushin.widget.zip differ diff --git a/tsushin.widget/tsushin.coffee b/tsushin.widget/tsushin.coffee index 6a6b6e9..81f8e25 100644 --- a/tsushin.widget/tsushin.coffee +++ b/tsushin.widget/tsushin.coffee @@ -21,8 +21,6 @@ refreshFrequency: 2000 render: (domEl) -> """
Loading ...
- - """ afterRender: (domEl) -> @@ -37,7 +35,7 @@ afterRender: (domEl) -> backgroundColor: null style: color: '#7eFFFF' - fontFamily:'hack, Monaco, Melno, Courier, Helvetica Neue, Osaka' + fontFamily:'hack, Andale Mono, Melno, Monaco, Courier, Helvetica Neue, Osaka' fontSize: '12px' navigator: enabled: false @@ -148,18 +146,15 @@ update:(output,domEl) -> chart.series[0].addPoint([time, dataIn], true); chart.series[1].addPoint([time, dataOut], true); - console.log(err) # the CSS style for this widget, written using Stylus # (http://learnboost.github.io/stylus/) style: """ @font-face font-family: 'hack' src: url('assets/hack.ttf') - // https://css-tricks.com/snippets/css/using-font-face/ - // how to use font available in directory color: #7eFFFF - font-family: hack, Courier, Helvetica Neue, Osaka, Monaco, Melno + font-family: hack, Andale Mono, Melno, Monaco, Courier, Helvetica Neue, Osaka font-weight: 100 top: 65% left: 2% diff --git a/tsushin_small.widget.zip b/tsushin_small.widget.zip index 1ac8cbe..2e24de6 100644 Binary files a/tsushin_small.widget.zip and b/tsushin_small.widget.zip differ diff --git a/tsushin_small.widget/tsushin.coffee b/tsushin_small.widget/tsushin.coffee index 91de463..fdf7376 100644 --- a/tsushin_small.widget/tsushin.coffee +++ b/tsushin_small.widget/tsushin.coffee @@ -1,7 +1,6 @@ # Tsushin widget for ubersicht # network throughput in kB # Heavily inspired by Dion Munk's work network-throughput http://tracesof.net/uebersicht-widgets/#ubersicht-network-throughput -# please note it assumes that .bash_profile exists in current user's home directory command: """ if [ ! -e tsushin.sh ]; then @@ -14,14 +13,10 @@ fi # The refresh frequency in milliseconds refreshFrequency: 2000 -# Render gets called after the shell command has executed. The command's output -# is passed in as a string. Whatever it returns will get rendered as HTML. -# # Change container size to change the sizing of the chart render: (domEl) -> """ -
Loading ...
- +
Loading...
""" afterRender: (domEl) -> @@ -35,8 +30,8 @@ afterRender: (domEl) -> backgroundColor: null style: - color: '#7eFFFF' - fontFamily:'hack, Monaco, Melno, Courier, Helvetica Neue, Osaka' + color: 'rgba(126, 255, 255, 0.50)' + fontFamily:'hack, Andale Mono, Melno, Monaco, Courier, Helvetica Neue, Osaka' fontSize: '5px' navigator: enabled: false @@ -69,13 +64,10 @@ afterRender: (domEl) -> #text: 'Network througput (bytes)' enabled: false style: - color: '#7eFFFF' + color: 'rgba(126, 255, 255, 0.50)' fontSize: '5px' fontFamily:'hack, Courier, Helvetica Neue, Osaka, Monaco, Melno' - -#============================== -# X - AXIS! -# ===================== +#======================== xAxis: type: 'datetime' dateTimeLabelFormats: @@ -90,21 +82,29 @@ afterRender: (domEl) -> #padding: -5 y: 8 style: - color: '#7eFFFF' + color: 'rgba(126, 255, 255, 0.50)' fontSize: '8px' - gridLineColor: null + + #gridLineColor: 'transparent' +# null lineWidth: 0 + gridLineWidth: 0 minorGridLineWidth: 0 minorTickLenght: 0 tickLength: 0 - xlineColor: 'transparent' + lineColor: 'transparent' + plotLines:[{ + width: 0 + value: 0 + color: 'rgba(126, 255, 255, 0.50)' + }] # ================================== -# Y AXIS! yAxis: + lineColor: 'transparent' offset: -5 title: text: null - style: color: '#7eFFFF' + style: color: 'rgba(126, 255, 255, 0.50)' plotLines:[{ value: 0 width: 0.5 @@ -112,7 +112,7 @@ afterRender: (domEl) -> }] labels: style: - color: '#7eFFFF' + color: 'rgba(126, 255, 255, 0.50)' fontSize: '8px' y: 7 @@ -122,7 +122,6 @@ afterRender: (domEl) -> #reserveSpace: false showFirstLabel: false showLastLabel: true - gridLineColor: null legend: @@ -131,10 +130,9 @@ afterRender: (domEl) -> # align: 'top' floating: true - gridLineColor: null - -# =================== -# data !! +# ========================== +# Here is where you put data +# Dynamically fed by update code below series: [ { name: 'Down (kB)' lineWidth: 0.5 @@ -153,8 +151,7 @@ afterRender: (domEl) -> ) update:(output,domEl) -> - #How to dynamically update data for highcharts/stock - #http://stackoverflow.com/questions/16061032/highcharts-series-data-array #http://stackoverflow.com/questions/13049977/how-can-i-get-access-to-a-highcharts-chart-through-a-dom-container + #How to dynamically update data for highcharts/stock #http://stackoverflow.com/questions/16061032/highcharts-series-data-array #http://stackoverflow.com/questions/13049977/how-can-i-get-access-to-a-highcharts-chart-through-a-dom-container #http://api.highcharts.com/highstock/Series.addPoint() @run ''' if [ ! -e tsushin.sh ]; then @@ -167,16 +164,11 @@ update:(output,domEl) -> data=output.split(" "); dataIn = parseFloat(data[0]); dataOut = parseFloat(data[1]); - console.log(dataIn) - console.log(dataOut) chart=$(domEl).find("#container").highcharts(); - #i=-99; time= (new Date).getTime(); #timeData = time + i * 10000; chart.series[0].addPoint([time, dataIn], true); chart.series[1].addPoint([time, dataOut], true); - - console.log(err) # the CSS style for this widget, written using Stylus # (http://learnboost.github.io/stylus/) @@ -184,8 +176,6 @@ style: """ @font-face font-family: 'hack' src: url('assets/hack.ttf') - // https://css-tricks.com/snippets/css/using-font-face/ - // how to use font available in directory color: #7eFFFF font-family: hack, Courier, Helvetica Neue, Osaka, Monaco, Melno diff --git a/tsushin_small.widget/tsushin.db b/tsushin_small.widget/tsushin.db index e69de29..5a04426 100644 --- a/tsushin_small.widget/tsushin.db +++ b/tsushin_small.widget/tsushin.db @@ -0,0 +1 @@ +6650 20260 diff --git a/widget.json b/widget.json index 900d9cd..a39c1ce 100644 --- a/widget.json +++ b/widget.json @@ -1,6 +1,6 @@ { - "name": "tshushin", - "description": "A graph that shows total up and down data being transferred to your Mac. Heavily inspired by the work of Dion Munk - network-throughput", + "name": "tsushin", + "description": "A graph that shows total up and down data being transferred to your Mac. Heavily inspired by the work of Dion Munk - network-throughput. This widget now includes a smaller version in tsushin_small.widget (Width 200 Height 50).", "author": "Ryuei Sasaki", "email": "ryuei.sasaki@gmail.com" }