Archive
/
rcn-frontserver
mirror of https://github.com/Trivernis/rcn-frontserver.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

HTML redesign

Browse Source 
- changed to the webapp approach
- rebuild it from scratch
pull/18/head^2
Trivernis 6 years ago
parent 27681d42aa
commit 1a7cda36f2
11 changed files with 308 additions and 70 deletions
Show Stats Download Patch File Download Diff File

4
config/server.json
Unescape Escape View File

@ -36,6 +36,10 @@
"path": "./res/img/", "path": "./res/img/",
"mime": "image/png" "mime": "image/png"
}, },
".svg": {
"path": "./res/img/",
"mime": "image/svg+xml"
},
".ttf": { ".ttf": {
"path": "./res/fonts/", "path": "./res/fonts/",
"mime": "font/opentype" "mime": "font/opentype"

18
glob/script.js
Unescape Escape View File

@ -40,6 +40,24 @@ function getDataByPath(array, path) {
return data; return data;
} }
/**
* Shows/Hides the sidebar action-menu
*/
function toggleActionMenu() {
let state = $('.mainview').attr("state");
if (state === "retracted") {
$('.mainview').attr("state", "fullsize");
} else {
$('.mainview').attr("state", "retracted");
}
}
function navigate(view, title) {
$('.content').load(view);
let sideTitle = title || view.replace(/\.htm/, '');
$('.navigationBar .title').html("<span>" + sideTitle + "</span>");
}
// -- Events -- // -- Events --
// Define what happens onLoad // Define what happens onLoad
$(document).ready(function(){ $(document).ready(function(){

31
glob/style.sass
Unescape Escape View File

@ -1,4 +1,6 @@
@import "./style/colors.sass" @import "./style/colors.sass"
@import "./style/layout.sass"
@import "./style/elements.sass"
@font-face @font-face
font-family: ubuntuL font-family: ubuntuL
@ -12,43 +14,40 @@
font-family: ubuntuMono font-family: ubuntuMono
src: url(/UbuntuMono-R.ttf) src: url(/UbuntuMono-R.ttf)
// tagnames
body body
font-family: ubuntuL font-family: ubuntuL
background: $main-color
color: $highlight-color
text-align: center
font-size: 13pt
a //a
color: $link-color color: $link-color
a:hover //a:hover
color: lighten($link-color, 10%) color: lighten($link-color, 10%)
a:visited //a:visited
color: darken($link-color, 10%) color: darken($link-color, 10%)
h1, h2, h3, h4, h5 //h1, h2, h3, h4, h5
line-height: 1.5em line-height: 1.5em
// tag-like classes // tag-like classes
.title //.title
font-size: 30pt font-size: 30pt
.content //.content
padding: 0px 10% padding: 0px 10%
margin: auto margin: auto
line-height: 1.5em line-height: 1.5em
.footer //.footer
position: absolute position: absolute
width: 100% width: 100%
bottom: 0px bottom: 0px
left: 0px left: 0px
background: $bar-color background: $bar-color
.header //.header
padding: 1px 1px padding: 1px 1px
position: static position: static
width: 100% width: 100%
@ -56,10 +55,10 @@ h1, h2, h3, h4, h5
left: 0px left: 0px
background: $bar-color background: $bar-color
.spacer //.spacer
height: 50px height: 50px
// attribute-like classes // attribute-like classes
.justify //.justify
text-align: justify text-align: justify

24
glob/style/colors.sass
Unescape Escape View File

@ -1,4 +1,20 @@
$main-color: #9289f5 $cPrimary: #9289f5
$highlight-color: #FFF $cPrimaryVariant: #4c10a5
$link-color: #FAA $cSecondary: #c889f5
$bar-color: #2310f7 $cSecondaryVariant: #740bce
$cBackground: #fff
$cBackgroundVariant: #000
$cSurface: #fff
$cSurfaceVariant: #000
$cError: #f59289
$cErrorVariant: #b20a00
$cOnPrimary: #fff
$cOnSecondary: #000
$cOnSurface: #000
$cOnSurfaceShadow: lighten($cOnSurface, 30%)
$cOnSurfaceVariant: #fff
$cOnBackground: #000
$cOnBackgroundShadow: lighten($cOnBackground, 30%)
$cOnBackgroundVariant: #fff
$cOnError: #000
$cOnErrorVariant: #fff

144
glob/style/elements.sass
Unescape Escape View File

@ -0,0 +1,144 @@
@import layout
@import colors
.app
background: $cBackground
color: $cOnBackground
user-select: none
::-webkit-scrollbar
width: 12px
height: 12px
::-webkit-scrollbar-thumb
background: $cSecondary
::-webkit-scrollbar-track
background: lighten($cPrimary, 10%)
.mainview
transition-duration: 1s
box-shadow: 0 5px 5px $cOnSurfaceShadow
background: $cBackground
.mainview[state=retracted]
width: 80%
.accentBar
@extend .bar
background: $cSecondary
height: 10px
.navigationBar
@extend .bar
background: $cPrimary
color: $cOnPrimary
min-height: 35px
box-shadow: 0 5px 5px $cOnSurfaceShadow
position: relative
z-index: 999
text-align: center
.menu
height: 2em
width: 2em
padding: calc(0.5em + 5px) $sPadding 0.5em
background: url("/icons/menu.svg") no-repeat center, $cPrimary
transition-duration: 0.3s
cursor: pointer
.menu:hover
background: url("/icons/menu.svg") no-repeat center, darken($cPrimary, 4%)
.menu:active
background: url("/icons/menu.svg") no-repeat center, lighten($cPrimary, 4%)
.button
background: $cPrimary
padding: 1em $sPadding 0
height: 2em
float: left
text-align: center
transition-duration: 0.3s
cursor: pointer
border-bottom: 5px solid $cPrimary
span
vertical-align: middle
display: inline-block
.button:hover
background: darken($cPrimary, 4%)
border-bottom: 5px solid darken($cPrimary, 4%)
.button:active
background: lighten($cPrimary, 4%)
border-bottom: 5px solid lighten($cPrimary, 4%)
.current
border-bottom: 5px solid $cSurface !important
.title
padding: 0.5em $sPadding 0.5em
font-size: 18pt
font-weight: bold
text-align: center
width: 100%
.actionList
background: $cPrimary
color: $cOnPrimary
width: 20%
ul
list-style: none
padding-left: 0
li
padding: $sPadding
width: 100%
cursor: pointer
transition-duration: 0.3s
li:hover
background: darken($cPrimary, 4%)
li:active
background: lighten($cPrimary, 4%)
.panelContainer
background: $cSurface
color: $cOnSurface
.panel
transition-duration: 0.3s
background: $cPrimary
color: $cOnPrimary
display: inline-block
position: relative
min-height: 225px
min-width: 225px
padding: $sPadding
max-width: 100vw
max-height: 100vw
margin: 25px
border-radius: $sPadding
box-shadow: 0 5px 5px $cOnSurfaceShadow
cursor: pointer
text-align: justify
.panel:hover
background: darken($cPrimary, 4%)
.panel:active
background: lighten($cPrimary, 4%)
box-shadow: 0 7px 5px $cOnSurfaceShadow
.panel
.title
position: absolute
padding: $sPadding
text-align: center
width: calc(100% - 25px)
top: 0
left: 0
font-size: 16pt
font-weight: bold
.icon
position: absolute
padding: $sPadding
left: 0
top: calc(1em + 12.5px)
height: calc(50% - 50px)
width: calc(100% - 25px)
img
height: 100%
width: auto
margin: 0 calc(50% - 25px)
.description
position: absolute
padding: $sPadding
top: 50%
height: calc(50% - 37.5px)
left: 0
overflow: auto

27
glob/style/layout.sass
Unescape Escape View File

@ -0,0 +1,27 @@
$sPadding: 12.5px
.app
width: 100%
min-height: 100%
position: absolute
top: 0
left: 0
display: flex
.mainview
width: 100%
min-height: 100%
position: absolute
right: 0
.content
flex: 100%
padding: 25px
.row
display: flex
.bar
display: flex
width: 100%
min-height: 10px

21
res/html/about.htm
Unescape Escape View File

@ -0,0 +1,21 @@
<div style="width: 100%; margin: auto">
<img src="RCN-Logo.png" style="margin: 0 calc(50% - 25px); max-width: 100px; height: auto"/>
</div>
<p>
The Raspberry pi Communication-Network is a network of Raspberry-Pi's.
It's currently still in development. <br> The purpose of this server is to
display the status of all raspberry-pi's in the network and the data
of several sensors that are connected to these raspberry pi's. The data
is stored in a database running on the main backend-server. The
frontend-server is running either on a differend device or also on the
backend-server-device. If this is the case, then the data is directly
fetched from several json files instead of using webservices. The json-
files are generated by a script running in the background that get's
data from the database and stores it in these json-files every few
seconds (depending on the type of data).
</p>
<div class="spacer">
</div>
<p class="justify">
</p>

11
res/html/data.html → res/html/data.htm
Unescape Escape View File

@ -1,11 +1,6 @@
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
</head>
<body>
<h1> Data </h1> <h1> Data </h1>
<div id="app"> <div>
<div style="height: 100px; width: 100%"> <div style="height: 100px; width: 100%">
<svg viewBox="0 0 100 100" style="height: 100%; width: 100%"> <svg viewBox="0 0 100 100" style="height: 100%; width: 100%">
<polygon <polygon
@ -16,5 +11,3 @@
</div> </div>
<script src="/data.js" type="text/javascript"> <script src="/data.js" type="text/javascript">
</script> </script>
</body>
</html>

21
res/html/index.htm
Unescape Escape View File

@ -0,0 +1,21 @@
<div class="panelContainer">
<div class="panel">
<div class="title">
<span>Hey, I am a title</span>
</div>
<div class="icon">
<img src="RCN-Logo.png">
</div>
<div class="description">
<span>This very long app description goes from bottom to top.
Let us force this description into ULTIMATE-OVERFLOW-MODE!
That requires a bit more text so I will just write it here. Looks like it doesn't work</span>
</div>
</div>
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
</div>

76
res/html/index.html
Unescape Escape View File

@ -1,43 +1,37 @@
<html> <html>
<head> <head>
<title> Landing 1 </title> <title> Landing 1 </title>
</head> </head>
<body> <body>
<div class="header"> <div class="accentBar"></div>
<h1> RCN Landing </h1> <div class="app">
</div> <div class="actionList">
<div class="content"> <ul>
<img src="RCN-Logo.png" style="width: auto; height: 200px"/> <li onclick="navigate('index.htm', 'Home')">
<h1 class="title"> Home
Welcome to the Raspberry Communication Network. </li>
</h1> <li onclick="navigate('data.htm', 'Data')">
<p class="justify"> Data
The Raspberry pi Communication-Network is a network of Raspberry-Pi's. </li>
It's currently still in development. <br> The purpose of this server is to <li onclick="navigate('about.htm', 'About')">
display the status of all raspberry-pi's in the network and the data About
of several sensors that are connected to these raspberry pi's. The data </li>
is stored in a database running on the main backend-server. The </ul>
frontend-server is running either on a differend device or also on the </div>
backend-server-device. If this is the case, then the data is directly <div class="mainview" state="retracted">
fetched from several json files instead of using webservices. The json- <div class="navigationBar row">
files are generated by a script running in the background that get's <div class="menu" onclick="toggleActionMenu()">
data from the database and stores it in these json-files every few </div>
seconds (depending on the type of data). <div class="title">
</p> <span> Title </span>
<div class="spacer"> </div>
</div> </div>
<p class="justify"> <div class="content">
<script type="text/javascript">
</p> navigate('index.htm', 'Home');
</div> </script>
<div class="footer"> </div>
<p> </div>
This webpage and server can also be found on github: </div>
<a href="https://github.com/trivernis/rcn-frontserver"> </body>
RCN-Frontserver
</a>
| <i> GNU GPL v3.0 </i>
</p>
</div>
</body>
</html> </html>

1
res/img/icons/menu.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

Write Preview
Loading…
Cancel
Save