popufare/busunit-PIU/html/js/piu_ui.js

/*
 * Copyright (c) 2021 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 _ADDRESS = "127.0.0.1";
//var _ADDRESS = "0.0.0.0";
var _URL = "http://" + _ADDRESS;
//var _PORT = 60535;
var _WS_PORT = 8001;
var _PORT = 8001;
var _VID_FEED_PORT = 8080;

var _fqADDRESS = _ADDRESS + ":" + _PORT;
//var _wsADDRESS = _ADDRESS + ":" + _WS_PORT;

// localhost causes ipv6 attempt first which ten falls
// back to ipv4 and takes upwards of 1s+ to connect.
// https://stackoverflow.com/a/15144195
//
// Use 127.0.0.1 instead
//
//var _wsADDRESS = "localhost" + ":" + _WS_PORT;
var _wsADDRESS = _ADDRESS +  ":" + _WS_PORT + "/ws";
//var _wsADDRESS = "192.168.0.26" +  ":" + _WS_PORT + "/ws";

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" : ""
};

var g_sock = null;

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(is12hour_format) {
  is12hour_format = ((typeof is12hour_format === "undefined") ? false : is12hour_format);
  var _dt = new Date();

  var _sep = ":";
  var ampm = "";

  if ( (_dt.getSeconds() % 2) == 0) {
    _sep = " ";
  }

  var _hr = _dt.getHours();
  var _min = _dt.getMinutes();

  if (is12hour_format) {
    if (_hr == 0) {
      _hr = 12;
      ampm = "AM";
    }
    else if (_hr >= 12) {
      if (_hr > 12) {
        _hr -= 12;
      }
      ampm = "PM";
    }
  }


  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 + " " + ampm;

  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 _update_display_time() {
  var ele = document.getElementById("ui_message_datetime");
  if (typeof ele === "undefined") { return; }
  var _time_str = _get_now_YYYY_MM_DD() + " " + _get_now_HH_MM(true);
  ele.innerHTML =  _time_str ;
}

//-------------

function _ws_process(dat) {
  console.log("_ws_process:", dat);

  var tok = dat.split(" ");
  if (tok.length < 1) { return; }

  var argv1 = ( (tok.length > 1) ? tok[1] : "");
  var argv2 = ( (tok.length > 2) ? tok[2] : "");

  var msg_payload = tok.slice(1).join(" ");

  if (tok[0] == "passenger_notify") {
    ui_setmessage("ui_message_cardinfo", msg_payload);
  }
  else if (tok[0] == "passenger_message") {
    ui_setmessage("ui_message_status", msg_payload);
  }


}


function _init_websocket() {
  var sock = new WebSocket("ws://" + _wsADDRESS);

  console.log("??? _init_websockets:", sock, "ws://" + _wsADDRESS);

  g_sock = sock;

  sock.onopen = function(e) { console.log("open", e); }
  sock.onmessage = function(e) { _ws_process(e.data); }

  sock.onclose = function(e) {
    console.log("close", e);
    setTimeout( function() { _init_websocket(); }, 1000);
  }

  sock.onerror = function(e) {
    console.log("error", e.message, e);
  }
}


//-------------

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;

  window.setInterval(_update_display_time, 200);

  _init_websocket();
}

// ui_message_status
// ui_message_cardinfo
// ui_message_datetime
//
function ui_setmessage(ui_id, msg) {
  var x = document.getElementById(ui_id);
  x.innerHTML = msg;
}

(function($) {
  $(document).ready(function() {
    init();
  });
})(jQuery);