# \[APP\]\[Pro\] Simple (Sys) LOG - Use this app for Simple (Sys) Logging

**URL:** <https://community.homey.app/t/app-pro-simple-sys-log-use-this-app-for-simple-sys-logging/77533>\
**Category:** Apps\
**Tags:** app, tools, homey-pro, logging, syslog\
**Created:** [March 11, 2023, 8:40pm UTC](https://community.homey.app/t/app-pro-simple-sys-log-use-this-app-for-simple-sys-logging/77533 "2023-03-11T20:40:00Z")\
**Posts on this page:** 1\
**Showing post:** 449

<div class="post-metadata">

**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\
**Post date:** [December 24, 2024, 11:20pm UTC](https://community.homey.app/t/app-pro-simple-sys-log-use-this-app-for-simple-sys-logging/77533/449 "2024-12-24T23:20:13Z")

</div>

### Simple Log Dashboard Widget

Certain Dashboard widgets and examples made me think of creating a Simple Log widget.  
Here’s a _ **how-to** _.

(Thanks to **To\_Lou** for the initial [HTML code](https://community.homey.app/t/app-pro-simple-sys-log-use-this-app-for-simple-sys-logging/77533/321))

Example:

 ![1000000229](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/1/213e7d5cbb66e7f836ec97bda219385b5571f634.jpeg)

→ scrollable `^ v < >`  
 → zoomable (pinch & spread fingers)  
 → log data is selectable, to copy it

1. Install a web server app on Homey, like [Micro Web Server](https://community.homey.app/t/26565) which is used by me
2. Save the HTML code as `.html` file:

> **Click for the HTML Code**
>
> ```auto
> <!-- Save as html file and open it to view the logs -->
> <!DOCTYPE html>
> <html>
> <head>
> <title>Homey1 log</title> <!-- (optional) Replace example title with your own -->
> <style>
> table, th, td
> {
> border: solid 1px #ddd;
> border-collapse: collapse;
> padding: 2px 3px;
> font-family: verdana;
> color: #fff; <!-- change font color-->
> font-size: 40px;
> text-align: left;
> }
> tr:nth-child(even) {
> background-color: #393939; <!-- change background color of even rows -->
> }
> tr:nth-child(odd) {
> background-color: #101010; <!-- change background color of odd rows -->
> }
> tr:hover {
> background-color: #874444; <!-- change background color of mouse hovering -->
> }
> th {
> font-weight: bold;
> font-family: verdana;
> text-align: left;
> }
> </style>
> </head>
> <body>
> 
> <p style="font-size:40px;" id="showData"></p>
> 
> </body>
> 
> <script>
> 
> // the json data.
> 
> const url = "http://192.168.x.x/api/app/nl.nielsdeklerk.log/"; <!-- Replace IP address with your Homey's IP address-->
> 
> async function FetchData() {
> const response = await fetch(url);
> const data = await response.text();
> const string = "["+data+"]";
> const myJSON = JSON.parse(string);
> const JSONtable = myJSON[0].logs;
> 
> response.ok; // => false
> response.status; // => 404
> 
> return JSONtable;
> }
> 
> FetchData().then(JSONtable => {
> JSONtable; // => 'Page not found'
> 
> // Extract value from table header.
> 
> let col = [];
> for (let i = 0; i < JSONtable.length; i++) {
> for (let key in JSONtable[i]) {
> if (col.indexOf(key) === -1) {
> col.push(key);
> }
> }
> }
> 
> // Create table.
> const table = document.createElement("table");
> 
> // Create table header row using the extracted headers above.
> let tr = table.insertRow(-1); // table row.
> 
> for (let i = 0; i < col.length; i++) {
> let th = document.createElement("th"); // table header.
> th.innerHTML = col[i];
> tr.appendChild(th);
> }
> 
> // add json data to the table as rows.
> for (let i = 0; i < JSONtable.length; i++) {
> 
> tr = table.insertRow(-1);
> 
> for (let j = 0; j < col.length; j++) {
> let tabCell = tr.insertCell(-1);
> tabCell.innerHTML = JSONtable[i][col[j]];
> }
> }
> 
> // Now, add the newly created table with json data, to a container.
> const divShowData = document.getElementById('showData');
> divShowData.innerHTML = "";
> divShowData.appendChild(table);
> 
> });
> 
> </script>
> </html>
>     
> 
> ```

1. Edit the HTML file, to replace the example IP address with the IP address of your Homey ( @ around line 42)
2. Optionally you can adjust several colors, as explained in the code
3. Now check if all’s OK, by opening the HTML file in a browser. It takes a while for the logs to appear, be patient.
4. Create an FTP connection to Homey’s new web server ftp://192.168.x.x:5081/
5. Upload the HTML file
6. Open the Homey Dashboard and add a “Web” widget
7. Enter this URL, and replace the example IP address with your Homey’s IP address, and html file name: `http://192.168.x.x:5080/the_name_of_your_html_file.html`  
Example settings:  
 ![1000039977](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/1/815ad88b337617de651125f1292792397fe9d104.jpeg)

_I would enable “auto refresh” every x seconds_  
10. Save, and check if the logs appear on your dashboard!

---

_[View the full topic](https://community.homey.app/t/app-pro-simple-sys-log-use-this-app-for-simple-sys-logging/77533)._
