Commit 1db59c21 authored by Chris Klinger's avatar Chris Klinger
Browse files

Added a new AdminInterface to set values using input fields

parent 2dcb3e58
......@@ -5,6 +5,7 @@
#include <ArduinoJson.h>
#include "names.h"
#include "web_admin.h"
#include "web_interface.h"
#include "web_iro_js.h"
......@@ -66,6 +67,9 @@ void setup(void) {
server.on("/ui", HTTP_GET, []() {
server.send(200, "text/html", WEBINTERFACE);
server.on("/admin", HTTP_GET, []() {
server.send(200, "text/html", WEBADMIN);
server.on("/iro.min.js", HTTP_GET, []() {
server.send(200, "application/javascript", IRO_JS);
const char WEBADMIN[] PROGMEM = R"=====(
<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WifiRGB Controller Admin</title>
<link rel="stylesheet" href="" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
.footer > .container {
padding-right: 15px;
padding-left: 15px;
code {
font-size: 80%;
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">WifiRGBController</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Admin <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link" href="/ui">UI</a>
<!-- Begin page content -->
<main role="main" class="container">
<div style="height: 15px;"></div>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="col-6">
<h2>WifiRGBController Admin</h2>
<div class="form-group">
<label for="exampleInputEmail1">R</label>
<input type="email" class="form-control" id="inputRValue" aria-describedby="emailHelp" placeholder="0" value="0">
<div class="form-group">
<label for="exampleInputEmail1">G</label>
<input type="email" class="form-control" id="inputGValue" aria-describedby="emailHelp" placeholder="0" value="0">
<div class="form-group">
<label for="exampleInputEmail1">B</label>
<input type="email" class="form-control" id="inputBValue" aria-describedby="emailHelp" placeholder="0" value="0">
<button id="submitValues" type="button" class="btn btn-primary">Submit</button>
<div class="col-sm">
<footer class="footer">
<div class="container">
<span class="text-muted">WifiRGBController</span>
<script src="" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
$("#submitValues" ).click(function() {
var red = parseInt($('#inputRValue').val());
var blue = parseInt($('#inputBValue').val());
var green = parseInt($('#inputGValue').val());
var json = {state:"ON",brightness:100,color:{mode:"rgb",r:red,g:green,b:blue},mode:"SOLID"};
$.ajax("/api/v1/state", { data: JSON.stringify(json), dataType: "json", method: "POST", contentType: "application/json", cache: false, timeout: 2000})
.done(function( data ) {
console.log( "Response: " );
console.log( data );
.fail(function( data ) {
console.log( "Error: " );
console.log( data );
// alert(data);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment