added screenshot option

ilbonte · Dec 1, 2015 · 6ac4765 · 6ac4765
1 parent 924c3fc
commit 6ac4765
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,23 @@
-# More charts
-http://ilbonte.github.io/rescuetime-again/
+# Why
+
+[RescueTime](rescuetime.com) is a fantastic tool for time management and I use it mainly to understand my daily habits so I can be more productive.
+Unfortunately the free version doesn't have such in-depth analysis as I like so built my own charts using their API to access the data
+
+# Usage
+
+1.  Go to the [project page](http://ilbonte.github.io/rescuetime-again/)
+2.  Choose data source: directly from RT or upload you file (see below)
+3.  ????
+4.  PROFIT!
+
+### Notes
+
+RescueTime's free plan allows you to see only the last tree month of data, so if you don't own a premium account be sure to select a period of time within 3 month from now.
+Since I have the free plan, but I wanted to save my data so I could analyze it later or compare it with the most recent I've included two utilities for this purpose. On the main page you can choose to download the data for the selected range and on [this page](link) you can merge as many as you want file together so that you can analyze more than just the last tree months
+
+# TODO
+
+- [x] [merge page](link)
+- [ ] Allow multiple select in the merge page
+- [ ] Comparison page
+- [ ] Whatever you want
diff --git a/app.js b/app.js
@@ -430,7 +430,7 @@ function calcHours(file) {
             ticks: [{v: 0, f: 'Sunday'}, {v: 1, f: 'Monday'}, {v: 2, f: 'Tuesday'}, {v: 3, f: 'Wednesday'}, {
                 v: 4,
                 f: 'Thursday'
-            }, {v: 5, f: 'Friday'}, {v: 6, f: 'Saturday'}],
+            }, {v: 5, f: 'Friday'}, {v: 6, f: 'Saturday'}]
         },
         seriesType: "bars",
         // 1st series on axis 0 (by default), 2nd series on axis 1
@@ -454,8 +454,6 @@ function calcHours(file) {
     avgDayChart.draw(avgDayData, avgDayOptions);
     //daysChart.draw(dayData, dayOptions);
     comboDayChart.draw(comboDayData, comboDayOptions);
-
-
 }
 
 /**
@@ -559,6 +557,7 @@ function calcActivity(file) {
     });
     dashboard.bind(control, chart);
     dashboard.draw(data);
+
 }
 
 /**
@@ -684,6 +683,15 @@ function checkFiles() {
     }
 }
 
+function screenShot() {
+    html2canvas(document.getElementById('screen'), {
+        onrendered: function (canvas) {
+            var myImage = canvas.toDataURL("image/png");
+            window.open(myImage);
+        }
+    });
+}
+
+
+
 
-//TODO: salva mega report as jpg/png... come una spece di screenshot di tutta la pagina
-//TODO: controllo se c'è l'apikey quando si elabora
diff --git a/index.html b/index.html
@@ -16,18 +16,22 @@
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript"
             src="https://www.gstatic.com/charts/loader.js"></script>
+    <script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>
+
 </head>
 
 <body>
-<div class="container-fluid">
+<button onclick="screenShot()">aaaaaa</button>
+<div class="container-fluid" id="screen">
     <div class="row row-centered">
         <div class="col-sm-8 col-centered">
             <div class="page-header">
                 <h1>More <a target="_blank" href="https://www.rescuetime.com/">RescueTime</a> Charts
                     <small>Cuz <a href="https://www.reddit.com/r/dataisbeautiful/top/?sort=top&t=month" target="_blank">data
                         are beautiful!</a></small>
                 </h1>
-                <h5>Psssst: you really should read the <a href="" TARGET="_blank">README</a> before using this tool!</h5>
+                <h5>Psssst: you really should read the <a href="" TARGET="_blank">README</a> before using this tool!
+                </h5>
             </div>
         </div>
     </div>
@@ -54,7 +58,8 @@ <h2>Get the data from RescueTime</h2>
             <button type="button" class="btn btn-primary" onClick="init()">Elaborate</button>
             <div class="checkbox">
                 <label>
-                    <input type="checkbox" id="download"> Download JSON file for the selected range. <a href="" target="_blank">Why?</a>
+                    <input type="checkbox" id="download"> Download JSON file for the selected range. <a href=""
+                                                                                                        target="_blank">Why?</a>
                 </label>
             </div>
         </div>
@@ -64,8 +69,10 @@ <h2>Get the data from RescueTime</h2>
     </div>
     <div class="row">
         <h2> ... OR upload your files</h2>
+
         <H1>TODO:</H1>
         <H6>What is this or don't know how to use it? Read <a href="">HERE</a></H6>
+
         <div class="col-sm-3">
             <h3>Activity</h3>
             <input id="fileActivity" type="file"/>
@@ -90,9 +97,11 @@ <h3>Efficency</h3>
         <div class="col-sm-12">
             <blockquote class="col-sm-offset-1 col-sm-10">
                 <p>This chart shows your productivity during the select range. Productivity is calculated with this
-                    formula: <br>(Time*RescueTime's Productivity Score)/3600. <br>This means that if you do 60 minutes with
+                    formula: <br>(Time*RescueTime's Productivity Score)/3600. <br>This means that if you do 60 minutes
+                    with
                     100 as Productivity Score your productivity will be 100 too, but if you do only 30 minutes with 100
-                    Productivity Score your productivity will be 50! <br> You can think at blue line as the thing you got done.
+                    Productivity Score your productivity will be 50! <br> You can think at blue line as the thing you
+                    got done.
                     <br> If show dates is checked instead of points you will be able to see date and time for individual
                     dots but the trend line may not be available.</p>
             </blockquote>
@@ -134,11 +143,14 @@ <h3>Efficency</h3>
         <div class="col-sm-12">
             <!--<h2>Total minutes for hour</h2>-->
             <blockquote class="col-sm-offset-1 col-sm-10">
-                <p>This chart shows your average productivity and the total time spent for each hour in the selected period. If there is a big gap between the line and the chart this means that for that specific point your RescueTime's productivity pulse where high</p>
+                <p>This chart shows your average productivity and the total time spent for each hour in the selected
+                    period. If there is a big gap between the line and the chart this means that for that specific point
+                    your RescueTime's productivity pulse where high</p>
             </blockquote>
             <br>
             <br>
             <br>
+
             <div id="combo_hour_graph"></div>
         </div>
     </div>
@@ -167,10 +179,12 @@ <h3>Efficency</h3>
     </div>
 
     <div class="row chart">
+
         <div class="col-sm-12">
             <h2>Top 50 activities </h2>
             <blockquote class="col-sm-offset-1 col-sm-10">
-                <p>This chart simply show your top activities for the select range bar's color is based on RescueTime's colors.</p>
+                <p>This chart simply show your top activities for the select range bar's color is based on RescueTime's
+                    colors.</p>
             </blockquote>
 
             <h2 id="act-display"></h2>
@@ -204,6 +218,12 @@ <h2 id="act-display"></h2>
             </div>
         </div>
     </div>
+    <div class="row chart">
+        <div class="col-sm-offset-4 col-sm-4"><br>
+            <button type="button" class="btn btn-primary" onClick="screenShot()">Download as image (alpha)</button>
+        </div>
+
+    </div>
 </div>
 
 <script src="app.js"></script>