2 |
3 |
4 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/IOT_Frontend/css/mycss/apiTest.css:
--------------------------------------------------------------------------------
1 | .apiTestPage {
2 | padding: 20px;
3 | text-align: center;
4 | }
5 |
6 | .apiTestPage .header {
7 | margin-bottom: 20px;
8 | border-bottom: 2px solid #d4d4d4;
9 | padding: 20px;
10 | }
11 |
12 | .apiTestPage #url-input {
13 | text-align: center;
14 | font-size: 16px;
15 | margin-bottom: 20px;
16 | }
17 |
18 | .apiTestPage .btnBlock {
19 | padding-top: 80px;
20 | padding-bottom: 80px;
21 | }
22 |
23 | .apiTestPage .bodyArea {
24 | margin-bottom: 20px;
25 | }
26 |
27 | .apiTestPage .bodyArea2 {
28 | margin-top: 20px;
29 | }
30 |
31 | .apiTestPage .reqbody {
32 | display: block;
33 | height: 200px;
34 | padding: 6px 12px;
35 | font-size: 14px;
36 | line-height: 1.42857143;
37 | color: #555;
38 | background-color: #fff;
39 | background-image: none;
40 | border: 1px solid #ccc;
41 | border-radius: 4px;
42 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
43 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
44 | -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
45 | -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
46 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
47 | }
--------------------------------------------------------------------------------
/IOT_Frontend/css/mycss/historydata.css:
--------------------------------------------------------------------------------
1 | .select-page {
2 | float: right;
3 | margin-top: -41px;
4 | }
5 |
6 | .export {
7 | float: right;
8 | margin-top: -45px;
9 | margin-right: 230px;
10 | }
11 |
12 | #historydataCtrl>a {
13 | color: #fff;
14 | }
15 |
16 | .thepageChange {
17 | cursor: pointer;
18 | }
19 |
20 | #mapcontainer {
21 | /*margin-top: -20px;*/
22 | /*width: 100%;*/
23 | height: 350px;
24 | }
--------------------------------------------------------------------------------
/IOT_Frontend/css/mycss/home.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | html,
7 | body {
8 | width: 100%;
9 | height: 100%;
10 | }
11 |
12 | #background-video {
13 | position: absolute;
14 | top: 0;
15 | left: 0;
16 | width: 100%;
17 | height: 100%;
18 | z-index: -1000;
19 | }
20 |
21 | #home-carousel {
22 | text-align: center;
23 | }
24 |
25 | #home-carousel #text {
26 | border: 1px solid #d4d4d4;
27 | }
28 |
29 | #home-carousel #device {
30 | margin-top: 10%;
31 | }
--------------------------------------------------------------------------------
/IOT_Frontend/css/mycss/index.css:
--------------------------------------------------------------------------------
1 | a {
2 | color: black;
3 | }
4 |
5 | a:hover {
6 | text-decoration: none;
7 | }
8 |
9 | #nav-bottom {
10 | margin-bottom: 0;
11 | }
12 |
13 | table th,
14 | table td {
15 | text-align: center;
16 | }
--------------------------------------------------------------------------------
/IOT_Frontend/css/mycss/realdata.css:
--------------------------------------------------------------------------------
1 | .real-data-charts {
2 | height: 350px;
3 | width: 100%;
4 | }
5 |
6 | .indoorimg {
7 | /*margin-bottom: 200px;*/
8 | margin-top: 40px;
9 | }
10 |
11 | .indoorimg img,
12 | .indoorimg h4 {
13 | width: 67%;
14 | display: none;
15 | }
16 |
17 | .indoorimg h4 {
18 | float: right;
19 | }
20 |
21 | .indoorimg .doorimg {
22 | margin-left: 75px;
23 | }
24 |
25 | .feng .fengimg {
26 | width: 26%;
27 | margin-left: 250px;
28 | }
29 |
30 | .indoorimg .imgactive {
31 | display: block;
32 | }
--------------------------------------------------------------------------------
/IOT_Frontend/css/mycss/time.css:
--------------------------------------------------------------------------------
1 | #timeCtrl {
2 | padding: 20px;
3 | }
4 |
5 | .card {
6 | border: 1px solid #d4d4d4;
7 | border-radius: 10px 10px;
8 | height: 500px;
9 | }
10 |
11 | .card header {
12 | text-align: center;
13 | border-bottom: 1px solid #d4d4d4;
14 | }
15 |
16 | .card section img {
17 | width: 100%;
18 | height: 200px;
19 | height: 324px;
20 | margin-top: 20px;
21 | margin-bottom: 20px;
22 | }
23 |
24 | .card #time {
25 | text-align: center;
26 | }
27 |
28 | .card button {
29 | margin-top: 36px;
30 | }
--------------------------------------------------------------------------------
/IOT_Frontend/font/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klren0312/stm32_wifi/f2fca4430a733d1e48ae5826c779e1442c049a96/IOT_Frontend/font/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/IOT_Frontend/font/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klren0312/stm32_wifi/f2fca4430a733d1e48ae5826c779e1442c049a96/IOT_Frontend/font/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/IOT_Frontend/font/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klren0312/stm32_wifi/f2fca4430a733d1e48ae5826c779e1442c049a96/IOT_Frontend/font/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/IOT_Frontend/font/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klren0312/stm32_wifi/f2fca4430a733d1e48ae5826c779e1442c049a96/IOT_Frontend/font/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/IOT_Frontend/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var concat = require('gulp-concat');
3 | var browserSync = require('browser-sync').create();
4 | var uglifyjs = require("uglify-js");
5 | var minifycss = require('gulp-minify-css');
6 |
7 | // 将task集合在一起 使用gulp命令即可运行
8 | gulp.task('default', ['browserSync', 'watch'])
9 |
10 | // 浏览器同步插件初始化
11 | gulp.task('browserSync', function() {
12 | browserSync.init({
13 | // 路径
14 | server: {
15 | baseDir: './'
16 | },
17 | port: 3010
18 | })
19 | })
20 |
21 | //打包css
22 | gulp.task('minifycss', function() {
23 | return gulp.src('resources/mystyle/mycss/*.css')
24 | .pipe(concat('main.css'))
25 | .pipe(minifycss())
26 | .pipe(gulp.dest('resources/mystyle/'))
27 | })
28 |
29 | // 打包控制器
30 | gulp.task('otherpage', function() {
31 | gulp.src('js/otherpage/*.js')
32 | .pipe(concat('controller.js'))
33 | .pipe(gulp.dest('js/otherpage/'))
34 | })
35 |
36 |
37 | // 监听js,css,html的变化，而重新加载浏览器
38 | gulp.task('watch', function() {
39 | gulp.watch('js/otherpage/*.js', ['otherpage']);
40 | gulp.watch(['js/otherpage/*.js', 'js/myjs/*.js', 'js/*.js'], browserSync.reload);
41 | gulp.watch(['css/mycss/*.css'], browserSync.reload);
42 | gulp.watch(['*.html', 'apiTestComponent/*.html'], browserSync.reload);
43 | })
--------------------------------------------------------------------------------
/IOT_Frontend/home.html:
--------------------------------------------------------------------------------
1 | 
5 | 
12 | 
13 | 
17 | 
18 | 
8 |
11 | 
19 | 
35 |