|
|
<!DOCTYPE html>
|
|
|
<html lang="ja">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<title>Arduino シリアル通信</title>
|
|
|
<style>
|
|
|
:root {
|
|
|
--primary-color: #1e88e5;
|
|
|
--primary-hover: #1565c0;
|
|
|
--background-color: #ffffff;
|
|
|
--text-color: #212121;
|
|
|
--border-color: #e0e0e0;
|
|
|
--placeholder-color: #757575;
|
|
|
--error-color: #d32f2f;
|
|
|
--success-color: #388e3c;
|
|
|
--input-background: #fafafa;
|
|
|
}
|
|
|
|
|
|
* {
|
|
|
box-sizing: border-box;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
|
|
|
body {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
padding: 32px;
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
padding: 12px;
|
|
|
}
|
|
|
|
|
|
input[type="text"] {
|
|
|
padding: 12px 16px;
|
|
|
}
|
|
|
|
|
|
textarea {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
.container {
|
|
|
padding: 24px;
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
padding: 12px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
body {
|
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
background: var(--background-color);
|
|
|
color: var(--text-color);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: flex-start;
|
|
|
min-height: 100vh;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
background: var(--background-color);
|
|
|
width: 100%;
|
|
|
max-width: 900px;
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 2fr;
|
|
|
gap: 24px;
|
|
|
}
|
|
|
|
|
|
.sidebar {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 16px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
|
text-align: center;
|
|
|
font-size: 1.8rem;
|
|
|
margin-bottom: 24px;
|
|
|
color: var(--text-color);
|
|
|
font-weight: 600;
|
|
|
grid-column: 1 / -1;
|
|
|
}
|
|
|
|
|
|
.button-group {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
background: var(--primary-color);
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 8px;
|
|
|
font-size: 1rem;
|
|
|
font-weight: 500;
|
|
|
cursor: pointer;
|
|
|
transition: background-color 0.2s ease, transform 0.1s ease;
|
|
|
flex: 1;
|
|
|
min-width: 100px;
|
|
|
}
|
|
|
|
|
|
button:hover {
|
|
|
background: var(--primary-hover);
|
|
|
transform: translateY(-1px);
|
|
|
}
|
|
|
|
|
|
button:active {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
|
|
|
button:disabled {
|
|
|
background: #b0bec5;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
select, input[type="text"] {
|
|
|
width: 100%;
|
|
|
font-size: 1rem;
|
|
|
border: 1px solid var(--border-color);
|
|
|
border-radius: 8px;
|
|
|
margin-bottom: 16px;
|
|
|
background: var(--input-background);
|
|
|
padding: 12px 16px;
|
|
|
transition: border-color 0.2s ease;
|
|
|
}
|
|
|
|
|
|
select:focus, input[type="text"]:focus {
|
|
|
outline: none;
|
|
|
border-color: var(--primary-color);
|
|
|
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
|
|
|
}
|
|
|
|
|
|
input[type="text"]::placeholder {
|
|
|
color: var(--placeholder-color);
|
|
|
}
|
|
|
|
|
|
textarea {
|
|
|
width: 100%;
|
|
|
height: 300px;
|
|
|
font-size: 0.95rem;
|
|
|
border: 1px solid var(--border-color);
|
|
|
border-radius: 8px;
|
|
|
background: var(--input-background);
|
|
|
resize: none;
|
|
|
line-height: 1.5;
|
|
|
transition: border-color 0.2s ease;
|
|
|
}
|
|
|
|
|
|
textarea:focus {
|
|
|
outline: none;
|
|
|
border-color: var(--primary-color);
|
|
|
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
|
|
|
}
|
|
|
|
|
|
.copy-button {
|
|
|
position: absolute;
|
|
|
top: 10px;
|
|
|
right: 10px;
|
|
|
cursor: pointer;
|
|
|
padding: 4px;
|
|
|
}
|
|
|
|
|
|
.copy-button img {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.status {
|
|
|
text-align: center;
|
|
|
margin-bottom: 16px;
|
|
|
font-size: 0.9rem;
|
|
|
color: var(--placeholder-color);
|
|
|
}
|
|
|
|
|
|
.status.connected {
|
|
|
color: var(--success-color);
|
|
|
}
|
|
|
|
|
|
.error {
|
|
|
color: var(--error-color);
|
|
|
}
|
|
|
|
|
|
.history {
|
|
|
height: 123px;
|
|
|
border: 1px solid var(--border-color);
|
|
|
border-radius: 1px;
|
|
|
padding: 1px;
|
|
|
background: var(--input-background);
|
|
|
|
|
|
}
|
|
|
|
|
|
.history-item {
|
|
|
padding: 8px;
|
|
|
cursor: pointer;
|
|
|
border-radius: 4px;
|
|
|
transition: background-color 0.2s ease;
|
|
|
}
|
|
|
|
|
|
.history-item:hover {
|
|
|
background: rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.container {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
|
font-size: 1.5rem;
|
|
|
}
|
|
|
|
|
|
.button-group {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<div class="sidebar">
|
|
|
<div class="status" id="status">未接続</div>
|
|
|
<select id="baudRate">
|
|
|
<option value="9600" selected>9600</option>
|
|
|
<option value="19200">19200</option>
|
|
|
<option value="38400">38400</option>
|
|
|
<option value="57600">57600</option>
|
|
|
<option value="115200">115200</option>
|
|
|
</select>
|
|
|
<div class="button-group">
|
|
|
<button id="connect">接続</button>
|
|
|
<button id="disconnect" disabled>切断</button>
|
|
|
<button id="clear">クリア</button>
|
|
|
<button id="export">エクスポート</button>
|
|
|
</div>
|
|
|
<div class="history" id="history">
|
|
|
<div class="history-item" style="color: var(--placeholder-color);">送信履歴なし</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main">
|
|
|
<input type="text" id="input" placeholder="Enterで送信" disabled aria-label="コマンド入力">
|
|
|
<div style="position: relative;">
|
|
|
<textarea id="output" readonly placeholder="受信データが表示されます..." aria-label="受信データ"></textarea>
|
|
|
<div class="copy-button" id="copyButton" title="受信データをコピー">
|
|
|
<img src="copy2.png" alt="コピーアイコン">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
console.log('スクリプトの読み込み開始');
|
|
|
|
|
|
let port, writer, reader;
|
|
|
let keepReading = false;
|
|
|
let isConnected = false;
|
|
|
let commandHistory = [];
|
|
|
let receiveBuffer = '';
|
|
|
|
|
|
|
|
|
const connectButton = document.getElementById('connect');
|
|
|
const disconnectButton = document.getElementById('disconnect');
|
|
|
const clearButton = document.getElementById('clear');
|
|
|
const exportButton = document.getElementById('export');
|
|
|
const copyButton = document.getElementById('copyButton');
|
|
|
const inputField = document.getElementById('input');
|
|
|
const outputArea = document.getElementById('output');
|
|
|
const statusDisplay = document.getElementById('status');
|
|
|
const baudRateSelect = document.getElementById('baudRate');
|
|
|
const historyContainer = document.getElementById('history');
|
|
|
|
|
|
|
|
|
console.log('DOM要素取得:', {
|
|
|
connectButton, disconnectButton, clearButton, exportButton,
|
|
|
copyButton, inputField, outputArea, statusDisplay, baudRateSelect, historyContainer
|
|
|
});
|
|
|
|
|
|
|
|
|
updateHistoryUI();
|
|
|
|
|
|
connectButton.addEventListener('click', async () => {
|
|
|
console.log('接続ボタンクリック');
|
|
|
try {
|
|
|
port = await navigator.serial.requestPort();
|
|
|
await port.open({ baudRate: parseInt(baudRateSelect.value) });
|
|
|
|
|
|
writer = port.writable.getWriter();
|
|
|
reader = port.readable.getReader();
|
|
|
keepReading = true;
|
|
|
isConnected = true;
|
|
|
|
|
|
updateUI(true);
|
|
|
statusDisplay.textContent = `接続済み (ボーレート: ${baudRateSelect.value})`;
|
|
|
statusDisplay.classList.add('connected');
|
|
|
statusDisplay.classList.remove('error');
|
|
|
|
|
|
const decoder = new TextDecoder();
|
|
|
|
|
|
while (keepReading) {
|
|
|
const { value, done } = await reader.read();
|
|
|
if (done) break;
|
|
|
if (value) {
|
|
|
const text = decoder.decode(value, { stream: true });
|
|
|
console.log('受信データ（生）:', text);
|
|
|
displayFilteredOutput(text);
|
|
|
}
|
|
|
}
|
|
|
} catch (err) {
|
|
|
console.error('接続エラー:', err);
|
|
|
statusDisplay.textContent = `接続エラー: ${err.message}`;
|
|
|
statusDisplay.classList.add('error');
|
|
|
statusDisplay.classList.remove('connected');
|
|
|
updateUI(false);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
disconnectButton.addEventListener('click', async () => {
|
|
|
console.log('切断ボタンクリック');
|
|
|
try {
|
|
|
keepReading = false;
|
|
|
if (reader) await reader.releaseLock();
|
|
|
if (writer) await writer.releaseLock();
|
|
|
if (port) await port.close();
|
|
|
isConnected = false;
|
|
|
updateUI(false);
|
|
|
statusDisplay.textContent = '未接続';
|
|
|
statusDisplay.classList.remove('connected', 'error');
|
|
|
receiveBuffer = '';
|
|
|
} catch (err) {
|
|
|
console.error('切断エラー:', err);
|
|
|
statusDisplay.textContent = `切断エラー: ${err.message}`;
|
|
|
statusDisplay.classList.add('error');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
clearButton.addEventListener('click', () => {
|
|
|
console.log('クリアボタンクリック');
|
|
|
outputArea.value = '';
|
|
|
receiveBuffer = '';
|
|
|
console.log('受信データクリア成功');
|
|
|
});
|
|
|
|
|
|
exportButton.addEventListener('click', () => {
|
|
|
console.log('エクスポートボタンクリック');
|
|
|
try {
|
|
|
if (outputArea.value.trim().length === 0) {
|
|
|
statusDisplay.textContent = 'エクスポートするデータがありません';
|
|
|
statusDisplay.classList.add('error');
|
|
|
setTimeout(() => {
|
|
|
if (isConnected) {
|
|
|
statusDisplay.textContent = `接続済み (ボーレート: ${baudRateSelect.value})`;
|
|
|
statusDisplay.classList.add('connected');
|
|
|
statusDisplay.classList.remove('error');
|
|
|
} else {
|
|
|
statusDisplay.textContent = '未接続';
|
|
|
statusDisplay.classList.remove('error');
|
|
|
}
|
|
|
}, 2000);
|
|
|
return;
|
|
|
}
|
|
|
const blob = new Blob([outputArea.value], { type: 'text/plain' });
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
const a = document.createElement('a');
|
|
|
a.href = url;
|
|
|
a.download = `serial_data_${new Date().toISOString()}.txt`;
|
|
|
a.click();
|
|
|
URL.revokeObjectURL(url);
|
|
|
console.log('エクスポート成功');
|
|
|
} catch (e) {
|
|
|
console.error('エクスポートエラー:', e);
|
|
|
statusDisplay.textContent = `エクスポートエラー: ${e.message}`;
|
|
|
statusDisplay.classList.add('error');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
copyButton.addEventListener('click', async () => {
|
|
|
console.log('コピーボタンクリック');
|
|
|
try {
|
|
|
await navigator.clipboard.writeText(outputArea.value);
|
|
|
statusDisplay.textContent = '受信データをコピーしました';
|
|
|
statusDisplay.classList.add('connected');
|
|
|
statusDisplay.classList.remove('error');
|
|
|
console.log('コピー成功');
|
|
|
setTimeout(() => {
|
|
|
if (isConnected) {
|
|
|
statusDisplay.textContent = `接続済み (ボーレート: ${baudRateSelect.value})`;
|
|
|
} else {
|
|
|
statusDisplay.textContent = '未接続';
|
|
|
statusDisplay.classList.remove('connected');
|
|
|
}
|
|
|
}, 2000);
|
|
|
} catch (err) {
|
|
|
console.error('コピーエラー:', err);
|
|
|
statusDisplay.textContent = `コピーエラー: ${err.message}`;
|
|
|
statusDisplay.classList.add('error');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
inputField.addEventListener('keydown', async (e) => {
|
|
|
if (e.key === 'Enter') {
|
|
|
console.log('Enterキー押下:', inputField.value);
|
|
|
e.preventDefault();
|
|
|
const text = inputField.value.trim();
|
|
|
if (text && writer) {
|
|
|
try {
|
|
|
const encoder = new TextEncoder();
|
|
|
await writer.write(encoder.encode(text + '\n'));
|
|
|
updateCommandHistory(text);
|
|
|
inputField.value = '';
|
|
|
} catch (e) {
|
|
|
console.error('送信エラー:', e);
|
|
|
statusDisplay.textContent = `送信エラー: ${e.message}`;
|
|
|
statusDisplay.classList.add('error');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
historyContainer.addEventListener('click', async (e) => {
|
|
|
if (e.target.classList.contains('history-item') && isConnected) {
|
|
|
console.log('履歴アイテムクリック:', e.target.textContent);
|
|
|
const text = e.target.textContent;
|
|
|
if (text && writer) {
|
|
|
try {
|
|
|
const encoder = new TextEncoder();
|
|
|
await writer.write(encoder.encode(text + '\n'));
|
|
|
console.log('履歴から送信成功:', text);
|
|
|
updateCommandHistory(text);
|
|
|
} catch (e) {
|
|
|
console.error('履歴送信エラー:', e);
|
|
|
statusDisplay.textContent = `送信エラー: ${e.message}`;
|
|
|
statusDisplay.classList.add('error');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
function updateCommandHistory(text) {
|
|
|
if (!commandHistory.includes(text)) {
|
|
|
commandHistory.unshift(text);
|
|
|
} else {
|
|
|
|
|
|
commandHistory = commandHistory.filter(cmd => cmd !== text);
|
|
|
commandHistory.unshift(text);
|
|
|
}
|
|
|
|
|
|
if (commandHistory.length > 3) {
|
|
|
commandHistory = commandHistory.slice(0, 3);
|
|
|
}
|
|
|
console.log('履歴更新:', commandHistory);
|
|
|
updateHistoryUI();
|
|
|
}
|
|
|
|
|
|
function displayFilteredOutput(rawText) {
|
|
|
|
|
|
receiveBuffer += rawText;
|
|
|
console.log('バッファ更新:', receiveBuffer);
|
|
|
|
|
|
|
|
|
const lines = receiveBuffer.split(/\r?\n/);
|
|
|
|
|
|
if (!rawText.endsWith('\n')) {
|
|
|
receiveBuffer = lines.pop() || '';
|
|
|
} else {
|
|
|
receiveBuffer = '';
|
|
|
}
|
|
|
|
|
|
|
|
|
const filteredLines = lines.filter(line => line.trim().length > 0);
|
|
|
if (filteredLines.length > 0) {
|
|
|
if (outputArea.value) {
|
|
|
outputArea.value += '\n' + filteredLines.join('\n');
|
|
|
} else {
|
|
|
outputArea.value += filteredLines.join('\n');
|
|
|
}
|
|
|
outputArea.scrollTop = outputArea.scrollHeight;
|
|
|
}
|
|
|
console.log('表示データ:', filteredLines);
|
|
|
}
|
|
|
|
|
|
function updateHistoryUI() {
|
|
|
console.log('履歴UI更新');
|
|
|
historyContainer.innerHTML = '';
|
|
|
if (commandHistory.length === 0) {
|
|
|
historyContainer.innerHTML = '<div class="history-item" style="color: var(--placeholder-color);">送信履歴なし</div>';
|
|
|
} else {
|
|
|
commandHistory.forEach(cmd => {
|
|
|
const div = document.createElement('div');
|
|
|
div.className = 'history-item';
|
|
|
div.textContent = cmd;
|
|
|
historyContainer.appendChild(div);
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function updateUI(connected) {
|
|
|
console.log('UI更新:', connected);
|
|
|
connectButton.disabled = connected;
|
|
|
disconnectButton.disabled = !connected;
|
|
|
|
|
|
inputField.disabled = !connected;
|
|
|
baudRateSelect.disabled = connected;
|
|
|
|
|
|
}
|
|
|
|
|
|
window.addEventListener('beforeunload', async () => {
|
|
|
console.log('ページ終了処理');
|
|
|
keepReading = false;
|
|
|
if (reader) await reader.releaseLock();
|
|
|
if (writer) await writer.releaseLock();
|
|
|
if (port) await port.close();
|
|
|
receiveBuffer = '';
|
|
|
});
|
|
|
|
|
|
console.log('スクリプトの読み込み完了');
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
