From 7e6d6d0a37e37804e3a751e2bfde11a9c1e85b0b Mon Sep 17 00:00:00 2001 From: Romain Forlot Date: Sat, 29 Apr 2017 18:17:08 +0200 Subject: Adding HTML5 UI with cpu stat binding Change-Id: Id63b7d338140097a5f2f0943f1b63ee978141829 Signed-off-by: Romain Forlot --- .../app/Frontend/styles/bootstrap.scss | 56 ++++++ .../app/Frontend/styles/low-can-demo.scss | 187 +++++++++++++++++++++ 2 files changed, 243 insertions(+) create mode 100644 CAN-binder/low-can-demo/app/Frontend/styles/bootstrap.scss create mode 100644 CAN-binder/low-can-demo/app/Frontend/styles/low-can-demo.scss (limited to 'CAN-binder/low-can-demo/app/Frontend/styles') diff --git a/CAN-binder/low-can-demo/app/Frontend/styles/bootstrap.scss b/CAN-binder/low-can-demo/app/Frontend/styles/bootstrap.scss new file mode 100644 index 0000000..e72d1de --- /dev/null +++ b/CAN-binder/low-can-demo/app/Frontend/styles/bootstrap.scss @@ -0,0 +1,56 @@ +/*! + * Bootstrap v3.3.7 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +// Core variables and mixins +@import "bootstrap/variables"; +@import "bootstrap/mixins"; + +// Reset and dependencies +@import "bootstrap/normalize"; +@import "bootstrap/print"; +@import "bootstrap/glyphicons"; + +// Core CSS +@import "bootstrap/scaffolding"; +@import "bootstrap/type"; +@import "bootstrap/code"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; + +// Components +@import "bootstrap/component-animations"; +@import "bootstrap/dropdowns"; +@import "bootstrap/button-groups"; +@import "bootstrap/input-groups"; +@import "bootstrap/navs"; +@import "bootstrap/navbar"; +@import "bootstrap/breadcrumbs"; +@import "bootstrap/pagination"; +@import "bootstrap/pager"; +@import "bootstrap/labels"; +@import "bootstrap/badges"; +@import "bootstrap/jumbotron"; +@import "bootstrap/thumbnails"; +@import "bootstrap/alerts"; +@import "bootstrap/progress-bars"; +@import "bootstrap/media"; +@import "bootstrap/list-group"; +@import "bootstrap/panels"; +@import "bootstrap/responsive-embed"; +@import "bootstrap/wells"; +@import "bootstrap/close"; + +// Components w/ JavaScript +@import "bootstrap/modals"; +@import "bootstrap/tooltip"; +@import "bootstrap/popovers"; +@import "bootstrap/carousel"; + +// Utility classes +@import "bootstrap/utilities"; +@import "bootstrap/responsive-utilities"; diff --git a/CAN-binder/low-can-demo/app/Frontend/styles/low-can-demo.scss b/CAN-binder/low-can-demo/app/Frontend/styles/low-can-demo.scss new file mode 100644 index 0000000..d7e5213 --- /dev/null +++ b/CAN-binder/low-can-demo/app/Frontend/styles/low-can-demo.scss @@ -0,0 +1,187 @@ +html,body { + padding:0; + margin: 0 auto; + width:100%; + height:100%; + min-height:100%; + color: black; + background: #FFF; +} + +/* http://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo */ +.navbar-brand { + padding: 0px; +} +.navbar-brand>img { + height: 100%; + padding: 5px; + width: auto; +} +.navbar-right { + margin-right: 0; +} + +/* used in navbar to show/hide items depending on connection status */ +.not-connected .if-connecting { display: none; } +.not-connected .if-connected { display: none; } +.not-connected .if-started { display: none; } +.connecting .if-not-connected { display: none; } +.connecting .if-connected { display: none; } +.connecting .if-started { display: none; } +.connected .if-not-connected { display: none; } +.connected .if-connecting { display: none; } +.connected .if-started { display: none; } +.started .if-not-connected { display: none; } +.started .if-connecting { display: none; } +.started .if-connected { display: none; } + +.content{ + position: absolute; + left:0; + right:0; + bottom:0; + top: 50px; + padding:0; + overflow: hidden; +} + +.quad { + position: relative; + overflow: hidden; + width:100%; + height:50%; + padding:0; + margin: 0; + box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + border: 4px ridge silver; + border-radius: 15px; + text-align: left; +} + +.center { + display: table-cell; + width:100%; + height:100%; + vertical-align: middle; +} + +#quad1 { border-bottom-right-radius: 0;} +#quad2 { border-bottom-left-radius: 0; } +#quad3 { border-top-right-radius: 0; overflow: auto; } +#quad4 { border-top-left-radius: 0; } + +/* in quad 1 */ +#view1,#view2 { + position: relative; + width: auto !important; + height: auto !important; + min-width: 100%; + min-height: 100%; + display: block; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + -webkit-transform: translate(-50%,-50%); +} + +.number { text-align: center; vertical-align: middle; font: italic bold 12px monospace; } + +/* +#espan { position: absolute; left: 1em; bottom: 1em; } +#espeed { position: absolute; top: 30px; width: 100px; color: green; font-size: 28px; } + +#vspan { position: absolute; right: 1em; bottom: 1em; } +#vspeed { position: absolute; top: 16px; width: 100px; color: cyan; font-size: 42px; } +*/ + +#cluster { + position: absolute; + bottom:0; + left:0; + right:0; + background: rgba(50,50,50,.4); + height: 43%; + border-top: 2px outset silver; + border-top-left-radius: 50%; + border-top-right-radius: 50%; +} + +#torqueGauge { position: absolute; bottom: -2%; left: 1%; width: 14%; } +#rpmGauge { position: absolute; bottom: -4%; left: 16%; width: 21%; } +#speedGauge { position: absolute; bottom: -3%; left: 38%; width: 24%; } +#MAFGauge { position: absolute; bottom: -4%; right: 16%; width: 21%; } +#IATempGauge { position: absolute; bottom: -2%; right: 1%; width: 14%; } + +/* in quad 2 */ +#mapstreet { + position: absolute; + width: 100%; + height: 100%; +} + +#car { + position: absolute; + top: 50%; + left: 50%; + z-index: 2000; + +} + +#gaspan { position: absolute; bottom:0; left:0; right:0; background: rgba(200,200,200,.3); padding: 1em; z-index: 2000;} + +#gas { position: relative; float: right; width: 69px; height: 92px; } +#gas div { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } + +#copan { overflow: hidden; min-height: 50px; position: relative; height: 92px;} +#copan div { + display:inline; + position: absolute; + bottom: 0; + width: 10%; + height: 0%; + font-size: 10px; + color: black; + background: yellow; + border: 1px solid grey; + padding: 0; +} +#copan div p { + text-align: center; + position: absolute; + bottom: 2px; + margin: 0; + width: 100%; +} + +#con1 { left: 0%; } +#con2 { left: 11%; } +#con3 { left: 22%; } +#con4 { left: 33%; } +#con5 { left: 44%; } +#con6 { left: 55%; } +#con7 { left: 66%; } +#con8 { left: 77%; } +#con9 { left: 88%; } + +#gpblack { background: url(/images/gas-pump-black.png); } +#gpgreen { background: url(/images/gas-pump-green.png); } +#gpred { background: url(/images/gas-pump-red.png); visibility: hidden; } + +/* quad 3 */ +#xcdata { + text-align: left; +} + +.leaflet-control-layers-toggle { + background-image: url(/images/layers.png); +} + +/* quad 4 */ +#mapsat { + position: absolute; + width: 100%; + height: 100%; +} + -- cgit 1.2.3-korg