cleaned, fixed typo and updated README

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:
 `<div id="container" style="width:400px; height:250px;"></div>`
 
 ## 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

tsushin.widget/tsushin.coffee

@@ -21,8 +21,6 @@ refreshFrequency: 2000
 render: (domEl) -> """
 <script src="https://code.highcharts.com/stock/highstock.js"></script>
 <div id="container" style="width:400px; height:250px;">Loading ...</div>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 """
 
 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%

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) -> """
 <script src="https://code.highcharts.com/stock/highstock.js"></script>
-<div id="container" style="width:200px; height:50px;">Loading ...</div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+<div id="container" style="width:200px; height:50px;">Loading...</div>
 """
 
 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,29 +82,37 @@ 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
         color: '#7eFFFF'
       }]
       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,25 +164,18 @@ 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/)
 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

tsushin_small.widget/tsushin.db

@@ -0,0 +1 @@
+6650 20260

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"
 }