diff --git a/js/observe.js b/js/observe.js index 57c6cf8..15572ba 100644 --- a/js/observe.js +++ b/js/observe.js @@ -76,7 +76,8 @@ $(function(){ 'decorate_pic':function(){}, 'magic':add_magic, 'ble': add_ble, - 'pixel': add_pixel + 'pixel': add_pixel, + 'input_mic': add_mic } 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')); diff --git a/js/projects.js b/js/projects.js index a8dace5..79b3a53 100644 --- a/js/projects.js +++ b/js/projects.js @@ -1049,7 +1049,8 @@ function view_project(projectName, projectType) { 'decorate_pic': add_decorate_pic, 'timer': add_timer, 'ble': add_ble, - 'camera': add_camera + 'camera': add_camera, + 'input_mic': add_mic } toolkits[un.attr('user-type')](un.attr('user-title'), un.attr('user-topic'), un.attr('user-content'), un.attr('style'), titleHidden) } @@ -1706,7 +1707,7 @@ function add_widget() { widget_list.append(input_weather_add) var input_camera_add = $("
" + JSLang[lang].camera + "
") widget_list.append(input_camera_add) - var input_mic_add = $("
" + JSLang[lang].mic + "
") + var input_mic_add = $("
" + JSLang[lang].mic + "
") widget_list.append(input_mic_add) var input_tinydb_add = $("
" + JSLang[lang].tinydb + "
") widget_list.append(input_tinydb_add) @@ -2194,6 +2195,55 @@ function add_widget() { modifyDia.showModal() }) + input_mic_add.children("a").click(function() { + d.close().remove() + var editForm = $('
') + editForm.append($('
')) + editForm.append($('
' + JSLang[lang].unitName + '
')) + var title_input_div = $('
') + var title_input = $("") + title_input_div.append(title_input) + editForm.append(title_input_div) + editForm.append($('
' + JSLang[lang].messTopic + '
')) + var topic_input_div = $('
') + var topic_input = $("") + topic_input.val("mic") + topic_input_div.append(topic_input) + editForm.append(topic_input_div) + var bottomDiv = $('
') + var confirmEdit = $('') + 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_mic(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 = $('') + 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_controller_add.children("a").click(function() { d.close().remove() var editForm = $('
') diff --git a/js/widgets.js b/js/widgets.js index c7e6491..be60b9b 100644 --- a/js/widgets.js +++ b/js/widgets.js @@ -1028,7 +1028,7 @@ function add_keyboard(user_title, user_topic, user_content, user_style, title_st ['title-hidden', title_style] ] var keyDiv = $("
") - var messDiv = $("") + var messDiv = $("") messDiv.val(stringendecoder.decodeHtml(user_content)) messDiv.click(function(event) { event.stopPropagation() @@ -1221,6 +1221,243 @@ function add_keyboard(user_title, user_topic, user_content, user_style, title_st } +function add_mic(user_title, user_topic, user_content, user_style, title_style) { + var isAlive = true + var isRecording = false + var contents = [] + var title = $("

" + user_title + "

") + title.attr("hidden", title_style) + contents.push(title) + var topicDiv = $("
") + var topic = $("" + user_topic + "") + topicDiv.append($("")) + topicDiv.append(topic) + attrs = [ + ['user-type', 'input_mic'], + ['user-title', user_title], + ['user-topic', user_topic], + ['user-content', user_content], + ['title-hidden', title_style] + ] + var keyDiv = $("
") + var messDiv = $("") + messDiv.val(stringendecoder.decodeHtml(user_content)) + messDiv.click(function(event) { + event.stopPropagation() + }) + messDiv.bind('mousedown', function(event) { + event.stopPropagation() + }) + messDiv.bind('mouseup', function(event) { + event.stopPropagation() + }) + messDiv.bind('input', function() { + title.parent().parent().attr('user-content', stringendecoder.encodeHtml(messDiv.val())) + }) + keyDiv.append(messDiv) + var sendIcon = $(' 800) + sendIcon.bind('click', function(event) { + event.stopPropagation() + if(!isRecording) + { + sendIcon.removeClass("btn-primary") + sendIcon.addClass("btn-danger") + sendIcon.children().removeClass('fa-microphone') + sendIcon.children().addClass("fa-stop") + // start recording, use web speech api + recognition = new webkitSpeechRecognition(); + recognition.lang = 'zh-CN'; + recognition.continuous = true; + recognition.interimResults = true; + recognition.start(); + recognition.onresult = function(event) { + // update the result + var recordRes = '' + for(var i = 0; i < event.results.length; i++) + recordRes += event.results[i][0].transcript + messDiv.val(recordRes) + } + isRecording = true + } + else + { + sendIcon.removeClass("btn-danger") + sendIcon.addClass("btn-primary") + sendIcon.children().removeClass('fa-stop') + sendIcon.children().addClass("fa-microphone") + recognition.stop(); + publish(topic.text(), messDiv.val()) + isRecording = false + } + }) + else + sendIcon.bind('touchend', function(event) { + event.stopPropagation() + if(!isRecording) + { + sendIcon.removeClass("btn-primary") + sendIcon.addClass("btn-danger") + sendIcon.children().removeClass('fa-microphone') + sendIcon.children().addClass("fa-stop") + // start recording, use web speech api + recognition = new webkitSpeechRecognition(); + recognition.lang = 'zh-CN'; + recognition.continuous = true; + recognition.interimResults = true; + recognition.start(); + recognition.onresult = function(event) { + // update the result + var recordRes = '' + for(var i = 0; i < event.results.length; i++) + recordRes += event.results[i][0].transcript + messDiv.val(recordRes) + } + isRecording = true + + } + else + { + sendIcon.removeClass("btn-danger") + sendIcon.addClass("btn-primary") + sendIcon.children().removeClass('fa-stop') + sendIcon.children().addClass("fa-microphone") + recognition.stop(); + publish(topic.text(), messDiv.val()) + isRecording = false + } + }) + contents.push(keyDiv) + var itemdiv = add_block(3, 1, 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 = $('
') + editForm.append($('
')) + editForm.append($('
' + JSLang[lang].unitName + '
')) + var title_input_div = $('
') + var title_input = $("") + title_input_div.append(title_input) + editForm.append(title_input_div) + editForm.append($('
' + JSLang[lang].messTopic + '
')) + var topic_input_div = $('
') + var topic_input = $("") + topic_input_div.append(topic_input) + editForm.append(topic_input_div) + var bottomDiv = $('
') + var confirmEdit = $('') + 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 = $('') + 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 = $('') + var deleteButton = $('') + var bubble = $('
') + 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()) + 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_bulb(user_title, user_topic, user_content, user_style, title_style) { var isAlive = true var contents = []