Lime Scale#

Lime Scale#
Vertical	Horizontal
standard	alternative

The vertical scale has been fashioned from the standard code.

The horizontal scale has an alternative trough. The keramik scale trough has been used as a template, and the slider has been copied from the blue theme. When building the trough ensure that the upper border is overdrawn by the gradient. The upper corners were lightened to fit in with the gradient.

When building the trough, using element_create, ensure that the border reflects the method of trough expansion. We want the trough to expand horizontally, so a vertical gradient is required, the trough should be slightly lower than the upper part of the slider, so a 'sticky': 'ews' is important. Don't forget to make the border fit the trough image, so that we expand from the centre of the image 'height': 10 - 'border': [6,0,6,0].

'''
scale

slider made with downward pointer, gradient left to right

'''
from PIL import Image, ImageDraw
from tools import LerpColour

def midFunction(a,b):
    # a,b are tuples or lists
    (r1,g1,b1) = a
    (r2,g2,b2) = b
    return ((r1+r2)//2,(g1+g2)//2,(b1+b2)//2)

w=9
h=14
steps = w-2 # gradient steps

back = 'white'
border = '#5D9B90'
fromc = (222,247,222) 
toc = (143,188,143)

afill = midFunction(fromc,toc) 

img = Image.new('RGBA', (w,h), (0,0,0,0))
rdraw = ImageDraw.Draw(img)
rdraw.rectangle([0,0,w-1,h-3],fill=border)
rdraw.polygon([1,h-4,(w-1)//2,h-1,w-2,h-4],outline=border,
              fill =afill)
# gradient
for j in range(steps):
    cr,cg,cb = LerpColour(fromc,toc,j/(steps-1))
    rdraw.line([j+1,1,j+1,h-4],fill=(cr,cg,cb))

# make corners transparent
rdraw.point([0,0],fill=(0,0,0,0))
rdraw.point([w-1,0],fill=(0,0,0,0))
rdraw.point([0,h-3],fill=(0,0,0,0))
rdraw.point([w-1,h-3],fill=(0,0,0,0))

img.save('../images/lime/slider.png')

img.transpose(Image.FLIP_LEFT_RIGHT).save(
    "../images/lime/slider-p.png")

img.transpose(Image.ROTATE_90).save('../images/lime/vslider-p.png')
#rimg = img.rotate(90) # only square rotated
#rimg.save('../images/lime/vslider-p.png')

rimg = Image.open('../images/lime/vslider-p.png')
rimg.transpose(Image.FLIP_TOP_BOTTOM).save(
    "../images/lime/vslider.png")

'''
scale trough

standard widget method
'''
from PIL import Image, ImageDraw
from roundrect import Gr_Base_Rect

exp = 9 # enlargement, also thickness between rectangles
w=16
h=10
radius = 5 # gap size

second = 'white' #(102,153,204)back
first = '#5D9B90' # (222,247,222)border
startc = (222,247,222) #(143,188,143) (26,242,195)
fromci = (183,217,183) # (212,239,212)
stopc = (143,188,143) #(222,247,222) (225,242,238)
toci = (143,188,143) #(222,247,222) (210,242,234)
fout = '../images/lime/slider-t.png'
tab = 0

Gr_Base_Rect(fout,w,h,exp,radius,first,second,startc,stopc,tab)

img = Image.open('../images/lime/slider-t.png')
img.transpose(Image.ROTATE_90).save('../images/lime/vslider-t.png')

'''
scale trough

based on keramik trough
horizontal trough open at top, border has gradient

'''
from PIL import Image, ImageDraw, ImageChops
from tools import LerpColour, gr_base, trans

exp = 9 # enlargement, also thickness between rectangles
w=16
h=10
we = w*exp
he = h*exp
radius = 5 # gap size
re=radius*exp
steps = he

first = '#2B2B2B' # '#5D9B90'
second = 'white' #(102,153,204)back
startci = (236,247,222) 
stopci = (148,229,50) 
startc = (240,252,240)
stopc = (87,137,87)

img = gr_base(we,he,exp,re,first,second,startci,stopci)
# img.save('../images/lime/iscale-n.png')

grad = Image.new('RGBA', (we,he), 'white')
igrad = ImageDraw.Draw(grad)

# gradient
for j in range(steps):
    cr,cg,cb = LerpColour(startc,stopc,j/(steps-1))
    igrad.line([0,j,we-1,j],fill=(cr,cg,cb))

limg = ImageChops.lighter(grad,img)
limg = limg.resize((w,h),Image.LANCZOS)
trans(limg,w,h,radius)
limg.save('../images/lime/scale-nt.png')

dimg = limg.convert('L')
dimg = dimg.convert('RGBA')
trans(dimg,w,h,radius)
dimg.save('../images/lime/scale-dt.png')

#img = Image.open('../images/lime/slider-t.png')
#img.transpose(Image.ROTATE_90).save('../images/lime/vslider-t.png')

'''
Create theme extract for custom widgets, states are selected according to
one of two functions which change the state according to the value of
the scale.
Ensure that the vertical and horizontal widgets are run in separate frames,
or ensure that the second widget does not expand or else the widgets interact.

The slider is 9 pixels wide, the trough has a border 6 pixels wide
'''

from tkinter import Tk, PhotoImage
from tkinter.ttk import Style, Frame, Scale
from RunState import run_state

root = Tk()

fr = Frame(root)
fr.grid(column=0,row=0,sticky='nsew')

img1 = PhotoImage("slider", file='../images/lime/slider.png')
img2 = PhotoImage("vslider", file='../images/lime/vslider.png')
img3 = PhotoImage("slider-p", file='../images/lime/slider-p.png')
img4 = PhotoImage("vslider-p", file='../images/lime/vslider-p.png')
img5 = PhotoImage("scale-nt", file='../images/lime/scale-nt.png') # slider-t.png
img6 = PhotoImage("vslider-t", file='../images/lime/vslider-t.png')
img7 = PhotoImage("scale-dt", file='../images/lime/scale-dt.png') # slider-t.png


style = Style()
# both theme_create and theme_settings worked
style.theme_create( "yummy", parent="clam", settings={
#style.theme_settings('default', {
# start of theme extract
     'Horizontal.Scale.trough': {"element create":
          ('image', "scale-nt",
           ('disabled', "scale-dt"),
            {'border':[6,0,6,0],'sticky': 'wes'})}, # [6,0,6,0]
     'Horizontal.Scale.slider': {"element create":
          ('image', "slider",
           ('pressed','!disabled', "slider-p"),
           {'border':3})
        },
     'Vertical.Scale.trough': {"element create":
          ('image', "vslider-t",
           {'border':[0,6,0,6],'sticky': 'nes'})}, # [0,6,0,6]
     'Vertical.Scale.slider': {"element create":
          ('image', "vslider",
           ('pressed','!disabled', "vslider-p"),
           {'border':3})
        }
# end of theme extract - don't forget to add comma at end when inserting
     })

style.theme_use('yummy') # 'default'
widg = Scale(fr,from_=0, to=100, length=200,orient='horizontal')
widg.grid(column=0,row=13,sticky='nsew', padx=5, pady=5)

widg1 = Scale(fr,from_=100, to=0, length=200,orient='vertical')
widg1.grid(column=0,row=14, padx=5, pady=5)
run_state(fr,widg,widg1)

root.mainloop()

Lime Scale#

This Page