Question

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

有没有一种方法可以将以下Javascript文件直接移植到Android小部件中。

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

此时钟是ourmoonlife.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创建应用小部件。

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

1 个答案: