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

Apps
, , , ,
449

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)

Example:

1000000229
10000002291200×1240 289 KB

→ 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 which is used by me
  2. Save the HTML code as .html file:
Click for the HTML Code 
<!-- 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 IP address and html file name: http://192.168.x.x:5080/the_name_of_your_html_file.html
    Example settings:
    1000039977
    10000399771200×955 52.3 KB

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

3 Likes