Linking Scale value to arc to create dashboard in Tkinter Canvas

Tkinter dashboard to show value of slider of a scale using pointer and region of arcs in Canvas

Scale value can change from 0 to 180
On change of scale slider the function my_upd() will be executed. Inside this function the slider value is collected and converted to radian angle value. Using sin() and cos() functions the needle position is calculated. Old position of needle is deleted and fresh line is created using new coordinates.

Drawing Arc with pointer

As we have used 4 segments, so we will draw four arc having common x1,y1,x2,y2 coordinates but different start angle and extent. We will give different outline colour to each arc segments.

c1.create_arc(x1, y1,x2,y2, start=0, extent=45,outline='green',
         width=arc_w,style=tk.ARC)
c1.create_arc(x1, y1,x2,y2, start=45, extent=45,outline='blue', 
        width=arc_w,style=tk.ARC)
c1.create_arc(x1, y1,x2,y2, start=90, extent=30,outline='yellow', 
        width=arc_w,style=tk.ARC)
c1.create_arc(x1, y1,x2,y2, start=120, extent=60,outline='red',
        width=arc_w,style=tk.ARC)

We will add one circle at the center point.

c1.create_oval(x-10,y-10,x+10,y+10,fill='blue')

Drawing Pointer

Our pointer initial position will be at 0 degree. We have to use radian as input angle to our sin() or cos() functions.

in_radian=math.radians(0) # getting radian value from zero degree
# Initial position of pointer at 0 degree
pointer=c1.create_line(x,y,(x+r*math.cos(in_radian)),
        (y-r*math.sin(in_radian)),width=6,arrow='last')

Moving the Pointer

To move the pointer we will draw it at different positions based on the scale slider value. This value we will use with sin() and cos() functions and then get the end point or x2, y2 values of the pointer. Each time we draw the pointer, we delete the previous pointer.

def my_upd(*args): # updating the pointer position 
    global pointer
    in_radian = math.radians(my_scale.get()) # scale value in radian
    c1.delete(pointer) # delete the pointer 
    pointer=c1.create_line(x,y,(x+r*math.cos(in_radian)),
            (y-r*math.sin(in_radian)),width=6,arrow='last')

Full code is here .

import tkinter as tk
import math 
my_w = tk.Tk()
width,height=410,310 # set the variables 
d=str(width)+"x"+str(height+40)
my_w.geometry(d) 
c1 = tk.Canvas(my_w, width=width-10, height=height-50,bg='#FFFFFF')
c1.grid(row=0,column=0)
arc_w=50 # width of the arc 
x1,y1,x2,y2=35,35,355,355 # dimensions for the arc 
x,y,r=195,195,135

c1.create_arc(x1, y1,x2,y2, start=0, extent=45,outline='green',
         width=arc_w,style=tk.ARC)
c1.create_arc(x1, y1,x2,y2, start=45, extent=45,outline='blue', 
        width=arc_w,style=tk.ARC)
c1.create_arc(x1, y1,x2,y2, start=90, extent=30,outline='yellow', 
        width=arc_w,style=tk.ARC)
c1.create_arc(x1, y1,x2,y2, start=120, extent=60,outline='red',
        width=arc_w,style=tk.ARC)
        
# small circle at center
c1.create_oval(x-10,y-10,x+10,y+10,fill='blue') 
in_radian=math.radians(0) # getting radian value 
line=c1.create_line(x,y,(x+r*math.cos(in_radian)),
        (y-r*math.sin(in_radian)),width=6,arrow='last')

def my_upd(value):
    global line
    in_radian = math.radians(my_scale.get()) # scale value in radian
    c1.delete(line) # delete the pointer 
    line=c1.create_line(x,y,(x+r*math.cos(in_radian)),
            (y-r*math.sin(in_radian)),width=6,arrow='last')

my_scale = tk.Scale(my_w, from_=0, to=180, orient='horizontal',
 length=300,command= my_upd)
my_scale.grid(row=2,column=0) 
my_w.mainloop()

Creating continuous Arc colour

import tkinter as tk
my_w = tk.Tk()
width,height=400,220 # set the variables 
d=str(width)+"x"+str(height)
my_w.geometry(d)
my_c = tk.Canvas(my_w,width=width,height=height)
my_c.pack()
x1,y1,x2,y2=25,30,370,370
arc_w=40
def my_upd(d):
    change=int((255/180)*d) # Jump in colour value
    color_c='#%02x%02x%02x' % (255-change, change,0)
    return color_c
res=1 # resolution or steps 
for d in range(0,180,res):
    my_c.create_arc(x1, y1,x2,y2, start=d, extent=res+1,outline=my_upd(d),
        width=arc_w,style=tk.ARC)
my_w.mainloop()

Tkinter Canvas Animation using Rectangles & Circles
Moving element in Canvas Moving widgets or Images on Canvas by using move()
Python Tkinter Projects

Python Tkinter Button Python- Tutorials

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

Scale value as Arc slider in Canvas

Drawing Arc with pointer

Drawing Pointer

Moving the Pointer

Creating continuous Arc colour

Subhendu Mohapatra