From 4a3ad4c2971ec200fdf8f8bef26712e6e7ff487e Mon Sep 17 00:00:00 2001
From: Eason010212 <1371033826@qq.com>
Date: Thu, 31 Aug 2023 22:16:12 +0800
Subject: [PATCH] August-New-Widget

---
 icons/camera.svg   |   1 +
 icons/database.svg |   1 +
 icons/mic.svg      |   1 +
 js/lang.js         |  25 +-
 js/projects.js     | 158 ++++++--
 js/widgets.js      | 964 +++++++++++++++++++++++++++++++++++++++++----
 6 files changed, 1042 insertions(+), 108 deletions(-)
 create mode 100644 icons/camera.svg
 create mode 100644 icons/database.svg
 create mode 100644 icons/mic.svg

diff --git a/icons/camera.svg b/icons/camera.svg
new file mode 100644
index 0000000..409b92c
--- /dev/null
+++ b/icons/camera.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691160166481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2302" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 736c-105.856 0-192-86.08-192-192 0-105.856 86.144-192 192-192 105.92 0 192 86.144 192 192 0 105.92-86.08 192-192 192z m0-320c-70.592 0-128 57.408-128 128s57.408 128 128 128 128-57.408 128-128-57.408-128-128-128z m352 480h-704c-52.928 0-96-43.072-96-96v-512C64 235.072 107.072 192 160 192H256a32 32 0 0 1 0 64H160a32 32 0 0 0-32 32v512a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32v-512a32 32 0 0 0-32-32H512a32 32 0 0 1 0-64h352c52.928 0 96 43.072 96 96v512c0 52.928-43.072 96-96 96zM768 336a48 48 0 1 0 96 0 48 48 0 0 0-96 0zM480 128a32 32 0 0 1-32 32H320a32 32 0 0 1 0-64h128a32 32 0 0 1 32 32z" fill="#4e73df" p-id="2303"></path></svg>
\ No newline at end of file
diff --git a/icons/database.svg b/icons/database.svg
new file mode 100644
index 0000000..237d56f
--- /dev/null
+++ b/icons/database.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691160208019" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5253" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 384C307.2 384 85.333333 328.533333 85.333333 213.333333s221.866667-170.666667 426.666667-170.666666 426.666667 55.466667 426.666667 170.666666-221.866667 170.666667-426.666667 170.666667z m0-256C290.133333 128 170.666667 192 170.666667 213.333333s119.466667 85.333333 341.333333 85.333334 341.333333-64 341.333333-85.333334-119.466667-85.333333-341.333333-85.333333zM512 682.666667c-204.8 0-426.666667-55.466667-426.666667-170.666667 0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667c0 21.333333 106.666667 85.333333 341.333333 85.333333s341.333333-64 341.333333-85.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667c0 115.2-221.866667 170.666667-426.666667 170.666667z" p-id="5254" fill="#4e73df"></path><path d="M512 981.333333c-204.8 0-426.666667-55.466667-426.666667-170.666666V213.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v597.333334c0 21.333333 106.666667 85.333333 341.333333 85.333333s341.333333-64 341.333333-85.333333V213.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v597.333334c0 115.2-221.866667 170.666667-426.666667 170.666666z" p-id="5255" fill="#4e73df"></path></svg>
\ No newline at end of file
diff --git a/icons/mic.svg b/icons/mic.svg
new file mode 100644
index 0000000..0924cd5
--- /dev/null
+++ b/icons/mic.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691160185635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3381" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 728.461778c59.107644 0 115.020281-20.767551 153.360374-63.900156 38.340094-38.340094 59.107644-89.460218 59.107645-145.372854V209.273011C724.468019 94.25273 631.812793 0 512 0S299.531981 94.25273 299.531981 209.273011v314.708268c0 110.227769 92.655226 204.480499 212.468019 204.480499z m-127.800312-519.188767c0-68.692668 55.912637-123.0078 127.800312-123.0078s127.800312 55.912637 127.800312 123.0078v314.708268c0 30.352574-12.780031 59.107644-33.547582 81.472699-25.560062 25.560062-59.107644 38.340094-94.25273 38.340094-71.887676 0-127.800312-55.912637-127.800312-123.007801V209.273011z" p-id="3382" fill="#4e73df"></path><path d="M852.268331 490.433697c0-25.560062-17.572543-43.132605-43.132606-43.132605s-43.132605 17.572543-43.132605 43.132605c0 145.372855-115.020281 263.588144-255.600624 263.588144s-255.600624-119.812793-255.600624-263.588144c0-25.560062-17.572543-43.132605-43.132605-43.132605s-43.132605 17.572543-43.132606 43.132605c0 178.920437 132.592824 324.293292 298.73323 345.060843v102.240249H384.199688c-25.560062 0-43.132605 17.572543-43.132605 43.132606s17.572543 43.132605 43.132605 43.132605h255.600624c25.560062 0 43.132605-17.572543 43.132605-43.132605s-17.572543-43.132605-43.132605-43.132606h-84.667707v-97.447738c166.140406-22.365055 297.135725-170.932917 297.135726-349.853354z" p-id="3383" fill="#4e73df"></path></svg>
\ No newline at end of file
diff --git a/js/lang.js b/js/lang.js
index 4378be2..8ee4ea7 100644
--- a/js/lang.js
+++ b/js/lang.js
@@ -25,7 +25,7 @@ var JSLang = {
         "editProper": "修改项目属性",
         "viewProject": "查看和编辑项目内容",
         "illegalCycle": "逻辑视图中存在循环方法，不允许后台运行",
-        "codeException": "代码内部存在错误",
+        "codeException": "当前项目的逻辑视图存在无法在后台运行的内容",
         "loading": "加载中",
         "loading2": "更改中",
         "wrongAcc": "用户名或密码错误",
@@ -97,7 +97,7 @@ var JSLang = {
         "widget": "组件",
         "data": "- 数据 -",
         "lineChart": "折线图表",
-        "barChart": "柱状图表",
+        "barChart": "投票器",
         "dataTable": "数据表格",
         "dataMap": "数据地图",
         "dashboard": "仪表盘",
@@ -208,7 +208,12 @@ var JSLang = {
         "invalidUType": "不正确的组件类别。",
         "noUnitFound": "未找到组件。",
         "platformList": "已登录平台",
-        "deviceList": "已连接设备"
+        "deviceList": "已连接设备",
+        "camera": "摄像头",
+        "mic": "麦克风",
+        "tinydb": "数据库",
+        "resolution": "分辨率",
+        "fps": "帧率"
     },
     "tw": {
         "syncInterval": "自動更新頻率",
@@ -419,7 +424,12 @@ var JSLang = {
         "invalidUType": "不正確的組件類別。",
         "noUnitFound": "未找到組件。",
         "platformList": "已登錄平台",
-        "deviceList": "已連接設備"
+        "deviceList": "已連接設備",
+        "camera": "攝像頭",
+        "mic": "麥克風",
+        "tinydb": "數據庫",
+        "resolution": "分辨率",
+        "fps": "幀率"
     },
     "en": {
         "syncInterval": "Auto-sync",
@@ -630,7 +640,12 @@ var JSLang = {
         "invalidUType": "Invalid unit type.",
         "noUnitFound": "The unit does not exist",
         "platformList": "Platforms",
-        "deviceList": "Devices"
+        "deviceList": "Devices",
+        "camera": "Camera",
+        "mic": "Microphone",
+        "tinydb": "Database",
+        "resolution": "Resolution",
+        "fps": "FPS"
     }
 }
 
diff --git a/js/projects.js b/js/projects.js
index 8ab894d..a8dace5 100644
--- a/js/projects.js
+++ b/js/projects.js
@@ -511,9 +511,13 @@ function shareKey() {
 }
 
 function switch_mode() {
+    grid.on("contextmenu", function(e) {
+        e.preventDefault()
+    })
     grid.removeAttr("hidden")
     grid2.removeAttr("hidden")
     grid3.removeAttr("hidden")
+    
     if (globalProjectType == DATA_MODE) {
         $("#projMode").removeClass("btn-primary")
         $("#projMode").addClass("btn-light")
@@ -699,6 +703,8 @@ function view_project(projectName, projectType) {
                 }
             })
             MixIO.log = function(text) {
+                if(typeof text == "object")
+                    text = JSON.stringify(text)
                 if (jTa2.html())
                     jTa2.html(jTa2.html() + '<br>' + '[' + timeStamp2String().substring(11) + '] ' + text)
                 else
@@ -895,6 +901,8 @@ function view_project(projectName, projectType) {
                 } else if (topic1.split('/').length == 3 && !isMixly) {
                     var tp = stringendecoder.encodeHtml(topic1.split('/')[2])
                     var ms = message1.toString()
+                    if(ms.length>500)
+                        ms = "[Too long to display]"
                     if(isJSON(ms))
                     {   
                         var msJSON = JSON.parse(ms)
@@ -948,6 +956,8 @@ function view_project(projectName, projectType) {
                 } else if (topic1.split('/').length == 4 && isMixly) {
                     var tp = stringendecoder.encodeHtml(topic1.split('/')[3])
                     var ms = message1.toString()
+                    if(ms.length>500)
+                        ms = "[Too long to display]"
                     if(isJSON(ms))
                     {   
                         var msJSON = JSON.parse(ms)
@@ -1010,6 +1020,14 @@ function view_project(projectName, projectType) {
             var units_array = $(prev_layout)
             for (var ct = 0; ct <= units_array.length - 1; ct = ct + 1) {
                 var un = $(units_array[ct])
+                var titleHidden = un.attr('title-hidden')
+                // if no title-hidden attribute, set it to false
+                if (titleHidden == undefined)
+                    titleHidden = false
+                if (titleHidden == "true")
+                    titleHidden = true
+                if (titleHidden == "false")
+                    titleHidden = false
                 var toolkits = {
                     'input_button': add_button,
                     'input_slider': add_slider,
@@ -1030,9 +1048,10 @@ function view_project(projectName, projectType) {
                     'decorate_text': add_decorate_text,
                     'decorate_pic': add_decorate_pic,
                     'timer': add_timer,
-                    'ble': add_ble
+                    'ble': add_ble,
+                    'camera': add_camera
                 }
-                toolkits[un.attr('user-type')](un.attr('user-title'), un.attr('user-topic'), un.attr('user-content'), un.attr('style'))
+                toolkits[un.attr('user-type')](un.attr('user-title'), un.attr('user-topic'), un.attr('user-content'), un.attr('style'), titleHidden)
             }
             var topicOuterDiv = $("<div style='width:100%;display:flex;align-items:center;'></div>")
             var topicDiv = $("<div style='z-index:1000;margin:0;display:flex;flex-direction:row;align-items:center;justify-content:center;margin-bottom:20px;width:320px;background-color:white;border-radius:0 0 40px 0;padding-left:10px;padding-right:10px;padding-top:5px;padding-bottom:10px;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;flex-wrap:wrap'></div>")
@@ -1685,6 +1704,12 @@ function add_widget() {
     widget_list.append(output_dashboard_add)
     var input_weather_add = $("<div class='widget_div'><div><img src='icons/input_weather.svg'><span>" + JSLang[lang].weather + "</span></div><a class='btn btn-" + (OFFLINE_MODE ? 'secondary' : 'success') + " btn-block'><i class='fa fa-" + (OFFLINE_MODE ? 'lock' : 'plus') + "'></i></a></div>")
     widget_list.append(input_weather_add)
+    var input_camera_add = $("<div class='widget_div'><div><img src='icons/camera.svg'><span>" + JSLang[lang].camera + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
+    widget_list.append(input_camera_add)
+    var input_mic_add = $("<div class='widget_div'><div><img src='icons/mic.svg'><span>" + JSLang[lang].mic + "</span></div><a class='btn btn-secondary btn-block'><i class='fa fa-plus'></i></a></div>")
+    widget_list.append(input_mic_add)
+    var input_tinydb_add = $("<div class='widget_div'><div><img src='icons/database.svg'><span>" + JSLang[lang].tinydb + "</span></div><a class='btn btn-secondary btn-block'><i class='fa fa-plus'></i></a></div>")
+    widget_list.append(input_tinydb_add)
     widget_list.append($("<h5 style='width:100%;text-align:center;margin-bottom:5px;margin-top:10px;color:#4e73df;font-size:1.3rem;font-weight:bold'>" + JSLang[lang].text + "</h5>"))
     var input_keyboard_add = $("<div class='widget_div'><div><img src='icons/input_keyboard.svg'><span>" + JSLang[lang].keyboard + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
     widget_list.append(input_keyboard_add)
@@ -1763,7 +1788,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11 && getByteLen(topic_input_2.val()) > 0 && getByteLen(topic_input_2.val()) < 11)
                     if (true) {
@@ -1793,6 +1818,71 @@ function add_widget() {
         modifyDia.showModal()
     })
 
+    input_camera_add.children("a").click(function() {
+        d.close().remove()
+        var editForm = $('<div class="nnt"/>')
+        editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/camera.svg" style="width:45px;"></div>'))
+        editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
+        var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+        var title_input = $("<input class='form-control form-control-user'  style='text-align:center' autofocus='autofocus'/>")
+        title_input_div.append(title_input)
+        editForm.append(title_input_div)
+        editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
+        var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+        var topic_input = $("<input class='form-control form-control-user'  style='text-align:center'/>")
+        topic_input_div.append(topic_input)
+        topic_input.val("camera")
+        editForm.append(topic_input_div)
+        // resolution selection
+        editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].resolution + '</h5>'))
+        var resolution_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+        var resolution_input = $("<select class='form-control form-control-user' style='text-align:center;cursor:pointer'/>")
+        resolution_input_div.append(resolution_input)
+        resolution_input.append($("<option value='160x120'>160x120</option>"))
+        resolution_input.append($("<option value='320x240'>320x240</option>"))
+        editForm.append(resolution_input_div)
+        // fps selection
+        editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].fps + '</h5>'))
+        var fps_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+        var fps_input = $("<select class='form-control form-control-user' style='text-align:center;cursor:pointer'/>")
+        fps_input_div.append(fps_input)
+        fps_input.append($("<option value='1'>1</option>"))
+        fps_input.append($("<option value='2'>2</option>"))
+        editForm.append(fps_input_div)
+        var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
+        var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
+        bottomDiv.append(confirmEdit)
+        confirmEdit.click(function() {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
+                var re = /^[a-z0-9]+$/i;
+                if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
+                    if (true) {
+                        if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
+                            add_camera(title_input.val(), topic_input.val(), resolution_input.val() + "," + fps_input.val())
+                            modifyDia.close().remove()
+                        } else
+                            showtext(JSLang[lang].sameUnit)
+                    } else
+                        showtext("")
+                else
+                    showtext(JSLang[lang].topicLenIllegal)
+            } else
+                showtext(JSLang[lang].nameLenIllegal)
+        })
+        var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
+        cancelEdit.click(function() {
+            modifyDia.close().remove()
+            add_widget()
+        })
+        bottomDiv.append(cancelEdit)
+        editForm.append(bottomDiv)
+        var modifyDia = dialog({
+            content: editForm[0],
+            cancel: false
+        })
+        modifyDia.showModal()
+    })
+
     output_pixel_add.children("a").click(function() {
         d.close().remove()
         var editForm = $('<div class="nnt"/>')
@@ -1824,7 +1914,7 @@ function add_widget() {
         xpixel_input.val(30)
         ypixel_input.val(20)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (xpixel_input.val() > 0 && xpixel_input.val() < 101 && ypixel_input.val() > 0 && ypixel_input.val() < 101) {
@@ -1891,7 +1981,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -1958,7 +2048,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2007,7 +2097,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2074,7 +2164,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2123,7 +2213,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2184,7 +2274,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(Rtopic_input.val()) > 0 && getByteLen(Rtopic_input.val()) < 11 && getByteLen(Gtopic_input.val()) > 0 && getByteLen(Gtopic_input.val()) < 11 && getByteLen(Btopic_input.val()) > 0 && getByteLen(Btopic_input.val()) < 11)
                     if (re.test(Rtopic_input.val()) && re.test(Gtopic_input.val()) && re.test(Btopic_input.val())) {
@@ -2301,7 +2391,7 @@ function add_widget() {
                 if (placecode == "unselected")
                     showtext(JSLang[lang].locationSet)
                 else {
-                    if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+                    if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                         var re = /^[a-z0-9]+$/i;
                         if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                             if (true) {
@@ -2351,7 +2441,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2417,7 +2507,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (getByteLen(message_input.val()) > 0) {
@@ -2523,7 +2613,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (getByteLen(condition1_input2.val()) > 0 && (condition2_input1.val() == "--" || getByteLen(condition2_input2.val()) > 0)) {
@@ -2584,7 +2674,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 add_magic(title_input.val(), undefined, color_select.val())
                 modifyDia.close().remove()
             }
@@ -2624,7 +2714,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2679,7 +2769,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2743,7 +2833,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2811,7 +2901,7 @@ function add_widget() {
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
             if (option_input.val() != "") {
-                if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+                if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                     var re = /^[a-z0-9]+$/i;
                     if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                         if (true) {
@@ -2878,7 +2968,7 @@ function add_widget() {
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2932,7 +3022,7 @@ function add_widget() {
             var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
             bottomDiv.append(confirmEdit)
             confirmEdit.click(function() {
-                if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+                if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                     var re = /^[a-z0-9]+$/i;
                     if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                         if (true) {
@@ -3001,11 +3091,17 @@ function add_widget() {
         var text_input = $("<textarea class='form-control form-control-user'  style='text-align:center;width:250px' autofocus='autofocus'/>")
         text_input_div.append(text_input)
         editForm.append(text_input_div)
+        editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
+        var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+        var topic_input = $("<input class='form-control form-control-user'  style='text-align:center'/>")
+        topic_input.val("pic")
+        topic_input_div.append(topic_input)
+        editForm.append(topic_input_div)
         var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
         var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
         bottomDiv.append(confirmEdit)
         confirmEdit.click(function() {
-            add_decorate_pic(undefined, undefined, text_input.val())
+            add_decorate_pic(undefined, topic_input.val(), text_input.val())
             modifyDia.close().remove()
         })
         var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
@@ -3171,7 +3267,7 @@ function listen_project(projectName) {
         if (code == 1) {
             window.location.href = window.location.href
         } else if (code == -1) {
-            showtext(JSLang[lang].codeException + ": " + JSON.parse(res)["exception"])
+            showtext(JSLang[lang].codeException + ": " + JSON.stringify(JSON.parse(res)["exception"]))
         } else if (code == -2)
             showtext(JSLang[lang].prj404)
         else if (code == -3)
@@ -3393,6 +3489,22 @@ function publish(topic, message, omit) {
     }
 }
 
+function propublish(project, topic, message){
+    var newPublishTime = new Date()
+    if (newPublishTime - lastPublishTime[0] >= minPublishInterval) {
+        if (!isMixly)
+            client.publish(globalUserName + '/' + project + '/' + topic, message)
+        else
+            client.publish('MixIO' + '/' + globalUserName.slice(1) + '/' + project + '/' + topic, message)
+        lastPublishTime.shift()
+        lastPublishTime.push(new Date())
+    } else {
+        showtext(JSLang[lang].speedLimit)
+        MixIO.log(JSLang[lang].speedLimit)
+        stop_project()
+    }
+}
+
 var exit = function() {
     activeExit = true
     save_layout(true)
diff --git a/js/widgets.js b/js/widgets.js
index 9640703..c7e6491 100644
--- a/js/widgets.js
+++ b/js/widgets.js
@@ -4,6 +4,7 @@
  * @Version 2.8.30
  */
 
+tbd = undefined;
 
 function add_block(width, height, contents, attrs) {
     var itemdiv = $("<div/>")
@@ -116,10 +117,11 @@ function add_block(width, height, contents, attrs) {
     return itemdiv
 }
 
-function add_pixel(user_title, user_topic, user_content, user_style) {
+function add_pixel(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -137,7 +139,7 @@ function add_pixel(user_title, user_topic, user_content, user_style) {
         pixelDiv.append(row)
     }
     contents.push(pixelDiv)
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -153,9 +155,9 @@ function add_pixel(user_title, user_topic, user_content, user_style) {
         ['user-type', 'pixel'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
-    
     var itemdiv = add_block(3, 3, contents, attrs)
     var stdwidth = xpixel*20 + 20 + "px"
     var stdheight = ypixel*20 + 60 + "px"
@@ -207,7 +209,7 @@ function add_pixel(user_title, user_topic, user_content, user_style) {
             }
     })
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (xpixel_input.val() > 0 && xpixel_input.val() < 101 && ypixel_input.val() > 0 && ypixel_input.val() < 101) {
@@ -255,6 +257,8 @@ function add_pixel(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -273,18 +277,37 @@ function add_pixel(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+            {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             xpixel_input.val(xpixel)
             ypixel_input.val(ypixel)
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -297,10 +320,11 @@ function add_pixel(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_button(user_title, user_topic, user_content, user_style) {
+function add_button(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -400,7 +424,7 @@ function add_button(user_title, user_topic, user_content, user_style) {
                 itemdiv.trigger(MixIO.eventTags.BUTTON_CHANGED, [Uint8ArrayToString(message1)])
             }
     })
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -421,7 +445,8 @@ function add_button(user_title, user_topic, user_content, user_style) {
         ['user-type', 'input_button'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(1, 1, contents, attrs)
     itemdiv.bind(MixIO.actionTags.BUTTON_SWITCH, function(event, status) {
@@ -465,7 +490,7 @@ function add_button(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -505,6 +530,8 @@ function add_button(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -523,10 +550,22 @@ function add_button(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
                 bubble.append(deleteButton)
             }
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
@@ -534,7 +573,14 @@ function add_button(user_title, user_topic, user_content, user_style) {
     if (user_style != undefined)
         itemdiv.attr('style', user_style)
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -545,10 +591,11 @@ function add_button(user_title, user_topic, user_content, user_style) {
     })
 }
 
-function add_slider(user_title, user_topic, user_content, user_style) {
+function add_slider(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -605,7 +652,7 @@ function add_slider(user_title, user_topic, user_content, user_style) {
     sliderDiv.append(slider)
     sliderDiv.append(mark)
     contents.push(sliderDiv)
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -621,7 +668,8 @@ function add_slider(user_title, user_topic, user_content, user_style) {
         ['user-type', 'input_slider'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(3, 1, contents, attrs)
     client.on('message', function(topic1, message1) {
@@ -661,7 +709,7 @@ function add_slider(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -716,6 +764,8 @@ function add_slider(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -734,19 +784,38 @@ function add_slider(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             minInput.val(slider.attr('min'))
             maxInput.val(slider.attr('max'))
             paceInput.val(slider.attr('step'))
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -759,10 +828,11 @@ function add_slider(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_controller(user_title, user_topic, user_content, user_style) {
+function add_controller(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -776,7 +846,8 @@ function add_controller(user_title, user_topic, user_content, user_style) {
         ['user-type', 'input_controller'],
         ['user-title', user_title],
         ['user-content', "0,0"],
-        ['user-topic', user_topic]
+        ['user-topic', user_topic],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(2, 2, contents, attrs)
     var joy = new JoyStick(controllerID)
@@ -819,7 +890,7 @@ function add_controller(user_title, user_topic, user_content, user_style) {
         title.parent().parent().attr('user-content', "0,0")
         publish(topic.text(), "0,0")
     }, false);
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -847,7 +918,7 @@ function add_controller(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -878,6 +949,8 @@ function add_controller(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -896,16 +969,35 @@ function add_controller(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -918,10 +1010,11 @@ function add_controller(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_keyboard(user_title, user_topic, user_content, user_style) {
+function add_keyboard(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -931,7 +1024,8 @@ function add_keyboard(user_title, user_topic, user_content, user_style) {
         ['user-type', 'input_keyboard'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var keyDiv = $("<div style='width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center'/>")
     var messDiv = $("<input class='form-control' style='width:70%;min-width:0px'/>")
@@ -1005,7 +1099,7 @@ function add_keyboard(user_title, user_topic, user_content, user_style) {
             sendIcon.children().addClass("fa-paper-plane")
         }, 300)
     })
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -1033,7 +1127,7 @@ function add_keyboard(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -1065,6 +1159,8 @@ function add_keyboard(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -1083,16 +1179,35 @@ function add_keyboard(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -1106,10 +1221,11 @@ function add_keyboard(user_title, user_topic, user_content, user_style) {
 
 }
 
-function add_bulb(user_title, user_topic, user_content, user_style) {
+function add_bulb(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -1129,7 +1245,8 @@ function add_bulb(user_title, user_topic, user_content, user_style) {
         ['user-type', 'output_bulb'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(1, 1, contents, attrs)
     itemdiv.bind(MixIO.actionTags.BULB_CHANGE, function(event, status) {
@@ -1154,7 +1271,7 @@ function add_bulb(user_title, user_topic, user_content, user_style) {
                 itemdiv.trigger(MixIO.eventTags.BULB_CHANGED, [Uint8ArrayToString(message1)])
             }
     })
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -1182,7 +1299,7 @@ function add_bulb(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -1214,6 +1331,8 @@ function add_bulb(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -1232,16 +1351,35 @@ function add_bulb(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -1254,12 +1392,13 @@ function add_bulb(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_ble(user_title, user_topic, user_content, user_style) {
+function add_ble(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     if(user_style != undefined)
         user_content = JSLang[lang].select
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -1269,7 +1408,8 @@ function add_ble(user_title, user_topic, user_content, user_style) {
         ['user-type', 'ble'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var bletarget = user_content
     var bleconnect = function(){
@@ -1400,7 +1540,7 @@ function add_ble(user_title, user_topic, user_content, user_style) {
     contents.push(icon_div)
     var itemdiv = add_block(1, 1, contents, attrs)
     bleconnect()
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -1475,7 +1615,7 @@ function add_ble(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11 && getByteLen(topic_input_2.val()) > 0 && getByteLen(topic_input_2.val()) < 11)
                 if (true) {
@@ -1508,6 +1648,8 @@ function add_ble(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -1526,18 +1668,37 @@ function add_ble(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text().split(",")[0])
             topic_input_2.val(topic.text().split(",")[1])
             ble_target.val(bletarget)
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -1550,7 +1711,7 @@ function add_ble(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_magic(user_title, user_topic, user_content, user_style) {
+function add_magic(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var bgColor = user_content
@@ -1562,12 +1723,13 @@ function add_magic(user_title, user_topic, user_content, user_style) {
         ['user-type', 'magic'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(5, 5, contents, attrs)
     itemdiv.css('background-color', 'rgba(0,0,0,0)')
     itemdiv.css('box-shadow', user_content + ' 10px 10px 20px')
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -1601,7 +1763,7 @@ function add_magic(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (true)
                 if (true) {
@@ -1634,6 +1796,8 @@ function add_magic(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -1651,16 +1815,35 @@ function add_magic(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             color_select.val(bgColor)
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -1673,10 +1856,11 @@ function add_magic(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_timer(user_title, user_topic, user_content, user_style) {
+function add_timer(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic.split("$$$")[0] + "</span>")
@@ -1688,7 +1872,8 @@ function add_timer(user_title, user_topic, user_content, user_style) {
         ['user-type', 'timer'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var triggerTopic = user_topic.split("$$$")[0]
     var triggerMessage = user_topic.split("$$$")[1]
@@ -1710,7 +1895,7 @@ function add_timer(user_title, user_topic, user_content, user_style) {
     }
     MixIO.triggersToPreCode()
     MixIO.editor.setValue(MixIO.preCode + Blockly.JavaScript.workspaceToCode(workspace))
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -1756,7 +1941,7 @@ function add_timer(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (getByteLen(message_input.val()) > 0) {
@@ -1804,6 +1989,8 @@ function add_timer(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -1822,19 +2009,38 @@ function add_timer(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             message_input.val(triggerMessage)
             trigger_interval.val(triggerInterval)
             trigger_times.val(triggerTimes)
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -1847,10 +2053,11 @@ function add_timer(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_trigger(user_title, user_topic, user_content, user_style) {
+function add_trigger(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic.split("$$$")[0] + "</span>")
@@ -1862,7 +2069,8 @@ function add_trigger(user_title, user_topic, user_content, user_style) {
         ['user-type', 'trigger'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var condition1_1 = user_content.split("$$$")[0]
     var condition1_2 = user_content.split("$$$")[1]
@@ -1938,7 +2146,7 @@ function add_trigger(user_title, user_topic, user_content, user_style) {
     }
     MixIO.triggersToPreCode()
     MixIO.editor.setValue(MixIO.preCode + Blockly.JavaScript.workspaceToCode(workspace))
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -2020,7 +2228,7 @@ function add_trigger(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (getByteLen(condition1_input2.val()) > 0 && (condition2_input1.val() == "--" || getByteLen(condition2_input2.val()) > 0)) {
@@ -2071,6 +2279,8 @@ function add_trigger(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -2089,6 +2299,13 @@ function add_trigger(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             condition1_input1.val(condition1_1)
@@ -2103,13 +2320,25 @@ function add_trigger(user_title, user_topic, user_content, user_style) {
             else
                 condition2_input2.removeAttr("disabled")
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -2122,10 +2351,11 @@ function add_trigger(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_rgb(user_title, user_topic, user_content, user_style) {
+function add_rgb(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div style='margin-top:5px;margin-bottom:5px;font-size:0.75rem'/>")
     var Rtopic = $("<span class='index-topic' style='margin:0;color:#858796;;margin-right:10px'>" + user_topic.split('/')[0] + "</span>")
@@ -2198,7 +2428,8 @@ function add_rgb(user_title, user_topic, user_content, user_style) {
         ['user-type', 'input_rgb'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(3, 3, contents, attrs)
     itemdiv.bind(MixIO.actionTags.RGB_PICKER_SEND, function(event, r, g, b) {
@@ -2251,7 +2482,7 @@ function add_rgb(user_title, user_topic, user_content, user_style) {
         BInput.val(HEX2RGB(color)[2])
     })
     $.farbtastic(far).setColor(RGB2Hex(parseInt(RInput.val()), parseInt(GInput.val()), parseInt(BInput.val())))
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -2289,7 +2520,7 @@ function add_rgb(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(Rtopic_input.val()) > 0 && getByteLen(Rtopic_input.val()) < 11 && getByteLen(Gtopic_input.val()) > 0 && getByteLen(Gtopic_input.val()) < 11 && getByteLen(Btopic_input.val()) > 0 && getByteLen(Btopic_input.val()) < 11)
                 if (re.test(Rtopic_input.val()) && re.test(Gtopic_input.val()) && re.test(Btopic_input.val())) {
@@ -2321,6 +2552,8 @@ function add_rgb(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -2339,18 +2572,37 @@ function add_rgb(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             Rtopic_input.val(Rtopic.text())
             Gtopic_input.val(Gtopic.text())
             Btopic_input.val(Btopic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -2363,11 +2615,12 @@ function add_rgb(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_bar(user_title, user_topic, user_content, user_style) {
+function add_bar(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var titleDiv = $("<div style='display:flex;flex-direction:row;justify-content:center;align-items:center;margin-top:10px'/>")
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     titleDiv.append(title)
     contents.push(titleDiv)
     var topicDiv = $("<div class='topicDiv'/>")
@@ -2487,7 +2740,7 @@ function add_bar(user_title, user_topic, user_content, user_style) {
             }
     })
 
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().parent().remove();
         isAlive = false
@@ -2504,7 +2757,8 @@ function add_bar(user_title, user_topic, user_content, user_style) {
         ['user-type', 'output_bar'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(3, 3, contents, attrs)
     itemdiv.bind(MixIO.actionTags.BAR_CHART_CHANGE, function(event, message) {
@@ -2551,7 +2805,7 @@ function add_bar(user_title, user_topic, user_content, user_style) {
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
         if (option_input.val() != "") {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -2642,6 +2896,8 @@ function add_bar(user_title, user_topic, user_content, user_style) {
     editButton.click(edit_on_click)
     deleteButton.click(delete_on_click)
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var bubble = $('<div style="text-align:center"/>')
             bubble.append(topicDiv)
@@ -2659,17 +2915,36 @@ function add_bar(user_title, user_topic, user_content, user_style) {
                 bubble.append(exportButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             option_input.val(chartTarget.getOption().xAxis[0].data.join(','))
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -2717,10 +2992,11 @@ function add_bar(user_title, user_topic, user_content, user_style) {
     })
 }
 
-function add_dashboard(user_title, user_topic, user_content, user_style) {
+function add_dashboard(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -2736,7 +3012,8 @@ function add_dashboard(user_title, user_topic, user_content, user_style) {
         ['user-type', 'output_dashboard'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(2, 2, contents, attrs)
     var gauge = new RadialGauge({ renderTo: dashID, highlights: [] })
@@ -2754,7 +3031,7 @@ function add_dashboard(user_title, user_topic, user_content, user_style) {
     itemdiv.bind(MixIO.actionTags.DASHBOARD_CHANGE, function(event, value) {
         MixIO.publish(topic.text(), value)
     })
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -2800,7 +3077,7 @@ function add_dashboard(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -2842,6 +3119,8 @@ function add_dashboard(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -2860,16 +3139,35 @@ function add_dashboard(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -2882,10 +3180,11 @@ function add_dashboard(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_map(user_title, user_topic, user_content, user_style) {
+function add_map(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -2911,7 +3210,8 @@ function add_map(user_title, user_topic, user_content, user_style) {
         ['user-type', 'output_map'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(3, 3, contents, attrs)
     var maxLeft = mapDiv[0].clientWidth
@@ -3070,7 +3370,7 @@ function add_map(user_title, user_topic, user_content, user_style) {
         map.addOverlay(bubble)
     }
     setContent()
-    var tbd = null;
+
     var delete_on_click = function() {
         $("#trashbin").append(mapDiv)
         title.parent().parent().remove();
@@ -3104,7 +3404,7 @@ function add_map(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -3136,6 +3436,8 @@ function add_map(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var clearButton = $('<a class="btn btn-warning btn-circle bbbt"><i class="fa fa-eraser"></i></a>')
@@ -3157,16 +3459,35 @@ function add_map(user_title, user_topic, user_content, user_style) {
             bubble.append(clearButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -3211,10 +3532,11 @@ function create_a_map_bubble(messageBody, time, point) {
     return label
 }
 
-function add_text(user_title, user_topic, user_content, user_style) {
+function add_text(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -3228,7 +3550,8 @@ function add_text(user_title, user_topic, user_content, user_style) {
         ['user-type', 'output_text'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(2, 2, contents, attrs)
     itemdiv.bind(MixIO.actionTags.TEXT_SCREEN_CHANGE, function(event, message) {
@@ -3244,7 +3567,7 @@ function add_text(user_title, user_topic, user_content, user_style) {
                 itemdiv.trigger(MixIO.eventTags.TEXT_SCREEN_CHANGED, [String(message1)])
             }
     })
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -3272,7 +3595,7 @@ function add_text(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -3304,6 +3627,8 @@ function add_text(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -3322,16 +3647,35 @@ function add_text(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -3344,7 +3688,7 @@ function add_text(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_table(user_title, user_topic, user_content, user_style) {
+function add_table(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     client.on('message', function(topic1, message1) {
         if (isRunning)
@@ -3374,6 +3718,7 @@ function add_table(user_title, user_topic, user_content, user_style) {
     })
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -3399,7 +3744,8 @@ function add_table(user_title, user_topic, user_content, user_style) {
         ['user-type', 'table'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(3, 3, contents, attrs)
     itemdiv.bind(MixIO.actionTags.DATA_TABLE_CHANGE, function(event, message) {
@@ -3409,7 +3755,7 @@ function add_table(user_title, user_topic, user_content, user_style) {
         clear_on_click()
     })
     itemdiv.addClass("moveDiv")
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -3449,7 +3795,7 @@ function add_table(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -3494,6 +3840,8 @@ function add_table(user_title, user_topic, user_content, user_style) {
     })
     var exportButton = $('<a class="btn btn-info btn-circle bbbt" download="data.csv"><i class="fa fa-download"></i></a>')
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var clearButton = $('<a class="btn btn-warning btn-circle bbbt"><i class="fa fa-eraser"></i></a>')
@@ -3517,10 +3865,22 @@ function add_table(user_title, user_topic, user_content, user_style) {
             bubble.append(clearButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
@@ -3550,7 +3910,14 @@ function add_table(user_title, user_topic, user_content, user_style) {
         exportButton.attr("href", "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(colNameStr + colValStr))
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -3652,11 +4019,12 @@ function add_table(user_title, user_topic, user_content, user_style) {
 
 last_weather_synced = new Date()
 
-function add_weather(user_title, user_topic, user_content, user_style) {
+function add_weather(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
 
     var contents = []
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     contents.push(title)
     var topicDiv = $("<div class='topicDiv'/>")
     var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
@@ -3748,7 +4116,8 @@ function add_weather(user_title, user_topic, user_content, user_style) {
         ['user-type', 'input_weather'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(2, 2, contents, attrs)
     itemdiv.bind(MixIO.actionTags.WEATHER_SYNC, function() {
@@ -3785,7 +4154,7 @@ function add_weather(user_title, user_topic, user_content, user_style) {
             }, sendInterval * 60000)
         }
     }
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().remove();
         isAlive = false
@@ -3895,7 +4264,7 @@ function add_weather(user_title, user_topic, user_content, user_style) {
         if (placecode == "unselected")
             showtext(JSLang[lang].locationSet)
         else {
-            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+            if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
                 var re = /^[a-z0-9]+$/i;
                 if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                     if (true) {
@@ -3930,6 +4299,8 @@ function add_weather(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -3948,16 +4319,35 @@ function add_weather(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -3970,12 +4360,13 @@ function add_weather(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
-function add_chart(user_title, user_topic, user_content, user_style) {
+function add_chart(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var isTable = false
     var contents = []
     var titleDiv = $("<div style='display:flex;flex-direction:row;justify-content:center;align-items:center;margin-top:10px'/>")
     var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
     titleDiv.append(title)
     contents.push(titleDiv)
     var topicDiv = $("<div class='topicDiv'/>")
@@ -4204,7 +4595,7 @@ function add_chart(user_title, user_topic, user_content, user_style) {
             }
     })
 
-    var tbd = null;
+
     var delete_on_click = function() {
         title.parent().parent().parent().remove();
         isAlive = false
@@ -4221,7 +4612,8 @@ function add_chart(user_title, user_topic, user_content, user_style) {
         ['user-type', 'output_chart'],
         ['user-title', user_title],
         ['user-topic', user_topic],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(3, 3, contents, attrs)
     itemdiv.addClass("moveDiv")
@@ -4262,7 +4654,7 @@ function add_chart(user_title, user_topic, user_content, user_style) {
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
     confirmEdit.click(function() {
-        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 11) {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
             var re = /^[a-z0-9]+$/i;
             if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
                 if (true) {
@@ -4311,6 +4703,8 @@ function add_chart(user_title, user_topic, user_content, user_style) {
     convertButton.click(convert_on_click)
     deleteButton.click(delete_on_click)
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
             var bubble = $('<div style="text-align:center"/>')
             bubble.append(topicDiv)
@@ -4329,16 +4723,35 @@ function add_chart(user_title, user_topic, user_content, user_style) {
                 bubble.append(exportButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             title_input.val(title.text())
             topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -4389,7 +4802,7 @@ function add_chart(user_title, user_topic, user_content, user_style) {
     })
 }
 
-function add_decorate_text(user_title, user_topic, user_content, user_style) {
+function add_decorate_text(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     var ctt = $("<h4 class='userTitle' style='margin:0'>" + user_content.replaceAll('\n', '<br>') + "</h4>")
@@ -4397,10 +4810,11 @@ function add_decorate_text(user_title, user_topic, user_content, user_style) {
     attrs = [
         ['user-type', 'decorate_text'],
         ['user-title', randomString()],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
     var itemdiv = add_block(2, 1, contents, attrs)
-    var tbd = null;
+
     var delete_on_click = function() {
         ctt.parent().parent().remove();
         isAlive = false
@@ -4438,6 +4852,8 @@ function add_decorate_text(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5) && !isRunning) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
@@ -4455,15 +4871,34 @@ function add_decorate_text(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+            {
+                // styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             text_input.val(ctt.html().replaceAll('<br>', '\n'))
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -4491,7 +4926,7 @@ function add_decorate_text(user_title, user_topic, user_content, user_style) {
     })
 }
 
-function add_decorate_pic(user_title, user_topic, user_content, user_style) {
+function add_decorate_pic(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var contents = []
     // check user_content type: image or video
@@ -4505,11 +4940,17 @@ function add_decorate_pic(user_title, user_topic, user_content, user_style) {
     contents.push(ctt)
     attrs = [
         ['user-type', 'decorate_pic'],
+        ['user-topic', user_topic],
         ['user-title', randomString()],
-        ['user-content', user_content]
+        ['user-content', user_content],
+        ['title-hidden', title_style]
     ]
+    var topicDiv = $("<div class='topicDiv'/>")
+    var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
+    topicDiv.append($("<i class='fa fa-podcast' style='color:#858796;margin-right:3px'></i>"))
+    topicDiv.append(topic)
     var itemdiv = add_block(2, 1, contents, attrs)
-    var tbd = null;
+
     var delete_on_click = function() {
         ctt.parent().parent().remove();
         isAlive = false
@@ -4528,6 +4969,11 @@ function add_decorate_pic(user_title, user_topic, user_content, user_style) {
     var text_input = $("<textarea class='form-control form-control-user'  style='text-align:center;width:250px'/>")
     text_input_div.append(text_input)
     editForm.append(text_input_div)
+    editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
+    var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center;margin-bottom:5px"/>')
+    var topic_input = $("<input class='form-control form-control-user'  style='text-align:center;width:250px;min-width:250px'/>")
+    topic_input_div.append(topic_input)
+    editForm.append(topic_input_div)
     var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
     var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
     bottomDiv.append(confirmEdit)
@@ -4546,6 +4992,25 @@ function add_decorate_pic(user_title, user_topic, user_content, user_style) {
         console.log(text_input.val())
         console.log(itemdiv)
         itemdiv.attr("user-content", text_input.val())
+        itemdiv.attr("user-topic", topic_input.val())
+        topic.text(topic_input.val())
+    })
+    client.on('message', function(topic1, message1) {
+        if (isAlive && isRunning)
+            if (topic1.split("/")[(isMixly ? 3 : 2)] == topic.text()) {
+                var msg = message1.toString()
+                if (msg.endsWith(".mp4") || msg.endsWith(".webm") || msg.endsWith(".ogg")){
+                    var newCTT = $("<video style='height:100%;width:100%' src='" + msg + "' controls loop></video>")
+                    ctt.parent().html(newCTT)
+                    ctt = newCTT
+                }else
+                {
+                    var newCTT = $("<img style='height:100%;width:100%' src='" + msg + "'></img>")
+                    ctt.parent().html(newCTT)
+                    ctt = newCTT
+                }
+                itemdiv.attr("user-content", msg)
+            }
     })
     var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
     cancelEdit.click(function() {
@@ -4558,10 +5023,13 @@ function add_decorate_pic(user_title, user_topic, user_content, user_style) {
         cancel: false
     })
     var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
         if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5) && !isRunning) {
             var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
             var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
             var bubble = $('<div style="text-align:center"/>')
+            bubble.append(topicDiv)
             var d = dialog({
                 align: 'top',
                 content: bubble[0],
@@ -4575,15 +5043,35 @@ function add_decorate_pic(user_title, user_topic, user_content, user_style) {
                 bubble.append(editButton)
             if (!isRunning)
                 bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                //styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
             text_input.val(ctt.attr("src"))
+            topic_input.val(topic.text())
             if (!d.open)
+            {
                 d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
             else
                 d.close()
         }
     }
     if (window.screen.width > 800)
+    {
         itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
     else
         itemdiv[0].addEventListener('touchend', function(event) {
             event.preventDefault()
@@ -4610,6 +5098,222 @@ function add_decorate_pic(user_title, user_topic, user_content, user_style) {
     })
 }
 
+function add_camera(user_title, user_topic, user_content, user_style, title_style) {
+    var isAlive = true
+    var contents = []
+    var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+    title.attr("hidden", title_style)
+    contents.push(title)
+    var topicDiv = $("<div class='topicDiv'/>")
+    var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
+    topicDiv.append($("<i class='fa fa-podcast' style='color:#858796;margin-right:3px'></i>"))
+    topicDiv.append(topic)
+    var cameraDiv = $("<div class='cameraDiv'/>")
+    contents.push(cameraDiv)
+    // add a real-time web camera
+    var video = $("<video autoplay style='width:100%;height:100%;'/>")
+    cameraDiv.append(video)
+    navigator.mediaDevices.getUserMedia({
+        video: {
+            width: {
+                ideal: 1280
+            },
+            height: {
+                ideal: 720
+            },
+            frameRate: {
+                ideal: 30,
+                min: 10
+            }
+        },
+        audio: false
+    }).then(function(stream) {
+        video[0].srcObject = stream
+        // send MQTT message: base64 encoded image, topic: user_topic, fps: fps, resolution: resolution
+        var canvas = $("<canvas />")
+        var context = canvas[0].getContext('2d')
+        var timer1 = setInterval(function() {
+            if(isRunning && isAlive && fps == 1)
+            {   
+                // set canvas size
+                canvas[0].width = resolutionX
+                canvas[0].height = resolutionY
+                context.drawImage(video[0], 0, 0, resolutionX, resolutionY)
+                var dataURL = canvas[0].toDataURL('image/jpeg', 0.5)
+                publish(user_topic, dataURL)
+            }
+        }, 1000)
+        var timer2 = setInterval(function() {
+            if(isRunning && isAlive && fps == 2)
+            {
+                canvas[0].width = resolutionX
+                canvas[0].height = resolutionY
+                context.drawImage(video[0], 0, 0, resolutionX, resolutionY)
+                var dataURL = canvas[0].toDataURL('image/jpeg', 0.5)
+                publish(user_topic, dataURL)
+            }
+        }, 500)
+    }).catch(function(err) {
+        showtext("Error: " + err.name + " " + err.message)
+    })
+
+
+    var resolution = user_content.split(",")[0]
+    var fps = parseInt(user_content.split(",")[1])
+    var resolutionX = parseInt(resolution.split("x")[0])
+    var resolutionY = parseInt(resolution.split("x")[1])
+    attrs = [
+        ['user-type', 'camera'],
+        ['user-title', user_title],
+        ['user-topic', user_topic],
+        ['user-content', user_content],
+        ['title-hidden', title_style]
+    ]
+    var itemdiv = add_block(4, 3, contents, attrs)
+
+    var delete_on_click = function() {
+        title.parent().parent().remove();
+        isAlive = false
+        if (tbd)
+            tbd.remove()
+    }
+    var edit_on_click = function() {
+        modifyDia.showModal()
+        if (tbd)
+            tbd.remove()
+    }
+    var editForm = $('<div class="nnt"/>')
+    editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/output_text.svg" style="width:45px;"></div>'))
+    editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
+    var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+    var title_input = $("<input class='form-control form-control-user'  style='text-align:center'/>")
+    title_input_div.append(title_input)
+    editForm.append(title_input_div)
+    editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
+    var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+    var topic_input = $("<input class='form-control form-control-user'  style='text-align:center'/>")
+    topic_input_div.append(topic_input)
+    editForm.append(topic_input_div)
+    editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].resolution + '</h5>'))
+    var resolution_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+    var resolution_input = $("<select class='form-control form-control-user' style='text-align:center;cursor:pointer'/>")
+    resolution_input_div.append(resolution_input)
+    resolution_input.append($("<option value='160x120'>160x120</option>"))
+    resolution_input.append($("<option value='320x240'>320x240</option>"))
+    editForm.append(resolution_input_div)
+    // fps selection
+    editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].fps + '</h5>'))
+    var fps_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+    var fps_input = $("<select class='form-control form-control-user' style='text-align:center;cursor:pointer'/>")
+    fps_input_div.append(fps_input)
+    fps_input.append($("<option value='1'>1</option>"))
+    fps_input.append($("<option value='2'>2</option>"))
+    editForm.append(fps_input_div)
+    var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
+    var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
+    bottomDiv.append(confirmEdit)
+    confirmEdit.click(function() {
+        if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
+            var re = /^[a-z0-9]+$/i;
+            if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
+                if (true) {
+                    if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= (title_input.val() == title.text() ? 1 : 0)) {
+                        title.parent().parent().attr('user-title', title_input.val())
+                        title.parent().parent().attr('user-topic', topic_input.val())
+                        if (title.parent().parent().attr('user-content') == undefined)
+                            title.parent().parent().attr('user-content', "")
+                        title.text(title_input.val())
+                        topic.text(topic_input.val())
+                        resolution = resolution_input.val()
+                        fps = parseInt(fps_input.val())
+                        resolutionX = parseInt(resolution.split("x")[0])
+                        resolutionY = parseInt(resolution.split("x")[1])
+                        // set user-content
+                        title.parent().parent().attr('user-content', resolution + "," + fps)
+                        modifyDia.close()
+                    } else
+                        showtext(JSLang[lang].sameUnit)
+                } else
+                    showtext("")
+            else
+                showtext(JSLang[lang].topicLenIllegal)
+        } else
+            showtext(JSLang[lang].nameLenIllegal)
+    })
+    var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
+    cancelEdit.click(function() {
+        modifyDia.close()
+    })
+    bottomDiv.append(cancelEdit)
+    editForm.append(bottomDiv)
+    var modifyDia = dialog({
+        content: editForm[0],
+        cancel: false
+    })
+    var showEditBubble = function(event) {
+        if(tbd)
+            tbd.remove()
+        if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
+            var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
+            var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
+            var bubble = $('<div style="text-align:center"/>')
+            bubble.append(topicDiv)
+            var d = dialog({
+                align: 'top',
+                content: bubble[0],
+                quickClose: true,
+                autofocus: false
+            });
+            tbd = d;
+            editButton.click(edit_on_click)
+            deleteButton.click(delete_on_click)
+            if (!isRunning)
+                bubble.append(editButton)
+            if (!isRunning)
+                bubble.append(deleteButton)
+            if (!isRunning)
+                {
+                styleButton.attr("user-origin", title.text())
+                bubble.append(styleButton)
+                helpButton.attr("user-origin", attrs[0][1])
+                bubble.append(helpButton)
+            }
+            title_input.val(title.text())
+            topic_input.val(topic.text())
+            resolution_input.val(resolution)
+            fps_input.val(fps)
+            if (!d.open)
+            {
+                d.show(itemdiv[0]);
+                setTimeout(function() {
+                    $(".ui-popup-backdrop").css("pointer-events", "auto")
+                },100)
+            }
+            else
+                d.close()
+        }
+    }
+    if (window.screen.width > 800)
+    {
+        itemdiv.click(showEditBubble)
+        itemdiv.on('contextmenu', function(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            showEditBubble(event)
+        })
+    }
+    else
+        itemdiv[0].addEventListener('touchend', function(event) {
+            event.preventDefault()
+            showEditBubble(event)
+        })
+    itemdiv[0].addEventListener('touchmove', function(e) {
+        e.preventDefault()
+    })
+    if (user_style != undefined)
+        itemdiv.attr('style', user_style)
+}
+
 function init_layout() {
     grid = $("#grid")
     grid2 = $("#grid2")
@@ -4621,4 +5325,104 @@ function get_width() {
     fullWidth = window.screen.width
     if ((fullWidth - 84) / 3 < 100)
         standardWidth = (fullWidth - 84) / 3
-}
\ No newline at end of file
+}
+
+var styleButton = $('<a class="btn btn-danger btn-circle bbbt button-7colors"><i class="fa fa-paint-brush"></i></a>')
+styleButton.click(function() {
+    if(tbd)
+        tbd.remove()
+    // a dialog that is like "modifyDia" but for style
+    var itemTitle = $(this).attr("user-origin")
+    var itemdiv = $("div[user-title='" + itemTitle + "']")
+    var editForm = $('<div class="nnt" />')
+    editForm.css("width", "250px")
+    editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><i class="fa fa-paint-brush" style="color:#4e73df;font-size:45px"></i></div>'))
+    editForm.append($('<h5 style="text-align:center">组件标题</h5>'))
+    // add a switch like "modeButton" to choose the style
+    var modeButton = $("<label class='switch' style='margin-bottom:0'></label>")
+    var modeCheckbox = $("<input type='checkbox'>")
+    modeCheckbox.click(function() {
+        if (modeCheckbox.prop("checked"))
+        {
+            // find title in the itemdiv, show it
+            itemdiv.find("h4").attr("hidden", true)
+            itemdiv.attr("title-hidden", true)
+        }
+        else
+        {
+            itemdiv.find("h4").attr("hidden", false)
+            itemdiv.attr("title-hidden", false)
+        }
+    })
+    if (itemdiv.attr("title-hidden") == "true")
+        modeCheckbox.prop("checked", true)
+    else
+        modeCheckbox.prop("checked", false)
+    var modeCheckDiv = $("<div class='slider2 round'></div>")
+    modeButton.append(modeCheckbox)
+    modeButton.append(modeCheckDiv)
+    var modeDiv = $("<div style='display:flex;margin-top:10px;flex-direction:row;align-items:center;justify-content:center'/>")
+    modeDiv.append($("<span style='font-size:1rem;margin-right:10px;color:#4e73df;font-weight:bold'>" + "显示"+"</span>"))
+    modeDiv.append(modeButton)
+    modeDiv.append($("<span style='font-size:1rem;margin-left:10px;color:#e74a3b;font-weight:bold'>" + "隐藏" + "</span>"))
+    editForm.append(modeDiv)
+    // background color
+    editForm.append($('<h5 style="margin-top:15px;text-align:center">背景颜色</h5>'))
+    var colorDiv = $("<div style='display:flex;flex-direction:row;align-items:center;justify-content:center'/>")
+    var colorInput = $("<input class='form-control form-control-user'  style='text-align:center;width:250px;min-width:250px'/>")
+    colorInput.val(itemdiv.css("background-color"))
+    colorDiv.append(colorInput)
+    editForm.append(colorDiv)
+    colorInput.on('change', function() {
+        itemdiv.css("background-color", colorInput.val())
+    })
+    // title color
+    editForm.append($('<h5 style="margin-top:15px;text-align:center">标题颜色</h5>'))
+    var titleColorDiv = $("<div style='display:flex;flex-direction:row;align-items:center;justify-content:center'/>")
+    var titleColorInput = $("<input class='form-control form-control-user'  style='text-align:center;width:250px;min-width:250px'/>")
+    titleColorInput.val(itemdiv.find("h4").css("color"))
+    titleColorDiv.append(titleColorInput)
+    editForm.append(titleColorDiv)
+    titleColorInput.on('change', function() {
+        itemdiv.find("h4").css("color", titleColorInput.val())
+    })
+    var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
+    var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
+    bottomDiv.append(confirmEdit)
+    confirmEdit.click(function() {
+        modifyDia.close()
+    })
+    editForm.append(bottomDiv)
+    var modifyDia = dialog({
+        content: editForm[0],
+        cancel: false
+    })
+    modifyDia.showModal()
+})
+
+var helpButton = $('<a class="btn btn-dark btn-circle bbbt"><i class="fa fa-book"></i></a>')
+helpButton.click(function() {
+    if(tbd)
+        tbd.remove()
+    var helpurl = window.location.href.replace("projects", "documentation/") + "#" + $(this).attr("user-origin")
+    // add a floating window to show the help, it can be moved and closed
+    var helpWindow = $('<div style=""/>')
+    helpWindow.css("width", "300px")
+    helpWindow.css("height", "500px")
+    helpWindow.append($('<iframe src="' + helpurl + '" style="width:100%;height:100%;border:none"/>'))
+    // use a div to show the help, it is movable and closable
+    var helpDiv = $('<div style="z-index:1000;position:absolute;left:20px;top:80px;background-color:white;border-radius:10px;padding:20px;box-shadow: 1px 1px 20px #4e73df;overflow:auto"/>')
+    helpDiv.append(helpWindow)
+    // draw a close button on the help window
+    var closeButton = $('<a class="btn btn-sm btn-danger btn-circle" style="position:absolute;top:0;right:0"><i class="fa fa-times"></i></a>')
+    closeButton.click(function() {
+        helpDiv.remove()
+    }
+    )
+    helpWindow.append(closeButton)
+    // make it draggable
+    helpDiv.draggable(
+    )
+    $("body").append(helpDiv)
+        
+})
\ No newline at end of file