Skip to content

Commit 25adb34

Browse files
budulinekbudulinek
committed
Improve CSS
1 parent b77a00f commit 25adb34

File tree

3 files changed

+62
-35
lines changed

3 files changed

+62
-35
lines changed

‎arduino-altherma-controller/04-webserver.ino‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -89,16 +89,18 @@ enum post_key : byte {
8989

9090
// Keys for JSON elements, used in: 1) JSON documents, 2) ID of span tags, 3) Javascript.
9191
enum JSON_type : byte {
92-
JSON_RUNTIME, // Runtime
93-
JSON_DAIKIN_INDOOR, // Daikin Indoor Unit
94-
JSON_DAIKIN_OUTDOOR, // Daikin Outdoor Unit
95-
JSON_DATE, // date and time
96-
JSON_DAIKIN_EEPROM, // EEPROM Health
97-
JSON_WRITE_P1P2, // write P1P2 button
98-
JSON_P1P2_STATS, // Multiple P1P2 Read Statistics
99-
JSON_UDP_STATS, // Multiple P1P2 Write Statistics
100-
JSON_CONTROLLER, // Controller Mode
101-
JSON_LAST, // Must be the very last element in this array
92+
JSON_RUNTIME, // Runtime
93+
JSON_DAIKIN_INDOOR, // Daikin Indoor Unit
94+
JSON_DAIKIN_OUTDOOR, // Daikin Outdoor Unit
95+
JSON_DATE, // date and time
96+
JSON_DAIKIN_EEPROM_DATE, // EEPROM Stats since
97+
JSON_DAIKIN_EEPROM, // EEPROM Health
98+
JSON_WRITE_P1P2, // write P1P2 button
99+
JSON_P1P2_STATS_DATE, // P1P2 Stats since
100+
JSON_P1P2_STATS, // Multiple P1P2 Read Statistics
101+
JSON_UDP_STATS, // Multiple P1P2 Write Statistics
102+
JSON_CONTROLLER, // Controller Mode
103+
JSON_LAST, // Must be the very last element in this array
102104
};
103105

104106
/**************************************************************************/

‎arduino-altherma-controller/05-pages.ino‎

Lines changed: 47 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -66,31 +66,36 @@ void sendPage(EthernetClient &client, byte reqPage) {
6666
CSS Classes
6767
w - wrapper (includes m + c)
6868
m - navigation menu (left)
69-
c - content of a page
70-
r - row inside a content
69+
c - wrapper for the content of a page (incl. smaller header)
70+
d - content of the page
71+
q - row inside a content (top aligned)
72+
r - row inside a content (center-aligned)
7173
i - short input (byte or IP address octet)
7274
n - input type=number
7375
s - select input with numbers
7476
p - inputs disabled by id=o checkbox
7577
CSS Ids
7678
o - checkbox which disables other checkboxes and inputs
7779
*/
78-
"body,.m{padding:1px;margin:0;font-family:sans-serif}"
80+
"*{box-sizing:border-box}"
81+
"body{padding:1px;margin:0;font-family:sans-serif;height:100vh}"
82+
"body,.w,.c,.q{display:flex}"
83+
"body,.c{flex-flow:column}"
84+
".w{flex-grow:1;min-height:0}"
85+
".m{flex:0 0 20vw;padding:1px}"
86+
".c{flex:1}"
87+
".d{overflow:auto;padding:15px}"
88+
".q{padding:1px}"
89+
".r{align-items:center}"
7990
"h1,h4{padding:10px}"
8091
"h1,.m,h4{background:#0067AC;margin:1px}"
81-
".m,.c{height:calc(100vh - 71px)}"
82-
".m{min-width:20%}"
83-
".c{flex-grow:1;overflow-y:auto}"
84-
".w,.r{display:flex}"
8592
"a,h1,h4{color:white;text-decoration:none}"
86-
".c h4{padding-left:30%;margin-bottom:20px}"
87-
".r{margin:4px}"
93+
".c h4{padding-left:30%}"
8894
"label{width:30%;text-align:right;margin-right:2px}"
89-
"input,button,select{margin-top:-2px}" // improve vertical allignment of input, button and select
9095
".s{text-align:right}"
9196
".s>option{direction:rtl}"
92-
".i{text-align:center;width:3ch}"
93-
".n{width:8ch}"
97+
".i{text-align:center;width:4ch}"
98+
".n{width:10ch}"
9499
"</style>"
95100
"</head>"
96101
"<body onload=g(document.getElementById('o').checked)>"
@@ -116,7 +121,7 @@ void sendPage(EthernetClient &client, byte reqPage) {
116121

117122
// Left Menu
118123
for (byte i = 1; i < PAGE_WAIT; i++) { // PAGE_WAIT is the last item in enum
119-
chunked.print(F("<h4 "));
124+
chunked.print(F("<h4"));
120125
if ((i) == reqPage) {
121126
chunked.print(F(" style=background-color:#FF6600"));
122127
}
@@ -131,6 +136,7 @@ void sendPage(EthernetClient &client, byte reqPage) {
131136
"<h4>"));
132137
stringPageName(chunked, reqPage);
133138
chunked.print(F("</h4>"
139+
"<div class=d>"
134140
"<form method=post>"));
135141

136142
// PLACE FUNCTIONS PROVIDING CONTENT HERE
@@ -165,7 +171,8 @@ void sendPage(EthernetClient &client, byte reqPage) {
165171
if (reqPage == PAGE_IP || reqPage == PAGE_TCP || reqPage == PAGE_P1P2 || reqPage == PAGE_FILTER) {
166172
chunked.print(F("<p><div class=r><label><input type=submit value='Save & Apply'></label><input type=reset value=Cancel></div>"));
167173
}
168-
chunked.print(F("</form>"));
174+
chunked.print(F("</form>"
175+
"</div>"));
169176
tagDivClose(chunked); // close tags <div class=c> <div class=w>
170177
chunked.end(); // closing tags not required </body></html>
171178
}
@@ -254,7 +261,7 @@ void contentStatus(ChunkedPrint &chunked) {
254261
tagSpan(chunked, JSON_DAIKIN_OUTDOOR);
255262
tagDivClose(chunked);
256263
#endif /* ENABLE_EXTENDED_WEBUI */
257-
tagLabelDiv(chunked, F("External Controllers"));
264+
tagLabelDiv(chunked, F("External Controllers"), true);
258265
tagSpan(chunked, JSON_CONTROLLER);
259266
tagDivClose(chunked);
260267
tagLabelDiv(chunked, F("Date"));
@@ -263,6 +270,9 @@ void contentStatus(ChunkedPrint &chunked) {
263270
tagLabelDiv(chunked, F("Daikin EEPROM Writes"));
264271
tagButton(chunked, F("Reset"), ACT_RESET_EEPROM, true);
265272
chunked.print(F(" Stats since "));
273+
tagSpan(chunked, JSON_DAIKIN_EEPROM_DATE);
274+
tagDivClose(chunked);
275+
tagLabelDiv(chunked, 0);
266276
tagSpan(chunked, JSON_DAIKIN_EEPROM);
267277
tagDivClose(chunked);
268278
chunked.print(F("</form><form method=post>"));
@@ -299,6 +309,9 @@ void contentStatus(ChunkedPrint &chunked) {
299309
tagLabelDiv(chunked, F("P1P2 Packets"));
300310
tagButton(chunked, F("Reset"), ACT_RESET_STATS, true);
301311
chunked.print(F(" Stats since "));
312+
tagSpan(chunked, JSON_P1P2_STATS_DATE);
313+
tagDivClose(chunked);
314+
tagLabelDiv(chunked, 0);
302315
tagSpan(chunked, JSON_P1P2_STATS);
303316
tagDivClose(chunked);
304317
#ifdef ENABLE_EXTENDED_WEBUI
@@ -494,7 +507,7 @@ void contentWait(ChunkedPrint &chunked) {
494507
/**************************************************************************/
495508
void tagRowPacket(ChunkedPrint &chunked, const byte packetType) {
496509
if (getPacketStatus(packetType, PACKET_SEEN) == true) {
497-
chunked.print(F("<div class=r>"
510+
chunked.print(F("<div class=\"r q\">"
498511
"<label>Type 0x"));
499512
chunked.print(hex(packetType));
500513
chunked.print(F(":</label>"
@@ -644,11 +657,16 @@ void tagInputHex(ChunkedPrint &chunked, const byte name, const bool required, co
644657
645658
@param chunked Chunked buffer
646659
@param label Label string
660+
@param top Align to top
647661
*/
648662
/**************************************************************************/
649663
void tagLabelDiv(ChunkedPrint &chunked, const __FlashStringHelper *label) {
650-
chunked.print(F("<div class=r>"));
651-
chunked.print(F("<label> "));
664+
tagLabelDiv(chunked, label, false);
665+
}
666+
void tagLabelDiv(ChunkedPrint &chunked, const __FlashStringHelper *label, bool top) {
667+
chunked.print(F("<div class=\"q"));
668+
if (!top) chunked.print(F(" r"));
669+
chunked.print(F("\"><label> "));
652670
if (label) {
653671
chunked.print(label);
654672
chunked.print(F(":"));
@@ -686,7 +704,7 @@ void tagButton(ChunkedPrint &chunked, const __FlashStringHelper *flashString, by
686704
/**************************************************************************/
687705
void tagDivClose(ChunkedPrint &chunked) {
688706
chunked.print(F("</div>"
689-
"</div>")); // <div class=r>
707+
"</div>")); // <div class=q>
690708
}
691709

692710
/**************************************************************************/
@@ -822,10 +840,13 @@ void jsonVal(ChunkedPrint &chunked, const byte JSONKEY) {
822840
stringDate(chunked, date);
823841
}
824842
break;
825-
case JSON_DAIKIN_EEPROM:
843+
case JSON_DAIKIN_EEPROM_DATE:
826844
{
827845
stringDate(chunked, data.eepromDaikin.date);
828-
chunked.print(F("<br>"));
846+
}
847+
break;
848+
case JSON_DAIKIN_EEPROM:
849+
{
829850
chunked.print(data.eepromDaikin.total);
830851
chunked.print(F(" Total Commands<br>"));
831852
if (date[5] != 0) { // day can not be zero
@@ -901,10 +922,13 @@ void jsonVal(ChunkedPrint &chunked, const byte JSONKEY) {
901922
chunked.print(F(">"));
902923
}
903924
break;
904-
case JSON_P1P2_STATS:
925+
case JSON_P1P2_STATS_DATE:
905926
{
906927
stringDate(chunked, data.statsDate);
907-
chunked.print(F("<br>"));
928+
}
929+
break;
930+
case JSON_P1P2_STATS:
931+
{
908932
for (byte i = 0; i < P1P2_LAST; i++) {
909933
chunked.print(data.p1p2Cnt[i]);
910934
switch (i) {

‎arduino-altherma-controller/arduino-altherma-controller.ino‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@
1111
v3.0 2024-02-02 Function comments. Remove "Disabled" Controller mode (only Manual; Auto),
1212
improved automatic connection to the P1P2 bus, connect to any peripheral address
1313
between 0xF0 to 0xFF (depends on Altherma model), show other controllers and available addresses.
14+
v3.1 2024-XX-XX CSS improvement
1415
*/
1516

16-
const byte VERSION[] = { 3, 0 };
17+
const byte VERSION[] = { 3, 1 };
1718

1819
#include <SPI.h>
1920
#include <Ethernet.h>
2021
#include <EthernetUdp.h>
2122
#include <utility/w5100.h>
22-
#include <CircularBuffer.h> // CircularBuffer https://github.com/rlogiacco/CircularBuffer
23+
#include <CircularBuffer.hpp> // CircularBuffer https://github.com/rlogiacco/CircularBuffer
2324
#include <EEPROM.h>
2425
#include <StreamLib.h> // StreamLib https://github.com/jandrassy/StreamLib
2526
// #include <P1P2Serial.h> // P1P2Serial https://github.com/Arnold-n/P1P2Serial

0 commit comments

Comments
 (0)