Seich
/
HomeSpan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Logging.md

This commit is contained in:
HomeSpan 2023-04-24 11:08:00 -05:00 committed by GitHub
parent 4300dcce0b
commit 8e7ccac85b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/Logging.md
View File

@ -60,23 +60,23 @@ See [Example 19 - WebLog](Tutorials.md#example-19---weblog) for a tutorial sketc
### Custom Style Sheets (CSS) ### Custom Style Sheets (CSS)
HomeSpan's Web Log normally consists of black text on light blue background. However, you can change use your own custom style sheets (CSS) formatting by calling the method `homeSpan.setWebLogCSS(const char *css)`, where *css* is formatted as series of [HTML classes](https://www.w3schools.com/html/html_classes.asp) containing various style elements. HomeSpan uses the following three class names for the different parts of the Web Log: HomeSpan's Web Log normally consists of black text on a light blue background. However, you can set a Custom Style Sheet (CSS) to change the format by calling `homeSpan.setWebLogCSS(const char *css)`, where *css* is constructed using [HTML classes](https://www.w3schools.com/html/html_classes.asp) containing one or more custom style elements. HomeSpan implements the following three class names for the different parts of the Web Log:
* *bod1* - this class specifies style elements for the main body of the Web Log page, including the background color and the header text at the top (which is formatted as \<h2\> * *bod1* - this class specifies style elements for the main body of the Web Log page, including the background color and the header text at the top (which itself is formatted as \<h2\>)
* *tab1* - this class specifies style elements for the status table at the top of the Web Log page * *tab1* - this class specifies style elements for the status table at the top of the Web Log page
* *tab2* - this class specifies style elements for the log entry table at the botom of the Web Log page * *tab2* - this class specifies style elements for the log entry table at the botom of the Web Log page
For example, the following CSS changes the color of the page background to light yellow and header text to blue, the color of top table to light green, and the color of the botom table to light blue. It also changes the color of the text in the header row of the second table to red, and the color of the data rows in the second table to dark blue, as well as centering the text for the data rows: For example, the following CSS changes the background color of the Web Log page to light yellow, the color of the header text to blue, the color of the cells in the top table to light green, and the color of the cells in the botom table to light blue. It also changes the color of the text in the header row (\<th\>) of the second table to red, the color of the data rows (\<td\>) in the second table to dark blue, and the alignment of the text in the data rows to be centered within each table cell:
```C++ ```C++
homeSpan.setWebLogCSS(".bod1 {background-color:lightyellow;}" homeSpan.setWebLogCSS(".bod1 {background-color:lightyellow;}"
".bod1 h2 {color:blue;}" ".bod1 h2 {color:blue;}"
".tab1 {background-color:lightgreen;}" ".tab1 {background-color:lightgreen;}"
".tab2 {background-color:lightblue;} .tab2 th {color:red;} .tab2 td {color:darkblue; text-align:center;}" ".tab2 {background-color:lightblue;} .tab2 th {color:red;} .tab2 td {color:darkblue; text-align:center;}"
); );
``` ```
Note that HomeSpan outputs the full content of the Web Log HTML to the Serial Monitor Note that HomeSpan outputs the full content of the Web Log HTML, including whatever CSS you may have specified above, to the Serial Monitor whenever the Log Level is set to 1 or greater. Reviewing this output can be helpful when creating your own CSS.
--- ---