add iot app store demo (#96)
This commit is contained in:
luhanzhl
@ -0,0 +1,411 @@
|
||||
/* Copyright (C) 2019 Intel Corporation. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
{% load static %}
|
||||
<style>
|
||||
#container{
|
||||
position:relative;
|
||||
margin:0px;
|
||||
height:110px;
|
||||
}
|
||||
#content {
|
||||
margin:0px 20% 0px 18%;
|
||||
border:solid 1.5px;
|
||||
border-color: white black white black;
|
||||
height:50%;
|
||||
}
|
||||
#mainnav{
|
||||
display:table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#mainnav li{
|
||||
display: table-cell;
|
||||
padding-left:10px;
|
||||
}
|
||||
#mainnav ul li a{
|
||||
width:120px;
|
||||
height:30px;
|
||||
background:black;
|
||||
color:white;
|
||||
margin:0px 50px;
|
||||
font-size:21px;
|
||||
font-family:'sansationlight';
|
||||
display:block;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
}
|
||||
#mainnav ul li a:hover{
|
||||
width:120px;
|
||||
height:33px;
|
||||
line-height:30px;
|
||||
border:solid 1.5px;
|
||||
border-color: black black white black;
|
||||
color:#3FC3DF;
|
||||
background:black;
|
||||
}
|
||||
.headers{
|
||||
background-image: url("{%static 'photo/milky-way-2695569_1280.jpg'%}");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color:white;
|
||||
clear:both;
|
||||
height:50%;
|
||||
text-align:center;
|
||||
padding:10px;
|
||||
margin:0px;
|
||||
}
|
||||
#maintitle{
|
||||
font-size:25px;
|
||||
font-family:'sansationlight';
|
||||
}
|
||||
|
||||
#section {
|
||||
position:relative;
|
||||
top:5px;
|
||||
width:100%;
|
||||
float:left;
|
||||
height:120px;
|
||||
border-style:double solid;
|
||||
border-color:black rgb(194, 194, 190) black rgb(248, 248, 248) ;
|
||||
border-width:0.5px;
|
||||
padding:10px;
|
||||
}
|
||||
#photo{
|
||||
position: relative;
|
||||
float: left;
|
||||
top:18%;
|
||||
left:10%;
|
||||
widows: 60px;
|
||||
}
|
||||
#IPs{
|
||||
position: relative;
|
||||
left: 20%;
|
||||
top:10%;
|
||||
width:35%;
|
||||
font-size:17px;
|
||||
font-family:'sansationlight';
|
||||
}
|
||||
#ports{
|
||||
position: relative;
|
||||
left: 20%;
|
||||
top:30%;
|
||||
bottom: 5%;
|
||||
width:35%;
|
||||
font-size:17px;
|
||||
font-family:'sansationlight';
|
||||
}
|
||||
#installs{
|
||||
position: relative;
|
||||
float: left;
|
||||
left:55%;
|
||||
bottom:40%;
|
||||
font-size:17px;
|
||||
font-family:'sansationlight';
|
||||
}
|
||||
|
||||
#download{
|
||||
position:relative;
|
||||
text-align: center;
|
||||
left:15%;
|
||||
width:70%;
|
||||
top:40px;
|
||||
height:40px;
|
||||
/*border-color:#192C4F;*/
|
||||
}
|
||||
.explain{
|
||||
width:250px;
|
||||
height:40px;
|
||||
top:50%;
|
||||
float:left;
|
||||
font-size:18px;
|
||||
}
|
||||
#btn{
|
||||
float:right;
|
||||
}
|
||||
|
||||
|
||||
#APPS {
|
||||
position:relative;
|
||||
top:30px;
|
||||
left:16.67%;
|
||||
width:75%;
|
||||
}
|
||||
#applications{
|
||||
position:relative;
|
||||
float:left;
|
||||
background-color:white;
|
||||
width:88.9%;
|
||||
height:45px;
|
||||
padding:2px;
|
||||
margin:5px 0px;
|
||||
border-style:double solid;
|
||||
border-color:black;
|
||||
border-width:0.5px;
|
||||
}
|
||||
#applogo{
|
||||
position:relative;
|
||||
float:left;
|
||||
top:10%
|
||||
}
|
||||
#appinfo1{ position:relative; float:left; left:40px; width:34%;font-size:15px;height:25px;top:33%}
|
||||
#appinfo2{ position:relative; float:left; left:20px; width:24%;font-size:15px;height:25px;top:33%}
|
||||
#appinfo3{ position:relative; float:left; left:20px; width:34%;font-size:15px;height:25px;top:33%}
|
||||
|
||||
#delete{
|
||||
position:relative;
|
||||
margin:8px 0px;
|
||||
float:right;
|
||||
right:7%;
|
||||
}
|
||||
.main{
|
||||
position: absolute;
|
||||
float:left;
|
||||
width:650px;
|
||||
height:350px;
|
||||
z-index: 9999;
|
||||
background-color: white;
|
||||
display:none;
|
||||
border:solid 1px rgb(4, 30, 66);
|
||||
border-width: 1.5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.close{
|
||||
background-color: black;
|
||||
color:white;
|
||||
border-top-right-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.hotapps{
|
||||
background-color:rgb(202, 202, 202);
|
||||
font-size: 16px;
|
||||
font-family:'days';
|
||||
height:30px;
|
||||
text-align: justify;
|
||||
border:solid 2px;
|
||||
border-color: rgb(202, 202, 202) rgb(202, 202, 202) rgb(202, 202, 202) black;
|
||||
}
|
||||
#scrollba{
|
||||
overflow-x: None;
|
||||
overflow-y: scroll;
|
||||
height: 270px;
|
||||
width:650px;
|
||||
}
|
||||
#Dapplications{
|
||||
width:630px;
|
||||
margin:4px 10px 0px 10px;
|
||||
height:45px;
|
||||
border:solid 1px;
|
||||
border-color: rgb(221, 221, 221) white white white;
|
||||
/* background-color: rgb(233, 233, 233); */
|
||||
}
|
||||
.mybtn2{
|
||||
position: relative;
|
||||
float:left;
|
||||
left:45px;
|
||||
top:3px;
|
||||
height:33px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(22, 109, 121);
|
||||
color:white;
|
||||
}
|
||||
#types{
|
||||
background-color: rgb(3, 90, 90);
|
||||
color:white;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
|
||||
#loading{
|
||||
position:relative;
|
||||
float:left;
|
||||
width: 100%;
|
||||
display:None;
|
||||
height:40px;
|
||||
top:10px;
|
||||
z-index:1010;
|
||||
}
|
||||
.loadapp{
|
||||
font-size:20px;
|
||||
text-align: center;
|
||||
color:rgb(24, 77, 24);
|
||||
}
|
||||
#preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: rgb(135, 155, 241);
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
#loader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: rgb(23, 62, 146);
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
#loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: rgb(21, 44, 87);
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.middlebox{
|
||||
position:absolute;
|
||||
z-index:1003;
|
||||
height:180px;
|
||||
width:340px;
|
||||
background-color: white;
|
||||
border-radius: 7px;
|
||||
border-style:double;
|
||||
border-color:rgb(2, 37, 11) solid;
|
||||
border-width: 0.8px;
|
||||
display: none;
|
||||
}
|
||||
.warning{
|
||||
position: absolute;
|
||||
left:10%;
|
||||
top:6%;
|
||||
FONT-size:18px;
|
||||
color:rgb(0, 85, 0);
|
||||
height:20%;
|
||||
width:80%;
|
||||
border-style:none none dashed none;
|
||||
border-width: 1px;
|
||||
border-color:rgb(0, 85, 0);
|
||||
}
|
||||
.surebtn{
|
||||
position:relative;
|
||||
float:left;
|
||||
left:44%;
|
||||
top:75%;
|
||||
}
|
||||
.findapp{
|
||||
position:absolute;
|
||||
left:10%;
|
||||
height:25%;
|
||||
top:40%;
|
||||
width:80%;
|
||||
font-size:15px;
|
||||
text-align: center;
|
||||
border-style:none none solid none;
|
||||
border-color:rgb(182, 182, 182);
|
||||
border-width:0.5px;
|
||||
}
|
||||
|
||||
.deletebox{
|
||||
position:absolute;
|
||||
z-index:1003;
|
||||
height:180px;
|
||||
width:340px;
|
||||
background-color: white;
|
||||
border-radius: 7px;
|
||||
border-style:double;
|
||||
border-color:rgb(43, 9, 1) solid;
|
||||
border-width: 0.8px;
|
||||
display: none;
|
||||
}
|
||||
.warning2{
|
||||
position: absolute;
|
||||
left:10%;
|
||||
top:6%;
|
||||
FONT-size:18px;
|
||||
color:rgb(185, 0, 0);
|
||||
height:20%;
|
||||
width:80%;
|
||||
border-style:none none dashed none;
|
||||
border-width: 1px;
|
||||
border-color:rgb(185, 0, 0);
|
||||
}
|
||||
.suresbtn{
|
||||
position:relative;
|
||||
float:left;
|
||||
left:24%;
|
||||
top:75%;
|
||||
color:green
|
||||
}
|
||||
.cancelsbtn{
|
||||
position:relative;
|
||||
float:right;
|
||||
right:20%;
|
||||
top:75%;
|
||||
color:red
|
||||
}
|
||||
.footer {
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
background-color:black;
|
||||
color:white;
|
||||
clear:both;
|
||||
text-align:center;
|
||||
padding:1px;
|
||||
width:100%;
|
||||
height:4%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,227 @@
|
||||
/* Copyright (C) 2019 Intel Corporation. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
{% load static %}
|
||||
<style>
|
||||
#container{
|
||||
position:relative;
|
||||
margin:0px;
|
||||
height:110px;
|
||||
}
|
||||
#content {
|
||||
margin:0px 20% 0px 18%;
|
||||
border:solid 1.5px;
|
||||
border-color: white black white black;
|
||||
height:50%;
|
||||
}
|
||||
#mainnav{
|
||||
display:table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#mainnav li{
|
||||
display: table-cell;
|
||||
padding-left:10px;
|
||||
}
|
||||
#mainnav ul li a{
|
||||
width:120px;
|
||||
height:30px;
|
||||
background:black;
|
||||
color:white;
|
||||
margin:0px 50px;
|
||||
font-size:21px;
|
||||
font-family:'sansationlight';
|
||||
display:block;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
}
|
||||
#mainnav ul li a:hover{
|
||||
width:120px;
|
||||
height:33px;
|
||||
line-height:30px;
|
||||
border:solid 1.5px;
|
||||
border-color: black black white black;
|
||||
color:#3FC3DF;
|
||||
background:black;
|
||||
}
|
||||
.headers{
|
||||
background-image: url("{%static 'photo/milky-way-2695569_1280.jpg'%}");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color:white;
|
||||
clear:both;
|
||||
height:50%;
|
||||
text-align:center;
|
||||
padding:10px;
|
||||
margin:0px;
|
||||
}
|
||||
#maintitle{
|
||||
font-size:25px;
|
||||
font-family:'sansationlight';
|
||||
}
|
||||
|
||||
#introstore{
|
||||
z-index:1003;
|
||||
top:10px;
|
||||
margin:10px 220px 10px 220px;
|
||||
height:108px;
|
||||
}
|
||||
#applicationlist{
|
||||
margin:26px 0px 0px 0px;
|
||||
height:100%;
|
||||
}
|
||||
.bar{
|
||||
height:50px;
|
||||
top:2px;
|
||||
}
|
||||
.leftpart{
|
||||
position:relative;
|
||||
float:left;
|
||||
left:30px;
|
||||
font-size:22px;
|
||||
display:inline-block;
|
||||
height:30px;
|
||||
border:solid 1px black;
|
||||
border-style: none none solid none;
|
||||
}
|
||||
.rightpart{
|
||||
position:relative;
|
||||
float:right;
|
||||
height:50px;
|
||||
right:20px;
|
||||
font-size:17px;
|
||||
}
|
||||
.rightpart .file{
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.stylehere{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.choosestyle{
|
||||
position: absolute;
|
||||
width: 120px;height: 35px;
|
||||
background-color: rgb(0, 121, 202);color:white;
|
||||
text-align: center;
|
||||
left: 0px;top: 0px;
|
||||
font-size:14px;
|
||||
border-radius: 4px
|
||||
}
|
||||
.appbook{
|
||||
margin:0px;
|
||||
border:solid;
|
||||
border-width: 1.5px;
|
||||
border-color: white rgb(194, 194, 194) white rgb(194, 194, 194);
|
||||
background-image:linear-gradient(to right, rgb(245, 243, 240),white)
|
||||
}
|
||||
#applications{
|
||||
margin:1px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:50px;
|
||||
border-style:none none solid none;
|
||||
border-color:rgb(172, 172, 172);
|
||||
border-width:0.5px;
|
||||
padding:5px;
|
||||
}
|
||||
#delbutton{
|
||||
width:100px;
|
||||
height:40px;
|
||||
}
|
||||
#appimage{
|
||||
float:left;
|
||||
left:5%;
|
||||
}
|
||||
#lable{
|
||||
color: red;
|
||||
opacity:50}
|
||||
.suresbtn{
|
||||
position:relative;
|
||||
float:left;
|
||||
left:50px;
|
||||
top:135px;
|
||||
color:green
|
||||
}
|
||||
.deletebox{
|
||||
position:absolute;
|
||||
z-index:1003;
|
||||
height:180px;
|
||||
width:340px;
|
||||
background-color: white;
|
||||
border-radius: 7px;
|
||||
border-style:double;
|
||||
border-color:rgb(43, 9, 1) solid;
|
||||
border-width: 0.8px;
|
||||
display: none;
|
||||
}
|
||||
.warning2{
|
||||
position: absolute;
|
||||
left:10%;
|
||||
top:6%;
|
||||
FONT-size:18px;
|
||||
color:rgb(185, 0, 0);
|
||||
height:20%;
|
||||
width:80%;
|
||||
border-style:none none dashed none;
|
||||
border-width: 1px;
|
||||
border-color:rgb(185, 0, 0);
|
||||
}
|
||||
.findapp{
|
||||
position:absolute;
|
||||
left:10%;
|
||||
height:25%;
|
||||
top:40%;
|
||||
width:80%;
|
||||
font-size:15px;
|
||||
text-align: center;
|
||||
border-style:none none solid none;
|
||||
border-color:rgb(182, 182, 182);
|
||||
border-width:0.5px;
|
||||
}
|
||||
.suresbtn{
|
||||
position:relative;
|
||||
float:left;
|
||||
left:24%;
|
||||
top:75%;
|
||||
color:green
|
||||
}
|
||||
.delsbtn{
|
||||
position:relative;
|
||||
float:right;
|
||||
right:20%;
|
||||
top:75%;
|
||||
color:red
|
||||
}
|
||||
.footer {
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
background-color:black;
|
||||
color:white;
|
||||
clear:both;
|
||||
text-align:center;
|
||||
padding:1px;
|
||||
width:100%;
|
||||
height:4%;
|
||||
z-index: 999;
|
||||
}
|
||||
208
test-tools/IoT-APP-Store-Demo/wasm_django/static/css/index.css
Executable file
208
test-tools/IoT-APP-Store-Demo/wasm_django/static/css/index.css
Executable file
@ -0,0 +1,208 @@
|
||||
/* Copyright (C) 2019 Intel Corporation. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
{% load static %}
|
||||
<style>
|
||||
#container{
|
||||
position:relative;
|
||||
margin:0px;
|
||||
height:110px;
|
||||
}
|
||||
#content {
|
||||
margin:0px 20% 0px 18%;
|
||||
border:solid 1.5px;
|
||||
border-color: white black white black;
|
||||
height:50%;
|
||||
}
|
||||
#mainnav{
|
||||
display:table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#mainnav li{
|
||||
display: table-cell;
|
||||
padding-left:10px;
|
||||
}
|
||||
#mainnav ul li a{
|
||||
width:120px;
|
||||
height:30px;
|
||||
background:black;
|
||||
color:white;
|
||||
margin:0px 50px;
|
||||
font-size:21px;
|
||||
font-family:'sansationlight';
|
||||
display:block;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
}
|
||||
#mainnav ul li a:hover{
|
||||
width:120px;
|
||||
height:33px;
|
||||
line-height:30px;
|
||||
border:solid 1.5px;
|
||||
border-color: black black white black;
|
||||
color:#3FC3DF;
|
||||
background:black;
|
||||
}
|
||||
.headers{
|
||||
background-image: url("{%static 'photo/milky-way-2695569_1280.jpg'%}");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color:white;
|
||||
clear:both;
|
||||
height:50%;
|
||||
text-align:center;
|
||||
padding:10px;
|
||||
margin:0px;
|
||||
}
|
||||
#maintitle{
|
||||
font-size:25px;
|
||||
font-family:'sansationlight';
|
||||
}
|
||||
|
||||
#photo2{
|
||||
position: relative;
|
||||
float: left;
|
||||
top:10%;
|
||||
left:20%;
|
||||
}
|
||||
#devic{
|
||||
position: relative;
|
||||
font-size:22px;
|
||||
float: left;
|
||||
left:25%;
|
||||
top:30%;
|
||||
width:40%;
|
||||
}
|
||||
#dividebar{
|
||||
position: absolute;
|
||||
top:210px;
|
||||
margin:10px;
|
||||
width:100%;
|
||||
height:1px
|
||||
}
|
||||
|
||||
#devices {
|
||||
position:relative;
|
||||
bottom: 2px;
|
||||
background-color: #F2F2F2;
|
||||
height:125px;
|
||||
width:80%;
|
||||
margin:8px 10%;
|
||||
}
|
||||
#section {
|
||||
position:relative;
|
||||
background-color:white;
|
||||
top:14px;
|
||||
left:13%;
|
||||
width: 70%;
|
||||
float:left;
|
||||
height:96px;
|
||||
border-style:double solid;
|
||||
border-color:black;
|
||||
border-width:0.5px;
|
||||
padding:10px;
|
||||
}
|
||||
#photo{
|
||||
position: relative;
|
||||
float: left;
|
||||
top:0px;
|
||||
left:6%;
|
||||
}
|
||||
#ID{
|
||||
position:relative;
|
||||
float:left;
|
||||
left:12%;
|
||||
height:20px;
|
||||
width:8%;
|
||||
top:75%;
|
||||
z-index:9999;
|
||||
/* display:none; */
|
||||
font-size:15px;
|
||||
color:rgba(7, 38, 85, 0.87);
|
||||
}
|
||||
#IPs{
|
||||
position: relative;
|
||||
left: 14%;
|
||||
top:10%;
|
||||
width:30%;
|
||||
font-size:17px;
|
||||
font-family:'sansationlight';
|
||||
}
|
||||
#ports{
|
||||
position: relative;
|
||||
left: 14%;
|
||||
top:25%;
|
||||
bottom: 5px;
|
||||
width:30%;
|
||||
font-size:17px;
|
||||
font-family:'sansationlight';
|
||||
}
|
||||
#installs{
|
||||
position: relative;
|
||||
float: right;
|
||||
right: 20%;
|
||||
bottom:57%;
|
||||
font-size:17px;
|
||||
font-family:'sansationlight';
|
||||
}
|
||||
.smenu{
|
||||
position: relative;
|
||||
float: right;
|
||||
top:45px;
|
||||
right: 5%;
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
.prev{
|
||||
position:absolute;
|
||||
left:72%;
|
||||
clear:both;
|
||||
text-align:center;
|
||||
padding:1px;
|
||||
width:100px;
|
||||
height:30px;
|
||||
color:grey;
|
||||
background-color:white;
|
||||
border-radius:5px;
|
||||
z-index: 996;
|
||||
}
|
||||
|
||||
.next{
|
||||
position:absolute;
|
||||
left:80%;
|
||||
clear:both;
|
||||
text-align:center;
|
||||
padding:1px;
|
||||
width:100px;
|
||||
height:30px;
|
||||
color:grey;
|
||||
background-color:white;
|
||||
border-radius:5px;
|
||||
z-index: 996;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
background-color:black;
|
||||
color:white;
|
||||
clear:both;
|
||||
text-align:center;
|
||||
padding:1px;
|
||||
width:100%;
|
||||
height:4%;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,228 @@
|
||||
/* Copyright (C) 2019 Intel Corporation. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Dom Location
|
||||
*
|
||||
*/
|
||||
|
||||
function setDivCenter(divname)
|
||||
// make qn element center aligned
|
||||
{
|
||||
var Top =($(window).height()-$(divname).height())/2;
|
||||
var Left = ($(window).width()-$(divname).width())/2;
|
||||
var scrollTop = $(document).scrollTop();
|
||||
var scrollLeft = $(document).scrollLeft();
|
||||
$(divname).css({posisiton:'absolute','top':Top+scrollTop,'left':Left+scrollLeft});
|
||||
|
||||
};
|
||||
|
||||
setDivCenter(".middlebox");
|
||||
setDivCenter(".deletebox");
|
||||
|
||||
function setmain(divname){
|
||||
// Set the pop-up window of apps for download at the right place
|
||||
var x = $('#btn').offset().top;
|
||||
var Top = x + $('#btn').height()+15;
|
||||
var y = $('#btn').offset().left;
|
||||
var Left = y + ($('#btn').width()/2)-($(divname).width()/2);
|
||||
console.log(Top,Left)
|
||||
$(divname).css({'top':Top,'left':Left});
|
||||
}
|
||||
setmain(".main")
|
||||
|
||||
/*
|
||||
* download apps
|
||||
*
|
||||
*/
|
||||
|
||||
function getthis(val)
|
||||
//Telling background which app to be loaded from appstore_list and to be installed in the current device.
|
||||
{
|
||||
|
||||
/* Get the ip adress and the port of a device, as well as the application ID to be downloaded on this device*/
|
||||
var ip,port,name,version;
|
||||
var ipArr=$("#IPs").text().split(":");
|
||||
ip=ipArr[1];
|
||||
var portArr=$("#ports").text().split(":");
|
||||
port=portArr[1];
|
||||
name = $(val).parent().find("#appsinfo1").text().split(":")[1];
|
||||
version = $(val).parent().find("#appsinfo2").text().split(":")[1];
|
||||
$(".main").fadeOut();
|
||||
|
||||
for (num in alist){
|
||||
if (alist[num]['pname'].trim() == name.trim())
|
||||
{alert("This app has been downloaded.");
|
||||
return;}};
|
||||
$("#loading").fadeIn();
|
||||
var sNode = document.getElementById("APPS");
|
||||
var tempNode= sNode.cloneNode(true);
|
||||
sNode.parentNode.appendChild(tempNode);
|
||||
$("#appinfo1").html("Product Name : "+ name);
|
||||
$("#appinfo2").html("Status : "+"Installing");
|
||||
$("#appinfo3").html("Current_Version : "+ version);
|
||||
|
||||
$.get("/appDownload/",{'ip':ip.trim(),'port':port.trim(),'name':name.trim(),},function (ret) {
|
||||
var status = $.trim(ret.split(":")[1].split("}")[0]);
|
||||
$(".loadapp").html(name+" is downloading now");
|
||||
var msg = JSON.parse(status)
|
||||
console.log(msg)
|
||||
if (JSON.parse(status)=="ok"){
|
||||
$(".middlebox").fadeIn();
|
||||
$(".sourceapp").fadeOut();
|
||||
$("#loading").fadeOut();
|
||||
$(".findapp").html("Download "+name +" successfully");
|
||||
$(".surebtn").click(function (){
|
||||
$(".middlebox").fadeOut();
|
||||
window.location.reload();
|
||||
})}
|
||||
else if (JSON.parse(status)=="Fail!"){
|
||||
alert("Download failed!");
|
||||
$("#loading").fadeOut();
|
||||
sNode.remove();
|
||||
}
|
||||
else {
|
||||
alert("Install app failed:" + msg)
|
||||
$("#loading").fadeOut();
|
||||
sNode.remove();
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
window.onload = function clone()
|
||||
//Add & Delete apps to the device.
|
||||
{
|
||||
/*Install Apps*/
|
||||
var sourceNode = document.getElementById("APPS");
|
||||
if (alist.length != 0)
|
||||
{
|
||||
$("#appinfo1").html("Product Name : "+ alist[0]['pname']);
|
||||
$("#appinfo2").html("Status : "+ alist[0]['status']);
|
||||
$("#appinfo3").html("Current_Version : "+ alist[0]['current_version']);
|
||||
$("#delete").attr('class','delet0');
|
||||
$("#APPS").attr('class','app0');
|
||||
|
||||
for (var i=1; i<alist.length; i++)
|
||||
{
|
||||
var cloneNode= sourceNode.cloneNode(true);
|
||||
sourceNode.parentNode.appendChild(cloneNode);
|
||||
$("#appinfo1").html("Product Name : "+ alist[i]['pname']);
|
||||
$("#appinfo2").html("Status : "+ alist[i]['status']);
|
||||
$("#appinfo3").html("Current_Version : "+ alist[i]['current_version']);
|
||||
$("#delete").attr('class','delet'+i);
|
||||
$("#APPS").attr('class','app'+i);
|
||||
}
|
||||
}
|
||||
$("#IPs").html("IP : "+ dlist[0]['IP']);
|
||||
$("#ports").html("Port : "+ dlist[0]['Port']);
|
||||
$("#installs").html("Installed Apps : "+ dlist[0]['apps']);
|
||||
|
||||
|
||||
|
||||
$(".mybtn").click(function ()
|
||||
{
|
||||
/*uninstall apps*/
|
||||
var thisitem = $(this).parent().attr('class');
|
||||
var indexa = thisitem.match(/\d+\b/);
|
||||
var pname = $(".app"+indexa).find('#appinfo1').text();
|
||||
|
||||
var ip,port;
|
||||
var ipArr=$("#IPs").text().split(":");
|
||||
ip=ipArr[1];
|
||||
var portArr=$("#ports").text().split(":");
|
||||
port=portArr[1];
|
||||
|
||||
var name = pname.split(':')[1].trim();
|
||||
$(".deletebox").fadeIn();
|
||||
$(".findapp").html("Are you sure to delete "+name);
|
||||
$(".suresbtn").click(function (){
|
||||
$(".app"+indexa).remove();
|
||||
$.get("/appDelete/",{'ip':ip.trim(),'port':port.trim(),"name":pname.split(':')[1].trim()},function (ret) {
|
||||
console.log(ret);});
|
||||
$(".deletebox").fadeOut();
|
||||
window.location.reload();
|
||||
})
|
||||
$(".cancelsbtn").click(function (){
|
||||
$(".deletebox").fadeOut(); })
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
function getdownloadapps()
|
||||
{
|
||||
/*Acquire apps for download from Appstore simultaneously whenever appstore is updated*/
|
||||
if (search_node[0] == "Nothing find"){
|
||||
alert(search_node[0])
|
||||
}
|
||||
if (search_node.length == 1 && search_node[0] != "Nothing find" ){
|
||||
$("#appsinfo1").html("Product Name : "+ search_node[0]['ID']);
|
||||
$("#appsinfo2").html("Version : "+ search_node[0]['Version']);
|
||||
}
|
||||
else{
|
||||
var sourceNode = document.getElementById("Dapplications");
|
||||
if (llist.length != 0)
|
||||
{
|
||||
$("#appsinfo1").html("Product Name : "+ llist[0]['ID']);
|
||||
$("#appsinfo2").html("Version : "+ llist[0]['Version']);
|
||||
$("#Dapplications").attr('class','dapp0');
|
||||
|
||||
for (var i=1; i<llist.length; i++)
|
||||
{
|
||||
var cloneNode= sourceNode.cloneNode(true);
|
||||
sourceNode.parentNode.appendChild(cloneNode);
|
||||
$("#appsinfo1").html("Product Name : "+ llist[i]['ID']);
|
||||
$("#appsinfo2").html("Version : "+ llist[i]['Version']);
|
||||
$("#Dapplications").attr('class','dapp'+i);
|
||||
}
|
||||
}};
|
||||
};
|
||||
|
||||
getdownloadapps();
|
||||
|
||||
function givevalue(){
|
||||
var ip=dlist[0]['IP'].trim();
|
||||
var port=dlist[0]['Port'].trim();
|
||||
document.getElementById("aa").value = ip;
|
||||
document.getElementById("bb").value = port;
|
||||
if (open_status == "open"){
|
||||
$(".main").fadeIn();
|
||||
$(".close").click(function(){
|
||||
$(".main").fadeOut();
|
||||
var newurl = "?"+"ip="+ip+"&port="+port;
|
||||
window.location.href= newurl;});
|
||||
$(".mybtn2").click(function(){
|
||||
if (alist.length >=3){
|
||||
alert("Install app failed: exceed max app installations.")
|
||||
}
|
||||
$(".main").fadeOut();
|
||||
getthis(".mybtn2");
|
||||
var newurl = "?"+"ip="+ip+"&port="+port;
|
||||
window.location.href= newurl;
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
givevalue();
|
||||
|
||||
function popbox(){
|
||||
/*Open and close the "install apps" window*/
|
||||
$(".btn").click(function(){
|
||||
$(".main").fadeIn();
|
||||
});
|
||||
$(".close").click(function(){
|
||||
$(".main").fadeOut();
|
||||
});
|
||||
};
|
||||
popbox();
|
||||
136
test-tools/IoT-APP-Store-Demo/wasm_django/static/js/appstore.js
Normal file
136
test-tools/IoT-APP-Store-Demo/wasm_django/static/js/appstore.js
Normal file
@ -0,0 +1,136 @@
|
||||
/* Copyright (C) 2019 Intel Corporation. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
function setDivCenter(divname)
|
||||
//Center a dom
|
||||
{
|
||||
var Top =($(window).height()-$(divname).height())/2;
|
||||
var Left = ($(window).width()-$(divname).width())/2;
|
||||
var scrollTop = $(document).scrollTop();
|
||||
var scrollLeft = $(document).scrollLeft();
|
||||
$(divname).css({posisiton:'absolute','top':Top+scrollTop,'left':Left+scrollLeft});
|
||||
|
||||
};
|
||||
setDivCenter(".deletebox");
|
||||
|
||||
function setDivheight(divname)
|
||||
//set the height of "appbook" to contain all its child elements.
|
||||
{
|
||||
var leng = elist.length + flist.length;
|
||||
var heig = 51 * leng;
|
||||
$(divname).css({height:'heig'});
|
||||
};
|
||||
setDivheight(".appbook");
|
||||
|
||||
function setfooterposition(divname)
|
||||
//Locate footer on the right place
|
||||
{
|
||||
var Top = flist.length* $("#devices").height()+300;
|
||||
var scrollTop = $(document).scrollTop();
|
||||
if (flist.length >=4){
|
||||
$(divname).css({posisiton:'absolute','top':Top+scrollTop});
|
||||
}
|
||||
}
|
||||
setfooterposition(".footer");
|
||||
|
||||
function deleteClick (obj)
|
||||
//Remove an app from apppstore if clicks the "OK" button
|
||||
{
|
||||
var indexapp = $(obj).attr('class').match(/\d+\b/);
|
||||
var removeitem = $(".applic"+indexapp);
|
||||
var name=removeitem.find('#appinfo1').text().split(":")[1].trim();
|
||||
var version=removeitem.find('#appinfo2').text().split(":")[1].trim();
|
||||
|
||||
if (flist.length >= 1){
|
||||
$(".deletebox").fadeIn();
|
||||
$(".findapp").html("Are you sure to delete "+name);
|
||||
$(".suresbtn").click(function (){
|
||||
removeitem.remove();
|
||||
$.get("/removeapps/",{'name':name,'version':version},function (ret) {
|
||||
console.log(ret);});
|
||||
$(".deletebox").fadeOut();
|
||||
window.location.href="/appstore/";
|
||||
})
|
||||
$(".delsbtn").click(function (){
|
||||
$(".deletebox").fadeOut(); })}
|
||||
};
|
||||
|
||||
function upload_file()
|
||||
//Make sure the uploading file is eligible
|
||||
{
|
||||
var type = ulist[0];
|
||||
console.log(type);
|
||||
if (type == "Not a wasm file"){
|
||||
alert(type);
|
||||
window.location.href="/appstore/";
|
||||
}
|
||||
if (type == "This App is preloaded"){
|
||||
alert(type);
|
||||
window.location.href="/appstore/";
|
||||
}
|
||||
if (type == "This App is already uploaded"){
|
||||
alert(type);
|
||||
window.location.href="/appstore/";
|
||||
}
|
||||
};
|
||||
upload_file();
|
||||
|
||||
|
||||
function clone()
|
||||
//Render a interface that shows all the apps for installing in appstore,
|
||||
//including preloaded ones and locally uploaded ones.
|
||||
{
|
||||
|
||||
var sourceNode = document.getElementById("applications");
|
||||
$("#appinfo1").html("product name : "+ elist[0]['ID']);
|
||||
$("#appinfo2").html("product Version : "+ elist[0]['Version']);
|
||||
$("#delbutton").attr('class','del0');
|
||||
$("#applications").attr('class','applic0');
|
||||
|
||||
|
||||
for (var i=1; i<elist.length; i++)
|
||||
{
|
||||
var cloneNode= sourceNode.cloneNode(true);
|
||||
sourceNode.parentNode.appendChild(cloneNode);
|
||||
$("#appinfo1").html("product name : "+ elist[i]['ID']);
|
||||
$("#appinfo2").html("product Version : "+ elist[i]['Version']);
|
||||
$("#delbutton").attr('class','del'+i);
|
||||
$("#applications").attr('class','applic'+i);
|
||||
|
||||
}
|
||||
|
||||
for (var i = elist.length; i< elist.length + flist.length; i++)
|
||||
{
|
||||
var cloneNode= sourceNode.cloneNode(true);
|
||||
sourceNode.parentNode.appendChild(cloneNode);
|
||||
$("#appinfo1").html("product name : "+ flist[i - elist.length]['ID']);
|
||||
$("#appinfo2").html("product Version : "+ flist[i - elist.length]['Version']);
|
||||
$("#lable").html("Custom Apps").css("color","green");
|
||||
$("#delbutton").attr('class','del'+i);
|
||||
$("#applications").attr('class','applic'+i);
|
||||
|
||||
}
|
||||
|
||||
for(var i = 0; i < elist.length; i++)
|
||||
{
|
||||
var tmp_node = document.getElementsByClassName("del" + i)[0]
|
||||
tmp_node.disabled = true
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
clone();
|
||||
|
||||
|
||||
62
test-tools/IoT-APP-Store-Demo/wasm_django/static/js/index.js
Normal file
62
test-tools/IoT-APP-Store-Demo/wasm_django/static/js/index.js
Normal file
@ -0,0 +1,62 @@
|
||||
/* Copyright (C) 2019 Intel Corporation. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
function setfooterposition(divname)
|
||||
//Locate footer on the right place
|
||||
{
|
||||
var Top = dlist.length* $("#devices").height()+300;
|
||||
var scrollTop = $(document).scrollTop();
|
||||
if (dlist.length >=4){
|
||||
$(divname).css({posisiton:'absolute','top':Top+scrollTop});
|
||||
}
|
||||
}
|
||||
setfooterposition(".footer");
|
||||
|
||||
window.onload = function clone()
|
||||
//Show the list of connected devices
|
||||
{
|
||||
var sourceNode = document.getElementById("devices");
|
||||
$("#IPs").html("IP : "+ dlist[0]['IP']);
|
||||
$("#ports").html("Port : "+ dlist[0]['Port']);
|
||||
$("#installs").html("Installed Apps : "+ dlist[0]['apps']);
|
||||
$("#devices").attr('class','devic0');
|
||||
$("#dbutton").attr('class','bt0');
|
||||
$("#choose").attr('class','chos0');
|
||||
|
||||
for (var i=1; i<dlist.length; i++)
|
||||
{
|
||||
var cloneNode= sourceNode.cloneNode(true);
|
||||
sourceNode.parentNode.appendChild(cloneNode);
|
||||
$("#IPs").html("IP : "+ dlist[i]['IP']);
|
||||
$("#ports").html("Port : "+ dlist[i]['Port']);
|
||||
$("#installs").html("Installed Apps : "+ dlist[i]['apps']);
|
||||
$("#devices").attr('class','devic'+i);
|
||||
$("#dbutton").attr('class','bt'+i);
|
||||
$("#choose").attr('class','chos'+i);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function deviceClick(obj){
|
||||
//Render to the application.html
|
||||
var deviceObj=$(obj);
|
||||
var ip=deviceObj.find('#IPs').text();
|
||||
ip=ip.split(':')[1].split(' ')[1]
|
||||
var port=deviceObj.find('#ports').text();
|
||||
port=port.split(':')[1].split(' ')[1]
|
||||
var newurl = "apps/?"+"ip="+ip+"&port="+port;
|
||||
window.location.href= newurl;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/photo/application.png
Executable file
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/photo/application.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/photo/delete.png
Executable file
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/photo/delete.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/photo/menu.png
Executable file
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/photo/menu.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 523 KiB |
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/photo/net_device.png
Executable file
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/photo/net_device.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/upload/vgl_wasm_runtime
Executable file
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/upload/vgl_wasm_runtime
Executable file
Binary file not shown.
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/upload/wasm_runtime_wgl
Executable file
BIN
test-tools/IoT-APP-Store-Demo/wasm_django/static/upload/wasm_runtime_wgl
Executable file
Binary file not shown.
Reference in New Issue
Block a user