admin/mixio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new-widget

Browse Source
This commit is contained in:
Eason010212
2024-04-06 22:58:53 +08:00
parent 07ffebab06
commit cab7206a24
5 changed files with 110 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/widgets.css
View File

@@ -237,6 +237,9 @@
font-size: 1rem;
border-radius:10px;
border:solid gray 2px;
display: flex;
align-items: center;
justify-content: center;
}
.bulb0{
width: 46px;

2
icons/database.svg
View File

@@ -1 +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="1691160208019" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5253" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 384C307.2 384 85.333333 328.533333 85.333333 213.333333s221.866667-170.666667 426.666667-170.666666 426.666667 55.466667 426.666667 170.666666-221.866667 170.666667-426.666667 170.666667z m0-256C290.133333 128 170.666667 192 170.666667 213.333333s119.466667 85.333333 341.333333 85.333334 341.333333-64 341.333333-85.333334-119.466667-85.333333-341.333333-85.333333zM512 682.666667c-204.8 0-426.666667-55.466667-426.666667-170.666667 0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667c0 21.333333 106.666667 85.333333 341.333333 85.333333s341.333333-64 341.333333-85.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667c0 115.2-221.866667 170.666667-426.666667 170.666667z" p-id="5254" fill="#4e73df"></path><path d="M512 981.333333c-204.8 0-426.666667-55.466667-426.666667-170.666666V213.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v597.333334c0 21.333333 106.666667 85.333333 341.333333 85.333333s341.333333-64 341.333333-85.333333V213.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v597.333334c0 115.2-221.866667 170.666667-426.666667 170.666666z" p-id="5255" fill="#4e73df"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1712415278254" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="11126" width="200" height="200"><path d="M748.93 577.27l-99.22-130.54h198.45l-99.23 130.54z" p-id="11127" fill="#4e73df"/><path d="M877.08 316.39c11.57 0 18.34 5.04 19.98 7.33l-0.5 376.58c-1.64 2.29-8.41 7.32-19.97 7.32H146.92c-11.56 0-18.32-5.03-19.97-7.32l0.5-376.58c1.64-2.29 8.41-7.32 19.97-7.32h729.66m0-60.01H147.42c-44.16 0-79.97 29.68-79.97 66.29l-0.5 378.64c0 36.61 35.8 66.29 79.97 66.29h729.67c44.16 0 79.97-29.68 79.97-66.29l0.5-378.64c-0.03-36.61-35.83-66.29-79.98-66.29z" p-id="11128" fill="#4e73df"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 679 B

35
js/lang.js
View File

@@ -1,5 +1,14 @@
var JSLang = {
"zh": {
"tensorAI": "- 人工智能 Tensorflow.js -",
"imageNet": "ImageNet 图像分类",
"cocoSSD": "CocoSSD 对象检测",
"deepLab": "DeepLab 图像分割",
"blazeFace": "BlazeFace 人脸检测",
"mediaPipe": "MediaPipe 手势检测",
"MoveNet": "MoveNet 关节点识别",
"Bert": "BERT 文本问答",
"SpeechCMD": "SpeechCMD 语音指令",
"syncInterval": "自动更新频率",
"sendInterval": "自动发送频率",
"never": "从不",
@@ -210,12 +219,21 @@ var JSLang = {
"platformList": "已登录平台",
"deviceList": "已连接设备",
"camera": "摄像头",
"mic": "麦克风",
"tinydb": "数据库",
"mic": "语音识别",
"tinydb": "下拉选项",
"resolution": "分辨率",
"fps": "帧率"
},
"tw": {
"tensorAI": "- AI·Tensorflow.js -",
"imageNet": "ImageNet",
"cocoSSD": "CocoSSD",
"deepLab": "DeepLab",
"blazeFace": "BlazeFace",
"mediaPipe": "MediaPipe",
"MoveNet": "MoveNet",
"Bert": "BERT",
"SpeechCMD": "SpeechCMD",
"syncInterval": "自動更新頻率",
"sendInterval": "自動發送頻率",
"never": "從不",
@@ -427,11 +445,20 @@ var JSLang = {
"deviceList": "已連接設備",
"camera": "攝像頭",
"mic": "麥克風",
"tinydb": "數據庫",
"tinydb": "下拉選項",
"resolution": "分辨率",
"fps": "幀率"
},
"en": {
"tensorAI": "- AI·Tensorflow.js -",
"imageNet": "ImageNet",
"cocoSSD": "CocoSSD",
"deepLab": "DeepLab",
"blazeFace": "BlazeFace",
"mediaPipe": "MediaPipe",
"MoveNet": "MoveNet",
"Bert": "BERT",
"SpeechCMD": "SpeechCMD",
"syncInterval": "Auto-sync",
"sendInterval": "Auto-send",
"never": "Never",
@@ -643,7 +670,7 @@ var JSLang = {
"deviceList": "Devices",
"camera": "Camera",
"mic": "Microphone",
"tinydb": "Database",
"tinydb": "Options",
"resolution": "Resolution",
"fps": "FPS"
}

7
js/projects.js
View File

@@ -847,7 +847,7 @@ function view_project(projectName, projectType) {
keyName = userName.slice(1)
userName = 'MixIO_public'
}
client = 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.split(":")[0] + (location.protocol == 'https:' ? ':8084' : ':8083'), {
'clientId': randomClientID,
'username': userName,
'password': projectPass,
@@ -1740,6 +1740,11 @@ 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)
*/
ble_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')

69
js/widgets.js
View File

@@ -42,20 +42,79 @@ function add_block(width, height, contents, attrs) {
else
grid.prepend(itemdiv[0])
})
itemdiv.draggable({
onStopDrag: function() {
var stdLeft = parseInt(itemdiv.css('left')) - (parseInt(itemdiv.css('left')) % 20) + (parseInt(itemdiv.css('left')) % 20 > 10 ? 1 : 0) * 20
var stdTop = parseInt(itemdiv.css('top')) - (parseInt(itemdiv.css('top')) % 20) + (parseInt(itemdiv.css('top')) % 20 > 10 ? 1 : 0) * 20
itemdiv.css('left', stdLeft + 'px')
itemdiv.css('top', stdTop + 'px')
// 对于tmpInnerItems中的所有item，也进行同样的处理
if(itemdiv.attr('user-type') == 'magic')
{
for(var i=0;i<tmpInnerItems.length;i++)
{
var item = $(".item").eq(tmpInnerItems[i])
var left = parseInt(item.css('left')) - (parseInt(item.css('left')) % 20) + (parseInt(item.css('left')) % 20 > 10 ? 1 : 0) * 20
var top = parseInt(item.css('top')) - (parseInt(item.css('top')) % 20) + (parseInt(item.css('top')) % 20 > 10 ? 1 : 0) * 20
item.css('left', left + 'px')
item.css('top', top + 'px')
}
}
tmpInnerItems = []
},
onStartDrag: function(event) {
lastDragX = event.pageX
lastDragY = event.pageY
if(itemdiv.attr('user-type') == 'magic')
{
// 包围在块内部的所有item
tmpInnerItems = []
// magic块的边界坐标
var magicLeft = parseInt(itemdiv.css('left'))
var magicTop = parseInt(itemdiv.css('top'))
var magicRight = magicLeft + parseInt(itemdiv.css('width'))
var magicBottom = magicTop + parseInt(itemdiv.css('height'))
// 遍历所有.item
var items = $(".item")
tmpOriHeight = parseInt(itemdiv.css('height'))
tmpOriWidth = parseInt(itemdiv.css('width'))
for(var i=0;i<items.length;i++)
{
if(items.eq(i).attr('user-type') != 'magic')
{
var item = items.eq(i)
var left = parseInt(item.css('left'))
var top = parseInt(item.css('top'))
var right = left + parseInt(item.css('width'))
var bottom = top + parseInt(item.css('height'))
if(left+5 >= magicLeft && right-5 <= magicRight && top+5 >= magicTop && bottom-5 <= magicBottom)
tmpInnerItems.push(i)
}
}
console.log(tmpInnerItems)
}
},
onDrag: function(event) {
var dx = event.pageX - lastDragX
var dy = event.pageY - lastDragY
lastDragX = event.pageX
lastDragY = event.pageY
var items = $(".item")
if(itemdiv.attr('user-type') == 'magic')
{
if(tmpOriWidth==parseInt(itemdiv.css('width')) && tmpOriHeight==parseInt(itemdiv.css('height')))
for(var i=0;i<tmpInnerItems.length;i++)
{
var item = items.eq(tmpInnerItems[i])
var left = parseInt(item.css('left'))
var top = parseInt(item.css('top'))
item.css('left', left + dx)
item.css('top', top + dy)
}
}
}
})
if(itemdiv.attr('user-type') != 'pixel')
@@ -3768,6 +3827,11 @@ function add_text(user_title, user_topic, user_content, user_style, title_style)
topicDiv.append(topic)
var textDiv = $("<div/>")
textDiv.html(stringendecoder.decodeHtml(user_content))
var minFontSize = 1
var fontSize = 3 - user_content.length / 3
if (fontSize < minFontSize)
fontSize = minFontSize
textDiv.css('font-size', fontSize + 'rem')
textDiv.attr('class', 'mid_screen')
contents.push(textDiv)
attrs = [
@@ -3787,6 +3851,11 @@ function add_text(user_title, user_topic, user_content, user_style, title_style)
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)])
}