mirror of
https://github.com/cesanta/mongoose.git
synced 2024-11-24 02:59:01 +08:00
Reorg skeleton
This commit is contained in:
Sergey Lyubka
parent
4027bcf7ea
commit
d46e505a80
@ -0,0 +1,31 @@
|
|||||||
|
CFLAGS = -W -Wall -Wextra -Wundef -Wshadow -Wdouble-promotion
|
||||||
|
CFLAGS += -Wformat-truncation -fno-common -Wconversion -Wno-sign-conversion
|
||||||
|
CFLAGS += -g3 -Os -ffunction-sections -fdata-sections
|
||||||
|
CFLAGS += -I. -Icmsis_core/CMSIS/Core/Include -Icmsis_f7/Include
|
||||||
|
CFLAGS += -mcpu=cortex-m7 -mthumb -mfloat-abi=hard -mfpu=fpv5-sp-d16 $(CFLAGS_EXTRA)
|
||||||
|
LDFLAGS ?= -Tlink.ld -nostdlib -nostartfiles --specs nosys.specs -lc -lgcc -Wl,--gc-sections -Wl,-Map=$@.map
|
||||||
|
|
||||||
|
SOURCES += cmsis_f7/Source/Templates/gcc/startup_stm32f746xx.s
|
||||||
|
|
||||||
|
SOURCES += main.c hal.c mongoose.c packed_fs.c net.c
|
||||||
|
CFLAGS += -DHTTP_URL=\"http://0.0.0.0/\" -DHTTPS_URL=\"https://0.0.0.0/\"
|
||||||
|
|
||||||
|
all build example: firmware.bin
|
||||||
|
|
||||||
|
firmware.bin: firmware.elf
|
||||||
|
arm-none-eabi-objcopy -O binary $< $@
|
||||||
|
arm-none-eabi-size --format=berkeley $<
|
||||||
|
|
||||||
|
firmware.elf: cmsis_core cmsis_f7 $(SOURCES) hal.h link.ld Makefile
|
||||||
|
arm-none-eabi-gcc $(SOURCES) $(CFLAGS) $(LDFLAGS) -o $@
|
||||||
|
|
||||||
|
flash: firmware.bin
|
||||||
|
st-flash --reset write $< 0x8000000
|
||||||
|
|
||||||
|
cmsis_core:
|
||||||
|
git clone --depth 1 -b 5.9.0 https://github.com/ARM-software/CMSIS_5 $@
|
||||||
|
cmsis_f7:
|
||||||
|
git clone --depth 1 -b v1.2.8 https://github.com/STMicroelectronics/cmsis_device_f7 $@
|
||||||
|
|
||||||
|
clean:
|
||||||
|
rm -rf firmware.* cmsis_core cmsis_f7
|
||||||
146
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/hal.c
Normal file
146
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/hal.c
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
// Copyright (c) 2024 Cesanta Software Limited
|
||||||
|
// All rights reserved
|
||||||
|
|
||||||
|
#include "hal.h"
|
||||||
|
|
||||||
|
static volatile uint64_t s_ticks; // Milliseconds since boot
|
||||||
|
void SysTick_Handler(void) { // SyStick IRQ handler, triggered every 1ms
|
||||||
|
s_ticks++;
|
||||||
|
}
|
||||||
|
|
||||||
|
void mg_random(void *buf, size_t len) { // Use on-board RNG
|
||||||
|
for (size_t n = 0; n < len; n += sizeof(uint32_t)) {
|
||||||
|
uint32_t r = rng_read();
|
||||||
|
memcpy((char *) buf + n, &r, n + sizeof(r) > len ? len - n : sizeof(r));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
uint64_t mg_millis(void) { // Let Mongoose use our uptime function
|
||||||
|
return s_ticks; // Return number of milliseconds since boot
|
||||||
|
}
|
||||||
|
|
||||||
|
void hal_init(void) {
|
||||||
|
clock_init(); // Set system clock to SYS_FREQUENCY
|
||||||
|
SystemCoreClock = SYS_FREQUENCY; // Update SystemCoreClock global var
|
||||||
|
SysTick_Config(SystemCoreClock / 1000); // Sys tick every 1ms
|
||||||
|
rng_init(); // Initialise random number generator
|
||||||
|
|
||||||
|
uart_init(UART_DEBUG, 115200); // Initialise UART
|
||||||
|
gpio_output(LED1); // Initialise LED1
|
||||||
|
gpio_output(LED2); // Initialise LED2
|
||||||
|
gpio_output(LED3); // Initialise LED3
|
||||||
|
ethernet_init(); // Initialise Ethernet pins
|
||||||
|
}
|
||||||
|
|
||||||
|
#if defined(__ARMCC_VERSION)
|
||||||
|
// Keil specific - implement IO printf redirection
|
||||||
|
int fputc(int c, FILE *stream) {
|
||||||
|
if (stream == stdout || stream == stderr) uart_write_byte(UART_DEBUG, c);
|
||||||
|
return c;
|
||||||
|
}
|
||||||
|
#elif defined(__GNUC__)
|
||||||
|
// ARM GCC specific. ARM GCC is shipped with Newlib C library.
|
||||||
|
// Implement newlib syscalls:
|
||||||
|
// _sbrk() for malloc
|
||||||
|
// _write() for printf redirection
|
||||||
|
// the rest are just stubs
|
||||||
|
#include <sys/stat.h> // For _fstat()
|
||||||
|
|
||||||
|
uint32_t SystemCoreClock;
|
||||||
|
void SystemInit(void) { // Called automatically by startup code
|
||||||
|
}
|
||||||
|
|
||||||
|
int _fstat(int fd, struct stat *st) {
|
||||||
|
(void) fd, (void) st;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
extern unsigned char _end[]; // End of data section, start of heap. See link.ld
|
||||||
|
static unsigned char *s_current_heap_end = _end;
|
||||||
|
|
||||||
|
size_t hal_ram_used(void) {
|
||||||
|
return (size_t) (s_current_heap_end - _end);
|
||||||
|
}
|
||||||
|
|
||||||
|
size_t hal_ram_free(void) {
|
||||||
|
unsigned char endofstack;
|
||||||
|
return (size_t) (&endofstack - s_current_heap_end);
|
||||||
|
}
|
||||||
|
|
||||||
|
void *_sbrk(int incr) {
|
||||||
|
unsigned char *prev_heap;
|
||||||
|
unsigned char *heap_end = (unsigned char *) ((size_t) &heap_end - 256);
|
||||||
|
prev_heap = s_current_heap_end;
|
||||||
|
// Check how much space we got from the heap end to the stack end
|
||||||
|
if (s_current_heap_end + incr > heap_end) return (void *) -1;
|
||||||
|
s_current_heap_end += incr;
|
||||||
|
return prev_heap;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _open(const char *path) {
|
||||||
|
(void) path;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _close(int fd) {
|
||||||
|
(void) fd;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _isatty(int fd) {
|
||||||
|
(void) fd;
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _lseek(int fd, int ptr, int dir) {
|
||||||
|
(void) fd, (void) ptr, (void) dir;
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
void _exit(int status) {
|
||||||
|
(void) status;
|
||||||
|
for (;;) asm volatile("BKPT #0");
|
||||||
|
}
|
||||||
|
|
||||||
|
void _kill(int pid, int sig) {
|
||||||
|
(void) pid, (void) sig;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _getpid(void) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _write(int fd, char *ptr, int len) {
|
||||||
|
(void) fd, (void) ptr, (void) len;
|
||||||
|
if (fd == 1) uart_write_buf(UART_DEBUG, ptr, (size_t) len);
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _read(int fd, char *ptr, int len) {
|
||||||
|
(void) fd, (void) ptr, (void) len;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _link(const char *a, const char *b) {
|
||||||
|
(void) a, (void) b;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _unlink(const char *a) {
|
||||||
|
(void) a;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
int _stat(const char *path, struct stat *st) {
|
||||||
|
(void) path, (void) st;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
int mkdir(const char *path, mode_t mode) {
|
||||||
|
(void) path, (void) mode;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
void _init(void) {
|
||||||
|
}
|
||||||
|
#endif // __GNUC__
|
||||||
182
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/hal.h
Normal file
182
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/hal.h
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
// Copyright (c) 2022-2024 Cesanta Software Limited
|
||||||
|
// https://www.st.com/resource/en/reference_manual/dm00124865-stm32f75xxx-and-stm32f74xxx-advanced-arm-based-32-bit-mcus-stmicroelectronics.pdf
|
||||||
|
// https://www.st.com/resource/en/datasheet/stm32f746zg.pdf
|
||||||
|
|
||||||
|
#pragma once
|
||||||
|
|
||||||
|
#define LED1 PIN('B', 0) // On-board LED pin (green)
|
||||||
|
#define LED2 PIN('B', 7) // On-board LED pin (blue)
|
||||||
|
#define LED3 PIN('B', 14) // On-board LED pin (red)
|
||||||
|
#define UART_DEBUG USART3 // Wired to the on-board st-link debugger
|
||||||
|
|
||||||
|
#include <stm32f746xx.h>
|
||||||
|
|
||||||
|
#include <stdbool.h>
|
||||||
|
#include <stdint.h>
|
||||||
|
#include <stdio.h>
|
||||||
|
#include <string.h>
|
||||||
|
|
||||||
|
#define BIT(x) (1UL << (x))
|
||||||
|
#define CLRSET(reg, clear, set) ((reg) = ((reg) & ~(clear)) | (set))
|
||||||
|
#define PIN(bank, num) ((((bank) - 'A') << 8) | (num))
|
||||||
|
#define PINNO(pin) (pin & 255)
|
||||||
|
#define PINBANK(pin) (pin >> 8)
|
||||||
|
|
||||||
|
void hal_init(void);
|
||||||
|
size_t hal_ram_free(void);
|
||||||
|
size_t hal_ram_used(void);
|
||||||
|
|
||||||
|
/* System clock
|
||||||
|
5.3.3: APB1 clock <= 54MHz; APB2 clock <= 108MHz
|
||||||
|
3.3.2, Table 5: configure flash latency (WS) in accordance to clock freq
|
||||||
|
38.4: The AHB clock frequency must be at least 25 MHz when the Ethernet
|
||||||
|
controller is used */
|
||||||
|
enum { APB1_PRE = 5 /* AHB clock / 4 */, APB2_PRE = 4 /* AHB clock / 2 */ };
|
||||||
|
enum { PLL_HSI = 16, PLL_M = 8, PLL_N = 216, PLL_P = 2 }; // Run at 216 Mhz
|
||||||
|
#define FLASH_LATENCY 7
|
||||||
|
#define SYS_FREQUENCY ((PLL_HSI * PLL_N / PLL_M / PLL_P) * 1000000)
|
||||||
|
#define APB2_FREQUENCY (SYS_FREQUENCY / (BIT(APB2_PRE - 3)))
|
||||||
|
#define APB1_FREQUENCY (SYS_FREQUENCY / (BIT(APB1_PRE - 3)))
|
||||||
|
|
||||||
|
enum { GPIO_MODE_INPUT, GPIO_MODE_OUTPUT, GPIO_MODE_AF, GPIO_MODE_ANALOG };
|
||||||
|
enum { GPIO_OTYPE_PUSH_PULL, GPIO_OTYPE_OPEN_DRAIN };
|
||||||
|
enum { GPIO_SPEED_LOW, GPIO_SPEED_MEDIUM, GPIO_SPEED_HIGH, GPIO_SPEED_INSANE };
|
||||||
|
enum { GPIO_PULL_NONE, GPIO_PULL_UP, GPIO_PULL_DOWN };
|
||||||
|
#define GPIO(N) ((GPIO_TypeDef *) (0x40020000 + 0x400 * (N)))
|
||||||
|
|
||||||
|
static GPIO_TypeDef *gpio_bank(uint16_t pin) {
|
||||||
|
return GPIO(PINBANK(pin));
|
||||||
|
}
|
||||||
|
static inline void gpio_toggle(uint16_t pin) {
|
||||||
|
GPIO_TypeDef *gpio = gpio_bank(pin);
|
||||||
|
uint32_t mask = BIT(PINNO(pin));
|
||||||
|
gpio->BSRR = mask << (gpio->ODR & mask ? 16 : 0);
|
||||||
|
}
|
||||||
|
static inline int gpio_read(uint16_t pin) {
|
||||||
|
return gpio_bank(pin)->IDR & BIT(PINNO(pin)) ? 1 : 0;
|
||||||
|
}
|
||||||
|
static inline void gpio_write(uint16_t pin, bool val) {
|
||||||
|
GPIO_TypeDef *gpio = gpio_bank(pin);
|
||||||
|
gpio->BSRR = BIT(PINNO(pin)) << (val ? 0 : 16);
|
||||||
|
}
|
||||||
|
static inline void gpio_init(uint16_t pin, uint8_t mode, uint8_t type,
|
||||||
|
uint8_t speed, uint8_t pull, uint8_t af) {
|
||||||
|
GPIO_TypeDef *gpio = gpio_bank(pin);
|
||||||
|
uint8_t n = (uint8_t) (PINNO(pin));
|
||||||
|
RCC->AHB1ENR |= BIT(PINBANK(pin)); // Enable GPIO clock
|
||||||
|
CLRSET(gpio->OTYPER, 1UL << n, ((uint32_t) type) << n);
|
||||||
|
CLRSET(gpio->OSPEEDR, 3UL << (n * 2), ((uint32_t) speed) << (n * 2));
|
||||||
|
CLRSET(gpio->PUPDR, 3UL << (n * 2), ((uint32_t) pull) << (n * 2));
|
||||||
|
CLRSET(gpio->AFR[n >> 3], 15UL << ((n & 7) * 4),
|
||||||
|
((uint32_t) af) << ((n & 7) * 4));
|
||||||
|
CLRSET(gpio->MODER, 3UL << (n * 2), ((uint32_t) mode) << (n * 2));
|
||||||
|
}
|
||||||
|
static inline void gpio_input(uint16_t pin) {
|
||||||
|
gpio_init(pin, GPIO_MODE_INPUT, GPIO_OTYPE_PUSH_PULL, GPIO_SPEED_HIGH,
|
||||||
|
GPIO_PULL_NONE, 0);
|
||||||
|
}
|
||||||
|
static inline void gpio_output(uint16_t pin) {
|
||||||
|
gpio_init(pin, GPIO_MODE_OUTPUT, GPIO_OTYPE_PUSH_PULL, GPIO_SPEED_HIGH,
|
||||||
|
GPIO_PULL_NONE, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
static inline void irq_exti_attach(uint16_t pin) {
|
||||||
|
uint8_t bank = (uint8_t) (PINBANK(pin)), n = (uint8_t) (PINNO(pin));
|
||||||
|
SYSCFG->EXTICR[n / 4] &= ~(15UL << ((n % 4) * 4));
|
||||||
|
SYSCFG->EXTICR[n / 4] |= (uint32_t) (bank << ((n % 4) * 4));
|
||||||
|
EXTI->IMR |= BIT(n);
|
||||||
|
EXTI->RTSR |= BIT(n);
|
||||||
|
EXTI->FTSR |= BIT(n);
|
||||||
|
int irqvec = n < 5 ? 6 + n : n < 10 ? 23 : 40; // IRQ vector index, 10.1.2
|
||||||
|
NVIC_SetPriority(irqvec, 3);
|
||||||
|
NVIC_EnableIRQ(irqvec);
|
||||||
|
}
|
||||||
|
|
||||||
|
static inline void uart_init(USART_TypeDef *uart, unsigned long baud) {
|
||||||
|
uint8_t af = 7; // Alternate function
|
||||||
|
uint16_t rx = 0, tx = 0; // pins
|
||||||
|
uint32_t freq = 0; // Bus frequency. UART1 is on APB2, rest on APB1
|
||||||
|
|
||||||
|
if (uart == USART1) freq = APB2_FREQUENCY, RCC->APB2ENR |= BIT(4);
|
||||||
|
if (uart == USART2) freq = APB1_FREQUENCY, RCC->APB1ENR |= BIT(17);
|
||||||
|
if (uart == USART3) freq = APB1_FREQUENCY, RCC->APB1ENR |= BIT(18);
|
||||||
|
|
||||||
|
if (uart == USART1) tx = PIN('A', 9), rx = PIN('A', 10);
|
||||||
|
if (uart == USART2) tx = PIN('A', 2), rx = PIN('A', 3);
|
||||||
|
if (uart == USART3) tx = PIN('D', 8), rx = PIN('D', 9);
|
||||||
|
|
||||||
|
gpio_init(tx, GPIO_MODE_AF, GPIO_OTYPE_PUSH_PULL, GPIO_SPEED_HIGH, 0, af);
|
||||||
|
gpio_init(rx, GPIO_MODE_AF, GPIO_OTYPE_PUSH_PULL, GPIO_SPEED_HIGH, 0, af);
|
||||||
|
uart->CR1 = 0; // Disable this UART
|
||||||
|
uart->BRR = freq / baud; // Set baud rate
|
||||||
|
uart->CR1 |= BIT(0) | BIT(2) | BIT(3); // Set UE, RE, TE
|
||||||
|
}
|
||||||
|
static inline void uart_write_byte(USART_TypeDef *uart, uint8_t byte) {
|
||||||
|
uart->TDR = byte;
|
||||||
|
while ((uart->ISR & BIT(7)) == 0) (void) 0;
|
||||||
|
}
|
||||||
|
static inline void uart_write_buf(USART_TypeDef *uart, char *buf, size_t len) {
|
||||||
|
while (len-- > 0) uart_write_byte(uart, *(uint8_t *) buf++);
|
||||||
|
}
|
||||||
|
static inline int uart_read_ready(USART_TypeDef *uart) {
|
||||||
|
return uart->ISR & BIT(5); // If RXNE bit is set, data is ready
|
||||||
|
}
|
||||||
|
static inline uint8_t uart_read_byte(USART_TypeDef *uart) {
|
||||||
|
return (uint8_t) (uart->RDR & 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
static inline void rng_init(void) {
|
||||||
|
RCC->AHB2ENR |= RCC_AHB2ENR_RNGEN;
|
||||||
|
RNG->CR |= RNG_CR_RNGEN;
|
||||||
|
}
|
||||||
|
static inline uint32_t rng_read(void) {
|
||||||
|
while ((RNG->SR & RNG_SR_DRDY) == 0) (void) 0;
|
||||||
|
return RNG->DR;
|
||||||
|
}
|
||||||
|
|
||||||
|
static inline void ethernet_init(void) {
|
||||||
|
// Initialise Ethernet. Enable MAC GPIO pins, see
|
||||||
|
// https://www.farnell.com/datasheets/2014265.pdf section 6.10
|
||||||
|
uint16_t pins[] = {PIN('A', 1), PIN('A', 2), PIN('A', 7),
|
||||||
|
PIN('B', 13), PIN('C', 1), PIN('C', 4),
|
||||||
|
PIN('C', 5), PIN('G', 11), PIN('G', 13)};
|
||||||
|
for (size_t i = 0; i < sizeof(pins) / sizeof(pins[0]); i++) {
|
||||||
|
gpio_init(pins[i], GPIO_MODE_AF, GPIO_OTYPE_PUSH_PULL, GPIO_SPEED_INSANE,
|
||||||
|
GPIO_PULL_NONE, 11); // 11 is the Ethernet function
|
||||||
|
}
|
||||||
|
RCC->APB2ENR |= RCC_APB2ENR_SYSCFGEN; // Enable SYSCFG
|
||||||
|
NVIC_EnableIRQ(ETH_IRQn); // Setup Ethernet IRQ handler
|
||||||
|
SYSCFG->PMC |= SYSCFG_PMC_MII_RMII_SEL; // Use RMII. Goes first!
|
||||||
|
RCC->AHB1ENR |=
|
||||||
|
RCC_AHB1ENR_ETHMACEN | RCC_AHB1ENR_ETHMACTXEN | RCC_AHB1ENR_ETHMACRXEN;
|
||||||
|
}
|
||||||
|
|
||||||
|
static inline void clock_init(void) {
|
||||||
|
SCB->CPACR |= ((3UL << 10 * 2) | (3UL << 11 * 2)); // Enable FPU
|
||||||
|
__DSB();
|
||||||
|
__ISB();
|
||||||
|
FLASH->ACR |= FLASH_LATENCY | BIT(8) | BIT(9); // Flash latency, prefetch
|
||||||
|
RCC->PLLCFGR &= ~((BIT(17) - 1)); // Clear PLL multipliers
|
||||||
|
RCC->PLLCFGR |= (((PLL_P - 2) / 2) & 3) << 16; // Set PLL_P
|
||||||
|
RCC->PLLCFGR |= PLL_M | (PLL_N << 6); // Set PLL_M and PLL_N
|
||||||
|
RCC->CR |= BIT(24); // Enable PLL
|
||||||
|
while ((RCC->CR & BIT(25)) == 0) (void) 0; // Wait until done
|
||||||
|
RCC->CFGR = (APB1_PRE << 10) | (APB2_PRE << 13); // Set prescalers
|
||||||
|
RCC->CFGR |= 2; // Set clock source to PLL
|
||||||
|
while ((RCC->CFGR & 12) == 0) (void) 0; // Wait until done
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper macro for MAC generation
|
||||||
|
#define UUID ((uint8_t *) UID_BASE) // Unique 96-bit chip ID. TRM 41.1
|
||||||
|
#define GENERATE_MAC_ADDRESS() \
|
||||||
|
{ \
|
||||||
|
2, UUID[0] ^ UUID[1], UUID[2] ^ UUID[3], UUID[4] ^ UUID[5], \
|
||||||
|
UUID[6] ^ UUID[7] ^ UUID[8], UUID[9] ^ UUID[10] ^ UUID[11] \
|
||||||
|
}
|
||||||
|
|
||||||
|
#define MG_TCPIP_DRIVER_INIT(mgr) \
|
||||||
|
struct mg_tcpip_driver_stm32f_data driver_data = {.mdc_cr = 4}; \
|
||||||
|
struct mg_tcpip_if mif = {.mac = GENERATE_MAC_ADDRESS(), \
|
||||||
|
.driver = &mg_tcpip_driver_stm32f, \
|
||||||
|
.driver_data = &driver_data}; \
|
||||||
|
mg_tcpip_init(&mgr, &mif);
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
ENTRY(Reset_Handler);
|
||||||
|
MEMORY {
|
||||||
|
flash(rx) : ORIGIN = 0x08000000, LENGTH = 1024k
|
||||||
|
sram(rwx) : ORIGIN = 0x20000000, LENGTH = 320k
|
||||||
|
}
|
||||||
|
_estack = ORIGIN(sram) + LENGTH(sram); /* stack points to end of SRAM */
|
||||||
|
|
||||||
|
SECTIONS {
|
||||||
|
.vectors : { KEEP(*(.isr_vector)) } > flash
|
||||||
|
.text : { *(.text* .text.*) } > flash
|
||||||
|
.rodata : { *(.rodata*) } > flash
|
||||||
|
|
||||||
|
.data : {
|
||||||
|
_sdata = .;
|
||||||
|
*(.first_data)
|
||||||
|
*(.data SORT(.data.*))
|
||||||
|
_edata = .;
|
||||||
|
} > sram AT > flash
|
||||||
|
_sidata = LOADADDR(.data);
|
||||||
|
|
||||||
|
.bss : { _sbss = .; *(.bss SORT(.bss.*) COMMON) _ebss = .; } > sram
|
||||||
|
|
||||||
|
. = ALIGN(8);
|
||||||
|
_end = .;
|
||||||
|
}
|
||||||
1
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/main.c
Symbolic link
1
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/main.c
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../windows-macos-linux/web-ui-dashboard/main.c
|
||||||
@ -0,0 +1 @@
|
|||||||
|
../../../../mongoose.c
|
||||||
@ -0,0 +1 @@
|
|||||||
|
../../../../mongoose.h
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
#pragma once
|
||||||
|
|
||||||
|
// See https://mongoose.ws/documentation/#build-options
|
||||||
|
#define MG_ARCH MG_ARCH_NEWLIB
|
||||||
|
#define MG_TLS MG_TLS_BUILTIN
|
||||||
|
|
||||||
|
#define MG_ENABLE_TCPIP 1
|
||||||
|
#define MG_ENABLE_CUSTOM_MILLIS 1
|
||||||
|
#define MG_ENABLE_CUSTOM_RANDOM 1
|
||||||
|
#define MG_ENABLE_PACKED_FS 1
|
||||||
|
#define MG_ENABLE_DRIVER_STM32F 1
|
||||||
1
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/net.c
Symbolic link
1
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/net.c
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../windows-macos-linux/web-ui-dashboard/net.c
|
||||||
1
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/net.h
Symbolic link
1
reference-projects/stm32/nucleo-f746zg/web-ui-dashboard/net.h
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../windows-macos-linux/web-ui-dashboard/net.h
|
||||||
@ -0,0 +1 @@
|
|||||||
|
../../../windows-macos-linux/web-ui-dashboard/packed_fs.c
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
# Environment setup: https://mongoose.ws/documentation/tutorials/tools/
|
||||||
|
|
||||||
|
PROG ?= ./example # Program we are building
|
||||||
|
PACK ?= ./pack # Packing executable
|
||||||
|
DELETE = rm -rf # Command to remove files
|
||||||
|
NPX ?= npx # For generating optimised tailwind CSS
|
||||||
|
OUT ?= -o $(PROG) # Compiler argument for output file
|
||||||
|
|
||||||
|
SOURCES = main.c mongoose.c net.c packed_fs.c
|
||||||
|
CFLAGS += -W -Wall -Wextra -Wundef -Wshadow -Wdouble-promotion -Wconversion -Wno-sign-conversion
|
||||||
|
CFLAGS += -fno-common -ffunction-sections -fdata-sections
|
||||||
|
CFLAGS += -g3 -Os -I.
|
||||||
|
|
||||||
|
# Mongoose build options. See https://mongoose.ws/documentation/#build-options
|
||||||
|
CFLAGS_MONGOOSE += -DMG_ENABLE_PACKED_FS=1
|
||||||
|
|
||||||
|
ifeq ($(OS),Windows_NT) # Windows settings. Assume MinGW compiler. To use VC: make CC=cl CFLAGS=/MD OUT=/Feprog.exe
|
||||||
|
PROG = example.exe # Use .exe suffix for the binary
|
||||||
|
PACK = pack.exe # Packing executable
|
||||||
|
CC = gcc # Use MinGW gcc compiler
|
||||||
|
CFLAGS += -lws2_32 # Link against Winsock library
|
||||||
|
DELETE = cmd /C del /Q /F /S # Command prompt command to delete files
|
||||||
|
endif
|
||||||
|
|
||||||
|
# Default target. Build and run program
|
||||||
|
all: $(PROG)
|
||||||
|
$(RUN) $(PROG) $(ARGS)
|
||||||
|
|
||||||
|
# Build program from sources
|
||||||
|
$(PROG): $(SOURCES)
|
||||||
|
$(CC) $(SOURCES) $(CFLAGS) $(CFLAGS_MONGOOSE) $(CFLAGS_EXTRA) $(OUT)
|
||||||
|
|
||||||
|
# Build using Microsoft Visual C compiler
|
||||||
|
vc: $(SOURCES) Makefile
|
||||||
|
cl $(SOURCES) /DMG_ENABLE_PACKED_FS=1 /MD /W3 /nologo /Fedemo.exe
|
||||||
|
|
||||||
|
# Bundle JS libraries (preact, preact-router, ...) into a single file
|
||||||
|
web_root/bundle.js:
|
||||||
|
curl -s https://npm.reversehttp.com/preact,preact/hooks,htm/preact,preact-router -o $@
|
||||||
|
|
||||||
|
# Create optimised CSS. Prerequisite: npm -g i tailwindcss tailwindcss-font-inter
|
||||||
|
web_root/main.css: web_root/index.html $(wildcard web_root/*.js)
|
||||||
|
$(NPX) tailwindcss -o $@ --minify
|
||||||
|
|
||||||
|
# Generate packed filesystem for serving Web UI
|
||||||
|
packed_fs.c: $(wildcard web_root/*) $(wildcard certs/*) Makefile
|
||||||
|
node pack.js $(addsuffix ::gzip, $(wildcard web_root/*)) certs/* > $@
|
||||||
|
|
||||||
|
# Cleanup. Delete built program and all build artifacts
|
||||||
|
clean:
|
||||||
|
$(DELETE) $(PROG) $(PACK) *.o *.obj *.exe *.dSYM mbedtls
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
-----BEGIN CERTIFICATE-----
|
||||||
|
MIIBCTCBsAIJAK9wbIDkHnAoMAoGCCqGSM49BAMCMA0xCzAJBgNVBAYTAklFMB4X
|
||||||
|
DTIzMDEyOTIxMjEzOFoXDTMzMDEyNjIxMjEzOFowDTELMAkGA1UEBhMCSUUwWTAT
|
||||||
|
BgcqhkjOPQIBBggqhkjOPQMBBwNCAARzSQS5OHd17lUeNI+6kp9WYu0cxuEIi/JT
|
||||||
|
jphbCmdJD1cUvhmzM9/phvJT9ka10Z9toZhgnBq0o0xfTQ4jC1vwMAoGCCqGSM49
|
||||||
|
BAMCA0gAMEUCIQCe0T2E0GOiVe9KwvIEPeX1J1J0T7TNacgR0Ya33HV9VgIgNvdn
|
||||||
|
aEWiBp1xshs4iz6WbpxrS1IHucrqkZuJLfNZGZI=
|
||||||
|
-----END CERTIFICATE-----
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
-----BEGIN EC PRIVATE KEY-----
|
||||||
|
MHcCAQEEICBz3HOkQLPBDtdknqC7k1PNsWj6HfhyNB5MenfjmqiooAoGCCqGSM49
|
||||||
|
AwEHoUQDQgAEc0kEuTh3de5VHjSPupKfVmLtHMbhCIvyU46YWwpnSQ9XFL4ZszPf
|
||||||
|
6YbyU/ZGtdGfbaGYYJwatKNMX00OIwtb8A==
|
||||||
|
-----END EC PRIVATE KEY-----
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
// Copyright (c) 2024 Cesanta Software Limited
|
||||||
|
// All rights reserved
|
||||||
|
|
||||||
|
#pragma once
|
||||||
|
|
||||||
|
#define LED1 0
|
||||||
|
#define LED2 1
|
||||||
|
#define UART_DEBUG NULL
|
||||||
|
|
||||||
|
// No-op HAL API implementation for a device with GPIO and UART
|
||||||
|
#define hal_init()
|
||||||
|
#define hal_ram_free() 0
|
||||||
|
#define hal_ram_used() 0
|
||||||
|
#define gpio_output(pin)
|
||||||
|
#define gpio_toggle(pin)
|
||||||
|
#define gpio_read(pin) 0
|
||||||
|
#define gpio_write(pin, val)
|
||||||
|
#define uart_init(uart, baud)
|
||||||
|
#define uart_read_ready(uart) 0
|
||||||
|
#define uart_write_byte(uart, ch)
|
||||||
|
#define uart_write_buf(uart, buf, len)
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
// Copyright (c) 2024 Cesanta Software Limited
|
||||||
|
// All rights reserved
|
||||||
|
|
||||||
|
#include "hal.h"
|
||||||
|
#include "mongoose.h"
|
||||||
|
#include "net.h"
|
||||||
|
|
||||||
|
#define BLINK_PERIOD_MS 1000 // LED blinking period in millis
|
||||||
|
|
||||||
|
static void timer_fn(void *arg) {
|
||||||
|
gpio_toggle(LED1); // Blink LED
|
||||||
|
(void) arg; // Unused
|
||||||
|
}
|
||||||
|
|
||||||
|
// In RTOS environment, you can run this function in a separate task
|
||||||
|
static void run_mongoose(void) {
|
||||||
|
struct mg_mgr mgr; // Mongoose event manager
|
||||||
|
mg_mgr_init(&mgr); // Initialise event manager
|
||||||
|
mg_log_set(MG_LL_DEBUG); // Set log level to debug
|
||||||
|
mg_timer_add(&mgr, BLINK_PERIOD_MS, MG_TIMER_REPEAT, timer_fn, NULL);
|
||||||
|
|
||||||
|
net_init(&mgr); // Initialise application defined in net.c
|
||||||
|
for (;;) { // Infinite event loop
|
||||||
|
mg_mgr_poll(&mgr, 0); // Process network events
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
int main(void) {
|
||||||
|
hal_init(); // Cross-platform hardware init
|
||||||
|
run_mongoose(); // Initialise and run network application
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
../../../mongoose.c
|
||||||
@ -0,0 +1 @@
|
|||||||
|
../../../mongoose.h
|
||||||
324
reference-projects/windows-macos-linux/web-ui-dashboard/net.c
Normal file
324
reference-projects/windows-macos-linux/web-ui-dashboard/net.c
Normal file
@ -0,0 +1,324 @@
|
|||||||
|
// Copyright (c) 2023 Cesanta Software Limited
|
||||||
|
// All rights reserved
|
||||||
|
|
||||||
|
#include "hal.h"
|
||||||
|
#include "net.h"
|
||||||
|
|
||||||
|
// Authenticated user.
|
||||||
|
// A user can be authenticated by:
|
||||||
|
// - a name:pass pair, passed in a header Authorization: Basic .....
|
||||||
|
// - an access_token, passed in a header Cookie: access_token=....
|
||||||
|
// When a user is shown a login screen, she enters a user:pass. If successful,
|
||||||
|
// a server responds with a http-only access_token cookie set.
|
||||||
|
struct user {
|
||||||
|
const char *name, *pass, *access_token;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Settings
|
||||||
|
struct settings {
|
||||||
|
bool log_enabled;
|
||||||
|
int log_level;
|
||||||
|
long brightness;
|
||||||
|
char *device_name;
|
||||||
|
};
|
||||||
|
|
||||||
|
static struct settings s_settings = {true, 1, 57, NULL};
|
||||||
|
|
||||||
|
static const char *s_json_header =
|
||||||
|
"Content-Type: application/json\r\n"
|
||||||
|
"Cache-Control: no-cache\r\n";
|
||||||
|
static uint64_t s_boot_timestamp = 0; // Updated by SNTP
|
||||||
|
|
||||||
|
// This is for newlib and TLS (mbedTLS)
|
||||||
|
uint64_t mg_now(void) {
|
||||||
|
return mg_millis() + s_boot_timestamp;
|
||||||
|
}
|
||||||
|
|
||||||
|
int ui_event_next(int no, struct ui_event *e) {
|
||||||
|
if (no < 0 || no >= MAX_EVENTS_NO) return 0;
|
||||||
|
|
||||||
|
srand((unsigned) no);
|
||||||
|
e->type = (uint8_t) rand() % 4;
|
||||||
|
e->prio = (uint8_t) rand() % 3;
|
||||||
|
e->timestamp =
|
||||||
|
(unsigned long) ((int64_t) mg_now() - 86400 * 1000 /* one day back */ +
|
||||||
|
no * 300 * 1000 /* 5 mins between alerts */ +
|
||||||
|
1000 * (rand() % 300) /* randomize event time */) /
|
||||||
|
1000UL;
|
||||||
|
|
||||||
|
mg_snprintf(e->text, MAX_EVENT_TEXT_SIZE, "event#%d", no);
|
||||||
|
return no + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// SNTP connection event handler. When we get a response from an SNTP server,
|
||||||
|
// adjust s_boot_timestamp. We'll get a valid time from that point on
|
||||||
|
static void sfn(struct mg_connection *c, int ev, void *ev_data) {
|
||||||
|
uint64_t *expiration_time = (uint64_t *) c->data;
|
||||||
|
if (ev == MG_EV_OPEN) {
|
||||||
|
*expiration_time = mg_millis() + 3000; // Store expiration time in 3s
|
||||||
|
} else if (ev == MG_EV_SNTP_TIME) {
|
||||||
|
uint64_t t = *(uint64_t *) ev_data;
|
||||||
|
s_boot_timestamp = t - mg_millis();
|
||||||
|
c->is_closing = 1;
|
||||||
|
} else if (ev == MG_EV_POLL) {
|
||||||
|
if (mg_millis() > *expiration_time) c->is_closing = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static void timer_sntp_fn(void *param) { // SNTP timer function. Sync up time
|
||||||
|
mg_sntp_connect(param, "udp://time.google.com:123", sfn, NULL);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parse HTTP requests, return authenticated user or NULL
|
||||||
|
static struct user *authenticate(struct mg_http_message *hm) {
|
||||||
|
// In production, make passwords strong and tokens randomly generated
|
||||||
|
// In this example, user list is kept in RAM. In production, it can
|
||||||
|
// be backed by file, database, or some other method.
|
||||||
|
static struct user users[] = {
|
||||||
|
{"admin", "admin", "admin_token"},
|
||||||
|
{"user1", "user1", "user1_token"},
|
||||||
|
{"user2", "user2", "user2_token"},
|
||||||
|
{NULL, NULL, NULL},
|
||||||
|
};
|
||||||
|
char user[64], pass[64];
|
||||||
|
struct user *u, *result = NULL;
|
||||||
|
mg_http_creds(hm, user, sizeof(user), pass, sizeof(pass));
|
||||||
|
MG_VERBOSE(("user [%s] pass [%s]", user, pass));
|
||||||
|
|
||||||
|
if (user[0] != '\0' && pass[0] != '\0') {
|
||||||
|
// Both user and password is set, search by user/password
|
||||||
|
for (u = users; result == NULL && u->name != NULL; u++)
|
||||||
|
if (strcmp(user, u->name) == 0 && strcmp(pass, u->pass) == 0) result = u;
|
||||||
|
} else if (user[0] == '\0') {
|
||||||
|
// Only password is set, search by token
|
||||||
|
for (u = users; result == NULL && u->name != NULL; u++)
|
||||||
|
if (strcmp(pass, u->access_token) == 0) result = u;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_login(struct mg_connection *c, struct user *u) {
|
||||||
|
char cookie[256];
|
||||||
|
mg_snprintf(cookie, sizeof(cookie),
|
||||||
|
"Set-Cookie: access_token=%s; Path=/; "
|
||||||
|
"%sHttpOnly; SameSite=Lax; Max-Age=%d\r\n",
|
||||||
|
u->access_token, c->is_tls ? "Secure; " : "", 3600 * 24);
|
||||||
|
mg_http_reply(c, 200, cookie, "{%m:%m}", MG_ESC("user"), MG_ESC(u->name));
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_logout(struct mg_connection *c) {
|
||||||
|
char cookie[256];
|
||||||
|
mg_snprintf(cookie, sizeof(cookie),
|
||||||
|
"Set-Cookie: access_token=; Path=/; "
|
||||||
|
"Expires=Thu, 01 Jan 1970 00:00:00 UTC; "
|
||||||
|
"%sHttpOnly; Max-Age=0; \r\n",
|
||||||
|
c->is_tls ? "Secure; " : "");
|
||||||
|
mg_http_reply(c, 200, cookie, "true\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_debug(struct mg_connection *c, struct mg_http_message *hm) {
|
||||||
|
int level = (int) mg_json_get_long(hm->body, "$.level", MG_LL_DEBUG);
|
||||||
|
mg_log_set(level);
|
||||||
|
mg_http_reply(c, 200, "", "Debug level set to %d\n", level);
|
||||||
|
}
|
||||||
|
|
||||||
|
static size_t print_int_arr(void (*out)(char, void *), void *ptr, va_list *ap) {
|
||||||
|
size_t i, len = 0, num = va_arg(*ap, size_t); // Number of items in the array
|
||||||
|
int *arr = va_arg(*ap, int *); // Array ptr
|
||||||
|
for (i = 0; i < num; i++) {
|
||||||
|
len += mg_xprintf(out, ptr, "%s%d", i == 0 ? "" : ",", arr[i]);
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_stats_get(struct mg_connection *c) {
|
||||||
|
int points[] = {21, 22, 22, 19, 18, 20, 23, 23, 22, 22, 22, 23, 22};
|
||||||
|
mg_http_reply(c, 200, s_json_header, "{%m:%d,%m:%d,%m:[%M]}\n",
|
||||||
|
MG_ESC("temperature"), 21, //
|
||||||
|
MG_ESC("humidity"), 67, //
|
||||||
|
MG_ESC("points"), print_int_arr,
|
||||||
|
sizeof(points) / sizeof(points[0]), points);
|
||||||
|
}
|
||||||
|
|
||||||
|
static size_t print_events(void (*out)(char, void *), void *ptr, va_list *ap) {
|
||||||
|
size_t len = 0;
|
||||||
|
struct ui_event ev;
|
||||||
|
int pageno = va_arg(*ap, int);
|
||||||
|
int no = (pageno - 1) * EVENTS_PER_PAGE;
|
||||||
|
int end = no + EVENTS_PER_PAGE;
|
||||||
|
|
||||||
|
while ((no = ui_event_next(no, &ev)) != 0 && no <= end) {
|
||||||
|
len += mg_xprintf(out, ptr, "%s{%m:%lu,%m:%d,%m:%d,%m:%m}\n", //
|
||||||
|
len == 0 ? "" : ",", //
|
||||||
|
MG_ESC("time"), ev.timestamp, //
|
||||||
|
MG_ESC("type"), ev.type, //
|
||||||
|
MG_ESC("prio"), ev.prio, //
|
||||||
|
MG_ESC("text"), MG_ESC(ev.text));
|
||||||
|
}
|
||||||
|
|
||||||
|
return len;
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_events_get(struct mg_connection *c,
|
||||||
|
struct mg_http_message *hm) {
|
||||||
|
int pageno = (int) mg_json_get_long(hm->body, "$.page", 1);
|
||||||
|
mg_http_reply(c, 200, s_json_header, "{%m:[%M], %m:%d}\n", MG_ESC("arr"),
|
||||||
|
print_events, pageno, MG_ESC("totalCount"), MAX_EVENTS_NO);
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_settings_set(struct mg_connection *c, struct mg_str body) {
|
||||||
|
struct settings settings;
|
||||||
|
char *s = mg_json_get_str(body, "$.device_name");
|
||||||
|
bool ok = true;
|
||||||
|
memset(&settings, 0, sizeof(settings));
|
||||||
|
mg_json_get_bool(body, "$.log_enabled", &settings.log_enabled);
|
||||||
|
settings.log_level = (int) mg_json_get_long(body, "$.log_level", 0);
|
||||||
|
settings.brightness = mg_json_get_long(body, "$.brightness", 0);
|
||||||
|
if (s && strlen(s) < MAX_DEVICE_NAME) {
|
||||||
|
free(settings.device_name);
|
||||||
|
settings.device_name = s;
|
||||||
|
} else {
|
||||||
|
free(s);
|
||||||
|
}
|
||||||
|
s_settings = settings; // Save to the device flash
|
||||||
|
mg_http_reply(c, 200, s_json_header,
|
||||||
|
"{%m:%s,%m:%m}", //
|
||||||
|
MG_ESC("status"), ok ? "true" : "false", //
|
||||||
|
MG_ESC("message"), MG_ESC(ok ? "Success" : "Failed"));
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_settings_get(struct mg_connection *c) {
|
||||||
|
mg_http_reply(c, 200, s_json_header, "{%m:%s,%m:%hhu,%m:%hhu,%m:%m}\n", //
|
||||||
|
MG_ESC("log_enabled"),
|
||||||
|
s_settings.log_enabled ? "true" : "false", //
|
||||||
|
MG_ESC("log_level"), s_settings.log_level, //
|
||||||
|
MG_ESC("brightness"), s_settings.brightness, //
|
||||||
|
MG_ESC("device_name"), MG_ESC(s_settings.device_name));
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_firmware_upload(struct mg_connection *c,
|
||||||
|
struct mg_http_message *hm) {
|
||||||
|
char name[64], offset[20], total[20];
|
||||||
|
struct mg_str data = hm->body;
|
||||||
|
long ofs = -1, tot = -1;
|
||||||
|
name[0] = offset[0] = '\0';
|
||||||
|
mg_http_get_var(&hm->query, "name", name, sizeof(name));
|
||||||
|
mg_http_get_var(&hm->query, "offset", offset, sizeof(offset));
|
||||||
|
mg_http_get_var(&hm->query, "total", total, sizeof(total));
|
||||||
|
MG_INFO(("File %s, offset %s, len %lu", name, offset, data.len));
|
||||||
|
if ((ofs = mg_json_get_long(mg_str(offset), "$", -1)) < 0 ||
|
||||||
|
(tot = mg_json_get_long(mg_str(total), "$", -1)) < 0) {
|
||||||
|
mg_http_reply(c, 500, "", "offset and total not set\n");
|
||||||
|
} else if (ofs == 0 && mg_ota_begin((size_t) tot) == false) {
|
||||||
|
mg_http_reply(c, 500, "", "mg_ota_begin(%ld) failed\n", tot);
|
||||||
|
} else if (data.len > 0 && mg_ota_write(data.ptr, data.len) == false) {
|
||||||
|
mg_http_reply(c, 500, "", "mg_ota_write(%lu) @%ld failed\n", data.len, ofs);
|
||||||
|
mg_ota_end();
|
||||||
|
} else if (data.len == 0 && mg_ota_end() == false) {
|
||||||
|
mg_http_reply(c, 500, "", "mg_ota_end() failed\n", tot);
|
||||||
|
} else {
|
||||||
|
mg_http_reply(c, 200, s_json_header, "true\n");
|
||||||
|
if (data.len == 0) {
|
||||||
|
// Successful mg_ota_end() called, schedule device reboot
|
||||||
|
mg_timer_add(c->mgr, 500, 0, (void (*)(void *)) mg_device_reset, NULL);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_firmware_commit(struct mg_connection *c) {
|
||||||
|
mg_http_reply(c, 200, s_json_header, "%s\n",
|
||||||
|
mg_ota_commit() ? "true" : "false");
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_firmware_rollback(struct mg_connection *c) {
|
||||||
|
mg_http_reply(c, 200, s_json_header, "%s\n",
|
||||||
|
mg_ota_rollback() ? "true" : "false");
|
||||||
|
}
|
||||||
|
|
||||||
|
static size_t print_status(void (*out)(char, void *), void *ptr, va_list *ap) {
|
||||||
|
int fw = va_arg(*ap, int);
|
||||||
|
return mg_xprintf(out, ptr, "{%m:%d,%m:%c%lx%c,%m:%u,%m:%u}\n",
|
||||||
|
MG_ESC("status"), mg_ota_status(fw), MG_ESC("crc32"), '"',
|
||||||
|
mg_ota_crc32(fw), '"', MG_ESC("size"), mg_ota_size(fw),
|
||||||
|
MG_ESC("timestamp"), mg_ota_timestamp(fw));
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_firmware_status(struct mg_connection *c) {
|
||||||
|
mg_http_reply(c, 200, s_json_header, "[%M,%M]\n", print_status,
|
||||||
|
MG_FIRMWARE_CURRENT, print_status, MG_FIRMWARE_PREVIOUS);
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_device_reset(struct mg_connection *c) {
|
||||||
|
mg_http_reply(c, 200, s_json_header, "true\n");
|
||||||
|
mg_timer_add(c->mgr, 500, 0, (void (*)(void *)) mg_device_reset, NULL);
|
||||||
|
}
|
||||||
|
|
||||||
|
static void handle_device_eraselast(struct mg_connection *c) {
|
||||||
|
size_t ss = mg_flash_sector_size(), size = mg_flash_size();
|
||||||
|
char *base = (char *) mg_flash_start(), *last = base + size - ss;
|
||||||
|
if (mg_flash_bank() == 2) last -= size / 2;
|
||||||
|
mg_flash_erase(last);
|
||||||
|
mg_http_reply(c, 200, s_json_header, "true\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
// HTTP request handler function
|
||||||
|
static void ev_handler(struct mg_connection *c, int ev, void *ev_data) {
|
||||||
|
if (ev == MG_EV_ACCEPT) {
|
||||||
|
if (c->fn_data != NULL) { // TLS listener!
|
||||||
|
struct mg_tls_opts opts = {0};
|
||||||
|
opts.cert = mg_unpacked("/certs/server_cert.pem");
|
||||||
|
opts.key = mg_unpacked("/certs/server_key.pem");
|
||||||
|
mg_tls_init(c, &opts);
|
||||||
|
}
|
||||||
|
} else if (ev == MG_EV_HTTP_MSG) {
|
||||||
|
struct mg_http_message *hm = (struct mg_http_message *) ev_data;
|
||||||
|
struct user *u = authenticate(hm);
|
||||||
|
|
||||||
|
if (mg_http_match_uri(hm, "/api/#") && u == NULL) {
|
||||||
|
mg_http_reply(c, 403, "", "Not Authorised\n");
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/login")) {
|
||||||
|
handle_login(c, u);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/logout")) {
|
||||||
|
handle_logout(c);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/debug")) {
|
||||||
|
handle_debug(c, hm);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/stats/get")) {
|
||||||
|
handle_stats_get(c);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/events/get")) {
|
||||||
|
handle_events_get(c, hm);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/settings/get")) {
|
||||||
|
handle_settings_get(c);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/settings/set")) {
|
||||||
|
handle_settings_set(c, hm->body);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/firmware/upload")) {
|
||||||
|
handle_firmware_upload(c, hm);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/firmware/commit")) {
|
||||||
|
handle_firmware_commit(c);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/firmware/rollback")) {
|
||||||
|
handle_firmware_rollback(c);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/firmware/status")) {
|
||||||
|
handle_firmware_status(c);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/device/reset")) {
|
||||||
|
handle_device_reset(c);
|
||||||
|
} else if (mg_http_match_uri(hm, "/api/device/eraselast")) {
|
||||||
|
handle_device_eraselast(c);
|
||||||
|
} else {
|
||||||
|
struct mg_http_serve_opts opts;
|
||||||
|
memset(&opts, 0, sizeof(opts));
|
||||||
|
opts.fs = HAL_FS;
|
||||||
|
opts.root_dir = HAL_WEB_ROOT_DIR;
|
||||||
|
mg_http_serve_dir(c, ev_data, &opts);
|
||||||
|
}
|
||||||
|
MG_DEBUG(("%lu %.*s %.*s -> %.*s", c->id, (int) hm->method.len,
|
||||||
|
hm->method.ptr, (int) hm->uri.len, hm->uri.ptr, (int) 3,
|
||||||
|
&c->send.buf[9]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void net_init(struct mg_mgr *mgr) {
|
||||||
|
s_settings.device_name = strdup("My Device");
|
||||||
|
mg_http_listen(mgr, HTTP_URL, ev_handler, NULL);
|
||||||
|
mg_http_listen(mgr, HTTPS_URL, ev_handler, (void *) 1);
|
||||||
|
mg_timer_add(mgr, 3600 * 1000, MG_TIMER_RUN_NOW | MG_TIMER_REPEAT,
|
||||||
|
timer_sntp_fn, mgr);
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
// Copyright (c) 2023-2024 Cesanta Software Limited
|
||||||
|
// All rights reserved
|
||||||
|
#pragma once
|
||||||
|
|
||||||
|
#include "mongoose.h"
|
||||||
|
|
||||||
|
#ifdef __cplusplus
|
||||||
|
extern "C" {
|
||||||
|
#endif
|
||||||
|
|
||||||
|
#if MG_ENABLE_FATFS
|
||||||
|
#define HAL_FS (&mg_fs_fat)
|
||||||
|
#define HAL_ROOT_DIR "/"
|
||||||
|
#elif MG_ENABLE_PACKED_FS
|
||||||
|
#define HAL_FS (&mg_fs_packed)
|
||||||
|
#define HAL_ROOT_DIR "/"
|
||||||
|
#else
|
||||||
|
#define HAL_FS (&mg_fs_posix)
|
||||||
|
#define HAL_ROOT_DIR "./"
|
||||||
|
#endif
|
||||||
|
|
||||||
|
#define HAL_WEB_ROOT_DIR HAL_ROOT_DIR "web_root"
|
||||||
|
|
||||||
|
#if defined(HTTP_URL) && defined(HTTPS_URL)
|
||||||
|
// Allow to override via the build flags
|
||||||
|
#elif MG_ENABLE_TCPIP
|
||||||
|
#define HTTP_URL "http://0.0.0.0:80" // Embedded build:
|
||||||
|
#define HTTPS_URL "https://0.0.0.0:443" // Use standard privileged ports
|
||||||
|
#else
|
||||||
|
#define HTTP_URL "http://0.0.0.0:8000" // Workstation build:
|
||||||
|
#define HTTPS_URL "https://0.0.0.0:8443" // Use non-privileged ports
|
||||||
|
#endif
|
||||||
|
|
||||||
|
#define MAX_DEVICE_NAME 40
|
||||||
|
#define MAX_EVENTS_NO 400
|
||||||
|
#define MAX_EVENT_TEXT_SIZE 10
|
||||||
|
#define EVENTS_PER_PAGE 20
|
||||||
|
|
||||||
|
// Event log entry
|
||||||
|
struct ui_event {
|
||||||
|
uint8_t type, prio;
|
||||||
|
unsigned long timestamp;
|
||||||
|
char text[10];
|
||||||
|
};
|
||||||
|
|
||||||
|
void net_init(struct mg_mgr *mgr);
|
||||||
|
|
||||||
|
#ifdef __cplusplus
|
||||||
|
}
|
||||||
|
#endif
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
// Copyright (c) 2024 Cesanta Software Limited
|
||||||
|
//
|
||||||
|
// Utility that generates packed filesystem C file compatible with the
|
||||||
|
// Mongoose Network Library, https://github.com/cesanta/mongoose
|
||||||
|
//
|
||||||
|
// Usage:
|
||||||
|
// node pack.js FILE[:DESTINATION[:gzip]] ...
|
||||||
|
|
||||||
|
const fs = require('fs');
|
||||||
|
const zlib = require('zlib');
|
||||||
|
const argv = process.argv.slice(2);
|
||||||
|
|
||||||
|
// Convert each command-line arguments into [ DATA_ARRAY, STRUCT_INITIALIZER ]
|
||||||
|
const entries = argv.map(function(filename, i) {
|
||||||
|
const parts = filename.split(':');
|
||||||
|
const stat = fs.statSync(parts[0]);
|
||||||
|
const data = fs.readFileSync(parts[0], null);
|
||||||
|
let bytes = Array.from(data);
|
||||||
|
let destination = (parts[1] || parts[0]).replace(/^\.+[\/\\]*/, '');
|
||||||
|
if (parts[2] == 'gzip') {
|
||||||
|
bytes = Array.from(zlib.gzipSync(data));
|
||||||
|
destination += '.gz';
|
||||||
|
}
|
||||||
|
|
||||||
|
// concat(0) appends trailing 0, in order to make any file an asciz string
|
||||||
|
return [
|
||||||
|
`static const unsigned char v${i}[] = {${bytes.concat(0).join(',')}};`,
|
||||||
|
` {"/${destination}", v${i}, sizeof(v${i}) - 1, ${parseInt(stat.mtimeMs / 1000)}}`,
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
process.stdout.write(`// DO NOT EDIT. This file is generated using this command:
|
||||||
|
// ${process.argv.join(' ')}
|
||||||
|
|
||||||
|
#include <stddef.h>
|
||||||
|
#include <string.h>
|
||||||
|
#include <time.h>
|
||||||
|
|
||||||
|
#if defined(__cplusplus)
|
||||||
|
extern "C" {
|
||||||
|
#endif
|
||||||
|
|
||||||
|
const char *mg_unlist(size_t no);
|
||||||
|
const char *mg_unpack(const char *, size_t *, time_t *);
|
||||||
|
|
||||||
|
#if defined(__cplusplus)
|
||||||
|
}
|
||||||
|
#endif
|
||||||
|
|
||||||
|
${entries.map(x => x[0]).join('\n\n')}
|
||||||
|
|
||||||
|
static const struct packed_file {
|
||||||
|
const char *name;
|
||||||
|
const unsigned char *data;
|
||||||
|
size_t size;
|
||||||
|
time_t mtime;
|
||||||
|
} packed_files[] = {
|
||||||
|
${entries.map(x => x[1]).join(',\n')},
|
||||||
|
{NULL, NULL, 0, 0}
|
||||||
|
};
|
||||||
|
|
||||||
|
static int scmp(const char *a, const char *b) {
|
||||||
|
while (*a && (*a == *b)) a++, b++;
|
||||||
|
return *(const unsigned char *) a - *(const unsigned char *) b;
|
||||||
|
}
|
||||||
|
|
||||||
|
const char *mg_unlist(size_t no) {
|
||||||
|
return packed_files[no].name;
|
||||||
|
}
|
||||||
|
|
||||||
|
const char *mg_unpack(const char *name, size_t *size, time_t *mtime) {
|
||||||
|
const struct packed_file *p;
|
||||||
|
for (p = packed_files; p->name != NULL; p++) {
|
||||||
|
if (scmp(p->name, name) != 0) continue;
|
||||||
|
if (size != NULL) *size = p->size;
|
||||||
|
if (mtime != NULL) *mtime = p->mtime;
|
||||||
|
return (const char *) p->data;
|
||||||
|
}
|
||||||
|
return NULL;
|
||||||
|
};
|
||||||
|
`);
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,17 @@
|
|||||||
|
module.exports = {
|
||||||
|
content: ['./web_root/*.{html,js}'],
|
||||||
|
xplugins: [ 'tailwindcss', 'xautoprefixer' ],
|
||||||
|
corePlugins: {outline: false},
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
fontFamily: {
|
||||||
|
sans:
|
||||||
|
[
|
||||||
|
"Inter var, Arial, Helvetica, sans-serif", {
|
||||||
|
fontFeatureSettings: '"cv11", "ss01"',
|
||||||
|
fontVariationSettings: '"opsz" 32',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,356 @@
|
|||||||
|
'use strict';
|
||||||
|
import { h, render, useState, useEffect, useRef, html, Router } from './bundle.js';
|
||||||
|
|
||||||
|
// Helper function that returns a promise that resolves after delay
|
||||||
|
const Delay = (ms, val) => new Promise(resolve => setTimeout(resolve, ms, val));
|
||||||
|
|
||||||
|
export const Icons = {
|
||||||
|
heart: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>`,
|
||||||
|
downArrowBox: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15M9 12l3 3m0 0l3-3m-3 3V2.25" /> </svg>`,
|
||||||
|
upArrowBox: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>`,
|
||||||
|
cog: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>`,
|
||||||
|
settingsH: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" /> </svg>`,
|
||||||
|
settingsV: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" /> </svg>`,
|
||||||
|
scan: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5m0 9V18A2.25 2.25 0 0118 20.25h-1.5m-9 0H6A2.25 2.25 0 013.75 18v-1.5M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> `,
|
||||||
|
desktop: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" /> </svg>`,
|
||||||
|
alert: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" /> </svg>`,
|
||||||
|
bell: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" /> </svg>`,
|
||||||
|
refresh: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /> </svg> `,
|
||||||
|
bars4: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" /> </svg>`,
|
||||||
|
bars3: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> </svg>`,
|
||||||
|
logout: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg>`,
|
||||||
|
save: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>`,
|
||||||
|
email: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /> </svg>`,
|
||||||
|
expand: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /> </svg>`,
|
||||||
|
shrink: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" /> </svg>`,
|
||||||
|
ok: props => html`<svg class=${props.class} fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg>`,
|
||||||
|
fail: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg>`,
|
||||||
|
upload: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" /> </svg> `,
|
||||||
|
download: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /> </svg> `,
|
||||||
|
bolt: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>`,
|
||||||
|
home: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /> </svg> `,
|
||||||
|
link: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /> </svg> `,
|
||||||
|
shield: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" /> </svg> `,
|
||||||
|
barsdown: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /> </svg> `,
|
||||||
|
arrowdown: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" /> </svg> `,
|
||||||
|
arrowup: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" /> </svg>`,
|
||||||
|
warn: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> </svg>`,
|
||||||
|
info: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /> </svg>`,
|
||||||
|
exclamationTriangle: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> </svg>`,
|
||||||
|
thumbUp: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" /> </svg>`,
|
||||||
|
backward: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 16.811c0 .864-.933 1.405-1.683.977l-7.108-4.062a1.125 1.125 0 010-1.953l7.108-4.062A1.125 1.125 0 0121 8.688v8.123zM11.25 16.811c0 .864-.933 1.405-1.683.977l-7.108-4.062a1.125 1.125 0 010-1.953L9.567 7.71a1.125 1.125 0 011.683.977v8.123z" /> </svg>`,
|
||||||
|
chip: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z" /> </svg>`,
|
||||||
|
camera: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" /> </svg>`,
|
||||||
|
arrows: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" /> </svg>`,
|
||||||
|
doc: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>`,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const tipColors = {
|
||||||
|
green: 'bg-green-100 text-green-900 ring-green-300',
|
||||||
|
yellow: 'bg-yellow-100 text-yellow-900 ring-yellow-300',
|
||||||
|
red: 'bg-red-100 text-red-900 ring-red-300',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Button({title, onclick, disabled, cls, icon, ref, colors, hovercolor, disabledcolor}) {
|
||||||
|
const [spin, setSpin] = useState(false);
|
||||||
|
const cb = function(ev) {
|
||||||
|
const res = onclick ? onclick() : null;
|
||||||
|
if (res && typeof (res.catch) === 'function') {
|
||||||
|
setSpin(true);
|
||||||
|
res.catch(() => false).then(() => setSpin(false));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (!colors) colors = 'bg-blue-600 hover:bg-blue-500 disabled:bg-blue-400';
|
||||||
|
return html`
|
||||||
|
<button type="button" class="inline-flex justify-center items-center gap-2 rounded px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm ${colors} ${cls}"
|
||||||
|
ref=${ref} onclick=${cb} disabled=${disabled || spin} >
|
||||||
|
${title}
|
||||||
|
<${spin ? Icons.refresh : icon} class="w-4 ${spin ? 'animate-spin' : ''}" />
|
||||||
|
<//>`
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Notification({ok, text, close}) {
|
||||||
|
const closebtn = useRef(null);
|
||||||
|
const from = 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2';
|
||||||
|
const to = 'translate-y-0 opacity-100 sm:translate-x-0';
|
||||||
|
const [tr, setTr] = useState(from);
|
||||||
|
useEffect(function() {
|
||||||
|
setTr(to);
|
||||||
|
setTimeout(ev => closebtn && closebtn.current.click && closebtn.current.click(), 1500);
|
||||||
|
}, []);
|
||||||
|
const onclose = ev => { setTr(from); setTimeout(close, 300); };
|
||||||
|
return html`
|
||||||
|
<div aria-live="assertive" class="z-10 pointer-events-none absolute inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
|
||||||
|
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||||
|
<div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transform ease-out duration-300 transition ${tr}">
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<${ok ? Icons.ok : Icons.fail} class="h-6 w-6 ${ok ? 'text-green-400' : 'text-red-400'}" />
|
||||||
|
<//>
|
||||||
|
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||||||
|
<p class="text-sm font-medium text-gray-900">${text}</p>
|
||||||
|
<p class="hidden mt-1 text-sm text-gray-500">Anyone with a link can now view this file.</p>
|
||||||
|
<//>
|
||||||
|
<div class="ml-4 flex flex-shrink-0">
|
||||||
|
<button type="button" ref=${closebtn} onclick=${onclose} class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none">
|
||||||
|
<span class="sr-only">Close</span>
|
||||||
|
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
|
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Login({loginFn, logoIcon, title, tipText}) {
|
||||||
|
const [user, setUser] = useState('');
|
||||||
|
const [pass, setPass] = useState('');
|
||||||
|
const onsubmit = function(ev) {
|
||||||
|
const authhdr = 'Basic ' + btoa(user + ':' + pass);
|
||||||
|
const headers = {Authorization: authhdr};
|
||||||
|
return fetch('api/login', {headers}).then(loginFn).finally(r => setPass(''));
|
||||||
|
};
|
||||||
|
return html`
|
||||||
|
<div class="h-full flex items-center justify-center bg-slate-200">
|
||||||
|
<div class="border rounded bg-white w-96 p-5">
|
||||||
|
<div class="my-5 py-2 flex items-center justify-center gap-x-4">
|
||||||
|
<${logoIcon} class="h-12 stroke-cyan-600 stroke-1" />
|
||||||
|
<h1 class="font-bold text-xl">${title || 'Login'}<//>
|
||||||
|
<//>
|
||||||
|
<div class="my-3">
|
||||||
|
<label class="block text-sm mb-1 dark:text-white">Username</label>
|
||||||
|
<input type="text" autocomplete="current-user" required
|
||||||
|
class="font-normal bg-white rounded border border-gray-300 w-full
|
||||||
|
flex-1 py-0.5 px-2 text-gray-900 placeholder:text-gray-400
|
||||||
|
focus:outline-none sm:text-sm sm:leading-6 disabled:cursor-not-allowed
|
||||||
|
disabled:bg-gray-100 disabled:text-gray-500"
|
||||||
|
oninput=${ev => setUser(ev.target.value)} value=${user} />
|
||||||
|
<//>
|
||||||
|
<div class="my-3">
|
||||||
|
<label class="block text-sm mb-1 dark:text-white">Password</label>
|
||||||
|
<input type="password" autocomplete="current-password" required
|
||||||
|
class="font-normal bg-white rounded border border-gray-300 w-full flex-1 py-0.5 px-2 text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500"
|
||||||
|
oninput=${ev => setPass(ev.target.value)}
|
||||||
|
value=${pass} onchange=${onsubmit} />
|
||||||
|
<//>
|
||||||
|
<div class="mt-7">
|
||||||
|
<${Button} title="Sign In" icon=${Icons.logout} onclick=${onsubmit} cls="flex w-full justify-center" />
|
||||||
|
<//>
|
||||||
|
<div class="mt-5 text-slate-400 text-xs">${tipText}<//>
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Colored({icon, text, colors}) {
|
||||||
|
colors ||= 'bg-slate-100 text-slate-900';
|
||||||
|
return html`
|
||||||
|
<span class="inline-flex items-center gap-1.5 py-0.5">
|
||||||
|
${icon && html`<${icon} class="w-5 h-5" />`}
|
||||||
|
<span class="inline-block font-medium rounded-md px-2 py-1 text-xs ring-1 ring-inset ${colors}">${text}<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Stat({title, text, tipText, tipIcon, tipColors, colors}) {
|
||||||
|
return html`
|
||||||
|
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-800">
|
||||||
|
<div class="overflow-auto rounded-lg bg-white px-4 py-2 ">
|
||||||
|
<div class="flex items-center gap-x-2">
|
||||||
|
<p class="text-sm truncate text-gray-500 font-medium"> ${title} </p>
|
||||||
|
<//>
|
||||||
|
<div class="mt-1 flex items-center gap-x-2">
|
||||||
|
<h3 class="text-xl truncate font-semibold tracking-tight ${colors || 'text-gray-800 dark:text-gray-200'}">
|
||||||
|
${text}
|
||||||
|
<//>
|
||||||
|
<span class="flex items-center ${tipText || 'hidden'}">
|
||||||
|
<${Colored} text=${tipText} icon=${tipIcon} colors=${tipColors} />
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TextValue({value, setfn, disabled, placeholder, type, addonRight, addonLeft, attr, min, max, step, mult}) {
|
||||||
|
const [bg, setBg] = useState('bg-white');
|
||||||
|
useEffect(() => { if (type == 'number') checkval(+min, +max, +value); }, []);
|
||||||
|
step ||= '1', mult ||= 1;
|
||||||
|
const checkval = function(min, max, v) {
|
||||||
|
setBg('bg-white');
|
||||||
|
if (min && v < min) setBg('bg-red-100 border-red-200');
|
||||||
|
if (max && v > max) setBg('bg-red-100 border-red-200');
|
||||||
|
};
|
||||||
|
const m = step.match(/^.+\.(.+)/);
|
||||||
|
const digits = m ? m[1].length : 0;
|
||||||
|
const onchange = ev => {
|
||||||
|
let v = ev.target.value;
|
||||||
|
if (type == 'number') {
|
||||||
|
checkval(+min, +max, +v);
|
||||||
|
v = +(parseFloat(v) / mult).toFixed(digits);
|
||||||
|
}
|
||||||
|
setfn(v);
|
||||||
|
};
|
||||||
|
if (type == 'number') value = +(value * mult).toFixed(digits);
|
||||||
|
return html`
|
||||||
|
<div class="flex w-full items-center rounded border shadow-sm ${bg}">
|
||||||
|
${addonLeft && html`<span class="inline-flex font-normal truncate py-1 border-r bg-slate-100 items-center border-gray-300 px-2 text-gray-500 text-xs">${addonLeft}<//>` }
|
||||||
|
<input type=${type || 'text'} disabled=${disabled} value=${value}
|
||||||
|
step=${step} min=${min} max=${max}
|
||||||
|
onchange=${onchange} ...${attr}
|
||||||
|
class="${bg} font-normal text-sm rounded w-full flex-1 py-0.5 px-2 text-gray-700 placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500" placeholder=${placeholder} />
|
||||||
|
${addonRight && html`<span class="inline-flex font-normal truncate py-1 border-l bg-slate-100 items-center border-gray-300 px-2 text-gray-500 text-xs overflow-scroll" style="min-width: 50%;">${addonRight}<//>` }
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SelectValue({value, setfn, options, disabled}) {
|
||||||
|
const toInt = x => x == parseInt(x) ? parseInt(x) : x;
|
||||||
|
const onchange = ev => setfn(toInt(ev.target.value));
|
||||||
|
return html`
|
||||||
|
<select onchange=${onchange} class="w-full rounded font-normal border py-0.5 px-1 text-gray-600 focus:outline-none text-sm disabled:cursor-not-allowed" disabled=${disabled}>
|
||||||
|
${options.map(v => html`<option value=${v[0]} selected=${v[0] == value}>${v[1]}<//>`) }
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SwitchValue({value, setfn}) {
|
||||||
|
const onclick = ev => setfn(!value);
|
||||||
|
const bg = !!value ? 'bg-blue-600' : 'bg-gray-200';
|
||||||
|
const tr = !!value ? 'translate-x-5' : 'translate-x-0';
|
||||||
|
return html`
|
||||||
|
<button type="button" onclick=${onclick} class="${bg} inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0 ring-0" role="switch" aria-checked=${!!value}>
|
||||||
|
<span aria-hidden="true" class="${tr} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 focus:ring-0 transition duration-200 ease-in-out"></span>
|
||||||
|
</button>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Setting(props) {
|
||||||
|
let input = TextValue;
|
||||||
|
if (props.type == 'switch') input = SwitchValue;
|
||||||
|
if (props.type == 'select') input = SelectValue;
|
||||||
|
return html`
|
||||||
|
<div class=${props.cls || 'grid grid-cols-2 gap-2 my-1'}>
|
||||||
|
<label class="flex items-center text-sm text-gray-700 mr-2 font-medium ${props.title || 'hidden'}">${props.title}<//>
|
||||||
|
<div class="flex items-center">${h(input, props)}<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Pagination({ totalItems, itemsPerPage, currentPage, setPageFn, colors }) {
|
||||||
|
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
||||||
|
const maxPageRange = 2;
|
||||||
|
const lessThanSymbol = "<";
|
||||||
|
const greaterThanSymbol = ">";
|
||||||
|
const whiteSpace = " ";
|
||||||
|
const itemcls = 'relative inline-flex items-center px-3 py-1 text-sm focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-blue-600';
|
||||||
|
colors ||= 'bg-blue-600';
|
||||||
|
|
||||||
|
const PageItem = ({ page, isActive }) => (
|
||||||
|
html`<a
|
||||||
|
onClick=${() => setPageFn(page)}
|
||||||
|
class="${itemcls} ${isActive ? `${colors} text-white` : 'cursor-pointer text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50'}"
|
||||||
|
>
|
||||||
|
${page}
|
||||||
|
</a>`
|
||||||
|
);
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="flex items-center justify-between bg-white px-3 py-2">
|
||||||
|
<div class="sm:flex sm:flex-1 sm:items-center sm:justify-between space-x-4 whitespace-nowrap select-none">
|
||||||
|
<p class="text-sm text-slate-500 font-medium">
|
||||||
|
showing <span class="font-bold text-slate-700">${(currentPage - 1) * itemsPerPage + 1}</span> - <span class="font-medium">${Math.min(currentPage * itemsPerPage, totalItems)}</span> of ${whiteSpace}
|
||||||
|
<span class="font-bold text-slate-700">${totalItems}</span> results
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<nav class="isolate inline-flex -space-x-px rounded-md" aria-label="Pagination">
|
||||||
|
<a
|
||||||
|
onClick=${() => setPageFn(Math.max(currentPage - 1, 1))}
|
||||||
|
class="relative inline-flex px-3 items-center text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 ${currentPage != 1 ? 'cursor-pointer' : ''} focus:z-20 focus:outline-offset-0">
|
||||||
|
${lessThanSymbol}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<${PageItem} page=${1} isActive=${currentPage === 1} />
|
||||||
|
${currentPage > maxPageRange + 2 ? html`<span class="${itemcls} ring-1 ring-inset ring-gray-300 text-slate-300">...</span>` : ''}
|
||||||
|
${Array.from({length: Math.min(totalPages, maxPageRange * 2 + 1)}, (_, i) => Math.max(2, currentPage - maxPageRange) + i).map(page => page > 1 && page < totalPages && html`<${PageItem} page=${page} isActive=${currentPage === page} />`)}
|
||||||
|
${currentPage < totalPages - (maxPageRange + 1) ? html`<span class="${itemcls} ring-1 ring-inset ring-gray-300 text-slate-300">...</span>` : ''}
|
||||||
|
${totalPages > 1 ? html`<${PageItem} page=${totalPages} isActive=${currentPage === totalPages} />` : ''}
|
||||||
|
|
||||||
|
<a
|
||||||
|
onClick=${() => setPageFn(Math.min(currentPage + 1, totalPages))}
|
||||||
|
class="relative inline-flex px-3 items-center text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 ${currentPage != totalPages ? 'cursor-pointer' : ''} focus:z-20 focus:outline-offset-0">
|
||||||
|
${greaterThanSymbol}
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function UploadFileButton(props) {
|
||||||
|
const [upload, setUpload] = useState(null); // Upload promise
|
||||||
|
const [status, setStatus] = useState(''); // Current upload status
|
||||||
|
const btn = useRef(null);
|
||||||
|
const input = useRef(null);
|
||||||
|
|
||||||
|
// Send a large file chunk by chunk
|
||||||
|
const sendFileData = function(url, fileName, fileData, chunkSize) {
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
const finish = ok => {
|
||||||
|
setUpload(null);
|
||||||
|
const res = props.onupload ? props.onupload(ok, fileName, fileData.length) : null;
|
||||||
|
if (res && typeof (res.catch) === 'function') {
|
||||||
|
res.catch(() => false).then(() => ok ? resolve() : reject());
|
||||||
|
} else {
|
||||||
|
ok ? resolve() : reject();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const sendChunk = function(offset) {
|
||||||
|
var chunk = fileData.subarray(offset, offset + chunkSize) || '';
|
||||||
|
var opts = {method: 'POST', body: chunk};
|
||||||
|
var fullUrl = url + '?offset=' + offset +
|
||||||
|
'&total=' + fileData.length +
|
||||||
|
'&name=' + encodeURIComponent(fileName);
|
||||||
|
var ok;
|
||||||
|
setStatus('Uploading ' + fileName + ', bytes ' + offset + '..' +
|
||||||
|
(offset + chunk.length) + ' of ' + fileData.length);
|
||||||
|
fetch(fullUrl, opts)
|
||||||
|
.then(function(res) {
|
||||||
|
if (res.ok && chunk.length > 0) sendChunk(offset + chunk.length);
|
||||||
|
ok = res.ok;
|
||||||
|
return res.text();
|
||||||
|
})
|
||||||
|
.then(function(text) {
|
||||||
|
if (!ok) setStatus('Error: ' + text), finish(ok); // Fail
|
||||||
|
if (chunk.length > 0) return; // More chunks to send
|
||||||
|
setStatus(x => x + '. Done, resetting device...');
|
||||||
|
finish(ok); // All chunks sent
|
||||||
|
});
|
||||||
|
};
|
||||||
|
sendChunk(0);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onchange = function(ev) {
|
||||||
|
if (!ev.target.files[0]) return;
|
||||||
|
let r = new FileReader(), f = ev.target.files[0];
|
||||||
|
r.readAsArrayBuffer(f);
|
||||||
|
r.onload = function() {
|
||||||
|
setUpload(sendFileData(props.url, f.name, new Uint8Array(r.result), 2048));
|
||||||
|
ev.target.value = '';
|
||||||
|
ev.preventDefault();
|
||||||
|
btn && btn.current.base.click();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const onclick = function(ev) {
|
||||||
|
let fn; setUpload(x => fn = x);
|
||||||
|
if (!fn) input.current.click(); // No upload in progress, show file dialog
|
||||||
|
return fn;
|
||||||
|
};
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="inline-flex flex-col ${props.class}">
|
||||||
|
<input class="hidden" type="file" ref=${input} onchange=${onchange} accept=${props.accept} />
|
||||||
|
<${Button} title=${props.title} icon=${Icons.download} onclick=${onclick} ref=${btn} colors=${props.colors} />
|
||||||
|
<div class="pt-2 text-sm text-slate-400 ${status || 'hidden'}">${status}<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
1
reference-projects/windows-macos-linux/web-ui-dashboard/web_root/history.min.js
vendored
Normal file
1
reference-projects/windows-macos-linux/web-ui-dashboard/web_root/history.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="h-full bg-white">
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'> <path stroke-linecap='round' stroke-linejoin='round' d='M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0' /> </svg>" />
|
||||||
|
<link href="main.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body class="min-h-screen"></body>
|
||||||
|
<script src="history.min.js"></script>
|
||||||
|
<script type="module" src="main.js"></script>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,376 @@
|
|||||||
|
// NOTE: API calls must start with 'api/' in order to serve the app at any URI
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
import { h, render, useState, useEffect, useRef, html, Router } from './bundle.js';
|
||||||
|
import { Icons, Login, Setting, Button, Stat, tipColors, Colored, Notification, Pagination, UploadFileButton } from './components.js';
|
||||||
|
|
||||||
|
const Logo = props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.87 12.85"><defs><style>.ll-cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="ll-cls-1" d="M12.62,1.82V8.91A1.58,1.58,0,0,1,11,10.48H4a1.44,1.44,0,0,1-1-.37A.69.69,0,0,1,2.84,10l-.1-.12a.81.81,0,0,1-.15-.48V5.57a.87.87,0,0,1,.86-.86H4.73V7.28a.86.86,0,0,0,.86.85H9.42a.85.85,0,0,0,.85-.85V3.45A.86.86,0,0,0,10.13,3,.76.76,0,0,0,10,2.84a.29.29,0,0,0-.12-.1,1.49,1.49,0,0,0-1-.37H2.39V1.82A1.57,1.57,0,0,1,4,.25H11A1.57,1.57,0,0,1,12.62,1.82Z"/><path class="ll-cls-1" d="M10.48,10.48V11A1.58,1.58,0,0,1,8.9,12.6H1.82A1.57,1.57,0,0,1,.25,11V3.94A1.57,1.57,0,0,1,1.82,2.37H8.9a1.49,1.49,0,0,1,1,.37l.12.1a.76.76,0,0,1,.11.14.86.86,0,0,1,.14.47V7.28a.85.85,0,0,1-.85.85H8.13V5.57a.86.86,0,0,0-.85-.86H3.45a.87.87,0,0,0-.86.86V9.4a.81.81,0,0,0,.15.48l.1.12a.69.69,0,0,0,.13.11,1.44,1.44,0,0,0,1,.37Z"/></g></g></svg>`;
|
||||||
|
|
||||||
|
function Header({logout, user, setShowSidebar, showSidebar}) {
|
||||||
|
return html`
|
||||||
|
<div class="bg-white sticky top-0 z-[48] xw-full border-b py-2 ${showSidebar && 'pl-72'} transition-all duration-300 transform">
|
||||||
|
<div class="px-2 w-full py-0 my-0 flex items-center">
|
||||||
|
<button type="button" onclick=${ev => setShowSidebar(v => !v)} class="text-slate-400">
|
||||||
|
<${Icons.bars3} class="h-6" />
|
||||||
|
<//>
|
||||||
|
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
|
||||||
|
<div class="relative flex flex-1"><//>
|
||||||
|
<div class="flex items-center gap-x-4 lg:gap-x-6">
|
||||||
|
<span class="text-sm text-slate-400">logged in as: ${user}<//>
|
||||||
|
<div class="hidden lg:block lg:h-4 lg:w-px lg:bg-gray-200" aria-hidden="true"><//>
|
||||||
|
<${Button} title="Logout" icon=${Icons.logout} onclick=${logout} />
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
function Sidebar({url, show}) {
|
||||||
|
const NavLink = ({title, icon, href, url}) => html`
|
||||||
|
<div>
|
||||||
|
<a href="#${href}" class="${href == url ? 'bg-slate-50 text-blue-600 group' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-50 group'} flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
||||||
|
<${icon} class="w-6 h-6"/>
|
||||||
|
${title}
|
||||||
|
<///>
|
||||||
|
<//>`;
|
||||||
|
return html`
|
||||||
|
<div class="bg-violet-100 hs-overlay hs-overlay-open:translate-x-0
|
||||||
|
-translate-x-full transition-all duration-300 transform
|
||||||
|
fixed top-0 left-0 bottom-0 z-[60] w-72 bg-white border-r
|
||||||
|
border-gray-200 overflow-y-auto scrollbar-y
|
||||||
|
${show && 'translate-x-0'} right-auto bottom-0">
|
||||||
|
<div class="flex flex-col m-4 gap-y-6">
|
||||||
|
<div class="flex h-10 shrink-0 items-center gap-x-4 font-bold text-xl text-slate-500">
|
||||||
|
<${Logo} class="h-full"/> Your Brand
|
||||||
|
<//>
|
||||||
|
<div class="flex flex-1 flex-col">
|
||||||
|
<${NavLink} title="Dashboard" icon=${Icons.home} href="/" url=${url} />
|
||||||
|
<${NavLink} title="Settings" icon=${Icons.cog} href="/settings" url=${url} />
|
||||||
|
<${NavLink} title="Firmware Update" icon=${Icons.download} href="/update" url=${url} />
|
||||||
|
<${NavLink} title="Events" icon=${Icons.alert} href="/events" url=${url} />
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
function Events({}) {
|
||||||
|
const [events, setEvents] = useState([]);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
|
||||||
|
const refresh = () =>
|
||||||
|
fetch('api/events/get', {
|
||||||
|
method: 'POST', body: JSON.stringify({page: page}),
|
||||||
|
}).then(r => r.json())
|
||||||
|
.then(r => setEvents(r));
|
||||||
|
|
||||||
|
useEffect(refresh, [page]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setPage(JSON.parse(localStorage.getItem('page')));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
localStorage.setItem('page', page.toString());
|
||||||
|
}, [page]);
|
||||||
|
|
||||||
|
const Th = props => html`<th scope="col" class="sticky top-0 z-10 border-b border-slate-300 bg-white bg-opacity-75 py-1.5 px-4 text-left text-sm font-semibold text-slate-900 backdrop-blur backdrop-filter">${props.title}</th>`;
|
||||||
|
const Td = props => html`<td class="whitespace-nowrap border-b border-slate-200 py-2 px-4 pr-3 text-sm text-slate-900">${props.text}</td>`;
|
||||||
|
const Prio = ({prio}) => {
|
||||||
|
const text = ['high', 'medium', 'low'][prio];
|
||||||
|
const colors = [tipColors.red, tipColors.yellow, tipColors.green][prio];
|
||||||
|
return html`<${Colored} colors=${colors} text=${text} />`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Event = ({e}) => html`
|
||||||
|
<tr>
|
||||||
|
<${Td} text=${['power', 'hardware', 'tier3', 'tier4'][e.type]} />
|
||||||
|
<${Td} text=${html`<${Prio} prio=${e.prio}/>`} />
|
||||||
|
<${Td} text=${e.time ? (new Date(e.time * 1000)).toLocaleString() : '1970-01-01'} />
|
||||||
|
<${Td} text=${e.text} />
|
||||||
|
<//>`;
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="m-4 divide-y divide-gray-200 overflow-auto rounded bg-white">
|
||||||
|
<div class="font-semibold flex items-center text-gray-600 px-3 justify-between whitespace-nowrap">
|
||||||
|
<div class="font-semibold flex items-center text-gray-600">
|
||||||
|
<div class="mr-4">EVENT LOG</div>
|
||||||
|
</div>
|
||||||
|
<${Pagination} currentPage=${page} setPageFn=${setPage} totalItems=400 itemsPerPage=20 />
|
||||||
|
<//>
|
||||||
|
<div class="inline-block min-w-full align-middle" style="max-height: 82vh; overflow: auto;">
|
||||||
|
<table class="min-w-full border-separate border-spacing-0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<${Th} title="Type" />
|
||||||
|
<${Th} title="Prio" />
|
||||||
|
<${Th} title="Time" />
|
||||||
|
<${Th} title="Description" />
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
${(events.arr ? events.arr : []).map(e => h(Event, {e}))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
function Chart({data}) {
|
||||||
|
const n = data.length /* entries */, w = 20 /* entry width */, ls = 15/* left space */;
|
||||||
|
const h = 100 /* graph height */, yticks = 5 /* Y axis ticks */, bs = 10 /* bottom space */;
|
||||||
|
const ymax = 25;
|
||||||
|
const yt = i => (h - bs) / yticks * (i + 1);
|
||||||
|
const bh = p => (h - bs) * p / 100; // Bar height
|
||||||
|
const by = p => (h - bs) - bh(p);
|
||||||
|
const range = (start, size, step) => Array.from({length: size}, (_, i) => i * (step || 1) + start);
|
||||||
|
// console.log(ds);
|
||||||
|
return html`
|
||||||
|
<div class="my-4 divide-y divide-gray-200 overflow-auto rounded bg-white">
|
||||||
|
<div class="font-light uppercase flex items-center text-gray-600 px-4 py-2">
|
||||||
|
Temperature, last 24h
|
||||||
|
<//>
|
||||||
|
<div class="relative">
|
||||||
|
<svg class="bg-yellow-x50 w-full p-4" viewBox="0 0 ${n*w+ls} ${h}">
|
||||||
|
${range(0, yticks).map(i => html`
|
||||||
|
<line x1=0 y1=${yt(i)} x2=${ls+n*w} y2=${yt(i)} stroke-width=0.3 class="stroke-slate-300" stroke-dasharray="1,1" />
|
||||||
|
<text x=0 y=${yt(i)-2} class="text-[6px] fill-slate-400">${ymax-ymax/yticks*(i+1)}<//>
|
||||||
|
`)}
|
||||||
|
${range(0, n).map(x => html`
|
||||||
|
<rect x=${ls+x*w} y=${by(data[x]*100/ymax)} width=12 height=${bh(data[x]*100/ymax)} rx=2 class="fill-cyan-500" />
|
||||||
|
<text x=${ls+x*w} y=100 class="text-[6px] fill-slate-400">${x*2}:00<//>
|
||||||
|
`)}
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
function DeveloperNote({text, children}) {
|
||||||
|
return html`
|
||||||
|
<div class="flex p-4 gap-2">
|
||||||
|
<div class="text-sm text-slate-500">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<${Icons.info} class="self-start basis-[30px] grow-0 shrink-0 text-green-600 mr-2" />
|
||||||
|
<div class="font-semibold">Developer Note<//>
|
||||||
|
<//>
|
||||||
|
${(text || '').split('.').map(v => html` <p class="my-2 ">${v}<//>`)}
|
||||||
|
${children}
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
function Main({}) {
|
||||||
|
const [stats, setStats] = useState(null);
|
||||||
|
const refresh = () => fetch('api/stats/get').then(r => r.json()).then(r => setStats(r));
|
||||||
|
useEffect(refresh, []);
|
||||||
|
if (!stats) return '';
|
||||||
|
return html`
|
||||||
|
<div class="p-2">
|
||||||
|
<div class="p-4 sm:p-2 mx-auto grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<${Stat} title="Temperature" text="${stats.temperature} °C" tipText="good" tipIcon=${Icons.ok} tipColors=${tipColors.green} />
|
||||||
|
<${Stat} title="Humidity" text="${stats.humidity} %" tipText="warn" tipIcon=${Icons.warn} tipColors=${tipColors.yellow} />
|
||||||
|
<div class="bg-white col-span-2 border rounded-md shadow-lg" role="alert">
|
||||||
|
<${DeveloperNote} text="Stats data is received from the Mongoose backend" />
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<div class="p-4 sm:p-2 mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||||
|
|
||||||
|
<${Chart} data=${stats.points} />
|
||||||
|
|
||||||
|
<div class="my-4 hx-24 bg-white border rounded-md shadow-lg" role="alert">
|
||||||
|
<${DeveloperNote}
|
||||||
|
text="This chart is an SVG image, generated on the fly from the
|
||||||
|
data returned by the api/stats/get API call" />
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
function FirmwareStatus({title, info, children}) {
|
||||||
|
const state = ['UNAVAILABLE', 'FIRST_BOOT', 'NOT_COMMITTED', 'COMMITTED'][(info.status || 0) % 4];
|
||||||
|
const valid = info.status > 0;
|
||||||
|
return html`
|
||||||
|
<div class="bg-white py-1 divide-y border rounded">
|
||||||
|
<div class="font-light uppercase flex items-center text-gray-600 px-4 py-2">
|
||||||
|
${title}
|
||||||
|
<//>
|
||||||
|
<div class="px-4 py-2 relative">
|
||||||
|
<div class="my-1">Status: ${state}<//>
|
||||||
|
<div class="my-1">CRC32: ${valid ? info.crc32.toString(16) : 'n/a'}<//>
|
||||||
|
<div class="my-1">Size: ${valid ? info.size : 'n/a'}<//>
|
||||||
|
<div class="my-1">Flashed at: ${valid ? new Date(info.timestamp * 1000).toLocaleString() : 'n/a'}<//>
|
||||||
|
${children}
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function FirmwareUpdate({}) {
|
||||||
|
const [info, setInfo] = useState([{}, {}]);
|
||||||
|
const refresh = () => fetch('api/firmware/status').then(r => r.json()).then(r => setInfo(r));
|
||||||
|
useEffect(refresh, []);
|
||||||
|
const oncommit = ev => fetch('api/firmware/commit')
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(refresh);
|
||||||
|
const onreboot = ev => fetch('api/device/reset')
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(r => new Promise(r => setTimeout(ev => { refresh(); r(); }, 3000)));
|
||||||
|
const onrollback = ev => fetch('api/firmware/rollback')
|
||||||
|
.then(onreboot);
|
||||||
|
const onerase = ev => fetch('api/device/eraselast').then(refresh);
|
||||||
|
const onupload = function(ok, name, size) {
|
||||||
|
if (!ok) return false;
|
||||||
|
return new Promise(r => setTimeout(ev => { refresh(); r(); }, 3000));
|
||||||
|
};
|
||||||
|
return html`
|
||||||
|
<div class="m-4 gap-4 grid grid-cols-1 lg:grid-cols-3">
|
||||||
|
<${FirmwareStatus} title="Current firmware image" info=${info[0]}>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<${Button} title="Commit this firmware" onclick=${oncommit}
|
||||||
|
icon=${Icons.thumbUp} disabled=${info[0].status == 3} cls="w-full" />
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<${FirmwareStatus} title="Previous firmware image" info=${info[1]}>
|
||||||
|
<${Button} title="Rollback to this firmware" onclick=${onrollback}
|
||||||
|
icon=${Icons.backward} disabled=${info[1].status == 0} cls="w-full" />
|
||||||
|
<//>
|
||||||
|
<div class="bg-white xm-4 divide-y border rounded flex flex-col">
|
||||||
|
<div class="font-light uppercase flex items-center text-gray-600 px-4 py-2">
|
||||||
|
Device control
|
||||||
|
<//>
|
||||||
|
<div class="px-4 py-3 flex flex-col gap-2 grow">
|
||||||
|
<${UploadFileButton}
|
||||||
|
title="Upload new firmware .bin file" onupload=${onupload}
|
||||||
|
url="api/firmware/upload" accept=".bin,.uf2" />
|
||||||
|
<div class="grow"><//>
|
||||||
|
<${Button} title="Reboot device" onclick=${onreboot} icon=${Icons.refresh} cls="w-full" />
|
||||||
|
<${Button} title="Erase last sector" onclick=${onerase} icon=${Icons.doc} cls="w-full hidden" />
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="m-4 gap-4 grid grid-cols-1 lg:grid-cols-2">
|
||||||
|
<div class="bg-white border shadow-lg">
|
||||||
|
<${DeveloperNote}>
|
||||||
|
<div class="my-2">
|
||||||
|
Firmware status and other information is stored in the last sector
|
||||||
|
of flash
|
||||||
|
<//>
|
||||||
|
<div class="my-2">
|
||||||
|
Firmware status can be FIRST_BOOT, UNCOMMITTED or COMMITTED. If no
|
||||||
|
information is available, it is UNAVAILABLE.
|
||||||
|
<//>
|
||||||
|
<div class="my-2">
|
||||||
|
This GUI loads a firmware file and sends it chunk by chunk to the
|
||||||
|
device, passing current chunk offset, total firmware size and a file name:
|
||||||
|
api/firmware/upload?offset=X&total=Y&name=Z
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
|
||||||
|
<div class="bg-white border shadow-lg">
|
||||||
|
<${DeveloperNote}>
|
||||||
|
<div>
|
||||||
|
Firmware update mechanism defines 3 API functions that the target
|
||||||
|
device must implement: mg_ota_begin(), mg_ota_write() and mg_ota_end()
|
||||||
|
<//>
|
||||||
|
<div class="my-2">
|
||||||
|
RESTful API handlers use ota_xxx() API to save firmware to flash.
|
||||||
|
The last 0-length chunk triggers ota_end() which performs firmware
|
||||||
|
update using saved firmware image
|
||||||
|
<//>
|
||||||
|
<div class="my-2">
|
||||||
|
<a class="link text-blue-600 underline"
|
||||||
|
href="https://mongoose.ws/webinars/">Join our free webinar</a> to
|
||||||
|
get detailed explanations about possible firmware updates strategies
|
||||||
|
and implementation demo
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
function Settings({}) {
|
||||||
|
const [settings, setSettings] = useState(null);
|
||||||
|
const [saveResult, setSaveResult] = useState(null);
|
||||||
|
const refresh = () => fetch('api/settings/get')
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(r => setSettings(r));
|
||||||
|
useEffect(refresh, []);
|
||||||
|
|
||||||
|
const mksetfn = k => (v => setSettings(x => Object.assign({}, x, {[k]: v})));
|
||||||
|
const onsave = ev => fetch('api/settings/set', {
|
||||||
|
method: 'post', body: JSON.stringify(settings)
|
||||||
|
}).then(r => r.json())
|
||||||
|
.then(r => setSaveResult(r))
|
||||||
|
.then(refresh);
|
||||||
|
|
||||||
|
if (!settings) return '';
|
||||||
|
const logOptions = [[0, 'Disable'], [1, 'Error'], [2, 'Info'], [3, 'Debug']];
|
||||||
|
return html`
|
||||||
|
<div class="m-4 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
|
|
||||||
|
<div class="py-1 divide-y border rounded bg-white flex flex-col">
|
||||||
|
<div class="font-light uppercase flex items-center text-gray-600 px-4 py-2">
|
||||||
|
Device Settings
|
||||||
|
<//>
|
||||||
|
<div class="py-2 px-5 flex-1 flex flex-col relative">
|
||||||
|
${saveResult && html`<${Notification} ok=${saveResult.status}
|
||||||
|
text=${saveResult.message} close=${() => setSaveResult(null)} />`}
|
||||||
|
|
||||||
|
<${Setting} title="Enable Logs" value=${settings.log_enabled} setfn=${mksetfn('log_enabled')} type="switch" />
|
||||||
|
<${Setting} title="Log Level" value=${settings.log_level} setfn=${mksetfn('log_level')} type="select" addonLeft="0-3" disabled=${!settings.log_enabled} options=${logOptions}/>
|
||||||
|
<${Setting} title="Brightness" value=${settings.brightness} setfn=${mksetfn('brightness')} type="number" addonRight="%" />
|
||||||
|
<${Setting} title="Device Name" value=${settings.device_name} setfn=${mksetfn('device_name')} type="" />
|
||||||
|
<div class="mb-1 mt-3 flex place-content-end"><${Button} icon=${Icons.save} onclick=${onsave} title="Save Settings" /><//>
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
|
||||||
|
<div class="bg-white border rounded-md text-ellipsis overflow-auto" role="alert">
|
||||||
|
<${DeveloperNote}
|
||||||
|
text="A variety of controls are pre-defined to ease the development:
|
||||||
|
toggle button, dropdown select, input field with left and right
|
||||||
|
addons. Device settings are received by calling
|
||||||
|
api/settings/get API call, which returns settings JSON object.
|
||||||
|
Clicking on the save button calls api/settings/set
|
||||||
|
API call" />
|
||||||
|
<//>
|
||||||
|
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const App = function({}) {
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [url, setUrl] = useState('/');
|
||||||
|
const [user, setUser] = useState('');
|
||||||
|
const [showSidebar, setShowSidebar] = useState(true);
|
||||||
|
|
||||||
|
const logout = () => fetch('api/logout').then(r => setUser(''));
|
||||||
|
const login = r => !r.ok ? setLoading(false) && setUser(null) : r.json()
|
||||||
|
.then(r => setUser(r.user))
|
||||||
|
.finally(r => setLoading(false));
|
||||||
|
|
||||||
|
useEffect(() => fetch('api/login').then(login), []);
|
||||||
|
|
||||||
|
if (loading) return ''; // Show blank page on initial load
|
||||||
|
if (!user) return html`<${Login} loginFn=${login} logoIcon=${Logo}
|
||||||
|
title="Device Dashboard Login"
|
||||||
|
tipText="To login, use: admin/admin, user1/user1, user2/user2" />`; // If not logged in, show login screen
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="min-h-screen bg-slate-100">
|
||||||
|
<${Sidebar} url=${url} show=${showSidebar} />
|
||||||
|
<${Header} logout=${logout} user=${user} showSidebar=${showSidebar} setShowSidebar=${setShowSidebar} />
|
||||||
|
<div class="${showSidebar && 'pl-72'} transition-all duration-300 transform">
|
||||||
|
<${Router} onChange=${ev => setUrl(ev.url)} history=${History.createHashHistory()} >
|
||||||
|
<${Main} default=${true} />
|
||||||
|
<${Settings} path="settings" />
|
||||||
|
<${FirmwareUpdate} path="update" />
|
||||||
|
<${Events} path="events" />
|
||||||
|
<//>
|
||||||
|
<//>
|
||||||
|
<//>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onload = () => render(h(App), document.body);
|
||||||
0
tutorials/http/README.md
Normal file
0
tutorials/http/README.md
Normal file
0
tutorials/mqtt/README.md
Normal file
0
tutorials/mqtt/README.md
Normal file
0
tutorials/smtp/README.md
Normal file
0
tutorials/smtp/README.md
Normal file
0
tutorials/tls/README.md
Normal file
0
tutorials/tls/README.md
Normal file
0
tutorials/udp/README.md
Normal file
0
tutorials/udp/README.md
Normal file
0
tutorials/websocket/README.md
Normal file
0
tutorials/websocket/README.md
Normal file
Loading…
Reference in New Issue
Block a user