Untitled


<!doctype html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
        <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
        <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <title></title>
        <style type="text/css">
                p {font-size: x-large}
                button {
                        display: block;margin: 5px 5px 5px 5px;width: 160px;height: 45px;
                        font-size: 22pt;font-weight: bold;color: yellow;}
                body {
                    max-width:720px;
                    margin: auto;
                }


                table td, table th{
                    border: 1px solid black;
                    padding: 5px;
                }

                .ct-chart {
                    margin-bottom: 20px;
                }
        </style>
</head>

<body>
        <header>
                <p STYLE="color: green;"><b>Control led from web with PubNub !</b></p>
        </header>
        <form method="GET">
                <input class="btn btn-success" id="switchOn" value="start reading" type="button">
                <input class="btn btn-danger" id="switchOff" value="stop reading" type="button">
        </form>
        <?php

                        $servername = "localhost";
                        $username = "root";
                        $password = "suskeenwiske2";
                        // Create connection
                        $conn = new mysqli($servername, $username,$password);
                        // Check connection
                        if ($conn->connect_error) {
                                die("Connection failed: " .
                                                        $conn->connect_error);
                        }
                        echo "Connected successfully";
                        $sql = "SELECT tijdstip, temperatuur, licht from data.voorbereidingExamen";
                        $result = $conn->query($sql);
                        if($result->num_rows > 0) {
                                echo "<table style='margin-bottom:50px;'>";
                                $graden = array();
                                $tijdstippen = array();
                                $lichtpercentages = array();
                                $i = 0;
                                echo "<tr>
                                        <th>index</th>
                                        <th>tijdstip</th>
                                        <th>temperatuur</th>
                                        <th>lichtpercentage</th>
                                    </tr>";
                                while($row = $result->fetch_assoc()) {
                                        echo "<tr><td>" . $i . "</td>";
                                        array_push($graden, $row["temperatuur"]);
                                        array_push($tijdstippen,$row['tijdstip']);
                                        array_push($lichtpercentages, $row['licht']);
                                        echo "<td>" . $row["tijdstip"] . "</td>";
                                        echo "<td>" . $row["temperatuur"] . "°C</td>";
                                        echo "<td>" . $row["licht"] . "%</td></tr>";
                                        $i++;
                                }
                                echo "</table>";
                        } else {
                                echo "0 results";
                        }
                        $conn->close();

                ?>


        <!-- script voor grafiek te maken met chartist -->
         <h3>Temperatuur</h3>
         <div class="ct-chart  ct-perfect-fourth" id="temperatuur" ></div>
         <h3>Lichtpercentage</h3>
         <div class="ct-chart  ct-perfect-fourth" id="licht" ></div>
                        <script>
                                var gradendata = $.map(<?php echo json_encode($graden); ?>, function(el) { return el});
                                var tijdstippenData = $.map(<?php echo json_encode($tijdstippen); ?>, function(el) { return el});
                                var lichtpercentageData = $.map(<?php echo json_encode($lichtpercentages); ?>, function(el) { return el});

                                for (i = 0; i < tijdstippenData.length; i++) {
                                    newDate = new Date(tijdstippenData[i]);
                                    tijdstippenData[i] = newDate.toUTCString();
                                }

                                var data = ({
                                        labels: tijdstippenData,
                                        series: [gradendata]

                                });

                                var data2 = ({
                                    labels: tijdstippenData,
                                    series: [lichtpercentageData]
                                });

                                new Chartist.Line('#temperatuur', data);
                                new Chartist.Line('#licht', data2);
                        </script>

        <!-- including the latest PubNub JavaScript SDK -->
        <script src="http://cdn.pubnub.com/pubnub-3.7.1.min.js"></script>
        <script>
        (function() {
                var channel = 'examen';

                var p = PUBNUB.init({
                        subscribe_key: 'sub-c-4fb85268-c12f-11e6-963b-0619f8945a4f',
                        publish_key:   'pub-c-351f3ff6-ab9c-4c73-9104-09d018ad3bc1'
                });
                // Sending data
                $('#switchOn').on('mousedown', function start(){p.publish({
                                channel : channel,
                                message : {read: 1}
                        });})
                $('#switchOff').on('mousedown', function stop(){p.publish({
                                channel : channel,
                                message : {read: 0}
                        });})
                })();

        </script>

</body>
</html>