From 5ae05ca42a01b327806e05d7d38981c77c09ed96 Mon Sep 17 00:00:00 2001 From: heyarne Date: Mon, 4 May 2020 22:25:09 +0200 Subject: [PATCH] Add some minimal styling --- deps.edn | 2 +- resources/public/fonts/M+ Fonts License.txt | 16 ++++ .../fonts/mplus-1m-regular-webfont.woff | Bin 0 -> 11424 bytes .../fonts/mplus-1m-regular-webfont.woff2 | Bin 0 -> 8876 bytes resources/public/style.css | 73 +++++++++++++++++- src/heyarne/all_my_friends/core.cljs | 3 +- src/heyarne/all_my_friends/views.cljs | 7 +- 7 files changed, 92 insertions(+), 9 deletions(-) create mode 100644 resources/public/fonts/M+ Fonts License.txt create mode 100644 resources/public/fonts/mplus-1m-regular-webfont.woff create mode 100644 resources/public/fonts/mplus-1m-regular-webfont.woff2 diff --git a/deps.edn b/deps.edn index 5298d68..74a8a72 100644 --- a/deps.edn +++ b/deps.edn @@ -1,4 +1,4 @@ -{:paths ["src" "resources"] +{:paths ["src" "resources"] :extra-paths ["resources"] :deps {environ {:mvn/version "1.1.0"} http-kit {:mvn/version "2.3.0"} diff --git a/resources/public/fonts/M+ Fonts License.txt b/resources/public/fonts/M+ Fonts License.txt new file mode 100644 index 0000000..379b9cc --- /dev/null +++ b/resources/public/fonts/M+ Fonts License.txt @@ -0,0 +1,16 @@ +M+ FONTS Copyright (C) 2002-2008 M+ FONTS PROJECT + +- + +LICENSE_E + + + + +These fonts are free softwares. +Unlimited permission is granted to use, copy, and distribute it, with +or without modification, either commercially and noncommercially. +THESE FONTS ARE PROVIDED "AS IS" WITHOUT WARRANTY. + + +http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/ \ No newline at end of file diff --git a/resources/public/fonts/mplus-1m-regular-webfont.woff b/resources/public/fonts/mplus-1m-regular-webfont.woff new file mode 100644 index 0000000000000000000000000000000000000000..f588a6afc970335af39517513ffb64f0b08533ec GIT binary patch literal 11424 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 literal 0 HcmV?d00001 diff --git a/resources/public/style.css b/resources/public/style.css index 6ffed1d..abba1be 100644 --- a/resources/public/style.css +++ b/resources/public/style.css @@ -1,3 +1,10 @@ +@font-face { + font-family: 'mplus-1m'; + font-weight: normal; + src: url('fonts/mplus-1m-regular-webfont.woff2') format('woff2'), + url('fonts/mplus-1m-regular-webfont.woff') format('woff'); +} + *, *::before, *::after { @@ -12,8 +19,60 @@ body { } body { - color: #222; - line-height: 1.2 + font-family: 'mplus-1m', monospace; + line-height: 1.5; + font-size: 18px; + color: #444; +} + +h1 { + font-size: 18px; + color: hsl(240, 100%, 70%); + display: inline-block; + border-bottom: 2px solid currentcolor; + margin: 0 +} + +p { + margin: 18px 0; +} + +p:first-of-type { + margin-top: 24px; +} + +p:last-of-type { + margin-bottom: 24px +} + +button { + background: hsl(240, 100%, 70%); + border-radius: 4px; + border: none; + padding: 4px 8px; + color: #fff; + line-height: 24px; + font-family: inherit; + font-size: inherit; +} + +button:hover { + transform: translateY(-1px); + cursor: pointer +} + +input { + border: none; + border-bottom: 2px solid hsl(240, 100%, 70%); + color: hsl(240, 100%, 70%); + background: none; + font-family: inherit; + font-size: inherit; + height: 30px; + line-height: 24px; + margin-right: 8px; + width: 120px; + text-align: center; } #welcome-message { @@ -46,6 +105,13 @@ body { text-align: center; } +.capture-container { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 28px; +} + canvas#result { /* needs position: absolute so it's rendered above the video */ position: absolute; @@ -59,5 +125,6 @@ video#capture { canvas#result, video#capture { - transform: scale(-1, 1) + transform: scale(-1, 1); + border-radius: 4px; } diff --git a/src/heyarne/all_my_friends/core.cljs b/src/heyarne/all_my_friends/core.cljs index 7383111..9248da5 100644 --- a/src/heyarne/all_my_friends/core.cljs +++ b/src/heyarne/all_my_friends/core.cljs @@ -3,12 +3,13 @@ [reagent.dom :as dom] [heyarne.all-my-friends.views :as views])) + (defn draw-results [ctx _video predictions] ;; remove previous results (.clearRect ctx 0 0 (.. ctx -canvas -width) (.. ctx -canvas -height)) ;; draw and append new results - (set! (.-strokeStyle ctx) "pink") + (set! (.-strokeStyle ctx) "white") (doseq [prediction predictions [x y _] (j/get prediction :scaledMesh)] (doto ctx diff --git a/src/heyarne/all_my_friends/views.cljs b/src/heyarne/all_my_friends/views.cljs index 8dd3a66..1f001eb 100644 --- a/src/heyarne/all_my_friends/views.cljs +++ b/src/heyarne/all_my_friends/views.cljs @@ -1,6 +1,5 @@ (ns heyarne.all-my-friends.views (:require [reagent.core :as r] - [reagent.dom :as dom] [heyarne.all-my-friends.facemesh :refer [webcam-facemesh]])) ;; minimalistic re-frame-like event handling @@ -26,8 +25,8 @@ [:p "Ich möchte dir kurz erklären, was dich hier erwartet: Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen Kontakt weitgehend zu verzichten. Ein Großteil der Zeit, die ich mit euch verbringe, hat sich ins Digitale verlagert."] [:p "Das fühlt sich sicher bald komplett normal an -- vorher möchte ich aber gerne irgendwas mit dem komischen Gefühl machen, das das hinterlässt."] - [:p "Ich würde mich freuen, wenn du mir dabei hilfst. Folge dazu einfach den Anweisungen. Das Ergebnis wird hoffentlich eine schöne Sammlung von Webcambildern und 3D-Modellen eurer Köpfe" [:sup "1"] "."] - [:button {:on-click #(dispatch [:welcome/continue])} "Weiter"]]) + [:p "Ich würde mich freuen, wenn du mir dabei hilfst. Folge dazu einfach den Anweisungen. Das Ergebnis wird hoffentlich eine schöne Sammlung von Webcambildern und 3D-Modellen eurer Köpfe."] + [:button {:on-click #(dispatch [:welcome/continue])} "Cool cool, weiter bitte"]]) (defn video-snapshot [video-elem] (let [canvas (js/document.createElement "canvas") @@ -43,7 +42,7 @@ Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen :predictions nil})] (fn [{:keys [on-faces-detected halt?]}] [:div.container - [:p "Tippe auf den Button um mir das untere Bild zu schicken."] + [:p "Tippe auf den Button um ein Bild zu machen."] [webcam-facemesh {:on-faces-detected (fn [ctx video predictions] (swap! result assoc :video video