html-page
This commit is contained in:
严浩
@ -11,6 +11,7 @@
|
|||||||
"**/konva.2.4.2.min.js",
|
"**/konva.2.4.2.min.js",
|
||||||
"**/konva.2.min.js",
|
"**/konva.2.min.js",
|
||||||
"**/waterfallwidget.js",
|
"**/waterfallwidget.js",
|
||||||
"**/colormapwidget.js"
|
"**/colormapwidget.js",
|
||||||
|
"public/**"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
import pluginVitest from '@vitest/eslint-plugin';
|
import pluginVitest from '@vitest/eslint-plugin';
|
||||||
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
|
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
|
||||||
import { configureVueProject, defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
|
import { configureVueProject, defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
|
||||||
import eslintPluginImportX from 'eslint-plugin-import-x';
|
import { flatConfigs as eslintPluginImportX_flatConfigs } from 'eslint-plugin-import-x';
|
||||||
import oxlint from 'eslint-plugin-oxlint';
|
import oxlint from 'eslint-plugin-oxlint';
|
||||||
import perfectionist from 'eslint-plugin-perfectionist';
|
import perfectionist from 'eslint-plugin-perfectionist';
|
||||||
import eslintPluginUnicorn from 'eslint-plugin-unicorn';
|
import eslintPluginUnicorn from 'eslint-plugin-unicorn';
|
||||||
@ -38,6 +38,7 @@ const _ignores = [
|
|||||||
'**/konva.*.min.js',
|
'**/konva.*.min.js',
|
||||||
'**/waterfallwidget.js',
|
'**/waterfallwidget.js',
|
||||||
'**/colormapwidget.js',
|
'**/colormapwidget.js',
|
||||||
|
'public/**',
|
||||||
]),
|
]),
|
||||||
// <<<
|
// <<<
|
||||||
];
|
];
|
||||||
@ -75,7 +76,7 @@ export default defineConfigWithVueTs(
|
|||||||
// endregion <<< eslint-plugin-unicorn <<<
|
// endregion <<< eslint-plugin-unicorn <<<
|
||||||
|
|
||||||
// region >>> eslint-plugin-import-x >>>
|
// region >>> eslint-plugin-import-x >>>
|
||||||
eslintPluginImportX.flatConfigs.recommended,
|
eslintPluginImportX_flatConfigs.recommended,
|
||||||
{
|
{
|
||||||
rules: {
|
rules: {
|
||||||
'import-x/no-unresolved': 'off', // https://github.com/pzmosquito/eslint-import-resolver-vite/blob/67da5e259ee4c9da4c44d81b93364ae2777d00eb/index.js#L100
|
'import-x/no-unresolved': 'off', // https://github.com/pzmosquito/eslint-import-resolver-vite/blob/67da5e259ee4c9da4c44d81b93364ae2777d00eb/index.js#L100
|
||||||
@ -91,10 +92,10 @@ export default defineConfigWithVueTs(
|
|||||||
{
|
{
|
||||||
rules: {
|
rules: {
|
||||||
'perfectionist/sort-classes': 'off',
|
'perfectionist/sort-classes': 'off',
|
||||||
"perfectionist/sort-interfaces": 'off',
|
'perfectionist/sort-interfaces': 'off',
|
||||||
'perfectionist/sort-objects': 'off',
|
'perfectionist/sort-objects': 'off',
|
||||||
'perfectionist/sort-imports': ['error'],
|
'perfectionist/sort-imports': ['error'],
|
||||||
'perfectionist/sort-modules':'off'
|
'perfectionist/sort-modules': 'off',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// endregion <<< eslint-plugin-perfectionist <<<
|
// endregion <<< eslint-plugin-perfectionist <<<
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<html lang="zh-CN" data-build-time="%VITE_BUILD_TIME%" data-commit="%VITE_BUILD_COMMIT%">
|
<html lang="zh-CN" data-build-time="%VITE_BUILD_TIME%" data-commit="%VITE_BUILD_COMMIT%">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
|
<!-- <link rel="icon" href="data:;base64,iVBORw0KGgo=" /> -->
|
||||||
<meta
|
<meta
|
||||||
name="viewport"
|
name="viewport"
|
||||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
81
public/html-page/ConstellationDiagram.html
Normal file
81
public/html-page/ConstellationDiagram.html
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>星座图的html页面</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="planispherewidget-container"></div>
|
||||||
|
<script src="./lib/konva.2.4.2.min.js"></script>
|
||||||
|
<script src="./lib/jquery.3.6.0.min.js"></script>
|
||||||
|
<script src="./planispherewidget.js"></script>
|
||||||
|
<script>
|
||||||
|
window.planisphereWidgetInstance = null;
|
||||||
|
|
||||||
|
// 监听来自父窗口的消息
|
||||||
|
window.addEventListener('message', (event) => {
|
||||||
|
// 强烈建议在此处添加来源验证 (event.origin) 以提高安全性
|
||||||
|
// 例如: if (event.origin !== 'YOUR_VUE_APP_ORIGIN') return;
|
||||||
|
|
||||||
|
if (!event.data) return; // 如果没有数据，则忽略
|
||||||
|
|
||||||
|
// 处理初始化消息
|
||||||
|
if (event.data.type === 'INIT_WIDGET') {
|
||||||
|
console.log('HTML 页面：收到初始化指令');
|
||||||
|
if (!window.planisphereWidgetInstance) {
|
||||||
|
// 创建 PlanisphereWidget 实例，指定容器 ID
|
||||||
|
window.planisphereWidgetInstance = new PlanisphereWidget('planispherewidget-container', {
|
||||||
|
// 从 planispherewidget.js 获取的默认值
|
||||||
|
bg_color: '#27293D', // 背景色
|
||||||
|
fore_color: '#CCCCCC', // 前景色
|
||||||
|
coor_color: '#1B1B24', // 坐标颜色
|
||||||
|
border_color: '#CCCCCC', // 边框颜色
|
||||||
|
wave_color: '#1D8CF8', // 波形颜色
|
||||||
|
margin_left: 0, // 左边距
|
||||||
|
margin_top: 0, // 上边距
|
||||||
|
// 您可以在这里覆盖上面的默认值，或者从 event.data.options 获取配置
|
||||||
|
// ...event.data.options // 如果 Vue 组件传递了配置
|
||||||
|
});
|
||||||
|
console.log('HTML 页面：PlanisphereWidget 已实例化');
|
||||||
|
} else {
|
||||||
|
console.log('HTML 页面：PlanisphereWidget 已存在，无需重复实例化');
|
||||||
|
}
|
||||||
|
// 可选：通知父窗口已准备好接收数据
|
||||||
|
// if (window.parent !== window) {
|
||||||
|
// window.parent.postMessage({ type: 'WIDGET_READY' }, '*'); // 使用更具体的 targetOrigin
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
// 处理数据馈送消息
|
||||||
|
else if (event.data.type === 'FEED_DATA') {
|
||||||
|
if (window.planisphereWidgetInstance) {
|
||||||
|
console.log('HTML 页面：收到来自父窗口的数据:', event.data.payload);
|
||||||
|
if (Array.isArray(event.data.payload)) {
|
||||||
|
window.planisphereWidgetInstance.feed(event.data.payload);
|
||||||
|
} else {
|
||||||
|
console.error('HTML 页面：收到的数据格式无效:', event.data.payload);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.warn('HTML 页面：Widget 尚未初始化，无法处理 FEED_DATA');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden; /* 防止滚动条出现 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保容器占满整个 iframe */
|
||||||
|
body > div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</html>
|
||||||
@ -8,9 +8,9 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="waterfall" style="width: 100%; height: 100%"></div>
|
<div id="waterfall" style="width: 100%; height: 100%"></div>
|
||||||
<script src="konva.2.4.2.min.js"></script>
|
<script src="./lib/konva.2.4.2.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
||||||
<script src="jquery.resize.js"></script>
|
<script src="./lib/jquery.resize.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
|
||||||
<script src="colormapwidget.js"></script>
|
<script src="colormapwidget.js"></script>
|
||||||
<script src="waterfallwidget.js"></script>
|
<script src="waterfallwidget.js"></script>
|
||||||
2
public/html-page/lib/jquery.3.6.0.min.js
vendored
Normal file
2
public/html-page/lib/jquery.3.6.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
74
public/html-page/lib/jquery.resize.js
Normal file
74
public/html-page/lib/jquery.resize.js
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
(function ($, h, c) {
|
||||||
|
var a = $([]),
|
||||||
|
e = $.resize = $.extend($.resize, {}),
|
||||||
|
i,
|
||||||
|
k = "setTimeout",
|
||||||
|
j = "resize",
|
||||||
|
d = j + "-special-event",
|
||||||
|
b = "delay",
|
||||||
|
f = "throttleWindow";
|
||||||
|
e[b] = 250;
|
||||||
|
e[f] = true;
|
||||||
|
$.event.special[j] = {
|
||||||
|
setup: function () {
|
||||||
|
if (!e[f] && this[k]) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
var l = $(this);
|
||||||
|
a = a.add(l);
|
||||||
|
$.data(this, d, {
|
||||||
|
w: l.width(),
|
||||||
|
h: l.height()
|
||||||
|
});
|
||||||
|
if (a.length === 1) {
|
||||||
|
g();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
teardown: function () {
|
||||||
|
if (!e[f] && this[k]) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
var l = $(this);
|
||||||
|
a = a.not(l);
|
||||||
|
l.removeData(d);
|
||||||
|
if (!a.length) {
|
||||||
|
clearTimeout(i);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
add: function (l) {
|
||||||
|
if (!e[f] && this[k]) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
var n;
|
||||||
|
function m(s, o, p) {
|
||||||
|
var q = $(this),
|
||||||
|
r = $.data(this, d) || {};
|
||||||
|
r.w = o !== c ? o : q.width();
|
||||||
|
r.h = p !== c ? p : q.height();
|
||||||
|
n.apply(this, arguments);
|
||||||
|
}
|
||||||
|
if ($.isFunction(l)) {
|
||||||
|
n = l;
|
||||||
|
return m;
|
||||||
|
} else {
|
||||||
|
n = l.handler;
|
||||||
|
l.handler = m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function g() {
|
||||||
|
i = h[k](function () {
|
||||||
|
a.each(function () {
|
||||||
|
var n = $(this),
|
||||||
|
m = n.width(),
|
||||||
|
l = n.height(),
|
||||||
|
o = $.data(this, d);
|
||||||
|
if (m !== o.w || l !== o.h) {
|
||||||
|
n.trigger(j, [o.w = m, o.h = l]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
g();
|
||||||
|
},
|
||||||
|
e[b]);
|
||||||
|
}
|
||||||
|
})(jQuery, this);
|
||||||
7380
public/html-page/lib/konva.2.4.2.min.js
vendored
Normal file
7380
public/html-page/lib/konva.2.4.2.min.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
428
public/html-page/planispherewidget.js
Normal file
428
public/html-page/planispherewidget.js
Normal file
@ -0,0 +1,428 @@
|
|||||||
|
class PlanisphereWidget {
|
||||||
|
constructor(id, options) {
|
||||||
|
console.log("PlanisphereWidget " + id);
|
||||||
|
|
||||||
|
this.options = options;
|
||||||
|
this.container = document.getElementById(id);
|
||||||
|
this.bg_color = (options && options.bg_color) ? options.bg_color : '#27293D';
|
||||||
|
this.fore_color = (options && options.bg_color) ? options.bg_color : '#CCCCCC';
|
||||||
|
this.coor_color = (options && options.coor_color) ? options.coor_color : '#1B1B24';
|
||||||
|
this.border_color = (options && options.border_color) ? options.border_color : '#CCCCCC';
|
||||||
|
this.wave_color = (options && options.wave_color) ? options.wave_color : '#1D8CF8';
|
||||||
|
|
||||||
|
this.margin_left = (options && options.margin_left) ? options.margin_left : 0;
|
||||||
|
this.margin_top = (options && options.margin_top) ? options.margin_top : 0;
|
||||||
|
|
||||||
|
this.stage = new Konva.Stage({
|
||||||
|
container: id,
|
||||||
|
width: this.container.clientWidth || 500,
|
||||||
|
height: this.container.clientHeight || 500
|
||||||
|
});
|
||||||
|
this.layer_coor = new Konva.Layer();
|
||||||
|
this.layer_coor.hitGraphEnabled(false);
|
||||||
|
this.layer_wave = new Konva.Layer();
|
||||||
|
this.layer_wave.hitGraphEnabled(false);
|
||||||
|
|
||||||
|
this.stage.add(this.layer_coor);
|
||||||
|
this.stage.add(this.layer_wave);
|
||||||
|
|
||||||
|
this.canvas = document.createElement("canvas");
|
||||||
|
this.ctx_canvas = this.canvas.getContext("2d");
|
||||||
|
this.ctx_canvas.fillStyle = this.bg_color;
|
||||||
|
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
this.initResize();
|
||||||
|
|
||||||
|
this.dAlpha = false;
|
||||||
|
this.d1 = null;
|
||||||
|
this.d2 = null;
|
||||||
|
this.d3 = null;
|
||||||
|
this.d4 = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
if (this.container.clientHeight === 0) return;
|
||||||
|
this.stage.setWidth(this.container.clientWidth);
|
||||||
|
this.stage.setHeight(this.container.clientWidth);
|
||||||
|
this.area_x = this.margin_left;
|
||||||
|
this.area_y = this.margin_top;
|
||||||
|
this.area_width = this.stage.getWidth() - this.margin_left;
|
||||||
|
this.area_height = this.stage.getHeight() - this.margin_top;
|
||||||
|
|
||||||
|
this.drawCoor();
|
||||||
|
|
||||||
|
this.canvas.height = this.area_height;
|
||||||
|
this.canvas.width = this.area_width;
|
||||||
|
this.ctx_canvas.strokeStyle = this.wave_color;
|
||||||
|
this.ctx_canvas.lineWidth = 1;
|
||||||
|
|
||||||
|
this.pointer = new Konva.Circle({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
radius: 1,
|
||||||
|
stroke: this.wave_color,
|
||||||
|
strokeWidth: 1
|
||||||
|
});
|
||||||
|
this.pointer.cache();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
drawCoor() {
|
||||||
|
var layer = this.layer_coor;
|
||||||
|
layer.destroyChildren();
|
||||||
|
|
||||||
|
var len = this.area_width;
|
||||||
|
var rval = this.area_width / 2;
|
||||||
|
layer.add(new Konva.Rect({
|
||||||
|
x: this.area_x,
|
||||||
|
y: this.area_y,
|
||||||
|
width: this.area_width,
|
||||||
|
height: this.area_height,
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1
|
||||||
|
}));
|
||||||
|
|
||||||
|
layer.add(new Konva.Line({
|
||||||
|
points: [0, 0, this.area_width, this.area_height],
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1,
|
||||||
|
lineJoin: 'round',
|
||||||
|
dash: [1, 1]
|
||||||
|
}));
|
||||||
|
layer.add(new Konva.Line({
|
||||||
|
points: [this.area_width, 0, 0, this.area_height],
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1,
|
||||||
|
lineJoin: 'round',
|
||||||
|
dash: [1, 1]
|
||||||
|
}));
|
||||||
|
|
||||||
|
layer.add(new Konva.Line({
|
||||||
|
points: [0, rval, this.area_width, rval],
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1,
|
||||||
|
lineJoin: 'round',
|
||||||
|
dash: [1, 1]
|
||||||
|
}));
|
||||||
|
layer.add(new Konva.Line({
|
||||||
|
points: [0, rval / 2, this.area_width, rval / 2],
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1,
|
||||||
|
lineJoin: 'round',
|
||||||
|
dash: [1, 1]
|
||||||
|
}));
|
||||||
|
layer.add(new Konva.Line({
|
||||||
|
points: [0, rval / 2 * 3, this.area_width, rval / 2 * 3],
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1,
|
||||||
|
lineJoin: 'round',
|
||||||
|
dash: [1, 1]
|
||||||
|
}));
|
||||||
|
|
||||||
|
///
|
||||||
|
layer.add(new Konva.Line({
|
||||||
|
points: [rval, 0, rval, len],
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1,
|
||||||
|
lineJoin: 'round',
|
||||||
|
dash: [1, 1]
|
||||||
|
}));
|
||||||
|
layer.add(new Konva.Line({
|
||||||
|
points: [rval / 2, 0, rval / 2, len],
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1,
|
||||||
|
lineJoin: 'round',
|
||||||
|
dash: [1, 1]
|
||||||
|
}));
|
||||||
|
layer.add(new Konva.Line({
|
||||||
|
points: [rval / 2 * 3, 0, rval / 2 * 3, len],
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1,
|
||||||
|
lineJoin: 'round',
|
||||||
|
dash: [1, 1]
|
||||||
|
}));
|
||||||
|
layer.add(new Konva.Circle({
|
||||||
|
x: rval,
|
||||||
|
y: rval,
|
||||||
|
radius: rval,
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1
|
||||||
|
}));
|
||||||
|
layer.add(new Konva.Circle({
|
||||||
|
x: rval,
|
||||||
|
y: rval,
|
||||||
|
radius: rval / 2,
|
||||||
|
stroke: this.border_color,
|
||||||
|
strokeWidth: 1
|
||||||
|
}));
|
||||||
|
layer.batchDraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
setViewMode(vm) {
|
||||||
|
if (vm == 3) {//0=星座图，3=余晖图。2021.03.31李伟添加；
|
||||||
|
this.dAlpha = true;
|
||||||
|
vm = 0;
|
||||||
|
} else {
|
||||||
|
this.dAlpha = false;
|
||||||
|
}
|
||||||
|
this.viewmodel = vm;
|
||||||
|
|
||||||
|
this.clear();
|
||||||
|
}
|
||||||
|
//星座图
|
||||||
|
feed(d, di, dq) {
|
||||||
|
if (!this.viewmodel || this.viewmodel == 0) {
|
||||||
|
this.drawWave_vector(d);
|
||||||
|
// this.drawWave_planis(d);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//矢量图
|
||||||
|
feedVector(d) {
|
||||||
|
if (!this.viewmodel || this.viewmodel == 0) {
|
||||||
|
this.drawWave_vector(d);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//眼图
|
||||||
|
feedIQ(di, dq) {
|
||||||
|
if (this.viewmodel == 1 && di != null) {
|
||||||
|
this.drawIQ(di);
|
||||||
|
}
|
||||||
|
else if (this.viewmodel == 2 && dq != null) {
|
||||||
|
this.drawIQ(dq);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
drawIQ(IQBuff) {
|
||||||
|
this.clear();
|
||||||
|
for (var j = 0; j < IQBuff.length; j++) {
|
||||||
|
this.drawWave_eye(IQBuff[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
clear() {
|
||||||
|
this.imgData = null;
|
||||||
|
this.drawWave_planis([]);
|
||||||
|
this.drawWave_vector([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
drawWave_eye(d) {
|
||||||
|
// console.log("in drawWave_eye" + d.length);
|
||||||
|
var layer = this.layer_wave;
|
||||||
|
|
||||||
|
var width = this.area_width;
|
||||||
|
var height = this.area_height;
|
||||||
|
var rwidth = width / 2;
|
||||||
|
var rHeight = height / 2;
|
||||||
|
|
||||||
|
var ctx_canvas = layer.getContext();
|
||||||
|
ctx_canvas.strokeStyle = this.wave_color;
|
||||||
|
ctx_canvas.lineWidth = 1;
|
||||||
|
ctx_canvas.beginPath();
|
||||||
|
|
||||||
|
for (var n = 0; n < d.length; n++) {
|
||||||
|
//var x = Math.floor(width*(1-1/1.4)/2+ n * width / d.length / 1.4);
|
||||||
|
var x = Math.floor( n * width / d.length );
|
||||||
|
var y = Math.floor(rHeight + d[n] * rHeight / 1.4);
|
||||||
|
|
||||||
|
if (n == 0) {
|
||||||
|
ctx_canvas.moveTo(x, y);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ctx_canvas.lineTo(x, y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx_canvas.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
drawWave_planis(d) {
|
||||||
|
//console.log("in plan" + d.length);
|
||||||
|
var layer = this.layer_wave;
|
||||||
|
|
||||||
|
var width = this.getDrawWHByPixelRatio(this.area_width) ;
|
||||||
|
var height = this.getDrawWHByPixelRatio(this.area_height);
|
||||||
|
var rwidth = width / 2;
|
||||||
|
var rHeight = height / 2;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//不显示的时候不报错
|
||||||
|
if (!width || !height||width == 0 || height == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var context = layer.getContext();
|
||||||
|
context.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
|
var imgData = context.createImageData(width, height);
|
||||||
|
var dlen = imgData.data.length;
|
||||||
|
//2021.03.31 李伟增加余晖效果
|
||||||
|
if (this.dAlpha && d) {
|
||||||
|
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d4, 32);
|
||||||
|
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d3, 32);
|
||||||
|
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d2, 64);
|
||||||
|
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d1, 128);
|
||||||
|
this.d4 = this.d3;
|
||||||
|
this.d3 = this.d2;
|
||||||
|
this.d2 = this.d1;
|
||||||
|
this.d1 = d;
|
||||||
|
}
|
||||||
|
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, d, 255);
|
||||||
|
/*
|
||||||
|
for (var n = 0; n < d.length; n++) {
|
||||||
|
|
||||||
|
//console.log(rwidth+d[n][0] * rwidth);
|
||||||
|
|
||||||
|
var x = Math.floor(rwidth + d[n][0] * rwidth/1.4);
|
||||||
|
var y = Math.floor(rHeight+ d[n][1] * rHeight/1.4);
|
||||||
|
|
||||||
|
var p = ( y * width + x )* 4;
|
||||||
|
|
||||||
|
this.setWaveColor(imgData, p, dlen,width*4);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
context.putImageData(imgData, 0, 0);
|
||||||
|
}
|
||||||
|
drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, d, a) {
|
||||||
|
if (!d)
|
||||||
|
return;
|
||||||
|
for (var n = 0; n < d.length; n++) {
|
||||||
|
|
||||||
|
//console.log(rwidth+d[n][0] * rwidth);
|
||||||
|
|
||||||
|
var x = Math.floor(rwidth + d[n][0] * rwidth / 1.4);
|
||||||
|
var y = Math.floor(rHeight + d[n][1] * rHeight / 1.4);
|
||||||
|
|
||||||
|
var p = (y * width + x) * 4;
|
||||||
|
|
||||||
|
this.setWaveColor(imgData, p, dlen, width * 4, a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
drawWave_vector(d) {
|
||||||
|
|
||||||
|
var maxLine = 100;
|
||||||
|
|
||||||
|
var dlen = Math.min(maxLine, d.length);
|
||||||
|
|
||||||
|
var layer = this.layer_wave;
|
||||||
|
|
||||||
|
var width = this.area_width;
|
||||||
|
var height = this.area_height;
|
||||||
|
var rwidth = width / 2;
|
||||||
|
var rHeight = height / 2;
|
||||||
|
|
||||||
|
//不显示的时候不报错
|
||||||
|
if (!width || !height || width == 0 || height == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var context = layer.getContext();
|
||||||
|
context.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
|
var ctx_canvas = layer.getContext();
|
||||||
|
ctx_canvas.strokeStyle = this.wave_color;
|
||||||
|
ctx_canvas.lineWidth = 1;
|
||||||
|
ctx_canvas.beginPath();
|
||||||
|
|
||||||
|
for (var n = 0; n < dlen; n++) {
|
||||||
|
var x = Math.floor(rwidth + d[n][0] * rwidth / 1.2);
|
||||||
|
var y = Math.floor(rHeight + d[n][1] * rHeight / 1.2);
|
||||||
|
if (n == 0) {
|
||||||
|
ctx_canvas.moveTo(x, y);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ctx_canvas.lineTo(x, y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx_canvas.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*像素单位转css单位,该函数返回当前浏览器缩放比例所影响的 x y width height 的绘图位置
|
||||||
|
仅适用putImageData getImageData等函数*/
|
||||||
|
getDrawWHByPixelRatio(xory) {
|
||||||
|
if (xory == 0) return 0;
|
||||||
|
if (!xory) return xory;
|
||||||
|
var ret = Math.ceil(window.devicePixelRatio * xory);
|
||||||
|
//console.log(`xory=${xory} ratio=${window.devicePixelRatio} ret=${ret}`);
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
setWaveColor_thin(imgData, p, dlen, rowlen) {
|
||||||
|
var dp = p + rowlen;
|
||||||
|
if (p < 0) return;
|
||||||
|
if (dp + 11 >= dlen) return;
|
||||||
|
|
||||||
|
imgData.data[p] = 33;
|
||||||
|
imgData.data[p + 1] = 129;
|
||||||
|
imgData.data[p + 2] = 247;
|
||||||
|
imgData.data[p + 3] = 255;
|
||||||
|
|
||||||
|
}
|
||||||
|
setWaveColor(imgData, p, dlen, rowlen, a = 255) {//2021.03.31 李伟增加余晖效果 a=alpha
|
||||||
|
var dp = p + rowlen;
|
||||||
|
if (p < 0) return;
|
||||||
|
if (dp + 11 >= dlen) return;
|
||||||
|
|
||||||
|
var r = 33;
|
||||||
|
var g = 129;
|
||||||
|
var b = 247;
|
||||||
|
if (a != 255) {
|
||||||
|
r = 0;
|
||||||
|
g = 255;
|
||||||
|
b = 0;
|
||||||
|
}
|
||||||
|
//console.log(a);
|
||||||
|
imgData.data[p] = r;
|
||||||
|
imgData.data[p + 1] = g;
|
||||||
|
imgData.data[p + 2] = b;
|
||||||
|
imgData.data[p + 3] = a;//255;//2021.03.31 李伟增加余晖效果
|
||||||
|
|
||||||
|
imgData.data[p + 4] = r;
|
||||||
|
imgData.data[p + 5] = g;
|
||||||
|
imgData.data[p + 6] = b;
|
||||||
|
imgData.data[p + 7] = a;//255;
|
||||||
|
|
||||||
|
imgData.data[p + 8] = r;
|
||||||
|
imgData.data[p + 9] = g;
|
||||||
|
imgData.data[p + 10] = b;
|
||||||
|
imgData.data[p + 11] = a;//255;
|
||||||
|
|
||||||
|
|
||||||
|
imgData.data[dp] = r;
|
||||||
|
imgData.data[dp + 1] = g;
|
||||||
|
imgData.data[dp + 2] = b;
|
||||||
|
imgData.data[dp + 3] = a;//255;
|
||||||
|
|
||||||
|
imgData.data[dp + 4] = r;
|
||||||
|
imgData.data[dp + 5] = g;
|
||||||
|
imgData.data[dp + 6] = b;
|
||||||
|
imgData.data[dp + 7] = a;//255;
|
||||||
|
|
||||||
|
imgData.data[dp + 8] = r;
|
||||||
|
imgData.data[dp + 9] = g;
|
||||||
|
imgData.data[dp + 10] = b;
|
||||||
|
imgData.data[dp + 11] = a;//255;
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.imgData = null;
|
||||||
|
this.stage.destroy();
|
||||||
|
this.color_map = null;
|
||||||
|
}
|
||||||
|
dispose() {
|
||||||
|
console.log("dispose wfmin");
|
||||||
|
this.destroy();
|
||||||
|
}
|
||||||
|
initResize() {
|
||||||
|
var _self = this;
|
||||||
|
$(this.container).resize(function () {
|
||||||
|
var target = this;
|
||||||
|
if (target.resizeFlag) {
|
||||||
|
clearTimeout(target.resizeFlag);
|
||||||
|
}
|
||||||
|
target.resizeFlag = setTimeout(function () {
|
||||||
|
_self.init();
|
||||||
|
target.resizeFlag = null;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
100
src/components/html-page/IframeConstellationDiagram.vue
Normal file
100
src/components/html-page/IframeConstellationDiagram.vue
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps<{
|
||||||
|
// 定义传入的数据类型
|
||||||
|
data: Array<[number, number]>;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// 获取 iframe 的 DOM 引用
|
||||||
|
const iframeRef = ref<HTMLIFrameElement | null>(null);
|
||||||
|
|
||||||
|
// iframe 的 src URL
|
||||||
|
const src = computed(() => import.meta.env.BASE_URL + 'html-page/ConstellationDiagram.html');
|
||||||
|
|
||||||
|
// 标记 iframe 是否已加载完成并已发送初始化指令
|
||||||
|
const isIframeInitialized = ref(false);
|
||||||
|
|
||||||
|
// iframe 加载完成后的回调
|
||||||
|
function onIframeLoad() {
|
||||||
|
console.log('Vue 组件：iframe 已加载');
|
||||||
|
// 发送初始化指令给 iframe
|
||||||
|
if (iframeRef.value?.contentWindow) {
|
||||||
|
console.log('Vue 组件：向 iframe 发送 INIT_WIDGET 指令');
|
||||||
|
// targetOrigin 设置为 '*' 为了简单，生产环境应指定确切来源
|
||||||
|
iframeRef.value.contentWindow.postMessage({ type: 'INIT_WIDGET' }, '*');
|
||||||
|
isIframeInitialized.value = true; // 标记已发送初始化指令
|
||||||
|
|
||||||
|
// 发送初始数据（如果已有）
|
||||||
|
// 稍微延迟发送，给 iframe 一点时间处理 INIT_WIDGET
|
||||||
|
// 注意：这是一种简化处理，更健壮的方式是等待 iframe 回复 WIDGET_READY 消息
|
||||||
|
setTimeout(() => {
|
||||||
|
if (props.data && props.data.length > 0 && isIframeInitialized.value) {
|
||||||
|
console.log('Vue 组件：发送初始数据');
|
||||||
|
sendDataToIframe(props.data);
|
||||||
|
}
|
||||||
|
}, 0); // 延迟 100 毫秒，可以根据实际情况调整
|
||||||
|
} else {
|
||||||
|
console.error('Vue 组件：无法访问 iframe 的 contentWindow');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将数据发送到 iframe 的函数
|
||||||
|
function sendDataToIframe(payload: Array<[number, number]>) {
|
||||||
|
// 确保 iframe 存在、其 contentWindow 可访问且已发送初始化指令
|
||||||
|
if (iframeRef.value?.contentWindow && isIframeInitialized.value) {
|
||||||
|
console.log('Vue 组件：向 iframe 发送数据:', payload);
|
||||||
|
iframeRef.value.contentWindow.postMessage({ type: 'FEED_DATA', payload }, '*');
|
||||||
|
} else {
|
||||||
|
console.warn('Vue 组件：iframe 未初始化或数据无效，无法发送 FEED_DATA 消息。');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听 props.data 的变化
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(newData) => {
|
||||||
|
// 确保新数据有效且 iframe 已初始化
|
||||||
|
if (newData && newData.length > 0 && isIframeInitialized.value) {
|
||||||
|
// 直接发送更新后的数据
|
||||||
|
sendDataToIframe(newData);
|
||||||
|
} else if (!isIframeInitialized.value) {
|
||||||
|
console.log('Vue 组件：数据已更改，但 iframe 尚未初始化。初始数据将在加载并初始化后发送。');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true, // 保持深度监听，以防 data 内部变化
|
||||||
|
immediate: false, // 不在初始渲染时立即执行，等待 iframe 加载和初始化
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// 可选：监听来自 iframe 的 WIDGET_READY 消息以实现更精确的控制
|
||||||
|
// onMounted(() => {
|
||||||
|
// window.addEventListener('message', handleIframeMessage);
|
||||||
|
// });
|
||||||
|
// onUnmounted(() => {
|
||||||
|
// window.removeEventListener('message', handleIframeMessage);
|
||||||
|
// });
|
||||||
|
// function handleIframeMessage(event: MessageEvent) {
|
||||||
|
// // 验证来源 event.origin
|
||||||
|
// if (event.source === iframeRef.value?.contentWindow && event.data.type === 'WIDGET_READY') {
|
||||||
|
// console.log('Vue 组件：收到来自 iframe 的 WIDGET_READY 消息');
|
||||||
|
// isIframeInitialized.value = true; // 确认 widget 已就绪
|
||||||
|
// // 现在可以安全地发送初始数据了
|
||||||
|
// if (props.data && props.data.length > 0) {
|
||||||
|
// sendDataToIframe(props.data);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<iframe ref="iframeRef" :src="src" frameborder="0" allowfullscreen @load="onIframeLoad"></iframe>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
iframe {
|
||||||
|
width: 100%; /* 让 iframe 宽度充满容器 */
|
||||||
|
height: 100%; /* 让 iframe 高度充满容器 */
|
||||||
|
display: block; /* 避免可能的底部空白 */
|
||||||
|
border: none; /* 移除边框 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
// @ts-nocheck
|
||||||
colormapwidget.names = ['default', 'blue', 'gray', 'cooledit'];
|
colormapwidget.names = ['default', 'blue', 'gray', 'cooledit'];
|
||||||
|
|
||||||
colormapwidget.prototype.getGradientColors = function (name) {
|
colormapwidget.prototype.getGradientColors = function (name) {
|
||||||
|
|||||||
@ -1,73 +0,0 @@
|
|||||||
(function ($, h, c) {
|
|
||||||
var a = $([]),
|
|
||||||
b = 'delay',
|
|
||||||
j = 'resize',
|
|
||||||
d = j + '-special-event',
|
|
||||||
e = ($.resize = $.extend($.resize, {})),
|
|
||||||
f = 'throttleWindow',
|
|
||||||
i,
|
|
||||||
k = 'setTimeout';
|
|
||||||
e[b] = 250;
|
|
||||||
e[f] = true;
|
|
||||||
$.event.special[j] = {
|
|
||||||
setup: function () {
|
|
||||||
if (!e[f] && this[k]) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
var l = $(this);
|
|
||||||
a = a.add(l);
|
|
||||||
$.data(this, d, {
|
|
||||||
w: l.width(),
|
|
||||||
h: l.height(),
|
|
||||||
});
|
|
||||||
if (a.length === 1) {
|
|
||||||
g();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
teardown: function () {
|
|
||||||
if (!e[f] && this[k]) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
var l = $(this);
|
|
||||||
a = a.not(l);
|
|
||||||
l.removeData(d);
|
|
||||||
if (a.length === 0) {
|
|
||||||
clearTimeout(i);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
add: function (l) {
|
|
||||||
if (!e[f] && this[k]) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
var n;
|
|
||||||
function m(s, o, p) {
|
|
||||||
var q = $(this),
|
|
||||||
r = $.data(this, d) || {};
|
|
||||||
r.w = o === c ? q.width() : o;
|
|
||||||
r.h = p === c ? q.height() : p;
|
|
||||||
Reflect.apply(n, this, arguments);
|
|
||||||
}
|
|
||||||
if ($.isFunction(l)) {
|
|
||||||
n = l;
|
|
||||||
return m;
|
|
||||||
} else {
|
|
||||||
n = l.handler;
|
|
||||||
l.handler = m;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
function g() {
|
|
||||||
i = h[k](function () {
|
|
||||||
a.each(function () {
|
|
||||||
var n = $(this),
|
|
||||||
l = n.height(),
|
|
||||||
m = n.width(),
|
|
||||||
o = $.data(this, d);
|
|
||||||
if (m !== o.w || l !== o.h) {
|
|
||||||
n.trigger(j, [(o.w = m), (o.h = l)]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
g();
|
|
||||||
}, e[b]);
|
|
||||||
}
|
|
||||||
})(jQuery, this);
|
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!-- eslint-disable unicorn/numeric-separators-style -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
definePage({
|
||||||
|
meta: {
|
||||||
|
title: '星座图 iframe',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const data: Array<[number, number]> = [
|
||||||
|
[0.20898877234451796, 0.8329353515647436],
|
||||||
|
[-0.6589349632101078, 0.5886313023998213],
|
||||||
|
[-0.5525702944049637, -0.7953057951401711],
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<IframeConstellationDiagram :data />
|
||||||
|
</template>
|
||||||
1
typed-router.d.ts
vendored
1
typed-router.d.ts
vendored
@ -30,6 +30,7 @@ declare module 'vue-router/auto-routes' {
|
|||||||
'PageCanvasSpectrogram': RouteRecordInfo<'PageCanvasSpectrogram', '/Page/canvas/Spectrogram', Record<never, never>, Record<never, never>>,
|
'PageCanvasSpectrogram': RouteRecordInfo<'PageCanvasSpectrogram', '/Page/canvas/Spectrogram', Record<never, never>, Record<never, never>>,
|
||||||
'PageFonts': RouteRecordInfo<'PageFonts', '/Page/fonts', Record<never, never>, Record<never, never>>,
|
'PageFonts': RouteRecordInfo<'PageFonts', '/Page/fonts', Record<never, never>, Record<never, never>>,
|
||||||
'PageIcons': RouteRecordInfo<'PageIcons', '/Page/Icons', Record<never, never>, Record<never, never>>,
|
'PageIcons': RouteRecordInfo<'PageIcons', '/Page/Icons', Record<never, never>, Record<never, never>>,
|
||||||
|
'PageIframePageIframeConstellationDiagram': RouteRecordInfo<'PageIframePageIframeConstellationDiagram', '/Page/iframe-page/IframeConstellationDiagram', Record<never, never>, Record<never, never>>,
|
||||||
'PageJSPage': RouteRecordInfo<'PageJSPage', '/Page/JSPage', Record<never, never>, Record<never, never>>,
|
'PageJSPage': RouteRecordInfo<'PageJSPage', '/Page/JSPage', Record<never, never>, Record<never, never>>,
|
||||||
'PageMDPage': RouteRecordInfo<'PageMDPage', '/Page/MDPage', Record<never, never>, Record<never, never>>,
|
'PageMDPage': RouteRecordInfo<'PageMDPage', '/Page/MDPage', Record<never, never>, Record<never, never>>,
|
||||||
'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>,
|
'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>,
|
||||||
|
|||||||
Reference in New Issue
Block a user