add_widgets_help_tezt

documentation/index.html

@@ -43,22 +43,22 @@
     </div>
     <div class="content-menu">
         <ul>
-            <li class="scroll-to-link active" data-target="switch">
+            <li class="scroll-to-link active" data-target="input_button">
                 <a>开关</a>
             </li>
             <li class="scroll-to-link" data-target="button">
                 <a>按键</a>
             </li>
-            <li class="scroll-to-link" data-target="slider">
+            <li class="scroll-to-link" data-target="input_slider">
                 <a>滑杆</a>
             </li>
-            <li class="scroll-to-link" data-target="joystick">
+            <li class="scroll-to-link" data-target="input_controller">
                 <a>摇杆手柄</a>
             </li>
-            <li class="scroll-to-link" data-target="rgb">
+            <li class="scroll-to-link" data-target="input_rgb">
                 <a>RGB色盘</a>
             </li>
-            <li class="scroll-to-link" data-target="bulb">
+            <li class="scroll-to-link" data-target="output_bulb">
                 <a>指示灯</a>
             </li>
             <li class="scroll-to-link" data-target="timer">
@@ -70,25 +70,34 @@
             <li class="scroll-to-link" data-target="ble">
                 <a>蓝牙转发器</a>
             </li>
-            <li class="scroll-to-link" data-target="chart">
+            <li class="scroll-to-link" data-target="output_chart">
                 <a>折线图表</a>
             </li>
-            <li class="scroll-to-link" data-target="bar">
+            <li class="scroll-to-link" data-target="output_bar">
                 <a>投票器</a>
             </li>
             <li class="scroll-to-link" data-target="table">
                 <a>数据表格</a>
             </li>
-            <li class="scroll-to-link" data-target="map">
+            <li class="scroll-to-link" data-target="output_map">
                 <a>数据地图</a> 
             </li>
-            <li class="scroll-to-link" data-target="dashboard">
+            <li class="scroll-to-link" data-target="output_dashboard">
                 <a>仪表盘</a>
             </li>
-            <li class="scroll-to-link" data-target="weather">
+            <li class="scroll-to-link" data-target="input_weather">
                 <a>实时气象仪</a>
             </li>
-            <li class="scroll-to-link" data-target="input">
+            <li class="scroll-to-link" data-target="camera">
+                <a>摄像头</a>
+            </li>
+            <li class="scroll-to-link" data-target="input_mic">
+                <a>语音识别</a>
+            </li>
+            <li class="scroll-to-link" data-target="tinydb">
+                <a>下拉选项</a>
+            </li> 
+            <li class="scroll-to-link" data-target="input_keyboard">
                 <a>文本输入</a>
             </li>
             <li class="scroll-to-link" data-target="output_text">
@@ -97,15 +106,24 @@
             <li class="scroll-to-link" data-target="pixel">
                 <a>点阵屏</a>
             </li>
-            <li class="scroll-to-link" data-target="label">
+            <li class="scroll-to-link" data-target="decorate_text">
                 <a>标签</a>、
             </li>
-            <li class="scroll-to-link" data-target="image">
+            <li class="scroll-to-link" data-target="decorate_pic">
-                <a>图片</a>
+                <a>图片 / 视频</a>
             </li>
-            <li class="scroll-to-link" data-target="video">
+            <li class="scroll-to-link" data-target="magic">
-                <a>视频</a>
+                <a>装饰框</a>
             </li> 
+            <li class="scroll-to-link" data-target="face">
+                <a>人脸识别</a>
+            </li>
+            <li class="scroll-to-link" data-target="ocr">
+                <a>蜂鸣器</a>
+            </li>
+            <li class="scroll-to-link" data-target="qr">
+                <a>二维码识别</a>
+            </li>
         </ul>
     </div>
 </div>
@@ -113,8 +131,8 @@
 
 <div class="content-page">
     <div class="content">
-        <div class="overflow-hidden content-section" id="content-switch">
+        <div class="overflow-hidden content-section" id="content-input_button">
-            <h1 id="switch">开关</h1>
+            <h1 id="input_button">开关（可切换为按键）</h1>
             <h3>组件总览</h3>
             <p>
                 以“关/开”两种状态响应用户输入，向消息主题发送0/1信号；同时接收消息主题的0/1信号，实现对应的关/开状态呈现。
@@ -131,7 +149,7 @@
             </p>
         </div>
         <div class="overflow-hidden content-section" id="content-button">
-            <h1 id="button">按键</h1>
+            <h1 id="button">按键（可切换为开关）</h1>
             <h3>组件总览</h3>
             <p>
                 以“按下/松开”模式响应用户输入，向消息主题发送0/1信号（按下=1，松开=0）。
@@ -147,8 +165,8 @@
                 <span style="color:#4e73df;">反馈模式</span> - 组件的反馈模式，可在此处将“按键”组件转换为“开关”组件。
             </p>
         </div>
-        <div class="overflow-hidden content-section" id="content-slider">
+        <div class="overflow-hidden content-section" id="content-input_slider">
-            <h1 id="slider">滑杆</h1>
+            <h1 id="input_slider">滑杆</h1>
             <h3>组件总览</h3>
             <p>
                 以“滑动”模式响应用户输入，向消息主题发送数字；同时接收消息主题的数字，实现对应的滑动位置呈现。
@@ -164,8 +182,8 @@
                 <span style="color:#4e73df;">滑动范围</span> - 滑杆的最小值、最大值和步长值。
             </p>
         </div>
-        <div class="overflow-hidden content-section" id="content-joystick">
+        <div class="overflow-hidden content-section" id="content-input_controller">
-            <h1 id="joystick">摇杆手柄</h1>
+            <h1 id="input_controller">摇杆手柄</h1>
             <h3>组件总览</h3>
             <p>
                 以“摇杆”模式响应用户输入，向消息主题发送"X,Y"格式的字符串, 其中X和Y分别为摇杆的X轴和Y轴的值（范围均为-100~100），每500ms采样一次。
@@ -178,8 +196,8 @@
                 <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
             </p>
         </div>
-        <div class="overflow-hidden content-section" id="content-rgb">
+        <div class="overflow-hidden content-section" id="content-input_rgb">
-            <h1 id="rgb">RGB色盘</h1>
+            <h1 id="input_rgb">RGB色盘</h1>
             <h3>组件总览</h3>
             <p>
                 以“拖动”或“点击”模式响应用户输入，向三个消息主题分别发送R、G、B通道的颜色值（范围均为0~255）。
@@ -198,8 +216,8 @@
                 <span style="color:#4e73df;">消息主题（B）</span> - 组件的消息主题（B通道）。
             </p>
         </div>
-        <div class="overflow-hidden content-section" id="content-bulb">
+        <div class="overflow-hidden content-section" id="content-output_bulb">
-            <h1 id="bulb">指示灯</h1>
+            <h1 id="output_bulb">指示灯</h1>
             <h3>组件总览</h3>
             <p>
                 接收消息主题的0/1/2/3信号，实现对应的状态呈现（0=关闭，1=<b style="color: #1cc88a;">绿灯</b>，2=<b style="color:#f6c23e">黄灯</b>，3=<b style="color:#e74a3b">红灯</b>）。
@@ -311,8 +329,8 @@
                 <span style="color:#4e73df;">蓝牙设备</span> - 组件连接的蓝牙设备。
             </p>
         </div>
-        <div class="overflow-hidden content-section" id="content-chart">
+        <div class="overflow-hidden content-section" id="content-output_chart">
-            <h1 id="chart">折线图表</h1>
+            <h1 id="output_chart">折线图表</h1>
             <h3>组件总览</h3>
             <p>
                 接收单一数值数据或JSON格式的多个数值数据，显示为折线统计图。
@@ -325,8 +343,8 @@
                 <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
             </p>
         </div>
-        <div class="overflow-hidden content-section" id="content-bar">
+        <div class="overflow-hidden content-section" id="content-output_bar">
-            <h1 id="bar">投票器</h1>
+            <h1 id="output_bar">投票器</h1>
             <h3>组件总览</h3>
             <p>
                 接收文本数据，增加对应选项的计数。
@@ -363,8 +381,8 @@
                 <span style="color:#4e73df;">列名</span> - 用英文逗号分隔的表格列名列表。
             </p>
         </div>
-        <div class="overflow-hidden content-section" id="content-map">
+        <div class="overflow-hidden content-section" id="content-output_map">
-            <h1 id="map">数据地图</h1>
+            <h1 id="output_map">数据地图</h1>
             <h3>组件总览</h3>
             <p>
                 接收JSON格式的地图标记数据，并进行显示。<br>
@@ -389,6 +407,125 @@
                 <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
             </p>
         </div>
+        <div class="overflow-hidden content-section" id="content-output_dashboard">
+            <h1 id="output_dashboard">仪表盘</h1>
+            <h3>组件总览</h3>
+            <p>
+                接收数值消息，进行仪表盘显示。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
+            </p>
+            <p>
+                <span style="color:#4e73df;">指示范围</span> - 仪表盘的最小值和最大值。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-input_weather">
+            <h1 id="input_weather">实时气象仪</h1>
+            <h3>组件总览</h3>
+            <p>
+                查询天气信息，主动发送消息。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
+            </p>
+            <p>
+                <span style="color:#4e73df;">自动更新频率</span> - 自动更新天气信息的频率。
+            </p>
+            <p>
+                <span style="color:#4e73df;">自动发送频率</span> - 自动发送天气信息的频率。
+            </p>
+            <p>
+                <span style="color:#4e73df;">采集位置</span> - 天气信息的地理位置。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-camera">
+            <h1 id="camera">摄像头</h1>
+            <h3>组件总览</h3>
+            <p>
+                拍摄实时画面，发送BASE64编码的画面截图。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
+            </p>
+            <p>
+                <span style="color:#4e73df;">分辨率</span> - 拍摄画面的分辨率。
+            </p>
+            <p>
+                <span style="color:#4e73df;">帧率</span> - 每秒捕捉画面的次数。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-input_mic">
+            <h1 id="input_mic">语音识别</h1>
+            <h3>组件总览</h3>
+            <p>
+                点击录制语音，转文字发送。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-tinydb">
+            <h1 id="tinydb">下拉选项</h1>
+            <h3>组件总览</h3>
+            <p>
+                设置下拉列表，快速选择发送消息。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
+            </p>
+            <p>
+                <span style="color:#4e73df;">选项列表</span> - 下拉列表的选项，使用逗号分隔。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-input_keyboard">
+            <h1 id="input_keyboard">文本输入</h1>
+            <h3>组件总览</h3>
+            <p>
+                输入文本，点击发送消息。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-output_text">
+            <h1 id="output_text">文本显示屏</h1>
+            <h3>组件总览</h3>
+            <p>
+                接收并呈现消息。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
+            </p>
+        </div>
         <div class="overflow-hidden content-section" id="content-pixel">
             <h1 id="pixel">点阵屏</h1>
             <h3>组件总览</h3>
@@ -416,6 +553,93 @@
                 <span style="color:#4e73df;">垂直像素</span> - 点阵屏垂直像素的个数。
             </p>
         </div>
+        <div class="overflow-hidden content-section" id="content-decorate_text">
+            <h1 id="decorate_text">标签</h1>
+            <h3>组件总览</h3>
+            <p>
+                呈现文本信息。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">显示文本</span> - 呈现的文本信息。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-decorate_pic">
+            <h1 id="decorate_pic">图片 / 视频</h1>
+            <h3>组件总览</h3>
+            <p>
+                接收外部链接或BASE64格式的字符串，呈现图片/视频。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">图片链接</span> - 默认呈现的图片/视频链接或BASE64字符串。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 接收消息、动态更新图片/视频的主题。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-magic">
+            <h1 id="magic">装饰框</h1>
+            <h3>组件总览</h3>
+            <p>
+                将组件组合起来。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">颜色</span> - 框体颜色。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-face">
+            <h1 id="face">人脸识别</h1>
+            <h3>组件总览</h3>
+            <p>
+                录入并识别人脸，输出人脸识别信息。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件发送消息的主题。
+            </p>
+            <p>
+                <span style="color:#4e73df;">触发间隔</span> - 检测人脸的最短时间间隔。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-ocr">
+            <h1 id="ocr">蜂鸣器</h1>
+            <h3>组件总览</h3>
+            <p>
+                收到消息时，发出提示音。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件接收消息的主题。
+            </p>
+            <p>
+                <span style="color:#4e73df;">提示音类型</span> - 收到消息时发出提示音的类型。
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-qr">
+            <h1 id="qr">二维码识别</h1>
+            <h3>组件总览</h3>
+            <p>
+                识别二维码/条形码，发送消息。
+            </p>
+            <h3>可配置项</h3>
+            <p>
+                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
+            </p>
+            <p>
+                <span style="color:#4e73df;">消息主题</span> - 组件发送消息的主题。
+            </p>
+        </div>
     </div>
 </div>
 

js/widgets.js

@@ -169,7 +169,7 @@ function add_pixel(user_title, user_topic, user_content, user_style, title_style
         if (tbd)
             tbd.remove()
     }
-    attrs = [
+    var attrs = [
         ['user-type', 'pixel'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -476,7 +476,7 @@ function add_button(user_title, user_topic, user_content, user_style, title_styl
         if (tbd)
             tbd.remove()
     }
-    attrs = [
+    var attrs = [
         ['user-type', 'input_button'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -701,7 +701,7 @@ function add_slider(user_title, user_topic, user_content, user_style, title_styl
         if (tbd)
             tbd.remove()
     }
-    attrs = [
+    var attrs = [
         ['user-type', 'input_slider'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -881,7 +881,7 @@ function add_controller(user_title, user_topic, user_content, user_style, title_
     contents.push(controllerDiv)
     var controllerID = randomString() + 'con'
     controllerDiv.attr('id', controllerID)
-    attrs = [
+    var attrs = [
         ['user-type', 'input_controller'],
         ['user-title', user_title],
         ['user-content', "0,0"],
@@ -1061,7 +1061,7 @@ function add_keyboard(user_title, user_topic, user_content, user_style, title_st
     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)
-    attrs = [
+    var attrs = [
         ['user-type', 'input_keyboard'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -1280,7 +1280,7 @@ function add_tinydb(user_title, user_topic, user_content, user_style, title_styl
     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)
-    attrs = [
+    var attrs = [
         ['user-type', 'tinydb'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -1514,7 +1514,7 @@ function add_mic(user_title, user_topic, user_content, user_style, title_style)
     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)
-    attrs = [
+    var attrs = [
         ['user-type', 'input_mic'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -1765,7 +1765,7 @@ function add_bulb(user_title, user_topic, user_content, user_style, title_style)
         bulb.attr('class', 'bulb2')
     else if (user_content == 3)
         bulb.attr('class', 'bulb3')
-    attrs = [
+    var attrs = [
         ['user-type', 'output_bulb'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -1966,7 +1966,7 @@ function add_ble(user_title, user_topic, user_content, user_style, title_style)
     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)
-    attrs = [
+    var attrs = [
         ['user-type', 'ble'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -2289,7 +2289,7 @@ function add_magic(user_title, user_topic, user_content, user_style, title_style
     var transparentDiv = $('<div style="width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,0);z-index:-9999"/>')
     contents.push(title)
     contents.push(transparentDiv)
-    attrs = [
+    var attrs = [
         ['user-type', 'magic'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -2445,7 +2445,7 @@ async function add_timer(user_title, user_topic, user_content, user_style, title
     topicDiv.append(topic)
     var bulb = $("<img src='icons/timer.svg' style='width:50%;height:50%'></img>")
     contents.push(bulb)
-    attrs = [
+    var attrs = [
         ['user-type', 'timer'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -2670,7 +2670,7 @@ async function add_trigger(user_title, user_topic, user_content, user_style, tit
     topicDiv.append(topic)
     var bulb = $("<img src='icons/trigger.svg' style='width:50%;height:50%'></img>")
     contents.push(bulb)
-    attrs = [
+    var attrs = [
         ['user-type', 'trigger'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -3050,7 +3050,7 @@ function add_rgb(user_title, user_topic, user_content, user_style, title_style)
     pickerRGBDiv.append(pickerDiv)
     pickerRGBDiv.append(RGBDiv)
     contents.push(pickerRGBDiv)
-    attrs = [
+    var attrs = [
         ['user-type', 'input_rgb'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -3381,7 +3381,7 @@ function add_bar(user_title, user_topic, user_content, user_style, title_style)
         if (tbd)
             tbd.remove()
     }
-    attrs = [
+    var attrs = [
         ['user-type', 'output_bar'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -3638,7 +3638,7 @@ function add_dashboard(user_title, user_topic, user_content, user_style, title_s
     var dashID = randomString() + "dash"
     dashCanvas.attr('id', dashID)
     contents.push(dashDiv)
-    attrs = [
+    var attrs = [
         ['user-type', 'output_dashboard'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -3843,7 +3843,7 @@ function add_map(user_title, user_topic, user_content, user_style, title_style)
                 event.stopPropagation()
             }, { passive: false })
             contents.push(mapDiv)
-            attrs = [
+            var attrs = [
                 ['user-type', 'output_map'],
                 ['user-title', user_title],
                 ['user-topic', user_topic],
@@ -4188,7 +4188,7 @@ function add_map(user_title, user_topic, user_content, user_style, title_style)
                 event.stopPropagation()
             }, { passive: false })
             contents.push(mapDiv)
-            attrs = [
+            var attrs = [
                 ['user-type', 'output_map'],
                 ['user-title', user_title],
                 ['user-topic', user_topic],
@@ -4525,7 +4525,7 @@ function add_text(user_title, user_topic, user_content, user_style, title_style)
     textDiv.css('font-size', fontSize + 'rem')
     textDiv.attr('class', 'mid_screen')
     contents.push(textDiv)
-    attrs = [
+    var attrs = [
         ['user-type', 'output_text'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -4772,7 +4772,7 @@ function add_table(user_title, user_topic, user_content, user_style, title_style
     textDiv.text(stringendecoder.decodeHtml(user_content))
     textDiv.attr('class', 'mid_screen')
         //contents.push(textDiv)
-    attrs = [
+    var attrs = [
         ['user-type', 'table'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -5155,7 +5155,7 @@ function add_weather(user_title, user_topic, user_content, user_style, title_sty
 
     buttonDiv.append(sendIcon)
     contents.push(buttonDiv)
-    attrs = [
+    var attrs = [
         ['user-type', 'input_weather'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -5653,7 +5653,7 @@ function add_chart(user_title, user_topic, user_content, user_style, title_style
         if (tbd)
             tbd.remove()
     }
-    attrs = [
+    var attrs = [
         ['user-type', 'output_chart'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -5853,7 +5853,7 @@ function add_decorate_text(user_title, user_topic, user_content, user_style, tit
     var contents = []
     var ctt = $("<h4 class='userTitle' style='margin:0'>" + user_content.replaceAll('\n', '<br>') + "</h4>")
     contents.push(ctt)
-    attrs = [
+    var attrs = [
         ['user-type', 'decorate_text'],
         ['user-title', randomString()],
         ['user-content', user_content],
@@ -5986,7 +5986,7 @@ function add_decorate_pic(user_title, user_topic, user_content, user_style, titl
         var ctt = $("<img style='height:100%;width:100%' src='" + user_content + "'></img>")
     }
     contents.push(ctt)
-    attrs = [
+    var attrs = [
         ['user-type', 'decorate_pic'],
         ['user-topic', user_topic],
         ['user-title', randomString()],
@@ -6216,7 +6216,7 @@ function add_camera(user_title, user_topic, user_content, user_style, title_styl
     var fps = parseInt(user_content.split(",")[1])
     var resolutionX = parseInt(resolution.split("x")[0])
     var resolutionY = parseInt(resolution.split("x")[1])
-    attrs = [
+    var attrs = [
         ['user-type', 'camera'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -6676,7 +6676,7 @@ function add_face(user_title, user_topic, user_content, user_style, title_style)
             })
             
 
-            attrs = [
+            var attrs = [
                 ['user-type', 'face'],
                 ['user-title', user_title],
                 ['user-topic', user_topic],
@@ -6966,7 +6966,7 @@ function add_ocr(user_title, user_topic, user_content, user_style, title_style)
     var bell_icon = $('<i class="fa fa-bell" style="font-size:40px;color:#858796"></i>')
     icon_div.append(bell_icon)
     contents.push(icon_div)
-    attrs = [
+    var attrs = [
         ['user-type', 'ocr'],
         ['user-title', user_title],
         ['user-topic', user_topic],
@@ -7220,7 +7220,7 @@ function add_qr(user_title, user_topic, user_content, user_style, title_style) {
         })
         
 
-        attrs = [
+        var attrs = [
             ['user-type', 'qr'],
             ['user-title', user_title],
             ['user-topic', user_topic],
@@ -7455,7 +7455,7 @@ var helpButton = $('<a class="btn btn-dark btn-circle bbbt"><i class="fa fa-book
 helpButton.click(function() {
     if(tbd)
         tbd.remove()
-    var helpurl = window.location.href.replace("projects", "documentation/") + "#" + $(this).attr("user-origin")
+    var helpurl = window.location.href.replace("projects-mixly", "documentation/").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")