p5js

2022-2023-bhs-schedule

This is a p5.js sketch for the 2022-2023 Brookline High School Schedule (v1C’). p5.js ‘…is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.’

Use the link https://psb-david-petty.github.io/p5js/2022-2023-bhs-schedule with suitable query properties to display your custom schedule. The query properties are described below.

URI Query properties.

See https://en.wikipedia.org/wiki/Uniform_Resource_Identifier#Syntax for a primer on the basic syntax of a URI. The properties of the schedule are set by the name-value pairs in the query portion of the URI (after the first ‘?’) separated by ampersands (‘&’).

There are valid query properties for text, room, lunch, and color, plus other properties of interest (canvas width, font size, font face, footer legend, pad character). For example:

The URI https://psb-david-petty.github.io/p5js/2022-2023-bhs-schedule/?at=bt=et=ft=gt=APCS​&ar=br=er=fr=gr=UA-33​&dl=1​&ac=hotpink​&bc=navy​&cc=orchid​&dc=gold&ec=chartreuse​&fc=dodgerblue​&gc=rebeccapurple sets the text for all five classes in blocks A, B, E, F, & G as APCS, all five rooms in blocks A, B, E, F, & G as UA-33, D lunch as Lunch 1, and individual colors for the seven blocks.

Ordinarily, query property values (after the first ‘=’) do not have additional semantics. To save space in the URI, this sketch allows multiple names followed by ‘=’ to all refer to the same value, which follows the last ‘=.’ That also implies that ’=’ cannot appear in the value (unless it is the Unicode full-width equals sign percent encoded as %EF%BC%9D).

Based on RFC 1738, the only valid URI characters are: alphanumeric, special characters $-_.+!*'(),, and reserved characters ;/?:@=& (meaning that ‘ ’ and "#%<>[]\^{}|~` are unsafe for use in a URI and must always be percent encoded). However, based on an interpretation of RCF 3986, reserved characters ;/?:@=& can be included in query property text without percent encoding (though every query character could be percent encoded without problem).

It is typical in URIs to use ‘+’ as a placeholder for ‘ ’ in text, rather than the uglier percent-encoded space %20. That also implies that ’+’ cannot appear in the value (unless it is the Unicode full-width plus sign percent encoded as %EF%BC%8B).

The complete documentation follows.

Text

Query property names ending in ‘T’ can be either two or three characters — depending on whether the property applies to all blocks or only a specific numbered block. To set all all A blocks to APCS use at=APCS. To set only block A4 to APCS Lab use a4t=APCS+Lab. Using A block as an example, at= is equivalent to a1t=a2t=a3t=a4t=. Three-character query property names are more specific than their two-character counterparts, so their values override any associated with the less-specific query property names.

Properties

Name Value Type Example
zt Text description of Z-Block class text zt=APCS-A+(Java)
at Text description of A-Block class text at=APCS-A+(Java)
bt Text description of B-Block class text bt=APCS-A+(Java)
ct Text description of C-Block class text ct=APCS-A+(Java)
dt Text description of D-Block class text dt=APCS-A+(Java)
et Text description of E-Block class text et=APCS-A%20(Java)
ft Text description of F-Block class text ft=APCS-A%20%28Java%29
gt Text description of G-Block class text gt=%41%50%43%53%2D%41%20%28%4A%61%76%61%29
tt Text description of T-Block class text tt=Advisory
xt Text description of X-Block class text xt=Brookline+Robotics+Team

The default values are empty.

Room

Query property names ending in ‘R’ can be either two or three characters — depending on whether the property applies to all blocks or only a specific numbered block. To set all all A blocks to UA-33 use ar=UA-33. To set only block A4 to STEM-105 use a4r=STEM-105. Using A block as an example, ar= is equivalent to a1r=a2r=a3r=a4r=. Three-character query property names are more specific than their two-character counterparts, so their values override any associated with the less-specific query property names.

Properties

Name Value Type Example
zr Room for Z-Block class text zr=UA-33
ar Room for A-Block class text ar=UA-33
br Room for B-Block class text br=UA-33
cr Room for C-Block class text cr=UA-33
dr Room for D-Block class text dr=UA-33
er Room for E-Block class text er=UA-33
fr Room for F-Block class text fr=UA-33
gr Room for G-Block class text gr=UA-33
tr Room for T-Block class text tr=UA-33
xr Room for X-Block class text xr=UA-33

The default values are empty.

Lunch

Query property names ending in ‘L’ can be either two or three characters — depending on whether the property applies to all blocks or only a specific numbered block. To set all all E blocks to L1 use el=L1. To set only block E4 to L2 use e4l=L2. Using E block as an example, el= is equivalent to e1l=e4l=. Three-character query property names are more specific than their two-character counterparts, so their values override any associated with the less-specific query property names. Query property names ending in ‘L’ have case-insensitive valid values C1, L2, 2, C2, L1, or 1.

Properties

Name Value Type Example
dl Lunch for D-Block classes D1 & D2 text dl=L1
el Lunch for E-Block classes E1 & E4 text el=L1
gl Room for G-Block class G3 text gl=L1

The default values are L2 (sorry humanities departments!).

Colors

The block background colors default to the OG BHS schedule colors. You can change any of them, using CSS color names or 3- or 6-digit hexadecimal (base 16) values. Because I’m slightly color blind, I typically use colors from the of 216 web-safe colors on my websites. (ColorHexa has an interesting Color Blindness Simulator as part of their color pages to help with web accessibility.) See this reference for a complete description of CSS colors.

Query property names ending in ‘C’ can be either two or three characters — depending on whether the property applies to all blocks or only a specific numbered block. To set all all A blocks to red use ac=red. To set only block A4 to navy use a4c=navy. Using A block as an example, ac= is equivalent to a1c=a2c=a3c=a4c=. Three-character query property names are more specific than their two-character counterparts, so their values override any associated with the less-specific query property names.

Named colors

The query property color values can be one of the case-insensitive CSS color names. There are 148 named colors that come from 16 original VGA colors, 131 of the 504 X11 colors, and rebeccapurple. (https://youtu.be/HmStJQzclHc is a history of the names — who knew there was a Crayola 72 pack?)

Hexadecimal colors

The query property color values can be a hexadecimal number. The standard way to specify a color in an RGB color space is to use three two-digit hexadecimal numbers, one for each color. That yields 256 levels (from 00 to ff) of red, green, and blue. The color numbers can be specified as either 3 or 6 hexadecimal digits, where the 3-digit number simply repeats each digit twice. For example, rebeccapurple can be specified as either 639 or 663399.

Properties

Name Value Type Example Color
zc Z-Block color color zc=yellow #FFFF00
ac A-Block color color ac=f00 red
bc B-Block color color bc=000080 navy
cc C-Block color color cc=7fff00 chartreuse
dc D-Block color color dc=Sienna #a0522d
ec E-Block color color ec=000 black
fc F-Block color color fc=white #FFF
gc G-Block color color gc=639 rebeccapurple
lc Lunch Block color color lc=PeachPuff #FFDAB9
tc T-Block color color tc=ccc a light shade of gray
xc X-Block color color xc=ccc a light shade of gray
tcc Teacher Collaboration color color tcc=ccc a light shade of gray

The code for the default values is:

// All colors keys end in "C".
const colors = {
  ZC: "#ff6", // Z: 255, 255,  84 -> #ff5 / #ff6
  AC: "#c33", // A: 189,  75,  49 -> #b43 / #c33
  BC: "#009", // B:   0,   0, 147 -> #009 / #009
  CC: "#c69", // C: 185, 126, 158 -> #b79 / #c69
  DC: "#f90", // D: 219, 149,  75 -> #d94 / #c93
  EC: "#696", // E: 121, 166,  90 -> #7a5 / #696
  FC: "#69c", // F: 121, 157, 229 -> #79d / #69c
  GC: "#639", // G: 139, 125, 190 -> #87b / #96c
  LC: "#ccc",
  TC: "#ccc",
  XC: "#ccc",
  TCC: "#fff",
};

Other

Name Value Type Example Description
cw Canvas Width number cw=1080 in pixels
fs Font Size number fs=16 in points
ff Font Face string ff=Arial one of the web-safe fonts
lg Footer Legend string lg= additional text added to footer
pd Pad Character string pd=%E2%80%87 Unicode figure space
ln Lunch Number string ln=L2 class 1 / lunch 2
ts Timer Shown string ts=0 anything other than 0 shows timer
to Time Offset number to=0 offset in seconds from now (debugging)

The examples show the default values for these query properties.

The query property pd is a character used to pad out single-digit hours. To show, e.g., two o’clock as 02:00 use pd=0. To remove any padding, use pd=.

The query property ln has case-insensitive valid values C1, L2, 2, C2, L1, or 1. It is maintained for backward compatibility, but it is preferable to use query property names ending in ‘L’ where ln= is equivalent to dl=el=gl=.

To embed in Google Sites

This HTML code sets the style and embeds an iframe for my 2022-2023 S1 schedule in my PSB Google Site. Use it as an example.

<style>
  iframe { width: 1150; height: 1002px; }
</style>
<div style="width: 100%; display: flex; justify-content: center; align-items: center;">
  <iframe src="https://psb-david-petty.github.io/p5js/2022-2023-bhs-schedule/?at=Autonomous+Robotics+II&bt=gt=APCS-P+(Mobile)&ct=APCS-A+(Java)&et=Autonomous+Robotics+I&xt=Brookline+Robotics+Team&ar=br=cr=er=gr=xr=Room+373&lg=Mr.+Petty+%E2%80%94+2022-2023+S1&ff=Inconsolata&cw=1130"></iframe>
</div>

The default iFrame height and width style is iframe { width: 1080px; height: 996px; }. If you change settings (as in my example schedule), the iFrame height and width for any new settings are echoed on the browser’s developer console. Copy the echoed values between the <style> & </style> tags in the above HTML code.

TODO

🔗 permalink and 🔩 repository for this sketch.

This site is open source. Improve this page.