update doc, and use js to fix-height

README.md

@@ -9,17 +9,6 @@
 - Python3.6+
 - [RethinkDB](https://rethinkdb.com/)
 
-## Features
-- [x] APK上传和解析
-- [x] 设备远程控制
-
-    - [x] 鼠标右键点击BACK，中间点击HOME
-    - [x] 屏幕到后台自动断开WebSocket连接
-    - [x] 鼠标滚轮翻屏
-    - [ ] 上传安装应用
-    - [x] 常用功能(打开网址, 电源)
-
-
 ## 部署
 **Step 1**
 
@@ -66,41 +55,27 @@ python3 main.py
 
 启动之后，浏览器打开 <http://localhost:4000>，完成认证之后就可以顺利的看到设备列表页了。不过目前还是空的，什么都没有。
 
-![image](https://user-images.githubusercontent.com/3281689/53810253-7eb35300-3f91-11e9-815c-7cafa892a645.png)
+![image](https://user-images.githubusercontent.com/3281689/54806497-1a90ce80-4cb5-11e9-84c5-bbb4f427cbd5.png)
 
 **Step 3: Android设备接入**
 
 接下来，进行安卓设备接入。这时需要用到另外一个项目 [atxserver2-android-provider](https://github.com/openatx/atxserver2-android-provider)
 这个项目运行需要Python3.6+和NodeJS
 
-```bash
-git clone https://github.com/openatx/atxserver2-android-provider
-cd atxserver2-android-provider
-
-# 安装Python依赖
-pip3 install -r requirements.txt
-
-# 安装NodeJS依赖()
-npm install
-
-# 运行，参数填写atxserver2的地址
-python3 main.py --server http://localhost:4000
-```
-
-这个时候网页上应该就能看到连接上的设备了。不过先别急
-
-现在有一点还没能自动完成，不过以后会写进程序里面，目前需要连接上手机之后，还需要执行下下面的命令
+这里我们强烈推荐使用Docker部署，源码部署请参考文档 [atxserver2-android-provider](https://github.com/openatx/atxserver2-android-provider)
 
 ```bash
-pip install uiautomator2
-# 确保设备通过数据线连接到手机
-adb devices # 检查设备是否在线
-python -m uiautomator2 init # 安装atx-agent, minicap 等其他必要文件
+SERVER_URL="http://10.0.0.1:4000" # 这个修改成自己的atxserver2地址
+docker pull $IMAGE
+docker run -it --rm --privileged -v /dev/bus/usb:/dev/bus/usb --net host \
+    codeskyblue/atxserver2-android-provider \
+    python main.py --server ${SERVER_URL}
 ```
 
-到这一步，你可以进行远程真机的操作了。
+该镜像会把所有必要的资源 （atx-uiautomator.apk, minicap, minitouch, atx-agent) 全部推送到手机上。
+一切就绪后，你可以进行远程真机的操作了。
 
-![image](https://user-images.githubusercontent.com/3281689/53810343-ae625b00-3f91-11e9-8ce1-37a256f1e0aa.png)
+![atxserver2-remotecontrol](https://user-images.githubusercontent.com/3281689/54807405-187c3f00-4cb8-11e9-8a8e-8092c5472dc1.gif)
 
 **Step 3: iOS设备接入**
 

templates/index.html

@@ -18,6 +18,10 @@
     .color-yellow {
         color: burlywood;
     }
+
+    .cursor-pointer {
+        cursor: pointer;
+    }
 </style>
 {% end %}
 
@@ -76,6 +80,13 @@
             </template>
         </el-table-column>
         <!-- <el-table-column prop="platform" label="类型"></el-table-column> -->
+        <el-table-column label="设备名" prop="prop_name"></el-table-column>
+        <el-table-column label="资产编号">
+            <template slot-scope="scope">
+                <!-- <el-input size="mini"></el-input> -->
+                <span v-text="prop_propertyId"></span> <i class="fas fa-edit cursor-pointer"></i>
+            </template>
+        </el-table-column>
         <el-table-column label="设备编号">
             <template slot-scope="scope">
                 <template v-if="scope.row.status == 'stop using'">

templates/remotecontrol_android.html

@@ -11,7 +11,7 @@
   body,
   #content-wrapper {
     height: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
   }
 
   #content-wrapper {
@@ -29,8 +29,8 @@
     height: 100%;
   }
 
-  .height-fill {
-    height: -webkit-fill-available;
+  .height-auto-fill {
+    /* height: -webkit-fill-available; */
   }
 
   .grow-0 {
@@ -90,7 +90,7 @@
 {% end %}
 
 {% block nav %}
-<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark" style="height: 55px;">
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="height: 55px;">
   <div class="container-fluid">
     <a class="navbar-brand" href="/">
       <span class="title">ATXServer2</span></a>
@@ -133,7 +133,8 @@
 {% block content %}
 <div class="container-fluid d-flex flex-column">
   <div class="row grow-1">
-    <div class="col-sm debugarea d-flex flex-column justify-content-center nopadding grow-0 height-fill">
+    <div class="col-sm d-flex flex-column justify-content-center nopadding grow-0"
+      style="height: -webkit-fill-available">
       <!-- screen header -->
       <section class="debugarea" style="height: 32px; line-height: 32px; justify-self: start">
         {{!properties.serial}}
@@ -179,7 +180,7 @@
         </button>
       </section>
     </div>
-    <div class="col-sm debugarea height-fill" style="min-height: 0; overflow-y: auto">
+    <div class="col-sm height-auto-fill" style="min-height: 0; overflow-y: auto">
       <el-tabs v-model="activeName" @tab-click="handleTabClick">
         <el-tab-pane label="常用" name="common">
           <div ref="commonContainer" class="row">
@@ -371,7 +372,7 @@ <h4>增加快捷命令</h4>
           </p>
         </el-tab-pane>
         <el-tab-pane label="截图" name="screenshot">
-          <a :href="screenshotUrl">Screenshot</a>
+          <a :href="screenshotUrl" download>下载截图</a>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -392,6 +393,15 @@ <h4>增加快捷命令</h4>
   const udid = "{{udid}}"
   const userEmail = "{{current_user.email}}"
 
+  // fill avaliable space except nvabar
+  $(function () {
+    function fitControlPanel() {
+      $(".height-auto-fill").height(document.body.clientHeight - $("nav").outerHeight(true));
+    }
+    window.addEventListener("resize", fitControlPanel)
+    fitControlPanel()
+  })
+
   $.getJSON("/api/v1/user/devices/" + udid)
     .then(ret => {
       vm = new Vue({
@@ -1278,7 +1288,7 @@ <h4>增加快捷命令</h4>
             return "http://" + this.address + "/term"
           },
           screenshotUrl() {
-            return "http://" + this.address + "/screenshot"
+            return "http://" + this.address + "/screenshot/0"
           },
           remoteConnectAddr() {
             return "adb connect " + this.source.remoteConnectAddress

templates/remotecontrol_apple.html

@@ -9,7 +9,6 @@
   body,
   #content-wrapper {
     height: 100%;
-    overflow: hidden;
   }
 
   #content-wrapper {
@@ -26,8 +25,8 @@
     height: 100%;
   }
 
-  .height-fill {
-    height: -webkit-fill-available;
+  .height-auto-fill {
+    /* height: -webkit-fill-available; */
   }
 
   .grow-0 {
@@ -149,7 +148,7 @@
 {% block content %}
 <div class="container-fluid d-flex flex-column">
   <div class="row grow-1">
-    <div class="col-sm debugarea d-flex flex-column justify-content-center nopadding grow-0 height-fill">
+    <div class="col-sm debugarea d-flex flex-column justify-content-center nopadding grow-0 height-auto-fill">
       <section class="debugarea" style="height: 2rem; line-height: 2rem; padding: 0 10px; justify-self: start">
         <span>
           <i class="fas fa-mobile-alt cursor-pointer" :class='{"fa-rotate-90": landscape}'></i>
@@ -177,7 +176,7 @@
         </button>
       </section>
     </div>
-    <div class="col-sm debugarea height-fill" style="overflow-y: auto">
+    <div class="col-sm debugarea height-auto-fill" style="overflow-y: auto">
       <el-tabs v-model="activeName" @tab-click="handleTabClick">
         <el-tab-pane label="常用" name="common">
           <dl>
@@ -210,10 +209,17 @@
   const udid = "{{udid}}"
   const userEmail = "{{current_user.email}}"
 
+  // fill avaliable space except nvabar
+  $(function () {
+    function fitControlPanel() {
+      $(".height-auto-fill").height(document.body.clientHeight - $("nav").outerHeight(true));
+    }
+    window.addEventListener("resize", fitControlPanel)
+    fitControlPanel()
+  })
+
   $.getJSON("/api/v1/user/devices/" + udid)
     .then(ret => {
-      // closeWindowWhenReleased()
-
       vm = new Vue({
         el: "#content-wrapper",
         data: Object.assign({