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 0000000..f588a6a Binary files /dev/null and b/resources/public/fonts/mplus-1m-regular-webfont.woff differ diff --git a/resources/public/fonts/mplus-1m-regular-webfont.woff2 b/resources/public/fonts/mplus-1m-regular-webfont.woff2 new file mode 100644 index 0000000..24fa3b4 Binary files /dev/null and b/resources/public/fonts/mplus-1m-regular-webfont.woff2 differ 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