c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a bar opening graph

Browse source
This commit is contained in:
Henri Bergius 2017-12-05 12:27:48 +01:00
parent 3ea503a2dc
commit 3bea96f808
1 changed files with 32 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
bar-status/index.html
View file

@ -5,18 +5,10 @@
<title>c-base bar status</title> <title>c-base bar status</title>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script> <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script> <script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="../node_modules/plotly.js/dist/plotly.min.js"></script>
<script src="../dist/infoscreens.js"></script> <script src="../dist/infoscreens.js"></script>
<link rel="stylesheet" href="../theme/c-base.css"> <link rel="stylesheet" href="../theme/c-base.css">
<style> <style>
h1 {
font-size: 8vmin;
width: 100vw;
text-align: center;
margin: 0px;
margin-top: 5vh;
padding: 0px;
line-height: 10vmin;
}
h2 { h2 {
font-size: 3vmin; font-size: 3vmin;
margin: 0px; margin: 0px;
@ -31,6 +23,7 @@
margin-top: 5vh; margin-top: 5vh;
margin-bottom: 5vh; margin-bottom: 5vh;
display: flex; display: flex;
height: 50vh;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
@ -39,25 +32,44 @@
main section { main section {
margin: 2px; margin: 2px;
} }
cbase-linechart {
margin-left: auto;
margin-right: auto;
display: block;
width: 90vw;
height: 40vh;
}
cbase-currentstate { cbase-currentstate {
display: block; display: block;
width: 20vw; width: 20vw;
height: 20vh; height: 20vh;
} }
cbase-time { cbase-time, h1 {
font-family: 'ceva', sans-serif; font-family: 'ceva', sans-serif;
margin-top: 10vh; font-weight: normal;
display: block; font-size: 6vmin;
text-align: center; line-height: 10vh;
margin-left: auto;
margin-right: auto;
font-size: 8vmin;
color: #fff; color: #fff;
margin: 0px;
padding: 0px;
}
#screen-title {
text-align: left;
padding-left: 3vw;
position: absolute;
left: 0px;
bottom: 0px;
}
#current-time {
position: absolute;
right: 0px;
bottom: 0px;
text-align: right;
padding-right: 3vw;
} }
</style> </style>
</head> </head>
<body class="station"> <body class="station">
<h1>current drinks status</h1>
<main> <main>
<section> <section>
<h2>bar status</h2> <h2>bar status</h2>
@ -92,7 +104,9 @@
<cbase-currentstate timeseries="bar.replicator.7" interval="120"></cbase-currentstate> <cbase-currentstate timeseries="bar.replicator.7" interval="120"></cbase-currentstate>
</section> </section>
</main> </main>
<cbase-time interval="1"></cbase-time> <cbase-linechart timeseries="bar.open crew.online" shape="vhv" width="84" height="30"></cbase-linechart>
<h1 id="screen-title">c-base bar</h1>
<cbase-time id="current-time" interval="1" format="HH:MM"></cbase-time>
</body> </body>
</html> </html>