add
This commit is contained in:
1 parent
5543c078a4
commit
0ce025f948
128 files changed
+153659
-1
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user