XF 2.x Sidebar widgets sizes

Nirjonadda

cXF BRONZE
Messages
51
Likes
5
#1
I am trying adding Sidebar Canvas Clock Start but widgets sizes are not responsive. Please let me know that how to make Sidebar widgets sizes? Size auto resize defending user monitor skin resolution, width and height same size? Also how to make clock by county, not user time zone?

Code:
<canvas id="canvas" width="200" height="200"
style="background-color:#FFF">
</canvas>

<script>
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);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 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.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    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 drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

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);
}
</script>

 
Last edited:

BassMan

Staff member
Administrator
Messages
688
Likes
329
Website
www.customizexf.com
#4
Also can be made clock by county, not user time zone?
Not sure about that.

Also, this is as far as I can get in this short time ... (you need to modify the script code, because now you can see only half of the clock)
HTML:
<canvas id="canvas" style="max-width: 100%; background-color:#333">
</canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 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.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    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 drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

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);
}
</script>
 

Nirjonadda

cXF BRONZE
Messages
51
Likes
5
#5
How to hide Sidebar widgets from mobile view with extra.less template?

Code:
<canvas id="canvas" width="200%" height="200" style="background-color:#FFF">
</canvas>
 

BassMan

Staff member
Administrator
Messages
688
Likes
329
Website
www.customizexf.com
#6
Not sure how to hide HTML widget, because it does not contain classes like other widgets.

Maybe you can use Advanced Mode for this widget (to not show it in a block) and add the responsive code for canvas class in extra.less.
 

Nirjonadda

cXF BRONZE
Messages
51
Likes
5
#7
@BassMan With this code why not show correctly?

Code:
<!DOCTYPE html>
<html>
<head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        body{
            width: 100%;
            margin: 0;
            padding: 0;
            background-color: gray;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="Office/OfficeJS.js"></script>

    <div style = "width: 50%;">
        <script>
            Clock1 = new OfficeClockObject(); //add clock as object

            Clock1.TIME_ANIMATION = 500; // time animation in milliseconds(from 16 to 1000)
            Clock1.TIME_ZONE = +6; // set time zone (-12 ... +14) or delete this line to use current zone
            Clock1.CANVAS_NAME = "Clock1"; //canvas name in html-code
            
            Clock1.Start(); //start clock
        </script>
    </div>

</body>
</html>
 

You must log in or register to reply here.

Forgot your password?
Don't have an account? Register now

Welcome to customizeXF

We are running default XenForo style customized by cXF
Registration is free!

Similar threads

Top