Need help in creating an Android Widget Clock that runs for 28hours, 56 minutes, 56 seconds. The clock will need to be similar to the Clock built using Javascript, Canvas HTML5 as shown below.
Is there a way to directly port the following Javascript file into an Android Widget.
The purpose of this clock is to run in offline mode, unlike the HTML5/Canvas Version of the clock.
This clock is being developed as part of the research work conducted in ourmoonlife.com The clock is aimed to be of usage to people with limited or no internet access when viewing the clock.
Our earnest thanks and kind regards for the help offered.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
var ms_per_sec = 984; // 1000
var sec_per_min = 56; // 55.54920598892;
var min_per_hr = 56; // 55.54920598892;
var hrs_per_day = 28;
var ms_per_secEarth = 1000; // 1000
var sec_per_minEarth = 60; // 55.54920598892;
var min_per_hrEarth = 60; // 55.54920598892;
var hrs_per_dayEarth = 24;
// let's make our target date at some fixed distance in our own time system
const countDownDate = 1555157578171;
const countDownDateEarth = 1555392593171;
function loop() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var total_ms = (countDownDate + now);
// from here our values are based on our own time system
var total_seconds = (total_ms / ms_per_sec);
var total_minutes = (total_seconds/ sec_per_min);
var total_hours = (total_minutes / min_per_hr);
var total_days = (total_hours / hrs_per_day);
var days = Math.floor(total_days);
var hours = Math.floor(total_hours % hrs_per_day);
var minutes = Math.floor(total_minutes % 112);
var seconds = Math.floor(total_seconds % 112);
var secondsty = Math.floor(total_seconds % 87808);
// Output the result in an element with id="demo"
/* document.getElementById("demo").textContent = hours + "h "
+ minutes + "m " + seconds + "s ";*/
//////////////////////////////////////// EARTH CLOCK ENDS //////////
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawNumbersMinutes(ctx, radius);
drawTime(ctx, radius, days, hours, minutes, seconds, secondsty);
//////////////////////////////////////////// EARTH CLOCK ////////////
// Get todays date and time
var nowEarth = new Date().getTime();
// Find the distance between now and the count down date
var total_msEarth = (countDownDateEarth + nowEarth);
// from here our values are based on our own time system
var total_secondsEarth = (total_msEarth / ms_per_secEarth);
var total_minutesEarth = (total_secondsEarth / sec_per_minEarth);
var total_hoursEarth = (total_minutesEarth / min_per_hrEarth);
var total_daysEarth = (total_hoursEarth / hrs_per_dayEarth);
var Earthdays = Math.floor(total_daysEarth);
var Earthhours = Math.floor(total_hoursEarth % hrs_per_dayEarth);
var Earthminutes = Math.floor(total_minutesEarth % 120);
var Earthseconds = Math.floor(total_secondsEarth % 120);
var Earthsecondsty = Math.floor(total_secondsEarth % 86400);
// Output the result in an element with id="demo"
drawFace2(ctx, radius);
drawNumbers2(ctx, radius);
drawTimeEarth(ctx, radius, Earthdays, Earthhours, Earthminutes, Earthseconds, Earthsecondsty);
// If the count down is over, write some text
if (total_ms < 0) {
document.getElementById("demo").innerHTML = "EXPIRED";
return;
}
requestAnimationFrame(loop);
}
loop();
function drawClock() {
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius*1, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
//ctx.lineWidth = radius*0.05;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2.1*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
/// Text Area //////////////////////////////////////
ctx.font = "bold 14px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Sri Sivamathi",0,-110);
ctx.font = "bold 12px Arial";
ctx.fillStyle = "black";
ctx.fillText("Moon Periodic Clock",0,-90);
ctx.fillStyle = "blue";
ctx.fillText("ourmoonlife.com",0,90);
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 29; num++){
if (num <= 9 & num >= 7)
{
ctx.font = "Bold 15px Arial";
ctx.fillStyle = "blue";
}
else
{
ctx.font = radius*0.08 + "px arial";
ctx.fillStyle = "black";
}
ang = num * Math.PI / 14;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawNumbersMinutes(ctx, radius) {
var ang;
var num;
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.font = "Bold 10px Arial";
for(num = 0; num < 113; num=num+4){
if (num <= 37 & num >= 28)
{
ctx.font = "Bold 10px Arial";
ctx.fillStyle = "blue";
}
else
{
ctx.font = "Bold 10px Arial";
ctx.fillStyle = "green";
}
ang = num * Math.PI / 56;
ctx.rotate(ang);
ctx.translate(0, -radius*0.94);
ctx.rotate(-ang);
/// 00 & 112 correction
if (num == 0)
{
ctx.fillText("00", 0, 0);
}
else if (num != 112)
{
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
}
ctx.translate(0, radius*0.94);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius, days, hours, minutes, seconds, secondsty){
var hour = hours;
var minute = minutes;
var second = seconds;
var sec = secondsty;
///////////// TEXT AREA FOR DIGITAL CLOCK /////////////////////////
ctx.font = "bold 18px Arial";
ctx.fillStyle = "blue";
ctx.fillText(seconds.toString(),58,-65);
ctx.fillText(":", 30,-65);
ctx.fillText(minutes.toString(),5,-65);
ctx.fillText(":", -20,-65);
ctx.fillText(hours.toString(),-45,-65);
//hour
// hour=hours%28;
hour=
(sec*Math.PI/((87808)/2));
drawHand(ctx, hour, radius*0.5, radius*0.03);
//minute
minute=(minutes*Math.PI/56)+(seconds*Math.PI/(224*112));
drawHand(ctx, minute, radius*0.7, radius*0.02);
// second
second=(seconds*Math.PI/56);
drawHand(ctx, second, radius*0.8, radius*0.01);
}
function drawFace2(ctx, radius) {
ctx.restore();
var grad;
ctx.beginPath();
ctx.arc(75, 0, radius/3.7, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1/3, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers2(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.04 + "px arial";
ctx.font = "bold 7px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 25; num++){
ang = num * Math.PI / 12;
ctx.rotate(ang);
ctx.translate(0, -radius*0.22);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 75, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.22);
ctx.rotate(-ang);
}
/// Text Area
ctx.font = "bold 24px Arial";
ctx.fillStyle = "black";
// ctx.fillText("EARTH CLOCK",0,-80);
}
function drawTimeEarth(ctx, radius, Earthdays, Earthhours, Earthminutes, Earthseconds, Earthsecondsty)
{
var Earthhour = Earthhours;
var Earthminute = Earthminutes;
var Earthsecond = Earthseconds;
var Earthsec = Earthsecondsty;
///////////// TEXT AREA FOR DIGITAL CLOCK /////////////////////////
ctx.font = "bold 12px Arial";
ctx.fillStyle = "black";
ctx.fillText("Earth Clock", 0,40);
ctx.font = "bold 18px Arial";
ctx.fillStyle = "blue";
ctx.fillText(Earthseconds.toString(),58,65);
ctx.fillText(":", 30,65);
ctx.fillText(Earthminutes.toString(),5,65);
ctx.fillText(":", -20,65);
ctx.fillText(Earthhours.toString(),-45,65);
var hour = Earthhours;
var minutes = Earthminutes;
var seconds = Earthseconds;
var sec = Earthsecondsty;
//hour
// hour=hours%28;
hour=
(sec*Math.PI/((86400)/2));
drawHand2(ctx, hour, radius*0.12, radius*0.007);
//minute
minute=(minutes*Math.PI/60)+(seconds*Math.PI/(240*120));
drawHand2(ctx, minute, radius*0.16, radius*0.007);
// second
second=(seconds*Math.PI/60);
drawHand2(ctx, second, radius*0.20, radius*0.002);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
function drawHand2(ctx, pos, length, width) {
var canvas = document.getElementById("canvas");
var ctx3 = canvas.getContext("2d");
ctx3.translate(75,0);
ctx3.beginPath();
ctx3.lineWidth = width;
ctx3.lineCap = "round";
ctx3.moveTo(0,0);
ctx3.rotate(pos);
ctx3.lineTo(0, -length);
ctx3.stroke();
ctx3.rotate(-pos);
ctx3.translate(-75,0);
}<!DOCTYPE html>
<!-- saved from url=(0094)https://ourmoonlife.com/wp-content/uploads/2019/04/Sri_Sivamathi_Earth_inside_moonClock-1.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></head><body>
<p>Sivamathi Moon Clock Six - 002</p>
<canvas id="canvas" width="400" height="400" style="background-color:#2b4d84">
<canvas id="ca" width="400" height="400" style="background-color:#333">
</canvas>
</canvas>
</body></html>You cannot use HTML, JavaScript, or CSS in an app widget. An app widget supports only a limited set of platform widgets (e.g., TextView). App widgets do not support WebView or third-party Web rendering libraries.
Hence, you cannot create an app widget from VueJS or any other form of PWA.