Analog clock: lines and/or arcs
Analog clock: lines and/or arcs
Jappie Toutenhoofd: this is the clock I scripted for your ‘challenge’ 😉 Not what I had in mind at first, but I like it. (Reposted, I forgot to choose the community)
Also, I’m not sure but I remember someone asking for something like this time ago. I don’t remember, but if you do and are reading this: sorry, here you have.
This is a binding to create an analog clock using lines or arcs. The binding is created so that you can easily change some parameters: radius where to draw, width of the lines, number to use, color to use and choose between lines or arcs. You can even add more or remove them.
The script contains the instructions to set it up. To ‘install’ it simply set it in the dummy binding of an item. A square item is recommended.
Note: it uses the normal background of the item, and will create one if there is none. But if it already has a non-square one set, the clock will probably be shown at an incorrect position. Simply remove it and let the script create the correct one
In the video it is shown the default script, the default with lines instead of arcs, and four examples for demonstration purpose. A digital clock is at the bottom to help understanding.
]]>
D5 Creation
< ![CDATA[
//image
var im = item.getBoxBackground(“n”);
if( im == null){
var size = Math.max(item.getWidth(),item.getHeight());
im = LL.createImage(size,size);
item.setBoxBackground(im,”n”,true);
im=item.getBoxBackground(“n”);
}
//canvas
var c=im.draw();
c.drawColor(Color.TRANSPARENT,PorterDuff.Mode.CLEAR);
//paint
var p=new Paint();
p.setStyle(Paint.Style.STROKE);
//variables
var w = im.getWidth() / 2;
var ang;
var at;
/* begin of editing block:
* add below this as many functions as you want in this format:
* drawX(number,maximum,color,width,from,to)
* X can be lines or arc
* number: the number to use
* maximum: the maximum value of the number (the equivalent of 360°)
* color: the color to use
* width: the width of the line (in case of arc, the width of the line when number==0)
* from: radius where to start drawing [0: center, 1: side]
* to: radius where to finish drawing [0: center, 1: side]
*/
drawarc( $ll_second , 60 , Color.RED , 1 , 0.85 , 1);
drawarc( $ll_minute , 60 , 0xff00a000 , 3 , 0.6 , 0.85);
drawarc( $ll_hour12%12 , 12 , 0xff1010ff , 5 , 0.4 , 0.6);
/* end of editing block */
im.update();
return;
function drawlines(n,max,color,width,from,to){
p.setColor(color);
p.setStrokeWidth(width);
for(var t = 0 ; t < = n ; ++t ){
ang = t / max * 2 * Math.PI;
c.drawLine(
w + Math.sin(ang) * w * from
,w – Math.cos(ang) * w * from
,w + Math.sin(ang) * w * to
,w – Math.cos(ang) * w * to
,p
);
}
}
function drawarc(n,max,color,width,from,to){
if(n==0){
drawlines(n,max,color,width,from,to);
return;
}
at=(from+to)/2;
p.setColor(color);
p.setStrokeWidth(w*(to-from));
ang = n / max * 360;
c.drawArc (new RectF((1-at) * w, (1-at) * w, w * (1+at), w * (1+at)), -90, ang, false, p);
}
]]>
< ![CDATA[
I was asking a long long time ago 😊
Nicely done
Is it possible to add 3 circles ? with the current date : day num (0 to 7);day of month ; month
Like Polar Clock
]]>
< ![CDATA[
Yes, simply follow the instructions in the binding (I updated it a bit to be more clear)
]]>
< ![CDATA[
TrianguloY what to set in bindings ? Is it possible to draw an arc here ?
Not with script
I think of 6 different items. It would be much easier to manage.
]]>
< ![CDATA[
What to set in bindings?
The script
Is it possible to draw an arc here?
Yes, use drawarc(…)
You can set it in as much items as you want, however if they are big it can cause a bit of lag (like in the video)
]]>
< ![CDATA[
TrianguloY yes for the script but on which bindings part ? Text ? Icon ?
Can I use drawarc in bindings ?
I’ll try
]]>
< ![CDATA[
Ok
Understood
]]>
< ![CDATA[
It’s possible to use this script to give the percentage of battery?
]]>
< ![CDATA[
Yes, simply use the $bat_level with 100 as maximum (color, width and radius as you want)
]]>
< ![CDATA[
Antonio Russo Lagnese for sure
]]>
< ![CDATA[
TrianguloY thanks. I’ll try-
]]>
< ![CDATA[
The clock with the lines looks cool.
]]>
< ![CDATA[
Antonio Russo Lagnese just posted instruction with color depending on the charge 😊
]]>
< ![CDATA[
Ok Thanks… Bruno-Isa LAMOUR-ARNOULD
]]>
< ![CDATA[
Amazing! This is what I’ve wanted! Thanks for sharing. 😁
]]>
< ![CDATA[
Oh , no.
This script doesn’t work at all on my phone.
I can’t find how to solve this problem…
The alert says ,
“At line 83: Can’t find method android.graphics.Canvas.drawArc(number,number,number,number,number,number,boolean,android.graphics.Paint)”
]]>
< ![CDATA[
Masaoka Taro are you sure this not a copy paste issue ?
for me it was fine
]]>
< ![CDATA[
No, there is no copy paste problem. That means your phone is an android below 5.0
To solve this you need to change that line
from
drawArc(a,b,c,d,x,y,b,p)
to
drawArc(new RectF(a,b,c,d),x,y,b,p)
]]>
< ![CDATA[
I’m on android 6 and it was fine
]]>
< ![CDATA[
Bruno-Isa LAMOUR-ARNOULD
I tried pasting again and again,but couldn’t…
TrianguloY Wow! Thank You very much
That works correctly!
Well, my phone is 4.4.2 yet…
i want to upgrade my phone, but i don’t have PC, and my data carrier canceled support of my Xperia Z1f Compact… X(
]]>
< ![CDATA[
The problem is that the drawArc with eight parameters was added on Api 21 (Android 5.0) so lower versions simply don’t know that function. It is the same as the one with five parameters (presented in all Android versions (Api 1) ) but that requires the RectF class. I used the first one because I didn’t wanted to bind a new class, but didn’t notice that lightning binds it automatically, so no need to use the other one. I changed the original binding :)
]]>