Lime Checkbox#

Lime Checkbox#
Normal	Normal	Active	Active	Disabled	Disabled
unchecked	checked	unchecked	checked	unchecked	checked

Looking at the blue widgets the checkbox is similar to the scrollbar thumb. The check buttons have images showing highlighted(h) and normal(n) combined with checked(c) and unchecked(u) tags, corresponding to active and selected states. In the selected state there are compound states with active and disabled.

The gradient will be as our thumb, but the surrounding frame is lighter. At normal size the difference in the upper and left sides with the lower and right sides is not really discernable. The check mark is a simple cross with double lines drawn at 45 degrees.

When testing we can re-use 07pirate_check.py as 10lime_check.py. Be careful when setting up the states. The active states come immediately after the normal state and active selected precedes plain active.

'''
lime checkbox

requires checked and unchecked widgets
active unchecked new, otherwise copied from scrollbar slider

'''
from PIL import Image, ImageDraw, ImageOps
from roundrect import Gr_Base_Rect
from tools import trans

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

second = 'white' #(102,153,204)
first = (222,247,222) #'#5D9B90'
third = '#5D9B90'
startc = (222,247,222) #(143,188,143) (26,242,195)

stopc = (143,188,143) #(222,247,222) (225,242,238)
tab=0

light = '#D8137F' #'GreenYellow'
med = '#C11373' #'LawnGreen'
dark = '#8b0a50' #'#5D9B90'

fout = '../images/lime/check-hu.png'
fout2 = '../images/lime/check-nu.png'

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

img = Image.open('../images/lime/check-hu.png')
dimg = img.convert('L')
img = ImageOps.expand(img, border= (0,0,2,0), fill=(0,0,0,0))
img.save('../images/lime/check-hu.png')


dimg = dimg.convert('RGBA')
trans(dimg,w,h,radius)
dimg = ImageOps.expand(dimg, border= (0,0,2,0), fill=(0,0,0,0))
dimg.save('../images/lime/check-du.png')

idraw = ImageDraw.Draw(img)

def cross(idraw):
    idraw.line([4,3,w-3,h-5],fill=light)
    idraw.line([2,4,w-5,h-4],fill=med)
    idraw.line([2,h-5,w-5,3],fill=light)
    idraw.line([4,h-4,w-3,4],fill=med)
    idraw.line([3,h-4,w-3,3],fill=dark)
    idraw.line([2,3,w-4,h-4],fill=dark)
    idraw.line([3,3,w-3,h-4],fill=dark)
    idraw.line([2,h-4,w-4,3],fill=dark)
    
cross(idraw)

img.save('../images/lime/check-hc.png')

Gr_Base_Rect(fout2,w,h,exp,radius,third,second,startc,stopc,tab)
im = Image.open('../images/lime/check-nu.png')

imu = ImageOps.expand(im, border= (0,0,2,0), fill=(0,0,0,0))
imu.save('../images/lime/check-nu.png')

ndraw = ImageDraw.Draw(im)

cross(ndraw)
dcim = im.convert('L')
im = ImageOps.expand(im, border= (0,0,2,0), fill=(0,0,0,0))
im.save('../images/lime/check-nc.png')


dcim = dcim.convert('RGBA')
trans(dcim,w,h,radius)
dcim = ImageOps.expand(dcim, border= (0,0,2,0), fill=(0,0,0,0))
dcim.save('../images/lime/check-dc.png')

'''
Check buttons

Create theme extract for custom widgets, include state selection to view
the result of changing the state using different images and/or different
settings.

'''

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

root = Tk()

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

img1 = PhotoImage("check-nc", file='../images/lime/check-nc.png')
img2 = PhotoImage("check-hc", file='../images/lime/check-hc.png')
img3 = PhotoImage("check-hu", file='../images/lime/check-hu.png')
img4 = PhotoImage("check-nu", file='../images/lime/check-nu.png')
img5 = PhotoImage("check-dc", file='../images/lime/check-dc.png')
img6 = PhotoImage("check-du", file='../images/lime/check-du.png')

style = Style()
# both theme_create and theme_settings worked
style.theme_create( "yummy", parent="clam", settings={ # clam, alt worked
#style.theme_settings('default', {
# start of theme extract
     'Checkbutton.indicator': {"element create":
          ('image', "check-nu",
           ('active', 'selected', "check-hc"),
           ('active', "check-hu"),
           ('disabled', 'selected', "check-dc"),
           ('selected', "check-nc"),
           ('disabled', "check-du"),
           { 'sticky': "w", 'padding':3}) # 'width':24,
         }
# end of theme extract - don't forget to add comma at end when inserting
     })

style.theme_use( 'yummy') # 'default' 'yummy'

widg = Checkbutton(fr, text='Cheese' ,width=-8)
widg1 = Checkbutton(fr, text='Tomato' ,width=-8)
widg.grid(column=0,row=18,sticky='nsew', padx=5, pady=5)
widg1.grid(column=0,row=19,sticky='nsew', padx=5, pady=5)
run_state(fr,widg,widg1)

root.mainloop()

Lime Checkbox#

This Page