Android Widget时钟，运行离线时钟28小时，56分钟，56秒

Question

需要帮助创建一个运行28小时，56分钟56秒的Android Widget时钟。时钟需要类似于使用Javascript，Canvas HTML5构建的时钟，如下所示。

有没有办法直接将以下Javascript文件移植到Android Widget中。

这个时钟的目的是在离线模式下运行，不像时钟的HTML5 / Canvas版本。

这个时钟是作为mymoonlife.com进行的研究工作的一部分而开发的。时钟旨在用于在观看时钟时有限或无法访问互联网的人。

我们对所提供的帮助表示诚挚的谢意和亲切的问候。

 
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>

Answer 1

您不能在应用小部件中使用HTML，JavaScript或CSS。应用小部件仅支持一组有限的平台小部件（例如，TextView）。应用程序小部件不支持WebView或第三方Web呈现库。

因此，您无法从VueJS或任何其他形式的PWA创建应用程序小部件。