Customizable html5 canvas analogic clocks

Published on by Yousfi Benameur

 
In the previous posts relative to html5 canvas i shipped many html5 canvas clocks.
these codes below customize three of them on many parameters as
-needles hour+minutes colors
-graduations colors
- hour digit numbers colors
-text color
-clock face gradients colors
-background color,gradients,pattern.
these parameters combinations can produce thousands of diffrent clocks.
this needs only to run the form for making the settings,the clock is shown in fullscreen (with IE emulation -ie11 tested here-)
Rightclick to close the window.
See some screenShots below of this application.


All is tested on Windows8.1 only

 


*1* pure html5 canvas clock (no image)
Publi yform
yform=Newobject("yclock")
yform.Show
Read Events
Retu
*
Define Class yclock As Form
    Top = 0
	Left = 0
	Height = 209
	Width = 354
	ShowWindow = 2
	Caption = "Clock settings"
	MaxButton = .F.
	MinButton = .F.
	BackColor = Rgb(102,0,51)
	Name = "Form1"

	Add Object command1 As CommandButton With ;
		Top = 9, ;
		Left = 11, ;
		Height = 37, ;
		Width = 133, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "colCircle1", ;
		MousePointer = 15, ;
		ForeColor = Rgb(255,0,255), ;
		BackColor = Rgb(0,0,255),;
		Name = "Command1"

	Add Object command2 As CommandButton With ;
		Top = 49, ;
		Left = 11, ;
		Height = 38, ;
		Width = 133, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "cilCircle2", ;
		MousePointer = 15, ;
		ForeColor = Rgb(0,0,255), ;
		BackColor = Rgb(0,255,0), ;
		Name = "Command2"

	Add Object command3 As CommandButton With ;
		Top = 88, ;
		Left = 11, ;
		Height = 38, ;
		Width = 133, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "Gradu(hour,min)", ;
		MousePointer = 15, ;
		ForeColor = Rgb(0,0,255), ;
		BackColor = Rgb(0,255,0), ;
		Name = "Command3"

	Add Object command4 As CommandButton With ;
		Top = 167, ;
		Left = 11, ;
		Height = 38, ;
		Width = 133, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "COltext", ;
		MousePointer = 15, ;
		ForeColor = Rgb(0,0,255), ;
		BackColor = Rgb(0,255,0), ;
		Name = "Command4"

	Add Object command5 As CommandButton With ;
		Top = 12, ;
		Left = 205, ;
		Height = 37, ;
		Width = 133, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "Gradient1", ;
		MousePointer = 15, ;
		ForeColor = Rgb(0,0,255), ;
		BackColor = Rgb(0,255,0), ;
		Name = "Command5"

	Add Object command6 As CommandButton With ;
		Top = 53, ;
		Left = 206, ;
		Height = 37, ;
		Width = 133, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "Gradient2", ;
		MousePointer = 15, ;
		ForeColor = Rgb(0,0,255), ;
		BackColor = Rgb(0,255,0), ;
		Name = "Command6"

	Add Object command7 As CommandButton With ;
		Top = 90, ;
		Left = 206, ;
		Height = 37, ;
		Width = 133, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "Gradient3", ;
		MousePointer = 15, ;
		ForeColor = Rgb(0,0,255), ;
		BackColor = Rgb(0,255,0), ;
		Name = "Command7"

	Add Object command8 As CommandButton With ;
		Top = 165, ;
		Left = 151, ;
		Height = 37, ;
		Width = 72, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "doDefault", ;
		MousePointer = 15, ;
		ForeColor = Rgb(255,0,0), ;
		BackColor = Rgb(0,255,255), ;
		Name = "Command8"

	Add Object command9 As CommandButton With ;
		Top = 164, ;
		Left = 225, ;
		Height = 37, ;
		Width = 123, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "do these  settings", ;
		MousePointer = 15, ;
		ForeColor = Rgb(255,0,0), ;
		BackColor = Rgb(0,0,255), ;
		Name = "Command9"

	Add Object command10 As CommandButton With ;
		Top = 126, ;
		Left = 11, ;
		Height = 38, ;
		Width = 133, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "Gradu(seconds)", ;
		MousePointer = 15, ;
		ForeColor = Rgb(0,0,255), ;
		BackColor = Rgb(0,255,0), ;
		Name = "Command10"

	Add Object label1 As Label With ;
		AutoSize = .T., ;
		FontBold = .T., ;
		FontSize = 18, ;
		BackStyle = 0, ;
		Caption = "?", ;
		Height = 32, ;
		Left = 300, ;
		MousePointer = 15, ;
		Top = 127, ;
		Width = 17, ;
		ForeColor = Rgb(0,255,0), ;
		Name = "Label1"


	Procedure yrun
		*3*yclock.prg
		_Screen.WindowState=1
		Thisform.WindowState=1

		Declare Integer Sleep In kernel32 Integer
		Local apie
		apie=Newobject("internetexplorer.application")
		Sleep(200)

		TEXT to m.myvar textmerge noshow
		<!DOCTYPE HTML>
		<html>
		 <body  bgcolor="black"  scroll="no"  oncontextmenu="window.close();return false;" onload="init();">
		 <canvas id="ycanvas1" width="<<sysmetric(1)>>"  height="650" style="background-color:black;"></canvas>

		<script>
		function init(){
		    drawHands();
		    setInterval('drawHands()',1000);
		}

		function drawHands(){
		    var canvas = document.getElementById('ycanvas1');

		    var ctx = canvas.getContext('2d');
		    var x=500;
		    var y=300;
		    var r=x*0.5;

		    var d = new Date();
		    var h = d.getHours();
		    var m = d.getMinutes();
		    var s = d.getSeconds();

		    ctx.clearRect(0,0,400,400);

		    //draw background
		    ctx.save();
		    ctx.translate(x,y);
		    var grad = ctx.createLinearGradient(-r,r,r,-r);
		    grad.addColorStop(0, '<<_screen.grad1>>');
		    grad.addColorStop(0.5,'<<_screen.grad2>>');
		    grad.addColorStop(1,'<<_screen.grad3>>');
		    ctx.beginPath();
		    ctx.fillStyle = grad;
		    ctx.arc(0,0,r,0,Math.PI*2,false);
		    ctx.fill();

		    grad = ctx.createLinearGradient(-r,-r,r,r);
		    grad.addColorStop(0,'<<_screen.grad1>>');
		    grad.addColorStop(0.5,'<<_screen.grad2>>');
		    grad.addColorStop(1,'<<_screen.grad3>>');
		    ctx.beginPath();
		    ctx.fillStyle = grad;
		    ctx.arc(0,0,r*0.85,0,Math.PI*2,false);
		    ctx.fill();

		    ctx.beginPath();
		    ctx.fillStyle ='<<_screen.colCircle1>>';      //cercle 1
		    ctx.arc(0,0,r*0.8,0,Math.PI*2,false);
		    ctx.fill();

		    ctx.beginPath();
		    ctx.fillStyle = '<<_screen.colCircle2>>';    //petit cercle 2
		    ctx.arc(0,0,r*0.4,0,Math.PI*2,false);
		    ctx.fill();
		    ctx.restore();

		    //draw index
		    ctx.save();
		    ctx.translate(x,y);
		    ctx.fillStyle = '<<_screen.gradu>>';    //graduations (hours+minutes)
		    for(var i=0;i<12;i++){
		        ctx.rotate(Math.PI/6);
		        ctx.fillRect(-r*0.04/2,-r*0.75,r*0.04,r*0.2);
		    }
		    ctx.restore();

		    //draw text
		    ctx.save();
		    ctx.translate(x,y);
		    ctx.fillStyle = '<<_screen.colText>>';      //filltext
		    ctx.font = "16px bold serif";
		    ctx.textAlign = 'center';
		    ctx.textBaseline = 'bottom';
		    ctx.fillText('Fox Time',0,r*0.47);
		    ctx.restore();

		    //draw hour hand
		    ctx.save();
		    ctx.translate(x,y);
		    ctx.beginPath();
		    ctx.rotate((h/12+m/12/60)*2*Math.PI);
		    ctx.strokeStyle = '<<_screen.gradu>>';     //hour needle
		    ctx.lineWidth = r*0.02;
		    ctx.moveTo(0,0);
		    ctx.lineTo(0,-r*0.4);
		    ctx.stroke();
		    ctx.restore();

		    //draw minute hand
		    ctx.save();
		    ctx.translate(x,y);
		    ctx.rotate(m*2*Math.PI/60);
		    ctx.beginPath();
		    ctx.strokeStyle = '<<_screen.gradu>>';   //minutes needle
		    ctx.lineWidth = r*0.02;
		    ctx.moveTo(0,0);
		    ctx.lineTo(0,-r*0.6);
		    ctx.stroke();
		    ctx.restore();

		    //draw second hand
		    ctx.save();
		    ctx.translate(x,y);
		    ctx.beginPath();
		    ctx.rotate(s*2*Math.PI/60);
		    ctx.strokeStyle = '<<_screen.ysec>>';   //seconds needle
		    ctx.lineWidth = r*0.01;
		    ctx.moveTo(0,r*0.1);
		    ctx.lineTo(0,-r*0.7);
		    ctx.stroke();
		    ctx.restore();

		    ctx.save();
		    ctx.translate(x,y);
		    ctx.beginPath();
		    ctx.fillStyle = '<<_screen.ysec>>';    //small circle (seconds needles)
		    ctx.arc(0,0,r*0.02,0,Math.PI*2,false);
		    ctx.fill();
		    ctx.restore();
		}
		</script>

		<Center><p Style="color:white;">RightClick To Close the Window.</p></Center>
		</body>
		</html>
		ENDTEXT
		Set Safe Off
		m.lcdest=Addbs(Sys(2023))+"test.html"
		Strtofile(m.myvar,m.lcdest)
		apie.Navigate(m.lcdest)
		Declare Integer BringWindowToTop In user32 Integer

		With apie
			.Navigate(m.lcdest)
			.menubar=0
			.Toolbar=0
			.StatusBar=0
			.fullscreen=1
			BringWindowToTop(.HWnd)
			.Visible=.T.
		Endwith

		_Cliptext=apie.Document.body.innerhtml
		Messagebox("The code is in clipboard",0+32+4096,"Code captured",1000)
		Thisform.Release
	Endproc

	Procedure Init
		With Thisform
			.Left=10
			.Top=50
		Endwith
		With _Screen
			.AddProperty("colCircle1","rgb(0,0,255)")
			.AddProperty("colCircle2","rgb(0,50,255)")
			.AddProperty("gradu","rgb(0,255,255)")
			.AddProperty("ysec","rgb(255,0,0)")
			.AddProperty("colText","rgb(255,255,255)")
			.AddProperty("grad1","rgb(128,128,128)")
			.AddProperty("grad2","rgb(255,255,255)")
			.AddProperty("grad3","rgb(128,128,128)")
		Endwith
		With Thisform
			.command1.BackColor=Eval(_Screen.colCircle1)
			.command2.BackColor=Eval(_Screen.colCircle2)
			.command3.BackColor=Eval(_Screen.gradu)
			.command10.BackColor=Eval(_Screen.ysec)
			.command4.BackColor=Eval(_Screen.coltext)

			.command5.BackColor=Eval(_Screen.grad1)
			.command6.BackColor=Eval(_Screen.grad2)
			.command1.BackColor=Eval(_Screen.grad3)
		Endwith
	Endproc

	Procedure Destroy
		Clea Events
	Endproc

	Procedure command1.Click
		Local m.xcolor
		xcolor=Getcolor()
		If  !m.xcolor=-1
			This.BackColor=m.xcolor
		Endi
		_Screen.colCircle1="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0" ],6))
	Endproc

	Procedure command2.Click
		Local m.xcolor
		xcolor=Getcolor()
		If  !m.xcolor=-1
			This.BackColor=m.xcolor
		Endi
		_Screen.colCircle2="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0" ],6))
	Endproc

	Procedure command3.Click
		Local m.xcolor
		xcolor=Getcolor()
		If  !m.xcolor=-1
			This.BackColor=m.xcolor
		Endi
		_Screen.gradu="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
	Endproc


	Procedure command4.Click

		Local m.xcolor
		xcolor=Getcolor()
		If  !m.xcolor=-1
			This.BackColor=m.xcolor
		Endi
		_Screen.coltext="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
	Endproc

	Procedure command5.Click
		Local m.xcolor
		xcolor=Getcolor()
		If  !m.xcolor=-1
			This.BackColor=m.xcolor
		Endi
		_Screen.grad1="#"+Chrtran("123456","563412",;
			Right(Trans[m.xcolor ,"@0"],6))
	Endproc

	Procedure command6.Click
		Local m.xcolor
		xcolor=Getcolor()
		If  !m.xcolor=-1
			This.BackColor=m.xcolor
		Endi
		_Screen.grad2="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
	Endproc

	Procedure command7.Click
		Local m.xcolor
		xcolor=Getcolor()
		If  !m.xcolor=-1
			This.BackColor=m.xcolor
		Endi
		_Screen.grad3="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
	Endproc

	Procedure command8.Click
		With _Screen
			.colCircle1="#16b"
			.colCircle2="#05a"
			.gradu="gold"
			.ysec="red"
			.coltext="white"
			.grad1="rgb(128,128,128)"
			.grad2="rgb(255,255,255)"
			.grad3="rgb(128,128,128)"
		Endwith

		Thisform.yrun()
	Endproc


	Procedure command9.Click
		Thisform.yrun()
	Endproc

	Procedure command10.Click
		Local m.xcolor
		xcolor=Getcolor()
		If  !m.xcolor=-1
			This.BackColor=m.xcolor
		Endi
		_Screen.ysec="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
	Endproc

	Procedure label1.Click
		Local m.myvar
		TEXT to m.myvar noshow
the html5 canvas is used to this goal.The code runs only with ie
emulation (ie11 tested).
this code builds a clock with custom settings.
-the cirle1 color
-the circle2 color
-the needles (hour+minutes) color
-the needle seconds color (with samll cirle)
-the clock circle border with tri gradient colors.
-the text color
the default settings (set initially in form init).
can customize all or some properties( other set with default) and valid
can run the default properties directly.
the code (as prg) of the clock build is captured to clipboard(can simply pasete it
on any text editor ).
-the applicaation runs on fullscreen (rightclick to close the window).
with this settings can multiply the clock face as infinite.
		ENDTEXT
		Messagebox(m.myvar,0+32+4096,"Summary help")
	Endproc


Enddefine
*
*-- EndDefine: yclock


 

Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
 
In this code the clock face is an image with only graduations.can find tons on web and adapt it.
the image is resized in code to fit the canvas (can adapt to have a good render).
in the images below i shipped 3 pictures for that purpose.Download them and use with the code.
can customize  here:
-the minutes and hours needles colors
-the background of the canvas and  the body.(3 backgrounds as patterns or multi gradients)
the code links to jquery.js library by the web (internet must be connected).can also download the js library file and work locally.


 


*2*
Local m.yrep,m.x,m.y,xpict,xcolor,ycol,myvar
m.yrep=Addbs(Justpath(Sys(16,1)))

m.xpict=Getpict()
If Empty(m.xpict)
    Return .F.
Endi
m.xpict=Strtran(m.xpict,"\","/")
m.x=Int(Val(Inputbox("background gradient (1)-(2)-(3)","","1")))
If ! Between(m.x,1,3)
	m.x=1
Endi

m.xcolor=Getcolor()

If m.xcolor=-1
	m.ycol="gold"
Else
	m.ycol="#"+Chrtran("123456","563412",;
		Right(Trans[m.xcolor ,"@0" ],6))
Endi


Do Case
	Case m.x=1
		TEXT to m.y noshow
background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px;
		ENDTEXT

	Case m.x=2
		TEXT to m.y noshow
background: linear-gradient(to right, lime, orange, yellow,red , cyan, bisque, violet);
		ENDTEXT

	Case m.x=3
		TEXT to m.y noshow
	background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
		ENDTEXT


Endcase


TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Clocks | Script Tutorials</title>
<style>
*{
    margin:0;
    padding:0;
}
body {
 color:#fff;
 font:14px/1.3 Arial,sans-serif;
  <<m.y>>
}
.clocks {
    height: 600px;
    margin: 25px auto;
    position: relative;
    width: 600px;
}






</style>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
// inner variables
var canvas, ctx;
var clockRadius = 250;
var clockImage;

// draw functions :
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    // get current time
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // save current context
    ctx.save();

    // draw clock image (as background)
    ctx.drawImage(clockImage, 0, 0, 500, 500);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    // draw numbers
    ctx.font = '36px Arial';
    ctx.fillStyle = '<<m.ycol>>';   //gold';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // draw hour
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fill();
    ctx.restore();

    // draw minute
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // draw second
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.80, 1);
    ctx.lineTo(clockRadius * 0.80, -1);
    ctx.fillStyle = '#0f0';
    ctx.fill();
    ctx.restore();

    ctx.restore();
}

// initialization
$(function(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    // var width = canvas.width;
    // var height = canvas.height;

clockImage = new Image();
clockImage.src = '<<m.xpict>>';

ctx.drawImage(clockImage,0,0,canvas.width,canvas.height);  //clock face image resized to fit the canvas bounds (to adjust)

    setInterval(drawScene, 1000); // loop drawScene
});
</script>
    </head>
<body  scroll="no"  oncontextmenu="window.close();return false;" ><br><br><br><br>
        <center><div class="clocks">
            <canvas id="canvas" width="500" height="500"></canvas>
        </div></center>
    </body>
</html>

ENDTEXT
Set Safe Off
m.lcdest=m.yrep+"ytest.html"
=Strtofile(m.myvar,m.lcdest)
apie=Newobject("internetexplorer.application")

Declare Integer BringWindowToTop In user32 Integer

With apie
	.Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith


 

Download one of these clock faces and use it with the code above.Can install any similar face png .
Download one of these clock faces and use it with the code above.Can install any similar face png .
Download one of these clock faces and use it with the code above.Can install any similar face png .

Download one of these clock faces and use it with the code above.Can install any similar face png .

Better use transparent PNG for clock face.
Better use transparent PNG for clock face.
Better use transparent PNG for clock face.
Better use transparent PNG for clock face.

Better use transparent PNG for clock face.


this code draws a clock with
-custom needles and digits color
-custom background picture of the clock
-custom body background as gradient-image(no image)


 


*3*
Local m.yrep,myvar,m.xpict,m.colNumbers,m.colNeedles
m.yrep=Addbs(Justpath(Sys(16,1)))

Messagebox("Color hours digits",0+32+4096,"",1000)
m.xcolor=Getcolor()
If m.xcolor=-1
    m.colNumbers="gold"
Else
	m.colNumbers="#"+Chrtran("123456","563412",Right(Trans[m.xcolor ,"@0" ],6))  &&&1-12
Endi

Messagebox("Color 3 needles (hh,mi,sec)",0+32+4096,"",1000)
m.xcolor=Getcolor()
If m.xcolor=-1
	m.colNeedles="gold"
Else
	m.colNeedles="#"+Chrtran("123456","563412",Right(Trans[m.xcolor ,"@0" ],6))  &&hours,min,seconds
Endi

Messagebox("get a bacjground clock picture",0+32+4096,"",1000)

m.xpict=Getpict()   &&clock background picture
If Empty(m.xpict)
	Return .F.
Endi
m.xpict=Strtran(m.xpict,"\","/")

*body background 1-2-3
m.x=Int(Val(Inputbox("background gradient (1)-(2)-(3)","","1")))
If ! Between(m.x,1,3)
	m.x=1
Endi


Do Case
	Case m.x=1
		TEXT to m.y noshow
background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px;
		ENDTEXT

	Case m.x=2
		TEXT to m.y noshow
background: linear-gradient(to right, lime, orange, yellow,red , cyan, bisque, violet);
		ENDTEXT

	Case m.x=3
		TEXT to m.y noshow
	background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
		ENDTEXT


Endcase


TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Clocks </title>
<style>
.body{
<<m.y>>
}
</style>

<body class="body"  scroll="no"  oncontextmenu="window.close();return false;"  >
<br><br><br><br>
        <center><div >
            <canvas id="ycanvas1" width="500" height="500"></canvas>
 </div></center>
<script>

//set a background image
var background = new Image();
background.src = "<<m.xpict>>";    //"http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
canvas.getContext("2d").drawImage(background,0,0,canvas.width,canvas.height);
   }


var DrawClockHand = function(cv) {
    if( !cv.getContext ) return null;
    this._cv = cv;
    this._ctx = cv.getContext('2d');
    this.TIME = 1000;
    this._r = 50;
}

DrawClockHand.prototype.setPosition = function(x,y) {
    x = x || 0;
    y = y || 0;
    this._x = x;
    this._y = y;
}

DrawClockHand.prototype.toPosition = function() {
    this._ctx.translate(this._x, this._y);
}

DrawClockHand.prototype.setRadius = function(r) {
    this._r = r;
}

DrawClockHand.prototype.run = function() {
    var that = this;

    (function() {
        var now = new Date();
        var hour = now.getHours();
        var min = now.getMinutes();
        var sec = now.getSeconds();

        var hDeg = 360/12*hour;
        var mDeg = 360/60*min;
        var sDeg = 360/60*sec;

        //???canvas??????
        that._ctx.save();

        //?????
        that._ctx.beginPath();
that._ctx.clearRect(0,0,that._cv.width,that._cv.height);
canvas.getContext("2d").drawImage(background,0,0,canvas.width,canvas.height);
//ybackground();
        //???????
        that.toPosition();

        //??????
        that.drawDot();

        //??????
        that.drawMemory(30,that._r);

        //?????
        that.drawNumber();

        //????? (??,??,??)
        that.setHand(hDeg,that._r*0.6,6);

        //????? (??,??,??)
        that.setHand(mDeg,that._r*0.8,4);

        //????? (??,??,??)
        that.setHand(sDeg,that._r,2);


        //canvas????????
        that._ctx.restore();

        setTimeout(arguments.callee, that.TIME);
    })();
}

DrawClockHand.prototype.drawNumber = function() {
    for( var i=1; i<=12; i++ ) {
        this._ctx.save();
         this._ctx.font="28px Bold Verdana";
        this._ctx.fillStyle = '<<colnumbers>>';    //'#111';
        this._ctx.rotate((360/12*i)*Math.PI/180);
        this._ctx.translate(0,-(this._r+20));
        this._ctx.rotate(-((360/12*i)*Math.PI/180));
        this._ctx.textAlign = 'center';
        this._ctx.fillText(i,0,0);
        this._ctx.restore();
    }
}

DrawClockHand.prototype.setHand = function(deg,size,base) {
    size = size || 40;
    base = base || 4;
    deg = deg || 0;
    this._ctx.save();

    //shadow???
    this._ctx.shadowColor = 'rgba(0,0,0,0.5)';
    this._ctx.shadowOffsetX = 1;
    this._ctx.shadowOffsetY = 1;
    this._ctx.shadowBlur = 2;

    this._ctx.rotate(deg*Math.PI/180);

    //??????
    this._ctx.fillStyle = '#111';
    this.draw(size,base);
    this._ctx.restore();
}

DrawClockHand.prototype.draw = function(size,base) {
    size = size || 40;
    base = base || 4;
    this._ctx.save();
    this._ctx.fillStyle =  '<<colneedles>>';
    this._ctx.translate(-base/2, 0);
    this._ctx.moveTo(0, 0);
    this._ctx.lineTo(base/2, -size);
    this._ctx.lineTo(base, 0);
    this._ctx.closePath();
    this._ctx.fill();
    this._ctx.restore();
}

DrawClockHand.prototype.dp = function(w,h) {
    this._ctx.save();
    this._ctx.beginPath();

    //??????????
    this._ctx.fillStyle = '#111';

    //????????rect???????
    this._ctx.translate(-w/2,0);

    this._ctx.fillRect(0,0,w,h);
    this._ctx.restore();
}

DrawClockHand.prototype.drawMemory = function(deg,r) {
    r = r || 50;
    deg = deg || 45;

    for( var i=0; i<360; i+=deg) {
        this._ctx.save();
        this._ctx.beginPath();

        //rotate????????????
        this._ctx.rotate(i*Math.PI/180);

        this._ctx.translate(0,r);
        if( i%90 == 0 ) {
            this.dp(3,7);
        } else {
            this.dp(1,5);
        }
        this._ctx.restore();
    }
}

DrawClockHand.prototype.drawDot = function() {
    var pos = -(this._r*0.05);

    /* ????????????????????? */
    var grad = this._ctx.createRadialGradient(pos,pos,0,pos,pos,10);
    grad.addColorStop(0,'#ddd');
    grad.addColorStop(1,'#555');
    this._ctx.fillStyle = grad;

    //shadow???
    this._ctx.shadowColor = 'rgba(0,0,0,0.4)';
    this._ctx.shadowOffsetX = 1;
    this._ctx.shadowOffsetY = 1;
    this._ctx.shadowBlur = 1;

    this._ctx.arc(0,0,this._r*0.07, 0, Math.PI*2, true);
    this._ctx.fill();
}

var canvas = document.getElementById('ycanvas1');
canvas.style.border="solid 4px";
canvas.style.color="maroon";



var dch = new DrawClockHand(canvas);
dch.setPosition(canvas.width/2, canvas.height/2);
dch.setRadius(170);
dch.run();
</script>

</body>
</html>

ENDTEXT
Set Safe Off
m.lcdest=m.yrep+"ytest.html"
=Strtofile(m.myvar,m.lcdest)
apie=Newobject("internetexplorer.application")

Declare Integer BringWindowToTop In user32 Integer

With apie
	.Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith
*_Cliptext=m.myvar  &&capture the code


 

Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
Customizable html5 canvas analogic clocks
To be informed of the latest articles, subscribe:
Comment on this post