Constrain userbars to be less ugly. Put them before names.
authorEevee <git@veekun.com>
Sat, 8 May 2010 23:27:58 +0000 (16:27 -0700)
committerEevee <git@veekun.com>
Sat, 8 May 2010 23:27:58 +0000 (16:27 -0700)
spline/plugins/users/model/__init__.py
spline/plugins/users/templates/css/users.mako
spline/plugins/users/templates/users/profile.mako
spline/plugins/users/templates/widgets/user_state.mako

index e4b824c..2fd444b 100644 (file)
@@ -1,4 +1,6 @@
+# encoding: utf8
 import colorsys
 import colorsys
+from math import sin, pi
 import random
 
 from sqlalchemy import Column, ForeignKey
 import random
 
 from sqlalchemy import Column, ForeignKey
@@ -27,7 +29,6 @@ class User(TableBase):
         """Returns a list of (width, '#rrggbb') tuples that semi-uniquely
         identify this user.
         """
         """Returns a list of (width, '#rrggbb') tuples that semi-uniquely
         identify this user.
         """
-
         width_blob, colors_blob = self.unique_identifier[0:8], \
                                   self.unique_identifier[8:32]
 
         width_blob, colors_blob = self.unique_identifier[0:8], \
                                   self.unique_identifier[8:32]
 
@@ -38,17 +39,43 @@ class User(TableBase):
         total_width = sum(widths)
 
         ret = []
         total_width = sum(widths)
 
         ret = []
+        last_hue = None
         for i in range(4):
         for i in range(4):
-            h = int(colors_blob[i*6:i*6+2], 16) / 256.0
+            raw_hue = int(colors_blob[i*6:i*6+2], 16) / 256.0
+            if last_hue:
+                # Make adjacent hues relatively close together, to avoid green
+                # + purple sorts of clashes.
+                # Minimum distance is 0.1; maximum is 0.35.  Leaves half the
+                # spectrum available for any given color.
+                # Change 0.0–0.1 to -0.35–-0.1, 0.1–0.35
+                hue_offset = raw_hue * 0.5 - 0.25
+                if raw_hue < 0:
+                    raw_hue -= 0.1
+                else:
+                    raw_hue += 0.1
+
+                h = last_hue + raw_hue
+            else:
+                h = raw_hue
+            last_hue = h
+
             l = int(colors_blob[i*6+2:i*6+4], 16) / 256.0
             s = int(colors_blob[i*6+4:i*6+6], 16) / 256.0
 
             l = int(colors_blob[i*6+2:i*6+4], 16) / 256.0
             s = int(colors_blob[i*6+4:i*6+6], 16) / 256.0
 
-            # Cap lightness to 0.25 to 0.75, so it's not too close to white or
+            # Secondary colors are extremely biased against when picking
+            # randomly from the hue spectrum.
+            # To alleviate this, try to bias hue towards secondary colors.
+            # This adjustment is based purely on experimentation; sin() works
+            # well because hue is periodic, * 6 means each period is 1/3 the
+            # hue spectrum, and the final / 24 is eyeballed
+            h += sin(h * pi * 6) / 24
+
+            # Cap lightness to 0.4 to 0.95, so it's not too close to white or
             # black
             # black
-            l = l * 0.5 + 0.25
+            l = l * 0.6 + 0.3
 
             # Cap saturation to 0.5 to 1.0, so the color isn't too gray
 
             # Cap saturation to 0.5 to 1.0, so the color isn't too gray
-            s = s * 0.5 + 0.5
+            s = s * 0.6 + 0.3
 
             r, g, b = colorsys.hls_to_rgb(h, l, s)
             color = "#{0:02x}{1:02x}{2:02x}".format(
 
             r, g, b = colorsys.hls_to_rgb(h, l, s)
             color = "#{0:02x}{1:02x}{2:02x}".format(
@@ -67,4 +94,3 @@ class OpenID(TableBase):
     openid = Column(Unicode(length=255), primary_key=True)
     user_id = Column(Integer, ForeignKey('users.id'))
     user = relation(User, lazy=False, backref='openids')
     openid = Column(Unicode(length=255), primary_key=True)
     user_id = Column(Integer, ForeignKey('users.id'))
     user = relation(User, lazy=False, backref='openids')
-
index 4c33efa..e459b13 100644 (file)
@@ -1,2 +1,2 @@
-.user-color-bar { display: inline-block; height: 1em; width: 3em; padding: 1px; vertical-align: middle; border: 1px solid black; background: #e0e0e0; }
+.user-color-bar { display: inline-block; height: 1em; width: 4em; padding: 1px; vertical-align: middle; border: 1px solid black; background: #e0e0e0; }
 .user-color-bar-chunk { float: left; height: 1em; }
 .user-color-bar-chunk { float: left; height: 1em; }
index 9b1a254..80d7827 100644 (file)
@@ -6,7 +6,7 @@
 <h1>${c.page_user.name}'s profile</h1>
 
 <p>
 <h1>${c.page_user.name}'s profile</h1>
 
 <p>
-    Profile for ${c.page_user.name} ${userlib.color_bar(c.page_user)}.
+    Profile for ${userlib.color_bar(c.page_user)} ${c.page_user.name}.
     % if c.page_user == c.user:
     <a href="${url(controller='users', action='profile_edit', id=c.page_user.id, name=c.page_user.name)}">
         <img src="${h.static_uri('spline', 'icons/user--pencil.png')}" alt="">
     % if c.page_user == c.user:
     <a href="${url(controller='users', action='profile_edit', id=c.page_user.id, name=c.page_user.name)}">
         <img src="${h.static_uri('spline', 'icons/user--pencil.png')}" alt="">
index 86995dc..adf816b 100644 (file)
@@ -1,7 +1,7 @@
 <%namespace name="userlib" file="/users/lib.mako" />
 % if c.user:
 ${h.form(url(controller='accounts', action='logout'), id='user')}
 <%namespace name="userlib" file="/users/lib.mako" />
 % if c.user:
 ${h.form(url(controller='accounts', action='logout'), id='user')}
-    Logged in as <a href="${url(controller='users', action='profile', id=c.user.id, name=c.user.name)}">${c.user.name}</a> ${userlib.color_bar(c.user)}.
+    Logged in as <a href="${url(controller='users', action='profile', id=c.user.id, name=c.user.name)}">${userlib.color_bar(c.user)} ${c.user.name}</a>.
     <input type="submit" value="Log out">
 ${h.end_form()}
 % else:
     <input type="submit" value="Log out">
 ${h.end_form()}
 % else: