Skip to content

Commit

Permalink
Merge pull request #11 from mikemorris/colorblind-tol
Browse files Browse the repository at this point in the history 
update colorscheme to colorblind-friendly Tol palette
  • Loading branch information
@kflynn
kflynn authored Mar 25, 2024
2 parents af3afc0 + 33f9545 commit da4b263
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 44 deletions.
90 changes: 52 additions & 38 deletions assets/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,19 @@
}

.green {
color: green;
color: rgb(55 117 59);
}

.red {
color: red;
color: rgb(125 42 83); /* dark magenta */
}

.blue {
color: blue;
color: rgb(151 202 234); /* light blue */
}

.grey {
color: gray;
color: grey;
}

.key {
Expand Down Expand Up @@ -184,19 +184,19 @@
}

.bg-green {
background-color: green;
background-color: rgb(55 117 59);
}

.bg-red {
background-color: red;
background-color: rgb(125 42 83); /* dark magenta */
}

.bg-blue {
background-color: blue;
background-color: rgb(151 202 234); /* light blue */
}

.bg-grey {
background-color: gray;
background-color: grey;
}

.inline {
Expand Down Expand Up @@ -304,15 +304,15 @@ <H1>Faces</H1>
// having to always pass the color by hand.

success(msg) {
this.logmsg("green", msg)
this.logmsg(Cell.colors.green, msg)
}

fail(msg) {
this.logmsg("red", msg)
this.logmsg(Cell.colors.red, msg)
}

info(msg) {
this.logmsg("grey", msg)
this.logmsg(Cell.colors.grey, msg)
}
}

Expand Down Expand Up @@ -435,12 +435,12 @@ <H1>Faces</H1>
if (status == 599) {
// Latched error state.
smiley = Cell.smilies.neutral
bgColor = "hotpink"
bgColor = Cell.colors.hotpink
bumpCounter = true
}
else if (status == 429) {
smiley = Cell.smilies.sleeping
bgColor = "pink"
bgColor = Cell.colors.pink
bumpCounter = true
}
else if (status == 200) {
Expand All @@ -449,17 +449,17 @@ <H1>Faces</H1>
}

if (bgColor == "504") {
bgColor = "pink"
bgColor = Cell.colors.pink
}

this.countDiv.innerHTML = 0
this.countDiv.style.opacity = 0.0
}
else {
// This should probably never happen.
borderColor = "red"
borderColor = Cell.colors.red
smiley = Cell.smilies.upset
bgColor = "red"
bgColor = Cell.colors.red
bumpCounter = true
}

Expand Down Expand Up @@ -570,6 +570,18 @@ <H1>Faces</H1>
"yay": "&#x1F389;",
};

static colors = {
"grey": "grey",
"purple": "rgb(48 34 130)",
"green": "rgb(55 117 59)",
"cyan": "rgb(55 117 59)", // too similar to pink and grey, avoid
"blue": "rgb(151 202 234)", // light blue
"yellow": "rgb(218 204 130)",
"pink": "rgb(191 108 120)",
"hotpink": "rgb(158 75 149)",
"red": "rgb(125 42 83)", // dark magenta
}

constructor(logger, sw, podSet, fetchURL, enclosingDiv, row, col) {
this.logger = logger
this.sw = sw
Expand Down Expand Up @@ -755,7 +767,7 @@ <H1>Faces</H1>
setTimeout(() => {
$(`smiley-${this.row}-${this.col}`).innerHTML = Cell.smilies.confused
$(`cell-${this.row}-${this.col}`).style.opacity = 1.0
$(`cell-${this.row}-${this.col}`).style.background = "red"
$(`cell-${this.row}-${this.col}`).style.background = Cell.colors.red
$(`cell-${this.row}-${this.col}`).style.borderColor = "grey"
}, 50)

Expand Down Expand Up @@ -790,7 +802,7 @@ <H1>Faces</H1>
let errors = "unknown";
let smiley = undefined;
let bgColor = undefined;
let borderColor = "grey";
let borderColor = Cell.colors.grey;

// Start by assuming that we didn't get any timeouts.
let anyTimeouts = false;
Expand All @@ -808,7 +820,7 @@ <H1>Faces</H1>

if (obj.errors != undefined) {
errors = obj.errors.join(",");
borderColor = "red";
borderColor = Cell.colors.red
}
else {
errors = "success!";
Expand All @@ -824,9 +836,9 @@ <H1>Faces</H1>
catch (e) {
// Whoops, something went wrong. If it's a SyntaxError, that
// probably means we got bad JSON. Otherwise, it's... who knows?
borderColor = "red";
borderColor = Cell.colors.red
smiley = Cell.smilies.confused;
bgColor = "red";
bgColor = Cell.colors.red;

if (e instanceof SyntaxError) {
errors = "parse error";
Expand All @@ -850,14 +862,14 @@ <H1>Faces</H1>
// This is our latched-error status. Show it as a neutral face
// on a hot pink background.
smiley = Cell.smilies.neutral;
bgColor = "hotpink";
bgColor = Cell.colors.hotpink;
}
else if (Math.floor(curStatus / 100) == 5) {
// Some other 5yz, so an unknown kind of server error. (In
// practice, this is probably a 503 because there's some kind
// of connectivity error, but whatever, we don't care.
smiley = Cell.smilies.confused;
bgColor = "red";
bgColor = Cell.colors.red;
errors = "server error";
}

Expand All @@ -866,7 +878,7 @@ <H1>Faces</H1>
}

if (bgColor == undefined) {
bgColor = "purple"
bgColor = Cell.colors.purple
}

return { curStatus, anyTimeouts, smiley, bgColor, borderColor };
Expand All @@ -876,12 +888,12 @@ <H1>Faces</H1>
class Key {
constructor(keyDiv) {
let keyEntries = [
[ "smiling", "blue", "grey", "24px", "Success!" ],
[ "confused", "red", "grey", "", "Face service error" ],
[ "sleeping", "pink", "grey", "", "Timeout" ],
[ "kaboom", "red", "grey", "24px", "Service overwhelmed" ],
[ "smiling", "grey", "transparent", "", "Color service error" ],
[ "", "blue", "red", "24px", "Smiley service error" ],
[ "smiling", Cell.colors.blue, Cell.colors.grey, "24px", "Success!" ],
[ "confused", Cell.colors.red, Cell.colors.grey, "", "Face service error" ],
[ "sleeping", Cell.colors.pink, Cell.colors.grey, "", "Timeout" ],
[ "kaboom", Cell.colors.red, Cell.colors.grey, "24px", "Service overwhelmed" ],
[ "smiling", Cell.colors.grey, "transparent", "", "Color service error" ],
[ "", Cell.colors.blue, Cell.colors.red, "24px", "Smiley service error" ],
[ "-", "-", "-", "", "Slow service" ]
]

Expand Down Expand Up @@ -986,11 +998,11 @@ <H1>Faces</H1>

if (cellCount > 4) {
let smiley = Cell.smilies.sleeping
let bgColor = "pink"
let bgColor = Cell.colors.pink

if (cell.lastStatus == 599) {
smiley = Cell.smilies.screaming
bgColor = "hotpink"
bgColor = Cell.colors.hotpink
}

$(`smiley-${cell.row}-${cell.col}`).innerHTML = smiley
Expand Down Expand Up @@ -1097,12 +1109,12 @@ <H1>Faces</H1>
if (xhr.status == 504) {
text = `Timeout after ${latency}ms`
shape = "19.000,49.000 31.000,49.000 31.000,1.000 19.000,1.000"
fgColor = "cyan"
fgColor = Cell.colors.cyan
}
else if (xhr.status != 200) {
text = `Unknown status ${xhr.status} after ${latency}ms`
shape = "19.000,49.000 31.000,49.000 31.000,1.000 19.000,1.000"
fgColor = "red"
fgColor = Cell.colors.red
}
else {
// Parse JSON!
Expand All @@ -1118,12 +1130,12 @@ <H1>Faces</H1>
if (e instanceof SyntaxError) {
text = `Could not parse QotM: ${e.message}\n${xhr.responseText}`
shape = "19.000,49.000 31.000,49.000 31.000,1.000 19.000,1.000"
fgColor = "red"
fgColor = Cell.colors.red
}
else {
text = `Missing QotM? ${e.message}`
shape = "19.000,49.000 31.000,49.000 31.000,1.000 19.000,1.000"
fgColor = "red"
fgColor = Cell.colors.red
}
}
}
Expand All @@ -1134,11 +1146,11 @@ <H1>Faces</H1>
// XSRF-protection cookie, and it changes whenever the auth token does.
let decoration = `${latency}ms`

let bgColor = "green"
let bgColor = Cell.colors.green
let curXSRF = getCookie("ambassador_xsrf.keycloak-multi.default")

if (curXSRF != this.lastXSRF) {
bgColor = "blue"
bgColor = Cell.colors.blue
decoration += ", new session token"
this.lastXSRF = curXSRF
}
Expand Down Expand Up @@ -1167,6 +1179,8 @@ <H1>Faces</H1>

let nowISO = now.toISOString()
this.xhrdiv.innerHTML = `<span class="red"><p>${nowISO}: Failed!</p></span>`

// FIXME: this looks like the wrong arguments for calling this.markers.mark
this.markers.mark("red")
})

Expand Down
4 changes: 2 additions & 2 deletions faces-chart/values.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ color:
imagePullPolicy: "" # If not set, uses backend.imagePullPolicy
errorFraction: "" # If not set, uses backend.errorFraction
delayBuckets: "" # If not set, uses backend.delayBuckets
color: "blue" # Override if desired
color: "rgb(151 202 234)" # Override if desired, defaults to colorblind-friendly light blue from the Tol palette

color2:
enabled: False # If set to True, enables the second color workload
Expand All @@ -68,4 +68,4 @@ color2:
imagePullPolicy: "" # If not set, uses backend.imagePullPolicy
errorFraction: "" # If not set, uses backend.errorFraction
delayBuckets: "" # If not set, uses backend.delayBuckets
color: "orange" # Override if desired
color: "rgb(55 117 59)" # Override if desired, defaults to colorblind-friendly green from the Tol palette
21 changes: 17 additions & 4 deletions pkg/faces/constants.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,31 @@ var Smileys = map[string]string{
"Screaming": "&#x1F631;",
}

// colorblind-friendly colors from the Tol palette
var Colors = map[string]string{
"grey": "grey",
"purple": "rgb(48 34 130)",
"green": "rgb(55 117 59)",
"cyan": "rgb(55 117 59)", // too similar to pink and grey, avoid
"blue": "rgb(151 202 234)", // light blue
"yellow": "rgb(218 204 130)",
"pink": "rgb(191 108 120)",
"hotpink": "rgb(158 75 149)",
"red": "rgb(125 42 83)", // dark magenta
}

var Defaults = map[string]string{
// Default to grey background, cursing face.
"color": "grey",
"color": Colors["grey"],
"smiley": Smileys["Cursing"],

// 504 errors (GatewayTimeout) from the face workload will get handled in
// the GUI, but from the color & smiley workloads, they should get
// translated to a pink color or a sleeping face.
"color-504": "pink",
// translated to a pink color and a sleeping face.
"color-504": Colors["pink"],
"smiley-504": Smileys["Sleeping"],

// Ratelimits are pink with an exploding head.
"color-ratelimit": "pink",
"color-ratelimit": Colors["pink"],
"smiley-ratelimit": Smileys["Kaboom"],
}

0 comments on commit da4b263

Please sign in to comment.