lixiaobang
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化html

This commit is contained in:
qiudan 2023-12-08 15:27:41 +08:00
parent c116840922
commit 6b8a4f07d4
2 changed files with 323 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

528
public/VideoWeb/index.html
View File

@ -1,327 +1,349 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us"> <html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Painter</title>
<!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<style>
body,html{
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<body>
<div id="unity-container" style="height: 100%;" class="unity-desktop">
<canvas id="unity-canvas" width=1600 height=900></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<!-- <div id="unity-webgl-logo"></div> -->
<!-- <div id="unity-fullscreen-button"></div> -->
<!-- <div id="unity-build-title">Painter</div> -->
</div>
<div id='black'>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Painter</title>
<!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<body>
<div id="unity-container" style="height: 100%;" class="unity-desktop">
<canvas id="unity-canvas" width=1600 height=900></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div> </div>
</div> </div>
<script> <div id="unity-warning"> </div>
var container = document.querySelector("#unity-container"); <div id="unity-footer">
var canvas = document.querySelector("#unity-canvas"); <!-- <div id="unity-webgl-logo"></div> -->
var loadingBar = document.querySelector("#unity-loading-bar"); <!-- <div id="unity-fullscreen-button"></div> -->
var progressBarFull = document.querySelector("#unity-progress-bar-full"); <!-- <div id="unity-build-title">Painter</div> -->
// var fullscreenButton = document.querySelector("#unity-fullscreen-button"); </div>
var warningBanner = document.querySelector("#unity-warning"); <div id='black'>
var black = document.querySelector("#black");
// Shows a temporary message banner/ribbon for a few seconds, or </div>
// a permanent error message on top of the canvas if type=='error'. </div>
// If type=='warning', a yellow highlight color is used. <script>
// Modify or remove this function to customize the visually presented var container = document.querySelector("#unity-container");
// way that non-critical warnings and error messages are presented to the var canvas = document.querySelector("#unity-canvas");
// user. var loadingBar = document.querySelector("#unity-loading-bar");
function unityShowBanner(msg, type) { var progressBarFull = document.querySelector("#unity-progress-bar-full");
function updateBannerVisibility() { // var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
var black = document.querySelector("#black");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
if (warningBanner) {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
} }
}
if (warningBanner) {
var div = document.createElement('div'); var div = document.createElement('div');
div.innerHTML = msg; div.innerHTML = msg;
warningBanner.appendChild(div); warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;'; if (type == 'error') div.style = 'background: red; padding: 10px;';
else { else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;'; if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function() { setTimeout(function () {
warningBanner.removeChild(div); warningBanner.removeChild(div);
updateBannerVisibility(); updateBannerVisibility();
}, 5000); }, 5000);
} }
updateBannerVisibility(); }
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/APP.loader.js";
var config = {
dataUrl: buildUrl + "/APP.data.unityweb",
frameworkUrl: buildUrl + "/APP.framework.js.unityweb",
codeUrl: buildUrl + "/APP.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "Painter",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
if (container) {
container.className = "unity-mobile";
} }
var buildUrl = "Build";
var loaderUrl = buildUrl + "/APP.loader.js";
var config = {
dataUrl: buildUrl + "/APP.data.unityweb",
frameworkUrl: buildUrl + "/APP.framework.js.unityweb",
codeUrl: buildUrl + "/APP.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "Painter",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
if (canvas) {
canvas.style.width = window.innerWidth + 'px'; canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px'; canvas.style.height = window.innerHeight + 'px';
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
// canvas.style.width = "960px";
// canvas.style.height = "600px";
// canvas.style.width = window.innerWidth + 'px';
// canvas.style.height = window.innerHeight + 'px';
} }
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
// canvas.style.width = "960px";
// canvas.style.height = "600px";
// canvas.style.width = window.innerWidth + 'px';
// canvas.style.height = window.innerHeight + 'px';
}
if (loadingBar) {
loadingBar.style.display = "block"; loadingBar.style.display = "block";
var unity; }
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
if(progressBarFull.style.width==90+"%"){
black.style.display = "block";
}
}).then((unityInstance) => {
unity = unityInstance
loadingBar.style.display = "none"; var unity;
// fullscreenButton.onclick = () => { var script = document.createElement("script");
// unityInstance.SetFullscreen(1); script.src = loaderUrl;
// }; script.onload = () => {
if (canvas) {
createUnityInstance(canvas, config, (progress) => {
if (progressBarFull) {
progressBarFull.style.width = 100 * progress + "%";
if (progressBarFull.style.width == 90 + "%") {
if (black) {
black.style.display = "block";
}
}
}
}).then((unityInstance) => {
unity = unityInstance
if (loadingBar) {
loadingBar.style.display = "none";
}
// fullscreenButton.onclick = () => {
// unityInstance.SetFullscreen(1);
// };
}).catch((message) => { }).catch((message) => {
alert(message); alert('createUnityInstance' + message);
}); });
}; }
//unity初始化 };
function OnSceneLoaded(){ //unity初始化
function OnSceneLoaded() {
if (black) {
black.style.display = "none"; black.style.display = "none";
window.parent.OnScene();
} }
//初始化传离线视频数据功能 window.parent.OnScene();
function lixianVideo(string){
console.log("离线视频数据",string) }
if(unity!=null){ //初始化传离线视频数据功能
unity.SendMessage('AAA','Unity_OfflineDataPrepare', string); function lixianVideo(string) {
} console.log("离线视频数据", string)
if (unity != null) {
unity.SendMessage('AAA', 'Unity_OfflineDataPrepare', string);
} }
//获取ip }
function getIpData(string){ //获取ip
console.log("获取ip",string) function getIpData(string) {
if(unity!=null){ console.log("获取ip", string)
unity.SendMessage('GameManager','SetIP', string); if (unity != null) {
} unity.SendMessage('GameManager', 'SetIP', string);
} }
//获取图像 }
function getDestination(string){ //获取图像
if(unity!=null){ function getDestination(string) {
unity.SendMessage('AAA', 'SendImage', string); if (unity != null) {
} unity.SendMessage('AAA', 'SendImage', string);
} }
}
//获取图像id等数据 //获取图像id等数据
function getData(string){ function getData(string) {
// console.log("string",string) // console.log("string",string)
if(unity!=null){ if (unity != null) {
unity.SendMessage('AAA', 'SendStream', string); unity.SendMessage('AAA', 'SendStream', string);
} }
} }
//获取轨迹方法 //获取轨迹方法
function getGuiJi(string){ function getGuiJi(string) {
if(unity!=null){ if (unity != null) {
unity.SendMessage('AAA', 'SendJT_GuiJi', string); unity.SendMessage('AAA', 'SendJT_GuiJi', string);
} }
} }
//传触发数据 //传触发数据
function getChuFa(string){ function getChuFa(string) {
// console.log("string",string) // console.log("string",string)
if(unity!=null){ if (unity != null) {
unity.SendMessage('AAA', 'SendJT_JianCeQi', string); unity.SendMessage('AAA', 'SendJT_JianCeQi', string);
} }
} }
//获取图形数据 //获取图形数据
function getfigureData(string,string1,string2){ function getfigureData(string, string1, string2) {
// console.log("图形类型",string) // console.log("图形类型",string)
// console.log("图形名称",string1) // console.log("图形名称",string1)
// console.log("图形位置",string2) // console.log("图形位置",string2)
// numberNew 判断2-模拟区，1-画布区 // numberNew 判断2-模拟区，1-画布区
window.parent.getFigure(string,string1,string2,1); window.parent.getFigure(string, string1, string2, 1);
} }
//新增图形传图形id //新增图形传图形id
function postFigureId(string){ function postFigureId(string) {
console.log("图形id",string) console.log("图形id", string)
// if(unity!=null){ // if(unity!=null){
unity.SendMessage("GameManager",'ReceivingPatternId', string); unity.SendMessage("GameManager", 'ReceivingPatternId', string);
//打开新增图形命名弹窗 //打开新增图形命名弹窗
// } // }
} }
//打开修改图形名称弹框 //打开修改图形名称弹框
function modifyTheName(data){ function modifyTheName(data) {
console.log("图形名称弹框",data) console.log("图形名称弹框", data)
window.parent.getModifyTheName(data,1); window.parent.getModifyTheName(data, 1);
} }
//传单个视频id获取到单个视频配置下的所有图形 //传单个视频id获取到单个视频配置下的所有图形
function postVideoId(data){ function postVideoId(data) {
console.log("所有图形id",data) console.log("所有图形id", data)
if(unity!=null){ if (unity != null) {
unity.SendMessage("GameManager",'ReceptionVideoId', data); unity.SendMessage("GameManager", 'ReceptionVideoId', data);
} }
} }
//传修改好的名称 //传修改好的名称
function postFigureName(data){ function postFigureName(data) {
console.log("修改好的名称",data) console.log("修改好的名称", data)
if(unity!=null){ if (unity != null) {
unity.SendMessage("GameManager",'ReceiveModifiedName', data); unity.SendMessage("GameManager", 'ReceiveModifiedName', data);
} }
} }
//新增图形点击取消 //新增图形点击取消
function delFigure(){ function delFigure() {
if(unity!=null){ if (unity != null) {
unity.SendMessage("GameManager",'DestoryMyLine'); unity.SendMessage("GameManager", 'DestoryMyLine');
} }
} }
//获取组件id //获取组件id
function getComponentId(id,type,name){ function getComponentId(id, type, name) {
console.log("id",id) console.log("id", id)
console.log("type",type) console.log("type", type)
console.log("name",name) console.log("name", name)
window.parent.getSingleComponentId(id,type,name); window.parent.getSingleComponentId(id, type, name);
// window.parent.getSingleComponentId('a840492e26354c0a851fecd675e9f59a'); // window.parent.getSingleComponentId('a840492e26354c0a851fecd675e9f59a');
} }
//退出编辑图形 //退出编辑图形
function closeEdit(data){ function closeEdit(data) {
// type,id // type,id
// console.log("type",type) // console.log("type",type)
console.log("data",data) console.log("data", data)
if(unity!=null){ if (unity != null) {
unity.SendMessage("GameManager",'ExitEdit',data); unity.SendMessage("GameManager", 'ExitEdit', data);
} }
} }
//检测器目标数量 //检测器目标数量
function getTargetNumber(string){ function getTargetNumber(string) {
if(unity!=null){ if (unity != null) {
unity.SendMessage('GameManager', 'UnityUpdateTargetNumber', string); unity.SendMessage('GameManager', 'UnityUpdateTargetNumber', string);
} }
} }
//编辑组件名称传名称 //编辑组件名称传名称
function editComponent(data){ function editComponent(data) {
// type,id // type,id
console.log("data",data) console.log("data", data)
if(unity!=null){ if (unity != null) {
unity.SendMessage("GameManager",'Unity_UpdateInstanceName',data); unity.SendMessage("GameManager", 'Unity_UpdateInstanceName', data);
} }
} }
//编辑模拟区域组件交互弹窗 //编辑模拟区域组件交互弹窗
function simulationAreaEdit(id,type,componentType,name){ function simulationAreaEdit(id, type, componentType, name) {
console.log("id",id) console.log("id", id)
console.log("type",type) console.log("type", type)
console.log("组件类型",componentType) console.log("组件类型", componentType)
console.log("组件名称",name) console.log("组件名称", name)
window.parent.getSimulationAreaEdit(id,type,componentType,name,2); window.parent.getSimulationAreaEdit(id, type, componentType, name, 2);
} }
//获取左侧区域删除图形或断面成功后返回的数据 //获取左侧区域删除图形或断面成功后返回的数据
function getdeleData(data){ function getdeleData(data) {
console.log("id",data) console.log("id", data)
if(data != null){ if (data != null) {
window.parent.delSuccess() window.parent.delSuccess()
} }
} }
//新增获取颜色 //新增获取颜色
function addColor(string,string1){ function addColor(string, string1) {
// console.log("i1111",string) // console.log("i1111",string)
// console.log("i2222",string1) // console.log("i2222",string1)
if(unity!=null){ if (unity != null) {
unity.SendMessage("GameManager",'Unity_AllGraphicsNotified'); unity.SendMessage("GameManager", 'Unity_AllGraphicsNotified');
} }
} }
//控制角色权限管理 //控制角色权限管理
function getRoleStatus(roleStatus){ function getRoleStatus(roleStatus) {
console.log(roleStatus,'roleStatus') console.log(roleStatus, 'roleStatus')
if(unity!=null){ if (unity != null) {
unity.SendMessage("GameManager",'Unity_Role_Privilege',roleStatus); unity.SendMessage("GameManager", 'Unity_Role_Privilege', roleStatus);
} }
} }
//传参mqtt //传参mqtt
function ZhuanFaMQTT(topic,msg){ function ZhuanFaMQTT(topic, msg) {
window.parent.getZhuanFaMQTT(topic,msg); window.parent.getZhuanFaMQTT(topic, msg);
// //
} }
//双击接口编辑 //双击接口编辑
function simulationAreaInterfaceEdit(data,data2,data3){ function simulationAreaInterfaceEdit(data, data2, data3) {
console.log("simulationAreaInterfaceEdit",data) console.log("simulationAreaInterfaceEdit", data)
console.log("simulationAreaInterfaceEdit2",data2) console.log("simulationAreaInterfaceEdit2", data2)
console.log("simulationAreaInterfaceEdit3",data3) console.log("simulationAreaInterfaceEdit3", data3)
// if(data!=undefined){ // if(data!=undefined){
// window.parent.getZhuanFaMQTT(data,data2,data3); // window.parent.getZhuanFaMQTT(data,data2,data3);
// } // }
} }
//生成时调用 //生成时调用
function getInterfaceComponentId(data,data2,data3){ function getInterfaceComponentId(data, data2, data3) {
console.log("getInterfaceComponentId",data)//接口组件id
console.log("data2",data2)//组件id
console.log("data3",data3)//类型
if(data!=undefined){
// window.parent.getZhuanFaMQTT(data,data2,data3);
}
}
function AddMonqjktx_Error(data){
console.log("AddMonqjktx_Error",data)
window.parent.AddMonqjktx_Error(data);
}
document.body.appendChild(script);
console.log("getInterfaceComponentId", data) //接口组件id
</script> console.log("data2", data2) //组件id
<style> console.log("data3", data3) //类型
#unity-container.unity-desktop::-webkit-scrollbar{ if (data != undefined) {
display: none; /* Chrome Safari */ // window.parent.getZhuanFaMQTT(data,data2,data3);
} }
</style> }
</body>
</html> function AddMonqjktx_Error(data) {
console.log("AddMonqjktx_Error", data)
window.parent.AddMonqjktx_Error(data);
}
document.body.appendChild(script);
</script>
<style>
#unity-container.unity-desktop::-webkit-scrollbar {
display: none;
/* Chrome Safari */
}
</style>
</body>
</html>

83
public/analysisWeb/index.html
View File

@ -49,18 +49,23 @@
// user. // user.
function unityShowBanner(msg, type) { function unityShowBanner(msg, type) {
function updateBannerVisibility() { function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; if (warningBanner) {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
} }
var div = document.createElement('div'); if (warningBanner) {
div.innerHTML = msg; var div = document.createElement('div');
warningBanner.appendChild(div); div.innerHTML = msg;
if (type == 'error') div.style = 'background: red; padding: 10px;'; warningBanner.appendChild(div);
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;'; if (type == 'error') div.style = 'background: red; padding: 10px;';
setTimeout(function () { else {
warningBanner.removeChild(div); if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
updateBannerVisibility(); setTimeout(function () {
}, 5000); warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
} }
updateBannerVisibility(); updateBannerVisibility();
} }
@ -98,35 +103,42 @@
// To lower canvas resolution on mobile devices to gain some // To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line: // performance, uncomment the following line:
// config.devicePixelRatio = 1; // config.devicePixelRatio = 1;
if (canvas) {
canvas.style.width = window.innerWidth + 'px'; canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px'; canvas.style.height = window.innerHeight + 'px';
}
unityShowBanner('WebGL builds are not supported on mobile devices.'); unityShowBanner('WebGL builds are not supported on mobile devices.');
} else { } else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen: // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
if (canvas) {
canvas.style.width = "100%"; canvas.style.width = "100%";
canvas.style.height = "100%"; canvas.style.height = "100%";
}
}
if (loadingBar) {
loadingBar.style.display = "block";
} }
loadingBar.style.display = "block";
var script = document.createElement("script"); var script = document.createElement("script");
var unityInstanceA var unityInstanceA
script.src = loaderUrl; script.src = loaderUrl;
script.onload = () => { script.onload = () => {
createUnityInstance(canvas, config, (progress) => { if (canvas) {
progressBarFull.style.width = 100 * progress + "%"; createUnityInstance(canvas, config, (progress) => {
}).then((unityInstance) => { progressBarFull.style.width = 100 * progress + "%";
unityInstanceA = unityInstance }).then((unityInstance) => {
loadingBar.style.display = "none"; unityInstanceA = unityInstance
fullscreenButton.onclick = () => { if (loadingBar) {
unityInstance.SetFullscreen(1); loadingBar.style.display = "none";
}; }
}).catch((message) => { fullscreenButton.onclick = () => {
alert(message); unityInstance.SetFullscreen(1);
}); };
}).catch((message) => {
alert('createUnityInstance' + message);
});
}
}; };
//unity初始化 //unity初始化
function OnSceneLoaded() { function OnSceneLoaded() {
@ -136,6 +148,7 @@
function Started() { function Started() {
window.parent.started(); window.parent.started();
} }
function getDianwei(string) { function getDianwei(string) {
unityInstanceA.SendMessage('GameManager', 'ReceptionVideoIdSececeTwo', JSON.stringify(string)); unityInstanceA.SendMessage('GameManager', 'ReceptionVideoIdSececeTwo', JSON.stringify(string));
} }
@ -204,8 +217,8 @@
unityInstanceA.SendMessage('AAA', 'ChosePoint', params); unityInstanceA.SendMessage('AAA', 'ChosePoint', params);
} }
//新增点 //新增点
function addPoint(id,name) { function addPoint(id, name) {
let params = id+','+name let params = id + ',' + name
unityInstanceA.SendMessage('AAA', 'AddPoint', params); unityInstanceA.SendMessage('AAA', 'AddPoint', params);
} }
//删除点 //删除点
@ -217,9 +230,9 @@
unityInstanceA.SendMessage('AAA', 'EditorPoint', params); unityInstanceA.SendMessage('AAA', 'EditorPoint', params);
} }
//完成编辑 //完成编辑
function editorOverPoint(id,name) { function editorOverPoint(id, name) {
let params = id+','+name let params = id + ',' + name
console.log(params,'params'); console.log(params, 'params');
unityInstanceA.SendMessage('AAA', 'EditorOverPoint', params); unityInstanceA.SendMessage('AAA', 'EditorOverPoint', params);
} }
document.body.appendChild(script); document.body.appendChild(script);