add-magic-widget

js/lang.js

@@ -90,6 +90,10 @@ var JSLang = {
         "bulb": "指示灯",
         "timer": "定时触发器",
         "trigger": "条件触发器",
+        "magic": "魔术框",
+        "pixel": "点阵屏",
+        "video": "视频",
+        "widget": "组件",
         "data": "- 数据 -",
         "lineChart": "折线图表",
         "barChart": "柱状图表",
@@ -102,7 +106,8 @@ var JSLang = {
         "screen": "文本显示屏",
         "decorate": "- 装饰 -",
         "label": "标签",
-        "picture": "图片",
+        "picture": "图片 / 视频",
+        "ble": "蓝牙转发器",
         "unitName": "组件名称",
         "messTopic": "消息主题",
         "triggerTopic": "触发消息主题",
@@ -118,9 +123,12 @@ var JSLang = {
         "illegalTimes": "触发次数应为非负整数",
         "invalidSlideRange": "滑动数值设置有误",
         "slideRange": "滑动范围",
+        "hideTitle": "内部组件标题",
         "min": "最小值",
         "max": "最大值",
         "step": "步长",
+        "show": "显示",
+        "hide": "隐藏",
         "choicesList": "选项列表",
         "recvMode": "接收模式",
         "single": "单选",
@@ -132,6 +140,13 @@ var JSLang = {
         "district": "请选择区域",
         "locationSet": "请设置天气数据采集地域",
         "columns": "列名",
+        "color": "颜色",
+        "blue": "蓝色",
+        "green": "绿色",
+        "cyan": "青色",
+        "red": "红色",
+        "yellow": "黄色",
+        "gray": "灰色",
         "columnsSet": "请设置列名",
         "displayRange": "指示范围",
         "mod5": "取值范围的极差必须为5的正整数倍。",
@@ -174,6 +189,7 @@ var JSLang = {
         'prjs': "项目中的",
         'clearAsk': "条离线存储数据吗？",
         "clearS": "清除成功",
+        "guide": "使用指南",
         "settingP": "设置中...",
         "settingS": "设置成功",
         "settingF": "设置失败",
@@ -282,6 +298,10 @@ var JSLang = {
         "bulb": "指示燈",
         "timer": "定時觸發器",
         "trigger": "條件觸發器",
+        "magic": "魔術框",
+        "pixel": "點陣屏",
+        "video": "視頻",
+        "widget": "小部件",
         "data": "- 數據 -",
         "lineChart": "折線圖表",
         "barChart": "柱狀圖表",
@@ -294,7 +314,8 @@ var JSLang = {
         "screen": "文本顯示屏",
         "decorate": "- 裝飾 -",
         "label": "標簽",
-        "picture": "圖片",
+        "picture": "圖片 / 視頻",
+        "ble": "藍牙Hub",
         "unitName": "組件名稱",
         "messTopic": "消息主題",
         "feedbackMode": "反饋模式",
@@ -306,9 +327,12 @@ var JSLang = {
         "messageLenIllegal": "消息內容不能為空",
         "invalidSlideRange": "滑動數值設置有誤",
         "slideRange": "滑動範圍",
+        "hideTitle": "內部元件標題",
         "min": "最小值",
         "max": "最大值",
         "step": "步長",
+        "show": "顯示",
+        "hide": "隱藏",
         "choicesList": "選項列表",
         "recvMode": "接收模式",
         "single": "單選",
@@ -320,6 +344,13 @@ var JSLang = {
         "district": "請選擇區域",
         "locationSet": "請設置天氣數據采集地域",
         "columns": "列名",
+        "color": "顏色",
+        "blue": "Blue",
+        "green": "Green",
+        "cyan": "Cyan",
+        "red": "Red",
+        "yellow": "Yellow",
+        "gray": "Gray",
         "columnsSet": "請設置列名",
         "displayRange": "指示範圍",
         "mod5": "取值範圍的極差必須為5的正整數倍。",
@@ -362,6 +393,7 @@ var JSLang = {
         'prjs': "項目中的",
         'clearAsk': "條離線存儲數據嗎？",
         "clearS": "清除成功",
+        "guide": "使用指南",
         "settingP": "設置中...",
         "settingS": "設置成功",
         "settingF": "設置失敗",
@@ -470,6 +502,10 @@ var JSLang = {
         "bulb": "Bulb",
         "timer": "Timing triggers",
         "trigger": "Condition triggers",
+        "magic": "Magic Square",
+        "pixel": "Pixel Matrix",
+        "video": "Video",
+        "widget": "Widget",
         "data": "- Data -",
         "lineChart": "Line Chart",
         "barChart": "Bar Chart",
@@ -482,7 +518,8 @@ var JSLang = {
         "screen": "Text Screen",
         "decorate": "- Decoration -",
         "label": "Label",
-        "picture": "Image",
+        "picture": "Image / Video",
+        "ble": "Bluetooth Adapter",
         "unitName": "Unit Name",
         "messTopic": "Message Topic",
         "feedbackMode": "Mode",
@@ -494,9 +531,12 @@ var JSLang = {
         "illegalTimes": "Times illegal (should be an non-negative integer)",
         "invalidSlideRange": "Invalid slide range.",
         "slideRange": "Slide Range",
+        "hideTitle": "Inner Title",
         "min": "min",
         "max": "max",
         "step": "step",
+        "show": "Show",
+        "hide": "Hide",
         "choicesList": "Choices List",
         "recvMode": "Mode",
         "single": "Single",
@@ -508,6 +548,13 @@ var JSLang = {
         "district": "District",
         "locationSet": "Please select a location",
         "columns": "Columns",
+        "color": "Color",
+        "blue": "Blue",
+        "green": "Green",
+        "cyan": "Cyan",
+        "red": "Red",
+        "yellow": "Yellow",
+        "gray": "Gray",
         "columnsSet": "Please set at least 1 column",
         "displayRange": "Display Range",
         "mod5": "The range of values must be a positive integer multiple of 5.",
@@ -550,6 +597,7 @@ var JSLang = {
         'prjs': ": ",
         'clearAsk': " reserved offline messages?",
         "clearS": "Clear Success",
+        "guide": "Guide",
         "settingP": "Setting...",
         "settingS": "Success",
         "settingF": "Failed",

js/projects.js

@@ -1004,6 +1004,7 @@ function view_project(projectName, projectType) {
                     'output_map': add_map,
                     'input_weather': add_weather,
                     'trigger': add_trigger,
+                    'magic': add_magic,
                     'table': add_table,
                     'decorate_text': add_decorate_text,
                     'decorate_pic': add_decorate_pic,
@@ -1497,7 +1498,9 @@ function isJSON(str) {
 }
 
 function add_widget() {
-    var widget_list = $("<div class='widget_list nnt' style='display:flex;max-width:560px;align-items:center;justify-content:center;flex-direction:row;flex-wrap:wrap;padding:10px'/>")
+    var widget_list = $("<div class='widget_list nnt' style='display:flex;max-width:810px;align-items:center;justify-content:center;flex-direction:row;flex-wrap:wrap;padding:10px'/>")
+    var title = $("<div style='display:flex;align-items:center;justify-content:center;font-size:1.8rem!important;width:100%;text-align:center;margin-bottom:15px;margin-top:5px;color:#4e73df;font-size:1.3rem;font-weight:bold'><i class='fa fa-cube' style='margin-right:5px;font-size:2rem'></i><p style='margin:0'>" + JSLang[lang].widget + "</p><a class='btn btn-primary btn-block' style='width:90px;margin-left:8px;padding:2px' href='./documentation' target='_blank'>" + JSLang[lang].guide + "</a></div>")
+    widget_list.append(title)
     widget_list.append($("<h5 style='width:100%;text-align:center;margin-bottom:5px;margin-top:5px;color:#4e73df;font-size:1.3rem;font-weight:bold'>" + JSLang[lang].control + "</h5>"))
     var input_button_add = $("<div class='widget_div'><div><img src='icons/input_button.svg'><span>" + JSLang[lang].switch+"</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
     widget_list.append(input_button_add)
@@ -1515,6 +1518,8 @@ function add_widget() {
     widget_list.append(timer_add)
     var trigger_add = $("<div class='widget_div'><div><img src='icons/trigger.svg'><span>" + JSLang[lang].trigger + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
     widget_list.append(trigger_add)
+    var ble_add = $("<div class='widget_div'><div><img src='icons/ble.svg'><span>" + JSLang[lang].ble + "</span></div><a class='btn btn-secondary btn-block'><i class='fa fa-plus'></i></a></div>")
+    widget_list.append(ble_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].data + "</h5>"))
     var output_chart_add = $("<div class='widget_div'><div><img src='icons/output_chart.svg'><span>" + JSLang[lang].lineChart + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
     widget_list.append(output_chart_add)
@@ -1533,10 +1538,14 @@ function add_widget() {
     widget_list.append(input_keyboard_add)
     var output_text_add = $("<div class='widget_div'><div><img src='icons/output_text.svg'><span>" + JSLang[lang].screen + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
     widget_list.append(output_text_add)
+    var output_pixel_add = $("<div class='widget_div'><div><img src='icons/output_pixel.svg'><span>" + JSLang[lang].pixel + "</span></div><a class='btn btn-secondary btn-block'><i class='fa fa-plus'></i></a></div>")
+    widget_list.append(output_pixel_add)
     var decorate_text_add = $("<div class='widget_div'><div><img src='icons/decorate_text.svg'><span>" + JSLang[lang].label + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
     widget_list.append(decorate_text_add)
     var decorate_pic_add = $("<div class='widget_div'><div><img src='icons/decorate_pic.svg'><span>" + JSLang[lang].picture + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
     widget_list.append(decorate_pic_add)
+    var magic_add = $("<div class='widget_div'><div><img src='icons/magic.svg'><span>" + JSLang[lang].magic + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
+    widget_list.append(magic_add)
     input_button_add.children("a").click(function() {
         d.close().remove()
         var editForm = $('<div class="nnt"/>')
@@ -2243,6 +2252,47 @@ function add_widget() {
         modifyDia.showModal()
     })
 
+    magic_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/magic.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="text-align:center;margin-top:15px">' + JSLang[lang].color + '</h5>'))
+        var color_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+        var color_select = $('<select class="form-control form-control-user" style="text-align:center"/>')
+        color_select.append($('<option value="#4e73df">' + JSLang[lang].blue + '</option>'))
+        color_select.append($('<option value="#1cc88a">' + JSLang[lang].green + '</option>'))
+        color_select.append($('<option value="#36b9cc">' + JSLang[lang].cyan + '</option>'))
+        color_select.append($('<option value="#f6c23e">' + JSLang[lang].yellow + '</option>'))
+        color_select.append($('<option value="#e74a3b">' + JSLang[lang].red + '</option>'))
+        color_select.append($('<option value="#858796">' + JSLang[lang].gray + '</option>'))
+        color_input_div.append(color_select)
+        editForm.append(color_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_magic(title_input.val(), undefined, color_select.val())
+            modifyDia.close().remove()
+        })
+        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_text_add.children("a").click(function() {
         d.close().remove()
         var editForm = $('<div class="nnt"/>')

js/widgets.js

@@ -1015,6 +1015,129 @@ function add_bulb(user_title, user_topic, user_content, user_style) {
         itemdiv.attr('style', user_style)
 }
 
+function add_magic(user_title, user_topic, user_content, user_style) {
+    var isAlive = true
+    var contents = []
+    var bgColor = user_content
+    var title = $("<h4 class='userTitle' style='background-color: " + bgColor + ";color:white;text-align:center;width:100%;position:absolute;top:0;left:0;height:40px;font-size:1.25rem;padding-top:10px;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important'>" + user_title + "</h4>")
+    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 = [
+        ['user-type', 'magic'],
+        ['user-title', user_title],
+        ['user-topic', user_topic],
+        ['user-content', user_content]
+    ]
+    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
+        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/magic.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="text-align:center;margin-top:15px">' + JSLang[lang].color + '</h5>'))
+    var color_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+    var color_select = $('<select class="form-control form-control-user" style="text-align:center"/>')
+    color_select.append($('<option value="#4e73df">' + JSLang[lang].blue + '</option>'))
+    color_select.append($('<option value="#1cc88a">' + JSLang[lang].green + '</option>'))
+    color_select.append($('<option value="#36b9cc">' + JSLang[lang].cyan + '</option>'))
+    color_select.append($('<option value="#f6c23e">' + JSLang[lang].yellow + '</option>'))
+    color_select.append($('<option value="#e74a3b">' + JSLang[lang].red + '</option>'))
+    color_select.append($('<option value="#858796">' + JSLang[lang].gray + '</option>'))
+    color_input_div.append(color_select)
+    editForm.append(color_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()) < 11) {
+            var re = /^[a-z0-9]+$/i;
+            if (true)
+                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', "")
+                        title.parent().parent().attr('user-content', color_select.val())
+                        bgColor = color_select.val()
+                        title.css('background-color', bgColor)
+                        itemdiv.css('box-shadow', bgColor + ' 10px 10px 20px')
+                        title.text(title_input.val())
+                        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 (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"/>')
+            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)
+            title_input.val(title.text())
+            color_select.val(bgColor)
+            if (!d.open)
+                d.show(itemdiv[0]);
+            else
+                d.close()
+        }
+    }
+    if (window.screen.width > 800)
+        itemdiv.click(showEditBubble)
+    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 add_timer(user_title, user_topic, user_content, user_style) {
     var isAlive = true
     var contents = []