Slider Spliner

Back to the photo sequence and music. Each photo is on the screen for only two seconds, and in between each there is a click as of a slide projector changing or even the sound of the shutter of a camera. The photos show in sequence: Anthony Barber, Katy Boyle, Edgar Allan Poe, a loony head and shoulders. He has ping-pong ball eyes, several teeth blocked out, a fright wig and his chest is bare but across it is written ‘A Loony’, Reginald Maudling, Tony Jacklin. A buzzer sounds.

In the last tutorial I used the term “quadradic Bezier curve” (which is a particular sort of way of drawing a curved line through three points).  A more generic name for this way of drawing curves is “spline”, named after a strip of flexible material used by draftsmen to draw curves, also now called flexicurves).   In this tutorial we’re going to learn about the Scale widget (but it looks like a slider) and use it to show how a computer draws those smooth curves.

Our starting point is the canvasCurve program from the previous tutorial, but we’ll jettison the mouse motion stuff, make it a bit larger and just draw a fixed, rather large, unhappy looking spline:

 

# -*- coding: utf-8 -*-
from Tkinter import *

TITLE = "Drawing a Curve"
WIDTH = 400
HEIGHT = 400
CENTREX = WIDTH/2
CENTREY = HEIGHT/2
NODE_RADIUS = 3
NODE_COLOUR = "red"
LINE_COLOUR= "yellow"

formatString = "x: %03d, y: %03d"

class Canvassing():
  def __init__(self, parent = None):
    self.canvas = Canvas(width=WIDTH,height=HEIGHT, bg = "blue")
    self.canvas.pack()
    self.readout = Label(text="This is a label")
    self.readout.pack()

    self.line = None
    self.canvas.master.wm_title(string = TITLE)
    self.points = [ (0,HEIGHT-10), (CENTREX,0),(WIDTH,HEIGHT-10) ]
    self.splinesteps = 12
    self.drawTheSpline()

  def drawTheSpline(self):
    allItems = self.canvas.find_all()
    for i in allItems:  # delete all the items on the canvas
      self.canvas.delete(i)

    self.line = self.canvas.create_line(self.points,  width=2, fill = LINE_COLOUR, smooth = True, splinesteps = self.splinesteps)
    for p in self.points:
      self.drawNode(p)
    self.readout.config(text="Steps: %s"%self.splinesteps)

  def drawNode(self, p):
      boundingBox = (p[0]-NODE_RADIUS, p[1]+NODE_RADIUS, p[0]+NODE_RADIUS,p[1]-NODE_RADIUS)
      # mixed + and - because y runs from top to bottom not bottom to top
      self.canvas.create_oval(boundingBox, fill=NODE_COLOUR)

Canvassing()
mainloop()

To this we will add our Scale widget/slider bar.  The Scale widget can be configured in a variety of ways.  In this case we’ve passed it from_ (note the trailing underscore) and to parameters (self.slider = Scale(from_=1, to =20, orient = HORIZONTAL)).  These are the numbers that the widget will range from and to respectively.  If you grab and move the slider you will see its values change, but nothing happens to the curve:

# -*- coding: utf-8 -*-
from Tkinter import *

TITLE = "Drawing a Curve"
WIDTH = 400
HEIGHT = 400
CENTREX = WIDTH/2
CENTREY = HEIGHT/2
NODE_RADIUS = 3
NODE_COLOUR = "red"
LINE_COLOUR= "yellow"

formatString = "x: %03d, y: %03d"

class Canvassing():
  def __init__(self, parent = None):
    self.canvas = Canvas(width=WIDTH,height=HEIGHT, bg = "blue")
    self.canvas.pack()
    self.slider = Scale(from_=1, to =20, orient = HORIZONTAL)
    self.slider.pack()
    self.readout = Label(text="This is a label")
    self.readout.pack()

    self.line = None
    self.canvas.master.wm_title(string = TITLE)
    self.points = [ (0,HEIGHT-10), (CENTREX,0),(WIDTH,HEIGHT-10) ]
    self.splinesteps = 12

    self.drawTheSpline()

  def drawTheSpline(self):
    allItems = self.canvas.find_all()
    for i in allItems:  # delete all the items on the canvas
      self.canvas.delete(i)

    self.line = self.canvas.create_line(self.points,  width=2, fill = LINE_COLOUR, smooth = True, splinesteps = self.splinesteps)
    for p in self.points:
      self.drawNode(p)
    self.readout.config(text="Steps: %s"%self.splinesteps)

  def drawNode(self, p):
    boundingBox = (p[0]-NODE_RADIUS, p[1]+NODE_RADIUS, p[0]+NODE_RADIUS,p[1]-NODE_RADIUS)
    # mixed + and - because y runs from top to bottom not bottom to top
    self.canvas.create_oval(boundingBox, fill=NODE_COLOUR)

Canvassing()
mainloop()

Exercise:  slide the slider from left to right and confirm that it runs over all of the values from from_ to to.

Exercise: try different values for from and to.  Does the slider change its appearance?  If to is much greater than from_  does the slider miss some values in between when you slide it?

I could hook up a listener here to track whether the slider has changed, but I’m just going to add a button.  When you press the button it gets the slider’s value and updates the drawing based on that value:

# -*- coding: utf-8 -*-
from Tkinter import *

TITLE = "Drawing a Curve"
WIDTH = 400
HEIGHT = 400
CENTREX = WIDTH/2
CENTREY = HEIGHT/2
NODE_RADIUS = 3
NODE_COLOUR = "red"
LINE_COLOUR= "yellow"

formatString = "x: %03d, y: %03d"

class Canvassing():
  def __init__(self, parent = None):
    self.canvas = Canvas(width=WIDTH,height=HEIGHT, bg = "blue")
    self.canvas.pack()
    self.slider = Scale(from_=1, to =20, orient = HORIZONTAL)
    self.slider.pack()
    self.updateButton = Button(text="Update!",command = self.update)
    self.updateButton.pack()
    self.readout = Label(text="This is a label")
    self.readout.pack()

    self.line = None
    self.canvas.master.wm_title(string = TITLE)
    self.points = [ (0,HEIGHT-10), (CENTREX,0),(WIDTH,HEIGHT-10) ]
    self.splinesteps = 12

    self.drawTheSpline()

  def drawTheSpline(self):
    allItems = self.canvas.find_all()
    for i in allItems:  # delete all the items on the canvas
      self.canvas.delete(i)

    self.line = self.canvas.create_line(self.points,  width=2, fill = LINE_COLOUR, smooth = True, splinesteps = self.splinesteps)
    for p in self.points:
      self.drawNode(p)
    self.readout.config(text="Steps: %s"%self.splinesteps)

  def drawNode(self, p):
    boundingBox = (p[0]-NODE_RADIUS, p[1]+NODE_RADIUS, p[0]+NODE_RADIUS,p[1]-NODE_RADIUS)
    # mixed + and - because y runs from top to bottom not bottom to top
    self.canvas.create_oval(boundingBox, fill=NODE_COLOUR)

  def update(self):
    # important bit here is to "get" the value in the slider
    self.splinesteps = self.slider.get()
    self.drawTheSpline()

Canvassing()
mainloop()

Exercise: Click the button for different values of the slider.

So, what’s happening here?  When Tkinter draws a smooth line (using create_line) it doesn’t actually draw a curved line.  Rather, it draws a number of much shorter straight lines.  You will notice that the create_line entry has a parameter called splinesteps.  This parameter tells Tkinter how many of these shorter straight lines should be drawn when approximating the curve.  If no number is passed to this parameter, it defaults to 12.  You will see that the spline becomes increasingly more refined as this number is increased.  You should also note that there is a great deal of improvement in the curve when these numbers are small, but much less improvement when the numbers are large (do the next exercise).

Exercise:  See that there is a big change in the curve when this number changes from 1 to 2, and 2 to 3, but very little improvement from 11 to 12 (or even from 12 to 20).

Finally, I want to point out that, since self.slider is a widget, it doesn’t have a value as such so an assignment such as someVariable = self.slider doesn’t make sense to Python, although it is perfectly logical for us. Rather, since self.slider is a Tkinter Scale Widget, it is really an instance of the Scale Class.  This means it has a lot of different attributes and methods (try print dir(self.slider)).  To get the value of the slider at any point, you need to use its get() method.  This is a common pattern for Tkinter widgets so you’ll need to get() used to it.