Skip to content

Loading…

Unique issuers should have different colors #659

Closed
wants to merge 4 commits into from

4 participants

@andrewhayward
Mozilla member

Fixing #655 by automatically generating colours for issuers where not provided.

@stenington stenington commented on an outdated diff
models/badge.js
((29 lines not shown))
var Badge = function (attributes) {
+ if (attributes) {
+ try {
+ var issuer = attributes.body.badge.issuer;
+
+ if (issuer && !issuer.color) {
+ var color = generateColor(attributes.body.badge.issuer.name);
+
+ attributes.body.badge.issuer.color = {
+ value: color,
+ dark: isDarkColor(color)
+ }
+ }
+ } catch () {

Travis is dying here. } catch (ex) { works.

@andrewhayward Mozilla member

Hmm. That worked for me locally, after having already trashed Travis. Oh well. Fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@stenington stenington commented on the diff
models/badge.js
((29 lines not shown))
var Badge = function (attributes) {
+ if (attributes) {
+ try {
+ var issuer = attributes.body.badge.issuer;

This is the wrong place to store the color. attributes.body is the metadata in the badge assertion, and I'm worried that modifying it means we'll display those modifications back somewhere else on the site. I guess this issue really requires a DB migration. :/

@andrewhayward Mozilla member

Yeah, I couldn't see anything anywhere about individual issuers in the DB, other than here. Figured I'd go out on a limb and do something, on the assumption that it'd probably be wrong.

Yep, didn't occur to me until now that this would require DB changes. Feel free to punt for the time being.

You can stick some code in Badge.prepare.out['issuerColor'] or something similar to create a virtual field of sorts. Once you merge in the latest development updates, you can see the way I did this with imageUrl.

But yes, ideally we'd have an issuer table.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@iamjessklein

I am closing this issue as we are moving forward with a different UI design that matches the branding from Openbadges.org

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Showing with 53 additions and 1 deletion.
  1. +42 −0 models/badge.js
  2. +5 −0 static/less/backpack.less
  3. +6 −1 views/badges.html
View
42 models/badge.js
@@ -9,7 +9,49 @@ function sha256(value) {
return sum.digest('hex');
}
+function generateColor(str) {
+ var sum = crypto.createHash('md5');
+ sum.update(str);
+ return '#' + sum.digest('hex').substr(0,6);
+}
+
+function isDarkColor(color, cutoff) {
+ var rgb, r, g, b, brightness;
+
+ if (!(rgb = color.match(/^#?(?:([0-9a-f])([0-9a-f])([0-9a-f])|([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2}))$/)))
+ return null;
+
+ r = parseInt(rgb[1] || rgb[4] || 0, 16);
+ g = parseInt(rgb[2] || rgb[5] || 0, 16);
+ b = parseInt(rgb[3] || rgb[6] || 0, 16);
+
+ brightness = Math.sqrt(
+ r * r * 0.241 +
+ g * g * 0.691 +
+ b * b * 0.068
+ );
+
+ return brightness < (cutoff || 130);
+}
+
var Badge = function (attributes) {
+ if (attributes) {
+ try {
+ var issuer = attributes.body.badge.issuer;

This is the wrong place to store the color. attributes.body is the metadata in the badge assertion, and I'm worried that modifying it means we'll display those modifications back somewhere else on the site. I guess this issue really requires a DB migration. :/

@andrewhayward Mozilla member

Yeah, I couldn't see anything anywhere about individual issuers in the DB, other than here. Figured I'd go out on a limb and do something, on the assumption that it'd probably be wrong.

Yep, didn't occur to me until now that this would require DB changes. Feel free to punt for the time being.

You can stick some code in Badge.prepare.out['issuerColor'] or something similar to create a virtual field of sorts. Once you merge in the latest development updates, you can see the way I did this with imageUrl.

But yes, ideally we'd have an issuer table.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+
+ if (issuer && !issuer.color) {
+ var color = generateColor(attributes.body.badge.issuer.name);
+
+ attributes.body.badge.issuer.color = {
+ value: color,
+ dark: isDarkColor(color)
+ }
+ }
+ } catch (ex) {
+ // Do nothing - color is not that important
+ }
+ }
+
this.attributes = attributes;
};
View
5 static/less/backpack.less
@@ -157,6 +157,11 @@ form.baker #assertion {
margin: 10px -20px -20px;
background: #FAB142;
font-size: 0.8em;
+ color: #555;
+
+ &.dark {
+ color: #EEE;
+ }
}
}
View
7 views/badges.html
@@ -25,7 +25,12 @@
<div class="openbadge" data-id="{{badge.attributes.id}}">
<img src="{{ badge.attributes.image_path }}" width="64">
<p class="title">{{ badge.attributes.body.badge.name }}</p>
- <p class="issuer">Issuer: {{ badge.attributes.body.badge.issuer.name }}</p>
+ {% if badge.attributes.body.badge.issuer.color -%}
+ <p class="issuer{% if badge.attributes.body.badge.issuer.color.dark %} dark" style="background-color: {{ badge.attributes.body.badge.issuer.color.value }};"{% endif %}>
+ {%- else -%}
+ <p class="issuer">
+ {%- endif -%}
+ Issuer: {{ badge.attributes.body.badge.issuer.name }}</p>
</div>
</li>
{% endfor %}
Something went wrong with that request. Please try again.