Slider za barvo

resources/public/css/style.css

@@ -1,2 +1,19 @@
 /* some style */
+input[type=range] {
+    margin: 1rem;
+    width: 80%;
+    -webkit-appearance: none !important;
+    height: 20px;
+    border-radius: 8px;
+    background: -webkit-gradient(linear,center top, center bottom, from(#CFDCDD),to(#DFE9EA),color-stop(50%,#DFE9EA));
+    -webkit-transition: background 450ms;
+    transition: background 450ms;
+}
 
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    background:#108A93;
+    height:30px;
+    width:30px;
+    border-radius: 15px;
+}

src/sliva/data.cljs

@@ -12,9 +12,9 @@
    :rotacija-kamere 0.5
    :bg-barva 0x000000
    ;;:FOV 140
-   :FOV 65
+   :FOV 90
-   :lik-sirina 2
+   :lik-sirina 0.5
-   :obj-limit 1000
+   :obj-limit 10000
    :objekti []
    :stevec 0
    :rotacija-x 0.006
@@ -25,8 +25,8 @@
    :center-z 0
    ;;:zamik-barve 0.0000666
    :zamik-barve 0.000000006
-   ;;:zacetna-barva 0.333
+   :zacetna-barva 0.333
-   :zacetna-barva 0.01
+   ;;:zacetna-barva 0.01
    :saturacija 1
    :svetlost 0.4
    :w-diff 0.5

src/sliva/gfx.cljs

@@ -1,5 +1,5 @@
 (ns sliva.gfx
-  (:require [sliva.data :refer [appstate]]))
+  (:require [sliva.data :refer [appstate initial-vizual-params]]))
 
 (defn get-param [param]
   (get-in @appstate [:vizual param]))
@@ -125,14 +125,25 @@
   (.removeChild container (.-firstChild container)))
 
 (defn spin-objects [[cas a b g]]
+  (let [divizija 10000]
+    (set-param :rotacija-x (/ a divizija))
+    (set-param :rotacija-y (/ b divizija))
+    (set-param :rotacija-z (/ g divizija))))
   ;;(update-param :rotacija-x (fn [old] (+ old (/ a 100000))))
   ;;(update-param :rotacija-y (fn [old] (+ old (/ b 100000))))
   ;;(update-param :rotacija-z (fn [old] (+ old (/ g 100000)))))
-  (set-param :rotacija-x (/ a 10000))
-  (set-param :rotacija-y (/ b 10000))
-  (set-param :rotacija-z (/ g 10000)))
 
 (defn displace-objects [[cas x y z]]
   (update-param :center-x (fn [old] (+ old (/ x 25))))
   (update-param :center-y (fn [old] (+ old (/ y 25))))
   (update-param :center-z (fn [old] (+ old (/ z 25)))))
+
+(defn vizual-reset []
+  (console.log "stari obj" (get-param :objekti))
+  (->> (get-param :objekti)
+       (run! (fn [obj] (.remove scena obj))))
+  (swap! appstate update-in [:vizual] (fn [old] (merge old initial-vizual-params))))
+
+(defn vizual-update [[param val]]
+  (console.log "apdejt vizual?" param val)
+  (set-param (keyword param) val))

src/sliva/pages/gibanica.cljs

@@ -2,7 +2,8 @@
   (:require [reagent.core :as reagent]
             [sliva.data :refer [appstate]]
             [sliva.pages.navigation :refer [navigation]]
-            [sliva.socket :refer [send-message]]))
+            [sliva.socket :refer [send-message]]
+            [sliva.gfx :refer [get-param]]))
 
 (defn motion-track [event]
   (let [pospesek (.-acceleration event)
@@ -61,13 +62,20 @@
     (fn []
       [:div
        [:h3 "gibaj me!"]
+       ;; [:div
+       ;;  [:h4 "Rotacija"]
+       ;;  [:div "Alfa:" (:a @rotation)]
+       ;;  [:div "Beta:" (:b @rotation)]
+       ;;  [:div "Gama:" (:g @rotation)]]
        [:div
-        [:h4 "Rotacija"]
+        "Barva"
-        [:div "Alfa:" (:a @rotation)]
+        [:input {:type "range"
-        [:div "Beta:" (:b @rotation)]
+                 :min 0.01
-        [:div "Gama:" (:g @rotation)]]
+                 :max 0.333
-       [:input {:type "range"
+                 :step 0.001
-                :min 0
+                 :value (get-param :zacetna-barva)
-                :max 50}]
+                 :on-change (fn [event]
+                             (send-message "vizual-update" "zacetna-barva" (aget event "target" "value")))}]]
+       [:button {:on-click #(send-message "vizual-reset")} "Resetiraj"]
        [navigation]])}))
 

src/sliva/server/handlers.clj

@@ -29,13 +29,14 @@
           (send-all "open" [cid])
           (go-loop []
             (let [{:keys [message]} (<! ws-ch)]
-              ;;(println "GOT MSG!" message)
               (let [[cmd & args] (str/split message #":")]
                 ;;(println "command" cmd args)
                 (condp = cmd
                   "ping" (>! ws-ch "pong")
                   "motion" (send-all "displace" args)
                   "rotation" (send-all "spin" args)
+                  "vizual-reset" (send-all "vizual-reset" [])
+                  "vizual-update" (send-all "vizual-update" args)
                   (println "DEBUG: msg ignored: " cmd)))
               (recur))))))))
 ;;(close! ws-ch)))))

src/sliva/socket.cljs

@@ -3,7 +3,7 @@
             [clojure.string :as str]
             [cljs.core.async :refer [<! >! put! close!]]
             [sliva.data :refer [appstate]]
-            [sliva.gfx :refer [spin-objects displace-objects]])
+            [sliva.gfx :refer [spin-objects displace-objects vizual-reset vizual-update]])
   (:require-macros [cljs.core.async.macros :refer [go go-loop]]))
 
 (defn handle-message [msg-str]
@@ -14,6 +14,8 @@
       "open" (swap! appstate assoc :clients (conj (:clients @appstate) (first args)))
       "spin" (spin-objects args)
       "displace" (displace-objects args)
+      "vizual-reset" (vizual-reset)
+      "vizual-update" (vizual-update args)
       (console.info "msg ingored: " msg))))
 
 (defn send-message [& message]