Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Initial revision

  • Loading branch information...
commit 5c865e18dbac59a943ac18c96bc9f96b9ffd7723 0 parents
Johan Dahlin authored
Showing with 190 additions and 0 deletions.
  1. +8 −0 README
  2. +28 −0 clock.html
  3. +78 −0 clock.js
  4. +76 −0 gtk-clock.js
8 README
@@ -0,0 +1,8 @@
+A simple javascript example displaying an clock in a
+web browser environment and on the desktop.
+
+Requires gjs and patches from the following bugs applied:
+https://bugzilla.gnome.org/show_bug.cgi?id=612228
+https://bugzilla.gnome.org/show_bug.cgi?id=614413
+
+Johan Dahlin, 2010-03-30
28 clock.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>HTML Clock</title>
+</head>
+
+<body>
+
+<canvas id="canvas" width="150" height="150"></canvas>
+
+<script type="text/javascript" src="clock.js"></script>
+<script type="text/javascript">
+function render(canvas) {
+ var ctx = canvas.getContext('2d');
+ renderClock(ctx);
+}
+var canvas = document.getElementById('canvas');
+if(canvas.getContext) {
+ render(canvas);
+ setInterval(function() { render(canvas); }, 1000);
+} else {
+ alert('This browser doesn\'t support the canvas element :(');
+}
+</script>
+</body>
+</html>
78 clock.js
@@ -0,0 +1,78 @@
+function renderClock(ctx){
+ var now = new Date();
+ ctx.save();
+ ctx.clearRect(0,0,150,150);
+ ctx.translate(75,75);
+ ctx.scale(0.4,0.4);
+ ctx.rotate(-Math.PI/2);
+ ctx.strokeStyle = "black";
+ ctx.fillStyle = "white";
+ ctx.lineWidth = 8;
+ ctx.lineCap = "round";
+
+ // Hour marks
+ ctx.save();
+ ctx.beginPath();
+ for (var i=0;i<12;i++){
+ ctx.rotate(Math.PI/6);
+ ctx.moveTo(100,0);
+ ctx.lineTo(120,0);
+ }
+ ctx.stroke();
+ ctx.restore();
+
+ // Minute marks
+ ctx.save();
+ ctx.lineWidth = 5;
+ ctx.beginPath();
+ for (i=0;i<60;i++){
+ if (i%5!=0) { // 5 minutes
+ ctx.moveTo(117,0);
+ ctx.lineTo(120,0);
+ }
+ ctx.rotate(Math.PI/30);
+ }
+ ctx.stroke();
+ ctx.restore();
+
+ var sec = now.getSeconds();
+ var min = now.getMinutes();
+ var hr = now.getHours();
+ hr = hr>=12 ? hr-12 : hr;
+
+ ctx.fillStyle = "black";
+
+ // write Hours
+ ctx.save();
+ ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+ ctx.lineWidth = 14;
+ ctx.beginPath();
+ ctx.moveTo(-20,0);
+ ctx.lineTo(80,0);
+ ctx.stroke();
+ ctx.restore();
+
+ // write Minutes
+ ctx.save();
+ ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+ ctx.lineWidth = 10;
+ ctx.beginPath();
+ ctx.moveTo(-28,0);
+ ctx.lineTo(112,0);
+ ctx.stroke();
+ ctx.restore();
+
+ // Write seconds
+ ctx.save();
+ ctx.rotate(sec * Math.PI/30);
+ ctx.strokeStyle = "#D40000";
+ ctx.fillStyle = "#D40000";
+ ctx.lineWidth = 6;
+ ctx.beginPath();
+ ctx.moveTo(-30,0);
+ ctx.lineTo(83,0);
+ ctx.stroke();
+ ctx.restore();
+
+ ctx.restore();
+}
76 gtk-clock.js
@@ -0,0 +1,76 @@
+// standard library imports
+const Cairo = imports.cairo;
+const Canvas = imports.html.canvas;
+const Lang = imports.lang;
+const Mainloop = imports.mainloop;
+
+// gi imports
+const Gtk = imports.gi.Gtk;
+const Gdk = imports.gi.Gdk;
+
+const Clock = imports.clock;
+
+function GtkClock(args) {
+ this._init(args);
+}
+
+GtkClock.prototype = {
+ _init : function(args) {
+ this._canvas = new Canvas.Canvas({ width: 150, height: 150 });
+ this._buildUI();
+ Mainloop.timeout_add(1000, Lang.bind(this, this._onTimeoutUpdate));
+ },
+
+ _buildUI : function() {
+ this._window = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL });
+ this._window.set_size_request(150, 150);
+ this._window.connect("destroy", Lang.bind(this, this._onWindowDestroy));
+
+ this._da = new Gtk.DrawingArea();
+ this._da.set_app_paintable(true);
+ this._da.connect("expose-event", Lang.bind(this, this._onDrawingAreaExpose));
+ this._window.add(this._da);
+ },
+
+ _render : function() {
+ let cr = Gdk.cairo_create(this._da.window);
+ // draw a white background
+ cr.setSourceRGB(1, 1, 1);
+ cr.setOperator(Cairo.Operator.SOURCE);
+ cr.paint();
+
+ // draw the clock
+ this._context = this._canvas.getContext('2d', cr);
+ Clock.renderClock(this._context);
+ },
+
+ _onTimeoutUpdate : function() {
+ this._render();
+ return true;
+ },
+
+ _onDrawingAreaExpose : function(window, event) {
+ this._render();
+ return false;
+ },
+
+ _onWindowDestroy : function(window) {
+ Gtk.main_quit();
+ },
+
+ run : function() {
+ this._window.show_all();
+ Gtk.main();
+ }
+
+}
+
+function main() {
+ Gtk.init(0, null);
+
+ let app = new GtkClock(ARGV[0]);
+ app.run();
+ return 0;
+}
+
+main();
Please sign in to comment.
Something went wrong with that request. Please try again.