Lime Notebook#

Lime Notebook (alternative)#
Normal	Pressed	Active	Disabled

The blue notebook has a few configuration lines, and the result is disappointing, The ony user feedback occurs when the tab is active. The better looking themes have a selected tab that is lighter than the background, when the tab is active it lightens also when selected it slightly grows in height. The deselected tab darkens.

The methods used by keramik look promising, we'll need four images, three being slightly larger and paler. All four images have no lower corners. On the normal or disabled tab, there is a band of transparent pixels on the upperside and the lowerside is cropped, this gives the effect of resizing.

There is also a method included to expand the tab size after it has been selected. The parent notebook should have its tabmargins set to allow the expansion by the tab.

'''
Notebook

Images have extra transparent border as in keramik
'''

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

exp = 9 # enlargement, also thickness between rectangles

w=24 # enlarged from 25
h=32

radius = 4 # gap size was 5

back = 'white' #(102,153,204)
second = '#5D9B90' # (222,247,222)
first = '#A3CCC4' # ~half of border
startc = (222,247,222) 
stopc = (143,188,143) 
fromc = (240,244,239) # used in tab-h and tab-p
toc = (229,255,229) # used in tab-h and tab-p
stoph = (216,255,216)
tab=1
fout = '../images/lime/tab-nx.png' 
fout2 = '../images/lime/tab-hx.png' 
fout3 = '../images/lime/tab-px.png' 
Gr_Base_Rect(fout,w,h,exp,radius,first,second,startc,stopc,tab)

img = Image.open(fout)
dimg = img.convert('L')
img = ImageOps.expand(img, border= (0,3,0,0), fill=(0,0,0,0))
ImageOps.crop(img,(0,0,0,3)).save(fout)

img = Image.open(fout)

#eimg = ImageOps.expand(img, border= (0,0,1,0), fill=(0,0,0,0))
#eimg.save('../images/lime/tab-n.png') 

dimg = dimg.convert('RGBA')
#dimg.save(fout2)
trans(dimg,w,h,radius)
dimg = ImageOps.expand(dimg, border= (0,3,0,0), fill=(0,0,0,0))
ImageOps.crop(dimg,(0,0,0,3)).save('../images/lime/tab-dx.png')
#dimg = ImageOps.expand(dimg, border= (0,0,1,0), fill=(0,0,0,0))
#dimg.save('../images/lime/tab-dx.png')

Gr_Base_Rect(fout2,w,h,exp,radius,first,second,fromc,toc,tab)

Gr_Base_Rect(fout3,w,h,exp,radius,first,second,toc,stoph,tab)

#pimg = Image.open(fout3)
#pimg = ImageOps.expand(pimg, border= (0,0,1,0), fill=(0,0,0,0))
#pimg.save('../images/lime/tab-p.png') 

#epimg = ImageOps.expand(pimg, border= (0,3,0,0), fill=(0,0,0,0))
#ImageOps.crop(epimg,(0,0,0,3)).save('../images/lime/tab-h.png') 

'''
Notebook

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, Notebook
from RunState import run_state

root = Tk()

colours = {'bordercolor': '#7FFFD4'}

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

img1 = PhotoImage("tab-n", file='../images/lime/tab-nx.png')
img2 = PhotoImage("tab-d", file='../images/lime/tab-dx.png')
img3 = PhotoImage("tab-p", file='../images/lime/tab-px.png')
img4 = PhotoImage("tab-h", file='../images/lime/tab-hx.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
        # tabmargins allow enough space for expand
    'TNotebook': {'configure': {'tabmargins': [0,3,0,0]}}, # [2,7,5,5]
    'TNotebook.tab': {
        'configure': { 'foreground': '#8b0a50'},
        "map":
        {'expand': [('selected', [0,3,0,0]),('!selected', [0,0,2])]}},


     'tab': {"element create":
          ('image', "tab-n",
           ('active', "tab-h"),
           ('selected', "tab-p"),
           ('disabled', "tab-d"),
           {'border':[4, 15, 4, 15], 'padding':[7,3],'sticky': "nsew"} # ,'height':12
        ) }


# end of theme extract - don't forget to add comma at end when inserting
     })

style.theme_use('yummy') # 'default'
widg = Notebook(fr)
page1 = Frame(widg, width=150, height=150)
page2 = Frame(widg, width=150, height=150)
widg.add(page1,text='Piratz!')
widg.add(page2,text='Piratz! two')
widg.grid(column=0,row=18,sticky='nsew', padx=5, pady=5)
run_state(fr,widg)

root.mainloop()

Lime Notebook#

This Page