mirror of
https://github.com/HASwitchPlate/openHASP.git
synced 2025-07-14 23:06:35 +00:00
Add docs
This commit is contained in:
fvanroie
parent
e5e118575d
commit
4a6f19c5d0
0
docs/.nojekyll
Normal file
0
docs/.nojekyll
Normal file
152
docs/01-hardware.md
Normal file
152
docs/01-hardware.md
Normal file
@ -0,0 +1,152 @@
|
||||
Hasp-lvgl supports the ESP32, ESP8266 and STM32F4 families of microcontrollers.
|
||||
It needs a compatible micro-controller with drivers supporting the attached display, touch controller, storage and network.
|
||||
|
||||
Below is a list of recommended development boards and a TFT touchscreen to get you up-and-running in no time.
|
||||
|
||||
## Recommended Boards
|
||||
|
||||
<style>
|
||||
table th:first-of-type {
|
||||
width: 12%;
|
||||
}
|
||||
table th:nth-of-type(2) {
|
||||
width: 22%;
|
||||
}
|
||||
table th:nth-of-type(3) {
|
||||
width: 22%;
|
||||
}
|
||||
table th:nth-of-type(4) {
|
||||
width: 22%;
|
||||
}
|
||||
table th:last-of-type {
|
||||
width: 22%;
|
||||
}
|
||||
</style>
|
||||
| | Basic | Standard | Pro | Experimental |
|
||||
|:-----------|:-----------:|:------------:|:------------:|:------------:|
|
||||
| MCU | ESP8266 | ESP32-WROOM | ESP32-WROVER | STM32F4 |
|
||||
| CPU Freq. | 80Mhz | 240Mhz | 240Mhz | 168 MHz |
|
||||
| Ram | 80Kb | 520Kb | 520Kb | 192Kb |
|
||||
| PSRam | no | no | yes | no |
|
||||
| Minimal Flash | 4MB | 4MB | 4MB | 512Kb |
|
||||
| Display | ILI9341 SPI | ILI9341 SPI | ILI9341 SPI | ILI9341 FSMC |
|
||||
| Touch | XPT2046 SPI | XPT2046 SPI | XPT2046 SPI | XPT2046 SPI |
|
||||
| Network | Wifi | Wifi | Wifi | Ethernet / Wifi |
|
||||
| Dev. Board*|[D1 mini ESP8266][3]|[D1 mini ESP32][4]|[TTGO T7 v1.4 Mini32][5]| STM32F407VET/ZGT Black |
|
||||
| Firmware | [Download][1] | [Download][1] | [Download][1] | |
|
||||
|
||||
[1]: ./installation.md
|
||||
[3]: https://www.aliexpress.com/item/32643142716.html
|
||||
[4]: https://www.aliexpress.com/item/32815530502.html
|
||||
[5]: https://www.aliexpress.com/item/32977375539.html
|
||||
|
||||
!> \* *Due to the large number of possible hardware options a selection of 3 popular ESP development boards has been made for the precompiled binaries.*
|
||||
|
||||
> **Note:**</br>Advanced users can build and compile custom configurations using PlatformIO, however this is not currently supported.
|
||||
|
||||
|
||||
## Recommended Display
|
||||
#### Lolin TFT 2.4"
|
||||
|
||||
ILI9341 SPI touchscreens with backlight dimming via PWM are quite cheap to get.
|
||||
An ILI9341 TFT display with SPI is required when using a pre-built binary.
|
||||
The touchcontroller needs to be the XPT2046 Resistive Touch driver.
|
||||
|
||||
The Lolin TFT 2.4" is **plug-and-play** with the 3 recommended ESP development boards.
|
||||
If you have another ESP or MCU, you can still use this display using jumper cables.
|
||||
You can also solder a row of headers at the bottom of the display to plug it into a breadboard.
|
||||
Therefor the Lolin TFT 2.4 Touch Shield is used as the development display of choice.
|
||||
|
||||
##### Backlight Control
|
||||
|
||||
To use PWM dimming on the Lolin TFT 2.4" you must solder the TFT-LED pin to either D1, D2 or D4.
|
||||
**D1 is recommended** for backlight control and configured by default.
|
||||
|
||||
|
||||
|
||||
**Warning** Do *not* use D3 for backlight control because it is already in use for touch!
|
||||
{: .notice--warning}
|
||||
|
||||
**Note** It is also *not* recommended to use D4 for backlight control because it is already in use for PSram on the ESP32-Wrover.
|
||||
{: .notice--info}
|
||||
|
||||
##### Compatible ESP boards
|
||||
|
||||
The Lolin TFT 2.4" header is **plug-and-play** compatible with these development boards,
|
||||
no need to use any jumper cables:
|
||||
|
||||
**ESP32:**
|
||||
- Wemos D1 Mini ESP32 *(**only** solder the inner row of the pinheaders)*
|
||||
- TTGO T7 V1.4 MINI32 ESP32 *(**only** solder the inner row of the pinheaders)*
|
||||
- LOLIN D32 Pro V2.0.0 *using an **additional** TFT cable*
|
||||
|
||||
**ESP8266:**
|
||||
- Wemos D1 Mini ESP8266
|
||||
- Lolin D1 Mini Pro ESP8266 V2.0.0
|
||||
|
||||
> **Note:**</br>If you have a Lolin TFT 2.4" Display and a compatible ESP development board, you have all the hardware that is needed.
|
||||
> In that case you can skip ahead to the [Firmware Installation](./installation.md).
|
||||
|
||||
## Alternative SPI Display
|
||||
|
||||
Any common ILI9341 320x240 4-wire SPI touchscreen with XPT2046 Resistive Touch driver can be used, like:
|
||||
- 2.4" SKU: MSP2402
|
||||
- 2.8" SKU: MSP2807
|
||||
- 3.2" SKU: MSP3218
|
||||
|
||||
You will need to connect the GPIO pins using jumper wires.
|
||||
|
||||
## Experimental MCUs
|
||||
|
||||
#### STM32F407xxT Black Combo
|
||||
|
||||
There are several cheap STM32F407xx Black boards available on the market with a TFT display header
|
||||
and accompanying 3.2" ILI9341 FSMC screen (320x240). This hardware is experimental and not fully supported.
|
||||
|
||||
<figure class="third">
|
||||
<a href="assets//images/boards/STM32F407VGT6_diymore-1.jpg"><img src="assets//images/boards/STM32F407VGT6_diymore-1.jpg"></a>
|
||||
<a href="assets//images/boards/STM32F407VGT6_STM32F4XX_M-1.jpg"><img src="assets//images/boards/STM32F407VGT6_STM32F4XX_M-1.jpg"></a>
|
||||
<a href="assets//images/boards/STM32F407VET6_STM32_F4VE_V2.0-1.jpg"><img src="assets//images/boards/STM32F407VET6_STM32_F4VE_V2.0-1.jpg"></a>
|
||||
<a href="assets//images/boards/STM32F407ZET6-STM32F4XX-1.jpg"><img src="assets//images/boards/STM32F407ZET6-STM32F4XX-1.jpg"></a>
|
||||
<a href="assets//images/boards/STM32F407ZGT6_Euse_M4_DEMO_Large-1.jpg"><img src="assets//images/boards/STM32F407ZGT6_Euse_M4_DEMO_Large-1.jpg"></a>
|
||||
<a href="assets//images/boards/STM32F407VET6_Euse_M4_DEMO_Medium-1.jpg"><img src="assets//images/boards/STM32F407VET6_Euse_M4_DEMO_Medium-1.jpg"></a>
|
||||
<figcaption>Selection of STM32F407 boards.</figcaption>
|
||||
</figure>
|
||||
|
||||
**Warning** Make sure to purchase a compatible screen, preferably from the same vendor.
|
||||
There are multiple FSMC interfaces: e.g. One is marked `TFT`, another is marked `New-TFT` and
|
||||
a third has no markings.
|
||||
The pinout of each header & display is different and are **not** interchangable!
|
||||
<br>You can however use jumper cables instead, but it won't be plug-and-plug anymore.
|
||||
{: .notice--warning}
|
||||
|
||||
The following boards are being tested:
|
||||
|
||||
- STM32F407VET6 Black (v2.1) with 512 KB flash
|
||||
<figure class="third">
|
||||
<a href="assets//images/boards/STM32F407VET6_STM32_F4VE_V2.0-1.jpg"><img src="assets//images/boards/STM32F407VET6_STM32_F4VE_V2.0-1.jpg"></a>
|
||||
<a href="assets//images/boards/STM32F407VET6_STM32_F4VE_V2.0-2.jpg"><img src="assets//images/boards/STM32F407VET6_STM32_F4VE_V2.0-2.jpg"></a>
|
||||
<a href="assets//images/boards/STM32F407VET6_STM32_F4VE_V2.0-3.jpg"><img src="assets//images/boards/STM32F407VET6_STM32_F4VE_V2.0-3.jpg"></a>
|
||||
<figcaption>STM32F407VET6 Black (v2.0 and v2.1)</figcaption>
|
||||
</figure>
|
||||
- Purchase Link:
|
||||
[AliExpress](https://www.aliexpress.com/item/32618222721.html)
|
||||
[AliExpress](https://www.aliexpress.com/item/33013274704.html)
|
||||
[AliExpress](https://www.aliexpress.com/item/1000006481553.html) (! V2.0 !)
|
||||
- Documentation can be found on [GitHub](https://github.com/mcauser/BLACK_F407VE)
|
||||
|
||||
- STM32F407ZGT6 Black (V3.0) with 1 MB flash
|
||||
<figure class="third">
|
||||
<a href="assets//images/boards/STM32F407ZET6-STM32F4XX-1.jpg"><img src="assets//images/boards/STM32F407ZET6-STM32F4XX-1.jpg"></a>
|
||||
<a href="assets//images/boards/STM32F407ZET6-STM32F4XX-2.jpg"><img src="assets//images/boards/STM32F407ZET6-STM32F4XX-2.jpg"></a>
|
||||
<a href="assets//images/boards/STM32F407ZET6-STM32F4XX-3.jpg"><img src="assets//images/boards/STM32F407ZET6-STM32F4XX-3.jpg"></a>
|
||||
<figcaption>STM32F407ZGT6 Black (v3.0)</figcaption>
|
||||
</figure>
|
||||
- Purchase Link:
|
||||
- Documentation can be found on [GitHub](https://github.com/mcauser/BLACK_F407ZG)
|
||||
|
||||
|
||||
**Info** The STM32F4 boards do not have network connectivity. You can use a compatible network adapter and configure it in PlatformIO.
|
||||
{: .notice--info}
|
||||
|
||||
<sub>Images of STM32 boards are [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/) from https://stm32-base.org/</sub>
|
||||
100
docs/01-quick-start-guide.md
Normal file
100
docs/01-quick-start-guide.md
Normal file
@ -0,0 +1,100 @@
|
||||
---
|
||||
title: "Quick-Start Guide"
|
||||
permalink: /projects/hasp-lvgl/quick-start-guide/
|
||||
excerpt: "How to quickly install and setup Minimal Mistakes for use with GitHub Pages."
|
||||
last_modified_at: 2020-04-27
|
||||
redirect_from:
|
||||
- /theme-setup/
|
||||
toc: true
|
||||
---
|
||||
|
||||
Minimal Mistakes has been developed as a [Gem-based theme](http://jekyllrb.com/docs/themes/) for easier use, and 100% compatible with GitHub Pages when used as a remote theme.
|
||||
|
||||
**If you enjoy this software, please consider [supporting me](https://www.paypal.me/netwize) for developing and maintaining it.**
|
||||
|
||||
[](https://www.paypal.me/mmistakes)
|
||||
|
||||
## Installing the theme
|
||||
|
||||
If you're running Jekyll v3.5+ and self-hosting you can quickly install the theme as a Ruby gem.
|
||||
|
||||
[^structure]: See [**Structure** page]({{ "/docs/structure/" | relative_url }}) for a list of theme files and what they do.
|
||||
|
||||
**ProTip:** Be sure to remove `/docs` and `/test` if you forked Minimal Mistakes. These folders contain documentation and test pages for the theme and you probably don't want them littering up your repo.
|
||||
{: .notice--info}
|
||||
|
||||
**Note:** The theme uses the [jekyll-include-cache](https://github.com/benbalter/jekyll-include-cache) plugin which will need to be installed in your `Gemfile` and added to the `plugins` array of `_config.yml`. Otherwise you'll throw `Unknown tag 'include_cached'` errors at build.
|
||||
{: .notice--warning}
|
||||
|
||||
|
||||
|
||||
### Firmware
|
||||
|
||||
Remote themes are similar to Gem-based themes, but do not require `Gemfile` changes or whitelisting making them ideal for sites hosted with GitHub Pages.
|
||||
|
||||
To install as a remote theme:
|
||||
|
||||
1. Create/replace the contents of your `Gemfile` with the following:
|
||||
|
||||
```ruby
|
||||
source "https://rubygems.org"
|
||||
|
||||
gem "github-pages", group: :jekyll_plugins
|
||||
```
|
||||
|
||||
2. Add `jekyll-include-cache` to the `plugins` array of your `_config.yml`.
|
||||
|
||||
3. Fetch and update bundled gems by running the following [Bundler](http://bundler.io/) command:
|
||||
|
||||
```bash
|
||||
bundle
|
||||
```
|
||||
|
||||
4. Add `remote_theme: "mmistakes/minimal-mistakes@4.19.2"` to your `_config.yml` file. Remove any other `theme:` or `remote_theme:` entry.
|
||||
|
||||
You may also optionally specify a branch, [tag](https://github.com/mmistakes/minimal-mistakes/tags), or commit to use by appending an @ and the Git ref (e.g., `mmistakes/minimal-mistakes@4.9.0` or `mmistakes/minimal-mistakes@bbf3cbc5fd64a3e1885f3f99eb90ba92af84063d`). This is useful when rolling back to older versions of the theme. If you don't specify a Git ref, the latest on `master` will be used.
|
||||
|
||||
**Looking for an example?** Use the [Minimal Mistakes remote theme starter](https://github.com/mmistakes/mm-github-pages-starter/generate) for the quickest method of getting a GitHub Pages hosted site up and running. Generate a new repository from the starter, replace sample content with your own, and configure as needed.
|
||||
{: .notice--info}
|
||||
|
||||
---
|
||||
|
||||
**Note:** Your Jekyll site should be viewable immediately at <http://USERNAME.github.io>. If it's not, you can force a rebuild by **Customizing Your Site** (see below for more details).
|
||||
{: .notice--warning}
|
||||
|
||||
If you're hosting several Jekyll based sites under the same GitHub username you will have to use Project Pages instead of User Pages. Essentially you rename the repo to something other than **USERNAME.github.io** and create a `gh-pages` branch off of `master`. For more details on how to set things up check [GitHub's documentation](https://help.github.com/articles/user-organization-and-project-pages/).
|
||||
|
||||
<figure>
|
||||
<img src="{{ '/assets/images/mm-gh-pages.gif' | relative_url }}" alt="creating a new branch on GitHub">
|
||||
</figure>
|
||||
|
||||
You can also install the theme by copying all of the theme files[^structure] into your project.
|
||||
|
||||
To do so fork the [Minimal Mistakes theme](https://github.com/mmistakes/minimal-mistakes/fork), then rename the repo to **USERNAME.github.io** --- replacing **USERNAME** with your GitHub username.
|
||||
|
||||
<figure>
|
||||
<img src="{{ '/assets/images/mm-theme-fork-repo.png' | relative_url }}" alt="fork Minimal Mistakes">
|
||||
</figure>
|
||||
|
||||
**GitHub Pages Alternatives:** Looking to host your site for free and install/update the theme painlessly? [Netlify][netlify-jekyll], [GitLab Pages][gitlab-jekyll], and [Continuous Integration (CI) services][ci-jekyll] have you covered. In most cases all you need to do is connect your repository to them, create a simple configuration file, and install the theme following the [Ruby Gem Method](#ruby-gem-method) above.
|
||||
{: .notice--info}
|
||||
|
||||
[netlify-jekyll]: https://www.netlify.com/blog/2015/10/28/a-step-by-step-guide-jekyll-3.0-on-netlify/
|
||||
[gitlab-jekyll]: https://about.gitlab.com/2016/04/07/gitlab-pages-setup/
|
||||
[ci-jekyll]: https://jekyllrb.com/docs/continuous-integration/
|
||||
|
||||
### Minimal Configuration
|
||||
|
||||
You need to setup network connectivity to your network and connect to an MQTT broker service.
|
||||
|
||||
## Home Automation
|
||||
|
||||
There are some examples available to help you integrate HASP into your Home Automation setup:
|
||||
- Home Assistant
|
||||
- OpenHAB
|
||||
- Node-RED
|
||||
- Tasmota Slave
|
||||
|
||||
**ProTip:** The source code and content files for this site can be found in the [`/docs` folder](https://github.com/mmistakes/minimal-mistakes/tree/master/docs) if you want to copy or learn from them.
|
||||
{: .notice--info}
|
||||
|
||||
82
docs/02-installation.md
Normal file
82
docs/02-installation.md
Normal file
@ -0,0 +1,82 @@
|
||||
## Download the firmware
|
||||
|
||||
Go to the releases page on Github to download the latest hasp-lvgl binaries.
|
||||
|
||||
[<i class="fas fa-download"></i> Hasp-lvgl Releases](https://github.com/fvanroie/hasp-lvgl/releases){: .btn .btn--info}
|
||||
|
||||
There are currently 2 download options, pick the one appropriate for your hardware:
|
||||
- hasp-lvgl-0.2.0-esp32_ili9341_spi.bin
|
||||
- hasp-lvgl-0.2.0-esp8266_ili9341_spi.bin + boot files
|
||||
|
||||
> If no precompiled firmware file is available for your board you can configure, compile and upload the firmware yourself using PlatformIO.
|
||||
{: .notice--info}
|
||||
|
||||
|
||||
## Install the firmware
|
||||
|
||||
### Flash ESP32
|
||||
|
||||
When flashing the ESP32 for the first time, you need to install a bootloader, partitionscheme and application loader:
|
||||
```shell
|
||||
esptool.py --port "COM1" erase_flash
|
||||
esptool.py --port "COM1" write_flash 0x1000 bootloader_dio_40m.bin --flash_mode dio --flash_freq 40m
|
||||
esptool.py --port "COM1" write_flash 0x8000 partitions.bin
|
||||
esptool.py --port "COM1" write_flash 0xe000 boot_app0.bin
|
||||
```
|
||||
|
||||
Change `COM1` to the correct port on your computer.
|
||||
|
||||
then flash the actual firmware:
|
||||
|
||||
```shell
|
||||
esptool.py -p "COM1" --baud 921600 write_flash 0x10000 d1-mini-esp32_ili9341_<version>.bin
|
||||
```
|
||||
|
||||
or all previous steps in one long commandline:
|
||||
|
||||
```shell
|
||||
esptool.py -p "COM1" --baud 921600 --before default_reset --after hard_reset write_flash --flash_mode dio --flash_freq 40m --flash_size detect 0x1000 bootloader_dio_40m.bin 0x8000 partitions.bin 0xe000 boot_app0.bin 0x10000 d1-mini-esp32_ili9341_<version>.bin
|
||||
```
|
||||
|
||||
### Flash ESP8266
|
||||
|
||||
Unlike the ESP32, for ESP8266 you only need one single `.bin` file:
|
||||
|
||||
#### Using Tasmotizer (Windows)
|
||||
|
||||
#### Using esp-tool.py
|
||||
|
||||
```shell
|
||||
esptool.py -p "COM1" write_flash --flash_mode qio --flash_size 4m 0x0 d1-mini-esp8266_ili9341_<version>.bin
|
||||
```
|
||||
|
||||
Change `COM1` to the correct port on your computer and `4m` to the correct size of the internal flash chip.
|
||||
|
||||
----------------------------------------------------------------------------------
|
||||
|
||||
### STM32F407 devEbox
|
||||
|
||||
**Note** There is no precompiled firmware file available for STM32F4 boards. You will need to configure, compile and upload the firmware yourself using PlatformIO.
|
||||
{: .notice--info}
|
||||
|
||||
#### Using Serial
|
||||
|
||||
- Connect your serial TTL adapter RX and TX pins to PA9 and PA10 of the devEbox.
|
||||
- Place the boot jumpers into programming mode
|
||||
- Reset the board.
|
||||
- Upload the firmware using:
|
||||
|
||||
#### Using DFU (USB)
|
||||
|
||||
- Connect your serial TTL adapter RX and TX pins to PA9 and PA10 of the devEbox.
|
||||
- Place the boot jumpers into programming mode
|
||||
- Reset the board.
|
||||
- Upload the firmware using:
|
||||
|
||||
#### Using ST Link (USB)
|
||||
|
||||
- Install ST Link software
|
||||
- Connect the devEbox using the USB port
|
||||
- Launch ST Link
|
||||
- Select the hasp-lvgl-0.2.0-stm32f407_devEbox_3.2_ili9341_fsmc.bin file
|
||||
- Flash the firmware to the board
|
||||
42
docs/03-wifi-setup.md
Normal file
42
docs/03-wifi-setup.md
Normal file
@ -0,0 +1,42 @@
|
||||
At first boot, when no wifi setup is found, the device will create an initial Access Point for configuring the device.
|
||||
If the touchscreen is properly connected it will display a QR code, along with a temporary SSID and password, to connect to the device.
|
||||
|
||||
<figure class="third">
|
||||
<a href="assets//images/hasp/oobe_setup.png"><img src="assets//images/hasp/oobe_setup.png"></a>
|
||||
<a href="assets//images/hasp/touch_calibration.png"><img src="assets//images/hasp/touch_calibration.png"></a>
|
||||
<a href="assets//images/hasp/wifi_setup.png"><img src="assets//images/hasp/wifi_setup.png"></a>
|
||||
</figure>
|
||||
|
||||
Either use the touchscreen interface or connect via a webbrowser to setup the credentials for your local wifi access point:
|
||||
|
||||
## Using Touchscreen
|
||||
|
||||
1. Tap on the screen to start a Touch Calibration sequence:
|
||||
2. Precisely touch the 4 courners as indicated
|
||||
3. Use the on-screen keyboard to enter your local SSID and password
|
||||
- Tap on the Checkmark button in the lower righthand corner to save the settings
|
||||
|
||||
The device will validate the entered credentials and reboot if they are correct.
|
||||
|
||||
## Using WiFi Access-Point
|
||||
|
||||
Connect to the temporary Access Point by scanning the QR on the display, if available.
|
||||
Or Check the serial log for the SSID and password to connect.
|
||||
|
||||
- Browse to http://192.168.4.1
|
||||
- Enter your local SSID and password for joining the device to your wireless network
|
||||
- Click Save Settings
|
||||
- The device will automatically reboot and connect to your wireless LAN
|
||||
|
||||
## Using Command line
|
||||
|
||||
You can also directly configure the wifi settings via the serial console:
|
||||
|
||||
```bash
|
||||
ssid myAccessPointName
|
||||
pass myWifiPassword
|
||||
reboot
|
||||
```
|
||||
|
||||
> **Note:**</br>To skip this step, wifi credentials can be saved into the .bin file when you compile the firmware yourself.
|
||||
|
||||
150
docs/05-commands.md
Normal file
150
docs/05-commands.md
Normal file
@ -0,0 +1,150 @@
|
||||
Commands are not related to an object, but can get or set global properties or invoke system commands on the device.
|
||||
|
||||
Commands can be issued via the Serial Commandline, Telnet Commandline or MQTT.
|
||||
For MQTT, use the `hasp/<platename>/command` topic with payload `<keyword> <parameter(s)>`
|
||||
|
||||
Here is a list of all the recaognized command keywords:
|
||||
|
||||
## Pages
|
||||
|
||||
`page` [0-11]
|
||||
|
||||
Switches the display to show the objects from a diferent page.
|
||||
|
||||
`clearpage` [0-11,254]
|
||||
|
||||
Deletes all objects on a given page. If no page number is specified, it clears the current page.
|
||||
|
||||
To delete individual objects, you can issue the `p[x].b[y].delete` command.
|
||||
|
||||
## Backlight
|
||||
|
||||
`dim` [0-100] (alias: `brightness`)
|
||||
|
||||
Sets the level of the backlight from 0 to 100%, where 0% is off and 100% is full brightness.
|
||||
|
||||
Example: `dim 50` sets the display to half the brightness.
|
||||
|
||||
Tip: this can be used in conjunction with the idle event e.g. to dim the backlight after a short period of inactivity.
|
||||
|
||||
`light`
|
||||
|
||||
Switches the backlight on or off, independent of the set dim level.
|
||||
Turning the backlight on will restore the brightness to the previous dim level.
|
||||
|
||||
Example: `light on` acepted values: on/off, true/false, 0/1, yes/no
|
||||
|
||||
Tip: this can be used in conjunction with the idle event, e.g. to turn the backlight off after a long period of inactivity.
|
||||
|
||||
Note: The `dim`and `light` command depends on a GPIO pin to be connected to control the the TFT_LED backlight via a transistor.
|
||||
|
||||
`wakeup`
|
||||
|
||||
Clears the idle state of the device and publishes an `state/idle = OFF` status message. It resets the idle counter as if a touch event occured on the devide. This is helpfull e.g. when you want to wake up the display when an external event has occured, like a PIR motion sensor.
|
||||
|
||||
## System commands
|
||||
|
||||
`calibrate`
|
||||
|
||||
Start on-screen touch calibration.
|
||||
|
||||
Note: You need to issue a soft reboot command to save the new calibration settings. If you do a hard reset of the device, the calibration settings will be lost.
|
||||
|
||||
`screenshot`
|
||||
|
||||
Saves a picture of the current screen to the flash filesystem. You can retrieve it via http://>ip-address</screenshot.bmp
|
||||
This can be handy for bug reporting or documentation.
|
||||
|
||||
The previous screenshot is overwritten.
|
||||
|
||||
`statusupdate`
|
||||
|
||||
Reports the status of the MCU. The response will be posted to the state topic:
|
||||
```json
|
||||
"statusupdate": {
|
||||
"status": "available",
|
||||
"espVersion": "0.0.6",
|
||||
"espUptime": 124,
|
||||
"signalStrength": -72,
|
||||
"haspIP": "10.1.0.148",
|
||||
"heapFree": 5912,
|
||||
"heapFragmentation": 7,
|
||||
"espCore": "2_6_3"
|
||||
}
|
||||
```
|
||||
|
||||
`reboot` (alias: `restart`)
|
||||
|
||||
Saves any changes in the configuration file and reboots the device.
|
||||
|
||||
`factoryreset`
|
||||
|
||||
Clear the filesystem and eeprom and reboot the device in its initial state.
|
||||
|
||||
Warning: There is no confirmation prompt nor undo function!
|
||||
|
||||
## Configuration Settings
|
||||
|
||||
### Wifi
|
||||
|
||||
`ssid`
|
||||
|
||||
Sets network name of the access point to connect to.
|
||||
|
||||
`pass`
|
||||
|
||||
Sets the optional password for the access point to connect to.
|
||||
|
||||
### MQTT
|
||||
|
||||
`hostname`
|
||||
|
||||
Sets the hostname of the device and mqtt topic for the node to `hasp/<hostname>/`
|
||||
|
||||
`mqtthost`
|
||||
|
||||
Sets the hostname of the mqtt broker.
|
||||
|
||||
`mqttport`
|
||||
|
||||
Sets the port of the mqtt broker.
|
||||
|
||||
`mqttuser`
|
||||
|
||||
Sets the optional username for the mqtt broker.
|
||||
|
||||
`mqttpass`
|
||||
|
||||
Sets the optional password for the mqtt broker.
|
||||
|
||||
### Config/xxx
|
||||
|
||||
You can get or set the configuration of a hasp-lvgl submodule in json format.
|
||||
To get the configuration, the command `config/>submodule<`.
|
||||
The result will be published to `hasp/plate35/state/config`. Passwords will be omited from the result.
|
||||
|
||||
```
|
||||
config/wifi
|
||||
config/mqtt
|
||||
config/http
|
||||
config/mdns
|
||||
config/hasp
|
||||
config/gui
|
||||
config/debug
|
||||
```
|
||||
|
||||
To update the configuration simple issue the same command `config/>submodule<` with updated json payload.
|
||||
|
||||
## Multiple Commands
|
||||
|
||||
`json`
|
||||
|
||||
When you want to execute multiple commands in one payload, you can use the json command to create an array of commands.
|
||||
|
||||
Each command is an element in this array of strings:
|
||||
|
||||
```json
|
||||
["page 5","dim 50","light on","statusupdate"]
|
||||
```
|
||||
|
||||
The commands are interpreted and processed sequentially.
|
||||
1067
docs/05-configuration.md
Normal file
1067
docs/05-configuration.md
Normal file
File diff suppressed because it is too large
Load Diff
17
docs/06-faq.md
Normal file
17
docs/06-faq.md
Normal file
@ -0,0 +1,17 @@
|
||||
|
||||
#### Q: HASP Settings
|
||||
|
||||
A:
|
||||
|
||||
#### Q: Is there a file browser built-in?
|
||||
|
||||
*A:* There is no native file browser included yet, as this currently is low on the priority list.
|
||||
|
||||
However, you can upload the `edit.htm.gz` (3kB) file to the SPIFFS partition from the ESP32 FSBrowser repository.
|
||||
Download it from: https://github.com/espressif/arduino-esp32/blob/master/libraries/WebServer/examples/FSBrowser/data/edit.htm.gz
|
||||
|
||||
When the `edit.htm.gz` file is present on Spiffs you will see an additional File Browser button on the Main Webpage:
|
||||
|
||||
|
||||
Using that webpage, you can right-click and delete files:
|
||||
|
||||
20
docs/06-overriding-theme-defaults.md
Normal file
20
docs/06-overriding-theme-defaults.md
Normal file
@ -0,0 +1,20 @@
|
||||
When installing the theme as a Ruby Gem its layouts, includes, stylesheets, and other assets are all bundled in the `gem`. Meaning they're not easily visible in your project.
|
||||
|
||||
Each of these files can be modified, but you'll need to copy the default version into your project first. For example, if you wanted to modify the default [`single` layout](https://github.com/mmistakes/minimal-mistakes/blob/master/_layouts/single.html), you'd start by copying it to `_layouts/single.html`.
|
||||
|
||||
**ProTip**: To locate theme files, run `bundle info minimal-mistakes-jekyll`. Then copy the files you want to override from the returned path, to the appropriate folder in your project.
|
||||
{: .notice--info}
|
||||
|
||||
Jekyll will use the files in your project first before falling back to the default versions of the theme. It exhibits this behavior with files in the following folders:
|
||||
|
||||
```
|
||||
/assets
|
||||
/_layouts
|
||||
/_includes
|
||||
/_sass
|
||||
```
|
||||
|
||||
Additionally, from `v4.5.0` the theme-gem will also exhibit above behavior for `/_data` via a plugin.
|
||||
Consequently, the data files for UI Text and Navigation are also bundled within the theme-gem.
|
||||
|
||||
For more information on customizing the theme's [stylesheets]({{ "/docs/stylesheets/" | relative_url }}) and [JavaScript]({{ "/docs/javascript/" | relative_url }}), see the appropriate pages.
|
||||
65
docs/07-navigation.md
Normal file
65
docs/07-navigation.md
Normal file
@ -0,0 +1,65 @@
|
||||
Customize site navigational links through a Jekyll data file.
|
||||
|
||||
## Masthead
|
||||
|
||||
The masthead links use a "priority plus" design pattern. Meaning, show as many navigation items that will fit horizontally with a toggle to reveal the rest.
|
||||
|
||||
To define these links add titles and URLs under the `main` key in `_data/navigation.yml`:
|
||||
|
||||
```yaml
|
||||
main:
|
||||
- title: "Quick-Start Guide"
|
||||
url: /projects/hasp-lvgl/quick-start-guide/
|
||||
- title: "Posts"
|
||||
url: /year-archive/
|
||||
- title: "Categories"
|
||||
url: /categories/
|
||||
- title: "Tags"
|
||||
url: /tags/
|
||||
- title: "Pages"
|
||||
url: /page-archive/
|
||||
- title: "Collections"
|
||||
url: /collection-archive/
|
||||
- title: "External Link"
|
||||
url: https://google.com
|
||||
```
|
||||
|
||||
Which will give you a responsive masthead similar to this:
|
||||
|
||||
![priority plus masthead animation]({{ "/assets/images/mm-priority-plus-masthead.gif" | relative_url }})
|
||||
|
||||
Optionally, you can add a `description` key per title in the `main` key. This `description` will show up like a tooltip, when the user hovers over the link on a desktop browser.
|
||||
|
||||
**ProTip:** Put the most important links first so they're always visible and not hidden behind the **menu toggle**.
|
||||
{: .notice--info}
|
||||
|
||||
## Breadcrumbs (beta)
|
||||
|
||||
Enable breadcrumb links to help visitors better navigate deep sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results:
|
||||
|
||||
1. Use a category based permalink structure e.g. `permalink: /:categories/:title/`
|
||||
2. Manually create pages for each category or use a plugin like [jekyll-archives](https://github.com/jekyll/jekyll-archives) to auto-generate them. If these pages don't exist breadcrumb links to them will be broken.
|
||||
|
||||
![breadcrumb navigation example]({{ "/assets/images/mm-breadcrumbs-example.jpg" | relative_url }})
|
||||
|
||||
```yaml
|
||||
breadcrumbs: true # disabled by default
|
||||
```
|
||||
|
||||
Breadcrumb start link text and separator character can both be changed in `_data/ui-text.yml`.
|
||||
|
||||
```yaml
|
||||
breadcrumb_home_label : "Home"
|
||||
breadcrumb_separator : "/"
|
||||
```
|
||||
|
||||
For breadcrumbs that resemble something like `Start > Blog > My Awesome Post` you'd apply these settings:
|
||||
|
||||
```yaml
|
||||
breadcrumb_home_label : "Start"
|
||||
breadcrumb_separator : ">"
|
||||
```
|
||||
|
||||
## Custom sidebar navigation menu
|
||||
|
||||
See the [**sidebars** documentation]({{ "/projects/hasp-lvgl/layouts/#custom-sidebar-navigation-menu" | relative_url }}) for information on setting up a custom navigation menu.
|
||||
43
docs/08-ui-text.md
Normal file
43
docs/08-ui-text.md
Normal file
@ -0,0 +1,43 @@
|
||||
Text for UI elements, `_layouts`, and `_includes` grouped together as a set of translation keys. This is by no means a full-on i18n solution, but it does help make customizing theme text a bit easier.
|
||||
|
||||
The English[^yaml-anchors] main keys in [`_data/ui-text.yml`](https://github.com/mmistakes/minimal-mistakes/blob/master/_data/ui-text.yml) are translated in the following languages:
|
||||
|
||||
- Brazilian Portuguese (Português brasileiro)
|
||||
- Catalan
|
||||
- Chinese
|
||||
- Danish
|
||||
- Dutch
|
||||
- Finnish
|
||||
- French (Français)
|
||||
- German (Deutsch)
|
||||
- Greek
|
||||
- Hungarian
|
||||
- Indonesian
|
||||
- Irish (Gaeilge)
|
||||
- Italian (Italiano)
|
||||
- Korean
|
||||
- Japanese
|
||||
- Malayalam
|
||||
- Myanmar (Burmese)
|
||||
- Nepali (Nepalese)
|
||||
- Polish
|
||||
- Persian (فارسی)
|
||||
- Romanian
|
||||
- Russian
|
||||
- Slovak
|
||||
- Spanish (Español)
|
||||
- Swedish
|
||||
- Thai
|
||||
- Turkish (Türkçe)
|
||||
- Vietnamese
|
||||
|
||||
If you're are interested in localizing them into other languages feel free to submit a pull request and I will be happy to look it over.
|
||||
|
||||
[^yaml-anchors]: `en-US`, and `en-GB` use [YAML anchors](http://www.yaml.org/spec/1.2/spec.html#id2785586) to reference the values in `en` as to not repeat them.
|
||||
|
||||
Many of the label based keys like `meta_label`, `categories_label`, `tags_label`, `share_on_label`, and `follow_label` can be left blank if you'd like to omit them from view. It really depends on you and if you want an even more minimal look to your site.
|
||||
|
||||
![UI text labels]({{ "/assets/images/mm-ui-text-labels.jpg" | relative_url }})
|
||||
|
||||
**Note:** The theme comes with localized text in English (`en`, `en-US`, `en-GB`). If you change `locale` in `_config.yml` to something else, most of the UI text will go blank. Be sure to add the corresponding locale key and translated text to `_data/ui-text.yml` to avoid this.
|
||||
{: .notice--warning}
|
||||
44
docs/09-authors.md
Normal file
44
docs/09-authors.md
Normal file
@ -0,0 +1,44 @@
|
||||
Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/).
|
||||
|
||||
To assign an author to a post or page that is different from the site author specified in `_config.yml`:
|
||||
|
||||
**Step 1.** Create `_data/authors.yml` and add authors using the following format. Any variables found under `author:` in `_config.yml` can be used (e.g. `name`, `bio`, `avatar`, author `links`, etc.).
|
||||
|
||||
```yaml
|
||||
# /_data/authors.yml
|
||||
|
||||
Billy Rick:
|
||||
name : "Billy Rick"
|
||||
bio : "What do you want, jewels? I am a very extravagant man."
|
||||
avatar : "/assets/images/bio-photo-2.jpg"
|
||||
links:
|
||||
- label: "Email"
|
||||
icon: "fas fa-fw fa-envelope-square"
|
||||
url: "mailto:billyrick@rick.com"
|
||||
- label: "Website"
|
||||
icon: "fas fa-fw fa-link"
|
||||
url: "https://thewhip.com"
|
||||
- label: "Twitter"
|
||||
icon: "fab fa-fw fa-twitter-square"
|
||||
url: "https://twitter.com/extravagantman"
|
||||
|
||||
Cornelius Fiddlebone:
|
||||
name : "Cornelius Fiddlebone"
|
||||
bio : "I ordered what?"
|
||||
avatar : "/assets/images/bio-photo.jpg"
|
||||
links:
|
||||
- label: "Email"
|
||||
icon: "fas fa-fw fa-envelope-square"
|
||||
url: "mailto:cornelius@thewhip.com"
|
||||
- label: "Twitter"
|
||||
icon: "fab fa-fw fa-twitter-square"
|
||||
url: "https://twitter.com/rhymeswithsackit"
|
||||
```
|
||||
|
||||
**Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with.
|
||||
|
||||
Example: To assign `Billy Rick` as an author for a post the following YAML Front Matter would be applied:
|
||||
|
||||
```yaml
|
||||
author: Billy Rick
|
||||
```
|
||||
734
docs/10-layouts.md
Normal file
734
docs/10-layouts.md
Normal file
@ -0,0 +1,734 @@
|
||||
The bread and butter of any theme. Below you'll find the layouts included with Minimal Mistakes, what they look like and the type of content they've been built for.
|
||||
|
||||
## Default layout
|
||||
|
||||
The base layout all other layouts inherit from. There's not much to this layout apart from pulling in several `_includes`:
|
||||
|
||||
* `<head>` elements
|
||||
* masthead navigation links
|
||||
* {% raw %}`{{ content }}`{% endraw %}
|
||||
* page footer
|
||||
* scripts
|
||||
|
||||
**Note:** You won't ever assign this layout directly to a post or page. Instead all other layouts will build off of it by setting `layout: default` in their YAML Front Matter.
|
||||
{: .notice--warning}
|
||||
|
||||
### Layout based and user-defined classes
|
||||
|
||||
Class names corresponding to each layout are automatically added to the `<body>` element eg. `<body class="layout--single">`.
|
||||
|
||||
| layout | class name |
|
||||
| ---------------- | --------------------------- |
|
||||
| archive | `.layout--archive` |
|
||||
| archive-taxonomy | `.layout--archive-taxonomy` |
|
||||
| search | `.layout--search` |
|
||||
| single | `.layout--single` |
|
||||
| splash | `.layout--splash` |
|
||||
| home | `.layout--home` |
|
||||
| posts | `.layout--posts` |
|
||||
| categories | `.layout--categories` |
|
||||
| category | `.layout--category` |
|
||||
| tags | `.layout--tags` |
|
||||
| tag | `.layout--tag` |
|
||||
|
||||
Using YAML Front Matter you can also assign custom classes to target with CSS or JavaScript. Perfect for "art directed" posts or adding custom styles to specific pages.
|
||||
|
||||
Example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: splash
|
||||
classes:
|
||||
- landing
|
||||
- dark-theme
|
||||
---
|
||||
```
|
||||
|
||||
Outputs:
|
||||
|
||||
```html
|
||||
<body class="layout--splash landing dark-theme">
|
||||
```
|
||||
|
||||
### Canonical URL
|
||||
|
||||
You can set custom Canonical URL for a page by specifying `canonical_url` option in pages YAML Front Matter. For example, if you have the following:
|
||||
|
||||
```yaml
|
||||
layout: single
|
||||
title: Title of Your Post
|
||||
canonical_url: "https://yoursite.com/custom-canonical-url"
|
||||
```
|
||||
|
||||
This will generate the following in the `<head>` of your page:
|
||||
|
||||
```html
|
||||
<link rel="canonical" href="https://yoursite.com/custom-canonical-url" />
|
||||
```
|
||||
|
||||
## Compress layout
|
||||
|
||||
A Jekyll layout that compresses HTML in pure Liquid. To enable add `layout: compress` to `_layouts/default.html`.
|
||||
|
||||
**Note:** Has been known to mangle markup and break JavaScript... especially if inline `// comments` are present. For this reason it has been disabled by default.
|
||||
{: .notice--danger}
|
||||
|
||||
* [Documentation](http://jch.penibelst.de/)
|
||||
|
||||
## Single layout
|
||||
|
||||
The layout you'll likely use the most --- sidebar and main content combo.
|
||||
|
||||
**Includes:**
|
||||
|
||||
* Optional header image with caption
|
||||
* Optional header overlay (solid color/image) + text and optional "call to action" button
|
||||
* Optional social sharing links module
|
||||
* Optional comments module
|
||||
* Optional related posts module
|
||||
* Wide page variant
|
||||
|
||||
{% include gallery id="single_layout_gallery" caption="Image header and meta info examples for `single` layout" %}
|
||||
|
||||
Assign with `layout: single` , or better yet apply as a [Front Matter default]({{ "/docs/configuration/#front-matter-defaults" | relative_url }}) in `_config.yml`.
|
||||
|
||||
### Wide page
|
||||
|
||||
To expand the main content to the right, filling the space of what is normally occupied by the table of contents. Add the following to a post or page's YAML Front Matter:
|
||||
|
||||
```yaml
|
||||
classes: wide
|
||||
```
|
||||
|
||||
**Note:** If the page contains a table of contents, it will no longer appear to the right. Instead it will be forced into the main content container directly following the page's title.
|
||||
{: .notice--info}
|
||||
|
||||
### Table of contents
|
||||
|
||||
Auto-generated table of contents list for your posts and pages can be enabled by adding `toc: true` to the YAML Front Matter.
|
||||
|
||||
![table of contents example]({{ "/assets/images/mm-toc-helper-example.jpg" | relative_url }})
|
||||
|
||||
| Parameter | Required | Description | Default |
|
||||
| --------- | -------- | ----------- | ------- |
|
||||
| **toc** | Optional | Show table of contents. (boolean) | `false` |
|
||||
| **toc_label** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
|
||||
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
|
||||
|
||||
**TOC example with custom title and icon**
|
||||
|
||||
```yaml
|
||||
---
|
||||
toc: true
|
||||
toc_label: "My Table of Contents"
|
||||
toc_icon: "cog"
|
||||
---
|
||||
```
|
||||
|
||||
## Archive layout
|
||||
|
||||
Essentially the same as `single` with markup adjustments and some modules removed.
|
||||
|
||||
**Includes:**
|
||||
|
||||
* Optional header image with caption
|
||||
* Optional header overlay (solid color/image) + text and optional "call to action" button
|
||||
* List and grid views
|
||||
|
||||
<figure>
|
||||
<img src="{{ '/assets/images/mm-layout-archive.png' | relative_url }}" alt="archive layout example">
|
||||
<figcaption>List view example.</figcaption>
|
||||
</figure>
|
||||
|
||||
Below are sample archive pages you can easily drop into your project, taking care to rename `permalink`, `title`, or the filename to fit your site. Each is 100% compatible with GitHub Pages.
|
||||
|
||||
* [All Posts Grouped by Category -- List View][posts-categories]
|
||||
* [All Posts Grouped by Tag -- List View][posts-tags]
|
||||
* [All Posts Grouped by Year -- List View][posts-year]
|
||||
* [All Posts Grouped by Collection -- List View][posts-collection]
|
||||
* [Portfolio Collection -- Grid View][portfolio-collection]
|
||||
|
||||
[posts-categories]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/category-archive.md
|
||||
[posts-tags]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/tag-archive.md
|
||||
[posts-year]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/year-archive.md
|
||||
[posts-collection]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/collection-archive.html
|
||||
[portfolio-collection]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/portfolio-archive.md
|
||||
|
||||
Post and page excerpts are auto-generated by Jekyll which grabs the first paragraph of text. To override this text with something more specific use the following YAML Front Matter:
|
||||
|
||||
```yaml
|
||||
excerpt: "A unique line of text to describe this post that will display in an archive listing and meta description with SEO benefits."
|
||||
```
|
||||
|
||||
### Wide page
|
||||
|
||||
To expand the main content to the right, filling the space of what is normally occupied by the table of contents. Add the following to a post or page's YAML Front Matter:
|
||||
|
||||
```yaml
|
||||
classes: wide
|
||||
```
|
||||
|
||||
### Grid view
|
||||
|
||||
Adding `type=grid` to the `archive-single` helper will display archive posts in a 4 column grid. For example to create an archive displaying all documents in the portfolio collection:
|
||||
|
||||
Create a portfolio archive page (eg. `_pages/portfolio-archive.md`) with the following YAML Front Matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: Portfolio
|
||||
layout: collection
|
||||
permalink: /portfolio/
|
||||
collection: portfolio
|
||||
entries_layout: grid
|
||||
---
|
||||
```
|
||||
|
||||
Teaser images are assigned similar to header images using the following YAML Front Matter:
|
||||
|
||||
```yaml
|
||||
header:
|
||||
teaser: path-to-teaser-image.jpg
|
||||
```
|
||||
|
||||
**Note:** More information on using this `_include` can be found under [**Helpers**]({{ "/docs/helpers/" | relative_url }}).
|
||||
{: .notice--info}
|
||||
|
||||
## Taxonomy archives
|
||||
|
||||
If you have the luxury of using Jekyll plugins, the creation of category and tag archives is greatly simplified. Simply enable support for the [`jekyll-archives`](https://github.com/jekyll/jekyll-archives) plugin with a few `_config.yml` settings as noted in the [**Configuration**]({{ "/docs/configuration/#archive-settings" | relative_url }}) section and you're good to go.
|
||||
|
||||
![archive taxonomy layout example]({{ "/assets/images/mm-layout-archive-taxonomy.png" | relative_url }})
|
||||
|
||||
If you're not using the `jekyll-archives` plugin then you need to create archive pages yourself. Sample taxonomy archives can be found by grabbing the Markdown sources below and adding to your site.
|
||||
|
||||
| Name | Layout | Example |
|
||||
| -------------------- | ------ | ------ |
|
||||
| [Posts Archive](https://mmistakes.github.io/minimal-mistakes/year-archive/) | `layout: posts` | [year-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/year-archive.md) |
|
||||
| [Categories Archive](https://mmistakes.github.io/minimal-mistakes/categories/) | `layout: categories` | [category-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/category-archive.md) |
|
||||
| [Category Archive](https://mmistakes.github.io/minimal-mistakes/categories/edge-case/) | `layout: category` | [edge-case.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/edge-case.md) |
|
||||
| [Tags Archive](https://mmistakes.github.io/minimal-mistakes/tags/) | `layout: tags` | [tag-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/tag-archive.md) |
|
||||
| [Tag Archive](https://mmistakes.github.io/minimal-mistakes/tags/markup/) | `layout: tag` | [markup.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/markup.md) |
|
||||
| [Collection Archive](https://mmistakes.github.io/minimal-mistakes/recipes-archive/) | `layout: collection` | [recipes-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/recipes-archive.md) |
|
||||
|
||||
**Note:** By default, documents are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter.
|
||||
{: .notice--info}
|
||||
|
||||
### `layout: posts`
|
||||
|
||||
This layout displays all posts grouped by the year they were published. It accommodates the same front matter as `layout: archive`.
|
||||
|
||||
### `layout: categories`
|
||||
|
||||
This layout displays all posts grouped category. It accommodates the same front matter as `layout: archive`.
|
||||
|
||||
### `layout: tags`
|
||||
|
||||
This layout displays all posts grouped by tag. It accommodates the same front matter as `layout: archive`.
|
||||
|
||||
### `layout: collection`
|
||||
|
||||
This layout displays all documents grouped by a specific collection. It accommodates the same front matter as `layout: archive` with the addition of the following:
|
||||
|
||||
```yaml
|
||||
collection: # collection name
|
||||
entries_layout: # list (default), grid
|
||||
show_excerpts: # true (default), false
|
||||
sort_by: # date (default) title
|
||||
sort_order: # forward (default), reverse
|
||||
```
|
||||
|
||||
To create a page showing all documents in the `recipes` collection you'd create `recipes.md` in the root of your project and add this front matter:
|
||||
|
||||
```yaml
|
||||
title: Recipes
|
||||
layout: collection
|
||||
permalink: /recipes/
|
||||
collection: recipes
|
||||
```
|
||||
|
||||
If you want to sort the collection by title add `sort_by: title`. If you want reverse sorting, add `sort_order: reverse`.
|
||||
|
||||
### `layout: category`
|
||||
|
||||
This layout displays all posts grouped by a specific category. It accommodates the same front matter as `layout: archive` with the addition of the following:
|
||||
|
||||
```yaml
|
||||
taxonomy: # category name
|
||||
entries_layout: # list (default), grid
|
||||
```
|
||||
|
||||
To create a page showing all posts assigned to the category `foo` you'd create `foo.md` and add this front matter:
|
||||
|
||||
```yaml
|
||||
title: Foo
|
||||
layout: category
|
||||
permalink: /categories/foo/
|
||||
taxonomy: foo
|
||||
```
|
||||
|
||||
### `layout: tag`
|
||||
|
||||
This layout displays all posts grouped by a specific tag. It accommodates the same front matter as `layout: archive` with the addition of the following:
|
||||
|
||||
```yaml
|
||||
taxonomy: # tag name
|
||||
entries_layout: # list (default), grid
|
||||
```
|
||||
|
||||
To create a page showing all posts assigned to the tag `foo bar` you'd create `foo-bar.md` and add this front matter:
|
||||
|
||||
```yaml
|
||||
title: Foo Bar
|
||||
layout: tag
|
||||
permalink: /tags/foo-bar/
|
||||
taxonomy: foo bar
|
||||
```
|
||||
|
||||
## Home page layout
|
||||
|
||||
A derivative archive page layout to be used as a simple home page. It is built to show a paginated list of recent posts based off of the [pagination settings]({{ "/docs/configuration/#paginate" | relative_url }}) in `_config.yml`.
|
||||
|
||||
<figure>
|
||||
<img src="{{ '/assets/images/mm-home-post-pagination-example.jpg' | relative_url }}" alt="paginated home page example">
|
||||
<figcaption>Example of a paginated home page showing 5 recent posts.</figcaption>
|
||||
</figure>
|
||||
|
||||
To use create `index.html` at the root of your project and add the following YAML Front Matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: home
|
||||
---
|
||||
```
|
||||
|
||||
Then configure pagination in `_config.yml`.
|
||||
|
||||
```yaml
|
||||
paginate: 5 # amount of posts to show
|
||||
paginate_path: /page:num/
|
||||
```
|
||||
|
||||
If you'd rather have a paginated page of posts reside in a subfolder instead of acting as your homepage make the following adjustments.
|
||||
|
||||
Create `index.html` in the location you'd like. For example if I wanted it to live at **/blog** I'd create `/blog/index.html` with `layout: home` in its YAML Front Matter.
|
||||
|
||||
Then adjust the `paginate_path` in **_config.yml** to match.
|
||||
|
||||
```yaml
|
||||
paginate_path: /blog/page:num
|
||||
```
|
||||
|
||||
**Note:** Jekyll can only paginate a single `index.html` file. If you'd like to paginate more pages (e.g. category indexes) you'll need the help of a custom plugin. For more pagination related settings check the [**Configuration**]({{ "/docs/configuration/#paginate" | relative_url }}) section.
|
||||
{: .notice--info}
|
||||
|
||||
## Splash page layout
|
||||
|
||||
For full-width landing pages that need a little something extra add `layout: splash` to the YAML Front Matter.
|
||||
|
||||
**Includes:**
|
||||
|
||||
* Optional header image with caption
|
||||
* Optional header overlay (solid color/image) + text and optional "call to action" button
|
||||
* Feature blocks (`left`, `center`, and `right` alignment options)
|
||||
|
||||
![splash page layout example]({{ "/assets/images/mm-layout-splash.png" | relative_url }})
|
||||
|
||||
Feature blocks can be assigned and aligned to the `left`, `right`, or `center` with a sprinkling of YAML. For full details on how to use the `feature_row` helper check the [**Content**]({{ "/docs/helpers/" | relative_url }}) section or review a [sample splash page](https://github.com/{{ site.repository }}/blob/master/docs/_pages/splash-page.md).
|
||||
|
||||
## Search page layout
|
||||
|
||||
A page with a search form. Add `layout: search` to the YAML Front Matter similar to [this example](https://github.com/mmistakes/minimal-mistakes/blob/master/test/_pages/search.md) on the test site.
|
||||
|
||||
![search page layout example]({{ "/assets/images/search-layout-example.png" | relative_url }})
|
||||
|
||||
**Note:** A page using the `layout: search` isn't compatible with the new [site search feature]({{ "/docs/configuration/#site-search" | relative_url }}) incorporated in the masthead.
|
||||
{: .notice--warning}
|
||||
|
||||
### Exclusions
|
||||
|
||||
If you would like to exclude specific pages/posts from the search index set the search flag to `false` in the YAML Front Matter for the page/post.
|
||||
|
||||
```yaml
|
||||
search: false
|
||||
```
|
||||
|
||||
**ProTip:** Add a link to this page in the masthead navigation.
|
||||
{: .notice--info}
|
||||
|
||||
---
|
||||
|
||||
## Headers
|
||||
|
||||
To add some visual punch to a post or page, a large full-width header image can be included.
|
||||
|
||||
Be sure to resize your header images. `~1280px` is a good width if you aren't [responsively serving up images](http://alistapart.com/article/responsive-images-in-practice). Through the magic of CSS they will scale up or down to fill the container. If you go with something too small it will look like garbage when upscaled, and something too large will hurt performance.
|
||||
|
||||
**Please Note:** Paths for image headers, overlays, teasers, [galleries]({{ "/docs/helpers/#gallery" | relative_url }}), and [feature rows]({{ "/docs/helpers/#feature-row" | relative_url }}) have changed and require a full path. Instead of just `image: filename.jpg` you'll need to use the full path eg: `image: /assets/images/filename.jpg`. The preferred location is now `/assets/images/`, but can be placed elsewhere or external hosted. This all applies for image references in `_config.yml` and `author.yml` as well.
|
||||
{: .notice--danger}
|
||||
|
||||
![single layout header image example]({{ "/assets/images/mm-single-header-example.jpg" | relative_url }})
|
||||
|
||||
Place your images in the `/assets/images/` folder and add the following YAML Front Matter:
|
||||
|
||||
```yaml
|
||||
header:
|
||||
image: /assets/images/image-filename.jpg
|
||||
```
|
||||
|
||||
For externally hosted images include the full image path instead of just the filename:
|
||||
|
||||
```yaml
|
||||
header:
|
||||
image: http://some-site.com/assets/images/image.jpg
|
||||
```
|
||||
|
||||
To provide a custom alt tag for screen readers:
|
||||
|
||||
```yaml
|
||||
header:
|
||||
image: /assets/images/unsplash-image-1.jpg
|
||||
image_description: "A description of the image"
|
||||
```
|
||||
|
||||
To include a caption or attribution for the image:
|
||||
|
||||
```yaml
|
||||
header:
|
||||
image: /assets/images/unsplash-image-1.jpg
|
||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||
```
|
||||
|
||||
**ProTip:** Captions written in Markdown are supported, so feel free to add links, or style text. Just be sure to wrap it in quotes.
|
||||
{: .notice--info}
|
||||
|
||||
### Header overlay
|
||||
|
||||
To overlay text on top of a header image you have a few more options:
|
||||
|
||||
| Name | Description | Default |
|
||||
| ---- | ----------- | ------- |
|
||||
| **overlay_image** | Header image you'd like to overlay. Same rules as `header.image` from above. | |
|
||||
| **overlay_filter** | Color/opacity to overlay on top of the header image eg: `0.5` or `rgba(255, 0, 0, 0.5)`. |
|
||||
| **show_overlay_excerpt** | Display excerpt in the overlay text | true |
|
||||
| **excerpt** | Auto-generated page excerpt is added to the overlay text or can be overridden. | |
|
||||
| **tagline** | Overrides page excerpt. Useful when header text needs to be different from excerpt in archive views. | |
|
||||
| **actions** | Call to action button links (`actions` array: `label` and `url`). More than one button link can be assigned. | |
|
||||
| **cta_label** | Deprecated, use `actions` instead. Call to action button text label. | `more_label` in UI Text data file |
|
||||
| **cta_url** | Deprecated, use `actions` instead. Call to action button URL. | |
|
||||
|
||||
With this YAML Front Matter:
|
||||
|
||||
```yaml
|
||||
excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
|
||||
header:
|
||||
overlay_image: /assets/images/unsplash-image-1.jpg
|
||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||
actions:
|
||||
- label: "More Info"
|
||||
url: "https://unsplash.com"
|
||||
```
|
||||
|
||||
You'd get a header image overlaid with text and a call to action button like this:
|
||||
|
||||
![single layout header overlay example]({{ "/assets/images/mm-single-header-overlay-example.jpg" | relative_url }})
|
||||
|
||||
You also have the option of specifying a solid background-color to use instead of an image.
|
||||
|
||||
![single layout header overlay with background fill]({{ "/assets/images/mm-single-header-overlay-fill-example.jpg" | relative_url }})
|
||||
|
||||
```yaml
|
||||
excerpt: "This post should display a **header with a solid background color**, if the theme supports it."
|
||||
header:
|
||||
overlay_color: "#333"
|
||||
```
|
||||
|
||||
You can also specifying the opacity (between `0` and `1`) of a black overlay like so:
|
||||
|
||||
![transparent black overlay]({{ "/assets/images/mm-header-overlay-black-filter.jpg" | relative_url }})
|
||||
|
||||
```yaml
|
||||
excerpt: "This post should [...]"
|
||||
header:
|
||||
overlay_image: /assets/images/unsplash-image-1.jpg
|
||||
overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
|
||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||
actions:
|
||||
- label: "Download"
|
||||
url: "https://github.com"
|
||||
```
|
||||
|
||||
Or if you want to do more fancy things, go full rgba:
|
||||
|
||||
![transparent red overlay]({{ "/assets/images/mm-header-overlay-red-filter.jpg" | relative_url }})
|
||||
|
||||
```yaml
|
||||
excerpt: "This post should [...]"
|
||||
header:
|
||||
overlay_image: /assets/images/unsplash-image-1.jpg
|
||||
overlay_filter: rgba(255, 0, 0, 0.5)
|
||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||
actions:
|
||||
- label: "Download"
|
||||
url: "https://github.com"
|
||||
```
|
||||
|
||||
Multiple call to action button links can be assigned like this:
|
||||
|
||||
```yaml
|
||||
excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
|
||||
header:
|
||||
overlay_image: /assets/images/unsplash-image-1.jpg
|
||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||
actions:
|
||||
- label: "Foo Button"
|
||||
url: "#foo"
|
||||
- label: "Bar Button"
|
||||
url: "#bar"
|
||||
```
|
||||
|
||||
### Open Graph & Twitter Card images
|
||||
|
||||
By default the large page header or overlay images are used for sharing previews. If you'd like to set this image to something else use `page.header.og_image` like:
|
||||
|
||||
```yaml
|
||||
header:
|
||||
image: /assets/images/your-page-image.jpg
|
||||
og_image: /assets/images/your-og-image.jpg
|
||||
```
|
||||
|
||||
**ProTip:** `og_image` is useful for setting OpenGraph images on pages that don't have a header or overlay image.
|
||||
{: .notice--info}
|
||||
|
||||
---
|
||||
|
||||
## Sidebars
|
||||
|
||||
The space to the left of a page's main content is blank by default, but has the ability to show an author profile (name, short biography, social media links), custom content, or both.
|
||||
|
||||
### Author profile
|
||||
|
||||
Add `author_profile: true` to a post or page's YAML Front Matter.
|
||||
|
||||
![single layout example]({{ "/assets/images/mm-layout-single.png" | relative_url }})
|
||||
|
||||
Better yet, enable it with Front Matter Defaults set in `_config.yml`.
|
||||
|
||||
```yaml
|
||||
defaults:
|
||||
# _posts
|
||||
- scope:
|
||||
path: ""
|
||||
type: posts
|
||||
values:
|
||||
author_profile: true
|
||||
```
|
||||
|
||||
**Note:** To disable the author sidebar profile for a specific post or page, add `author_profile: false` to the YAML Front Matter instead.
|
||||
{: .notice--warning}
|
||||
|
||||
To assign more author links, add to the `author.links` array in [`_config.yml`]({{ "/docs/configuration/" | relative_url }}) link so. Any of [Font Awesome's icons](https://fontawesome.com/icons?d=gallery) are available for use.
|
||||
|
||||
```yaml
|
||||
author:
|
||||
name: "Your Name"
|
||||
avatar: "/assets/images/bio-photo.jpg"
|
||||
bio: "I am an **amazing** person." # Note: Markdown is allowed
|
||||
location: "Somewhere"
|
||||
links:
|
||||
- label: "Made Mistakes"
|
||||
icon: "fas fa-fw fa-link"
|
||||
url: "https://mademistakes.com"
|
||||
- label: "Twitter"
|
||||
icon: "fab fa-fw fa-twitter-square"
|
||||
url: "https://twitter.com/mmistakes"
|
||||
- label: "GitHub"
|
||||
icon: "fab fa-fw fa-github"
|
||||
url: "https://github.com/mmistakes"
|
||||
- label: "Instagram"
|
||||
icon: "fab fa-fw fa-instagram"
|
||||
url: "https://instagram.com/mmistakes"
|
||||
```
|
||||
|
||||
**Note:** Depending on the icon and theme skin used, colors may not be used. Popular social networks like Twitter, Facebook, Instagram, etc. have the appropriate brand color set in CSS. To change or add missing colors edit [`_utilities.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/minimal-mistakes/_utilities.scss) in `<site root>/_sass/minimal-mistakes/`.
|
||||
{: .notice--info}
|
||||
|
||||
For example, to color a Reddit icon, simply add a `color` declaration and the corresponding hex code like so:
|
||||
|
||||
```scss
|
||||
.social-icons {
|
||||
.fa-reddit {
|
||||
color: #ff4500;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
![Reddit link in author profile with color]({{ "/assets/images/mm-author-profile-reddit-color.png" | relative_url }})
|
||||
|
||||
### Custom sidebar content
|
||||
|
||||
Blocks of content can be added by using the following under `sidebar`:
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| **title** | Title or heading. |
|
||||
| **image** | Image path placed in `/images/` folder or an external URL. |
|
||||
| **image_alt** | Alternate description for image. |
|
||||
| **text** | Text. Markdown is allowed. |
|
||||
|
||||
Multiple blocks can also be added by following the example below:
|
||||
|
||||
```yaml
|
||||
sidebar:
|
||||
- title: "Title"
|
||||
image: http://placehold.it/350x250
|
||||
image_alt: "image"
|
||||
text: "Some text here."
|
||||
- title: "Another Title"
|
||||
text: "More text here."
|
||||
```
|
||||
|
||||
<figure>
|
||||
<img src="{{ '/assets/images/mm-custom-sidebar-example.jpg' | relative_url }}" alt="custom sidebar content example">
|
||||
<figcaption>Example of custom sidebar content added as YAML Front Matter.</figcaption>
|
||||
</figure>
|
||||
|
||||
**Note:** Custom sidebar content added to a post or page's YAML Front Matter will appear below the author profile if enabled with `author_profile: true`.
|
||||
{: .notice--info}
|
||||
|
||||
### Custom sidebar navigation menu
|
||||
|
||||
To create a sidebar menu[^sidebar-menu] similar to the one found in the theme's documentation pages you'll need to modify a `_data` file and some YAML Front Matter.
|
||||
|
||||
[^sidebar-menu]: Sidebar menu supports 1 level of nested links.
|
||||
|
||||
<figure>
|
||||
<img src="{{ '/assets/images/mm-custom-sidebar-nav.jpg' | relative_url }}" alt="sidebar navigation example">
|
||||
<figcaption>Custom sidebar navigation menu example.</figcaption>
|
||||
</figure>
|
||||
|
||||
To start, add a new key to `_data/navigation.yml`. This will be referenced later in via YAML Front Matter so keep it short and memorable. In the case of the theme's documentation menu I used `docs`.
|
||||
|
||||
**Sample sidebar menu links:**
|
||||
|
||||
```yaml
|
||||
docs:
|
||||
- title: Getting Started
|
||||
children:
|
||||
- title: "Quick-Start Guide"
|
||||
url: /docs/quick-start-guide/
|
||||
- title: "Structure"
|
||||
url: /docs/structure/
|
||||
- title: "Installation"
|
||||
url: /docs/installation/
|
||||
- title: "Upgrading"
|
||||
url: /docs/upgrading/
|
||||
|
||||
- title: Customization
|
||||
children:
|
||||
- title: "Configuration"
|
||||
url: /docs/configuration/
|
||||
- title: "Navigation"
|
||||
url: /docs/navigation/
|
||||
- title: "UI Text"
|
||||
url: /docs/ui-text/
|
||||
- title: "Authors"
|
||||
url: /docs/authors/
|
||||
- title: "Layouts"
|
||||
url: /docs/layouts/
|
||||
|
||||
- title: Content
|
||||
children:
|
||||
- title: "Working with Posts"
|
||||
url: /docs/posts/
|
||||
- title: "Working with Pages"
|
||||
url: /docs/pages/
|
||||
- title: "Working with Collections"
|
||||
url: /docs/collections/
|
||||
- title: "Helpers"
|
||||
url: /docs/helpers/
|
||||
- title: "Utility Classes"
|
||||
url: /docs/utility-classes/
|
||||
|
||||
- title: Extras
|
||||
children:
|
||||
- title: "Stylesheets"
|
||||
url: /docs/stylesheets/
|
||||
- title: "JavaScript"
|
||||
url: /docs/javascript/
|
||||
```
|
||||
|
||||
Now you can pull these links into any page by adding the following YAML Front Matter.
|
||||
|
||||
```yaml
|
||||
sidebar:
|
||||
nav: "docs"
|
||||
```
|
||||
|
||||
**Note:** `nav: "docs"` references the `docs` key in `_data/navigation.yml` so make sure they match.
|
||||
{: .notice--info}
|
||||
|
||||
If you're adding a sidebar navigation menu to several pages the use of Front Matter Defaults is a better option. You can define them in `_config.yml` to avoid adding it to every page or post.
|
||||
|
||||
**Sample sidebar nav default:**
|
||||
|
||||
```yaml
|
||||
defaults:
|
||||
# _docs
|
||||
- scope:
|
||||
path: ""
|
||||
type: docs
|
||||
values:
|
||||
sidebar:
|
||||
nav: "docs"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Social sharing links
|
||||
|
||||
The `single` layout has an option to enable social links at the bottom of posts for sharing on Twitter, Facebook, and LinkedIn. Similar to the links found in the author sidebar, the theme ships with defaults for the most common social networks.
|
||||
|
||||
![default social share link buttons]({{ "/assets/images/mm-social-share-links-default.png" | relative_url }})
|
||||
|
||||
To enable these links add `share: true` to a post or page's YAML Front Matter or use a [default](https://jekyllrb.com/docs/configuration/#front-matter-defaults) in your `_config.yml` to apply more globally.
|
||||
|
||||
If you'd like to add, remove, or change the order of these default links you can do so by editing [`_includes/social-share.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/social-share.html).
|
||||
|
||||
Let's say you wanted to replace the LinkedIn button with a Reddit one. Simply replace the HTML with the following:
|
||||
|
||||
```html
|
||||
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | absolute_url | url_encode }}&title={{ page.title }}" class="btn" title="{{ site.data.ui-text[site.locale].share_on_label }} Reddit"><i class="fab fa-fw fa-reddit" aria-hidden="true"></i><span> Reddit</span></a>{% endraw %}
|
||||
```
|
||||
|
||||
The important parts to change are:
|
||||
|
||||
1. Share point URL *eg. `https://www.reddit.com/submit?url=`
|
||||
2. Link `title`
|
||||
3. [Font Awesome icon](http://fontawesome.io/icons/) (`fa-` class)
|
||||
4. Link label
|
||||
|
||||
![Reddit social share link button]({{ "/assets/images/mm-social-share-links-reddit-gs.png" | relative_url }})
|
||||
|
||||
To change the color of the button use one of the built in [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}). Or you can create a new button class to match whatever color you want.
|
||||
|
||||
Under the `$social` color map in `assets/_scss/_buttons.scss` simply add a name (this will be appened to `btn--`) that matches the new button class. In our case `reddit` ~> `.btn--reddit`.
|
||||
|
||||
```scss
|
||||
$social:
|
||||
(facebook, $facebook-color),
|
||||
(twitter, $twitter-color),
|
||||
(linkedin, $linkedin-color),
|
||||
(reddit, #ff4500);
|
||||
```
|
||||
|
||||
**ProTip:** For bonus points you can add it as a Sass `$variable` that you set in `_variables.scss` like the other ["brand" colors](http://brandcolors.net/).
|
||||
{: .notice--info}
|
||||
|
||||
Add the new `.btn--reddit` class to the `<a>` element from earlier, [compile `main.css`]({{ "/docs/stylesheets/" | relative_url }}) and away you go.
|
||||
|
||||
```html
|
||||
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | relative_url }}&title={{ page.title }}" class="btn btn--reddit" title="{{ site.data.ui-text[site.locale].share_on_label }} Reddit"><i class="fab fa-fw fa-reddit" aria-hidden="true"></i><span> Reddit</span></a>{% endraw %}
|
||||
```
|
||||
|
||||
![Reddit social share link button]({{ "/assets/images/mm-social-share-links-reddit-color.png" | relative_url }})
|
||||
30
docs/11-posts.md
Normal file
30
docs/11-posts.md
Normal file
@ -0,0 +1,30 @@
|
||||
Posts are stored in the `_posts` directory and named according to the `YEAR-MONTH-DAY-title.MARKUP` format as per [the usual](https://jekyllrb.com/docs/posts/).
|
||||
|
||||
Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. For example, the following are examples of valid post filenames:
|
||||
|
||||
```
|
||||
2016-07-20-writing-jekyll-posts.md
|
||||
2015-01-03-static-site-generators.markdown
|
||||
```
|
||||
|
||||
**Recommended Front Matter Defaults:**
|
||||
|
||||
```yaml
|
||||
defaults:
|
||||
# _posts
|
||||
- scope:
|
||||
path: ""
|
||||
type: posts
|
||||
values:
|
||||
layout: single
|
||||
author_profile: true
|
||||
read_time: true
|
||||
comments: true
|
||||
share: true
|
||||
related: true
|
||||
```
|
||||
|
||||
Adding the above to `_config.yml` will assign the `single` layout and enable: *author profile*, *reading time*, *comments*, [*social sharing links*]({{ "/docs/layouts/#social-sharing-links" | relative_url }}), and *related posts*, for all posts.
|
||||
|
||||
**ProTip:** Remember to write unique `excerpt` descriptions for each post for improved SEO and archive listings.
|
||||
{: .notice--info}
|
||||
59
docs/12-pages.md
Normal file
59
docs/12-pages.md
Normal file
@ -0,0 +1,59 @@
|
||||
The initial layout of the pages is defined by creating a special file on the SPIFFS file system.
|
||||
This layout is displayed each time HASP starts up.
|
||||
You can upload this file *(and other resource assets like fonts and images)* in the web interface Configuration > HASP Settings.
|
||||
|
||||
### pages.jsonl
|
||||
|
||||
The location of this file is `/pages.jsonl` in the root of the filesystem.
|
||||
It uses the [JSON Lines format](http://www.jsonlines.org) with one json object per line.
|
||||
Each line should contain exactly **one** valid json object and end with a line-break `\n` *(not a comma)*.
|
||||
|
||||
The file is interpreted **line-by-line**.
|
||||
When a malformed line is encountered, the processing of the rest of the file stops.
|
||||
If you are missing objects, check the logs to see which line was processed last.
|
||||
You probably have a typo in the following line which blocks parsing the rest of the file.
|
||||
|
||||
> **Note**</br>The complete file in its entirety is *not* a valid json file.
|
||||
> Each individual line however must be a valid json object.
|
||||
> The file extension is `.jsonl` and not `.json`.
|
||||
|
||||
### Objects
|
||||
Each line in `pages.jsonl` creates **one object** on a page and has to be in the json format.
|
||||
The order of objects dictates the layer on the page from bottom to top.
|
||||
|
||||
Example Objects
|
||||
```json
|
||||
{"page":2,"id":1,"objid":12,"x":5,"y":20,"h":50,"w":50,"enabled":"true","hidden":"false"}
|
||||
{"page":2,"id":2,"objid":50,"x":5,"y":120,"h":90,"w":50,"enabled":"false","hidden":"false"}
|
||||
```
|
||||
|
||||
Once the object is created, you can reference it with `p[x].b[y]` where `x` is the pagenumber and `y` is the id of the object.
|
||||
|
||||
for example:
|
||||
```
|
||||
p[2].b[1].w=100
|
||||
p[2].b[2].hidden=true
|
||||
```
|
||||
|
||||
## Comments
|
||||
If any of the required `id` or `objid` properties are missing -*and the line is still valid json*- then it is interpreted as a comment.
|
||||
|
||||
You can also use the `page` parameter in a comment to set the default page for new objects that don't have a `page` parameter.
|
||||
|
||||
Example 1: Add a comment on a single line that is ignored.
|
||||
```json
|
||||
{"comment":" ----------- Page 2 layout ------------"}
|
||||
```
|
||||
|
||||
Example 2: Set the default `page` for next object(s) to `3` besides adding a comment as well.
|
||||
|
||||
```json
|
||||
{"page":3,"comment":" ---- My Awesome Color Picker Layout ----"}
|
||||
```
|
||||
|
||||
If you then omit the `page` parameter in the lines below this comment, those objects will appear by default on page `3`.
|
||||
|
||||
> Note: If the line is not valid json, the parsing of the rest of the file is also stopped.
|
||||
|
||||
## Blank Lines
|
||||
Blank lines are allowed for readability and are ignored.
|
||||
247
docs/13-objects.md
Normal file
247
docs/13-objects.md
Normal file
@ -0,0 +1,247 @@
|
||||
## Common Properties
|
||||
|
||||
These are the common properties shared among all objects:
|
||||
|
||||
<style>
|
||||
table th:first-of-type {
|
||||
width: 12%;
|
||||
}
|
||||
table th:nth-of-type(2) {
|
||||
width: 12%;
|
||||
}
|
||||
table th:nth-of-type(3) {
|
||||
width: 12%;
|
||||
}
|
||||
table th:nth-of-type(4) {
|
||||
width: 12%;
|
||||
}
|
||||
table th:last-of-type {
|
||||
width: 48%;
|
||||
}
|
||||
</style>
|
||||
|
||||
| Property | Value | Required | Default | Description |
|
||||
|:---------|:----------:|:--------:|:-------:|:------------|
|
||||
| id | 0-255 | yes | n/a | ID of the object on this page |
|
||||
| objid | 0-255 | yes | n/a | ID of the object type *(see below)* |
|
||||
| page | 0-255 | no | n/a | ID of the page the object appears on |
|
||||
| x | int16 | no | 0 | horizontal position on the page |
|
||||
| y | int16 | no | 0 | vertical position on the page |
|
||||
| w | int16 | no | 0 | width of the object |
|
||||
| h | int16 | no | 0 | height of the object |
|
||||
| enabled | true/false | no | true | object is clickable |
|
||||
| hidden | true/false | no | false | object is hidden |
|
||||
| opacity | 0-255 | no | 255 | how much the the object is opaque |
|
||||
|
||||
If the `page` parameter is not present, the object is placed on the same page as the _previous object_. If `page` is not specified for the first object either, the _current page_ being displayed is used.
|
||||
|
||||
The maximum number of pages and objects is limited by the memory available in the MCU.
|
||||
|
||||
`"page":254` indicates that the object is visible on every page. It can be used for example to specify a static menu bar.
|
||||
You can still hide the object on select pages if needed. Objects on this page appear on top of any objects on the underlying page.
|
||||
|
||||
|
||||
## Object Types
|
||||
|
||||
Each object type is an ID that indicates which object type that line represents.
|
||||
Besides the common properties listed above, each object type can have specific properties.
|
||||
|
||||
|
||||
### Button
|
||||
**objid:10**
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<details open=""><summary>Show Jsonl Code (Click to expand)</summary>
|
||||
|
||||
```json
|
||||
{"page":0,"comment":"---------- Page 0 ----------"}
|
||||
{"objid":10,"id":1,"x":10,"y":45,"w":220,"h":55,"toggle":"TRUE","txt":"Push Me \uf0a6"}
|
||||
```
|
||||
</details>
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------
|
||||
| toggle | boolean | no | false | When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button
|
||||
| val | int16 | no | 0 | The value: 1 for toggled, 0 for untoggled
|
||||
| txt | string | no | "" | The text of the label
|
||||
| mode | string | no | expand | The wrapping mode of long text labels
|
||||
|
||||
Normal Switches send touch events out as they occor. The possible events are:
|
||||
|
||||
- DOWN: Occurs when a button goes from unpressed to being pressed
|
||||
- SHORT: The button was released within a short time i.e. a short click has occured
|
||||
- LONG: Event is send when the button is *still* being pressed after the threshold time
|
||||
<!-- - HOLD: The HOLD event is repeated every 400ms while the button is still pressed -->
|
||||
- UP: The button is released after being pressing for a LONG threshold time.
|
||||
- LOST: This event occurs when the object looses the focus while the screen is still being touched
|
||||
|
||||
Toggle Switches only send out their new value (0 or 1) when toggled.
|
||||
|
||||
Possible wrapping modes are: expand, break, dots, scroll and loop
|
||||
|
||||
### Checkbox
|
||||
**objid:11**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|------------|--------------
|
||||
| val | int16 | no | 0 | The value: 1 for checked, 0 for unchecked
|
||||
| txt | string | no | "Checkbox" | The label of the checkbox
|
||||
|
||||
### Text Label
|
||||
**objid:12**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|------------|--------------
|
||||
| txt | string | no | "Text" | The text of the label
|
||||
| mode | string | no | expand | The wrapping mode of long text labels
|
||||
|
||||
Possible wrapping modes are: expand, break, dots, scroll and loop
|
||||
|
||||
```json
|
||||
{"page":2,"id":1,"objid":12,"h":24,"w":120,"txt":"\ufe05 Icon Demo"}
|
||||
```
|
||||
|
||||
### Arc
|
||||
**objid:22**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|-----------|------------|----------|---------|--------------
|
||||
| min | int16 | no | 0 |
|
||||
| max | int16 | no | 100 |
|
||||
| val | int16 | no | 0 |
|
||||
| rotation | int16 | no | 0 |
|
||||
| type | int16 | no | normal | normal, reverse, symetrical
|
||||
|
||||
|
||||
### Spinner
|
||||
**objid:21**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|-----------|------------|----------|---------|--------------
|
||||
| speed | int16 | no | 1000 | The time for 1 furn in ms
|
||||
| direction | int16 | no | 100 | 0 for clockwise, 1 for counter-clockwise
|
||||
| thickness | int16 | no | dep. on theme | The width of the arcline
|
||||
|
||||
### Colorpicker
|
||||
**objid:20**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------
|
||||
| val | uint16 | no | 0 | The selected color in RBG565 format
|
||||
| color | hex string | no | 0 | The selected color in html format #rrggbb
|
||||
| rect | boolean | no | false | True if the color picker has a rectangular shape like a slider. False for a circular shape.
|
||||
|
||||
|
||||
### Slider
|
||||
**objid:30**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default |
|
||||
|----------|------------|----------|---------|
|
||||
| min | int16 | no | 0 |
|
||||
| max | int16 | no | 100 |
|
||||
| val | int16 | no | 0 |
|
||||
|
||||
### Double Slider
|
||||
**objid:30**
|
||||
|
||||
| Property | Value | Required | Default |
|
||||
|----------|------------|----------|---------|
|
||||
| min | int16 | no | 0 |
|
||||
| max | int16 | no | 100 |
|
||||
| val | int16 | no | 0 |
|
||||
|
||||
|
||||
### Gauge
|
||||
**objid:31**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default |
|
||||
|----------|------------|----------|---------|
|
||||
| min | int16 | no | 0 |
|
||||
| max | int16 | no | 100 |
|
||||
| val | int16 | no | 0 |
|
||||
|
||||
|
||||
### Progressbar
|
||||
**objid:32**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default |
|
||||
|----------|------------|----------|---------|
|
||||
| min | int16 | no | 0 |
|
||||
| max | int16 | no | 100 |
|
||||
| val | int16 | no | 0 |
|
||||
|
||||
|
||||
### Switch
|
||||
**objid:40**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|------------|------------|----------|---------|---------------
|
||||
| val | int16 | no | 0 | The value: 1 for on, 0 for off
|
||||
|
||||
### LED Indicator
|
||||
**objid:41**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|------------|------------|----------|---------|---------------
|
||||
| val | byte | no | 0 | The brightness of the indicator 0-255
|
||||
|
||||
### Dropdown List
|
||||
**objid:50**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------------------
|
||||
| options | string | no | "" | The items separated by \n
|
||||
| val | int16 | no | 0 | The number of the selected item
|
||||
| txt | string | no | "" | *Read-only* The text of the selected item
|
||||
|
||||
To change the currently selected item, use the `val` attribute.
|
||||
To change the items in the list, use the `options` attribute.
|
||||
|
||||
When the item is changed both `val` and `txt` of the newly selected item are send out.
|
||||
|
||||
|
||||
### Roller
|
||||
**objid:51**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------------------
|
||||
| options | string | no | "" | The items separated by \n
|
||||
| val | int16 | no | 0 | The number of the selected item
|
||||
| txt | string | no | "" | *Read-only* The text of the selected item
|
||||
| rows | int8 | no | 3 | The number ow rows that are visible
|
||||
|
||||
Note: A roller does not use the `h` attribute to set its height, but uses the rows to set the visible number of rows instead.
|
||||
|
||||
To change the currently selected item, use the `val` attribute.
|
||||
To change the items in the list, use the `options` attribute.
|
||||
|
||||
When the item is changed both `val` and `txt` of the newly selected item are send out.
|
||||
315
docs/14-styling.md
Normal file
315
docs/14-styling.md
Normal file
@ -0,0 +1,315 @@
|
||||
|
||||
## Styling Properties
|
||||
|
||||
You can adjust the appearance of objects by changing the foreground, background and/or border color of each object.
|
||||
|
||||
## Object Types
|
||||
|
||||
Each object type is an ID that indicates which object type that line represents.
|
||||
Besides the common properties listed above, each object type can have specific properties.
|
||||
|
||||
|
||||
## Button
|
||||
**objid:10**
|
||||
|
||||
A button can have 3 states. All the following parameters can be appended by a number to change the appearance of that state only:
|
||||
- 0: Released
|
||||
- 1: Pressed
|
||||
- 2: Disabled
|
||||
|
||||
Or if the postfix index is ommited, then the default state 0 or Pressed is used.
|
||||
|
||||
A button can accept the attributes of the following groups:
|
||||
- Background
|
||||
- Border
|
||||
- Outline
|
||||
- Shadow
|
||||
- Value
|
||||
|
||||
## Attribute groups
|
||||
|
||||
### Padding and Margin
|
||||
|
||||
Padding sets the space on the inner sides of the edges. It means "I don't want my children too close to my sides, so keep this space".Padding inner set the "gap" between the children. Margin sets the space on the outer side of the edges. It means "I want this space around me".
|
||||
|
||||
Objects use them to set spacing. See the documentation of the objects for the details.
|
||||
|
||||
| Property | Type | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------
|
||||
| pad_top | int | Set the padding on the top
|
||||
| pad_bottom | int | Set the padding on the bottom
|
||||
| pad_left | int | Set the padding on the left
|
||||
| pad_right | int | Set the padding on the right
|
||||
| pad_inner | int | Set the padding inside the object between children
|
||||
| margin_top | int | Set the margin on the top
|
||||
| margin_bottom | int | Set the margin on the bottom
|
||||
| margin_left | int | Set the margin on the left
|
||||
| margin_right | int | Set the margin on the right
|
||||
|
||||
### Background
|
||||
|
||||
| Property | Type | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------
|
||||
| bg_opa | byte | no | "" | The background opacity level
|
||||
| bg_color | color | no | true | The background color
|
||||
| bg_grad_color | color | no | 0 | The background gradient color
|
||||
| bg_grad_dir | [0..2]| no | expand | 0 = None, 1 = Horizontal, 2 = Vertical
|
||||
| bg_grad_stop | byte | no | expand | Specifies where the gradient should stop. 0: at left/top most position, 255: at right/bottom most position. Default value: 255.
|
||||
| bg_main_stop | byte | no | expand | Specifies where should the gradient start. 0: at left/top most position, 255: at right/bottom most position. Default value: 0.
|
||||
|
||||
### Border
|
||||
|
||||
The border is drawn on top of the background. It has radius rounding.
|
||||
|
||||
| Property | Type | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------
|
||||
| border_color | color| Specifies the color of the border
|
||||
| border_opa | byte | Specifies opacity of the border
|
||||
| border_width | byte | Set the width of the border
|
||||
| border_side | byte | Specifies which sides of the border to draw. Can be 0=LV_BORDER_SIDE_NONE/1=LEFT/2=RIGHT/4=TOP/8=BOTTOM/15=FULL. A sum of these values is also possible to select specific sides.
|
||||
| border_post | bool | If `true` the border will be drawn after all children have been drawn.
|
||||
|
||||
### Shadow
|
||||
|
||||
The shadow is a blurred area under the object.
|
||||
|
||||
| Property | Type | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------
|
||||
| shadow_color | color | Specifies the color of the shadow
|
||||
| shadow_opa | byte | Specifies opacity of the shadow
|
||||
| shadow_width | int16 | Set the width (blur size) of the outline
|
||||
| shadow_ofs_x | int16 | Set the an X offset for the shadow
|
||||
| shadow_ofs_y | int16 | Set the an Y offset for the shadow
|
||||
| shadow_spread | byte | make the shadow larger than the background in every direction by this value
|
||||
|
||||
### Value
|
||||
|
||||
Value is an arbitrary text drawn to the background. It can be a lightweighted replacement of creating label objects.
|
||||
|
||||
| Property | Type | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------
|
||||
| value_str | string | Text to display. Only the pointer is saved! (Don't use local variable with lv_style_set_value_str, instead use static, global or dynamically allocated data)
|
||||
| value_color | color | Color of the text
|
||||
| value_opa | byte | Opacity level of the text [0-255]
|
||||
| value_font | byte | The font ID
|
||||
| value_letter_space | int | Letter space of the text
|
||||
| value_line_space | int | Line space of the text
|
||||
| value_align | align | Alignment of the text. Can be LV_ALIGN_.... Default value: LV_ALIGN_CENTER.
|
||||
| value_ofs_x | int | X offset from the original position of the alignment
|
||||
| value_ofs_y | int | Y offset from the original position of the alignment
|
||||
|
||||
### Text
|
||||
|
||||
Properties for textual object.
|
||||
|
||||
| Property | Type | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------
|
||||
| text_color | color | Color of the text
|
||||
| text_opa | byte | Opacity level of the text [0-255]
|
||||
| text_font | byte | Font ID
|
||||
| text_letter_space | int | Letter space of the text
|
||||
| text_line_space | int | Line space of the text
|
||||
| text_decor | byte | Add text decoration. 0=None, 1=Underline, 2=Strikethrough, 3=Underline&Strikethrough
|
||||
| text_sel_color | color | Set background color of text selection
|
||||
|
||||
### Line
|
||||
|
||||
n/a
|
||||
|
||||
### Image
|
||||
|
||||
n/a
|
||||
|
||||
### Outline
|
||||
|
||||
n/a
|
||||
|
||||
### Pattern
|
||||
|
||||
n/a
|
||||
|
||||
### Transitions
|
||||
|
||||
n/a
|
||||
|
||||
|
||||
|
||||
|
||||
### Checkbox
|
||||
**objid:11**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|------------|--------------
|
||||
| val | int16 | no | 0 | The value: 1 for checked, 0 for unchecked
|
||||
| txt | string | no | "Checkbox" | The label of the checkbox
|
||||
|
||||
### Text Label
|
||||
**objid:12**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|------------|--------------
|
||||
| txt | string | no | "Text" | The text of the label
|
||||
| mode | string | no | expand | The wrapping mode of long text labels
|
||||
|
||||
Possible wrapping modes are: expand, break, dots, scroll and loop
|
||||
|
||||
```json
|
||||
{"page":2,"id":1,"objid":12,"h":24,"w":120,"txt":"\ufe05 Icon Demo"}
|
||||
```
|
||||
|
||||
### Spinner
|
||||
**objid:21**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|-----------|------------|----------|---------|--------------
|
||||
| speed | int16 | no | 1000 | The time for 1 furn in ms
|
||||
| direction | int16 | no | 100 | 0 for clockwise, 1 for counter-clockwise
|
||||
| thickness | int16 | no | dep. on theme | The width of the arcline
|
||||
|
||||
### Colorpicker
|
||||
**objid:20**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------
|
||||
| val | uint16 | no | 0 | The selected color in RBG565 format
|
||||
| color | hex string | no | 0 | The selected color in html format #rrggbb
|
||||
| rect | boolean | no | false | True if the color picker has a rectangular shape like a slider. False for a circular shape.
|
||||
|
||||
|
||||
### Slider
|
||||
**objid:30**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default |
|
||||
|----------|------------|----------|---------|
|
||||
| min | int16 | no | 0 |
|
||||
| max | int16 | no | 100 |
|
||||
| val | int16 | no | 0 |
|
||||
|
||||
### Double Slider
|
||||
**objid:30**
|
||||
|
||||
| Property | Value | Required | Default |
|
||||
|----------|------------|----------|---------|
|
||||
| min | int16 | no | 0 |
|
||||
| max | int16 | no | 100 |
|
||||
| val | int16 | no | 0 |
|
||||
|
||||
|
||||
### Gauge
|
||||
**objid:31**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default |
|
||||
|----------|------------|----------|---------|
|
||||
| min | int16 | no | 0 |
|
||||
| max | int16 | no | 100 |
|
||||
| val | int16 | no | 0 |
|
||||
|
||||
|
||||
### Progressbar
|
||||
**objid:32**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default |
|
||||
|----------|------------|----------|---------|
|
||||
| min | int16 | no | 0 |
|
||||
| max | int16 | no | 100 |
|
||||
| val | int16 | no | 0 |
|
||||
|
||||
|
||||
### Switch
|
||||
**objid:40**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|------------|------------|----------|---------|---------------
|
||||
| val | int16 | no | 0 | The value: 1 for on, 0 for off
|
||||
|
||||
### LED Indicator
|
||||
**objid:41**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|------------|------------|----------|---------|---------------
|
||||
| val | byte | no | 0 | The brightness of the indicator 0-255
|
||||
|
||||
### Dropdown List
|
||||
**objid:50**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------------------
|
||||
| options | string | no | "" | The items separated by \n
|
||||
| val | int16 | no | 0 | The number of the selected item
|
||||
| txt | string | no | "" | *Read-only* The text of the selected item
|
||||
|
||||
To change the currently selected item, use the `val` attribute.
|
||||
To change the items in the list, use the `options` attribute.
|
||||
|
||||
When the item is changed both `val` and `txt` of the newly selected item are send out.
|
||||
|
||||
|
||||
### Roller
|
||||
**objid:51**
|
||||
|
||||
{: .align-center}
|
||||
|
||||
| Property | Value | Required | Default | Description
|
||||
|----------|------------|----------|---------|--------------------------
|
||||
| options | string | no | "" | The items separated by \n
|
||||
| val | int16 | no | 0 | The number of the selected item
|
||||
| txt | string | no | "" | *Read-only* The text of the selected item
|
||||
| rows | int8 | no | 3 | The number ow rows that are visible
|
||||
|
||||
Note: A roller does not use the `h` attribute to set its height, but uses the rows to set the visible number of rows instead.
|
||||
|
||||
To change the currently selected item, use the `val` attribute.
|
||||
To change the items in the list, use the `options` attribute.
|
||||
|
||||
When the item is changed both `val` and `txt` of the newly selected item are send out.
|
||||
|
||||
## Example file
|
||||
|
||||
This is a real-world demo `pages.jsonl` file:
|
||||
|
||||
```json
|
||||
{"comment":"---------- Page 0 ----------"}
|
||||
{"objid":10,"id":1,"page":0,"x":10,"y":45,"w":220,"h":55,"toggle":"TRUE","txt":"Toggle Me \uf0a6"}
|
||||
{"objid":11,"id":2,"page":0,"x":10,"y":100,"w":220,"h":55,"txt":"Checkbox 1"}
|
||||
{"objid":12,"id":3,"page":0,"x":10,"y":10,"w":220,"h":30,"txt":"Text Label 1","align":1,"padh":50}
|
||||
{"objid":40,"id":4,"page":0,"x":70,"y":205,"w":100,"h":55}
|
||||
{"objid":41,"id":5,"page":0,"x":10,"y":205,"w":55,"h":55}
|
||||
{"objid":50,"id":6,"page":0,"x":10,"y":150,"w":150,"txt":"\uf007 Option 1\n\uf007 Option 2\n\uf007 Option 3"}
|
||||
{"objid":21,"id":7,"page":0,"x":165,"y":140,"w":70,"h":70}
|
||||
{"comment":"---------- Page 1 ----------"}
|
||||
{"objid":30,"id":1,"page":1,"x":10,"y":170,"w":200,"h":50}
|
||||
{"objid":31,"id":3,"page":1,"x":13,"y":10,"w":100,"h":100}
|
||||
{"objid":32,"id":4,"page":1,"x":10,"y":110,"w":200,"h":50}
|
||||
{"objid":33,"id":5,"page":1,"x":127,"y":10,"w":100,"h":100}
|
||||
{"objid":12,"id":10,"page":1,"x":0,"y":0,"w":70,"h":50,"parentid":5,"txt":"\uf00c OK"}
|
||||
{"comment":"---------- Page 2 ----------"}
|
||||
{"objid":20,"id":1,"page":2,"x":20,"y":0,"w":200,"h":200}
|
||||
{"objid":20,"id":2,"page":2,"x":20,"y":210,"w":200,"h":50,"rect":"TRUE"}
|
||||
{"comment":"---------- Page 3 ----------"}
|
||||
{"objid":50,"id":1,"page":3,"x":10,"y":10,"w":220,"txt":"Spring\nSummer\nAutumn\nWinter"}
|
||||
{"objid":51,"id":2,"page":3,"x":40,"y":50,"w":160,"txt":"2018\n2019\n2020\n2021\n2022\n2023\n2024","rows":4}
|
||||
{"comment":"---------- Page 254 ----------"}
|
||||
{"objid":10,"id":1,"page":254,"x":0,"y":270,"w":75,"h":50,"opacity":100,"txt":"\uF053 Prev"}
|
||||
{"objid":10,"id":2,"page":254,"x":75,"y":270,"w":90,"h":50,"opacity":100,"txt":"\uF015 Home"}
|
||||
{"objid":10,"id":3,"page":254,"x":165,"y":270,"w":75,"h":50,"opacity":100,"txt":"Next \uF054"}
|
||||
```
|
||||
50
docs/15-example-pages.md
Normal file
50
docs/15-example-pages.md
Normal file
@ -0,0 +1,50 @@
|
||||
|
||||
## Example file
|
||||
|
||||
This is a real-world example of a `pages.jsonl` file:
|
||||
|
||||
<details>
|
||||
<summary>Show Jsonl Code (Click to expand)</summary>
|
||||
|
||||
```json
|
||||
{"page":0,"comment":"---------- Page 0 ----------"}
|
||||
{"objid":10,"id":1,"x":10,"y":45,"w":220,"h":55,"toggle":"TRUE","txt":"Push Me \uf0a6"}
|
||||
{"objid":11,"id":2,"x":10,"y":100,"w":220,"h":55,"txt":"A Checkbox"}
|
||||
{"objid":12,"id":3,"x":10,"y":10,"w":220,"h":30,"txt":"My Label","align":1,"padh":50}
|
||||
{"objid":40,"id":4,"x":70,"y":205,"w":100,"h":55}
|
||||
{"objid":41,"id":5,"x":10,"y":205,"w":55,"h":55}
|
||||
{"objid":50,"id":6,"x":10,"y":150,"w":150,"options":"\uf007 Line 1\n\uf007 Line 2\n\uf007 Line 3"}
|
||||
{"objid":21,"id":7,"x":165,"y":140,"w":70,"h":70}
|
||||
|
||||
{"page":1,"comment":"---------- Page 1 ----------"}
|
||||
{"objid":30,"id":1,"x":10,"y":170,"w":200,"h":50}
|
||||
{"objid":31,"id":3,"x":13,"y":10,"w":100,"h":100}
|
||||
{"objid":32,"id":4,"x":10,"y":110,"w":200,"h":50}
|
||||
{"objid":33,"id":5,"x":127,"y":10,"w":100,"h":100}
|
||||
{"objid":12,"id":10,"x":0,"y":0,"w":70,"h":50,"parentid":5,"txt":"\uf00c OK"}
|
||||
|
||||
{"comment":"---------- Page 2 ----------"}
|
||||
{"objid":20,"id":1,"page":2,"x":20,"y":0,"w":200,"h":200}
|
||||
{"objid":20,"id":2,"page":2,"x":20,"y":210,"w":200,"h":50,"rect":"TRUE"}
|
||||
|
||||
{"page":3,"comment":"---------- Page 3 ----------"}
|
||||
{"objid":50,"id":1,"x":10,"y":10,"w":220,"options":"Spring\nSummer\nAutumn\nWinter"}
|
||||
{"objid":51,"id":2,"x":40,"y":50,"w":160,"rows":3,"options":"2020\n2021\n2022\n2023\n2024"}
|
||||
|
||||
{"page":254,"comment":"---------- Page 254 ----------"}
|
||||
{"objid":10,"id":1,"x":0,"y":270,"w":75,"h":50,"opacity":100,"txt":"\uF053 Prev"}
|
||||
{"objid":10,"id":2,"x":75,"y":270,"w":90,"h":50,"opacity":100,"txt":"\uF015 Home"}
|
||||
{"objid":10,"id":3,"x":165,"y":270,"w":75,"h":50,"opacity":100,"txt":"Next \uF054"}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## Result
|
||||
|
||||
Page 0
|
||||
|
||||
Page 1
|
||||
|
||||
Page 2
|
||||
|
||||
Page 3
|
||||
22
docs/16-compiling.md
Normal file
22
docs/16-compiling.md
Normal file
@ -0,0 +1,22 @@
|
||||
## Cloning
|
||||
|
||||
Make sure to add the `--recursive` parameter when cloning the project from GitHub. Otherwise git will not download the required submodules in the `/lib` subdirectory.
|
||||
|
||||
```bash
|
||||
git clone --recursive https://github.com/fvanroie/hasp-lvgl
|
||||
```
|
||||
|
||||
If you already cloned hasp-lvgl without the submodules, you can fetch the submodules seperately using:
|
||||
|
||||
```bash
|
||||
git submodule update --init --recursive
|
||||
```
|
||||
|
||||
To switch to a different branch use:
|
||||
|
||||
```bash
|
||||
git clone --recursive https://github.com/fvanroie/hasp-lvgl
|
||||
cd hasp-lvgl
|
||||
git checkout 0.2.0
|
||||
git submodule update --init --recursive
|
||||
```
|
||||
60
docs/17-javascript.md
Normal file
60
docs/17-javascript.md
Normal file
@ -0,0 +1,60 @@
|
||||
|
||||
The theme's `assets/js/main.min.js` script is built from several vendor, jQuery plugins, and other scripts found in [`assets/js/`](https://github.com/mmistakes/minimal-mistakes/tree/master/assets/js).
|
||||
|
||||
```bash
|
||||
minimal mistakes
|
||||
├── assets
|
||||
| ├── js
|
||||
| | ├── plugins
|
||||
| | | ├── gumshoe.js # simple scrollspy
|
||||
| | | ├── jquery.ba-throttle-debounce.js # rate-limit functions
|
||||
| | | ├── jquery.fitvids.js # fluid width video embeds
|
||||
| | | ├── jquery.greedy-navigation.js # priority plus navigation
|
||||
| | | ├── jquery.magnific-popup.js # responsive lightbox
|
||||
| | | └── smooth-scroll.js # make same-page links scroll smoothly
|
||||
| | ├── vendor
|
||||
| | | └── jquery
|
||||
| | | └── jquery-3.4.1.js
|
||||
| | ├── _main.js # jQuery plugin settings and other scripts
|
||||
| | └── main.min.js # concatenated and minified theme script
|
||||
```
|
||||
|
||||
## Customizing
|
||||
|
||||
To modify or add your own scripts include them in [`assets/js/_main.js`](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/js/_main.js) and then rebuild using `npm run build:js`. See below for more details.
|
||||
|
||||
If you add additional scripts to `assets/js/plugins/` and would like them concatenated with the others, be sure to update the `uglify` script in [`package.json`](https://github.com/mmistakes/minimal-mistakes/blob/master/package.json). Same goes for scripts that you remove.
|
||||
|
||||
You can also add scripts to the `<head>` or closing `</body>` elements by adding paths to following arrays in `_config.yml`.
|
||||
|
||||
**Example:**
|
||||
|
||||
```yaml
|
||||
head_scripts:
|
||||
- https://code.jquery.com/jquery-3.3.1.min.js
|
||||
- /assets/js/your-custom-head-script.js
|
||||
footer_scripts:
|
||||
- /assets/js/your-custom-footer-script.js
|
||||
after_footer_scripts:
|
||||
- /assets/js/custom-script-loads-after-footer.js
|
||||
```
|
||||
|
||||
**Note:** If you assign `footer_scripts` the theme's `/assets/js/main.min.js` file will be deactivated. This script includes jQuery and various other plugins that you'll need to find replacements for and include separately.
|
||||
{: .notice--warning}
|
||||
|
||||
---
|
||||
|
||||
## Build process
|
||||
|
||||
In an effort to reduce dependencies a set of [**npm scripts**](https://css-tricks.com/why-npm-scripts/) are used to build `main.min.js` instead of task runners like [Gulp](http://gulpjs.com/) or [Grunt](http://gruntjs.com/). If those tools are more your style then by all means use them instead :wink:.
|
||||
|
||||
To get started:
|
||||
|
||||
1. Install [Node.js](http://nodejs.org/).
|
||||
2. `cd` to the root of your project.
|
||||
3. Install all of the dependencies by running `npm install`.
|
||||
|
||||
**Note:** If you upgraded from a previous version of the theme be sure you copied over [`package.json`](https://github.com/{{ site.repository }}/blob/master/package.json) prior to running `npm install`.
|
||||
{: .notice--warning}
|
||||
|
||||
If all goes well, running `npm run build:js` will compress/concatenate `_main.js` and all plugin scripts into `main.min.js`.
|
||||
1460
docs/18-history.md
Normal file
1460
docs/18-history.md
Normal file
File diff suppressed because it is too large
Load Diff
15
docs/19-contributing.md
Normal file
15
docs/19-contributing.md
Normal file
@ -0,0 +1,15 @@
|
||||
Having trouble working with the theme? Found a typo in the documentation? Interested in adding a feature or [fixing a bug](https://github.com/mmistakes/minimal-mistakes/issues)? Then by all means [submit an issue](https://github.com/mmistakes/minimal-mistakes/issues/new) or [pull request](https://help.github.com/articles/using-pull-requests/). If this is your first pull request, it may be helpful to read up on the [GitHub Flow](https://guides.github.com/introduction/flow/) first.
|
||||
|
||||
Minimal Mistakes has been designed as a base for you to customize and fit your site's unique needs. Please keep this in mind when requesting features and/or submitting pull requests. If it's not something that most people will use, I probably won't consider it. When in doubt ask.
|
||||
|
||||
This goes for author sidebar links and "share button" additions -- I have no intention of merging in every possibly option, the essentials are there to get you started :smile:.
|
||||
|
||||
## Pull requests
|
||||
|
||||
When submitting a pull request:
|
||||
|
||||
1. Clone the repo.
|
||||
2. Create a branch off of `master` and give it a meaningful name (e.g. `my-awesome-new-feature`) and describe the feature or fix.
|
||||
3. Open a pull request on GitHub.
|
||||
|
||||
Theme documentation and demo pages can be found in the [`/docs`](https://github.com/{{ site.repository }}/blob/master/docs) folder if you'd like to tackle any "low-hanging fruit" like fixing typos, bad grammar, etc.
|
||||
292
docs/20-docs-2-2.md
Normal file
292
docs/20-docs-2-2.md
Normal file
@ -0,0 +1,292 @@
|
||||
## Installation
|
||||
|
||||
Minimal Mistakes now requires [Jekyll](http://jekyllrb.com/) 3.0. Make sure to run `bundle update` if you aren't on the latest version to update all gem dependencies.
|
||||
|
||||
If you are creating a new Jekyll site using Minimal Mistakes follow these steps:
|
||||
|
||||
1. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/fork).
|
||||
2. Clone the repo you just forked and rename it.
|
||||
3. [Install Bundler](http://bundler.io) `gem install bundler` and Run `bundle install` to install all dependencies (Jekyll, [Jekyll-Sitemap](https://github.com/jekyll/jekyll-sitemap), [Octopress](https://github.com/octopress/octopress), etc)
|
||||
4. Update `config.yml`, add navigation, and replace demo posts and pages with your own. Full details below.
|
||||
|
||||
If you want to use Minimal Mistakes with an existing Jekyll site follow these steps:
|
||||
|
||||
1. [Download Minimal Mistakes](https://github.com/mmistakes/minimal-mistakes/releases/tag/2.2.1) and unzip.
|
||||
2. Rename `minimal-mistakes-master` to something meaningful ie: `new-site`
|
||||
3. Run `bundle install` to install all dependencies (Jekyll, [Jekyll-Sitemap](https://github.com/jekyll/jekyll-sitemap), [Octopress](https://github.com/octopress/octopress), etc)
|
||||
4. Remove demo posts/pages and replace with your own posts, pages, and any other content you want to move over.
|
||||
5. Update posts' and pages' YAML to match variables used by Minimal Mistakes. Full details below.
|
||||
6. Update `_config.yml` and add navigation links. Full details below.
|
||||
|
||||
**Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo site that I'm guessing you won't want.
|
||||
{: .notice}
|
||||
|
||||
## Running Jekyll
|
||||
|
||||
The preferred method for running Jekyll is with `bundle exec`, but if you're willing to deal gem conflicts feel free to go cowboy with a `jekyll serve` or `jekyll build`.
|
||||
|
||||
> In some cases, running executables without bundle exec may work, if the executable happens to be installed in your system and does not pull in any gems that conflict with your bundle.
|
||||
>
|
||||
>However, this is unreliable and is the source of considerable pain. Even if it looks like it works, it may not work in the future or on another machine.
|
||||
|
||||
```bash
|
||||
bundle exec jekyll serve
|
||||
```
|
||||
|
||||
## Scaffolding
|
||||
|
||||
How Minimal Mistakes is organized and what the various files are. All posts, layouts, includes, stylesheets, assets, and whatever else is grouped nicely under the root folder. The compiled Jekyll site outputs to `_site/`.
|
||||
|
||||
```bash
|
||||
minimal-mistakes/
|
||||
├── _includes/
|
||||
| ├── author-bio.html # bio stuff layout. pulls optional owner data from _config.yml
|
||||
| ├── browser-upgrade # prompt to install a modern browser for < IE9
|
||||
| ├── disqus-comments # Disqus comments script
|
||||
| ├── footer # site footer
|
||||
| ├── head # site head
|
||||
| ├── navigation # site top navigation
|
||||
| ├── open-graph.html # Twitter Cards and Open Graph meta data
|
||||
| └── scripts # site scripts
|
||||
├── _layouts/
|
||||
| ├── home.html # homepage layout
|
||||
| ├── page.html # page layout
|
||||
| ├── post-index.html # post index layout
|
||||
| └── post.html # single post layout
|
||||
├── _posts/ # MarkDown formatted posts
|
||||
├── _sass/ # Sass stylesheets
|
||||
├── _templates/ # used by Octopress to define YAML variables for new posts/pages
|
||||
├── about/ # sample about page
|
||||
├── assets/
|
||||
| ├── css/ # compiled stylesheets
|
||||
| ├── fonts/ # webfonts
|
||||
| ├── js/
|
||||
| | ├── _main.js # main JavaScript file, plugin settings, etc
|
||||
| | ├── plugins/ # scripts and jQuery plugins to combine with _main.js
|
||||
| | ├── scripts.min.js # concatenated and minified _main.js + plugin scripts
|
||||
| | └── vendor/ # vendor scripts to leave alone and load as is
|
||||
| └── less/
|
||||
├── images/ # images for posts and pages
|
||||
├── 404.md # 404 page
|
||||
├── feed.xml # Atom feed template
|
||||
├── index.md # sample homepage. lists 5 latest posts
|
||||
├── posts/ # sample post index page. lists all posts in reverse chronology
|
||||
└── theme-setup/ # theme setup page. safe to remove
|
||||
```
|
||||
|
||||
## Site Setup
|
||||
|
||||
A quick checklist of the files you'll want to edit to get up and running.
|
||||
|
||||
### Site Wide Configuration
|
||||
|
||||
`_config.yml` is your friend. Open it up and personalize it. Most variables are self explanatory but here's an explanation of each if needed:
|
||||
|
||||
#### title
|
||||
|
||||
The title of your site... shocker!
|
||||
|
||||
Example `title: My Awesome Site`
|
||||
|
||||
#### url
|
||||
|
||||
Used to generate absolute urls in `sitemap.xml`, `feed.xml`, and for generating canonical URLs in `<head>`. When developing locally either comment this out or use something like `http://localhost:4000` so all assets load properly. *Don't include a trailing `/`*.
|
||||
|
||||
Examples:
|
||||
|
||||
```yaml
|
||||
url: http://mmistakes.github.io/minimal-mistakes
|
||||
url: http://localhost:4000
|
||||
url: //cooldude.github.io
|
||||
url:
|
||||
```
|
||||
|
||||
#### Google Analytics and Webmaster Tools
|
||||
|
||||
Google Analytics UA and Webmaster Tool verification tags can be entered under `owner` in `_config.yml`. For more information on obtaining these meta tags check [Google Webmaster Tools](http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35179) and [Bing Webmaster Tools](https://ssl.bing.com/webmaster/configure/verify/ownership) support.
|
||||
|
||||
### Navigation Links
|
||||
|
||||
To set what links appear in the top navigation edit `_data/navigation.yml`. Use the following format to set the URL and title for as many links as you'd like. *External links will open in a new window.*
|
||||
|
||||
```yaml
|
||||
- title: Portfolio
|
||||
url: /portfolio/
|
||||
|
||||
- title: Made Mistakes
|
||||
url: http://mademistakes.com
|
||||
```
|
||||
|
||||
## Adding New Content with Octopress
|
||||
|
||||
While completely optional, I've included Octopress and some starter templates to automate the creation of new posts and pages. To take advantage of it start by installing the [Octopress](https://github.com/octopress/octopress) gem if it isn't already.
|
||||
|
||||
```bash
|
||||
$ gem install octopress
|
||||
```
|
||||
|
||||
### New Post
|
||||
|
||||
Default command
|
||||
|
||||
```bash
|
||||
$ octopress new post "Post Title"
|
||||
```
|
||||
|
||||
Default works great if you want all your posts in one directory, but if you're like me and want to group them into subfolders like `/posts`, `/portfolio`, etc. Then this is the command for you. By specifying the DIR it will create a new post in that folder and populate the `categories:` YAML with the same value.
|
||||
|
||||
```bash
|
||||
$ octopress new post "New Portfolio Post Title" --dir portfolio
|
||||
```
|
||||
|
||||
### New Page
|
||||
|
||||
To create a new page use the following command.
|
||||
|
||||
```bash
|
||||
$ octopress new page new-page/
|
||||
```
|
||||
|
||||
This will create a page at `/new-page/index.md`
|
||||
|
||||
## Layouts and Content
|
||||
|
||||
Explanations of the various `_layouts` included with the theme and when to use them.
|
||||
|
||||
### Post and Page
|
||||
|
||||
These two layouts are very similar. Both have an author sidebar, allow for large feature images at the top, and optional Disqus comments. The only real difference is the post layout includes related posts at the end of the page.
|
||||
|
||||
### Post Index Page
|
||||
|
||||
A [sample index page]({{ site.url }}/posts/) listing all posts grouped by the year they were published has been provided. The name can be customized to your liking by editing a few references. For example, to change **Posts** to **Writing** update the following:
|
||||
|
||||
In `_config.yml` under `links:` rename the title and URL to the following:
|
||||
|
||||
```yaml
|
||||
links:
|
||||
- title: Writing
|
||||
url: /writing/
|
||||
```
|
||||
|
||||
* Rename `posts/index.md` to `writing/index.md` and update the YAML front matter accordingly.
|
||||
* Update the **View all posts** link in the `post.html` layout found in `_layouts` to match title and URL set previously.
|
||||
|
||||
### Feature Images
|
||||
|
||||
A good rule of thumb is to keep feature images nice and wide so you don't push the body text too far down. An image cropped around around 1024 x 256 pixels will keep file size down with an acceptable resolution for most devices. If you want to serve these images responsively I'd suggest looking at the [Jekyll Picture Tag](https://github.com/robwierzbowski/jekyll-picture-tag) plugin[^plugins].
|
||||
|
||||
[^plugins]: If you're using GitHub Pages to host your site be aware that plugins are disabled. You'll need to build your site locally and then manually deploy if you want to use this sweet plugin.
|
||||
|
||||
The post and page layouts make the assumption that the feature images live in the `images/` folder. To add a feature image to a post or page just include the filename in the front matter like so. It's probably best to host all your images from this folder, but you can hotlink from external sources if you desire.
|
||||
|
||||
```yaml
|
||||
image:
|
||||
feature: feature-image-filename.jpg
|
||||
thumb: thumbnail-image.jpg #keep it square 200x200 px is good
|
||||
```
|
||||
|
||||
To add attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source if supplied.
|
||||
|
||||
```yaml
|
||||
image:
|
||||
feature: feature-image-filename.jpg
|
||||
credit: Michael Rose #name of the person or site you want to credit
|
||||
creditlink: http://mademistakes.com #url to their site or licensing
|
||||
```
|
||||
|
||||
### Thumbnails for OG and Twitter Cards
|
||||
|
||||
Feature and thumbnail images are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) as well. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
|
||||
|
||||
**Pro-Tip**: You need to [apply for Twitter Cards](https://dev.twitter.com/docs/cards) before they will begin showing up when links to your site are shared.
|
||||
{:.notice}
|
||||
|
||||
### Author Override
|
||||
|
||||
By making use of data files you can assign different authors for each post.
|
||||
|
||||
Start by modifying `authors.yml` file in the `_data` folder and add your authors using the following format.
|
||||
|
||||
```yaml
|
||||
# Authors
|
||||
|
||||
billy_rick:
|
||||
name : "Billy Rick"
|
||||
web : "http://thewhip.com"
|
||||
email : "billy@rick.com"
|
||||
bio : "What do you want, jewels? I am a very extravagant man."
|
||||
avatar : "bio-photo-2.jpg"
|
||||
twitter : "extravagantman"
|
||||
google_plus : "BillyRick"
|
||||
|
||||
cornelius_fiddlebone:
|
||||
name : "Cornelius Fiddlebone"
|
||||
email : "cornelius@thewhip.com"
|
||||
bio : "I ordered what?"
|
||||
avatar : "bio-photo.jpg"
|
||||
twitter : "rhymeswithsackit"
|
||||
google_plus : "CorneliusFiddlebone"
|
||||
```
|
||||
|
||||
To assign Billy Rick as an author for our post. We'd add the following YAML front matter to a post:
|
||||
|
||||
```yaml
|
||||
author: billy_rick
|
||||
```
|
||||
|
||||
### Kramdown Table of Contents
|
||||
|
||||
To include an auto-generated **table of contents** for posts and pages, add the following `_include` before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into list of links.
|
||||
|
||||
```html
|
||||
{% raw %}{% include toc.html %}{% endraw %}
|
||||
```
|
||||
|
||||
### Paragraph Indentation
|
||||
|
||||
By default the margin below paragraphs has been removed and indent added to each. This is an intentional design decision to mimic the look of type set in a printed book or manuscript.
|
||||
|
||||
<figure>
|
||||
<img src="{{ '/assets/images/paragraph-indent.png' | relative_url }}" alt="screen shot of paragraphs with default indent style set">
|
||||
<figcaption>Example of the default paragraph style (indented first line and bottom margin removed).</figcaption>
|
||||
</figure>
|
||||
|
||||
To disable the indents and add spacing between paragraphs change the following line in `_sass/variables.scss` from `true !default` to `false` like so.
|
||||
|
||||
```scss
|
||||
$paragraph-indent: false;
|
||||
```
|
||||
|
||||
<figure>
|
||||
<img src="{{ '/assets/images/paragraph-no-indent.png' | relative_url }}" alt="screen shot of paragraphs with indent style disabled">
|
||||
<figcaption>Example of paragraphs with $paragraph-indent disabled.</figcaption>
|
||||
</figure>
|
||||
|
||||
### Videos
|
||||
|
||||
Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/).
|
||||
|
||||
Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below:
|
||||
|
||||
```html
|
||||
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
|
||||
```
|
||||
|
||||
### Social Sharing Links
|
||||
|
||||
Social sharing links for Twitter, Facebook, and Google+ are included on posts/pages by default. To hide them on specific posts or pages add `share: false` to the YAML Front Matter. If you'd like to use different social networks modify `_includes/social-share` to your liking. Icons are set using [Font Awesome](http://fontawesome.io).
|
||||
|
||||
## Further Customization
|
||||
|
||||
Jekyll 2.x added support for Sass files making it much easier to modify a theme's fonts and colors. By editing values found in `_sass/variables.scss` you can fine tune the site's colors and typography.
|
||||
|
||||
For example if you wanted a red background instead of white you'd change `$bodycolor: #fff;` to `$bodycolor: $cc0033;`.
|
||||
|
||||
To modify the site's JavaScript files I setup a Grunt build script to lint/concatenate/minify all scripts into `scripts.min.js`. [Install Node.js](http://nodejs.org/), then [install Grunt](http://gruntjs.com/getting-started), and then finally install the dependencies for the theme contained in `package.json`:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
From the theme's root, use `grunt` concatenate JavaScript files, and optimize .jpg, .png, and .svg files in the `images/` folder. You can also use `grunt dev` in combination with `jekyll build --watch` to watch for updates JS files that Grunt will then automatically re-build as you write your code which will in turn auto-generate your Jekyll site when developing locally.
|
||||
83
docs/21-license.md
Normal file
83
docs/21-license.md
Normal file
@ -0,0 +1,83 @@
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Hasp-lvgl is Copyright (c) 2019-{{ site.time | date: '%Y' }} fvanroie, netwize.be and contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
-------------------------------------------
|
||||
Hasp-lvgl is based on the previous work of the following open source developers:
|
||||
|
||||
- [HASwitchPlate](https://github.com/aderusha/HASwitchPlate), the original Arduino project,
|
||||
Copyright© 2019 Allen Derusha.
|
||||
HASwitchPlate is distributed under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- [LVGL](https://lvgl.io/) graphics library,
|
||||
Copyright© 2016 Gábor Kiss-Vámosi and
|
||||
Copyright (c) 2020 LVGL LLC.
|
||||
LVGL is distributed under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- [TFT_eSPI](https://github.com/Bodmer/TFT_eSPI) display library,
|
||||
Copyright© 2020 Bodmer (https://github.com/Bodmer) All rights reserved.
|
||||
TFT_eSPI is distributed under the terms of the [FreeBSD License](https://opensource.org/licenses/BSD-2-Clause)
|
||||
and includes parts from the [Adafruit_GFX library](https://github.com/adafruit/Adafruit-GFX-Library),
|
||||
Copyright© 2012 Adafruit Industries. All rights reserved.
|
||||
Adafruit_GFX is distributed under the terms of the [BSD License](https://opensource.org/licenses/BSD-2-Clause)
|
||||
|
||||
- zi Font Engine
|
||||
Copyright© 2020 fvanroie, netwize.be
|
||||
[MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- [ArduinoJson](https://arduinojson.org/)
|
||||
Copyright© 2014-2020 Benoit BLANCHON
|
||||
[MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- [PubSubClient](https://github.com/knolleary/pubsubclient)
|
||||
Copyright© 2008-2015 Nicholas O'Leary
|
||||
[MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- Logging engine is based on [ArduinoLog](https://github.com/thijse/Arduino-Log),
|
||||
Copyright© 2017,2018 Thijs Elenbaas, MrRobot62, rahuldeo2047, NOX73, dhylands, Josha blemasle, mfalkvidd
|
||||
with modifications by fvanroie, netwize.be.
|
||||
ArduinoLog is distributed under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- [Syslog library](https://github.com/arcao/Syslog),
|
||||
Copyright© 2016 Martin Sloup
|
||||
[MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- [QR Code generator](https://github.com/nayuki/QR-Code-generator)
|
||||
Copyright© Project Nayuki
|
||||
[MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- [AceButton](https://github.com/bxparks/AceButton)
|
||||
Copyright© 2018 Brian T. Park
|
||||
[MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- Custom zi Fonts incorporate [Font Awesome](http://fontawesome.io/),
|
||||
Copyright© 2017 Dave Gandy.
|
||||
Font Awesome is distributed under the terms of the [SIL OFL 1.1](http://scripts.sil.org/OFL)
|
||||
and [MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
- The bootscreen uses the [MaterialDesign Icons](https://materialdesignicons.com/) font,
|
||||
Copyright© 2014, Austin Andrews (http://materialdesignicons.com/),
|
||||
MaterialDesign Icons font is licensed under the SIL Open Font License, Version 1.1.
|
||||
|
||||
- This website theme is based on [Minimal Mistakes](https://mmistakes.github.io/minimal-mistakes/),
|
||||
Copyright© 2013-2020 Michael Rose and contributors
|
||||
[MIT License](http://opensource.org/licenses/MIT).
|
||||
18
docs/38-firmware-esp.md
Normal file
18
docs/38-firmware-esp.md
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
## ESP Firmware Update
|
||||
|
||||
### Serial Upload
|
||||
|
||||
Either use Tasmotizer or esptool.py to upload a new firmware file to the ESP. This procedure is the same as the initial installation.
|
||||
|
||||
### HTTP Upload
|
||||
|
||||
When the ESP has previously been flashed via serial, you can upload a new firmware file using the internal webserver.
|
||||
|
||||
### HTTP Update
|
||||
|
||||
When the ESP has previously been flashed via serial you can download and install new firmware directly from an external webserver.
|
||||
|
||||
### OTA Upload
|
||||
|
||||
When the ESP has previously been flashed via serial, subsequent updates can be performed Over-the-Air from within PlatformIO.
|
||||
1
docs/39-firmware-stm32.md
Normal file
1
docs/39-firmware-stm32.md
Normal file
@ -0,0 +1 @@
|
||||
## STM32F4xx Firmware Update
|
||||
18
docs/CHANGELOG.md
Normal file
18
docs/CHANGELOG.md
Normal file
@ -0,0 +1,18 @@
|
||||
# Changelog
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
## [0.3.0](https://github.com/anikethsaha/docsify-changelog-plugin/compare/v0.2.0...v0.3.0) (2020-02-11)
|
||||
|
||||
|
||||
|
||||
## [0.2.0](https://github.com/anikethsaha/docsify-changelog-plugin/compare/v0.1.0...v0.2.0) (2020-02-11)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* major fix and added docs ([af58522](https://github.com/anikethsaha/docsify-changelog-plugin/commit/af58522))
|
||||
|
||||
|
||||
|
||||
## 0.1.0 (2020-02-11)
|
||||
9
docs/Configuration/30-http.md
Normal file
9
docs/Configuration/30-http.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Setup HTTP User Athentication
|
||||
|
||||
To restrict access to the web user interface you can set a Username and Password.
|
||||
|
||||
|
||||
|
||||
Click 'Save Settings' to activate.
|
||||
|
||||
* Please note that all http communication is unencrypted and that this is only a simple security measure
|
||||
49
docs/Configuration/32-mqtt.md
Normal file
49
docs/Configuration/32-mqtt.md
Normal file
@ -0,0 +1,49 @@
|
||||
|
||||
## MQTT
|
||||
|
||||
All communication between **HASP Open Display** and your Home Automation service is done over MQTT. You will need an already working MQTT Broker.
|
||||
|
||||
:question: If you do not know what MQTT is you can find more about the protocol on [MQTT Essentials](http://www.hivemq.com/mqtt-essentials/)
|
||||
|
||||
|
||||
|
||||
|
||||
### MQTT Settings
|
||||
|
||||
##### HASP Node Name
|
||||
The *Node Name* is the unique identifier of your device on your MQTT Broker.
|
||||
|
||||
For example, setting the *Node Name* to **plate35** will make the device listen and communicate on the main topic **hasp/plate35/**
|
||||
|
||||
##### Group Name
|
||||
The *Group Name* is the unique identifier for a **Group** of devices.
|
||||
|
||||
For example, the default *Group Name* is **plates**. This will make all devices in this group listen on the main topic **hasp/plates/**
|
||||
This way you can send a command to all devices in the group at the same moment. Each devices will only respond on their own main *Node Name* topic.
|
||||
|
||||
##### MQTT Broker
|
||||
Set the IP or hostname of your MQTT Broker
|
||||
|
||||
##### MQTT Port
|
||||
Set the port for your MQTT Broker
|
||||
|
||||
##### MQTT User and Password
|
||||
Enter credentials if your *MQTT Broker* requires a Username and Password.
|
||||
|
||||
---
|
||||
|
||||
Click 'Save Settings' to save you settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.
|
||||
|
||||
|
||||
## Commandline
|
||||
|
||||
You can also configure the mqtt settings via the serial or telnet console:
|
||||
|
||||
```bash
|
||||
hostname myPlateName
|
||||
mqtthost 192.168.0.123
|
||||
mqttport 1883
|
||||
mqttuser myUsername
|
||||
mqttpass myPassword
|
||||
reboot
|
||||
```
|
||||
40
docs/Configuration/33-hasp.md
Normal file
40
docs/Configuration/33-hasp.md
Normal file
@ -0,0 +1,40 @@
|
||||
|
||||
## HASP interface
|
||||
|
||||
You can configure the general look and feel for the interface by uploading you favorite fonts and selecting your favorite theme and color.
|
||||
|
||||
|
||||
|
||||
### HASP Settings
|
||||
|
||||
##### Upload
|
||||
|
||||
With the upload function you can upload 2 types of files
|
||||
* .jsonl
|
||||
This file contains the layout for the pages
|
||||
See 'pages' section for more information on this file
|
||||
* .zi
|
||||
These are font files used in the Nextion/TJC HMI disp.
|
||||
|
||||
##### UI Theme and Hue
|
||||
|
||||
Select one of the built-in themes to select the general style for the HASP interface.
|
||||
With the Hue slider you can select the base color for the built-in theme.
|
||||
|
||||
##### Startup layout
|
||||
|
||||
Enter the filename of the .jsonl you have uploaded to enables the layout on startup.
|
||||
|
||||
##### Startup Page
|
||||
|
||||
Select to what page the display should switch on startup.
|
||||
|
||||
##### Startup brightness
|
||||
|
||||
Select the brightness level of the display on startup.
|
||||
*Please note that the display must support dim feature and GPIO for dim is set in display setup.*
|
||||
|
||||
---
|
||||
|
||||
Click 'Save Settings' to save you settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.
|
||||
|
||||
31
docs/Configuration/34-wifi.md
Normal file
31
docs/Configuration/34-wifi.md
Normal file
@ -0,0 +1,31 @@
|
||||
|
||||
## Wifi
|
||||
|
||||
When using a wireless network adapter, you need to configure the SSID to connect.
|
||||
|
||||
|
||||
|
||||
### Wifi Settings
|
||||
|
||||
#### SSID
|
||||
|
||||
The name of the access point to connect to.
|
||||
|
||||
#### Password
|
||||
|
||||
Optional password for the access point, if required.
|
||||
|
||||
---
|
||||
|
||||
Click 'Save Settings' to save you settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.
|
||||
|
||||
|
||||
## Commandline
|
||||
|
||||
You can also configure the wifi settings via the serial or telnet console:
|
||||
|
||||
```bash
|
||||
ssid myAccessPointName
|
||||
pass myWifiPassword
|
||||
reboot
|
||||
```
|
||||
39
docs/Configuration/35-display.md
Normal file
39
docs/Configuration/35-display.md
Normal file
@ -0,0 +1,39 @@
|
||||
## Display
|
||||
|
||||
You can configure the general look and feel for the interface by uploading you favorite fonts and selecting your favorite theme and color.
|
||||
|
||||
|
||||
|
||||
### HASP Settings
|
||||
|
||||
##### Upload
|
||||
|
||||
With the upload function you can upload 2 types of files
|
||||
* .jsonl
|
||||
This file contains the layout for the pages
|
||||
See 'pages' section for more information on this file
|
||||
* .zi
|
||||
These are font files used in the Nextion/TJC HMI disp.
|
||||
|
||||
##### UI Theme and Hue
|
||||
|
||||
Select one of the built-in themes to select the general style for the HASP interface.
|
||||
With the Hue slider you can select the base color for the built-in theme.
|
||||
|
||||
##### Startup layout
|
||||
|
||||
Enter the filename of the .jsonl you have uploaded to enables the layout on startup.
|
||||
|
||||
##### Startup Page
|
||||
|
||||
Select to what page the display should switch on startup.
|
||||
|
||||
##### Startup brightness
|
||||
|
||||
Select the brightness level of the display on startup.
|
||||
*Please note that the display must support dim feature and GPIO for dim is set in display setup.*
|
||||
|
||||
---
|
||||
|
||||
Click 'Save Settings' to save you settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.
|
||||
|
||||
40
docs/Configuration/36-gpio.md
Normal file
40
docs/Configuration/36-gpio.md
Normal file
@ -0,0 +1,40 @@
|
||||
|
||||
## GPIO
|
||||
|
||||
You can configure the general look and feel for the interface by uploading you favorite fonts and selecting your favorite theme and color.
|
||||
|
||||
|
||||
|
||||
### HASP Settings
|
||||
|
||||
##### Upload
|
||||
|
||||
With the upload function you can upload 2 types of files
|
||||
* .jsonl
|
||||
This file contains the layout for the pages
|
||||
See 'pages' section for more information on this file
|
||||
* .zi
|
||||
These are font files used in the Nextion/TJC HMI disp.
|
||||
|
||||
##### UI Theme and Hue
|
||||
|
||||
Select one of the built-in themes to select the general style for the HASP interface.
|
||||
With the Hue slider you can select the base color for the built-in theme.
|
||||
|
||||
##### Startup layout
|
||||
|
||||
Enter the filename of the .jsonl you have uploaded to enables the layout on startup.
|
||||
|
||||
##### Startup Page
|
||||
|
||||
Select to what page the display should switch on startup.
|
||||
|
||||
##### Startup brightness
|
||||
|
||||
Select the brightness level of the display on startup.
|
||||
*Please note that the display must support dim feature and GPIO for dim is set in display setup.*
|
||||
|
||||
---
|
||||
|
||||
Click 'Save Settings' to save you settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.
|
||||
|
||||
40
docs/Configuration/37-debug.md
Normal file
40
docs/Configuration/37-debug.md
Normal file
@ -0,0 +1,40 @@
|
||||
|
||||
## Debug
|
||||
|
||||
You can configure the general look and feel for the interface by uploading you favorite fonts and selecting your favorite theme and color.
|
||||
|
||||
|
||||
|
||||
### HASP Settings
|
||||
|
||||
##### Upload
|
||||
|
||||
With the upload function you can upload 2 types of files
|
||||
* .jsonl
|
||||
This file contains the layout for the pages
|
||||
See 'pages' section for more information on this file
|
||||
* .zi
|
||||
These are font files used in the Nextion/TJC HMI disp.
|
||||
|
||||
##### UI Theme and Hue
|
||||
|
||||
Select one of the built-in themes to select the general style for the HASP interface.
|
||||
With the Hue slider you can select the base color for the built-in theme.
|
||||
|
||||
##### Startup layout
|
||||
|
||||
Enter the filename of the .jsonl you have uploaded to enables the layout on startup.
|
||||
|
||||
##### Startup Page
|
||||
|
||||
Select to what page the display should switch on startup.
|
||||
|
||||
##### Startup brightness
|
||||
|
||||
Select the brightness level of the display on startup.
|
||||
*Please note that the display must support dim feature and GPIO for dim is set in display setup.*
|
||||
|
||||
---
|
||||
|
||||
Click 'Save Settings' to save you settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.
|
||||
|
||||
10
docs/Configuration/_sidebar.md
Normal file
10
docs/Configuration/_sidebar.md
Normal file
@ -0,0 +1,10 @@
|
||||
<!-- docs/_sidebar.md -->
|
||||
|
||||
- **Configuration**
|
||||
- [HTTP](./configuration/30-http.md)
|
||||
- [MQTT](./configuration/32-mqtt.md)
|
||||
- [HASP](./configuration/33-hasp.md)
|
||||
- [Wifi](./configuration/34-wifi.md)
|
||||
- [Display](./configuration/35-display.md)
|
||||
- [GPIO](./configuration/36-gpio.md)
|
||||
- [Debug](./configuration/37-debug.md)
|
||||
1
docs/README.md
Normal file
1
docs/README.md
Normal file
@ -0,0 +1 @@
|
||||
test
|
||||
23
docs/_navbar.md
Normal file
23
docs/_navbar.md
Normal file
@ -0,0 +1,23 @@
|
||||
<!-- _navbar.md -->
|
||||
|
||||
* Getting started
|
||||
|
||||
* [Quick start](quickstart.md)
|
||||
* [Writing more pages](more-pages.md)
|
||||
* [Custom navbar](custom-navbar.md)
|
||||
* [Cover page](cover.md)
|
||||
|
||||
* Objects
|
||||
* [Button](13-objects?id=button)
|
||||
* [Checkbox](13-objects?id=checkbox)
|
||||
* [Text Label](13-objects?id=text-label)
|
||||
* [Arc](13-objects?id=arc)
|
||||
* [Colorwheel](13-objects?id=colorwheel)
|
||||
* [Slider](13-objects?id=slider)
|
||||
* [Double Slider](13-objects?id=double-slider)
|
||||
* [Gauge](13-objects?id=gauge)
|
||||
* [Progressbar](13-objects?id=progressbar)
|
||||
* [Switch](13-objects?id=switch)
|
||||
* [LED Indicator](13-objects?id=led-indicator)
|
||||
* [Dropdown List](13-objects?id=dropdown-list)
|
||||
* [Roller](13-objects?id=roller)
|
||||
23
docs/_sidebar.md
Normal file
23
docs/_sidebar.md
Normal file
@ -0,0 +1,23 @@
|
||||
<!-- docs/_sidebar.md -->
|
||||
|
||||
- **Getting Started**
|
||||
- [Hardware](./01-hardware.md)
|
||||
- [Firmware Install](./02-installation.md)
|
||||
- [Initial Setup](./03-wifi-setup.md)
|
||||
|
||||
- **Usage**
|
||||
- [Command Reference](./05-commands.md)
|
||||
- [Frequently Asked Questions](./06-faq.md)
|
||||
|
||||
- **Design Pages**
|
||||
- [Pages](./12-pages.md)
|
||||
- [Objects](./13-objects.md)
|
||||
- [Styling](./14-styling.md)
|
||||
|
||||
- **Demo Layouts**
|
||||
- [Example Pages](./15-example-pages.md)
|
||||
|
||||
- **Firmware Updates**
|
||||
- [ESP32](./38-firmware-esp.md)
|
||||
- [ESP8266](./38-firmware-esp.md)
|
||||
- [STM32F4xx](./39-firmware-stm32.md)
|
||||
189
docs/assets/css/prism-xonokai.css
Normal file
189
docs/assets/css/prism-xonokai.css
Normal file
@ -0,0 +1,189 @@
|
||||
/**
|
||||
* xonokai theme for JavaScript, CSS and HTML
|
||||
* based on: https://github.com/MoOx/sass-prism-theme-base by Maxime Thirouin ~ MoOx --> http://moox.fr/ , which is Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
||||
* license: MIT; http://moox.mit-license.org/
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: normal;
|
||||
font-family: Menlo, Monaco, "Courier New", monospace;
|
||||
font-size: 14px;
|
||||
color: #76d9e6;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
pre > code[class*="language-"] {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre[class*="language-"],
|
||||
:not(pre) > code[class*="language-"] {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e1e1e8;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre[class*="language-"] code {
|
||||
white-space: pre;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.15em 0.2em 0.05em;
|
||||
border-radius: .3em;
|
||||
border: 0.13em solid #7a6652;
|
||||
box-shadow: 1px 1px 0.3em -0.1em #000 inset;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #6f705e;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #a77afe;
|
||||
}
|
||||
|
||||
.token.attr-name,
|
||||
.token.string {
|
||||
color: #e6d06c;
|
||||
}
|
||||
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #e6d06c;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.inserted {
|
||||
color: #a6e22d;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword,
|
||||
.token.important,
|
||||
.token.deleted {
|
||||
color: #ef3b7d;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.statement {
|
||||
color: #76d9e6;
|
||||
}
|
||||
|
||||
.token.placeholder,
|
||||
.token.variable {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.statement,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #bebec5;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code.language-markup {
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
code.language-markup .token.tag {
|
||||
color: #ef3b7d;
|
||||
}
|
||||
|
||||
code.language-markup .token.attr-name {
|
||||
color: #a6e22d;
|
||||
}
|
||||
|
||||
code.language-markup .token.attr-value {
|
||||
color: #e6d06c;
|
||||
}
|
||||
|
||||
code.language-markup .token.style,
|
||||
code.language-markup .token.script {
|
||||
color: #76d9e6;
|
||||
}
|
||||
|
||||
code.language-markup .token.script .token.keyword {
|
||||
color: #76d9e6;
|
||||
}
|
||||
|
||||
/* Line highlight plugin */
|
||||
pre[class*="language-"][data-line] {
|
||||
position: relative;
|
||||
padding: 1em 0 1em 3em;
|
||||
}
|
||||
|
||||
pre[data-line] .line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin-top: 1em;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
pointer-events: none;
|
||||
line-height: inherit;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
pre[data-line] .line-highlight:before,
|
||||
pre[data-line] .line-highlight[data-end]:after {
|
||||
content: attr(data-start);
|
||||
position: absolute;
|
||||
top: .4em;
|
||||
left: .6em;
|
||||
min-width: 1em;
|
||||
padding: 0.2em 0.5em;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
color: black;
|
||||
font: bold 65%/1 sans-serif;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
border-radius: 999px;
|
||||
text-shadow: none;
|
||||
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
pre[data-line] .line-highlight[data-end]:after {
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
bottom: .4em;
|
||||
}
|
||||
BIN
docs/assets/images/faq/faq_file_browser.png
Normal file
BIN
docs/assets/images/faq/faq_file_browser.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
docs/assets/images/faq/faq_file_delete.png
Normal file
BIN
docs/assets/images/faq/faq_file_delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
docs/assets/images/hasp/header-small.png
Normal file
BIN
docs/assets/images/hasp/header-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
docs/assets/images/hasp/header.png
Normal file
BIN
docs/assets/images/hasp/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
BIN
docs/assets/images/hasp/oobe_setup.png
Normal file
BIN
docs/assets/images/hasp/oobe_setup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
docs/assets/images/hasp/touch_calibration.png
Normal file
BIN
docs/assets/images/hasp/touch_calibration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
BIN
docs/assets/images/hasp/wifi_setup.png
Normal file
BIN
docs/assets/images/hasp/wifi_setup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
docs/assets/images/objects/lv_ex_bar_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_bar_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
docs/assets/images/objects/lv_ex_btn_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_btn_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
docs/assets/images/objects/lv_ex_checkbox_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_checkbox_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
docs/assets/images/objects/lv_ex_cont_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_cont_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
docs/assets/images/objects/lv_ex_cpicker_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_cpicker_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
docs/assets/images/objects/lv_ex_dropdown_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_dropdown_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
docs/assets/images/objects/lv_ex_gauge_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_gauge_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/assets/images/objects/lv_ex_label_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_label_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
docs/assets/images/objects/lv_ex_led_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_led_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
docs/assets/images/objects/lv_ex_linemeter_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_linemeter_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
docs/assets/images/objects/lv_ex_page_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_page_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
docs/assets/images/objects/lv_ex_roller_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_roller_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
docs/assets/images/objects/lv_ex_slider_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_slider_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
docs/assets/images/objects/lv_ex_spinner_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_spinner_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
docs/assets/images/objects/lv_ex_switch_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_switch_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
docs/assets/images/objects/lv_ex_tabview_1.png
Normal file
BIN
docs/assets/images/objects/lv_ex_tabview_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
docs/assets/images/settings/configuration.png
Normal file
BIN
docs/assets/images/settings/configuration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/assets/images/settings/debug_settings.png
Normal file
BIN
docs/assets/images/settings/debug_settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/assets/images/settings/gui_settings.png
Normal file
BIN
docs/assets/images/settings/gui_settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
docs/assets/images/settings/hasp_settings.png
Normal file
BIN
docs/assets/images/settings/hasp_settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
docs/assets/images/settings/mqtt_settings.png
Normal file
BIN
docs/assets/images/settings/mqtt_settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Loading…
x
Reference in New Issue
Block a user