add some funky styling
- ID
966d6bb- date
2022-05-05 06:52:09+00:00- author
Alex Chan <alex@alexwlchan.net>- parent
6f08e32- message
add some funky styling- changed files
3 files, 51 additions, 17 deletions
Changed files
webapp/server.py (2943) → webapp/server.py (3223)
diff --git a/webapp/server.py b/webapp/server.py
index 9534703..ec900b7 100755
--- a/webapp/server.py
+++ b/webapp/server.py
@@ -24,18 +24,36 @@ def index():
return render_template("index.html", version=VERSION)
-@app.template_filter("foreground_colour")
-def foreground_colour(hex_string):
- red = int(hex_string[1:3], 16)
- green = int(hex_string[3:5], 16)
- blue = int(hex_string[5:7], 16)
+@app.template_filter("usable_colours")
+def usable_colours(colours):
+ result = []
- ratio = contrast.rgb((red / 255, green / 255, blue / 255), (0, 0, 0))
+ for hex_string in colours:
+ r = red(hex_string)
+ g = green(hex_string)
+ b = blue(hex_string)
- if contrast.passes_AA(ratio):
- return "#000000"
- else:
- return "#FFFFFF"
+ ratio = contrast.rgb((r / 255, g / 255, b / 255), (1, 1, 1))
+
+ if contrast.passes_AA(ratio):
+ result.append(hex_string)
+
+ return result
+
+
+@app.template_filter("red")
+def red(hex_string):
+ return int(hex_string[1:3], 16)
+
+
+@app.template_filter("green")
+def green(hex_string):
+ return int(hex_string[3:5], 16)
+
+
+@app.template_filter("blue")
+def blue(hex_string):
+ return int(hex_string[5:7], 16)
@app.route("/palette", methods=["GET", "POST"])
@@ -58,17 +76,18 @@ def get_palette():
# when running dominant_colours.
tmp_file.flush()
- proc = subprocess.Popen([
- 'dominant_colours', tmp_file.name, '--no-palette', '--max-colours=5'
- ],stdout=subprocess.PIPE,
- stderr=subprocess.PIPE)
+ proc = subprocess.Popen(
+ ["dominant_colours", tmp_file.name, "--no-palette", "--max-colours=5"],
+ stdout=subprocess.PIPE,
+ stderr=subprocess.PIPE,
+ )
stdout, stderr = proc.communicate()
return_code = proc.poll()
if return_code != 0:
stderr = stderr.decode(sys.stdin.encoding)
- flash(f'Something went wrong:<br/>{stderr}')
- return redirect('/')
+ flash(f"Something went wrong:<br/>{stderr}")
+ return redirect("/")
stdout = stdout.decode(sys.stdin.encoding)
colours = stdout.strip().split("\n")
webapp/templates/base.html (1004) → webapp/templates/base.html (1003)
diff --git a/webapp/templates/base.html b/webapp/templates/base.html
index 437a678..9824cc8 100644
--- a/webapp/templates/base.html
+++ b/webapp/templates/base.html
@@ -12,7 +12,6 @@
<main>
<h2>find the dominant colours in an image</h2>
-
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="errors">
webapp/templates/palette.html (416) → webapp/templates/palette.html (844)
diff --git a/webapp/templates/palette.html b/webapp/templates/palette.html
index 85ec9dc..b3d4d8a 100644
--- a/webapp/templates/palette.html
+++ b/webapp/templates/palette.html
@@ -11,5 +11,21 @@
{% endfor %}
</div>
+ {#
+ Style the links based on one of the tint colours from this image.
+ #}
+ {% if colours | usable_colours | length > 0 %}
+ {% set tint_colour = colours | usable_colours | random %}
+ <style>
+ a, a:visited {
+ color: {{ tint_colour }};
+ }
+
+ a:hover {
+ background: rgba({{ tint_colour | red }}, {{ tint_colour | green }}, {{ tint_colour | blue }}, 0.3);
+ }
+ </style>
+ {% endif %}
+
<p><a href="/">try another image</a></p>
{% endblock %}