Skip to content

Commit

Permalink
Rewrite as AngularJs app
Browse files Browse the repository at this point in the history
  • Loading branch information
vidakovic committed Feb 5, 2015
1 parent 9707e14 commit 2821680
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 87 deletions.
Binary file modified gadget/images/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 21 additions & 5 deletions gadget/index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
<h3>Wakatime Hangout</h3>
<form class="form-inline">
<div class="form-group">
<img src="https://avatars2.githubusercontent.com/u/4814844?v=3&s=200">
</div>
<div class="form-group">
<input id="api_key" name="api_key" ng-model="apiKey" placeholder="API Key">
</div>
<div class="form-group">
<input id="project" name="project" ng-model="project" placeholder="Project">
</div>
<div class="form-group">
<input type="checkbox" ng-model="showLogo">
</div>
<div class="form-group">
<div class="btn-group">
<button class="btn btn-success" ng-click="start()" ng-hide="running" type="button">Start</button>
<button class="btn btn-danger" ng-click="stop()" ng-show="running" type="button">Stop</button>
<button class="btn btn-default" ng-click="reset()" type="button">Reset</button>
</div>
</div>
</form>

<form>
<label>API Key</label>
<input id="api_key" name="api_key">
</form>
205 changes: 129 additions & 76 deletions gadget/scripts/wakatime.js
Original file line number Diff line number Diff line change
@@ -1,86 +1,139 @@
/* global gapi, gadgets, $ */

var logoUrl = 'https://wakatime.com/static/img/wakatime-white-120.png';
var overlayEffect = null;

function sendHeartbeat(file, time, project, language, isWrite, lines) {
// TODO
}

function createTextOverlay(string) {
// Create a canvas to draw on
var canvas = document.createElement('canvas');
canvas.setAttribute('width', 166);
canvas.setAttribute('height', 100);

var context = canvas.getContext('2d');

// Draw background
//context.fillStyle = '#BBB';
//context.fillRect(0,0,166,50);

// Draw text
context.font = '16pt Impact';
context.lineWidth = 6;
context.lineStyle = '#000';
context.fillStyle = '#FFF';
context.textAlign = 'center';
context.textBaseline = 'bottom';
context.strokeText(string, canvas.width / 2, canvas.height / 2);
context.fillText(string, canvas.width / 2, canvas.height / 2);

return canvas.toDataURL();
}

function showOverlay() {
var options = {
'scale': {
'magnitude': 0.5,
'reference': gapi.hangout.av.effects.ScaleReference.WIDTH
}
};
//var overlayImage = gapi.hangout.av.effects.createImageResource(logoUrl);
var overlayImage = gapi.hangout.av.effects.createImageResource(createTextOverlay('Time: 00:00:23'));
overlayEffect = overlayImage.createOverlay(options);
overlayEffect.setPosition(-0.5, 0.45);
overlayEffect.setVisible(true);
}

function startApp() {
gapi.hangout.onair.onYouTubeLiveIdReady.add(
function(eventObject) {
/* global angular, gapi, gadgets, moment, $ */

(function() {
'use strict';

angular.module('wakatime', ['ngCookies']).config(function ($rootScope) {
// Wait for gadget to load.
gadgets.util.registerOnLoadHandler(function() {
gapi.hangout.onApiReady.add(
function(e) {
$rootScope.$broadcast('hangout.ready', e);
});
});
}).controller('WakatimeCtrl', function ($scope, $http, Hangout) {
$scope.edit = true;
$scope.running = false;
$scope.logo = 'https://avatars2.githubusercontent.com/u/4814844?v=3&s=200';

gapi.hangout.onParticipantsChanged.add(
function(eventObject) {
});
$scope.start = function() {
Hangout.start();
};

gapi.hangout.onair.onBroadcastingChanged.add(
function(eventObject) {
});
$scope.stop = function() {
Hangout.stop();
};

gapi.hangout.onair.onNewParticipantInBroadcastChanged.add(
function(eventObject) {
});
$scope.reset = function() {
Hangout.reset();
};

gapi.hangout.onTopicChanged.add(
function(eventObject) {
$scope.$watch('showLogo', function(newValue, oldValue) {
Hangout.showLogo(newValue);
});

gapi.hangout.onTopicChanged.add(
function(eventObject) {
});

}

function init() {
// When API is ready...
gapi.hangout.onApiReady.add(
function(eventObj) {
$scope.sendHeartbeat = function(file, time, project, language, isWrite, lines) {
// TODO
showOverlay();
};
}).factory('Hangout', function ($rootScope, $interval) {
var overlays = {};
var watch;
var time = 0;

function createTextOverlay(string) {
// Create a canvas to draw on
var canvas = document.createElement('canvas');
canvas.setAttribute('width', 166);
canvas.setAttribute('height', 100);

var context = canvas.getContext('2d');

// Draw text
context.font = '16pt Impact';
context.lineWidth = 6;
context.lineStyle = '#000';
context.fillStyle = '#FFF';
context.textAlign = 'center';
context.textBaseline = 'bottom';
context.strokeText(string, canvas.width / 2, canvas.height / 2);
context.fillText(string, canvas.width / 2, canvas.height / 2);

return canvas.toDataURL();
}

var Hangout = {
init: function() {
gapi.hangout.onParticipantsChanged.add(
function(e) {
$rootScope.$broadcast('hangout.participant', e);
});

gapi.hangout.onair.onBroadcastingChanged.add(
function(e) {
$rootScope.$broadcast('hangout.broadcasting', e);
});

gapi.hangout.onair.onNewParticipantInBroadcastChanged.add(
function(e) {
});

gapi.hangout.onTopicChanged.add(
function(e) {
$rootScope.$broadcast('hangout.topic', e);
});
},
start: function() {
if(watch) {
return;
} else {
watch = $interval(function() {
time += 5000;
Hangout.setTime(moment(time).format('HH:mm:ss'));
}, 5000)
}
},
stop: function() {
if(watch) {
$interval.cancel(watch);
watch = undefined;
}
},
reset: function() {
time = 0;
},
setTime: function(time) {
if(overlays['time']) {
overlays['time'].dispose();
}
overlays['time'] = gapi.hangout.av.effects.createImageResource(createTextOverlay(time));
overlays['time'] = overlays['time'].createOverlay({
'scale': {
'magnitude': 0.5,
'reference': gapi.hangout.av.effects.ScaleReference.WIDTH
}
});
overlays['time'].setPosition(-0.5, 0.45);
overlays['time'].setVisible(true);
},
showLogo: function(show) {
if(!overlays['logo']) {
overlays['logo'] = gapi.hangout.av.effects.createImageResource('https://avatars2.githubusercontent.com/u/4814844?v=3&s=200');
overlays['logo'] = overlays['logo'].createOverlay({
'scale': {
'magnitude': 0.5,
'reference': gapi.hangout.av.effects.ScaleReference.WIDTH
}
});
overlays['logo'].setPosition(0.5, 0.45);
}
overlays['logo'].setVisible(show);
}
};

$rootScope.$on('hangout.ready', function(e) {
Hangout.init();
});
}

// Wait for gadget to load.
gadgets.util.registerOnLoadHandler(init);
return Hangout;
});
})();
4 changes: 0 additions & 4 deletions gadget/styles/wakatime.css
Original file line number Diff line number Diff line change
@@ -1,4 +0,0 @@
body {
color: #ffffff;
background-color: #000000;
}
5 changes: 4 additions & 1 deletion gadget/wakatime.xml
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,17 @@
<Content type="html"><![CDATA[
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link href="wakatime.css" />
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<body ng-app="wakatime" ng-controller="WakatimeCtrl">
<script src="//plus.google.com/hangouts/_/api/v1/hangout.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<include src="index.html" />
Expand Down
2 changes: 1 addition & 1 deletion gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ gulp.task('merge', function () {
//.pipe($.inject(gulp.src(['./gadget/**/*.js', './gadget/**/*.css'], {read: false})))

return gulp.src('./gadget/wakatime.xml')
.pipe($.replace(/<link href="(.*\.css)"[^>]*>/g, function(s, filename) {
.pipe($.replace(/<link href="(wakatime\.css)"[^>]*>/g, function(s, filename) {
var style = fs.readFileSync('./gadget/styles/' + filename, 'utf8');
return '<style>\n' + style + '\n</style>';
}))
Expand Down
2 changes: 2 additions & 0 deletions public/wakatime.xml
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<Content type="html"><![CDATA[
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
body {
color: #ffffff;
Expand All @@ -33,6 +34,7 @@ body {
<script src="//plus.google.com/hangouts/_/api/v1/hangout.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<h3>Wakatime Hangout</h3>
Expand Down

0 comments on commit 2821680

Please sign in to comment.