This commit is contained in:
seoamugae committed 2026-01-08 17:00:24 +09:00
1 parent 5543c078a4
commit 0ce025f948
128 files changed
+153659 -1

No files matched your search

+11
View File
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> Embedded & IoT</title>
</head>
<frameset cols = "45%,55%">
<frame src = "http://10.10.14.77/sensorTable.php">
<frame src = "http://10.10.14.77/sensorGraph.php">
</frameset>
</html>
@@ -0,0 +1,368 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Apache2 Debian Default Page: It works</title>
<style type="text/css" media="screen">
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
body, html {
padding: 3px 3px 3px 3px;
background-color: #D8DBE2;
font-family: Verdana, sans-serif;
font-size: 11pt;
text-align: center;
}
div.main_page {
position: relative;
display: table;
width: 800px;
margin-bottom: 3px;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
border-width: 2px;
border-color: #212738;
border-style: solid;
background-color: #FFFFFF;
text-align: center;
}
div.page_header {
height: 99px;
width: 100%;
background-color: #F5F6F7;
}
div.page_header span {
margin: 15px 0px 0px 50px;
font-size: 180%;
font-weight: bold;
}
div.page_header img {
margin: 3px 0px 0px 40px;
border: 0px 0px 0px;
}
div.table_of_contents {
clear: left;
min-width: 200px;
margin: 3px 3px 3px 3px;
background-color: #FFFFFF;
text-align: left;
}
div.table_of_contents_item {
clear: left;
width: 100%;
margin: 4px 0px 0px 0px;
background-color: #FFFFFF;
color: #000000;
text-align: left;
}
div.table_of_contents_item a {
margin: 6px 0px 0px 6px;
}
div.content_section {
margin: 3px 3px 3px 3px;
background-color: #FFFFFF;
text-align: left;
}
div.content_section_text {
padding: 4px 8px 4px 8px;
color: #000000;
font-size: 100%;
}
div.content_section_text pre {
margin: 8px 0px 8px 0px;
padding: 8px 8px 8px 8px;
border-width: 1px;
border-style: dotted;
border-color: #000000;
background-color: #F5F6F7;
font-style: italic;
}
div.content_section_text p {
margin-bottom: 6px;
}
div.content_section_text ul, div.content_section_text li {
padding: 4px 8px 4px 16px;
}
div.section_header {
padding: 3px 6px 3px 6px;
background-color: #8E9CB2;
color: #FFFFFF;
font-weight: bold;
font-size: 112%;
text-align: center;
}
div.section_header_red {
background-color: #CD214F;
}
div.section_header_grey {
background-color: #9F9386;
}
.floating_element {
position: relative;
float: left;
}
div.table_of_contents_item a,
div.content_section_text a {
text-decoration: none;
font-weight: bold;
}
div.table_of_contents_item a:link,
div.table_of_contents_item a:visited,
div.table_of_contents_item a:active {
color: #000000;
}
div.table_of_contents_item a:hover {
background-color: #000000;
color: #FFFFFF;
}
div.content_section_text a:link,
div.content_section_text a:visited,
div.content_section_text a:active {
background-color: #DCDFE6;
color: #000000;
}
div.content_section_text a:hover {
background-color: #000000;
color: #DCDFE6;
}
div.validator {
}
</style>
</head>
<body>
<div class="main_page">
<div class="page_header floating_element">
<img src="/icons/openlogo-75.png" alt="Debian Logo" class="floating_element"/>
<span class="floating_element">
Apache2 Debian Default Page
</span>
</div>
<!-- <div class="table_of_contents floating_element">
<div class="section_header section_header_grey">
TABLE OF CONTENTS
</div>
<div class="table_of_contents_item floating_element">
<a href="#about">About</a>
</div>
<div class="table_of_contents_item floating_element">
<a href="#changes">Changes</a>
</div>
<div class="table_of_contents_item floating_element">
<a href="#scope">Scope</a>
</div>
<div class="table_of_contents_item floating_element">
<a href="#files">Config files</a>
</div>
</div>
-->
<div class="content_section floating_element">
<div class="section_header section_header_red">
<div id="about"></div>
It works!
</div>
<div class="content_section_text">
<p>
This is the default welcome page used to test the correct
operation of the Apache2 server after installation on Debian systems.
If you can read this page, it means that the Apache HTTP server installed at
this site is working properly. You should <b>replace this file</b> (located at
<tt>/var/www/html/index.html</tt>) before continuing to operate your HTTP server.
</p>
<p>
If you are a normal user of this web site and don't know what this page is
about, this probably means that the site is currently unavailable due to
maintenance.
If the problem persists, please contact the site's administrator.
</p>
</div>
<div class="section_header">
<div id="changes"></div>
Configuration Overview
</div>
<div class="content_section_text">
<p>
Debian's Apache2 default configuration is different from the
upstream default configuration, and split into several files optimized for
interaction with Debian tools. The configuration system is
<b>fully documented in
/usr/share/doc/apache2/README.Debian.gz</b>. Refer to this for the full
documentation. Documentation for the web server itself can be
found by accessing the <a href="/manual">manual</a> if the <tt>apache2-doc</tt>
package was installed on this server.
</p>
<p>
The configuration layout for an Apache2 web server installation on Debian systems is as follows:
</p>
<pre>
/etc/apache2/
|-- apache2.conf
| `-- ports.conf
|-- mods-enabled
| |-- *.load
| `-- *.conf
|-- conf-enabled
| `-- *.conf
|-- sites-enabled
| `-- *.conf
</pre>
<ul>
<li>
<tt>apache2.conf</tt> is the main configuration
file. It puts the pieces together by including all remaining configuration
files when starting up the web server.
</li>
<li>
<tt>ports.conf</tt> is always included from the
main configuration file. It is used to determine the listening ports for
incoming connections, and this file can be customized anytime.
</li>
<li>
Configuration files in the <tt>mods-enabled/</tt>,
<tt>conf-enabled/</tt> and <tt>sites-enabled/</tt> directories contain
particular configuration snippets which manage modules, global configuration
fragments, or virtual host configurations, respectively.
</li>
<li>
They are activated by symlinking available
configuration files from their respective
*-available/ counterparts. These should be managed
by using our helpers
<tt>
a2enmod,
a2dismod,
</tt>
<tt>
a2ensite,
a2dissite,
</tt>
and
<tt>
a2enconf,
a2disconf
</tt>. See their respective man pages for detailed information.
</li>
<li>
The binary is called apache2. Due to the use of
environment variables, in the default configuration, apache2 needs to be
started/stopped with <tt>/etc/init.d/apache2</tt> or <tt>apache2ctl</tt>.
<b>Calling <tt>/usr/bin/apache2</tt> directly will not work</b> with the
default configuration.
</li>
</ul>
</div>
<div class="section_header">
<div id="docroot"></div>
Document Roots
</div>
<div class="content_section_text">
<p>
By default, Debian does not allow access through the web browser to
<em>any</em> file apart of those located in <tt>/var/www</tt>,
<a href="http://httpd.apache.org/docs/2.4/mod/mod_userdir.html" rel="nofollow">public_html</a>
directories (when enabled) and <tt>/usr/share</tt> (for web
applications). If your site is using a web document root
located elsewhere (such as in <tt>/srv</tt>) you may need to whitelist your
document root directory in <tt>/etc/apache2/apache2.conf</tt>.
</p>
<p>
The default Debian document root is <tt>/var/www/html</tt>. You
can make your own virtual hosts under /var/www. This is different
to previous releases which provides better security out of the box.
</p>
</div>
<div class="section_header">
<div id="bugs"></div>
Reporting Problems
</div>
<div class="content_section_text">
<p>
Please use the <tt>reportbug</tt> tool to report bugs in the
Apache2 package with Debian. However, check <a
href="http://bugs.debian.org/cgi-bin/pkgreport.cgi?ordering=normal;archive=0;src=apache2;repeatmerged=0"
rel="nofollow">existing bug reports</a> before reporting a new bug.
</p>
<p>
Please report bugs specific to modules (such as PHP and others)
to respective packages, not to the web server itself.
</p>
</div>
</div>
</div>
<div class="validator">
</div>
</body>
</html>
@@ -0,0 +1,228 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AIoT 모니터링</title>
<style>
:root{
--bg:#f6f8fb;
--panel:#ffffff;
--text:#0e1726;
--muted:#5d6b7b;
--accent:#1f7aff;
--border:#e6ebf2;
--shadow:0 6px 18px rgba(16,24,40,0.06);
--gap:16px;
}
*{box-sizing:border-box}
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Helvetica, Arial;
color:var(--text);
background:var(--bg);
}
header{
position:sticky; top:0; z-index:10;
display:flex; gap:16px; align-items:center; justify-content:space-between;
padding:14px 18px;
background:var(--panel);
border-bottom:1px solid var(--border);
box-shadow:var(--shadow);
}
.brand{font-weight:800; letter-spacing:.2px}
.brand small{display:block; font-weight:600; color:var(--muted); margin-top:2px}
.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.group{
display:flex; gap:8px; align-items:center;
background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px 10px;
}
label{font-size:12px; color:var(--muted);}
select,button{
appearance:none;
border:1px solid var(--border);
background:#fff;
color:var(--text);
padding:8px 10px;
border-radius:8px;
font-weight:600;
}
button{background:var(--accent); color:#fff; border-color:var(--accent); cursor:pointer}
button:active{transform:translateY(1px)}
main{padding:18px; max-width:1800px; margin:0 auto}
.grid{
display:grid;
grid-template-columns: 45% 55%;
gap:var(--gap);
align-items:start; /* allow natural height growth */
}
.card{
background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
}
.card header{
display:flex; align-items:center; justify-content:space-between;
padding:12px 14px; background:#fff; border-bottom:1px solid var(--border);
}
.title{font-weight:700}
.actions{display:flex; gap:8px}
.actions button{background:#fff; color:var(--text); border-color:var(--border)}
.frame{position:relative}
iframe{width:100%; border:0; display:block; overflow:hidden}
.status{display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-top:1px solid var(--border); color:var(--muted); font-size:12px}
.pill{padding:2px 8px; border-radius:999px; border:1px solid #d3e2ff; color:#1f7aff; background:#f2f7ff}
@media (max-width: 1100px){
.grid{grid-template-columns:1fr}
}
</style>
</head>
<body>
<header>
<div>
<div class="brand">AIoT 모니터링</div>
<small class="brand">Solar & CDS</small>
</div>
<div class="controls">
<div class="group">
<label for="refresh">자동 새로고침</label>
<select id="refresh">
<option value="0">끄기</option>
<option value="5">5초</option>
<option value="10" selected>10초</option>
<option value="30">30초</option>
<option value="60">60초</option>
</select>
<button id="refreshNow" title="즉시 새로고침">새로고침</button>
</div>
<div class="group">
<span>시간(KST)</span>
<strong id="clock">--:--:--</strong>
</div>
</div>
</header>
<main>
<div class="grid">
<section class="card" id="tableCard">
<header>
<div class="title">센서 테이블 (45%)</div>
<div class="actions">
<button data-action="reload" data-target="tableFrame">↻</button>
<button data-action="fullscreen" data-target="tableCard">⤢</button>
</div>
</header>
<div class="frame">
<iframe id="tableFrame" src="sensorTable.php" title="Sensor Table"></iframe>
</div>
<div class="status">
<span>최근 200행</span>
<span class="pill" id="tableStatus">LIVE</span>
</div>
</section>
<section class="card" id="graphCard">
<header>
<div class="title">그래프 (55%)</div>
<div class="actions">
<button data-action="reload" data-target="graphFrame">↻</button>
<button data-action="fullscreen" data-target="graphCard">⤢</button>
</div>
</header>
<div class="frame">
<iframe id="graphFrame" src="sensorGraph.php" title="Sensor Graph"></iframe>
</div>
<div class="status">
<span>필드: solar, cds0~7</span>
<span class="pill" id="graphStatus">LIVE</span>
</div>
</section>
</div>
</main>
<script>
// --- KST Clock (robust) ---
const clockEl = document.getElementById('clock');
const kstFmt = new Intl.DateTimeFormat('ko-KR', { hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false, timeZone:'Asia/Seoul' });
function tick(){ clockEl.textContent = kstFmt.format(new Date()); }
setInterval(tick, 500); tick();
// --- Iframe auto-resize (no inner scroll, page grows instead) ---
function fitIframe(iframe){
try{
const doc = iframe.contentDocument || iframe.contentWindow?.document;
if(!doc) return;
// ensure inner content doesn't overflow inside iframe
doc.documentElement.style.overflow = 'hidden';
doc.body.style.overflow = 'hidden';
doc.body.style.margin = '0';
// full-width tables
doc.querySelectorAll('table').forEach(t=>{
t.style.width = '100%';
t.style.maxWidth = '100%';
t.style.boxSizing = 'border-box';
});
// compute natural height
const h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
iframe.style.height = h + 'px';
}catch(e){/* cross-origin: skip */}
}
function scheduleFit(iframe){
fitIframe(iframe);
setTimeout(()=>fitIframe(iframe), 50);
setTimeout(()=>fitIframe(iframe), 200);
setTimeout(()=>fitIframe(iframe), 800);
setTimeout(()=>fitIframe(iframe), 2000); // for charts rendering later
}
const tableFrame = document.getElementById('tableFrame');
const graphFrame = document.getElementById('graphFrame');
tableFrame.addEventListener('load', ()=>scheduleFit(tableFrame));
graphFrame.addEventListener('load', ()=>scheduleFit(graphFrame));
window.addEventListener('resize', ()=>{ scheduleFit(tableFrame); scheduleFit(graphFrame); });
// --- Refresh handling ---
const refreshSel = document.getElementById('refresh');
const tableStatus = document.getElementById('tableStatus');
const graphStatus = document.getElementById('graphStatus');
let timer = null;
function reloadFrame(id){
const f = document.getElementById(id);
if(!f) return;
const src = f.getAttribute('src').split('?')[0];
f.setAttribute('src', `${src}?t=${Date.now()}`);
}
function setIntervalFromSelect(){
if(timer){clearInterval(timer); timer=null;}
const sec = parseInt(refreshSel.value,10);
if(sec>0){
timer = setInterval(()=>{
reloadFrame('tableFrame');
reloadFrame('graphFrame');
tableStatus.textContent = 'LIVE';
graphStatus.textContent = 'LIVE';
}, sec*1000);
}
}
refreshSel.addEventListener('change', setIntervalFromSelect);
setIntervalFromSelect();
document.getElementById('refreshNow').addEventListener('click', ()=>{
reloadFrame('tableFrame'); reloadFrame('graphFrame');
});
// --- Card actions ---
document.querySelectorAll('.actions button').forEach(btn=>{
btn.addEventListener('click', ()=>{
const act = btn.dataset.action;
const tgt = btn.dataset.target;
if(act==='reload'){ reloadFrame(tgt); }
else if(act==='fullscreen'){
const el = document.getElementById(tgt);
if(!document.fullscreenElement){ el.requestFullscreen?.(); }
else{ document.exitFullscreen?.(); }
}
});
});
</script>
</body>
</html>
@@ -0,0 +1 @@
<?php phpinfo(); ?>
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "refresh" content = "5">
</head>
<?php
$conn = mysqli_connect("localhost", "iot", "pwiot");
mysqli_select_db($conn, "iotdb");
$query = "
SELECT ts, solar, cds0, cds1, cds2, cds3, cds4, cds5, cds6, cds7
FROM (
SELECT ts, solar, cds0, cds1, cds2, cds3, cds4, cds5, cds6, cds7
FROM sensor
ORDER BY ts DESC
LIMIT 200
) AS recent
ORDER BY ts ASC
";
$result = mysqli_query($conn, $query);
// 첫 행은 헤더: 시간이 첫 컬럼
$data = array(array('time', 'solar', 'cds0', 'cds1', 'cds2', 'cds3', 'cds4', 'cds5', 'cds6', 'cds7'));
if ($result) {
while ($row = mysqli_fetch_assoc($result)) {
$data[] = array(
$row['ts'], // JS에서 Date 객체로 변환 예정
(float)$row['solar'],
(float)$row['cds0'],
(float)$row['cds1'],
(float)$row['cds2'],
(float)$row['cds3'],
(float)$row['cds4'],
(float)$row['cds5'],
(float)$row['cds6'],
(float)$row['cds7']
);
}
}
$options = [
'title' => 'sensor_bt (solar & cds0~7)',
'height' => 800,
'legend' => ['position'=>'bottom'],
'curveType' => 'function', // ← 곡선 처리
'lineWidth' => 2, // 선 두께
'pointSize' => 3, // 포인트 크기(0이면 숨김)
'dataOpacity' => 0.9,
'backgroundColor' => 'transparent',
'chartArea' => ['left'=>60,'right'=>20,'top'=>40,'bottom'=>60],
'hAxis' => [
'slantedText' => true,
'gridlines' => ['color' => '#eee']
],
'vAxis' => [
'gridlines' => ['color' => '#f3f3f3'],
'minorGridlines' => ['color' => '#fafafa']
],
'focusTarget' => 'category' // 동일 x축 값 하이라이트
];
?>
<script src="//www.google.com/jsapi"></script>
<script>
var data = <?=json_encode($data) ?>;
var options = <?= json_encode($options) ?>;
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function() {
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(google.visualization.arrayToDataTable(data), options);
});
</script>
<div id="chart_div"></div>
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "refresh" content = "5">
<style type = "text/css">
.spec{
text-align:center;
}
.con{
text-align:left;
}
</style>
</head>
<?php
$conn = mysqli_connect("localhost", "iot", "pwiot");
mysqli_select_db($conn, "iotdb");
$result = mysqli_query(
$conn,
"SELECT id,name,ts,pos,solar,cds0,cds1,cds2,cds3,cds4,cds5,cds6,cds7
FROM sensor
ORDER BY id DESC
LIMIT 200"
);
?>
<body>
<table border = '1' style = "width = 30%" align = "center">
<tr align = "center">
<th>id</th><th>name</th><th>ts</th><th>pos</th><th>solar</th>
<th>cds0</th><th>cds1</th><th>cds2</th><th>cds3</th>
<th>cds4</th><th>cds5</th><th>cds6</th><th>cds7</th>
</tr>
<?php
while($row = mysqli_fetch_assoc($result)){
echo "<tr class='con'>";
echo "<td>{$row['id']}</td>";
echo "<td>{$row['name']}</td>";
echo "<td>{$row['ts']}</td>";
echo "<td>{$row['pos']}</td>";
echo "<td>{$row['solar']}V</td>";
echo "<td>{$row['cds0']}%</td>";
echo "<td>{$row['cds1']}%</td>";
echo "<td>{$row['cds2']}%</td>";
echo "<td>{$row['cds3']}%</td>";
echo "<td>{$row['cds4']}%</td>";
echo "<td>{$row['cds5']}%</td>";
echo "<td>{$row['cds6']}%</td>";
echo "<td>{$row['cds7']}%</td>";
echo "</tr>";
}
mysqli_close($conn);
?>
</table>
</body>
</html>