WebMQonttrol/index_tft.html at master · guibom/WebMQonttrol · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!-- Copyright (c) 2014, Guilherme Ramos <longinus@gmail.com> -->
<!-- https://github.com/guibom/WebMQonttrol -->
<!-- Released under the MIT license. See LICENSE file for details. -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>Home Control</title>

    <!-- Bootstrap and Bootstrap-Slider CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/weather-icons.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/jquery.nouislider.min.css" rel="stylesheet">

</head>

<body>
    <div class="container">


    <div class="row">
        <div class="col-xs-7">
            <h2><span class="label label-info" style="vertical-align:top; display: block; text-align:left;">Sofa light</span></h2>
        </div>
        <div class="col-xs-5" style="text-align:right; vertical-align:center; padding-top: 14px; "><a href="#" id="Light_1" class="btn btn-block btn-lg btn-danger WMQ_light" role="button" style="vertical-align:bottom; "><span class="glyphicon glyphicon-remove"></span>N/A</a>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7">
            <h2><span class="label label-info" style="vertical-align:top; display: block; text-align:left;">TV light</span></h2>
        </div>
        <div class="col-xs-5" style="text-align:right; vertical-align:center; padding-top: 14px; "><a href="#" id="Light_2" class="btn btn-block btn-lg btn-danger WMQ_light" role="button" style="vertical-align:bottom;"><span class="glyphicon glyphicon-remove"></span>N/A</a>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7">
            <h2><span class="label label-info" style="vertical-align:top; display: block; text-align:left;">Recliner light</span></h2>
        </div>
        <div class="col-xs-5" style="text-align:right; vertical-align:center; padding-top: 14px; "><a href="#" id="Light_3" class="btn btn-block btn-lg btn-danger WMQ_light" role="button" style="vertical-align:bottom;"><span class="glyphicon glyphicon-remove"></span>N/A</a>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7">
            <h2><span class="label label-info" style="vertical-align:top; display: block; text-align:left;">Living room</span></h2>
        </div>
        <div class="col-xs-5" style="text-align:right; vertical-align:center; padding-top: 14px; "><a href="#" id="Light_4" class="btn btn-block btn-lg btn-danger WMQ_light" role="button" style="vertical-align:bottom;"><span class="glyphicon glyphicon-remove"></span>N/A</a>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7">
            <h2><span class="label label-info" style="vertical-align:top; display: block; text-align:left;">Chair Light</span></h2>
        </div>
        <div class="col-xs-5" style="text-align:right; vertical-align:center; padding-top: 14px; "><a href="#" id="Light_7" class="btn btn-block btn-lg btn-danger WMQ_light" role="button" style="vertical-align:bottom;"><span class="glyphicon glyphicon-remove"></span>N/A</a>
        </div>
    </div>


    <!-- END Light Control Panel -->

    </div>
        <!-- TAB PANE END -->

    <!-- jQuery -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- socket.io for communication -->
    <script type="text/javascript" src="js/socket.io.min.js"></script>

    <!-- .noUIslider Slider -->
    <script src="js/jquery.nouislider.min.js"></script>
    <script src="js/tab.js"></script>
    <script src="js/modernizr.js"></script>

    <!-- Utility Functions -->
    <script src="js/WebMQonttrol.js"></script>

    <!-- Individual Panel scripts -->
    <script src="panels/panelLight.js"></script>
    <script src="panels/panelMPC.js"></script>
    <script src="panels/paneliTunes.js"></script>
    <script src="panels/panelMPCSelection.js"></script>
    <!-- <script src="panels/panelSensors.js"></script>  -->

    <!-- Main Script -->
    <script>

        $(function() {

            //Objects that hold the topic subscriptions and other values for that panel
            var masterPanel = [panelMPC, panelLight, paneliTunes, panelMPCSelection];

            //Start sudo-constructor on each panel object that has one
            //Do it before starting the web socket
            $.each(masterPanel, function(key, obj) {
                if (typeof obj.__begin__ === 'function')
                    obj.__begin__();
            });

            //Resize the page to match the proper size
            tweakPageForEnvironment(findBootstrapEnvironment());


            //Create web socket and start listening for MQTT messages
            socket.on('connect', function () {
                socket.on('mqtt', function (lastmsg) {

                    //Save lastmsg
                    msg = lastmsg;

                    //Forward topic to the right object
                    $.each(masterPanel, function(key, obj) {
                        if (obj[msg.topic])
                            obj[msg.topic]();
                    });

                    //Preview of MQTT message
                    $('#message').html(msg.topic + ', ' + msg.payload.substring(0, 100));

                });

                //Topic subscriptions
                socket.emit('subscribe',
                    {topic: 'home/light/+/status/#'},
                    {topic: 'home/player/mpc'},
                    {topic: 'home/player/mpc/status/#'},
                    {topic: 'home/player/itunes'},
                    {topic: 'home/player/itunes/status/#'},
                    {topic: 'home/web/config/#'},
                    {topic: 'home/htpc/#'}
                    );
            });

            //Check if we have a valid websocket connection
            socket.on('error', function () {
                logError("Could not connect to the web socket server!");
            })

            //Show/Hide the panels depending if they have a class with the same ID as the tab
            $('.tab_control').click(function (e) {
                e.preventDefault();

                $(this).tab('show');
                var currentId = "." + $(this).attr('id');

                $(".tab-pane").removeClass("active");
                $(currentId).addClass("active");
            })


            //noUiSlider Events
            $('.noUiSlider').noUiSlider({
                range: [0, 100]
                ,start: 0
                ,step: 1
                ,handles: 1
                ,serialization: {
                    resolution: 1
                }
                ,set: function(){
                    socket.emit('publish', {
                        topic: 'home/light/1/action/set',
                        message: new String($("#slider1").val())
                    });
                }
                ,slide: function(){
                    $('#Light_1_Brightness').text($("#slider1").val());
                }
            });
        });

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