GitHub/zTC1
1
0
Fork 0
mirror of https://github.com/oopuuu/zTC1.git synced 2025-12-13 05:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
1d81decc47c0cd5fc11bec1ea013892d00588278
zTC1/TC1/http_server/web/demo.html
zogodo 1d81decc47 All Demo
2020-02-22 02:11:33 +08:00

523 lines
27 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Material Design Lite</title>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="http://119.23.191.79/tc1/images/android-desktop.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="http://119.23.191.79/tc1/images/ios-desktop.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="http://119.23.191.79/tc1/images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="http://119.23.191.79/tc1/images/favicon.png">
<link rel="stylesheet" href="assets/css_pack.css">
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">TC1</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item">About</li>
<li class="mdl-menu__item">Contact</li>
<li class="mdl-menu__item">Legal information</li>
</ul>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
<img src="http://119.23.191.79/tc1/images/user.jpg" class="demo-avatar">
<div class="demo-avatar-dropdown">
<span>hello@example.com</span>
<div class="mdl-layout-spacer"></div>
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">arrow_drop_down</i>
<span class="visuallyhidden">Accounts</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
<li class="mdl-menu__item">hello@example.com</li>
<li class="mdl-menu__item">info@example.com</li>
<li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li>
</ul>
</div>
</header>
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link mdl-nav-active" href="javascript:ShowPage(1);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>Home</a>
<a class="mdl-navigation__link" href="javascript:ShowPage(2);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Config</a>
<a class="mdl-navigation__link" href="javascript:ShowPage(3);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">delete</i>Timed Task</a>
<a class="mdl-navigation__link" href="javascript:ShowPage(4);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">report</i>System Status</a>
<a class="mdl-navigation__link" href="javascript:ShowPage(5);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">forum</i>OTA</a>
<a class="mdl-navigation__link" href="javascript:ShowPage(6);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">flag</i>System Log</a>
<a class="mdl-navigation__link" href="javascript:ShowPage(7);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">local_offer</i>XXX</a>
<a class="mdl-navigation__link" href="javascript:ShowPage(8);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">shopping_cart</i>XXX</a>
<a class="mdl-navigation__link" href="https://getmdl.io/components/index.html" target="_blank"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">people</i>Social</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="mdl-grid demo-content">
<div class="page page1 demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="demo-options mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__supporting-text">
<h3>Power Control</h3>
<ul class="demo-list-control mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Socket-1
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-1">
<input type="checkbox" id="list-switch-1" class="mdl-switch__input" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Socket-2
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-2">
<input type="checkbox" id="list-switch-2" class="mdl-switch__input" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Socket-3
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-3">
<input type="checkbox" id="list-switch-3" class="mdl-switch__input" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Socket-4
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-4">
<input type="checkbox" id="list-switch-4" class="mdl-switch__input" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Socket-5
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-5">
<input type="checkbox" id="list-switch-5" class="mdl-switch__input" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Socket-6
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-6">
<input type="checkbox" id="list-switch-6" class="mdl-switch__input" checked />
</label>
</span>
</li>
</ul>
</div>
</div>
</div>
<div id="ct-chart-par" class="page page1 mdl-card__supporting-text mdl-shadow--2dp mdl-cell mdl-cell--8-col"
style="height:300px;overflow-x:scroll;overflow-y:hidden;">
<div id="ct-chart" class="ct-chart ct-perfect-fourth" style="height:280px;"></div>
</div>
<div class="page page2 mdl-cell demo-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Network Config</h2>
</div>
<div class="mdl-card__supporting-text">
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">SSID</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Password</label>
</div>
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a id="demo-show-toast" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Submit
</a>
</div>
</div>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button">123</button>
</div>
<div class="page page2 mdl-cell demo-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">MQTT Config</h2>
</div>
<div class="mdl-card__supporting-text">
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">MQTT Addr</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">MQTT Port</label>
</div>
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Submit
</a>
</div>
</div>
<div class="page page3 mdl-cell">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</div>
<div class="page page4 mdl-cell demo-card-event mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h4>
Featured event:<br>
May 24, 2016<br>
7-11pm
</h4>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar
</a>
<div class="mdl-layout-spacer"></div>
<i class="material-icons">event</i>
</div>
</div>
<div class="page page5 mdl-cell demo-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">OTA</h2>
</div>
<div class="mdl-card__supporting-text">
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" value="http://119.23.191.79/tc1/tc1ota.bin">
<label class="mdl-textfield__label" for="sample3">OTA Url</label>
</div>
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Submit
</a>
</div>
<div id="p1" class="mdl-progress mdl-js-progress"></div>
<script>
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
</script>
</div>
<div class="page page6 mdl-cell demo-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">System Log</h2>
</div>
<div class="mdl-card__supporting-text">
[1970-01-01 08:00:00][TC1 main.c:47] start version[v1.0.32]
[1970-01-01 08:00:01][TC1 main.c:64] str_mac[D0BAE464077B]
[1970-01-01 08:00:01][TC1 main.c:95] user:
[1970-01-01 08:00:01][TC1 main.c:96] device name:zTC1-077B
[1970-01-01 08:00:01][TC1 main.c:97] mqtt_ip:192.168.33.219
[1970-01-01 08:00:01][TC1 main.c:98] mqtt_port:1883
[1970-01-01 08:00:01][TC1 main.c:99] mqtt_user:
[1970-01-01 08:00:01][TC1 main.c:100] mqtt_password:
[1970-01-01 08:00:01][TC1 main.c:101] version:6
[1970-01-01 08:00:01][WIFI user_wifi.c:135] WifiConnect wifi_ssid[TL-5408] wifi_key[stu@5408]
[1970-01-01 08:00:02][MQTT user_mqtt_client.c:104] MQTT client version: [0.1.8]
[1970-01-01 08:00:02][POWER user_power.c:75] PowerInit
[1970-01-01 08:00:02][HTTP app_httpd.c:423] initializing web-services
[1970-01-01 08:00:02][MQTT user_mqtt_client.c:191] MQTT client thread started...
[1970-01-01 08:00:03][WIFI user_wifi.c:20] got IP:192.168.33.222
[2020-02-22 02:01:39][RTC user_rtc.c:95] sntp success!
[2020-02-22 02:03:03][HTTP app_httpd.c:124] HttpGetAssets url[/assets/css_pack.css] file_name[/assets/css_pack.css]
[2020-02-22 02:03:03][HTTP app_httpd.c:124] HttpGetAssets url[/assets/js_pack.js] file_name[/assets/js_pack.js]
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
<!--
<div class="page page2 demo-charts mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan font-size="0.2" dy="-0.07">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
</div>
<div class="page page2 demo-graphs mdl-shadow--2dp mdl-cell mdl-cell--8-col">
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart" />
</svg>
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart" />
</svg>
</div>
<div class="page page2 demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
<h2 class="mdl-card__title-text">Updates</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
Non dolore elit adipisicing ea reprehenderit consectetur culpa.
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">Read More</a>
</div>
</div>
<div class="demo-separator mdl-cell--1-col"></div>
<div class="demo-options mdl-card mdl-color--deep-purple-500 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
<h3>View options</h3>
<ul>
<li>
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Click per object</span>
</label>
</li>
<li>
<label for="chkbox2" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox2" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Views per object</span>
</label>
</li>
<li>
<label for="chkbox3" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox3" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Objects selected</span>
</label>
</li>
<li>
<label for="chkbox4" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox4" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Objects viewed</span>
</label>
</li>
</ul>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label"></span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input">
<span class="mdl-switch__label"></span>
</label>
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--blue-grey-50">Change location</a>
<div class="mdl-layout-spacer"></div>
<i class="material-icons">location_on</i>
</div>
</div>
</div>
-->
</div>
</main>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
<defs>
<mask id="piemask" maskContentUnits="objectBoundingBox">
<circle cx=0.5 cy=0.5 r=0.49 fill="white" />
<circle cx=0.5 cy=0.5 r=0.40 fill="black" />
</mask>
<g id="piechart">
<circle cx=0.5 cy=0.5 r=0.5 />
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)" />
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250" style="position: fixed; left: -1000px; height: -1000px;">
<defs>
<g id="chart">
<g id="Gridlines">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3" />
</g>
<g id="Numbers">
<text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9">500</text>
<text transform="matrix(1 0 0 1 485 69)" fill="#888888" font-family="'Roboto'" font-size="9">400</text>
<text transform="matrix(1 0 0 1 485 109.3333)" fill="#888888" font-family="'Roboto'" font-size="9">300</text>
<text transform="matrix(1 0 0 1 485 149)" fill="#888888" font-family="'Roboto'" font-size="9">200</text>
<text transform="matrix(1 0 0 1 485 188.3333)" fill="#888888" font-family="'Roboto'" font-size="9">100</text>
<text transform="matrix(1 0 0 1 0 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">1</text>
<text transform="matrix(1 0 0 1 78 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">2</text>
<text transform="matrix(1 0 0 1 154.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">3</text>
<text transform="matrix(1 0 0 1 232.1667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">4</text>
<text transform="matrix(1 0 0 1 309 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">5</text>
<text transform="matrix(1 0 0 1 386.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">6</text>
<text transform="matrix(1 0 0 1 464.3333 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">7</text>
</g>
<g id="Layer_5">
<polygon opacity="0.36" stroke-miterlimit="10" points="0,223.3 48,138.5 154.7,169 211,88.5
294.5,80.5 380,165.2 437,75.5 469.5,223.3 "/>
</g>
<g id="Layer_4">
<polygon stroke-miterlimit="10" points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
296.7,128 380.7,184.3 436.7,125 "/>
</g>
</g>
</defs>
</svg>
<script type="text/javascript" src="assets/js_pack.js"></script>
<script>
var chart_par = document.getElementById("ct-chart-par");
chart_par.scrollTo(chart_par.scrollWidth, 0);
function ShowPage(id) {
$(".page").hide();
$(".page"+id).show();
$(".is-small-screen >> .mdl-layout__drawer-button").click()
chart_par.scrollTo(chart_par.scrollWidth, 0);
$(".mdl-navigation__link").removeClass("mdl-nav-active");
$(".mdl-navigation__link:eq("+(id-1)+")").addClass("mdl-nav-active");
}
ShowPage(1);
function AjaxErr(re) {
alert(re.status);
}
var data = {
series: [
[]
]
};
var t = new Chartist.Line('.ct-chart', data, {showArea: true, axisY: {position: 'end'}});
var power_idx = 0;
var chart_wth = 0;
function GetPowerRecord() {
$.ajax({
url: "/power",
type: "POST",
data: power_idx.toString(),
success: function (re) {
re = re.replace(/'/g, '"');
var power = JSON.parse(re);
power_idx = power.idx + 1;
var x = chart_par.scrollWidth - chart_par.offsetWidth - chart_par.scrollLeft;
power.powers.forEach(element => {
data.series[0].push(element/10);
});
chart_wth += power.powers.length;
$("#ct-chart").width(chart_wth * 10);
t.update(data);
if (power.powers.length != 0 && x < 100) {
chart_par.scrollTo(chart_par.scrollWidth, 0);
}
window.setTimeout(GetPowerRecord, 3000);
},
error: AjaxErr
});
}
$(document).ready(function(){
GetPowerRecord();
})
(function() {
'use strict';
window['counter'] = 0;
var snackbarContainer = document.querySelector('#demo-toast-example');
var showToastButton = document.querySelector('#demo-show-toast');
showToastButton.addEventListener('click', function() {
'use strict';
var data = {message: 'Example Message # ' + ++counter};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
}());
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink