diff --git a/projects/IoTCenter/Views/Home/Device.cshtml b/projects/IoTCenter/Views/Home/Device.cshtml
index 6d06239e..e1c18e2a 100644
--- a/projects/IoTCenter/Views/Home/Device.cshtml
+++ b/projects/IoTCenter/Views/Home/Device.cshtml
@@ -179,51 +179,85 @@
                 </div>
             </div>
         </div>
-        <div class="row" v-if="model.Product.Apis.length>0">
+        <template v-if="model.Product.Apis.length>0">
             <!--接口-->
-            <div class="col-md-12">
-                <div class="card">
-                </div>
-                <div class="card">
-                    <div class="card-header">
-                        <h3 class="card-title">接口</h3>
+            <template v-if="model.Name!=='调色灯'">
+                <div class="row">
+                    <div class="col-md-12">
+                        <button class="btn btn-success" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length<=1">{{api.Name}}</button>
                     </div>
-                    <div class="card-body">
-                        <template v-if="model.Name==='摄像头'">
-                        </template>
-                        <template v-else-if="model.Name==='调色灯'">
+                </div>
+                <form class="form-horizontal" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length>1">
+                    <input type="hidden" name="Number" :value="model.Number" />
+                    <input type="hidden" name="Method" :value="api.Method" />
+                    <div class="form-group" v-for="item in api.Parameters" v-if="item.Name!=='number'">
+                        <label :for="item.Name">{{item.Description}}:</label>
+                        <template v-if="item.Type==='string'">
+                            <input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
                         </template>
-                        <template v-else-if="model.Name==='红外转发器'">
+                        <template v-else>
+                            <input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
                         </template>
-                        <template>
-                            <div class="row">
-                                <div class="col-md-12">
-                                    <button class="btn btn-success" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length<=1">{{api.Name}}</button>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-12">
+                            <button class="btn btn-success">{{api.Name}}</button>
+                        </div>
+                    </div>
+                </form>
+            </template>
+            <template v-else-if="model.Name==='调色灯'">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="card btns">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <img src="/images/light.png" />{{model.DisplayName||model.Name}}
+                                </h3>
+                                <div class="card-tools">
+                                    <img v-if="GetDataValue('状态')=='开'" v-on:click="CallApi(model.Number,'/ColorLight/Off')" src="/images/on.png" />
+                                    <img v-if="GetDataValue('状态')=='关'" v-on:click="CallApi(model.Number,'/ColorLight/On')" src="/images/off.png" />
                                 </div>
                             </div>
-                            <form class="form-horizontal" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length>1">
-                                <input type="hidden" name="Number" :value="model.Number" />
-                                <input type="hidden" name="Method" :value="api.Method" />
-                                <div class="form-group" v-for="item in api.Parameters" v-if="item.Name!=='number'">
-                                    <label :for="item.Name">{{item.Description}}:</label>
-                                    <template v-if="item.Type==='string'">
-                                        <input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
-                                    </template>
-                                    <template v-else>
-                                        <input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
-                                    </template>
-                                </div>
-                                <div class="row">
-                                    <div class="col-sm-12">
-                                        <button class="btn btn-success">{{api.Name}}</button>
+                            <div class="card-body">
+                                <form method="get" action="/App/ExecApi">
+                                    <input type="hidden" name="Number" :value="model.Number" />
+                                    <input type="hidden" name="Method" value="/ColorLight/SetColor" />
+                                    <div class="row">
+                                        <div class="col-md-3 col-xs-4">
+                                            <label class="btn">色调</label>
+                                        </div>
+                                        <div class="col-md-9 col-xs-8">
+                                            <input v-on:change="AjaxSubmit($event,model.Number,'色调')" type="range" min="0" step="1" max="255" name="Hue" class="hue" :value="GetDataValue(model.Number,'色调')" />
+                                        </div>
                                     </div>
-                                </div>
-                            </form>
-                        </template>
+                                    <div class="row">
+                                        <div class="col-md-3 col-xs-4">
+                                            <label class="btn">饱和度</label>
+                                        </div>
+                                        <div class="col-md-9 col-xs-8">
+                                            <input v-on:change="AjaxSubmit($event,model.Number,'饱和度')" type="range" min="0" step="1" max="254" name="Saturation" class="saturation" :value="GetDataValue(model.Number,'饱和度')" />
+                                        </div>
+                                    </div>
+                                </form>
+                                <form method="get" action="/App/ExecApi">
+                                    <input type="hidden" name="Number" :value="model.Number" />
+                                    <input type="hidden" name="Method" value="/ColorLight/SetBrightness" />
+                                    <div class="row">
+                                        <div class="col-md-3 col-xs-4">
+                                            <label class="btn">亮度</label>
+                                        </div>
+                                        <div class="col-md-9 col-xs-8">
+                                            <input v-on:change="AjaxSubmit($event,model.Number,'亮度')" type="range" min="0" step="1" max="254" name="Brightness" class="brightness" :value="GetDataValue(model.Number,'亮度')" />
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
+            </template>
+        </template>
     </template>
 </div>
 @section scripts{
diff --git a/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj b/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj
index 4941978f..9c6907bf 100644
--- a/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj
+++ b/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj
@@ -15,5 +15,6 @@
   <ItemGroup>
     <None Remove="wwwroot\js\device.js" />
     <None Remove="wwwroot\js\index.js" />
+    <None Remove="wwwroot\js\page.js" />
   </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/config.html b/projects/IoTClient/Assets/StreamingAssets/wwwroot/config.html
index a9e932d2..609b00d0 100644
--- a/projects/IoTClient/Assets/StreamingAssets/wwwroot/config.html
+++ b/projects/IoTClient/Assets/StreamingAssets/wwwroot/config.html
@@ -44,53 +44,44 @@
             </f7-view>
         </f7-app>
     </div>
+    <script type="text/javascript" src="lib/signalr/signalr.min.js"></script>
     <script type="text/javascript" src="lib/axios/axios.min.js"></script>
+    <script type="text/javascript" src="lib/urijs/URI.min.js"></script>
+    <script type="text/javascript" src="lib/linq/linq.min.js"></script>
     <script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
     <script type="text/javascript" src="lib/jquery-validation/jquery.validate.min.js"></script>
     <script type="text/javascript" src="lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
     <script type="text/javascript" src="lib/vue/vue.min.js"></script>
     <script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
     <script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
+    <script type="text/javascript" src="lib/flv.js/flv.min.js"></script>
+    <script type="text/javascript" src="lib/toastr/toastr.min.js"></script>
     <script type="text/javascript">
-        Framework7.use(Framework7Vue);
-        var app;
-        var vm = new Vue({
-            el: '#app',
-            data() {
-                return {
-                    f7params: {
-                        root: '#app',
-                        id: 'io.framework7.testapp',
-                        name: 'Framework7',
-                        theme: 'ios',
-                    },
-                    server: localStorage.getItem('server')
-                };
-            },
-            mounted() {
-                this.$f7ready((f7) => {
-                    app = this.$f7;
-                    $.validator.unobtrusive.parse('form');
-                });
-            },
-            methods: {
-                submit: function (e) {
-                    if (!$(e.target).valid()) {
-                        return;
-                    }
-                    localStorage.setItem('server', vm.server);
-                    var url = e.target.action;
-                    axios.post(url)
-                        .then(function (response) {
-                            console.log(response);
-                            location.href = "login.html";
-                        })
-                        .catch(function (error) {
-                            app.dialog.alert(error, '警告', function () { })
-                        });
+        isDebug = true;
+        useSingalR = false;
+        function data() {
+            return {
+                server: localStorage.getItem('server')
+            };
+        }
+        var methods = {
+            submit: function (e) {
+                if (!$(e.target).valid()) {
+                    return;
                 }
+                localStorage.setItem('server', vm.server);
+                var url = e.target.action;
+                axios.post(url)
+                    .then(function (response) {
+                        console.log(response);
+                        location.href = "login.html";
+                    })
+                    .catch(function (error) {
+                        app.dialog.alert(error, '警告', function () { })
+                    });
             }
-        })
+        };
     </script>
+    <script type="text/javascript" src="js/page.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/index.html b/projects/IoTClient/Assets/StreamingAssets/wwwroot/index.html
index 1cefe1a4..be3898d2 100644
--- a/projects/IoTClient/Assets/StreamingAssets/wwwroot/index.html
+++ b/projects/IoTClient/Assets/StreamingAssets/wwwroot/index.html
@@ -32,7 +32,7 @@
                         <f7-list-item title="没有匹配的结果"></f7-list-item>
                     </f7-list>
                     <f7-list class="search-list searchbar-found">
-                        <li style="width:33.3%;display:inline-block;" v-if="model" v-for="n in model">
+                        <li style="width:33.3%;display:inline-block;" v-if="model" v-for="n in model.Products">
                             <a :href="'product.html?number='+n.Number" class="card external" style="display:block;text-align:center;">
                                 <div class="card-header">
                                     <span class="item-title">{{n.Name}}</span>
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/js/device.js b/projects/IoTClient/Assets/StreamingAssets/wwwroot/js/device.js
index 103749cd..322bb07c 100644
--- a/projects/IoTClient/Assets/StreamingAssets/wwwroot/js/device.js
+++ b/projects/IoTClient/Assets/StreamingAssets/wwwroot/js/device.js
@@ -399,6 +399,15 @@ function init() {
             GetDatas() {
                 return Enumerable.from(this.model.Data).orderBy('o=>o.Key').toArray();
             },
+            GetDataValue(name) {
+                var data = Enumerable.from(this.model.Data)
+                    .where(function (o) { return o.Name == name })
+                    .firstOrDefault();
+                if (data != null) {
+                    return data.Value;
+                }
+                return null;
+            },
             HasDevices(name) {
                 return Enumerable
                     .from(this.model.Devices)
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/js/page.js b/projects/IoTClient/Assets/StreamingAssets/wwwroot/js/page.js
new file mode 100644
index 00000000..82d5f03d
--- /dev/null
+++ b/projects/IoTClient/Assets/StreamingAssets/wwwroot/js/page.js
@@ -0,0 +1,138 @@
+//
+var isDebug = isDebug || false;
+var useSignalR = useSignalR || false;
+var isApp = location.href.indexOf('http') !== 0;
+//
+var wsUrl = iotCenter + '/hub?group=page';
+var server = isApp ? localStorage.getItem('server') : null;
+var iotCenter = isApp ? server + '/IoTCenter' : '';
+var templateUrl = templateUrl || null;
+var dataUrl = dataUrl||null;
+var token = isApp ? localStorage.getItem('token') : null;
+//
+var connection = useSignalR? new signalR.HubConnectionBuilder().withUrl(wsUrl).build():null;
+var vm;
+var app;
+//
+var livePlayer;
+var timer;
+var decodedFrames;
+var muted = true;
+var volume = 0.5;
+//
+if (isApp) {
+    Framework7.use(Framework7Vue);
+}
+toastr.options.timeOut = 500;
+toastr.options.positionClass = "toast-top-center";
+//
+//log
+function debug(message) {
+    if (isDebug) {
+        console.log(message);
+    }
+}
+//signalr
+function connect() {
+    debug('start connect to server:' + Date());
+    if (connection.state === signalR.HubConnectionState.Disconnected) {
+        connection.start().then(function () {
+            toastr.success('客户端与服务器连接成功！');
+        }).catch(function (err) {
+            toastr.error('客户端与服务器连接失败！');
+            setTimeout(connect, 15 * 1000);
+        });
+    }
+}
+function signalRInit() {
+    connection.on('Connected', function (id) {
+        connectionId = id;
+        debug(connectionId);
+    });
+    connection.onclose(function (err) {
+        setTimeout(connect, 15 * 1000);
+    });
+    connection.on("ServerToClient", function (method, json, from) {
+        debug(method + ':' + json);
+        onMessage(method, json, from);
+    });
+}
+//加载模板
+function loadTemplate() {
+    axios.post(templateUrl, { crossDomain: true })
+        .then(function (response) {
+            var html = response.data;
+            $('#template').html(html);
+            init();
+        })
+        .catch(function (error) {
+            toastr.error('模板加载失败');
+            debug(error);
+        });
+}
+//加载数据
+function loadData() {
+    var formData = new FormData();
+    formData.append('number', new URI().search(true).number);
+    if (isApp) {
+        formData.append('token', token);
+    }
+    axios.post(dataUrl, formData)
+        .then(function (response) {
+            debug(response);
+            data.model = response.data;
+            toastr.success('数据加载成功！');
+        })
+        .catch(function (error) {
+            toastr.error('数据加载失败');
+            debug(error);
+        });
+}
+//
+//开始
+function start() {
+    if (useSignalR) {
+        signalRInit();
+        connect();
+    }
+    if (templateUrl) {
+        loadTemplate();
+    }
+    else {
+        init();
+    }
+}
+//初始化vue
+var mounted = mounted || function () { };
+function init() {
+    $('#template style').each(function (i, n) {
+        $('head').append(n);
+    });
+    if (isApp) {
+        data['f7params'] = {
+            root: '#app',
+            id: 'io.framework7.testapp',
+            name: 'Framework7',
+            theme: 'ios',
+        };
+    }
+    vm = new Vue({
+        el: '#app',
+        data: data,
+        mounted: function () {
+            mounted();
+            if (isApp) {
+                this.$f7ready((f7) => {
+                    app = this.$f7;
+                    $.validator.unobtrusive.parse('form');
+                });
+            }
+            if (dataUrl) {
+                loadData();
+            }
+        },
+        methods:methods
+    });
+}
+//
+start();
\ No newline at end of file
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/login.html b/projects/IoTClient/Assets/StreamingAssets/wwwroot/login.html
index 259cccfe..b5e6b115 100644
--- a/projects/IoTClient/Assets/StreamingAssets/wwwroot/login.html
+++ b/projects/IoTClient/Assets/StreamingAssets/wwwroot/login.html
@@ -56,65 +56,57 @@
             </f7-view>
         </f7-app>
     </div>
+    <script type="text/javascript" src="lib/signalr/signalr.min.js"></script>
     <script type="text/javascript" src="lib/axios/axios.min.js"></script>
+    <script type="text/javascript" src="lib/urijs/URI.min.js"></script>
+    <script type="text/javascript" src="lib/linq/linq.min.js"></script>
     <script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
     <script type="text/javascript" src="lib/jquery-validation/jquery.validate.min.js"></script>
     <script type="text/javascript" src="lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
     <script type="text/javascript" src="lib/vue/vue.min.js"></script>
     <script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
     <script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
+    <script type="text/javascript" src="lib/flv.js/flv.min.js"></script>
+    <script type="text/javascript" src="lib/toastr/toastr.min.js"></script>
     <script type="text/javascript">
-        Framework7.use(Framework7Vue);
-        var app;
-        var vm = new Vue({
-            el: '#app',
-            data() {
-                return {
-                    f7params: {
-                        routes: [],
-                        name: 'My App',
-                        id: 'com.myapp.test',
-                        theme: 'ios',
-                    },
-                    server: localStorage.getItem('server'),
-                    username: localStorage.getItem('username')
-                };
-            },
-            mounted() {
-                if (!this.server) {
-                    location.href = "config.html";
-                }
-                this.$f7ready((f7) => {
-                    app = this.$f7;
-                    $.validator.unobtrusive.parse('form');
-                });
-            },
-            methods: {
-                submit: function (e) {
-                    if (!$(e.target).valid()) {
-                        return;
-                    }
-                    localStorage.setItem("username", vm.username);
-                    var url = e.target.action;
-                    var data = $(e.target).serialize();
-                    axios.post(url, data)
-                        .then(function (response) {
-                            console.log(response);
-                            var data = response.data;
-                            if (data.Code === 0) {
-                                localStorage.setItem("token", data.Token);
-                                window.location.href = "index.html";
-                            }
-                            else {
-                                app.dialog.alert(data.Message, '警告', function () { });
-                            }
-                        })
-                        .catch(function (error) {
-                            app.dialog.alert(error, '警告', function () { })
-                        });
+        isDebug = true;
+        function data() {
+            return {
+                server: localStorage.getItem('server'),
+                username: localStorage.getItem('username')
+            };
+        }
+        function mounted() {
+            if (isApp && !this.server) {
+                location.href = "config.html";
+            }
+        }
+        var methods = {
+            submit: function (e) {
+                if (!$(e.target).valid()) {
+                    return;
                 }
+                localStorage.setItem("username", vm.username);
+                var url = e.target.action;
+                var data = $(e.target).serialize();
+                axios.post(url, data)
+                    .then(function (response) {
+                        console.log(response);
+                        var data = response.data;
+                        if (data.Code === 0) {
+                            localStorage.setItem("token", data.Token);
+                            window.location.href = "index.html";
+                        }
+                        else {
+                            app.dialog.alert(data.Message, '警告', function () { });
+                        }
+                    })
+                    .catch(function (error) {
+                        app.dialog.alert(error, '警告', function () { })
+                    });
             }
-        })
+        };
     </script>
+    <script type="text/javascript" src="js/page.js"></script>
 </body>
 </html>
\ No newline at end of file