MCS-3669: Scene related tutorial and changelog. (#112)

content/en/SUMMARY.md

@@ -25,6 +25,7 @@
    * [7697 LED Control](tutorial/7697_led_control.md)
    * [7687 Build with GCC](tutorial/7687_build_with_gcc.md)
    * [7687 Light Switch GCC](tutorial/7687_light_switch_gcc.md)
+   * [Create your own scene](tutorial/create_your_own_scene.md)
 * [Setting user privilege](tutorial/setting_user_privilege.md)
 * [API references](api_references/README.md)
    * [Upload datapoint](api_references/upload_datapoint.md)

content/en/change_log/2.23.md

@@ -0,0 +1,7 @@
+# 2018/05/11
+
+Users are able to monitor the real-time data from multiple devices on one single Scene page.
+
+## New Features
+1. In device detailed page, you can view the real-time data from all data channels under this device. But what if you want to monitor the multiple devices at once? Now, you can compose your own **Scene** to monitor and control the devices in one single page. [more information](../tutorial/create_your_own_scene)
+

content/en/change_log/README.md

@@ -1,5 +1,11 @@
 # MCS Change log Summary
 
+## 2018/05/11
+
+### v2.23
+
+[Users are able to monitor the real-time data from multiple devices ion one single Scene page.](./2.23)
+
 ## 2017/12/28
 
 ### v2.22

content/en/tutorial.html

@@ -130,7 +130,12 @@ <h5 class="componentCard__detail--tutorialTitle" >
                     <a href="tutorial/ifttt_trigger" >
                       Interact with IFTTT
                     </a>
-                  </li>                  
+                  </li>   
+                  <li>
+                    <a href="tutorial/create_your_own_scene" >
+                      Create your own scene
+                    </a>
+                  </li>                
                 </ul>
               </article>
             </div>

content/en/tutorial/create_your_own_scene.md

@@ -0,0 +1,93 @@
+# Create your own scene
+
+In this tutorial, you will learn how to create a scene with selected devices, data channel and customized URL links. 
+
+## Add a scene
+
+In the device detailed page, you can see all data channels under this device. In addition, you can create your own scene to monitor the data channels from multiple devices which are deployed in a specific working area.
+
+Here are the steps:
+
+1. Go to scene list page by clicking the **Scene** item on the navigation bar.
+
+![Scene on navigation header](../images/Scene/img_scene_01.png)
+
+2. Click the **+ Add scene** link under the scene list. 
+3. Provide the **Scene name**, **description** and **image** of the scene. The image is the map layout of your working area.
+4. The scene is created right after you click **Next**.
+
+![Scene on navigation header](../images/Scene/img_scene_02.png)
+
+5. The page stays in **scene edit mode** for more configuration, or you can click **Back** to go back to scene list page.
+
+## Add the devices and data channels into this scene
+
+You can add devices, which you have permission to access to, into the scene and choose which data channels to display and their display order.
+
+Here are the steps:
+
+1. Enter into **scene edit mode** by
+
+	* adding a scene.
+	* clicking **Edit** -> **Scene** in the scene view page.
+	![Scene on navigation header](../images/Scene/img_scene_04.png)
+
+2. Click **Test device** or **Device** button on the left panel.
+3. Choose the test device or device you need from the drop-down list.
+4. Modify the **Display name** if you want a different one from the original device name. 
+5. The **scene-compatible data channels** of this selected device are listed below and you can select one by one according to the order you want to present. The scene-compatible data channels include:
+
+	* all display data channels except video streaming and image.
+	* control switch data channel.
+
+6. Click **Save** and you will see this device on the top-left corner of scene.
+![Scene on navigation header](../images/Scene/img_scene_03.png)
+
+7. Click and hold on the device tile to **drag and drop** it to wherever you want on the scene.
+8. The setting is saved simultaneously, so you can click **Back** to go back to view mode anytime.
+9. You can also **Edit** or **Delete** this device tile from the scene.
+![Scene on navigation header](../images/Scene/img_scene_06.png)
+
+## Add the customized URLs into this scene
+
+Here are the steps:
+
+1. In the **scene edit mode**, click **URL** button.
+2. Provide the **Display text** and **URL link**. The URL link must include the protocol name as prefix, for example **http://**mcs.mediatek.com or **https://**mcs.mediatek.com
+3. You can also **Edit** or **Delete** this URL link from the scene.
+
+## Share this scene to other MCS users
+
+You can share your scene to other MCS users and grant either **Administrator** or **Viewer** privilege to them. You also need to pay special attention to the **device privileges**. Because scene privileges only work at scene level and you have to grand the device privileges to the scene coordinators one by one. Otherwise, they cannot see the devices which they don't have permission to access to.
+
+Here are the steps:
+
+1. Enter into **privileges edit mode** by clicking **Edit** -> **Privileges** in the scene view page.
+![Scene on navigation header](../images/Scene/img_scene_05.png)
+
+2. Click **+ Add user** link under the user list. 
+3. Provide the **Email** that user registered in MCS.
+4. Select the **Role** you want to grant to that user.
+5. Click **Ok** and you are all set.
+6. If you haven't grand the device permission to that user, please go to device detailed page -> **User privileges** to configure it one by one.
+
+**Scene user privileges**
+
+| Role | View scene | Update scene | Delete scene| Set privileges |
+|:---:|:---:|:---:|:---:|:---:|
+|**Administrator**|Yes|Yes|No|Yes|
+|**Viewer**|Yes|No|No|No|
+
+## View the scene and monitor the devices 
+
+All the scenes which you have permission to access to are listed in the scene list page. You can click on the scene name to go to specific scene view page directly and it provides an overview of the devices in your working area.
+
+In the scene view page, you can
+
+1. view the real-time data of selected devices.
+2. view the online/offline status of selected devices.
+3. operate the control switch data channel. 
+4. visit device detailed page by simply clicking on the device display name.
+5. visit the other websites by simply clicking on the URL link.
+
+![Scene on navigation header](../images/Scene/img_scene_07.png)

content/zh-CN/SUMMARY.md

@@ -25,6 +25,7 @@
    * [7697 LED Control](tutorial/7697_led_control.md)
    * [7687 Build with GCC](tutorial/7687_build_with_gcc.md)
    * [7687 Light Switch GCC](tutorial/7687_light_switch_gcc.md)
+   * [Create your own scene](tutorial/create_your_own_scene.md)
 * [Setting user privilege](tutorial/setting_user_privilege.md)
 * [API references](api_references/README.md)
    * [Upload datapoint](api_references/upload_datapoint.md)

content/zh-CN/change_log/2.23.md

@@ -0,0 +1,7 @@
+# 2018/05/11
+
+增加场景图的功能，能同时监看多个装置的即时数据。
+
+## 新功能
+1. 在装置详情页面中，您可以看到此装置底下所有的资料通道以及通道的即时数据。但若想要同时监控多个装置呢？现在，您可以透过**场景图**来达到即时监控并操作多个装置的需求。[详细介绍](../tutorial/create_your_own_scene)
+

content/zh-CN/change_log/README.md

@@ -1,5 +1,11 @@
 # MCS 更新日志总览
 
+## 2018/05/11
+
+### v2.23
+
+[增加场景图的功能，能同时监看多个装置的即时数据。](./2.23)
+
 ## 2017/12/28
 
 ### v2.22

content/zh-CN/tutorial.html

@@ -131,6 +131,11 @@ <h5 class="componentCard__detail--tutorialTitle" >
                       MCS 与 IFTTT 互动
                     </a>
                   </li>
+                  <li>
+                    <a href="tutorial/create_your_own_scene" >
+                      打造您专属的场景图
+                    </a>
+                  </li>  
                 </ul>
               </article>
             </div>

content/zh-CN/tutorial/create_your_own_scene.md

@@ -0,0 +1,90 @@
+# 打造您专属的场景图
+
+在本篇教学文章中，您将学会如何建立一个场景图，并且将装置、资料通道与网页连结加入此场景图当中，以方便后续的监控并落地到实际的工作场域中。
+
+## 新增场景图
+
+在装置详情页面中，您可以看到此装置底下所有的资料通道以及通道的即时数据。但若想要同时监控多个装置呢？此时，您可以透过场景图来达到即时监控并操作多个装置的需求。
+
+操作步骤：
+
+1. 点击网站上方导览列中的 **场景** 前往场景列表页面。
+![Scene on navigation header](../images/Scene/img_scene_01.png)
+
+2. 点击列表下方的 **+ 新增场景**。
+3. 输入您自订的 **场景名称**、**描述** 并上传 **图片**，这里的图片就是场景的背景图，也就是您工作场域的平面格局图。
+4. 当您按下 **下一步** 后，此场景已经新增完成。
+![Scene on navigation header](../images/Scene/img_scene_02.png)
+
+5. 新增后，页面会停留在 **场景编辑模式**，您可以在此编辑页面继续进行新增装置等进阶设定，完成后，点击 **返回** 回到场景详情页面。
+
+
+## 将装置与资料通道加入场景图中
+
+您可以选取您有权限读取的装置并将其加到场景图中，并选择所要监控的资料通道。
+
+操作步骤：
+
+1. 您可以藉由以下两个动作进入 **场景编辑模式**
+	* 新增场景图
+	* 在场景详情页面点击 **编辑** -> **场景** 
+	![Scene on navigation header](../images/Scene/img_scene_04.png)
+
+2. 点击左方操作面板的 **测试装置** 或 **装置** 按钮。
+3. 在下拉选单中选取您所要监控的装置。
+4. 您也可以自订此装置在场景图上的显示名称，若不修改预设使用原本的装置名称。
+5. **可显示于场景的资料通道** 会显示在下方的区块，您可以按照您期望的显示顺序选取需要被监控的资料通道。**可显示于场景的资料通道**包含：
+
+	* 除了影像串流与图片之外的所有显示型资料通道。
+	* 控制型的开关。
+
+6. 点击 **储存** 后，您新增的装置会出现在场景图的左上角。
+![Scene on navigation header](../images/Scene/img_scene_03.png)
+
+7. 可透过滑鼠长按装置显示区块进行拖拉，将装置摆放到想要的位置。
+8. 在编辑模式中的修改会即时地被储存，因此你可以随时点击**返回** 回到场景详情页面。
+9. 随后，您可透过 **编辑** 或 **删除** 选单来调整装置显示区块。
+![Scene on navigation header](../images/Scene/img_scene_06.png)
+
+
+## 将网站连结加入场景图中
+
+操作步骤：
+
+1. 在 **场景编辑模式** 点击 **网址** 按钮。
+2. 输入您自订的 **显示文字** 与 **网址连结**。请注意，网址连结的格式必须包含连接协定，例如：**http://**mcs.mediatek.com or **https://**mcs.mediatek.com
+3. 随后，您可透过 **编辑** 或 **删除** 选单来调整网站连结。
+
+## 将场景图分享给其他 MCS 使用者
+
+您可以针对某一个场景图赋予其他 MCS 使用者 **管理者** 或 **一般检视** 的权限，分享此场景图，与之共同协作。但同时，您也必须手动将场景内的 **装置权限** 赋予给此使用者，否则使用者将无法看到没有权限的装置。
+
+操作步骤：
+
+1. 点击 **编辑** -> **使用者权限** 进入 **权限编辑模式**。
+![Scene on navigation header](../images/Scene/img_scene_05.png)
+
+2. 点击使用者列表下方的 **+ 新增使用者**。 
+3. 输入您想分享的使用者在 MCS 注册的 **Email** 帐号。
+4. 选择 **角色**。
+5. 按下 **确定** 则完成所有设定。
+6. 若您尚未将场景内的装置权限开放给该名使用者，请务必在装置详情页面 -> **使用者权限** 中补上对应的设定。
+
+**场景的使用者权限**
+
+| 角色 | 观看场景 | 变更场景设定 | 删除场景| 设定权限 |
+|:---:|:---:|:---:|:---:|:---:|
+|**管理者**|可|可|否|可|
+|**一般检视**|可|否|否|可|
+
+## 观看场景并监控装置
+
+在场景列表中，您可以看到您有权限读取的所有场景。点击场景名称，则可进入场景详情页面。在此，您可以观看并控制你工作场域中的所有装置，其功能包括：
+
+1. 观看所选装置的即时数据。
+2. 观看所选装置的连线状态。
+3. 操作控制型开关。
+4. 透过点击装置名称，访问装置详情页面。
+5. 透过点击网站连结，访问自定义的网站页面。
+
+![Scene on navigation header](../images/Scene/img_scene_07.png)

content/zh-TW/SUMMARY.md

@@ -25,6 +25,7 @@
    * [7697 LED Control](tutorial/7697_led_control.md)
    * [7687 Build with GCC](tutorial/7687_build_with_gcc.md)
    * [7687 Light Switch GCC](tutorial/7687_light_switch_gcc.md)
+   * [Create your own scene](tutorial/create_your_own_scene.md)
 * [Setting user privilege](tutorial/setting_user_privilege.md)
 * [API references](api_references/README.md)
    * [Upload datapoint](api_references/upload_datapoint.md)
@@ -64,4 +65,5 @@
    * [2.20](change_log/2.20.md)
    * [2.21](change_log/2.21.md)
    * [2.22](change_log/2.22.md)
+   * [2.23](change_log/2.23.md)
 

content/zh-TW/change_log/2.23.md

@@ -0,0 +1,7 @@
+# 2018/05/11
+
+增加場景圖的功能，能同時監看多個裝置的即時數據。
+
+## 新功能
+1. 在裝置詳情頁面中，您可以看到此裝置底下所有的資料通道以及通道的即時數據。但若想要同時監控多個裝置呢？現在，您可以透過**場景圖**來達到即時監控並操作多個裝置的需求。[詳細介紹](../tutorial/create_your_own_scene)
+

content/zh-TW/change_log/README.md

@@ -1,5 +1,11 @@
 # MCS 更新日誌總覽
 
+## 2018/05/11
+
+### v2.23
+
+[增加場景圖的功能，能同時監看多個裝置的即時數據。](./2.23)
+
 ## 2017/12/28
 
 ### v2.22

content/zh-TW/tutorial.html

@@ -131,6 +131,11 @@ <h5 class="componentCard__detail--tutorialTitle" >
                       MCS 與 IFTTT 互動
                     </a>
                   </li>
+                  <li>
+                    <a href="tutorial/create_your_own_scene" >
+                      打造您專屬的場景圖
+                    </a>
+                  </li> 
                 </ul>
               </article>
             </div>