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
|
||||
|
||||
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