update

Former-commit-id: c322e147ecdd186be3620b391863e3e1e0ac90bd

projects/IoTCenter/Views/Home/Device.cshtml

@@ -179,23 +179,9 @@
                 </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">
+            <template v-if="model.Name!=='调色灯'">
-                <div class="card">
-                </div>
-                <div class="card">
-                    <div class="card-header">
-                        <h3 class="card-title">接口</h3>
-                    </div>
-                    <div class="card-body">
-                        <template v-if="model.Name==='摄像头'">
-                        </template>
-                        <template v-else-if="model.Name==='调色灯'">
-                        </template>
-                        <template v-else-if="model.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>
@@ -220,10 +206,58 @@
                     </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>
+                            <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 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>
+            </template>
+        </template>
     </template>
 </div>
 @section scripts{

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>

projects/IoTClient/Assets/StreamingAssets/wwwroot/config.html

@@ -44,36 +44,27 @@
             </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);
+        isDebug = true;
-        var app;
+        useSingalR = false;
-        var vm = new Vue({
+        function data() {
-            el: '#app',
-            data() {
             return {
-                    f7params: {
-                        root: '#app',
-                        id: 'io.framework7.testapp',
-                        name: 'Framework7',
-                        theme: 'ios',
-                    },
                 server: localStorage.getItem('server')
             };
-            },
+        }
-            mounted() {
+        var methods = {
-                this.$f7ready((f7) => {
-                    app = this.$f7;
-                    $.validator.unobtrusive.parse('form');
-                });
-            },
-            methods: {
             submit: function (e) {
                 if (!$(e.target).valid()) {
                     return;
@@ -89,8 +80,8 @@
                         app.dialog.alert(error, '警告', function () { })
                     });
             }
-            }
+        };
-        })
     </script>
+    <script type="text/javascript" src="js/page.js"></script>
 </body>
 </html>

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>

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)

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();

projects/IoTClient/Assets/StreamingAssets/wwwroot/login.html

@@ -56,40 +56,32 @@
             </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);
+        isDebug = true;
-        var app;
+        function data() {
-        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() {
+        function mounted() {
-                if (!this.server) {
+            if (isApp && !this.server) {
                 location.href = "config.html";
             }
-                this.$f7ready((f7) => {
+        }
-                    app = this.$f7;
+        var methods = {
-                    $.validator.unobtrusive.parse('form');
-                });
-            },
-            methods: {
             submit: function (e) {
                 if (!$(e.target).valid()) {
                     return;
@@ -113,8 +105,8 @@
                         app.dialog.alert(error, '警告', function () { })
                     });
             }
-            }
+        };
-        })
     </script>
+    <script type="text/javascript" src="js/page.js"></script>
 </body>
 </html>