tensorflow-blazeface

ejs/projects.ejs

@@ -17,6 +17,8 @@
     <link rel="stylesheet" href="css/codemirror.css?v=2"/>
     <script src="js/codemirror.min.js"></script>
     <script src="js/jquery.min.js"></script>
+    <script src="js/tf.min.js"></script>
+    <script src="js/blazeFace.js"></script>
     <script src="js/lang.js?v=5"></script>
     <script src="js/lang2.js?v=5"></script>
     <script src="js/farbtastic.js"></script>
@@ -46,8 +48,6 @@
     <script>var OFFLINE_MODE = <%=configs['OFFLINE_MODE']%></script>
     <script>var MAX_PROJECT_NUM_PER_USER = <%=configs['MAX_PROJECT_NUM_PER_USER']%></script>
     <script>var BAIDU_MAP_AK = '<%=configs['BAIDU_MAP_AK']%>'</script>
-    <script>var MIXIO_WS_PORT = '<%=configs['MIXIO_WS_PORT']%>'</script>
-    <script>var MIXIO_WSS_PORT = '<%=configs['MIXIO_WSS_PORT']%>'</script>
     <script src="js/projects.js?v=273"></script>
     <script src="js/MixIO.js?v=30"></script>
     <style>

icons/Bert.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="1724230477773" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7500" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M858.898 325.829c-16.25 0-28.785 13-28.785 28.785 0 15.782 13.465 28.78 29.245 28.78 15.79 0 28.785 13 28.785 28.785l0 319.859c0 16.25-12.995 28.78-28.785 28.78l-29.245 0c-16.25 0-28.785 13.005-28.785 28.785l0 0 0 0.465 0 45.03-66.385-65.92c-5.57-5.57-12.995-8.36-20.89-8.36 0 0 0 0-0.46 0L568.749 760.818c-16.25 0-28.785 13.005-28.785 28.785 0 15.785 13 28.785 28.785 28.785l133.235 0 106.775 107.7c5.575 5.575 13 8.82 20.425 8.82 3.72 0 7.43-0.925 11.145-2.32 10.675-4.645 18.105-14.855 18.105-26.92l0.465-87.28 0.46 0c47.82 0 86.815-39 86.815-87.28L946.174 411.714C946.173 364.824 907.178 325.829 858.898 325.829zM771.623 615.513 771.623 238.089c0-47.815-39-87.277-87.28-87.277L162.54 150.812c-47.815 0-87.275 38.997-87.275 87.277l0 376.959c0 47.82 38.995 87.28 87.275 87.28l0.465 0-0.465 145.305c0 12.07 7.43 22.75 18.105 26.925 3.715 1.395 6.965 1.86 10.68 1.86 7.89 0 15.782-3.255 21.352-9.285l154.127-164.805 317.539 0C732.623 702.328 771.623 663.328 771.623 615.513zM354.734 644.298l-0.465 0c-2.782 0-5.57 0.93-8.355 1.855-0.93 0.465-1.855 0.465-2.785 0.465-2.323 0.93-4.642 2.785-6.5 4.64-0.93 0.465-1.855 0.93-2.32 1.86 0 0-0.465 0.465-0.93 0.465l-112.81 120.24 0.465-96.565c0-1.395 0.927-2.325 0.927-3.715 0-16.25-12.997-28.785-28.782-28.785l-30.64 0c-15.782 0-28.782-12.995-28.782-28.78L133.757 238.089c0-15.785 13-28.785 28.782-28.785l522.269 0c16.25 0 28.785 13 28.785 28.785l0 376.959c0 16.25-13 28.785-28.785 28.785L354.734 643.833 354.734 644.298zM533.469 395.464l-71.495 0 0-71.492c0-16.712-13.462-30.64-30.64-30.64-17.175 0-30.64 13.462-30.64 30.64l0 71.492-71.492 0c-16.712 0-30.64 13.462-30.64 30.64 0 17.18 13.465 30.642 30.64 30.642l71.492 0 0 71.027c0 16.71 13.465 30.64 30.64 30.64 17.177 0 30.64-13.465 30.64-30.64l0-71.492 71.495 0c16.71 0 30.64-13.462 30.64-30.64S550.179 395.464 533.469 395.464z" fill="#4e73df" p-id="7501"></path></svg>

icons/blazeFace.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="1724229927389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1534" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M298.666667 896H149.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333V725.333333c0-25.6-17.066667-42.666667-42.666667-42.666666s-42.666667 17.066667-42.666666 42.666666v149.333334C42.666667 934.4 89.6 981.333333 149.333333 981.333333H298.666667c25.6 0 42.666667-17.066667 42.666666-42.666666s-17.066667-42.666667-42.666666-42.666667zM938.666667 682.666667c-25.6 0-42.666667 17.066667-42.666667 42.666666v149.333334c0 12.8-8.533333 21.333333-21.333333 21.333333H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h149.333334c59.733333 0 106.666667-46.933333 106.666666-106.666666V725.333333c0-25.6-17.066667-42.666667-42.666666-42.666666zM874.666667 42.666667H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h149.333334c12.8 0 21.333333 8.533333 21.333333 21.333333V298.666667c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V149.333333C981.333333 89.6 934.4 42.666667 874.666667 42.666667zM85.333333 341.333333c25.6 0 42.666667-17.066667 42.666667-42.666666V149.333333c0-12.8 8.533333-21.333333 21.333333-21.333333H298.666667c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H149.333333C89.6 42.666667 42.666667 89.6 42.666667 149.333333V298.666667c0 25.6 17.066667 42.666667 42.666666 42.666666zM721.066667 661.333333c12.8-21.333333 4.266667-46.933333-17.066667-59.733333-21.333333-12.8-46.933333-4.266667-59.733333 17.066667 0 0-38.4 64-132.266667 64s-132.266667-59.733333-132.266667-64c-12.8-21.333333-38.4-25.6-59.733333-17.066667-21.333333 12.8-25.6 38.4-17.066667 59.733333 4.266667 4.266667 64 106.666667 209.066667 106.666667s204.8-102.4 209.066667-106.666667zM512 512c25.6 0 42.666667-17.066667 42.666667-42.666667V298.666667c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v170.666666c0 25.6 17.066667 42.666667 42.666667 42.666667zM725.333333 384c25.6 0 42.666667-17.066667 42.666667-42.666667V298.666667c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666666 42.666667v42.666666c0 25.6 17.066667 42.666667 42.666666 42.666667zM298.666667 256c-25.6 0-42.666667 17.066667-42.666667 42.666667v42.666666c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666666-42.666667V298.666667c0-25.6-17.066667-42.666667-42.666666-42.666667z" p-id="1535" fill="#4e73df"></path></svg>

js/lang.js

@@ -1,13 +1,13 @@
 var JSLang = {
     "zh": {
-        "tensorAI": "- 人工智能 Tensorflow.js -",
+        "tensorAI": "- 人工智能 -",
         "imageNet": "ImageNet 图像分类",
         "cocoSSD": "CocoSSD 对象检测",
         "deepLab": "DeepLab 图像分割",
-        "blazeFace": "BlazeFace 人脸检测",
-        "mediaPipe": "MediaPipe 手势检测",
+        "blazeFace": "人脸识别",
+        "mediaPipe": "手势检测",
         "MoveNet": "MoveNet 关节点识别",
-        "Bert": "BERT 文本问答",
+        "Bert": "文本问答",
         "SpeechCMD": "SpeechCMD 语音指令",
         "syncInterval": "自动更新频率",
         "sendInterval": "自动发送频率",

js/projects.js

@@ -1066,6 +1066,7 @@ function view_project(projectName, projectType) {
                     'timer': add_timer,
                     'ble': add_ble,
                     'camera': add_camera,
+                    'face': add_face,
                     'input_mic': add_mic,
                     'tinydb': add_tinydb,
                 }
@@ -1741,11 +1742,15 @@ function add_widget() {
     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)
-    /*
+
     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].tensorAI + "</h5>"))
-    var imageNet_add = $("<div class='widget_div'><div><img src='icons/input_keyboard.svg'><span>" + JSLang[lang].imageNet + "</span></div><a class='btn btn-secondary btn-block'><i class='fa fa-plus'></i></a></div>")
-    widget_list.append(imageNet_add)
-    */
+    var blazeFace_add = $("<div class='widget_div'><div><img src='icons/blazeFace.svg'><span>" + JSLang[lang].blazeFace + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
+    widget_list.append(blazeFace_add)
+    var mediaPipe_add = $("<div class='widget_div'><div><img src='icons/mediaPipe.svg'><span>" + JSLang[lang].mediaPipe + "</span></div><a class='btn btn-secondary btn-block'><i class='fa fa-plus'></i></a></div>")
+    widget_list.append(mediaPipe_add)
+    var bertQA_add = $("<div class='widget_div'><div><img src='icons/Bert.svg'><span>" + JSLang[lang].Bert + "</span></div><a class='btn btn-secondary btn-block'><i class='fa fa-plus'></i></a></div>")
+    widget_list.append(bertQA_add)
+
     ble_add.children("a").click(function() {
         d.close().remove()
         var editForm = $('<div class="nnt"/>')
@@ -1841,6 +1846,55 @@ function add_widget() {
         modifyDia.showModal()
     })
 
+    blazeFace_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("face")
+        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() {
+            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_face(title_input.val(), topic_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()
+    })
+
     input_camera_add.children("a").click(function() {
         d.close().remove()
         var editForm = $('<div class="nnt"/>')

js/widgets.js

@@ -5787,7 +5787,7 @@ function add_camera(user_title, user_topic, user_content, user_style, title_styl
             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($('<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'/>")
@@ -5920,6 +5920,253 @@ function add_camera(user_title, user_topic, user_content, user_style, title_styl
         itemdiv.attr('style', user_style)
 }
 
+function add_face(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' style='position:relative'/>")
+    contents.push(cameraDiv)
+    // add a real-time web camera
+    var video = $("<video autoplay style='width:100%;height:100%;'/>")
+    cameraDiv.append(video)
+    // floating canvas on top of the video
+    var canvas = $("<canvas style='position:absolute;top:0;left:0'/>")
+    var canvas2 = $("<canvas style='position:absolute;top:0;left:0;display:none'/>")
+    cameraDiv.append(canvas)
+    cameraDiv.append(canvas2)
+    var ctx = canvas[0].getContext('2d')
+    // 居中显示Loading...
+    
+    var ctx2 = canvas2[0].getContext('2d')
+    navigator.mediaDevices.getUserMedia({
+        video: {
+            width: {
+                ideal: 1000
+            },
+            height: {
+                ideal: 1000
+            },
+            frameRate: {
+                ideal: 60,
+                min: 10
+            }
+        },
+        audio: false
+    }).then(function(stream) {
+        video[0].srcObject = stream
+        ctx.font = "30px Arial"
+        ctx.fillStyle = "#4e73df"
+        ctx.textAlign = "center"
+        ctx.fillText("Loading...", canvas.width() / 2, canvas.height() / 2)
+        blazeface.load().then(function(model) {
+            // 关闭镜面翻转
+            const returnTensors = false;
+            const flipHorizontal = false;
+            const annotateBoxes = true;
+            var fresh = function(){
+            // if video ready
+            if (video[0].readyState >1 && isAlive) {
+                // video element size, not the video resolution
+                canvas[0].height = cameraDiv.height()
+                canvas[0].width = cameraDiv.width()
+                canvas2[0].height = cameraDiv.height()
+                canvas2[0].width = cameraDiv.width()
+                // 在canvas中居中绘制，缩放到合适大小
+                var scale = Math.min(canvas.width() / video[0].videoWidth, canvas.height() / video[0].videoHeight)
+                var x = (canvas.width() - video[0].videoWidth * scale) / 2
+                var y = (canvas.height() - video[0].videoHeight * scale) / 2
+                ctx2.clearRect(0, 0, canvas2.width(), canvas2.height())
+                ctx2.drawImage(video[0], x, y, video[0].videoWidth * scale, video[0].videoHeight * scale)
+                model.estimateFaces(canvas2[0], returnTensors, flipHorizontal, annotateBoxes).then(predictions => {
+                    if (predictions.length > 0) {
+                        for (let i = 0; i < predictions.length; i++) {
+                            if (returnTensors) {
+                                predictions[i].topLeft = predictions[i].topLeft.arraySync();
+                                predictions[i].bottomRight = predictions[i].bottomRight.arraySync();
+                                if (annotateBoxes) {
+                                    predictions[i].landmarks = predictions[i].landmarks.arraySync();
+                                }
+                            }
+                            const start = predictions[i].topLeft;
+                            const end = predictions[i].bottomRight;
+                            const size = [end[0] - start[0], end[1] - start[1]];
+                            ctx.clearRect(0, 0, canvas.width, canvas.height);
+                            // 四角框，标记人脸位置
+                            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+                            ctx.fillRect(start[0], start[1], size[0], size[1]);
+                            if (annotateBoxes) {
+                                const landmarks = predictions[i].landmarks
+                                if(isAlive && isRunning){
+                                    var landmark_dict = {}
+                                    var landmark_names = ['left_eye', 'right_eye', 'nose', 'mouth', 'left_ear', 'right_ear']
+                                    for (let j = 0; j < landmarks.length; j++) {
+                                        const x = landmarks[j][0];
+                                        const y = landmarks[j][1];
+                                        const name = landmark_names[j];
+                                        landmark_dict[name+'_x'] = x
+                                        landmark_dict[name+'_y'] = y
+                                    }
+
+                                    publish(user_topic, JSON.stringify(landmark_dict))
+                                }
+                                ctx.fillStyle = 'blue';
+                                for (let j = 0; j < landmarks.length; j++) {
+                                    const x = landmarks[j][0];
+                                    const y = landmarks[j][1];
+                                    ctx.fillRect(x, y, 5, 5);
+                                }
+                            }
+                        }
+                    }
+                }).catch(err => {
+                    console.log(err)
+                })
+            }
+        }
+        // wait for the video to be loaded
+        setInterval(fresh, 500)
+        })
+        
+    })
+    
+
+    attrs = [
+        ['user-type', 'face'],
+        ['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/blazeFace.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)
+    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())
+                        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())
+            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")