How do you plan on drawing? You mentioned styling. I suggest using properties and values in the same format as CSS2.1 ( http://www.w3.org/TR/CSS21/ ), where possible.
This would allow more users to immediately style the UI, without having to know much of the iternals. You can get quite complex looking results with a few simple properties: ( http://www.w3.org/TR/css3-background/#border-images ) Example: One single rectangle ends up like this: [image: Diagram: The border image shows a wavy green border with more exaggerated waves towards the corners, which are capped by a disconnected green circle. Four cuts at 124px offsets from each side divide the image into 124px-wide square corners, 124px-wide but thin side slices, and a small center square.] Details: uses an image sliced into 9 pieces. [image: Diagram: The image-less (fallback) rendering has a green double border. The rendering with border-image shows the wavy green border, with the waves getting longer as they reach the corners. The corner tiles render as 124px-wide squares and the side tiles repeat a whole number of times to fill the space in between. Because of the gradual corner effects, the tiles extend deep into the padding area. The whole border image effect is outset 31px, so that the troughs of the waves align just outside the padding edge.] Here's a class I started, some if it is psuedo code, but you should get the idea. # 2011/06/30 ninmonkey # StyleCSS for ui. import pygame from pygame.locals import * from pygame import Color # valid size-types for font, border, width, etc. valid_sizes = ['px', '%', 'pt', 'em'] # which CSS2 andor 3 properties actually do anything ATM. implemented_css_properties = ['border-width', 'border-width-top', 'border-width-right', 'border-width-bottom', 'border-width-left', 'font-size', 'color', 'background-color'] # non-standard style info, that is implemented. implemented_extra_properties = ['foo', 'bar', 'icon', 'alert-box'] class StyleCSS(object): """ methods: members: default_size: one of a valid_size, used on all values. ( border width, font size, etc..) """ def __init__(self, parent): self.default_size = 'px' self.parent = parent # copy parent style data def clear(self): """reset / empty self, and reload values from parent style""" # reset, then reinit def set_property(self, prop, value): """based on property name, read value differently, and save data.""" if not prop in self.implemented_css2_properties or not prop in self.implemented_extra_properties: return # based on property name if prop == 'color': # = pygame.Color(value) elif prop == 'border-width': # elif prop == 'border-left-width': # ... def load_as_str(self, strcss): """load a string containing real a string of real style.css text. note: expects style info, without selectors, and without brackets. example: strcss = "font-size: 20px; color-bg: grey; color: white;" Also: allows you to save presets, that can append eachother, saving to files, and mix-match like selectors can. ( ie: content-main.css, inventory-window-base.css, inventory-bags.css, text-big.css, text-small.css, text-sans.css, text-serif.css)""" self.reset() # split to rules # collapse whitespace rules = strcss.split(';') # get (prop, str) for r in rules: prop, str = r.split(':') self.set_property(prop, str) def append_str(self, strcss): """like load_as_str() , but does NOT destroy current style info. convienence when needing multiple size unit types. """ pass # example use class BaseWidgit(): def __init__(self, ...): self.style = StyleCSS(parent.style) # defaults to *derives style* from parent, # then self only has to *override specific* values self.style.font_size = 20 base_css = """font-size: 14px; font-family: Verdana, sans-serif;""" self.style.append_str(base_css) class PlayerInventoryWindow(BaseWindow): def __init__(self, ...): self.style = StyleCSS(parent) self.style.load_as_str( filename='window-base.css' ) # example property use: # maybe not as needed, but would make some modifications easier. # like if player wants to change border-color: when player hover's. # or k_minus will increment: font-size += 2 """ = css property: border-width = format is: Top Right; and Top Right Bottom Left; border-width: 2 1; border-width: 2, 1, 2, 1; """ # these are equivalent style.border_width = (2, 1) style.border_width = (2, 1, 2, 1) # they set all these. # same as expected for CSS2.1 spec style.border_top_width = 2 style.border_right_width = 1 style.border_bottom_width = 2 style.border_left_width = 1 -- Jake
