1

I am trying to create a dashboard for our office, and I want to show the occupancy of the meeting rooms (we, unfortunately, do not have a proper meeting room system). I have some sensors which can spit out a CSV of whether the motion is detected or not and I have a plan of the office with the green or red overlays for each room.

Where I am stuck is in how to toggle the visibility of green or blue in the dashboard based on the CSV values. I.e. if the last value is "MotionDetected", show red, if the value is not "MotionDetected" then show green.

I'm very new to any coding, so I only have basic knowledge. Any help would be much appreciated!

Thanks in advance!

The expected output is if the last value in the CSV is "MotionDetected", show red, if the value is not "MotionDetected" then show green.

Andyb431
  • 13
  • 2
  • 2
    Hey there! Would you mind sharing the code you've got so far and what is or isn't working for you? – Deryck Sep 15 '19 at 05:18
  • First you said green or blue, then red or green. Is this in a web page? Are you going to change color in the css styles? There are many possibilities we'll need to know. – wazz Sep 15 '19 at 05:28
  • Hi guys. Thanks for the quick responses. @Deryck, I haven't written any code for this portion at the moment. – Andyb431 Sep 15 '19 at 05:44
  • @wazz, Yes, my idea is that the floorplan of the office is embedded into the HTML and the shading is in the CSS. Then I will need to instruct the change in colour to be displayed in the CSS file. – Andyb431 Sep 15 '19 at 05:48
  • I have added a picture of the concept here: https://www.dropbox.com/s/kjtdm86cw253jyz/Office%20Meeting%20Room%20Concept.PNG?dl=0 – Andyb431 Sep 15 '19 at 05:52
  • Please read [Something on my web site doesn't work. Can I just paste a link to it?](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources become useless when the external resource goes away or is fixed. Create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) and put it in the question itself instead. – wazz Sep 15 '19 at 05:58

2 Answers2

0

Get last value of csv: Get last part of CSV string

JavaScript:

var myCSV = "red,yellow,green,blue";
var csv_Data = myCSV.split(',');
var last = csv_Data[csv_Data.length - 1];
// or
//var last = myCSV.substr(myCSV.lastIndexOf(',') + 1);


// get the thing that changes color.
var ele = document.getElementById("theThingThatChangesColor");

if(last === "MotionDetected") {
    ele.style.backgroundColor = "red";
} else {
    ele.style.backgroundColor = "green";
}

If you have the classes you need inside a css file, you can change the class instead of the style: JS Change class of element

wazz
  • 4,953
  • 5
  • 20
  • 34
  • Thanks wazz. I have a couple of follow-up questions if you don't mind? 1) For the 'Get last part of CSV string' and your code above, am I correct in stating that these will need to be input into a separate javascript file and loaded into the HTML? 2) The CSV parsing code seems to reference a PHP file. Do I need to create a php file to deal with the CSV? Apologies if these are obvious questions! Thanks again! – Andyb431 Sep 15 '19 at 07:12
  • 1 - yes/or -- you can put the js in a separate js file and reference it, or put it right on the html page. 2 -- the php stuff is only in the linked *question* and not relevant here, just the linked answer. btw, i reread the top answer and added to my answer another way of getting the last csv value. (there's even a 3rd way in one of the linked answers.) – wazz Sep 15 '19 at 10:55
  • Hi wazz, Thanks again for your help. I have been trying to get my head around the code, but I am struggling. Can you please tell me if the "myCSV" portion of the code should be swapped out for a filepath? Or perhaps I should declare the file as a variable called "myCSV" at the beginning of the code? Many Thanks – Andyb431 Sep 16 '19 at 10:58
  • See update above. myCSV is the actual string of CSVs. if you don't know how to get the string from a file, i'm sure it's been covered here on SO. – wazz Sep 16 '19 at 16:43
0

Based on wazz's generous help, and with some additional input from Alan Stines on Youtube for extracting the CSV string, I used the following code to make the above work!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="CSV Parsing css.css" type="text/css" rel="stylesheet">
<title>CSV Parsing Test</title>
</head>

<body>
    <div id="output"></div>
    <img id="Background" src="Brochure QR Code.png" alt="Broken">
    <img id="TestImage" src="search.png" alt="Broken">

    <script>
        function init(){
            var myCSV = new XMLHttpRequest();
            myCSV.onreadystatechange = function(){
                if(this.readyState == 4 && this.status == 200) {
                    console.log(this.responseText);
                    var csv_Data = this.responseText.split(',');
                    console.log(csv_Data);
                    var last = csv_Data[csv_Data.length - 3];
                    console.log(last);
                    var ele = document.getElementById("TestImage");

        if(last === "DetectedMovement"){
            ele.style.backgroundColor = "red";
        } else {ele.style.backgroundColor = "green";
             }
                }
            };

            myCSV.open("GET", "MotionLog_PIRTempHum001Testing R00.01.csv", true);
            myCSV.send()
        }

        window.onload = init;


    </script>
</body>
</html>

I hope sharing this helps!

Andyb431
  • 13
  • 2