new-widget

css/widgets.css

@@ -231,12 +231,9 @@
     line-height:1.2rem;
     padding:0.5rem;
     word-break:break-all;
-    background-color: #eeeeee;
     color:black;
     font-weight:bold;
     font-size: 1rem;
-    border-radius:10px;
-    border:solid gray 2px;
     display: flex;
     align-items: center;
     justify-content: center;

js/lang.js

@@ -120,6 +120,7 @@ var JSLang = {
         "ble": "蓝牙转发器",
         "unitName": "组件名称",
         "messTopic": "消息主题",
+        "options": "选项列表（逗号分隔）",
         "readMessTopic": "读取消息主题",
         "writeMessTopic": "写入消息主题",
         "triggerTopic": "触发消息主题",
@@ -349,6 +350,7 @@ var JSLang = {
         "ble": "藍牙Hub",
         "unitName": "組件名稱",
         "messTopic": "消息主題",
+        "options": "選項列表（逗號分隔）",
         "readMessTopic": "讀取消息主題",
         "writeMessTopic": "寫入消息主題",
         "feedbackMode": "反饋模式",
@@ -574,6 +576,7 @@ var JSLang = {
         "ble": "Bluetooth Adapter",
         "unitName": "Unit Name",
         "messTopic": "Message Topic",
+        "options": "Options (comma separated)",
         "readMessTopic": "Read Message Topic",
         "writeMessTopic": "Write Message Topic",
         "feedbackMode": "Mode",

js/observe.js

@@ -48,7 +48,7 @@ $(function(){
         randomClientID = 'OBGuest_' + Math.random().toString(16).substr(2, 8)
         globalUserName = userName
         globalProjectName = projectName
-        mqtt.connect((location.protocol == 'https:' ? 'wss://' : 'ws://') + window.location.host.split(":")[0] + (location.protocol == 'https:' ? (':'+MIXIO_WSS_PORT) : (':'+MIXIO_WS_PORT)), {
+        client = mqtt.connect((location.protocol == 'https:' ? 'wss://' : 'ws://')+window.location.host+(location.protocol == 'https:' ? ':8084' : ':8083')+'/mqtt',{
             'clientId':randomClientID,
             'username':userName,
             'password':projectPass
@@ -77,7 +77,8 @@ $(function(){
                 'magic':add_magic,
                 'ble': add_ble,
                 'pixel': add_pixel,
-                'input_mic': add_mic
+                'input_mic': add_mic,
+                'tinydb': add_tinydb
             }
             console.log(un.attr('user-type'))
             toolkits[un.attr('user-type')](un.attr('user-title'),un.attr('user-topic'),un.attr('user-content'),un.attr('style'));

js/projects.js

@@ -1066,7 +1066,8 @@ function view_project(projectName, projectType) {
                     'timer': add_timer,
                     'ble': add_ble,
                     'camera': add_camera,
-                    'input_mic': add_mic
+                    'input_mic': add_mic,
+                    'tinydb': add_tinydb,
                 }
                 toolkits[un.attr('user-type')](un.attr('user-title'), un.attr('user-topic'), un.attr('user-content'), un.attr('style'), titleHidden)
             }
@@ -1725,7 +1726,7 @@ function add_widget() {
     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-success 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>")
+    var input_tinydb_add = $("<div class='widget_div'><div><img src='icons/database.svg'><span>" + JSLang[lang].tinydb + "</span></div><a class='btn btn-success 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>")
@@ -2216,6 +2217,60 @@ function add_widget() {
         modifyDia.showModal()
     })
 
+    input_tinydb_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/database.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.val("select")
+        topic_input_div.append(topic_input)
+        editForm.append(topic_input_div)
+        editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].options + '</h5>'))
+        var options_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+        var options_input = $("<input class='form-control form-control-user'  style='text-align:center'/>")
+        options_input_div.append(options_input)
+        editForm.append(options_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_tinydb(title_input.val(), topic_input.val(), options_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" style="box-shadow:1px 1px 5px #e74a3b"><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()
+    })
+
     input_mic_add.children("a").click(function() {
         d.close().remove()
         var editForm = $('<div class="nnt"/>')

js/widgets.js

@@ -1247,6 +1247,229 @@ function add_keyboard(user_title, user_topic, user_content, user_style, title_st
 
 }
 
+function add_tinydb(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)
+    attrs = [
+        ['user-type', 'tinydb'],
+        ['user-title', user_title],
+        ['user-topic', user_topic],
+        ['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 = $("<select class='form-control' style='width:calc(100% - 85px);min-width:0px'/>")
+    var options = user_content.split(',')
+    for (var i = 0; i < options.length; i++) {
+        var option = $("<option value='" + options[i] + "'>" + options[i] + "</option>")
+        messDiv.append(option)
+    }
+    keyDiv.append(messDiv)
+    messDiv.click(function(event) {
+        event.stopPropagation()
+    })
+    messDiv.bind('mousedown', function(event) {
+        event.stopPropagation()
+    })
+    messDiv.bind('mouseup', function(event) {
+        event.stopPropagation()
+    })
+    var sendIcon = $('<a class="btn btn-primary btn-circle" style="margin-left:10px"><i class="fa fa-paper-plane"></i></a')
+    keyDiv.append(sendIcon)
+    sendIcon.bind('mousedown', function(event) {
+        event.stopPropagation()
+    })
+    sendIcon.bind('mouseup', function(event) {
+        event.stopPropagation()
+    })
+    if (window.screen.width > 800)
+        sendIcon.bind('click', function(event) {
+            event.stopPropagation()
+            publish(topic.text(), messDiv.val())
+            sendIcon.removeClass("btn-primary")
+            sendIcon.addClass("btn-success")
+            sendIcon.children().removeClass('fa-paper-plane')
+            sendIcon.children().addClass("fa-check")
+            setTimeout(function() {
+                sendIcon.removeClass("btn-success")
+                sendIcon.addClass("btn-primary")
+                sendIcon.children().removeClass('fa-check')
+                sendIcon.children().addClass("fa-paper-plane")
+            }, 300)
+        })
+    else
+        sendIcon.bind('touchend', function(event) {
+            event.stopPropagation()
+            publish(topic.text(), messDiv.val())
+            sendIcon.removeClass("btn-primary")
+            sendIcon.addClass("btn-success")
+            sendIcon.children().removeClass('fa-paper-plane')
+            sendIcon.children().addClass("fa-check")
+            setTimeout(function() {
+                sendIcon.removeClass("btn-success")
+                sendIcon.addClass("btn-primary")
+                sendIcon.children().removeClass('fa-check')
+                sendIcon.children().addClass("fa-paper-plane")
+            }, 300)
+        })
+    contents.push(keyDiv)
+    var itemdiv = add_block(3, 1, contents, attrs)
+    itemdiv.bind(MixIO.actionTags.KEYBOARD_SEND, function(event, message) {
+        messDiv.val(message)
+        publish(topic.text(), messDiv.val())
+        sendIcon.removeClass("btn-primary")
+        sendIcon.addClass("btn-success")
+        sendIcon.children().removeClass('fa-paper-plane')
+        sendIcon.children().addClass("fa-check")
+        setTimeout(function() {
+            sendIcon.removeClass("btn-success")
+            sendIcon.addClass("btn-primary")
+            sendIcon.children().removeClass('fa-check')
+            sendIcon.children().addClass("fa-paper-plane")
+        }, 300)
+    })
+
+    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/input_keyboard.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].options + '</h5>'))
+    var options_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+    var options_input = $("<input class='form-control form-control-user'  style='text-align:center'/>")
+    options_input_div.append(options_input)
+    editForm.append(options_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())
+                        title.parent().parent().attr('user-content', options_input.val())
+                        title.text(title_input.val())
+                        topic.text(topic_input.val())
+                        messDiv.empty()
+                        var options = options_input.val().split(',')
+                        for (var i = 0; i < options.length; i++) {
+                            var option = $("<option value='" + options[i] + "'>" + options[i] + "</option>")
+                            messDiv.append(option)
+                        }
+                        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)
+                {
+                copyButton.attr("user-origin", title.text())
+                bubble.append(copyButton)
+                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())
+            options_input.val(title.parent().parent().attr('user-content'))
+            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 add_mic(user_title, user_topic, user_content, user_style, title_style) {
     var isAlive = true
     var isRecording = false
@@ -3848,16 +4071,20 @@ function add_text(user_title, user_topic, user_content, user_style, title_style)
     client.on('message', function(topic1, message1) {
         if (isAlive && isRunning)
             if (topic1.split("/")[(isMixly ? 3 : 2)] == topic.text()) {
-                textDiv.empty()
-                // set innerHTML
-                textDiv.html(stringendecoder.decodeHtml(String(message1)))
-                var minFontSize = 1
-                var fontSize = 3 - String(message1).length / 3
-                if (fontSize < minFontSize)
-                    fontSize = minFontSize
-                textDiv.css('font-size', fontSize + 'rem')
-                title.parent().parent().attr('user-content', stringendecoder.encodeHtml(String(message1)))
-                itemdiv.trigger(MixIO.eventTags.TEXT_SCREEN_CHANGED, [String(message1)])
+                textDiv.animate({ opacity: 0 }, 200);
+                setTimeout(function() {
+                    textDiv.empty()
+                    // set innerHTML
+                    textDiv.html(stringendecoder.decodeHtml(String(message1)))
+                    var minFontSize = 1
+                    var fontSize = 3 - String(message1).length / 3
+                    if (fontSize < minFontSize)
+                        fontSize = minFontSize
+                    textDiv.css('font-size', fontSize + 'rem')
+                    textDiv.animate({ opacity: 1 }, 200);
+                    title.parent().parent().attr('user-content', stringendecoder.encodeHtml(String(message1)))
+                    itemdiv.trigger(MixIO.eventTags.TEXT_SCREEN_CHANGED, [String(message1)])
+                }, 200)
             }
     })