Clojurescript interface.
This commit is contained in:
parent
2e9d328e73
commit
3fd100daf1
|
|
@ -0,0 +1,15 @@
|
||||||
|
{:deps {org.clojure/clojure {:mvn/version "1.10.0"}
|
||||||
|
org.clojure/clojurescript {:mvn/version "1.10.520"}
|
||||||
|
|
||||||
|
reagent {:mvn/version "0.8.1"}
|
||||||
|
reagent-utils {:mvn/version "0.3.3"}
|
||||||
|
cljs-ajax {:mvn/version "0.8.0"}
|
||||||
|
pez/clerk {:mvn/version "1.0.0"}
|
||||||
|
metosin/reitit {:mvn/version "0.3.1"}
|
||||||
|
venantius/accountant {:mvn/version "0.2.4"}
|
||||||
|
|
||||||
|
devcards {:mvn/version "0.2.6"}
|
||||||
|
com.bhauman/figwheel-main {:mvn/version "0.2.1-SNAPSHOT"}
|
||||||
|
cider/piggieback {:mvn/version "0.4.0"}
|
||||||
|
com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}}
|
||||||
|
:paths ["resources" "src"]}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
^{:extra-main-files {:devcards {:main cards.core}}}
|
||||||
|
{:output-to "resources/public/cljs-out/dev-main.js"
|
||||||
|
:optimizations :none
|
||||||
|
:pretty-print true
|
||||||
|
:source-map true
|
||||||
|
:devcards true
|
||||||
|
:main DEMOAPP.core}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
:target-dir "resources"
|
||||||
|
:watch-dirs ["src"]
|
||||||
|
:css-dirs ["resources/public/css"]
|
||||||
|
}
|
||||||
11
readme.org
11
readme.org
|
|
@ -8,3 +8,14 @@ pip install esptool
|
||||||
esptool -p /dev/ttyUSB0
|
esptool -p /dev/ttyUSB0
|
||||||
|
|
||||||
make sure to set the spiffs size in the arduino before uploading to allocate space for files
|
make sure to set the spiffs size in the arduino before uploading to allocate space for files
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Build with defaults shows default figwheel dev page
|
||||||
|
clojure -m figwheel.main
|
||||||
|
|
||||||
|
# build with our custom figwheel-main options
|
||||||
|
clojure -m figwheel.main --build dev --repl
|
||||||
|
|
||||||
|
http://localhost:9500/
|
||||||
|
http://localhost:9500/figwheel-extra-main/devcards
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html style="height:100%;">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link href="/css/main.css" rel="stylesheet" type="text/css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
|
||||||
|
</head>
|
||||||
|
<body style="height:100%;">
|
||||||
|
<div id="app" style="height:100%;">Loading</div>
|
||||||
|
<script src="cljs-out/dev-main.js" type="text/javascript"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
(ns DEMOAPP.core
|
||||||
|
(:require [accountant.core :as accountant]
|
||||||
|
[ajax.core :refer [GET]]
|
||||||
|
[clojure.spec.alpha :as s]
|
||||||
|
[reagent.core :as reagent :refer [atom]]
|
||||||
|
[reagent.session :as session]
|
||||||
|
[reitit.frontend :as reitit]))
|
||||||
|
|
||||||
|
(enable-console-print!)
|
||||||
|
(defonce form-data (atom {:device-id "" :wifi-ssid "" :wifi-key ""}))
|
||||||
|
|
||||||
|
(def device-id-regex #"[A-Za-z0-9]{4}")
|
||||||
|
(def ssid-regex #"^[!#;].|[+\[\]\"\t\s].*$")
|
||||||
|
(s/def ::wifi-ssid-type (s/and string? #(re-matches ssid-regex %)))
|
||||||
|
(s/def ::device-id-type (s/and string? #(re-matches device-id-regex %)))
|
||||||
|
(s/def ::wifi-key-type string?)
|
||||||
|
|
||||||
|
; page routes
|
||||||
|
(def router
|
||||||
|
(reitit/router
|
||||||
|
[["/" :index]
|
||||||
|
["/404" :about]]))
|
||||||
|
|
||||||
|
; link builder
|
||||||
|
(defn path-for [route & [params]]
|
||||||
|
(if params
|
||||||
|
(:path (reitit/match-by-name router route params))
|
||||||
|
(:path (reitit/match-by-name router route))))
|
||||||
|
|
||||||
|
; simple input form
|
||||||
|
(defn config-form []
|
||||||
|
[:article.black-80.db.tc.black.ba.w-100.bg-light-green.br2
|
||||||
|
[:form.ma3 {:action "sign-up_submit" :method "get" :accept-charset "utf-8"}
|
||||||
|
[:fieldset#sign_up.ba.b--transparent.ph0.mh0
|
||||||
|
[:legend.ph0.mh0.fw6 "Device Setup"]
|
||||||
|
|
||||||
|
[:div.mt3.dim
|
||||||
|
[:label.db.fw4.lh-copy.f6 {:for "device-id"} "Device Unique ID"]
|
||||||
|
[:input#wifi-ssid.pa2.input-reset.ba.bg-near-white.w-100.measure.b--silver
|
||||||
|
{:type "text" :name "device-id" :placeholder "AAAA" :autofocus "true"
|
||||||
|
:on-change #(swap! form-data assoc :device-id (-> % .-target .-value))
|
||||||
|
:value (:device-id @form-data)}]
|
||||||
|
[:p (if (and (not-empty (:device-id @form-data))
|
||||||
|
(s/explain-data
|
||||||
|
::device-id-type
|
||||||
|
(:device-id @form-data)))
|
||||||
|
"Invalid identifier, should be alphanumeric and 4 characters long.")]]
|
||||||
|
|
||||||
|
[:div.mt3.dim
|
||||||
|
[:label.db.fw4.lh-copy.f6 {:for "wifi-ssid"} "WIFI SSID"]
|
||||||
|
[:input#wifi-ssid.pa2.input-reset.ba.bg-near-white.w-100.measure.b--silver
|
||||||
|
{:type "text" :name "wifi-ssid" :placeholder ""
|
||||||
|
:on-change #(swap! form-data assoc :wifi-ssid (-> % .-target .-value))
|
||||||
|
:value (:wifi-ssid @form-data)}]
|
||||||
|
[:p (if (and (not-empty (:device-id @form-data))
|
||||||
|
(s/explain-data
|
||||||
|
::device-id-type
|
||||||
|
(:device-id @form-data)))
|
||||||
|
"Invalid SSID, should be no more than 32 characters and must not start with !, #, or ;.")]]
|
||||||
|
|
||||||
|
[:div.mt3.dim
|
||||||
|
[:label.db.fw4.lh-copy.f6 {:for "wifi-password"} "WIFI Password"]
|
||||||
|
[:input#password.pa2.input-reset.ba.bg-near-white.w-100.measure.b--silver
|
||||||
|
{:type "password" :name "wifi-password"
|
||||||
|
:on-change #(swap! form-data assoc :wifi-key (-> % .-target .-value))
|
||||||
|
:value (:wifi-key @form-data)}]
|
||||||
|
[:p (if (and (not-empty (:wifi-key @form-data))
|
||||||
|
(s/explain-data
|
||||||
|
::wifi-ssid-type
|
||||||
|
(:wifi-key @form-data)))
|
||||||
|
"No password set.")]]]
|
||||||
|
[:div.mt3
|
||||||
|
[:input.b.ph3.pv2.input-reset.ba.b--black.bg-transparent.grow.pointer.f6.br2
|
||||||
|
{:type "submit" :value "Save"}]]]])
|
||||||
|
|
||||||
|
(defn home-page []
|
||||||
|
[:div.w-25
|
||||||
|
[:img {:src "logo.png"}]
|
||||||
|
(config-form)])
|
||||||
|
|
||||||
|
(defn success-page []
|
||||||
|
[:div
|
||||||
|
[:div [:h1.m-4 "Settings saved"]
|
||||||
|
[:p "Device will reboot in a few seconds and connect to your wifi."]]])
|
||||||
|
|
||||||
|
(defn about-page []
|
||||||
|
[:div
|
||||||
|
[:div [:h1.m-4 "About Page"]
|
||||||
|
[:p "Sample app, demoing using ajax calls and reagent to render the page with some simple route from reitit, basically enought to get you started on your clojurescript journey."]
|
||||||
|
|
||||||
|
[:a.navbar-item {:href (path-for :index)} "Home Page"]]])
|
||||||
|
|
||||||
|
(defn page-for [route]
|
||||||
|
"Map your route keys to pages here"
|
||||||
|
(case route
|
||||||
|
:index #'home-page
|
||||||
|
:about #'about-page))
|
||||||
|
|
||||||
|
; default page wrapper
|
||||||
|
(defn current-page []
|
||||||
|
(fn []
|
||||||
|
(let [page (:current-page (session/get :route))]
|
||||||
|
[:div.bg-green.flex.justify-center.items-center.h-100 [page]])))
|
||||||
|
|
||||||
|
(defn startup []
|
||||||
|
(accountant/configure-navigation!
|
||||||
|
{:nav-handler
|
||||||
|
(fn [path]
|
||||||
|
(let [match (reitit/match-by-path router path)
|
||||||
|
current-page (:name (:data match))
|
||||||
|
route-params (:path-params match)]
|
||||||
|
(session/put! :route {:current-page (page-for current-page)
|
||||||
|
:route-params route-params})))
|
||||||
|
|
||||||
|
:path-exists?
|
||||||
|
(fn [path]
|
||||||
|
(boolean (reitit/match-by-path router path)))})
|
||||||
|
(accountant/dispatch-current!)
|
||||||
|
|
||||||
|
(reagent/render [current-page] (.getElementById js/document "app")))
|
||||||
|
|
||||||
|
(startup)
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
(ns cards.core
|
||||||
|
(:require
|
||||||
|
[devcards.core]
|
||||||
|
[DEMOAPP.core]))
|
||||||
|
(devcards.core/start-devcard-ui!)
|
||||||
Loading…
Reference in New Issue