Thursday, April 14, 2016

Simple Chrome Clock App with Konva JS Framework

April 14, 2016 beginner , chrome app , current date time , extension , html5 clock app , installing unpacked app , javascript , jquery , konva js framework , manifest , packaging , tutorial , using framework libraries

How to Get it and Install:

follow the github link below to get the chrome app,

https://github.com/quickgrid/sample-chrome-clock In order to get the packed crx click on pack extension button in settings > extensions.

Download the image assets and other files such Konva and jquery from the repo to make it work. I didn't bother making the code efficient. Reusing some values Should make it a lot better.

Installation Screenshots:

App Screenshots:

app.html

	<!DOCTYPE html>
	<html>
	<head>
	<script src="js/konva.min.js"></script>
	<meta charset="utf-8">
	<meta name="author" content="Asif Ahmed">
	<meta name="description" content="http://quickgrid.blogspot.com">
	<title>Simple Chrome Clock App</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #F0F0F0;
	}
	</style>
	</head>

	<body>
	<div id="container"></div>
	<script src="js/jquery.min.js"></script>
	<script src="js/app.js"></script>
	</body>
	</html>

view raw app.html hosted with ❤ by GitHub

manifest.json

	{
	"name": "Neon Clock",
	"author": "Asif Ahmed",
	"description": "A simple clock with date and time",
	"version": "0.0.1",
	"manifest_version": 2,
	"app": {
	"background": {
	"scripts": ["background.js"]
	}
	},
	"icons": {
	"16": "clock-16.png",
	"128": "clock-128.png"
	},
	"permissions": ["storage", "alarms", "notifications"]
	}

view raw manifest.json hosted with ❤ by GitHub

background.js

	function launch(){
	chrome.app.window.create('app.html',{
	id: 'main',
	'bounds': {
	'width': 600,
	'height': 600
	},
	minWidth: 600,
	minHeight: 600,
	maxWidth: 600,
	maxHeight: 600,
	});
	}

	chrome.app.runtime.onLaunched.addListener(launch);




	// These event handlers are not implemented yet

	chrome.runtime.onInstalled.addListener(function() {
	//chrome.storage.local.set(object items, function callback);
	});

	chrome.runtime.onSuspend.addListener(function() {
	// Do some simple clean-up tasks.
	});

	chrome.notifications.onClicked.addListener(function() {
	// Click on notifications
	});

view raw background.js hosted with ❤ by GitHub

app.js

	/**
	* Author: Asif Ahmed
	* Site: http://quickgrid.blogspot.com
	*/

	(function(){
	'use strict';

	var width = window.innerWidth;
	var height = window.innerHeight;

	var stage = new Konva.Stage({
	container: 'container',
	width: width,
	height: height
	});

	var layer = new Konva.Layer();

	var boxHeight = 40;
	var boxWidth = boxHeight * 2;
	var clockRadius = boxHeight * 5;

	var circle = new Konva.Circle({
	x: stage.getWidth() / 2,
	y: stage.getHeight() / 2,
	radius: clockRadius,
	fill: 'black',
	stroke: 'white',
	strokeWidth: 2
	});

	var dateGroup = new Konva.Group();
	var date = new Date();

	var dateBox = new Konva.Rect({
	x: stage.getWidth() / 2 - 2 * boxWidth,
	y: stage.getHeight() / 2 - boxHeight / 2,
	width: boxWidth,
	height: boxHeight,
	fill: 'black',
	stroke: 'white',
	strokeWidth: 1
	});

	var dateText = new Konva.Text({
	x: stage.getWidth() / 2 - 2 * boxWidth,
	y: stage.getHeight() / 2 - boxHeight / 4,
	text: date.getMonth( )+ "/" + date.getDate() + "/" + date.getYear(),
	fontSize: 22,
	fontFamily: 'Calibri',
	fill: '#fff',
	height: boxHeight,
	width: boxWidth,
	padding: 0,
	align: 'center'
	});

	dateGroup.add(dateBox);
	dateGroup.add(dateText);


	var timeGroup = new Konva.Group();

	var timeBox = new Konva.Rect({
	x: stage.getWidth() / 2 + boxWidth ,
	y: stage.getHeight() / 2 - boxHeight / 2,
	width: boxWidth,
	height: boxHeight,
	fill: 'black',
	stroke: 'white',
	strokeWidth: 1
	});

	var timeText = new Konva.Text({
	x: stage.getWidth() / 2 + boxWidth,
	y: stage.getHeight() / 2 - boxHeight / 4,
	text: 'Current Time',
	fontSize: 22,
	fontFamily: 'Calibri',
	fill: '#fff',
	height: boxHeight,
	width: boxWidth,
	padding: 0,
	align: 'center'
	});

	timeGroup.add(timeBox);
	timeGroup.add(timeText);



	var secondHand = new Konva.Rect({
	x: stage.getWidth() / 2,
	y: stage.getHeight() / 2,
	width: boxHeight / 10,
	height: clockRadius - clockRadius / 6,
	fill: 'white',
	offset: {
	x: boxHeight / 12,
	y: 0
	}
	});


	// add the shape to the layer
	layer.add(circle);
	layer.add(dateGroup);
	layer.add(timeGroup);
	layer.add(secondHand);

	// add the layer to the stage
	stage.add(layer);



	var anim = new Konva.Animation(function(frame) {
	var time = frame.time;
	var timeDiff = frame.timeDiff;
	var frameRate = frame.frameRate;

	var now = new Date();
	var second = now.getSeconds();

	// update stuff
	var angularSpeed = 6;
	var angleDiff = timeDiff * angularSpeed / 1000;
	secondHand.rotate(angleDiff);

	timeText.setText( date.getHours( )+ ":" + date.getMinutes() + ":" + date.getSeconds() );
	}, layer);


	anim.start();


	$( window ).resize(function() {
	circle.setX(window.innerWidth / 2);
	circle.setY(window.innerHeight / 2);
	layer.draw();
	});


	})();

view raw app.js hosted with ❤ by GitHub

Thursday, April 14, 2016

Simple Chrome Clock App with Konva JS Framework

How to Get it and Install:

follow the github link below to get the chrome app,

Installation Screenshots:

App Screenshots:

app.html

manifest.json

background.js

app.js

No comments:

POPULAR POSTS

BLOG ARCHIVE

Information

https://quickgrid.wordpress.com

Featured Post

C++ Solution UVA 821 - Page Hopping Floyd Warshall Simulation Explanation and stl set

Version

QuickGrid Version 0.1.ß

Changelog

- Google Pagespeed ranking decreased to 80/100

- Not Fixed: Navbar scrolling smooth transition

- Not Fixed: Article header redesign

- Not Fixed: Tablet view webpage style