first commit

This commit is contained in:
2026-08-04 14:30:00 +09:00
commit 4176f04a61
25 changed files with 5294 additions and 0 deletions

275
static/js/layer.js Normal file
View File

@@ -0,0 +1,275 @@
const bookCenterPosition_Wheel = [
{ x: 450.5, y: 105 },
{ x: 450.5, y: 320 },
{ x: 148.5, y: 105 },
{ x: 148.5, y: 320 },
];
const bookCenterPosition_Flat = [
{ x: 750, y: 148.5 },
{ x: 535, y: 148.5 },
{ x: 320, y: 148.5 },
{ x: 105, y: 148.5 },
{ x: 750, y: 450.5 },
{ x: 535, y: 450.5 },
{ x: 320, y: 450.5 },
{ x: 105, y: 450.5 },
];
const woodenWheelPallet = {
palletWidth: 620,
palletLength: 442,
palletHeight: 653,
bookCenterPosition_Wheel,
};
const ironWheelPallet = {
palletWidth: 620,
palletLength: 442,
palletHeight: 633,
bookCenterPosition_Wheel,
};
const woodenFlatPallet = {
palletWidth: 878,
palletLength: 638,
palletHeight: 148,
bookCenterPosition_Flat,
};
const pallets = {
woodenWheelPallet,
ironWheelPallet,
woodenFlatPallet,
};
document.addEventListener('DOMContentLoaded', function () {
const sendPaletteInfoButton = document.getElementById('sendPaletteInfo');
const startRobotMove = document.getElementById('startRobotButton');
const resetButton = document.getElementById('resetButton');
const exitAppButton = document.getElementById('exitAppButton');
const palletHeightInput = document.getElementById('palletHeight');
const palletHeightTitle = document.getElementById('palletHeightTitle');
const stackingButtons = document.querySelectorAll('.leftbuttonBox button');
let stackingSelected = false;
const palletButtons = document.querySelectorAll('.buttonBox button');
let selectedPalletId = null;
const woodenFlatPalletButton = document.getElementById('woodenFlatPallet');
let isStartclicked = false;
function customAlert(msg) {
const alert = document.getElementById('alert');
const text = document.getElementById('alert_msg');
if (msg) {
alert.style.display = 'flex';
text.innerText = msg;
} else {
alert.style.display = 'none';
text.innerText = '';
}
}
function logAction(message) {
fetch('/writelog', {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: message,
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to write log.');
}
return response.text();
})
.then((data) => {
console.log(`Log result: ${data}`);
})
.catch((error) => console.error('Error writing log:', error));
}
stackingButtons.forEach((button) => {
button.addEventListener('click', () => {
stackingButtons.forEach((btn) => btn.classList.remove('selected'));
button.classList.add('selected');
stackingSelected = true;
stackingButtons.forEach((btn) => btn.classList.remove('disabled'));
// pallet 버튼의 선택 상태를 해제
palletButtons.forEach((btn) => {
btn.classList.remove('selected');
btn.disabled = false; // pallet 버튼을 활성화 상태로 되돌림
});
selectedPalletId = null;
sendPaletteInfoButton.disabled = true;
if (button.id === 'oneLineButton') {
woodenFlatPalletButton.classList.add('disabled');
woodenFlatPalletButton.disabled = true;
palletHeightInput.style.display = 'none';
palletHeightTitle.style.display = 'none';
} else if (button.id === 'normalButton') {
woodenFlatPalletButton.classList.remove('disabled');
woodenFlatPalletButton.disabled = false;
}
logAction(`FE : Stacking button ${button.id} clicked - layer.js`);
});
});
palletButtons.forEach((button) => {
button.addEventListener('click', () => {
if (!stackingSelected) {
alert('⛔ 쌓기 버튼을 먼저 선택해주세요!');
return;
}
palletButtons.forEach((btn) => btn.classList.remove('selected'));
button.classList.add('selected');
selectedPalletId = button.id;
sendPaletteInfoButton.disabled = false;
if (selectedPalletId === 'woodenFlatPallet') {
palletHeightInput.style.display = 'block';
palletHeightTitle.style.display = 'block';
} else {
palletHeightInput.style.display = 'none';
palletHeightTitle.style.display = 'none';
}
logAction(`FE : Pallet button ${button.id} clicked - layer.js`);
});
});
sendPaletteInfoButton.addEventListener('click', function () {
let palletHeight = pallets[selectedPalletId].palletHeight; // 기본 높이를 사용
if (selectedPalletId === 'woodenFlatPallet') {
palletHeight = parseFloat(palletHeightInput.value);
if (isNaN(palletHeight) || palletHeight <= 0) {
alert('⛔ 유효한 팔레트 높이를 입력해주세요!');
return;
}
}
if (selectedPalletId) {
const selectedPallet = pallets[selectedPalletId];
selectedPallet.palletHeight = palletHeight; // update the pallet height
fetch('/update_pallet', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(selectedPallet),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send palette info.');
}
return response.text();
})
.then((data) => {
if (data == 'Success') {
startRobotMove.disabled = false;
sendPaletteInfoButton.style.backgroundColor = '#34b800';
isStartclicked = false;
logAction('FE : update_pallet api sent successfully - layer.js');
}
})
.catch((error) => console.error('Error sending palette info:', error));
} else {
alert('⛔ 팔레트를 선택해주세요!');
}
});
startRobotMove.addEventListener('click', function () {
logAction('FE : startRobotMove button clicked - layer.js');
if (selectedPalletId) {
let confirmResult = confirm('로봇 동작을 시작하시겠습니까?');
if (confirmResult && isStartclicked == false) {
isStartclicked = true;
const selectedPallet = pallets[selectedPalletId];
const selectedStackingButton = document.querySelector(
'.leftbuttonBox .selected'
);
let btnId = '';
if (selectedStackingButton.id === 'normalButton') {
btnId = 'normalButton';
window.location.href = '/progress';
} else if (selectedStackingButton.id === 'oneLineButton') {
btnId = 'oneLineButton';
window.location.href = '/oneLineProgress';
}
const data = { selectedPallet, btnId, selectedPalletId };
customAlert('로봇 동작을 시작합니다...');
fetch('/robot_start', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
// 지금 현재 상황 (2024.10.10 문제점 : .then아래로 안내려옴 문제 해결 필요 시급)
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send palette info.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : robot_start function(server) finish successfully - layer.js'
);
})
.catch((error) =>
console.error('Error sending palette info:', error)
);
}
} else {
alert('⛔ 팔레트를 선택해주세요!');
}
});
resetButton.addEventListener('click', function () {
fetch('/reset_data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message: 'Reset button clicked' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send reset data.');
}
return response.text();
})
.then((data) => {
if (data == 'Success') {
logAction('FE : reset_data api sent successfully - layer.js');
}
})
.catch((error) => console.error('Error sending reset data:', error));
});
exitAppButton.addEventListener('click', function () {
fetch('/shutdown', {
method: 'POST',
})
.then((response) => response.text())
.then((data) => {
console.log(data);
logAction('FE : shutdown api sent successfully - layer.js');
})
.catch((error) => console.error('Error shutting down:', error));
});
});

View File

@@ -0,0 +1,418 @@
document.addEventListener('DOMContentLoaded', function () {
const terminateAction = document.getElementById('terminateAction');
const finishAction = document.getElementById('finishAction');
const gridItems = document.querySelectorAll('.gridItem');
const runButton = document.getElementById('run');
const stopButton = document.getElementById('stop');
const exitAppButton = document.getElementById('exitAppButton');
const stackerStartButton = document.getElementById('stackerStartButton');
const stackerStopButton = document.getElementById('stackerStopButton');
const upDownOnButton = document.getElementById('upDownOnButton');
const upDownOffButton = document.getElementById('upDownOffButton');
const leftRightOnButton = document.getElementById('leftRightOnButton');
const leftRightOffButton = document.getElementById('leftRightOffButton');
let selectedGridId = null; // 선택된 그리드 ID
let intervalId = null; // setInterval ID
let isRunning = false; // 한줄쌓기 실행 상태
// 초기 상태 설정
stopButton.disabled = true;
runButton.disabled = true;
function logAction(message) {
fetch('/writelog', {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: message,
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to write log.');
}
return response.text();
})
.then((data) => {
console.log(`Log result: ${data}`);
})
.catch((error) => console.error('Error writing log:', error));
}
// JSON 파일에서 데이터 로드
function fetchJsonData() {
fetch('/static/json/oneLine.json')
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => {
updateGridStatus(data);
})
.catch((error) => console.error('Error loading JSON:', error));
}
// 초기 데이터 로드
fetchJsonData();
// 그리드 상태 업데이트 함수
function updateGridStatus(data) {
const grids = ['grid1', 'grid2', 'grid3', 'grid4'];
// 그리드 비활성화 초기화
gridItems.forEach((item) => item.classList.remove('disabled'));
grids.forEach((grid) => {
if (data[grid].currentLayerHeight > 720) {
document.getElementById(grid).classList.add('disabled');
}
});
if (data.grid4.currentLayerHeight > data.grid2.currentLayerHeight) {
document.getElementById('grid2').classList.add('disabled');
}
if (data.grid3.currentLayerHeight > data.grid1.currentLayerHeight) {
document.getElementById('grid1').classList.add('disabled');
}
// 선택된 그리드의 currentLayerIndex 출력
if (selectedGridId) {
const selectedGridData = data[selectedGridId];
document.getElementById(
'currentLayerIndexDisplay'
).textContent = `현재 쌓고 있는 단 : ${
selectedGridData.currentLayerIndex + 1
}`;
}
// 한줄쌓기 실행 중인 경우 그리드 비활성화 유지
if (isRunning) {
toggleGridItems(true);
}
}
// 그리드 아이템 클릭 핸들러
function handleGridItemClick(event) {
const item = event.currentTarget;
if (item.classList.contains('disabled')) {
return; // 클릭 이벤트 무시
}
gridItems.forEach((btn) => btn.classList.remove('selected'));
item.classList.add('selected');
selectedGridId = item.id;
checkRunButtonState();
}
gridItems.forEach((item) => {
item.addEventListener('click', handleGridItemClick);
});
// 한줄쌓기 실행 버튼 클릭 핸들러
runButton.addEventListener('click', function () {
runButton.disabled = true;
stopButton.disabled = false;
isRunning = true;
toggleGridItems(true);
intervalId = setInterval(fetchJsonData, 5000);
fetch('/one_line_run', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
message: 'one_line_run',
gridId: selectedGridId, // 선택된 그리드 아이템의 ID 전송
}),
})
.then((response) => {
if (!response.ok) {
throw new Error('one_line_run failed.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : one_line_run api sent successfully - oneLineProgress.js'
);
})
.catch((error) =>
console.error('Error sending one_line_run action:', error)
);
});
// 한줄쌓기 멈춤 버튼 클릭 핸들러
stopButton.addEventListener('click', function () {
runButton.disabled = false;
stopButton.disabled = true;
isRunning = false;
toggleGridItems(false);
clearGridSelection();
// JSON 데이터 주기적으로 가져오기 중지
clearInterval(intervalId);
// 멈춤 버튼 클릭 시 JSON 데이터 다시 로드
fetchJsonData();
fetch('/one_line_stop', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message: 'one_line_stop' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('one_line_stop failed.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : one_line_stop api sent successfully - oneLineProgress.js'
);
})
.catch((error) =>
console.error('Error sending one_line_stop action:', error)
);
});
// 한줄쌓기 실행 버튼 활성화 여부 확인 함수
function checkRunButtonState() {
const anyGridSelected = Array.from(gridItems).some((item) =>
item.classList.contains('selected')
);
runButton.disabled = !anyGridSelected;
}
// 그리드 아이템 활성화/비활성화 함수
function toggleGridItems(disable) {
gridItems.forEach((item) => item.classList.toggle('disabled', disable));
}
// 그리드 아이템 선택 해제 함수
function clearGridSelection() {
gridItems.forEach((item) => item.classList.remove('selected'));
checkRunButtonState(); // 선택 해제 후 버튼 상태 재확인
}
finishAction.addEventListener('click', function () {
finishAction.disabled = true;
fetch('/robot_immediately_take_book', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
immediately_take_book: 'robot_immediately_take_book',
}),
})
.then((response) => {
if (!response.ok) {
throw new Error('immediately_take_book failed.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : robot_immediately_take_book api sent successfully - oneLineProgress.js'
);
})
.catch((error) =>
console.error('Error Sending robot finish action:', error)
)
.finally(() => {
setTimeout(() => {
finishAction.disabled = false;
}, 10000);
});
});
terminateAction.addEventListener('click', function () {
fetch('/robot_finish_action', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'robot_finish_action' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send robot finish action.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : terminateAction api sent successfully - oneLineProgress.js'
);
window.location.href = '/';
})
.catch((error) =>
console.error('Error sending robot finish action:', error)
);
});
exitAppButton.addEventListener('click', function () {
fetch('/shutdown', {
method: 'POST',
})
.then((response) => response.text())
.then((data) => {
console.log(data);
logAction('FE : shutdown api sent successfully - oneLineProgress.js');
})
.catch((error) => console.error('Error shutting down:', error));
});
stackerStartButton.addEventListener('click', function () {
fetch('/stacker_start', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'stacker_start' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send stacker start.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : stacker_start api sent successfully - oneLineProgress.js'
);
})
.catch((error) => console.error('Error sending stacker start:', error));
});
stackerStopButton.addEventListener('click', function () {
fetch('/stacker_stop', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'stacker_stop' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send stacker stop.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : stacker_stop api sent successfully - oneLineProgress.js'
);
})
.catch((error) => console.error('Error sending stacker stop:', error));
});
upDownOnButton.addEventListener('click', function () {
fetch('/updown_on', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'updown_on' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send updown on');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction('FE : updown_on api sent successfully - oneLineProgress.js');
})
.catch((error) => console.error('Error sending updown on:', error));
});
upDownOffButton.addEventListener('click', function () {
fetch('/updown_off', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'updown_off' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send updown off');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction('FE : updown_off api sent successfully - oneLineProgress.js');
})
.catch((error) => console.error('Error sending updown off:', error));
});
leftRightOnButton.addEventListener('click', function () {
fetch('/leftright_on', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'leftright_on' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send leftright on');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : leftright_on api sent successfully - oneLineProgress.js'
);
})
.catch((error) => console.error('Error sending leftright on:', error));
});
leftRightOffButton.addEventListener('click', function () {
fetch('/leftright_off', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'leftright_off' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send leftright off');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : leftright_off api sent successfully - oneLineProgress.js'
);
})
.catch((error) => console.error('Error sending leftright off:', error));
});
});

255
static/js/progress.js Normal file
View File

@@ -0,0 +1,255 @@
document.addEventListener('DOMContentLoaded', function () {
const terminateAction = document.getElementById('terminateAction');
const finishAction = document.getElementById('finishAction');
const exitAppButton = document.getElementById('exitAppButton');
const stackerStartButton = document.getElementById('stackerStartButton');
const stackerStopButton = document.getElementById('stackerStopButton');
const upDownOnButton = document.getElementById('upDownOnButton');
const upDownOffButton = document.getElementById('upDownOffButton');
const leftRightOnButton = document.getElementById('leftRightOnButton');
const leftRightOffButton = document.getElementById('leftRightOffButton');
function logAction(message) {
fetch('/writelog', {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: message,
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to write log.');
}
return response.text();
})
.then((data) => {
console.log(`Log result: ${data}`);
})
.catch((error) => console.error('Error writing log:', error));
}
// 인덱스 표시 업데이트 함수
function updateIndexDisplay() {
fetch('/static/json/cache.json')
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => {
document.getElementById('currentDataIndex').textContent =
data.currentDataIndex + 1;
document.getElementById('currentLayerIndex').textContent =
data.currentLayerIndex + 1;
console.log(data.currentDataIndex, data.currentLayerIndex);
})
.catch((error) => console.error('Error loading cache.json:', error));
}
// 페이지 로드 시 초기 인덱스 표시 업데이트
updateIndexDisplay();
// 일정 시간마다 인덱스 표시 업데이트
intervalId = setInterval(updateIndexDisplay, 5000); // 5초마다 업데이트
finishAction.addEventListener('click', function () {
finishAction.disabled = true;
fetch('/robot_immediately_take_book', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
immediately_take_book: 'robot_immediately_take_book',
}),
})
.then((response) => {
if (!response.ok) {
throw new Error('immediately_take_book failed.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction(
'FE : robot_immediately_take_book api sent successfully - progress.js'
);
})
.catch((error) =>
console.error('Error Sending robot finish action:', error)
).finally(() => {
setTimeout(() => {
finishAction.disabled = false;
}, 10000);
})
});
terminateAction.addEventListener('click', function () {
fetch('/robot_finish_action', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'robot_finish_action' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send robot finish action.');
}
return response.text();
})
.then((data) => {
console.log(data);
clearInterval(intervalId);
logAction(
'FE : robot_finish_action api sent successfully - progress.js'
);
window.location.href = '/';
})
.catch((error) =>
console.error('Error sending robot finish action:', error)
);
});
exitAppButton.addEventListener('click', function () {
fetch('/shutdown', {
method: 'POST',
})
.then((response) => response.text())
.then((data) => {
console.log(data);
logAction('FE : shutdown api sent successfully - progress.js');
})
.catch((error) => console.error('Error shutting down:', error));
});
stackerStartButton.addEventListener('click', function () {
fetch('/stacker_start', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'stacker_start' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send stacker start.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction('FE : stacker_start api sent successfully - progress.js');
})
.catch((error) => console.error('Error sending stacker start:', error));
});
stackerStopButton.addEventListener('click', function () {
fetch('/stacker_stop', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'stacker_stop' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send stacker stop.');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction('FE : stacker_stop api sent successfully - progress.js');
})
.catch((error) => console.error('Error sending stacker stop:', error));
});
upDownOnButton.addEventListener('click', function () {
fetch('/updown_on', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'updown_on' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send updown on');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction('FE : updown_on api sent successfully - progress.js');
})
.catch((error) => console.error('Error sending updown on:', error));
});
upDownOffButton.addEventListener('click', function () {
fetch('/updown_off', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'updown_off' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send updown off');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction('FE : updown_off api sent successfully - progress.js');
})
.catch((error) => console.error('Error sending updown off:', error));
});
leftRightOnButton.addEventListener('click', function () {
fetch('/leftright_on', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'leftright_on' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send leftright on');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction('FE : leftright_on api sent successfully - progress.js');
})
.catch((error) => console.error('Error sending leftright on:', error));
});
leftRightOffButton.addEventListener('click', function () {
fetch('/leftright_off', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ action: 'leftright_off' }),
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to send leftright off');
}
return response.text();
})
.then((data) => {
console.log(data);
logAction('FE : leftright_off api sent successfully - progress.js');
})
.catch((error) => console.error('Error sending leftright off:', error));
});
});