PIU wip

* setting up user interface
* not ready for production, still a work in progress

busunit-PIU/html/css/grids.css

@@ -0,0 +1,294 @@
+/*!
+Pure v1.0.1
+Copyright 2013 Yahoo!
+Licensed under the BSD License.
+https://github.com/pure-css/pure/blob/master/LICENSE.md
+*/
+/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
+
+.pure-g {
+    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
+    *letter-spacing: normal; /* reset IE < 8 */
+    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
+    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
+
+    /*
+    Sets the font stack to fonts known to work properly with the above letter
+    and word spacings. See: https://github.com/pure-css/pure/issues/41/
+
+    The following font stack makes Pure Grids work on all known environments.
+
+    * FreeSans: Ships with many Linux distros, including Ubuntu
+
+    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
+      Arial to get picked up by the browser, even though neither is available
+      in Chrome OS.
+
+    * Droid Sans: Ships with all versions of Android.
+
+    * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
+    */
+    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
+
+    /* Use flexbox when possible to avoid `letter-spacing` side-effects. */
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
+
+    /* Prevents distributing space between rows */
+    -webkit-align-content: flex-start;
+        -ms-flex-line-pack: start;
+            align-content: flex-start;
+}
+
+/* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+	table .pure-g {
+		display: block;
+	}
+}
+
+/* Opera as of 12 on Windows needs word-spacing.
+   The ".opera-only" selector is used to prevent actual prefocus styling
+   and is not required in markup.
+*/
+.opera-only :-o-prefocus,
+.pure-g {
+    word-spacing: -0.43em;
+}
+
+.pure-u {
+    display: inline-block;
+    *display: inline; /* IE < 8: fake inline-block */
+    zoom: 1;
+    letter-spacing: normal;
+    word-spacing: normal;
+    /* vertical-align: top; */
+    text-rendering: auto;
+}
+
+/*
+Resets the font family back to the OS/browser's default sans-serif font,
+this the same font stack that Normalize.css sets for the `body`.
+*/
+.pure-g [class *= "pure-u"] {
+    font-family: sans-serif;
+}
+
+.pure-u-1,
+.pure-u-1-1,
+.pure-u-1-2,
+.pure-u-1-3,
+.pure-u-2-3,
+.pure-u-1-4,
+.pure-u-3-4,
+.pure-u-1-5,
+.pure-u-2-5,
+.pure-u-3-5,
+.pure-u-4-5,
+.pure-u-5-5,
+.pure-u-1-6,
+.pure-u-5-6,
+.pure-u-1-8,
+.pure-u-3-8,
+.pure-u-5-8,
+.pure-u-7-8,
+.pure-u-1-12,
+.pure-u-5-12,
+.pure-u-7-12,
+.pure-u-11-12,
+.pure-u-1-24,
+.pure-u-2-24,
+.pure-u-3-24,
+.pure-u-4-24,
+.pure-u-5-24,
+.pure-u-6-24,
+.pure-u-7-24,
+.pure-u-8-24,
+.pure-u-9-24,
+.pure-u-10-24,
+.pure-u-11-24,
+.pure-u-12-24,
+.pure-u-13-24,
+.pure-u-14-24,
+.pure-u-15-24,
+.pure-u-16-24,
+.pure-u-17-24,
+.pure-u-18-24,
+.pure-u-19-24,
+.pure-u-20-24,
+.pure-u-21-24,
+.pure-u-22-24,
+.pure-u-23-24,
+.pure-u-24-24 {
+    display: inline-block;
+    *display: inline;
+    zoom: 1;
+    letter-spacing: normal;
+    word-spacing: normal;
+    vertical-align: top;
+    text-rendering: auto;
+}
+
+.pure-u-1-24 {
+    width: 4.1667%;
+    *width: 4.1357%;
+}
+
+.pure-u-1-12,
+.pure-u-2-24 {
+    width: 8.3333%;
+    *width: 8.3023%;
+}
+
+.pure-u-1-8,
+.pure-u-3-24 {
+    width: 12.5000%;
+    *width: 12.4690%;
+}
+
+.pure-u-1-6,
+.pure-u-4-24 {
+    width: 16.6667%;
+    *width: 16.6357%;
+}
+
+.pure-u-1-5 {
+    width: 20%;
+    *width: 19.9690%;
+}
+
+.pure-u-5-24 {
+    width: 20.8333%;
+    *width: 20.8023%;
+}
+
+.pure-u-1-4,
+.pure-u-6-24 {
+    width: 25%;
+    *width: 24.9690%;
+}
+
+.pure-u-7-24 {
+    width: 29.1667%;
+    *width: 29.1357%;
+}
+
+.pure-u-1-3,
+.pure-u-8-24 {
+    width: 33.3333%;
+    *width: 33.3023%;
+}
+
+.pure-u-3-8,
+.pure-u-9-24 {
+    width: 37.5000%;
+    *width: 37.4690%;
+}
+
+.pure-u-2-5 {
+    width: 40%;
+    *width: 39.9690%;
+}
+
+.pure-u-5-12,
+.pure-u-10-24 {
+    width: 41.6667%;
+    *width: 41.6357%;
+}
+
+.pure-u-11-24 {
+    width: 45.8333%;
+    *width: 45.8023%;
+}
+
+.pure-u-1-2,
+.pure-u-12-24 {
+    width: 50%;
+    *width: 49.9690%;
+}
+
+.pure-u-13-24 {
+    width: 54.1667%;
+    *width: 54.1357%;
+}
+
+.pure-u-7-12,
+.pure-u-14-24 {
+    width: 58.3333%;
+    *width: 58.3023%;
+}
+
+.pure-u-3-5 {
+    width: 60%;
+    *width: 59.9690%;
+}
+
+.pure-u-5-8,
+.pure-u-15-24 {
+    width: 62.5000%;
+    *width: 62.4690%;
+}
+
+.pure-u-2-3,
+.pure-u-16-24 {
+    width: 66.6667%;
+    *width: 66.6357%;
+}
+
+.pure-u-17-24 {
+    width: 70.8333%;
+    *width: 70.8023%;
+}
+
+.pure-u-3-4,
+.pure-u-18-24 {
+    width: 75%;
+    *width: 74.9690%;
+}
+
+.pure-u-19-24 {
+    width: 79.1667%;
+    *width: 79.1357%;
+}
+
+.pure-u-4-5 {
+    width: 80%;
+    *width: 79.9690%;
+}
+
+.pure-u-5-6,
+.pure-u-20-24 {
+    width: 83.3333%;
+    *width: 83.3023%;
+}
+
+.pure-u-7-8,
+.pure-u-21-24 {
+    width: 87.5000%;
+    *width: 87.4690%;
+}
+
+.pure-u-11-12,
+.pure-u-22-24 {
+    width: 91.6667%;
+    *width: 91.6357%;
+}
+
+.pure-u-23-24 {
+    width: 95.8333%;
+    *width: 95.8023%;
+}
+
+.pure-u-1,
+.pure-u-1-1,
+.pure-u-5-5,
+.pure-u-24-24 {
+    width: 100%;
+}

busunit-PIU/html/css/piustyles.css

@@ -0,0 +1,426 @@
+/*
+ * Copyright (c) 2019 Clementine Computing LLC.
+ *
+ * This file is part of PopuFare.
+ *
+ * PopuFare is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * PopuFare is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with PopuFare.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ */
+
+#ui_test {
+  position:absolute;
+  visibility:hidden;
+  height:auto;
+  width:auto;
+  white-space:nowrap;
+
+  font-size: 3vw;
+  letter-spacing: 0.125vw;
+  font-weight:bold;
+  font-family: monospace;
+}
+
+#dim_overlay {
+  opacity:0.0;
+  background: #000000;
+  position:absolute;
+  height: 120vh;
+  width: 120vw;
+
+  margin-left: -5vw;
+  margin-top: -5vh;
+
+  pointer-events:none;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: #efefef;
+  color: hsl(240,30,10);
+  text-align: center;
+
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+
+	overflow: hidden;
+}
+
+h1 {
+  margin: 3em 0 2em;
+}
+
+p:focus {
+  border:0;
+}
+
+.textwindow {
+  float: left;
+  color: #444444;
+  font-size: 3vw;
+  letter-spacing: 0.125vw;
+  font-weight:bold;
+  font-family: monospace;
+  outline: thin solid #999999;
+  background: #f7f7f7;
+  /* width:90vw; */
+  width:95vw;
+  /* height:60vh; */
+  height:70vh;
+  overflow:hidden;
+}
+
+.textwindowmain {
+  float: left;
+  color: #444444;
+  font-size: 3vw;
+  letter-spacing: 0.125vw;
+  font-weight:bold;
+  font-family: monospace;
+  outline: thin solid #999999;
+  background: #f7f7f7;
+  width:63vw;
+  height:50vh;
+  overflow:hidden;
+}
+
+.textrow {
+  padding-left: 0.5vw;
+  float:left;
+  width: 100%;
+  text-align:left;
+}
+
+.textrow.accept {
+  background: #44cc44;
+  color: #444444;
+}
+
+.textrow.reject {
+  background: #cc4444;
+  color: #dddddd;
+}
+
+.textrow.error {
+  background: #ff7f33;
+  color: #444444;
+}
+
+/***********/
+
+.bkeyFull {
+  width: 96vw;
+  height:96vh;
+}
+
+.row4 { height: 20vh; }
+.row5 { height: 15vh; }
+
+
+body { letter-spacing: 0.25em; }
+
+.row { height: 160px; }
+.col { width: 160px; }
+
+.bdisp {
+  font-size: 12vh;
+  margin-top: 1vh;
+  margin-right: 1vw;
+
+  font-weight: bold;
+  color: #444444;
+  margin-left: auto;
+
+  background: none;
+  border: none;
+
+}
+
+.bdispSmall {
+  font-size: 4vh;
+  margin-top: 1vh;
+  margin-right: 1vw;
+
+  font-weight: bold;
+  color: #444444;
+  margin-left: auto;
+
+  background: none;
+  border: none;
+
+}
+
+.bstatus  { font-size: 6vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
+.bstatus  { font-size: 6vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
+.bdrop    { font-size: 6vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
+.bkey         { width: 20vh; height: 20vh; }
+
+.bkeyFull     { width: 96vw; height: 96vh; }
+.bkeyNarrow   { width: 12vw; height: 25vh; }
+
+.bkeyTimeLogin     {
+  width:20vw;
+  height:12vh;
+  color:#bb4444;
+  font-family: monospace;
+  font-size: 12vh;
+  margin-top:1vh;
+}
+
+.bkeyDateLogin {
+  width:20vw;
+  height:6vh;
+  font-family: monospace;
+  /* font-size: 3.5vh; */
+  font-size: 5vh;
+  margin-left:1.75vw;
+}
+
+
+.bkeyTime     {
+  width:16vw;
+  height:10vh;
+  color:#bb4444;
+  font-family: monospace;
+  font-size: 8vh;
+}
+
+.bkeyDate {
+  width:16vw;
+  height:6vh;
+  font-family: monospace;
+  font-size: 3.5vh;
+}
+
+.bkeyTimeBig  { width:16vw; height:10vh; }
+
+.bkeyw      { width: 25vw; height: 17vh; }
+.bkeym      { width: 20vw; height: 17vh; }
+.bkeyHuge   { width: 80vw; height: 80vh; }
+.bfieldinp  { width: 18vh; height: 22vh; }
+
+.bdisp:focus { outline:0; }
+
+.bmsg {
+  font-weight: bold;
+  color: #444444;
+  background: #ADD8E6;
+}
+.bmsg:focus { outline:0; }
+
+.bstatus {
+  font-weight: bold;
+  color: #444444;
+}
+.bstatus:focus { outline:0; }
+
+.bdrop {
+  font-weight: bold;
+  color: #444444;
+  background: none;
+}
+.bdrop:focus {
+  outline:0;
+}
+
+
+.bdropinp {
+  font-weight: bold;
+  color: #444444;
+
+  background: none;
+
+  -webkit-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+  -moz-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+  transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+
+  font-size: 6vh;
+  border: solid .3vw #888888;
+  box-shadow: .5vw .5vw 0px #aaaaaa;
+
+}
+
+.bdropdark {
+  font-weight: bold;
+  color: #444444;
+
+  background: none;
+
+  -webkit-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+  -moz-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+  transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+
+  font-size: 6vh;
+  border: solid .3vw #000000;
+  box-shadow: .5vw .5vw 0px #000000;
+
+}
+
+.bdropinp.ltyellow  { background: #ffffbb; }
+
+.bdropinp.mny       { color: #446444; background: #efefef; }
+.bdropinp.blk       { color: #444444; }
+.bdropinp.mnu       { color: #444444; }
+.bdropinp.logout    { color: #aa4444; background: #efe3e3; }
+.bdropinp.options   { color: #aa4444; background: #efe3e3; }
+.bdropinp.highlight { background: #aaaaff; }
+.bdropinp.dim       { background: #efefef; }
+
+.bdropinp:focus     { outline:0; }
+.bdropinp:active {
+  margin-left:1vw;
+  background: #aaaaaa;
+
+  -webkit-transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;
+  -moz-transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;
+  transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;
+
+  -webkit-box-shadow: 0px 0px 0px #8e44ad;
+  -moz-box-shadow: 0px 0px 0px #8e44ad;
+  box-shadow: 0px 0px 0px #8e44ad;
+}
+
+/***********/
+
+
+.bkey:focus       { outline:0; }
+.bkeym:focus      { outline:0; }
+.bkeyw:focus      { outline:0; }
+.bkeyHuge:focus   { outline:0; }
+.bfieldinp:focus  { outline:0; }
+
+.btnprv {
+  position: absolute;
+  left: 83vw;
+  top: 5vh;
+
+  /*
+  background: #efefdf;
+  */
+}
+
+.btnnxt {
+  position: absolute;
+  left: 83vw;
+  top: 30vh;
+
+  /*
+  background: #efefdf;
+  */
+
+}
+
+#mainstatus {
+  font-family: "Courier New";
+  font-weight:bold;
+  font-family: monospace;
+
+  font-size: 3.85vh;
+  letter-spacing: 0.125vw;
+  color: #d7d644;
+
+  position:absolute;
+  bottom:0;
+  width:110%;
+  height: 6vh;
+  background:#555555;
+  margin-left: -7vw;
+}
+
+.rowmain0 {
+  position: absolute;
+  top: 50%;
+}
+
+.rowmain1 {
+  position: absolute;
+  top: 70%;
+}
+
+.invisiblock {
+  background-color: rgba(0,0,0,0);
+  border: none !important;
+  font-size: 0;
+  position: fixed;
+  z-index: 2;
+  outline:0;
+}
+
+/* slider range css */
+
+/*
+ * https://codepen.io/noahblon/pen/OyajvN
+ */
+
+input[type="range"] {
+	margin: auto;
+	-webkit-appearance: none;
+	position: relative;
+	overflow: hidden;
+	height: 20vh;
+	width: 40vw;
+	cursor: pointer;
+	border-radius: 0; /* iOS */
+}
+
+input[type="range"].wide {
+  width: 40vw;
+}
+
+input[type="range"]:focus {
+  outline:none;
+}
+
+::-webkit-slider-runnable-track {
+  background: #ddd;
+}
+
+/*
+ * 1. Set to 0 width and remove border for a slider without a thumb
+ */
+
+::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	height: 20vh;
+	width: 5vw;
+	background: #efefef;
+	box-shadow: -100vw 0 0 100vw #555555;
+	border: 2px solid #999;
+}
+
+::-moz-range-track {
+  height: 20vh;
+	background: #ddd;
+}
+
+::-moz-range-thumb {
+	background: #fff;
+	height: 20vh;
+	width: 10vw;
+	border: 3px solid #999;
+	border-radius: 0 !important;
+	box-shadow: -100vw 0 0 100vw #555555;
+	box-sizing: border-box;
+}
+
+::-ms-fill-lower {
+  background: #555555;
+}

busunit-PIU/html/index.html

@@ -0,0 +1,121 @@
+<!--
+
+  Copyright (c) 2019 Clementine Computing LLC.
+
+  This file is part of PopuFare.
+
+  PopuFare is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  PopuFare is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with PopuFare.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+
+<meta charset='utf-8'/>
+<html>
+
+  <head>
+    <link rel="stylesheet" href="css/piustyles.css">
+    <link rel="stylesheet" href="css/grids.css">
+  </head>
+
+  <body id='body' >
+
+    <div id='dim_overlay' style='z-index:1001;'></div>
+
+    <!--
+      an optional clock display under 'quick dim' mode
+    -->
+    <div id='ui_dimclock' style='z-index:1000; display:none; background:#000000; width:120vw; height:120vh; margin-left:-2vw; margin-top:-2vh;'>
+      <div style='width:100%; height:100%;'>
+        <div class='pure-g row' style='width:100%; height:100%;' >
+          <div class='pure-u-1-6 col' style='position:absolute; top:10vh; margin-left:10vw;'>
+
+            <button onmousedown='_beep();' class='bdropdark bkeyHuge' id='ui_dimclock_btn'>
+              <span id='ui_dimclock_clock' class='bkeyTime' style='font-size:16vh;'> ok </span> <br>
+              <span id='ui_dimclock_date' class='bkeyDate' style='font-size:8vh;'> ok </span> <br>
+            </button>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id='ui_test'>X</div>
+
+    <!-- ************************* -->
+    <!-- ******            ******* -->
+    <!-- ******  Watchdog  ******* -->
+    <!-- ******            ******* -->
+    <!-- ************************* -->
+
+    <div id='ui_watchdog' style='display:none;'>
+
+      <div style='width:100%; height:100%;'>
+
+        <div class='pure-g row' style='width:100%; height:100%;' >
+          <div class='pure-u-1-6 col' style=' position:absolute; top:10vh; margin-left:10vw; '>
+            <button onmousedown='_beep();' class='bdropinp bkeyHuge' id='ui_watchdog_btn'>Watchdog Timer Expired! <br> Press Button to Reset UI </button>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <!-- ************************* -->
+    <!-- ******            ******* -->
+    <!-- ******   main     ******* -->
+    <!-- ******            ******* -->
+    <!-- ************************* -->
+
+
+    <!-- <div id='ui_main' style='display:none;'> -->
+    <div id='ui_main'>
+
+      <div class='pure-g row'>
+        <div class='pure-u-1-12 col'>
+          <!-- <div class='bdisp' style='color:#aaaaaa;'>o k 1 2 3 4</div> <br> -->
+        </div>
+
+        <div class='pure-u-5-6 col'>
+          <div class='bdisp' style='color:#999a99;' >READY</div> <br>
+          <img id='ui_main_vidfeed' style='height:50vh;' src='' ></img> <br>
+          <div class='bdisp'>5 RIDES LEFT</div>
+        </div>
+
+        <div class='pure-u-1-12 col'></div>
+
+      </div>
+
+      <div id="mainstatus">
+        2020-04-11 09:50 AM
+      </div>
+
+    </div> <!-- ui_main -->
+
+    <!-- ********************** -->
+    <!-- ******         ******* -->
+    <!-- ******   END   ******* -->
+    <!-- ******         ******* -->
+    <!-- ********************** -->
+
+  </body>
+
+  <script src='js/moment.js'></script>
+
+  <script src='js/jquery.js'></script>
+  <script src='js/jquery-ui.js'></script>
+
+  <script src='js/piu_ui_site_specific.js'></script>
+  <script src='js/piu_ui.js'></script>
+
+</html>

busunit-PIU/html/js/piu_ui.js

@@ -0,0 +1,310 @@
+/*
+ * Copyright (c) 2019 Clementine Computing LLC.
+ *
+ * This file is part of PopuFare.
+ *
+ * PopuFare is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * PopuFare is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with PopuFare.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ */
+
+var _ADDRESS = "localhost";
+var _URL = "http://" + _ADDRESS;
+var _PORT = 60535;
+var _VID_FEED_PORT = 8080;
+
+var _fqADDRESS = _ADDRESS + ":" + _PORT;
+
+var BG_COLOR = "#f7f7f7";
+var TEXT_COLOR = "#444444";
+
+var PIU_UI_VERSION = "0.1.0";
+var PIU_UI_VERSION_DATE = "2020-04-11";
+
+var g_snd = {
+  "reject_fare" : "",
+  "accept_fare" : "",
+  "rule_error" : "",
+  "button_press" : ""
+};
+
+
+function _beep_error() {
+  g_snd.rule_error.currentTime=0;
+  g_snd.rule_error.play();
+}
+
+function _beep_reject() {
+  g_snd.reject_fare.currentTime=0;
+  g_snd.reject_fare.play();
+}
+
+function _beep_accept() {
+  g_snd.accept_fare.currentTime=0;
+  g_snd.accept_fare.play();
+}
+
+function _beep() {
+  g_snd.button_press.currentTime=0;
+  g_snd.button_press.play();
+}
+
+
+var g_ctx = {
+  "current_ui" : "ui_main",
+  "ui_stack" : [],
+
+  "ui_change_timeoutid": -1,
+  "ui_watchdog_timeoutid": -1,
+
+  "status_text": "",
+  "status_text_w": 32,
+  "status_text_h": 11,
+
+  "status_html_text":"",
+
+  "piu_status" : {
+    "last_update" : -1
+  },
+
+  // system config
+  //
+  "config" : {
+    "last_update": -1,
+    "volume": 100,
+    "brightness": 100,
+    "showdimclock": 0
+  },
+
+  "x": ""
+};
+
+
+function _clear_ui_watchdog() {
+  if (g_ctx.ui_watchdog_timeoutid >= 0) {
+    window.clearTimeout(g_ctx.ui_watchdog_timeoutid);
+  }
+}
+
+function _set_ui_watchdog(failsafe_ui, _dt) {
+
+  // default to 'ui_watchdog' and 5s
+  //
+  failsafe_ui = (( typeof failsafe_ui === "undefined") ? "ui_watchdog" : failsafe_ui);
+  _dt = (( typeof _dt === "undefined") ? 5000 : _dt);
+
+  _clear_ui_watchdog();
+
+  g_ctx.ui_watchdog_timeoutid = window.setTimeout(
+    (function(_fsui) {
+      return function() { console.log("???", _fsui); _switch_ui(_fsui); };
+    })(failsafe_ui),
+    _dt);
+
+}
+
+
+
+function _switch_ui(to) {
+  var ele;
+
+  if (g_ctx.ui_change_timeoutid > 0) {
+    window.clearTimeout(g_ctx.ui_change_timeoutid);
+    g_ctx.ui_change_timeoutid = -1;
+  }
+
+  var from = g_ctx.current_ui;
+
+  ele = document.getElementById(from);
+  ele.style.display = "none";
+
+  ele = document.getElementById(to);
+  ele.style.display = "block";
+
+  g_ctx.current_ui = to;
+
+  if (to == "ui_main") {
+    var _x = _calculate_ui_main_status_width_height();
+    g_ctx.status_text_h = _x.n_height;
+    g_ctx.status_text_w = _x.n_width;
+  }
+
+  if ((to == "ui_main") ||
+      (to == "ui_login")) {
+    _block_status_window(to);
+  }
+
+}
+
+function _hide_ui(from) {
+  var ele = document.getElementById(from);
+  ele.style.display = "none";
+}
+
+function _hide_ui_element(from) {
+  var ele = document.getElementById(from);
+  ele.style.display = "none";
+}
+
+function _show_ui(to) {
+  var ele = document.getElementById(to);
+  ele.style.display = "block";
+
+  g_ctx.current_ui = to;
+
+  // put pane over status window to prevent highlights,
+  // copy/pasting, etc.
+  //
+  if ((to == "ui_main") ||
+      (to == "ui_login")) {
+    _block_status_window(to);
+  }
+
+}
+
+function _show_ui_element(to) {
+  var ele = document.getElementById(to);
+  ele.style.display = "block";
+}
+
+function _get_now_HH_MM() {
+  var _dt = new Date();
+
+  var _sep = ":";
+
+  if ( (_dt.getSeconds() % 2) == 0) {
+    _sep = " ";
+  }
+
+  var _hr = _dt.getHours();
+  var _min = _dt.getMinutes();
+
+  var _hr_str = _hr.toString();
+  var _min_str = _min.toString();
+
+  if (_hr < 10) { _hr_str = "0" + _hr_str; }
+  if (_min < 10) { _min_str = "0" + _min_str; }
+
+  var _time_str = _hr_str + _sep + _min_str;
+
+  return _time_str;
+}
+
+function _get_now_YYYY_MM_DD() {
+  var _dt = new Date();
+
+  var _sep = "-";
+
+  var _yr = _dt.getFullYear();
+  var _mo = _dt.getMonth()+1;
+  var _dy = _dt.getDate();
+
+  var _yr_str = _yr.toString();
+  var _mo_str = _mo.toString();
+  if (_mo < 10) {
+    _mo_str = "0" + _mo_str;
+  }
+  var _dy_str = _dy.toString();
+  if (_dy < 10) {
+    _dy_str = "0" + _dy_str;
+  }
+
+  return _yr_str + _sep + _mo_str + _sep + _dy_str;
+}
+
+//------------
+
+// value is from [0,1]
+//
+function _process_brightness(brightness, update_system) {
+
+  // 0 opacity is completely clear, so (1.0) brightness (100% brightness).
+  //
+  var f_brightness = parseFloat(brightness);
+  var opacity = 1.0 - f_brightness;
+
+  // fail
+  //
+  if ((opacity < 0.0) || (opacity > 1.0)) { return {"type":"error", "msg":"opacity out of range"}; }
+
+  var ele = document.getElementById("dim_overlay");
+  ele.style.opacity = opacity;
+
+  ele = document.getElementById("ui_configuration_displaybrightness");
+  ival = Math.floor(f_brightness*100.0);
+  ele.innerHTML = "" + ival + "%";
+
+  g_ctx.config.brightness = ival;
+
+  if (update_system) { _set_system_config(); }
+}
+
+//------------
+
+// volume is from [0,1]
+//
+function _process_volume(vol, update_system) {
+  var ele = document.getElementById("ui_configuration_displayvolume");
+  ivol = Math.floor(vol*100.0);
+
+  if (ivol < 0)   { ivol = 0; }
+  if (ivol > 100) { ivol = 100; }
+
+  ele.innerHTML = "" + ivol + "%";
+
+  g_ctx.config.volume = ivol;
+
+  if (update_system) { _set_system_config(); }
+}
+
+var _rate_limit_beep_t = -1.0;
+var _rate_limit_beep_dt = 250;
+function _rate_limit_beep() {
+  if (_rate_limit_beep_t<0) {
+    _rate_limit_beep_t = Date.now();
+  }
+  if (Date.now() > (_rate_limit_beep_t + _rate_limit_beep_dt)) {
+    _rate_limit_beep_t = Date.now();
+    _beep();
+  }
+}
+
+function _watchdog_tripped(inp)   {
+  console.log("watchdog UI expired!...");
+  _reset();
+}
+
+
+function _init_dim_overlay() {
+  var ele = document.getElementById("ui_dim_overlay");
+}
+
+function init() {
+  _init_dim_overlay();
+
+  g_snd.button_press = new Audio("assets/459992_florianreichelt_beep_short.mp3");
+  g_snd.accept_fare = new Audio("assets/389214__joe-anderson22__microwave-beeps.mp3");
+  g_snd.reject_fare = new Audio("assets/368780__gurie__start-sound-beep.mp3");
+  g_snd.rule_error = new Audio("assets/363920__samsterbirdies__8-bit-error.mp3");
+
+  var ele = document.getElementById('ui_main_vidfeed');
+  ele.src = _URL + ":" + _VID_FEED_PORT;
+
+}
+
+(function($) {
+  $(document).ready(function() {
+    init();
+  });
+})(jQuery);
+

busunit-PIU/html/js/piu_ui_site_specific.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2019 Clementine Computing LLC.
+ *
+ * This file is part of PopuFare.
+ *
+ * PopuFare is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * PopuFare is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with PopuFare.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ */
+
+

busunit/DIUv2/html/css/grids.css

@@ -134,6 +134,7 @@ this the same font stack that Normalize.css sets for the `body`.
     word-spacing: normal;
     vertical-align: top;
     text-rendering: auto;
+    font-family: sans-serif;
 }
 
 .pure-u-1-24 {