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
define.class("$ui/view", function ($ui$, view, label, button, $widgets$, colorpicker) {

        function componentToHex(c) {
                c = Math.floor(c);
                var hex = c.toString(16);
                return hex.length === 1 ? "0" + hex : hex;
        }

        function rgbToHex(r, g, b) {
                return "#" + componentToHex(r * 255) + componentToHex(g * 255) + componentToHex(b * 255);
        }

        function hexToRgb(hex) {
                hex += '';
                // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
                var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
                hex = hex.replace(shorthandRegex, function(m, r, g, b) {
                        return r + r + g + g + b + b;
                });

                var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                return result ? vec4(
                        parseInt(result[1], 16) / 255,
                        parseInt(result[2], 16) / 255,
                        parseInt(result[3], 16) / 255,
                        1
                ) : null;
        }

        this.attributes = {
                config:Config({type:Object}),
                lightname:Config({type:String})
        }

        this.flex = 0;
        this.bgcolor = NaN;
        this.flexdirection = "column";

        this.init = this.onconfig = function() {
                if (this._config) {
                        this.lightname = this._config.name
                }
        }

        this.render = function() {
                var controls = []
                var id = this.config.id;

                if ('on' in this._config.state) {
                        controls.push(
                                view({},
                                        button({text:"on", click:function() { this.rpc.iot.update(id, 'on', true); }.bind(this) }),
                                        button({text:"off", click:function() { this.rpc.iot.update(id, 'on', false); }.bind(this) }))
                        )
                }

                if ('color' in this._config.state) {
                        controls.push(
                                colorpicker({
                                        colorwheel:true,
                                        colorsliders:false,
                                        colorbox:false,
                                        value: vec4(hexToRgb(this._config.state.color.value)),
                                        valuechange:function(color) {
                                                var hex = rgbToHex(color[0], color[1], color[2]);
                                                this.rpc.iot.update(id, 'color', hex);
                                        }.bind(this)
                                })
                        )
                }

                return [
                        label({text:this.lightname}),
                        controls
                ]
        }

});