@hatiolab/things-scene 8.0.0-alpha.2 → 8.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/monitor-extension/content.js +13 -7
- package/monitor-extension/devtools.html +34 -0
- package/monitor-extension/devtools.js +35 -7
- package/monitor-extension/injected.js +12 -15
- package/monitor-extension/popup.html +33 -0
- package/monitor-extension/popup.js +30 -7
- package/package.json +1 -1
- package/things-scene-ie.js +1 -1
- package/things-scene-min.js +1 -1
- package/things-scene.mjs +1 -1
|
@@ -5,7 +5,7 @@ chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, response => {
|
|
|
5
5
|
if (response && response.tabId) {
|
|
6
6
|
const tabId = response.tabId
|
|
7
7
|
|
|
8
|
-
function updateChart(data) {
|
|
8
|
+
function updateChart(data = {}) {
|
|
9
9
|
chrome.runtime.sendMessage({ type: 'UPDATE_CHART', tabId, data })
|
|
10
10
|
}
|
|
11
11
|
|
|
@@ -13,14 +13,20 @@ chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, response => {
|
|
|
13
13
|
if (event.source !== window || !event.data.type) return
|
|
14
14
|
|
|
15
15
|
if (event.data.type === 'RESIDENT_COUNT') {
|
|
16
|
-
const { timestamp, componentResidentsCount, sceneResidentsCount, referenceMapResidentsCount } =
|
|
16
|
+
const { timestamp, componentResidentsCount, sceneResidentsCount, sceneResidents, referenceMapResidentsCount } =
|
|
17
|
+
event.data
|
|
17
18
|
|
|
18
19
|
try {
|
|
19
20
|
chrome.storage.local.get({ residentData: {} }, result => {
|
|
20
21
|
const residentData = result.residentData || {}
|
|
21
|
-
residentData[tabId] = residentData[tabId]
|
|
22
|
+
const tabData = (residentData[tabId] = /* temporary condition */ Array.isArray(residentData[tabId])
|
|
23
|
+
? {}
|
|
24
|
+
: residentData[tabId] || {})
|
|
22
25
|
|
|
23
|
-
|
|
26
|
+
tabData.sceneResidents = sceneResidents
|
|
27
|
+
const history = (tabData.history = tabData.history || [])
|
|
28
|
+
|
|
29
|
+
history.push({
|
|
24
30
|
timestamp,
|
|
25
31
|
componentResidentsCount,
|
|
26
32
|
sceneResidentsCount,
|
|
@@ -28,13 +34,13 @@ chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, response => {
|
|
|
28
34
|
})
|
|
29
35
|
|
|
30
36
|
// 데이터가 100개 이상일 경우 오래된 데이터 삭제
|
|
31
|
-
if (
|
|
32
|
-
|
|
37
|
+
if (history.length > 100) {
|
|
38
|
+
history.shift()
|
|
33
39
|
}
|
|
34
40
|
|
|
35
41
|
chrome.storage.local.set({ residentData }, () => {
|
|
36
42
|
try {
|
|
37
|
-
updateChart(
|
|
43
|
+
updateChart(tabData)
|
|
38
44
|
} catch (e) {
|
|
39
45
|
console.error('Error updating chart:', e)
|
|
40
46
|
}
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
min-height: 800px;
|
|
18
18
|
box-sizing: border-box;
|
|
19
19
|
}
|
|
20
|
+
|
|
20
21
|
canvas {
|
|
21
22
|
flex: 1;
|
|
22
23
|
border: 1px solid #000;
|
|
@@ -24,6 +25,23 @@
|
|
|
24
25
|
width: 100%;
|
|
25
26
|
box-sizing: border-box;
|
|
26
27
|
}
|
|
28
|
+
|
|
29
|
+
table {
|
|
30
|
+
width: 100%;
|
|
31
|
+
border-collapse: collapse;
|
|
32
|
+
margin-top: 20px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
th,
|
|
36
|
+
td {
|
|
37
|
+
padding: 8px;
|
|
38
|
+
text-align: left;
|
|
39
|
+
border-bottom: 1px solid #ddd;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
th {
|
|
43
|
+
background-color: #f2f2f2;
|
|
44
|
+
}
|
|
27
45
|
</style>
|
|
28
46
|
</head>
|
|
29
47
|
<body>
|
|
@@ -31,5 +49,21 @@
|
|
|
31
49
|
<canvas id="residentChart1"></canvas>
|
|
32
50
|
<canvas id="residentChart2"></canvas>
|
|
33
51
|
<canvas id="residentChart3"></canvas>
|
|
52
|
+
|
|
53
|
+
<!-- sceneResidents 데이터를 보여줄 테이블 -->
|
|
54
|
+
<h2>Scene Residents Data</h2>
|
|
55
|
+
<table id="residentsTable">
|
|
56
|
+
<thead>
|
|
57
|
+
<tr>
|
|
58
|
+
<th>Type</th>
|
|
59
|
+
<th>Up</th>
|
|
60
|
+
<th>Down</th>
|
|
61
|
+
<th>Difference (Up - Down)</th>
|
|
62
|
+
</tr>
|
|
63
|
+
</thead>
|
|
64
|
+
<tbody>
|
|
65
|
+
<!-- 데이터가 동적으로 추가됩니다 -->
|
|
66
|
+
</tbody>
|
|
67
|
+
</table>
|
|
34
68
|
</body>
|
|
35
69
|
</html>
|
|
@@ -4,18 +4,46 @@ chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', func
|
|
|
4
4
|
var chartsInitialized = false
|
|
5
5
|
|
|
6
6
|
// 차트 업데이트 함수
|
|
7
|
-
const updateCharts =
|
|
8
|
-
residentChart1.data.labels =
|
|
9
|
-
residentChart1.data.datasets[0].data =
|
|
7
|
+
const updateCharts = ({ sceneResidents, history }) => {
|
|
8
|
+
residentChart1.data.labels = history.map(entry => entry.timestamp)
|
|
9
|
+
residentChart1.data.datasets[0].data = history.map(entry => entry.componentResidentsCount)
|
|
10
10
|
residentChart1.update()
|
|
11
11
|
|
|
12
|
-
residentChart2.data.labels =
|
|
13
|
-
residentChart2.data.datasets[0].data =
|
|
12
|
+
residentChart2.data.labels = history.map(entry => entry.timestamp)
|
|
13
|
+
residentChart2.data.datasets[0].data = history.map(entry => entry.sceneResidentsCount)
|
|
14
14
|
residentChart2.update()
|
|
15
15
|
|
|
16
|
-
residentChart3.data.labels =
|
|
17
|
-
residentChart3.data.datasets[0].data =
|
|
16
|
+
residentChart3.data.labels = history.map(entry => entry.timestamp)
|
|
17
|
+
residentChart3.data.datasets[0].data = history.map(entry => entry.referenceMapResidentsCount)
|
|
18
18
|
residentChart3.update()
|
|
19
|
+
|
|
20
|
+
updateResidentsTable(sceneResidents)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// sceneResidents 테이블 업데이트 함수
|
|
24
|
+
const updateResidentsTable = sceneResidents => {
|
|
25
|
+
console.log('updateResidentesTable', sceneResidents)
|
|
26
|
+
if (typeof sceneResidents !== 'object') {
|
|
27
|
+
return
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const table = document.getElementById('residentsTable')
|
|
31
|
+
table.innerHTML = '' // 기존 테이블 내용을 지움
|
|
32
|
+
|
|
33
|
+
// 테이블 헤더 생성
|
|
34
|
+
const headerRow = document.createElement('tr')
|
|
35
|
+
headerRow.innerHTML = '<th>Type</th><th>Up</th><th>Down</th><th>Difference (Up - Down)</th>'
|
|
36
|
+
table.appendChild(headerRow)
|
|
37
|
+
|
|
38
|
+
// sceneResidents 데이터로 테이블 행 생성
|
|
39
|
+
for (const [type, residents] of Object.entries(sceneResidents)) {
|
|
40
|
+
residents.forEach(({ up, down }) => {
|
|
41
|
+
const row = document.createElement('tr')
|
|
42
|
+
const difference = up - down
|
|
43
|
+
row.innerHTML = `<td>${type}</td><td>${up}</td><td>${down}</td><td>${difference}</td>`
|
|
44
|
+
table.appendChild(row)
|
|
45
|
+
})
|
|
46
|
+
}
|
|
19
47
|
}
|
|
20
48
|
|
|
21
49
|
// 차트 초기화 함수
|
|
@@ -1,28 +1,25 @@
|
|
|
1
1
|
function logComponentResidents() {
|
|
2
|
-
const componentResidentsCount = window.scene.Component?.residentsCount || 0
|
|
3
|
-
const sceneResidentsCount = window.scene.Scene?.residentsCount || 0
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
const timestamp = new Date().toISOString()
|
|
7
|
-
|
|
8
|
-
console.log(
|
|
9
|
-
`Component Residents Count: ${componentResidentsCount}, Scene Residents Count: ${sceneResidentsCount}, ReferenceMap Residents Count: ${referenceMapResidentsCount} at ${timestamp}`
|
|
10
|
-
);
|
|
2
|
+
const componentResidentsCount = window.scene.Component?.residentsCount || 0
|
|
3
|
+
const sceneResidentsCount = window.scene.Scene?.residentsCount || 0
|
|
4
|
+
const sceneResidents = window.scene.Scene?.residents || {}
|
|
5
|
+
const referenceMapResidentsCount = window.scene.ReferenceMap?.residentsCount || 0
|
|
6
|
+
const timestamp = new Date().toISOString()
|
|
11
7
|
|
|
12
8
|
window.postMessage(
|
|
13
9
|
{
|
|
14
|
-
type:
|
|
10
|
+
type: 'RESIDENT_COUNT',
|
|
15
11
|
timestamp,
|
|
16
12
|
componentResidentsCount,
|
|
17
13
|
sceneResidentsCount,
|
|
18
|
-
|
|
14
|
+
sceneResidents,
|
|
15
|
+
referenceMapResidentsCount
|
|
19
16
|
},
|
|
20
|
-
|
|
21
|
-
)
|
|
17
|
+
'*'
|
|
18
|
+
)
|
|
22
19
|
}
|
|
23
20
|
|
|
24
21
|
setTimeout(() => {
|
|
25
22
|
if (window.scene) {
|
|
26
|
-
setInterval(logComponentResidents, 5000)
|
|
23
|
+
setInterval(logComponentResidents, 5000)
|
|
27
24
|
}
|
|
28
|
-
}, 5000)
|
|
25
|
+
}, 5000)
|
|
@@ -26,6 +26,23 @@
|
|
|
26
26
|
width: 100%;
|
|
27
27
|
box-sizing: border-box;
|
|
28
28
|
}
|
|
29
|
+
|
|
30
|
+
table {
|
|
31
|
+
width: 100%;
|
|
32
|
+
border-collapse: collapse;
|
|
33
|
+
margin-top: 20px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
th,
|
|
37
|
+
td {
|
|
38
|
+
padding: 8px;
|
|
39
|
+
text-align: left;
|
|
40
|
+
border-bottom: 1px solid #ddd;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
th {
|
|
44
|
+
background-color: #f2f2f2;
|
|
45
|
+
}
|
|
29
46
|
</style>
|
|
30
47
|
</head>
|
|
31
48
|
<body>
|
|
@@ -33,5 +50,21 @@
|
|
|
33
50
|
<canvas id="residentChart1"></canvas>
|
|
34
51
|
<canvas id="residentChart2"></canvas>
|
|
35
52
|
<canvas id="residentChart3"></canvas>
|
|
53
|
+
|
|
54
|
+
<!-- sceneResidents 데이터를 보여줄 테이블 -->
|
|
55
|
+
<h2>Scene Residents Data</h2>
|
|
56
|
+
<table id="residentsTable">
|
|
57
|
+
<thead>
|
|
58
|
+
<tr>
|
|
59
|
+
<th>Type</th>
|
|
60
|
+
<th>Up</th>
|
|
61
|
+
<th>Down</th>
|
|
62
|
+
<th>Difference (Up - Down)</th>
|
|
63
|
+
</tr>
|
|
64
|
+
</thead>
|
|
65
|
+
<tbody>
|
|
66
|
+
<!-- 데이터가 동적으로 추가됩니다 -->
|
|
67
|
+
</tbody>
|
|
68
|
+
</table>
|
|
36
69
|
</body>
|
|
37
70
|
</html>
|
|
@@ -74,18 +74,41 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
// 차트 업데이트 함수
|
|
77
|
-
const updateCharts =
|
|
78
|
-
residentChart1.data.labels =
|
|
79
|
-
residentChart1.data.datasets[0].data =
|
|
77
|
+
const updateCharts = ({ sceneResidents, history }) => {
|
|
78
|
+
residentChart1.data.labels = history.map(entry => entry.timestamp)
|
|
79
|
+
residentChart1.data.datasets[0].data = history.map(entry => entry.componentResidentsCount)
|
|
80
80
|
residentChart1.update()
|
|
81
81
|
|
|
82
|
-
residentChart2.data.labels =
|
|
83
|
-
residentChart2.data.datasets[0].data =
|
|
82
|
+
residentChart2.data.labels = history.map(entry => entry.timestamp)
|
|
83
|
+
residentChart2.data.datasets[0].data = history.map(entry => entry.sceneResidentsCount)
|
|
84
84
|
residentChart2.update()
|
|
85
85
|
|
|
86
|
-
residentChart3.data.labels =
|
|
87
|
-
residentChart3.data.datasets[0].data =
|
|
86
|
+
residentChart3.data.labels = history.map(entry => entry.timestamp)
|
|
87
|
+
residentChart3.data.datasets[0].data = history.map(entry => entry.referenceMapResidentsCount)
|
|
88
88
|
residentChart3.update()
|
|
89
|
+
|
|
90
|
+
updateResidentsTable(sceneResidents)
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// sceneResidents 테이블 업데이트 함수
|
|
94
|
+
const updateResidentsTable = sceneResidents => {
|
|
95
|
+
const table = document.getElementById('residentsTable')
|
|
96
|
+
table.innerHTML = '' // 기존 테이블 내용을 지움
|
|
97
|
+
|
|
98
|
+
// 테이블 헤더 생성
|
|
99
|
+
const headerRow = document.createElement('tr')
|
|
100
|
+
headerRow.innerHTML = '<th>Type</th><th>Up</th><th>Down</th><th>Difference (Up - Down)</th>'
|
|
101
|
+
table.appendChild(headerRow)
|
|
102
|
+
|
|
103
|
+
// sceneResidents 데이터로 테이블 행 생성
|
|
104
|
+
for (const [type, residents] of Object.entries(sceneResidents)) {
|
|
105
|
+
residents.forEach(({ up, down }) => {
|
|
106
|
+
const row = document.createElement('tr')
|
|
107
|
+
const difference = up - down
|
|
108
|
+
row.innerHTML = `<td>${type}</td><td>${up}</td><td>${down}</td><td>${difference}</td>`
|
|
109
|
+
table.appendChild(row)
|
|
110
|
+
})
|
|
111
|
+
}
|
|
89
112
|
}
|
|
90
113
|
|
|
91
114
|
// 저장된 데이터 가져오기 및 초기 로딩
|