-
-
-
Welcome to ireadit
-
If you're seeing this message, that means you haven't yet compiled your ClojureScript!
-
Please run lein figwheel to start the ClojureScript compiler and reload the page.
-
For better ClojureScript development experience in Chrome follow these steps:
-
- - Open DevTools
-
- Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1 > General > Console)
-
- Check-in "Enable custom formatters"
-
- Close DevTools
-
- Open DevTools
-
-
See ClojureScript documentation for further details.
-
+
+ I Read It is loading
+
+
+
{% style "/assets/bootstrap/css/bootstrap.min.css" %}
{% style "/assets/font-awesome/css/all.css" %}
{% style "/css/screen.css" %}
+ {% style "/css/spinner.css" %}
{% script "/assets/jquery/jquery.min.js" %}
{% script "/assets/font-awesome/js/all.js" %}
diff --git a/resources/public/css/spinner.css b/resources/public/css/spinner.css
new file mode 100644
index 0000000..74c0586
--- /dev/null
+++ b/resources/public/css/spinner.css
@@ -0,0 +1,141 @@
+/*
+ * Cribbed from http://tobiasahlin.com/spinkit/
+ * (source here https://github.com/tobiasahlin/SpinKit)
+ * Thanks Tobias!
+ */
+
+.sk-fading-circle {
+ margin: 100px auto;
+ width: 40px;
+ height: 40px;
+ position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+ content: '';
+ display: block;
+ margin: 0 auto;
+ width: 15%;
+ height: 15%;
+ background-color: gray;
+ border-radius: 100%;
+ -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+ animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+ -webkit-transform: rotate(30deg);
+ -ms-transform: rotate(30deg);
+ transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+ -webkit-transform: rotate(60deg);
+ -ms-transform: rotate(60deg);
+ transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+ -webkit-transform: rotate(120deg);
+ -ms-transform: rotate(120deg);
+ transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+ -webkit-transform: rotate(150deg);
+ -ms-transform: rotate(150deg);
+ transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+ -webkit-transform: rotate(210deg);
+ -ms-transform: rotate(210deg);
+ transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+ -webkit-transform: rotate(240deg);
+ -ms-transform: rotate(240deg);
+ transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+ -webkit-transform: rotate(270deg);
+ -ms-transform: rotate(270deg);
+ transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+ -webkit-transform: rotate(300deg);
+ -ms-transform: rotate(300deg);
+ transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+ -webkit-transform: rotate(330deg);
+ -ms-transform: rotate(330deg);
+ transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+ -webkit-animation-delay: -1.1s;
+ animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+ -webkit-animation-delay: -1s;
+ animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+ -webkit-animation-delay: -0.9s;
+ animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+ -webkit-animation-delay: -0.8s;
+ animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+ -webkit-animation-delay: -0.7s;
+ animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+ -webkit-animation-delay: -0.6s;
+ animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+ -webkit-animation-delay: -0.5s;
+ animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+ -webkit-animation-delay: -0.4s;
+ animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+ -webkit-animation-delay: -0.3s;
+ animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+ -webkit-animation-delay: -0.2s;
+ animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+ -webkit-animation-delay: -0.1s;
+ animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+ 0%, 39%, 100% { opacity: 0; }
+ 40% { opacity: 1; }
+}
+
+@keyframes sk-circleFadeDelay {
+ 0%, 39%, 100% { opacity: 0; }
+ 40% { opacity: 1; }
+}
diff --git a/src/clj/ireadit/routes/services.clj b/src/clj/ireadit/routes/services.clj
index 40b2e86..e8cbd5c 100644
--- a/src/clj/ireadit/routes/services.clj
+++ b/src/clj/ireadit/routes/services.clj
@@ -19,4 +19,4 @@
(POST "/ocr/:uri" []
:return String
:path-params [uri :- String]
- (ocr (url-decode uri))))))
+ {:i-read (ocr (url-decode uri))}))))
diff --git a/src/cljs/ireadit/core.cljs b/src/cljs/ireadit/core.cljs
index e2e6513..3b94378 100644
--- a/src/cljs/ireadit/core.cljs
+++ b/src/cljs/ireadit/core.cljs
@@ -34,9 +34,8 @@
[b/NavbarToggler {:on-click #(swap! expanded? not)}]
[b/Collapse {:is-open @expanded? :navbar true}
[b/Nav {:class-name "mr-auto" :navbar true}
- [nav-link "#/" "Home" :home]
- [nav-link "#/about" "About" :about]
- [nav-link "#/transcribe" "Transcribe" :transcribe]]]]))
+ [nav-link "#/" "Transcribe" :transcribe]
+ [nav-link "#/about" "About" :about]]]]))
(defn about-page []
[:div.container
@@ -67,7 +66,7 @@
(secretary/set-config! :prefix "#")
(secretary/defroute "/" []
- (rf/dispatch [:navigate :home]))
+ (rf/dispatch [:navigate :transcribe]))
(secretary/defroute "/about" []
(rf/dispatch [:navigate :about]))
diff --git a/src/cljs/ireadit/views/form.cljs b/src/cljs/ireadit/views/form.cljs
index a622a3c..0399e21 100644
--- a/src/cljs/ireadit/views/form.cljs
+++ b/src/cljs/ireadit/views/form.cljs
@@ -13,9 +13,8 @@
(defn form-page []
- [:div
- [:h1 "Transcribe the text of an image"]
[:div.container {:id "main-container"}
+ [:h1 "Transcribe the text of an image"]
[:div
[:p.widget
[b/Label {:for "image-url" :title "URL of the image you wish to transcribe"}"Image URL"]
@@ -24,6 +23,5 @@
[:p.widget
[b/Label {:for "send"} "To transcribe the image"]
[b/Button {:id "send" :on-click #(rf/dispatch [:fetch-transcription])} "Transcribe!"]]]
- [:div.transcription @(rf/subscribe [:transcription])]
- ]])
+ [:div.transcription @(rf/subscribe [:transcription])]])