I was actually considering CSS-like styling as well as XML config styling:
<configuration>
<styling>
<component name="id" type="type" width="200px" height="150px"
border-width="2px" background-color="#3060CC" />
....
</styling>
</configuration>
If I implement it like XML the name of the styling attributes would be the same
as in CSS2.1 but this way other configurations can also be defined for the
framework.
---- OriginalMessage ----
From: "Jake b" <ninmonk...@gmail.com>
To: pygame-users@seul.org
Sent: Fri, Jul 01, 2011, 06:53 PM
Subject: Re: [pygame] Pygame-UI: UI Component Framework for python and pygame
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:
Details: uses an image sliced into 9 pieces.
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
