hyperion.ng/assets/webconfig/index.html
Michael Rochelle acdf733936
Audio Grabber Feature (#1570)
* Creating Audio Grabber

Creating Audio Grabber

Creating Audio Grabber.

Successfully began capturing audio in windows. Starting to implement a hard-coded UV Visualizer.

Got Windows DirectSound Implementation working.
Hardcoded basic VU Meter.

Begin working on linux audio grabber implementation.

Finished Linux Draft Implementation.
Minor Mods to windows implementation.

Windows:
 - Free memory used by device id.
 - Prevent starting audio if the grabber is disabled
 - More debug logging

Linux:
 - Prevent starting audio if the grabber is disabled

Added strings to english
Removed "custom" from device selection
Made hard-coded visualizer values configurable.
wrote values to imageData with BGR priority to enable configurable values to be set in RGB format.
created logic to support "Automatic" to enable the API to select the default device.

Add language key for audio in "Remote Control" section.
Removed audio configuration for number of channels. This was causing an error with some devices.

Fixed logic to update capture while its active.
Optimizing code .

UI Tweaks
Destructuring.

Fixed build error on linux.

Custom Effects - Clean-ups and Enhancements (#1163)

* Cleanup EffectFileHandler

* Support Custom Effect Schemas and align EffectFileHandler

* Change back to colon prefix for system effects

* WebSockets - Fix error in handling fragmented frames

* Correct missing colon updates

* Update json with image file location for custom gif effects

* Image effect deletion - considere full filename is stored in JSON

* Correct selection lists indentions

Creating Audio Grabber

Creating Audio Grabber

Creating Audio Grabber.

Successfully began capturing audio in windows. Starting to implement a hard-coded UV Visualizer.

Got Windows DirectSound Implementation working.
Hardcoded basic VU Meter.

Begin working on linux audio grabber implementation.

Finished Linux Draft Implementation.
Minor Mods to windows implementation.

Windows:
 - Free memory used by device id.
 - Prevent starting audio if the grabber is disabled
 - More debug logging

Linux:
 - Prevent starting audio if the grabber is disabled

Added strings to english
Removed "custom" from device selection
Made hard-coded visualizer values configurable.
wrote values to imageData with BGR priority to enable configurable values to be set in RGB format.
created logic to support "Automatic" to enable the API to select the default device.

Add language key for audio in "Remote Control" section.
Removed audio configuration for number of channels. This was causing an error with some devices.

Fixed logic to update capture while its active.
Optimizing code .

UI Tweaks
Destructuring.

Fixed build error on linux.

Commented setVideoMode from AudioGrabber.

Linux Threading changes.

Implementing new API

Continuing to implement audio into new APIs

Fixed Audio Grabber for DirectSound on Windows
Fixed UI for Audio Grabber Configuration
Default AUDIO to off unless specified.

fixed missing #ifdef for audio grabber.

Added logic to calculate a dynamic multiplier from the signal input.

Updating linux api for discovering devices.

Fixed HTML/JS issues with view.
Fixed NPE in Windows.
Disabled setting thread priority in linux.

updated the schema options check to pass through hidden states and commented the change.

Updated grabber start conditions
Updated Audio grabber to instantiate similar to video grabber

Updated windows grabber to set "started" flag to false when shutting down.
Removed "tryStart" to prevent enabling audio capture unnecessarily.

Fixing instance audio grabber device configuration

Added configurable resolution
Reduced tolerance to 5%
Fixed issue where grabber failed for additional instances when "start" was called multiple times.

Fixed resolution calculation

Change averaging algorithm to prevent overflowing the sum.

Updated logic to stop audio grabber when disabled.

Fix integer casting and rounding.

Restart grabber on configuration change.
Fix missing include/grabber/AudioGrabber.
Disable tolerance.

Added configurable tolerance.
Fixed tolerance algorithm.
reset multiplier on configuration change.

Line Endings

Proposed change and questions/request to fix

implementing more of LordGrey's suggestions.

Fix mode for snd_pcm_open. Latest ALSA uses SND_PCM_NONBLOCK instead of SND_PCM_OPEN_NONBLOCK
defaulted multiplier to 0 "auto"
defaulted tolerance to 20%

changed 100 to 100.0 for pixel value percentage calculation to fix value from being 0.

missed a 100 as a double so precision isn't lost during math operation.

Fix Windows grabber and further cleanups

Enable Audio grabbing in standard build

Remove empty methods

Fix audio capture priority setting

Remove unused code

Clean-up default config

Allow additional json-editor attributes

Allow multiple effects and resetting to defaults

Correct default values

Allow to build for Qt < 5.14

Update CodeQL build dependency

Update build dependencies

Remove effect1 placeholder

* Renamed uvMeter to VU Meter (Volume Unit)
- Fixed issues flagged by code scanning bot.

* Moved stop call into destructor of implementing class.

* Removed commented linux audio channel configuration logic.

---------

Co-authored-by: Michael Rochelle <michael@j2inn.com>
2023-02-19 09:36:39 +01:00

425 lines
18 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<script>
if (/MSIE/.test(navigator.userAgent) || /Trident/.test(navigator.userAgent)) {
window.location.pathname = '/content/ie_not_supported.html';
}
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="description" content="Hyperion Web Configuration">
<meta name="msapplication-TileColor" content="#91989C">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<title data-i18n="general_webui_title">Hyperion - Web Configuration</title>
<!-- jQuery - Prod -->
<script src="js/lib/jquery/jquery-3.6.0.min.js"></script>
<script src="js/lib/jquery/jquery-migrate-3.3.2.min.js"></script>
<!-- jQuery - Dev -->
<!--
<script src="js/lib/jquery/dev/jquery-3.6.0.js"></script>
<script src="js/lib/jquery/dev/jquery-migrate-3.3.2.js"></script>
-->
<!-- SemVer -->
<script src='js/lib/semver.js'></script>
<!-- md Stuff -->
<script src="js/lib/marked.min.js"></script>
<script type="text/javascript" src="js/lib/purify.min.js"></script>
<!-- Hyperion -->
<script src="js/hyperion.js"></script>
<script src="js/ui_utils.js"></script>
<!-- Colorpicker -->
<script src="js/lib/bootstrap-colorpicker.min.js"></script>
<!-- BS Notfiy -->
<script src="js/lib/bootstrap-notify.min.js"></script>
<!-- JSONEditor -->
<script src="js/lib/jsoneditor.js"></script>
<!-- PlainDraggable -->
<script src="js/lib/plain-draggable.min.js"></script>
<!-- LeaderLine -->
<script src="js/lib/leader-line.min.js"></script>
<!--Language Support -->
<script src="js/lib/jquery.i18n/jquery.i18n.js"></script>
<script src="js/lib/jquery.i18n/jquery.i18n.messagestore.js"></script>
<script src="js/lib/jquery.i18n/jquery.i18n.fallbacks.js"></script>
<script src="js/lib/jquery.i18n/jquery.i18n.parser.js"></script>
<script src="js/lib/jquery.i18n/jquery.i18n.emitter.js"></script>
<script src="js/lib/jquery.i18n/jquery.i18n.language.js"></script>
<script src="js/lib/jquery.i18n/CLDRPluralRuleParser.js"></script>
<script src="js/languages.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
<!-- BSToggle -->
<link href="css/bootstrap-toggle.min.css" rel="stylesheet">
<!-- BSSelect -->
<link href="css/bootstrap-select.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/metisMenu.min.css" rel="stylesheet">
<!-- Gijgo CSS -->
<link href="css/gijgo/core.min.css" rel="stylesheet">
<link href="css/gijgo/dialog.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<link href="css/hyperion.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Material Design Icons - https://github.com/Templarian/MaterialDesign-Webfont -->
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css">
<!-- Animate.css -->
<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<noscript>
<div style="color:red;margin: 40px 0;text-align:center">
<img src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!">
<h3>Hyperion Web Configuration requires Javascript. Please enable Javascript in your browser for this page in order to use it!</h3>
</div>
<style type="text/css">
#loading_overlay, #wrapper {
display: none
}
</style>
</noscript>
<div id="loading_overlay" class="overlay"></div>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0; min-height: 85px">
<div class="navbar-header">
<button type="button" class="navbar-toggle closed" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="https://www.hyperion-project.org" target="_blank"><img id="navbar_brand_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" height="80"></a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right" id="top-navbar">
<!-- Browser built in capture stream - streamer.js -->
<li class="dropdown" id="btn_streamer" style="display:none">
<!-- Hidden helpers -->
<canvas style="display:none" id="streamcanvas"></canvas>
<video style="display:none" id="streamvideo" autoplay></video>
<a>
<i id="btn_streamer_icon" class="fa fa-video-camera fa-fw"></i>
</a>
</li>
<li class="dropdown" id="btn_darkmode">
<a>
<i id="btn_darkmode_icon" class="fa fa-moon-o"></i>
</a>
</li>
<li class="dropdown" id="btn_open_ledsim">
<a>
<i class="fa fa-television fa-fw"></i>
</a>
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-magic fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li id="btn_wizard_byteorder">
<a>
<div>
<i class="fa fa-magic fa-fw"></i>
<span data-i18n="wiz_rgb_title"></span>
</div>
</a>
</li>
<li class="divider"></li>
<li id="btn_wizard_colorcalibration">
<a>
<div>
<i class="fa fa-magic fa-fw"></i>
<span data-i18n="wiz_cc_title"></span>
</div>
</a>
</li>
</ul>
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<!-- /.language selector -->
<li id="btn_setlang">
<a>
<div>
<i class="fa fa-globe fa-fw"></i>
<select id="language-select" class="selectpicker" data-width="fit" data-style="btn-transparent"> </select>
</div>
</a>
</li>
<li class="divider"></li>
<li id="btn_setaccess">
<a>
<div>
<i class="fa fa-wrench fa-fw"></i>
<span data-i18n="InfoDialog_access_title"></span>
</div>
</a>
</li>
<li class="divider"></li>
<li id="btn_changePassword">
<a>
<div>
<i class="fa fa-key fa-fw"></i>
<span data-i18n="InfoDialog_changePassword_title"></span>
</div>
</a>
</li>
</ul>
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-power-off fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li id="btn_systemSuspend">
<a>
<div>
<i class="fa fa-stop fa-fw"></i>
<span data-i18n="InfoDialog_systemSuspend_title"></span>
</div>
</a>
</li>
<li id="btn_systemResume">
<a>
<div>
<i class="fa fa-play fa-fw"></i>
<span data-i18n="InfoDialog_systemResume_title"></span>
</div>
</a>
</li>
<li class="divider"></li>
<li id="btn_systemRestart">
<a>
<div>
<i class="fa fa-refresh fa-fw"></i>
<span data-i18n="InfoDialog_systemRestart_title"></span>
</div>
</a>
</li>
</ul>
</li>
<!-- /.lock-ui -->
<li class="dropdown" id="btn_lock_ui" style="display:none">
<a>
<i class="fa fa-lock fa-fw"></i>
</a>
</li>
</ul>
<!-- /.navbar-top-left -->
<div id="main-nav" class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li> <a class="inactive mnava" href="#dashboard"><i class="fa fa-dashboard fa-fw"></i><span data-i18n="main_menu_dashboard_token">Dashboard</span></a> </li>
<li> <a class="inactive mnava" href="#conf_general"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_general_conf_token">General</span></a> </li>
<li>
<a class="inactive"><i class="fa fa-cog fa-fw"></i><span data-i18n="main_menu_configuration_token">LED-Instances</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li> <a class="inactive mnava" id="MenuItemLeds" href="#conf_leds"><i class="mdi mdi-lightbulb-on fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></a> </li>
<li> <a class="inactive mnava" id="MenuItemInstCapture" href="#conf_instcapture"><i class="fa fa-camera fa-fw"></i><span data-i18n="main_menu_instcapture_conf_token">Sources</span></a> </li>
<li> <a class="inactive mnava" href="#conf_effect"><i class="fa fa-spinner fa-fw"></i><span data-i18n="main_menu_effect_conf_token">Effects</span></a> </li>
<li> <a class="inactive mnava" href="#conf_colors"><i class="fa fa-photo fa-fw"></i><span data-i18n="main_menu_colors_conf_token">Image Processing</span></a> </li>
</ul>
</li>
<li> <a class="inactive mnava" id="MenuItemGrabber" href="#conf_grabber"><i class="fa fa-camera fa-fw"></i><span data-i18n="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li>
<li> <a class="inactive mnava" id="MenuItemNetwork" href="#conf_network"><i class="fa fa-sitemap fa-fw"></i><span data-i18n="main_menu_network_conf_token">Network</span></a> </li>
<li> <a class="inactive mnava" href="#remote"><i class="fa fa-wifi fa-fw"></i><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></a> </li>
<li> <a class="inactive mnava" id="MenuItemEffectsConfig" href="#effects_configurator"><i class="fa fa-cogs fa-fw"></i><span data-i18n="main_menu_effectsconfigurator_token">Effects Configurator</span></a> </li>
<li> <a class="inactive mnava" href="#support"><i class="fa fa-info fa-fw"></i><span data-i18n="main_menu_support_token">Support</span></a> </li>
<li>
<a class="inactive"><i class="fa fa-industry fa-fw"></i><span data-i18n="main_menu_system_token">System</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li> <a class="inactive mnava" id="MenuItemWeb" href="#conf_webconfig" id="load_webconfig"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_webconfig_token">Webconfiguration</span></a> </li>
<li> <a class="inactive mnava" id="MenuItemLogging" href="#conf_logging"><i class="fa fa-reorder fa-fw"></i><span data-i18n="main_menu_logging_token">Log</span></a> </li>
<li> <a class="inactive mnava" href="#update"><i class="fa fa-download fa-fw"></i><span data-i18n="main_menu_update_token">Update</span></a> </li>
<li> <a class="inactive mnava" href="#about"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="main_menu_about_token">About</span></a> </li>
</ul>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper" style="padding-top:10px; overflow: hidden;">
<div id="hyperion_disabled_notify" style="display:none;padding:0 10px;margin:0">
<div class="bs-callout bs-callout-danger">
<h4 data-i18n="dashboard_alert_message_disabled_t"></h4>
<span data-i18n="dashboard_alert_message_disabled"></span>
</div>
</div>
<div id="page-content"></div>
</div>
</div>
<!-- /#wrapper -->
<div id="container_connection_lost" style="display:none"></div>
<div id="container_restart" style="display:none"></div>
<!-- infoDialog -->
<div id="modal_dialog" class="modal fade" role="dialog" style="z-index:9999">
<div class="modal-dialog">
<center>
<div class="modal-content">
<div id="id_body" class="modal-body"></div>
<div id="id_footer" class="modal-footer" style="text-align:center"></div>
</div>
</center>
</div>
</div>
<!-- renameDialog -->
<div id="modal_dialog_rename" class="modal fade" role="dialog" style="z-index:9999">
<div class="modal-dialog">
<center>
<div class="modal-content">
<div id="id_body_rename" class="modal-body"></div>
<div id="id_footer_rename" class="modal-footer" style="text-align:center"></div>
</div>
</center>
</div>
</div>
<!-- wizardDialog -->
<div id="wizard_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div id="wiz_header" class="modal-header"></div>
<div id="wizp1">
<div class="modal-body" style="text-align:center">
<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
<div id="wizp1_body"></div>
</div>
<div id="wizp1_footer" class="modal-footer" style="text-align:center"></div>
</div>
<div id="wizp2" style="display:none">
<center>
<div class="modal-body">
<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
<div id="wizp2_body"></div>
</div>
</center>
<div id="wizp2_footer" class="modal-footer" style="text-align:center"></div>
</div>
<div id="wizp3" style="display:none">
<center>
<div class="modal-body">
<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
<div id="wizp3_body"></div>
</div>
</center>
<div id="wizp3_footer" class="modal-footer" style="text-align:center"></div>
</div>
</div>
</div>
</div>
<!-- ledsimDialog -->
<div id="ledsim_dialog" style="display:none; z-index:9998">
<div data-role="body" style="padding:0px;">
<div id="ledsim_text"></div>
<div id="leds_canvas">
<canvas id="image_preview_canv" style="position: absolute; left: 0; top: 0; z-index: 99998;"></canvas>
<canvas id="leds_preview_canv" style="position: absolute; left: 0; top: 0; opacity: 0.75; z-index: 99999;"></canvas>
<canvas id="grab_preview_canv" style="position: absolute; left: 0; top: 0; z-index: 99999;"></canvas>
</div>
</div>
<div data-role="footer" style="text-align:center">
<button type="button" class="btn btn-success" id="leds_toggle"><i class="fa fa-fw fa-lightbulb-o"></i><span data-i18n="main_ledsim_btn_toggleleds">leds</span></button>
<button type="button" class="btn btn-danger" id="leds_toggle_num"> <i class="fa fa-fw fa-info"></i><span data-i18n="main_ledsim_btn_togglelednumber">led numbers</span></button>
<button type="button" class="btn btn-danger" id="sigDetectArea_toggle"><i class="fa fa-fw fa-info"></i><span data-i18n="main_ledsim_btn_togglesigdetect">signal detection area</span></button>
<button type="button" class="btn btn-danger" id="leds_toggle_live_video"><i class="fa fa-fw fa-television"></i><span data-i18n="main_ledsim_btn_togglelivevideo">live video</span></button>
</div>
</div>
<!-- Bootstrap Core JavaScript -->
<script src="js/lib/bootstrap.min.js"></script>
<!-- BSToggle -->
<script src="js/lib/bootstrap-toggle.min.js"></script>
<!-- Bootstrap Select JavaScript -->
<script src="js/lib/bootstrap-select.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/lib/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/lib/sb-admin-2.js"></script>
<script src="js/content_index.js"></script>
<script src="js/settings.js"></script>
<script src="js/streamer.js"></script>
<script src="js/wizard.js"></script>
<!--gijgo dialog-->
<script src="js/lib/gijgo/core.min.js"></script>
<script src="js/lib/gijgo/draggable.min.js"></script>
<script src="js/lib/gijgo/dialog.min.js"></script>
<script src="js/ledsim.js"></script>
<!--Client-side download-->
<script src='js/lib/download.min.js'></script>
<!--JsonAceEditor-->
<script src='js/lib/jsonaceeditor.min.js'></script>
<link href="css/jsonaceeditor.min.css" rel="stylesheet" type="text/css">
</body>
</html>