-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.R
350 lines (303 loc) · 12.8 KB
/
app.R
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
#' A Shiny App Walkthrough to Read Colour Hex Codes
#'
#' Rather than manually typing functions of {dehex} into your console, you can
#' instead run this Shiny app to be guided through the process of learning to
#' read a random colour hex code.
#'
#' @return Opens a Shiny app.
#' @export
#'
#' @examples \dontrun{dh_app()}
dh_app <- function() {
ui <- shiny::fluidPage(
# style ----
theme = bslib::bs_theme(
bg = "#111",
fg = "#DDD",
primary = "#F00",
secondary = "#00F",
base_font = bslib::font_google("Overpass Mono"),
code_font = bslib::font_google("Overpass Mono")
),
shiny::tags$style(shiny::HTML("#title{font-size:50px;}")),
shiny::tags$style(shiny::HTML("#title,h2,h3{color:#0F0;}")),
# title ----
shiny::h1(id = "title", "Learn to read colour hex codes"),
shiny::p(
"A", shiny::a(href = "https://github.com/matt-dray/dehex", "{dehex}"), "demo following",
shiny::a(href = "https://metafizzy.co/blog/read-color-hex-codes/", "David DeSandro's method")
),
shiny::br(),
shiny::sidebarLayout(
shiny::sidebarPanel(
# start ----
shiny::p("Generate a random code then follow the steps in the tabs",),
shiny::p(shiny::actionButton("action", label = "Generate")),
shiny::tags$span(shiny::textOutput("hex_long"), style = "font-size:50px;")
),
shiny::mainPanel(
shiny::tabsetPanel(
type = "tabs",
# tab 1 ----
shiny::tabPanel(
title = "1. Simplify",
shiny::h3("Task"),
shiny::p("Simplify the colour hex code to three values."),
shiny::h3("Explanation"),
shiny::tags$div(
shiny::tags$ul(
shiny::tags$li("There are three pairs of alphanumeric characters in a colour hex code"),
shiny::tags$li("The pairs represent red, green and blue (RGB), so #A1B2C3 has A1 for R, B2 for G and C3 for B)"),
shiny::tags$li("The first value of each pair contains enough information for our needs, so #A1B2C3 can be simplified to #ABC")
)
),
shiny::h3("Hints"),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show the three-digit code</summary>",
shiny::tags$span(shiny::textOutput("hex_short"), style = "font-size:50px;"),
"</details></p>"
)
),
"Go to David's", shiny::a(href = "https://speakerdeck.com/desandro/read-color-hex-codes?slide=21", "relevant slide")
),
# tab 2 ----
shiny::tabPanel(
title = "2. Chart",
shiny::h3("Task"),
shiny::p("Convert the simplified hex code to a bar chart of decimal values for red, green and blue (RGB)."),
shiny::h3("Explanation"),
shiny::tags$div(
shiny::tags$ul(
shiny::tags$li("The alphanumeric values are in hexadecimal code, taking values of 0 to 9 then A to F, which represent 10 to 15 in decimal"),
shiny::tags$li("So you can convert your shortened hex code to decimal values (#ABC encodes 10, 11 and 12 for R, G and B)"),
shiny::tags$li("Imagine a bar chart of these values to get a sense of the RGB 'profile' of your simplified hex code")
)
),
shiny::h3("Hints"),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show the RGB chart</summary>",
"Remember: the bars go from 0 to 15, encoding hexadecimal RGB values of 0 to 9 then A to F.",
shiny::verbatimTextOutput("hex_graph_simple"),
"</details></p>"
)
),
"Go to David's", shiny::a(href = "https://speakerdeck.com/desandro/read-color-hex-codes?slide=29", "relevant slide")
),
# tab 3 ----
shiny::tabPanel(
title = "3. Hue",
shiny::h3("Task"),
shiny::p("Select the hue with the most similar RGB profile to your simplified hex code."),
shiny::h3("Explanation"),
shiny::tags$div(
shiny::tags$ul(
shiny::tags$li("Hue is basically the name of a colour, like 'red'"),
shiny::tags$li("First, rank the RGB values of your simplified hex code (e.g. R is largest in #F11, with G and B tied beneath)"),
shiny::tags$li("Then compare these ranks against RGB ranks for a set of named hues")
)
),
shiny::h3("Hints"),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show the RGB chart with added hue guide</summary>",
"The 'H' at the end of the bar helps show the RGB ranks (1 is smallest, ties are possible).",
shiny::verbatimTextOutput("hex_graph_h"),
"</details></p>"
)
),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show RGB charts for each hue</summary>",
"Which RGB hue-rank profile best matches the one for your shortened hex code?",
"To keep it simple, we're only using hue-rank profiles for red, green, blue and their secondary and tertiary mixtures (grey is aspecial case where RGB values are all tied).",
shiny::verbatimTextOutput("hex_guide_h"),
"</details></p>"
)
),
"Go to David's", shiny::a(href = "https://speakerdeck.com/desandro/read-color-hex-codes?slide=43", "relevant slide")
),
# tab 4 ----
shiny::tabPanel(
title = "4. Saturation",
shiny::h3("Task"),
shiny::p("Select the saturation level that has the closest RGB range to your shortened hex code."),
shiny::h3("Explanation"),
shiny::tags$div(
shiny::tags$ul(
shiny::tags$li("Saturation is like the 'intensity' of a colour"),
shiny::tags$li("Colour intensity is given by the difference between the smallest and largest RGB values encoded in the hex code"),
shiny::tags$li("The greater the range of the RGB values, the more saturated"),
)
),
shiny::h3("Hints"),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show the RGB profile with added saturation guide</summary>",
"The 'S' column has been added to help you see the range of RGB values.",
shiny::verbatimTextOutput("hex_graph_s"),
"</details></p>"
)
),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show RGB charts for each saturation level</summary>",
"Which of these RGB ranges best matches that of your shortened hex code? To keep things simple, we'll only look at three intensities (plus grey, which has zero range).",
shiny::verbatimTextOutput("hex_guide_s"),
"</details></p>"
)
),
"Go to David's", shiny::a(href = "https://speakerdeck.com/desandro/read-color-hex-codes?slide=51", "relevant slide")
),
# tab 5 ----
shiny::tabPanel(
title = "5. Lightness",
shiny::h3("Task"),
shiny::p("Select the lightness value that has the closest mean RGB value to your shortened hex code."),
shiny::h3("Explanation"),
shiny::tags$div(
shiny::tags$ul(
shiny::tags$li("Lightness is as it sounds: how light or dark is the colour?"),
shiny::tags$li("We can assess this by looking at the average of the RGB values"),
shiny::tags$li("The higher the value, the lighter the colour"),
)
),
shiny::h3("Hints"),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show the RGB chart with added lightness guide</summary>",
"The 'L' column has been added to help you see the average of the RGB values.",
shiny::verbatimTextOutput("hex_graph_l"),
"</details></p>"
)
),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show RGB charts for each lightness level</summary>",
"Which of these has the most similar average RGB value to your shortened hex code's average?",
shiny::verbatimTextOutput("hex_guide_l"),
"</details></p>"
)
),
"Go to David's", shiny::a(href = "https://speakerdeck.com/desandro/read-color-hex-codes?slide=47", "relevant slide")
),
# tab 6 ----
shiny::tabPanel(
title = "6. Solve",
shiny::h3("Task"),
shiny::p("Put the hue, saturation and lightness levels together to get the rough colour name."),
shiny::h3("Hints"),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show RGB charts for best matches</summary>",
shiny::verbatimTextOutput("hex_solve_graphs"),
"</details></p>"
)
),
shiny::HTML(
paste(
"<p><details><summary style='color:red'>Show the answer</summary>",
shiny::tags$span(shiny::textOutput("hex_solve"), style = "font-size:50px;"),
shiny::plotOutput("hex_swatch", width = "100%", height = 100),
"</details></p>"
)
),
"Go to David's ", shiny::a(href = "https://speakerdeck.com/desandro/read-color-hex-codes?slide=62", "relevant slide")
) # tabPanel
) # tabsetPanel
) # mainPanel
) # sidebarLayout
) # fluidPage
server <- function(input, output) {
# React
v <- shiny::reactiveValues(
hex_long = NULL
)
shiny::observeEvent(input$action, {
v$hex_random <- dehex::dh_random()
})
# Hex codes
output$hex_long <- shiny::renderText({
v$hex_random
})
error_message <- "Click 'Generate'"
output$hex_short <- shiny::renderText({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_shorten(v$hex_random)
})
# HSL guides
output$hex_guide_h <- shiny::renderPrint({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_guide("H", crayon = FALSE)
})
output$hex_guide_s <- shiny::renderPrint({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_guide("S", crayon = FALSE)
})
output$hex_guide_l <- shiny::renderPrint({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_guide("L", crayon = FALSE)
})
# Graphs
output$hex_graph_simple <- shiny::renderPrint({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_graph(
dehex::dh_shorten(v$hex_random),
adorn_h = FALSE,
adorn_s = FALSE,
adorn_l = FALSE,
crayon = FALSE
)
})
output$hex_graph_h <- shiny::renderPrint({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_graph(
dehex::dh_shorten(v$hex_random),
adorn_s = FALSE,
adorn_l = FALSE,
crayon = FALSE
)
})
output$hex_graph_s <- shiny::renderPrint({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_graph(
dehex::dh_shorten(v$hex_random),
adorn_h = FALSE,
adorn_l = FALSE,
crayon = FALSE
)
})
output$hex_graph_l <- shiny::renderPrint({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_graph(
dehex::dh_shorten(v$hex_random),
adorn_h = FALSE,
adorn_s = FALSE,
crayon = FALSE
)
})
output$hex_graph <- shiny::renderPrint({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_graph(
dehex::dh_shorten(v$hex_random),
crayon = FALSE
)
})
# Solution
output$hex_solve <- shiny::renderText({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_solve(v$hex_random)
})
output$hex_solve_graphs <- shiny::renderPrint({
shiny::validate(shiny::need(v$hex_random, error_message))
invisible(dehex::dh_solve(v$hex_random, graphs = TRUE, crayon = FALSE))
})
# Colour sample
output$hex_swatch <- shiny::renderPlot({
shiny::validate(shiny::need(v$hex_random, error_message))
dehex::dh_swatch(dehex::dh_shorten(v$hex_random))
}, width = 320, height = 100)
}
shiny::shinyApp(ui, server)
}