Skip to content

Commit

Permalink
settings feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnthas
jnthas committed Apr 2, 2023
1 parent fbaaddc commit 56d4b60
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 157 deletions.
24 changes: 4 additions & 20 deletions firmware/lib/cw-commons/CWDateTime.cpp
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,12 @@
#include "CWDateTime.h"

void CWDateTime::begin()
void CWDateTime::begin(const char *timeZone, bool use24format)
{
myTZ.setCache(0);
waitForSync();
}

void CWDateTime::setTimezone(const char *timeZone)
{
myTZ.setCache(0);
myTZ.setLocation(timeZone);
this->use24hFormat = use24format;
waitForSync();
}

String CWDateTime::getTimezone()
{
return myTZ.getTimezoneName(0);
}


void CWDateTime::update()
{
}

String CWDateTime::getFormattedTime()
{
return myTZ.dateTime();
Expand All @@ -31,7 +15,7 @@ String CWDateTime::getFormattedTime()
char *CWDateTime::getHour(const char *format)
{
static char buffer[3] = {'\0'};
strncpy(buffer, myTZ.dateTime("H").c_str(), sizeof(buffer));
strncpy(buffer, myTZ.dateTime((use24hFormat ? "H" : "h")).c_str(), sizeof(buffer));
return buffer;
}

Expand All @@ -44,7 +28,7 @@ char *CWDateTime::getMinute(const char *format)

int CWDateTime::getHour()
{
return myTZ.dateTime("H").toInt();
return myTZ.dateTime((use24hFormat ? "H" : "h")).toInt();
}

int CWDateTime::getMinute()
Expand Down
6 changes: 2 additions & 4 deletions firmware/lib/cw-commons/CWDateTime.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,10 @@ class CWDateTime
{
private:
Timezone myTZ;
bool use24hFormat = true;

public:
void begin();
void setTimezone(const char *timeZone);
String getTimezone();
void update();
void begin(const char *timeZone, bool use24format);
String getFormattedTime();

char *getHour(const char *format);
Expand Down
3 changes: 1 addition & 2 deletions firmware/lib/cw-commons/CWWebServer.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ struct ClockwiseWebServer
getCurrentSettings(client);
} else if (method == "POST" && path == "/set") {
ClockwiseParams::getInstance()->load();

//a baby seal has died due this ifs
if (key == ClockwiseParams::getInstance()->PREF_DISPLAY_BRIGHT) {
ClockwiseParams::getInstance()->displayBright = value.toInt();
Expand Down Expand Up @@ -130,5 +129,5 @@ struct ClockwiseWebServer
client.println();
client.println(response);
}

};
227 changes: 117 additions & 110 deletions firmware/lib/cw-commons/SettingsWebPage.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,6 @@

#include <Arduino.h>



typedef struct SettingsCards {
const char* title;
const char* description;
const char* formInput;
const char* icon;
const char* propName;
} SettingsCard;

const char SETTINGS_PAGE[] PROGMEM = R""""(
<!DOCTYPE html>
<html>
Expand All @@ -20,118 +10,135 @@ const char SETTINGS_PAGE[] PROGMEM = R""""(
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon"
href="https://github.com/jnthas/clockwise/raw/gh-pages/static/images/favicon.png">
href="https://github.com/jnthas/clockwise/raw/gh-pages/static/images/favicon.png">

<body>
<div class="w3-container">
<img src="https://github.com/jnthas/clockwise/raw/gh-pages/static/images/clockwise_logo.png" alt="Logo"
class="w3-image w3-padding" style="width:50%;max-width:600px">
</div>
<div class="w3-container" style="background-image: linear-gradient(120deg, #155799, #159957)">
<img class="w3-animate-zoom w3-padding w3-image"
src="https://github.com/jnthas/clockwise/raw/gh-pages/static/images/clockwise_logo_not.png" alt="Logo"
style="width:50%;max-width:600px">
</div>

<div class="w3-panel w3-black">
<h3>.:: Settings Page</h3>
</div>
<div class="w3-row-padding w3-padding">
<div id="base" class="w3-col s3 m3 s12" style="display: none;">
<div class="w3-card-4 w3-margin-bottom">
<header class="w3-container w3-blue-gray">
<h3 id="title">{{TITLE}}</h3>
</header>
<div class="w3-container">
<p style="min-height: 45px;" id="description">{{DESCRIPTION}}</p>
<hr>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i id="icon" class="w3-xxlarge w3-text-dark-grey fa"></i></div>
<div class="w3-rest" id="formInput">
{{FORM_INPUT}}
</div>
</div>
</div>
<button id="cardButton" class="w3-button w3-block w3-light-blue">Save</button>
<div class="w3-bar w3-black w3-large">
<div class="w3-bar-item w3-black w3-hover-red"><i class="fa fa-wrench"></i> Settings Page</div>
<div id="ssid" class="w3-bar-item w3-hover-blue w3-right"></div>
<div id="status" class="w3-bar-item w3-green" style="display:none"><i class='fa fa-floppy-o'></i> Saved! Restart your device</div>
</div>

<div class="w3-row-padding w3-padding">
<div id="base" class="w3-col s3 m3 s12" style="display: none;">
<div class="w3-card-4 w3-margin-bottom">
<header class="w3-container w3-blue-gray">
<h3 id="title">{{TITLE}}</h3>
</header>
<div class="w3-container">
<p style="min-height: 45px;" id="description">{{DESCRIPTION}}</p>
<hr>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i id="icon" class="w3-xxlarge w3-text-dark-grey fa"></i>
</div>
<div class="w3-rest" id="formInput">
{{FORM_INPUT}}
</div>
</div>
</div>
<button id="cardButton" class="w3-button w3-block w3-light-blue">Save</button>
</div>
</div>
<script>
function createCards(settings) {
console.log(settings);
const cards = [
{
title:"Display Bright",
description:"0 = dark (display off) / 255 = super bright | Value: <strong><output id='rangevalue'>" + settings.displayBright + "</output></strong>",
formInput:"<input class='w3-input w3-border' type='range' min='0' max='255' value='" + settings.displayBright + "' class='slider' id='bright' oninput='rangevalue.value=value'>",
icon:"fa-adjust",
save:"updatePreference('displayBright', bright.value)",
property:"displayBright"
},
{
title:"Use 24h format?",
description:"Changes the hour format to show 20:00 instead of 8:00PM",
formInput:"<input class='w3-check' type='checkbox' id='use24h' " + (settings.use24hFormat == 1 ? "checked" : "") + "><label for='use24h'> Yep</label>",
icon:"fa-calendar",
save:"updatePreference('use24hFormat', Number(use24h.checked))",
property:"use24hFormat"
},
{
title:"Swap Blue/Green pins?",
description:"Swap Blue and Green pins because the panel is RBG instead of RGB",
formInput:"<input class='w3-check' type='checkbox' id='swapBG' " + (settings.swapBlueGreen == 1 ? "checked" : "") + "><label for='swapBG'> Yep</label>",
icon:"fa-random",
save:"updatePreference('swapBlueGreen', Number(swapBG.checked))",
property:"swapBlueGreen"
},
{
title:"Timezone",
description:"Consult your TZ identifier <a href='https://en.wikipedia.org/wiki/List_of_tz_database_time_zones'>here.</a> Examples: America/Sao_Paulo, Europe/Lisbon",
formInput:"<input id='tz' class='w3-input' name='tz' type='text' placeholder='Timezone' value='"+ settings.timeZone +"''>",
icon:"fa-clock-o",
save:"updatePreference('timeZone', tz.value)",
property:"timeZone"
}
];

var base = document.querySelector('#base');
cards.forEach(c => {

var clone = base.cloneNode(true);
clone.id = c.property;
clone.removeAttribute("style");

Array.prototype.slice.call(clone.getElementsByTagName('*')).forEach(e => {
e.id = e.id + "-" + c.property;
});

base.before(clone);
document.getElementById("title-" + c.property).innerHTML = c.title
document.getElementById("description-" + c.property).innerHTML = c.description
document.getElementById("formInput-" + c.property).innerHTML = c.formInput
document.getElementById("icon-" + c.property).classList.add(c.icon);
document.getElementById("cardButton-" + c.property).setAttribute("onclick", c.save);
})
</div>
<script>
function createCards(settings) {
console.log(settings);
const cards = [
{
title: "Display Bright",
description: "0 = dark (display off) / 255 = super bright | Value: <strong><output id='rangevalue'>" + settings.displayBright + "</output></strong>",
formInput: "<input class='w3-input w3-border' type='range' min='0' max='255' value='" + settings.displayBright + "' class='slider' id='bright' oninput='rangevalue.value=value'>",
icon: "fa-adjust",
save: "updatePreference('displayBright', bright.value)",
property: "displayBright"
},
{
title: "Use 24h format?",
description: "Changes the hour format to show 20:00 instead of 8:00PM",
formInput: "<input class='w3-check' type='checkbox' id='use24h' " + (settings.use24hFormat == 1 ? "checked" : "") + "><label for='use24h'> Yep</label>",
icon: "fa-calendar",
save: "updatePreference('use24hFormat', Number(use24h.checked))",
property: "use24hFormat"
},
{
title: "Swap Blue/Green pins?",
description: "Swap Blue and Green pins because the panel is RBG instead of RGB",
formInput: "<input class='w3-check' type='checkbox' id='swapBG' " + (settings.swapBlueGreen == 1 ? "checked" : "") + "><label for='swapBG'> Yep</label>",
icon: "fa-random",
save: "updatePreference('swapBlueGreen', Number(swapBG.checked))",
property: "swapBlueGreen"
},
{
title: "Timezone",
description: "Consult your TZ identifier <a href='https://en.wikipedia.org/wiki/List_of_tz_database_time_zones'>here.</a> Examples: America/Sao_Paulo, Europe/Lisbon",
formInput: "<input id='tz' class='w3-input' name='tz' type='text' placeholder='Timezone' value='" + settings.timeZone + "''>",
icon: "fa-clock-o",
save: "updatePreference('timeZone', tz.value)",
property: "timeZone"
}
];

function updatePreference(key, value) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/set?' + key + '=' + value);
xhr.send();
var base = document.querySelector('#base');
cards.forEach(c => {

var clone = base.cloneNode(true);
clone.id = c.property;
clone.removeAttribute("style");

Array.prototype.slice.call(clone.getElementsByTagName('*')).forEach(e => {
e.id = e.id + "-" + c.property;
});

base.before(clone);
document.getElementById("title-" + c.property).innerHTML = c.title
document.getElementById("description-" + c.property).innerHTML = c.description
document.getElementById("formInput-" + c.property).innerHTML = c.formInput
document.getElementById("icon-" + c.property).classList.add(c.icon);
document.getElementById("cardButton-" + c.property).setAttribute("onclick", c.save);
})

document.getElementById("ssid").innerHTML = "<i class='fa fa-wifi'></i> " + settings.wifiSsid
}

function updatePreference(key, value) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status > 200 && this.status < 299) {
document.getElementById('status').style.display = 'block';
}
};
xhr.open('POST', '/set?' + key + '=' + value);
xhr.send();

setTimeout(() => {
document.getElementById('status').style.display = 'none';
}, 2000);
}

function begin() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
createCards(JSON.parse(this.responseText));
}
};
xmlhttp.open("GET", "/get", true);
xmlhttp.send();
function begin() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
createCards(JSON.parse(this.responseText));
}
};
xmlhttp.open("GET", "/get", true);
xmlhttp.send();
}

//Local
//createCards({ "displayBright": 30, "swapBlueGreen": 1, "use24hFormat": 0, "timeZone": "Europe/Lisbon", "wifiSsid": "test" });

//Local
//createCards({"displayBright":30,"swapBlueGreen":1,"use24hFormat":0,"timeZone":"Europe/Lisbon","wifiSsid":"test"});

//Embedded
begin();
//Embedded
begin();

</script>
</script>
</body>
</html>
)"""";
8 changes: 5 additions & 3 deletions firmware/lib/cw-commons/WiFiController.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ struct WiFiController
improvSerial.handleSerial();
}

void begin()
bool begin()
{
WiFi.mode(WIFI_STA);
WiFi.disconnect();
Expand All @@ -49,9 +49,11 @@ struct WiFiController
if (improvSerial.tryConnectToWifi(ClockwiseParams::getInstance()->wifiSsid.c_str(), ClockwiseParams::getInstance()->wifiPwd.c_str()))
{
ClockwiseWebServer::getInstance()->startWebServer();
return true;
}
}
}


StatusController::getInstance()->wifiConnectionFailed();
return false;
}
};
Loading

0 comments on commit 56d4b60

Please sign in to comment.