WiFi Connect UI
This is a replacement web user interface for the Resin WiFi Connect service.
The Resin UI is bare-bones and intended to be replaced with a product-specific version. This UI provides a nicely designed interface that you can easily add to your project. It comes with a standard theme but you can easily customise the colours and text.
Installing on a device
To install on the device we recommend using out installation script.
If you want to do it manually, just copy all the files from
build into the
directory specified by the
--ui-path command line argument of
Customising the theme
To customise the colours of the theme, edit the file
config.json in the
build directory. This file is loaded by the browser when it connects to the
config.json has two sections:
There are 4 main colours used throughout the app. Don't change the names of the colours, but do change the values if you want to customise the app. We've used hsl colours but any valid CSS colour value will work.
|primary||Used as a background colour and for primary buttons|
|primaryAlternate||Slightly lighter shade used for primary hover|
|secondary||Must be legible when used as text on the primary and tertiary colour|
|secondaryAlternate||Slightly lighter shade for hover effects|
|tertiary||Used as a contrast to the primary colour|
|tertiaryAlternate||Lighter shade for hover effects|
|accent||Contrasting colour used against the primary|
This is all the text in the app. Change it here to update what the people using
your app will read. In some places you'll see the special pattern
Those special markers get replaced with real data in the app.
If you want to add new features to the app, then you need to edit the source
src and make a new build.
If you just want to change the text, colours or logo then you don't need to do this, see "Customisating the theme" above.
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # test the production build locally npm run serve
For detailed explanation on how things work, checkout the CLI Readme.
You only need to read this if you're a member of the Radiodan team and want to make a new release.
We use release-it to manage releases.
- You must be able to
git pushto this repository
- You must export an environment variable called
WIFI_CONNECT_GITHUB_TOKENwith a GitHub Access Token
Releasing a release
npm run release will:
- Create a new version tag and push to GitHub
- Do a build
- Upload a
builddir to GitHub Releases