remove 3d view aka mathbox since it consumes more than 1MB data per
visit
This commit is contained in:
Jakob Ketterl
parent
922a5ed607
commit
2ea8812fda
@ -261,20 +261,6 @@ waterfall_auto_level_margin = (5, 40)
|
|||||||
# \_waterfall_auto_level_margin[0]_/ |__ current_min_power_level | \_waterfall_auto_level_margin[1]_/
|
# \_waterfall_auto_level_margin[0]_/ |__ current_min_power_level | \_waterfall_auto_level_margin[1]_/
|
||||||
# current_max_power_level __|
|
# current_max_power_level __|
|
||||||
|
|
||||||
# 3D view settings
|
|
||||||
mathbox_waterfall_frequency_resolution = 128 # bins
|
|
||||||
mathbox_waterfall_history_length = 10 # seconds
|
|
||||||
mathbox_waterfall_colors = [
|
|
||||||
0x000000FF,
|
|
||||||
0x2E6893FF,
|
|
||||||
0x69A5D0FF,
|
|
||||||
0x214B69FF,
|
|
||||||
0x9DC4E0FF,
|
|
||||||
0xFFF775FF,
|
|
||||||
0xFF8A8AFF,
|
|
||||||
0xB20000FF,
|
|
||||||
]
|
|
||||||
|
|
||||||
# === Experimental settings ===
|
# === Experimental settings ===
|
||||||
# Warning! The settings below are very experimental.
|
# Warning! The settings below are very experimental.
|
||||||
csdr_dynamic_bufsize = False # This allows you to change the buffering mode of csdr.
|
csdr_dynamic_bufsize = False # This allows you to change the buffering mode of csdr.
|
||||||
|
|||||||
@ -288,13 +288,6 @@ input[type=range]:focus::-ms-fill-upper
|
|||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#openwebrx-mathbox-container
|
|
||||||
{
|
|
||||||
flex-grow: 1;
|
|
||||||
overflow: none;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#openwebrx-log-scroll
|
#openwebrx-log-scroll
|
||||||
{
|
{
|
||||||
/*overflow-y:auto;*/
|
/*overflow-y:auto;*/
|
||||||
|
|||||||
@ -24,7 +24,6 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>OpenWebRX | Open Source SDR Web App for Everyone!</title>
|
<title>OpenWebRX | Open Source SDR Web App for Everyone!</title>
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />
|
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />
|
||||||
<script src="static/mathbox-bundle.min.js"></script>
|
|
||||||
<script src="static/openwebrx.js"></script>
|
<script src="static/openwebrx.js"></script>
|
||||||
<script src="static/lib/jquery-3.2.1.min.js"></script>
|
<script src="static/lib/jquery-3.2.1.min.js"></script>
|
||||||
<script src="static/lib/jquery.nanoscroller.js"></script>
|
<script src="static/lib/jquery.nanoscroller.js"></script>
|
||||||
@ -45,7 +44,6 @@
|
|||||||
<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
|
<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="openwebrx-mathbox-container"> </div>
|
|
||||||
<div id="webrx-canvas-background">
|
<div id="webrx-canvas-background">
|
||||||
<div id="webrx-canvas-container">
|
<div id="webrx-canvas-container">
|
||||||
<!-- add canvas here by javascript -->
|
<!-- add canvas here by javascript -->
|
||||||
@ -214,7 +212,6 @@
|
|||||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutOneStep();" title="Zoom out one step"> <img src="static/gfx/openwebrx-zoom-out.png" /></div>
|
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutOneStep();" title="Zoom out one step"> <img src="static/gfx/openwebrx-zoom-out.png" /></div>
|
||||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomInTotal();" title="Zoom in totally"><img src="static/gfx/openwebrx-zoom-in-total.png" /></div>
|
<div class="openwebrx-button openwebrx-square-button" onclick="zoomInTotal();" title="Zoom in totally"><img src="static/gfx/openwebrx-zoom-in-total.png" /></div>
|
||||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutTotal();" title="Zoom out totally"><img src="static/gfx/openwebrx-zoom-out-total.png" /></div>
|
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutTotal();" title="Zoom out totally"><img src="static/gfx/openwebrx-zoom-out-total.png" /></div>
|
||||||
<div class="openwebrx-button openwebrx-square-button" onclick="mathbox_toggle();" title="Toggle 3D view"><img src="static/gfx/openwebrx-3d-spectrum.png" /></div>
|
|
||||||
<div id="openwebrx-smeter-db">0 dB</div>
|
<div id="openwebrx-smeter-db">0 dB</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="openwebrx-panel-line">
|
<div class="openwebrx-panel-line">
|
||||||
|
|||||||
33
htdocs/mathbox-bundle.min.js
vendored
33
htdocs/mathbox-bundle.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,461 +0,0 @@
|
|||||||
.shadergraph-graph {
|
|
||||||
font: 12px sans-serif;
|
|
||||||
line-height: 25px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.shadergraph-graph:after {
|
|
||||||
content: ' ';
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
font-size: 0;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.shadergraph-graph svg {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.shadergraph-clear {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.shadergraph-graph svg {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.shadergraph-column {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.shadergraph-node .shadergraph-graph {
|
|
||||||
float: left;
|
|
||||||
clear: both;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
.shadergraph-node .shadergraph-graph .shadergraph-node {
|
|
||||||
margin: 5px 15px 15px;
|
|
||||||
}
|
|
||||||
.shadergraph-node {
|
|
||||||
margin: 5px 15px 25px;
|
|
||||||
background: rgba(0, 0, 0, .1);
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .2),
|
|
||||||
0 1px 10px rgba(0, 0, 0, .2);
|
|
||||||
min-height: 35px;
|
|
||||||
float: left;
|
|
||||||
clear: left;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.shadergraph-type {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.shadergraph-header {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
height: 25px;
|
|
||||||
background: rgba(0, 0, 0, .3);
|
|
||||||
text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
|
|
||||||
color: #fff;
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
.shadergraph-outlet div {
|
|
||||||
}
|
|
||||||
.shadergraph-outlet-in .shadergraph-name {
|
|
||||||
margin-right: 7px;
|
|
||||||
}
|
|
||||||
.shadergraph-outlet-out .shadergraph-name {
|
|
||||||
margin-left: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadergraph-name {
|
|
||||||
margin: 0 4px;
|
|
||||||
}
|
|
||||||
.shadergraph-point {
|
|
||||||
margin: 6px;
|
|
||||||
width: 11px;
|
|
||||||
height: 11px;
|
|
||||||
border-radius: 7.5px;
|
|
||||||
background: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
.shadergraph-outlet-in {
|
|
||||||
float: left;
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
.shadergraph-outlet-in div {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.shadergraph-outlet-out {
|
|
||||||
float: right;
|
|
||||||
clear: right;
|
|
||||||
}
|
|
||||||
.shadergraph-outlet-out div {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadergraph-node-callback {
|
|
||||||
background: rgba(205, 209, 221, .5);
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 10, 40, .2),
|
|
||||||
0 1px 10px rgba(0, 10, 40, .2);
|
|
||||||
}
|
|
||||||
.shadergraph-node-callback > .shadergraph-header {
|
|
||||||
background: rgba(0, 20, 80, .3);
|
|
||||||
}
|
|
||||||
.shadergraph-graph .shadergraph-graph .shadergraph-node-callback {
|
|
||||||
background: rgba(0, 20, 80, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadergraph-node-call {
|
|
||||||
background: rgba(209, 221, 205, .5);
|
|
||||||
box-shadow: 0 1px 2px rgba(10, 40, 0, .2),
|
|
||||||
0 1px 10px rgba(10, 40, 0, .2);
|
|
||||||
}
|
|
||||||
.shadergraph-node-call > .shadergraph-header {
|
|
||||||
background: rgba(20, 80, 0, .3);
|
|
||||||
}
|
|
||||||
.shadergraph-graph .shadergraph-graph .shadergraph-node-call {
|
|
||||||
background: rgba(20, 80, 0, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadergraph-node-isolate {
|
|
||||||
background: rgba(221, 205, 209, .5);
|
|
||||||
box-shadow: 0 1px 2px rgba(40, 0, 10, .2),
|
|
||||||
0 1px 10px rgba(40, 0, 10, .2);
|
|
||||||
}
|
|
||||||
.shadergraph-node-isolate > .shadergraph-header {
|
|
||||||
background: rgba(80, 0, 20, .3);
|
|
||||||
}
|
|
||||||
.shadergraph-graph .shadergraph-graph .shadergraph-node-isolate {
|
|
||||||
background: rgba(80, 0, 20, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadergraph-node.shadergraph-has-code {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.shadergraph-node.shadergraph-has-code::before {
|
|
||||||
position: absolute;
|
|
||||||
content: ' ';
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
display: none;
|
|
||||||
border: 2px solid rgba(0, 0, 0, .25);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.shadergraph-node.shadergraph-has-code:hover::before {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.shadergraph-code {
|
|
||||||
z-index: 10000;
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
background: #fff;
|
|
||||||
color: #000;
|
|
||||||
white-space: pre;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .2),
|
|
||||||
0 1px 10px rgba(0, 0, 0, .2);
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadergraph-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: #fff;
|
|
||||||
border-top: 1px solid #CCC;
|
|
||||||
}
|
|
||||||
.shadergraph-overlay .shadergraph-view {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.shadergraph-overlay .shadergraph-inside {
|
|
||||||
width: 4000px;
|
|
||||||
min-height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.shadergraph-overlay .shadergraph-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 16px;
|
|
||||||
background: rgba(255,255,255,.3);
|
|
||||||
color: rgba(0, 0, 0, .3);
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 24px;
|
|
||||||
width: 24px;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.shadergraph-overlay .shadergraph-close:hover {
|
|
||||||
background: rgba(255,255,255,1);
|
|
||||||
color: rgba(0, 0, 0, 1);
|
|
||||||
}
|
|
||||||
.shadergraph-overlay .shadergraph-graph {
|
|
||||||
padding-top: 10px;
|
|
||||||
overflow: visible;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
.shadergraph-overlay span {
|
|
||||||
display: block;
|
|
||||||
padding: 5px 15px;
|
|
||||||
margin: 0;
|
|
||||||
background: rgba(0, 0, 0, .1);
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
.mathbox-loader {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
-webkit-transform: translate(-50%, -50%);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-loader.mathbox-exit {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transition:
|
|
||||||
opacity .15s ease-in-out;
|
|
||||||
transition:
|
|
||||||
opacity .15s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-progress {
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 80px;
|
|
||||||
margin: 0 auto 20px;
|
|
||||||
box-shadow:
|
|
||||||
1px 1px 1px rgba(255, 255, 255, .2),
|
|
||||||
1px -1px 1px rgba(255, 255, 255, .2),
|
|
||||||
-1px 1px 1px rgba(255, 255, 255, .2),
|
|
||||||
-1px -1px 1px rgba(255, 255, 255, .2);
|
|
||||||
background: #ccc;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-progress > div {
|
|
||||||
display: block;
|
|
||||||
width: 0px;
|
|
||||||
height: 10px;
|
|
||||||
background: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-logo {
|
|
||||||
position: relative;
|
|
||||||
width: 140px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 0 auto 10px;
|
|
||||||
-webkit-perspective: 200px;
|
|
||||||
perspective: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-logo > div {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
-webkit-transform-style: preserve-3d;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-logo > :nth-child(1) {
|
|
||||||
-webkit-transform: rotateZ(22deg) rotateX(24deg) rotateY(30deg);
|
|
||||||
transform: rotateZ(22deg) rotateX(24deg) rotateY(30deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-logo > :nth-child(2) {
|
|
||||||
-webkit-transform: rotateZ(11deg) rotateX(12deg) rotateY(15deg) scale3d(.6, .6, .6);
|
|
||||||
transform: rotateZ(11deg) rotateX(12deg) rotateY(15deg) scale3d(.6, .6, .6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-logo > div > div {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -100px;
|
|
||||||
margin-top: -100px;
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-logo > div > :nth-child(1) {
|
|
||||||
-webkit-transform: scale(0.5, 0.5);
|
|
||||||
transform: rotateX(30deg) scale(0.5, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-logo > div > :nth-child(2) {
|
|
||||||
-webkit-transform: rotateX(90deg) scale(0.42, 0.42);
|
|
||||||
transform: rotateX(90deg) scale(0.42, 0.42);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-logo > div > :nth-child(3) {
|
|
||||||
-webkit-transform: rotateY(90deg) scale(0.35, 0.35);
|
|
||||||
transform: rotateY(90deg) scale(0.35, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-logo > :nth-child(1) > :nth-child(1) {
|
|
||||||
border: 16px solid #808080;
|
|
||||||
}
|
|
||||||
.mathbox-logo > :nth-child(1) > :nth-child(2) {
|
|
||||||
border: 19px solid #A0A0A0;
|
|
||||||
}
|
|
||||||
.mathbox-logo > :nth-child(1) > :nth-child(3) {
|
|
||||||
border: 23px solid #C0C0C0;
|
|
||||||
}
|
|
||||||
.mathbox-logo > :nth-child(2) > :nth-child(1) {
|
|
||||||
border: 27px solid #808080;
|
|
||||||
}
|
|
||||||
.mathbox-logo > :nth-child(2) > :nth-child(2) {
|
|
||||||
border: 32px solid #A0A0A0;
|
|
||||||
}
|
|
||||||
.mathbox-logo > :nth-child(2) > :nth-child(3) {
|
|
||||||
border: 38px solid #C0C0C0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mathbox-splash-blue .mathbox-progress {
|
|
||||||
background: #def;
|
|
||||||
}
|
|
||||||
.mathbox-splash-blue .mathbox-progress > div {
|
|
||||||
background: #1979e7;
|
|
||||||
}
|
|
||||||
.mathbox-splash-blue .mathbox-logo > :nth-child(1) > :nth-child(1) {
|
|
||||||
border-color: #1979e7;
|
|
||||||
}
|
|
||||||
.mathbox-splash-blue .mathbox-logo > :nth-child(1) > :nth-child(2) {
|
|
||||||
border-color: #33b0ff;
|
|
||||||
}
|
|
||||||
.mathbox-splash-blue .mathbox-logo > :nth-child(1) > :nth-child(3) {
|
|
||||||
border-color: #75eaff;
|
|
||||||
}
|
|
||||||
.mathbox-splash-blue .mathbox-logo > :nth-child(2) > :nth-child(1) {
|
|
||||||
border-color: #18487F;
|
|
||||||
}
|
|
||||||
.mathbox-splash-blue .mathbox-logo > :nth-child(2) > :nth-child(2) {
|
|
||||||
border-color: #33b0ff;
|
|
||||||
}
|
|
||||||
.mathbox-splash-blue .mathbox-logo > :nth-child(2) > :nth-child(3) {
|
|
||||||
border-color: #75eaff;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.mathbox-overlays {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.mathbox-overlays > div {
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
|
||||||
.mathbox-overlay > div {
|
|
||||||
position: absolute;
|
|
||||||
will-change: transform, opacity;
|
|
||||||
}
|
|
||||||
.mathbox-label {
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
.mathbox-outline-1 {
|
|
||||||
text-shadow:
|
|
||||||
-1px -1px 0px rgb(255, 255, 255),
|
|
||||||
1px 1px 0px rgb(255, 255, 255),
|
|
||||||
-1px 1px 0px rgb(255, 255, 255),
|
|
||||||
1px -1px 0px rgb(255, 255, 255),
|
|
||||||
1px 0px 1px rgb(255, 255, 255),
|
|
||||||
-1px 0px 1px rgb(255, 255, 255),
|
|
||||||
0px -1px 1px rgb(255, 255, 255),
|
|
||||||
0px 1px 1px rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
.mathbox-outline-2 {
|
|
||||||
text-shadow:
|
|
||||||
0px -2px 0px rgb(255, 255, 255),
|
|
||||||
0px 2px 0px rgb(255, 255, 255),
|
|
||||||
-2px 0px 0px rgb(255, 255, 255),
|
|
||||||
2px 0px 0px rgb(255, 255, 255),
|
|
||||||
-1px -2px 0px rgb(255, 255, 255),
|
|
||||||
-2px -1px 0px rgb(255, 255, 255),
|
|
||||||
-1px 2px 0px rgb(255, 255, 255),
|
|
||||||
-2px 1px 0px rgb(255, 255, 255),
|
|
||||||
1px 2px 0px rgb(255, 255, 255),
|
|
||||||
2px 1px 0px rgb(255, 255, 255),
|
|
||||||
1px -2px 0px rgb(255, 255, 255),
|
|
||||||
2px -1px 0px rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
.mathbox-outline-3 {
|
|
||||||
text-shadow:
|
|
||||||
3px 0px 0px rgb(255, 255, 255),
|
|
||||||
-3px 0px 0px rgb(255, 255, 255),
|
|
||||||
0px 3px 0px rgb(255, 255, 255),
|
|
||||||
0px -3px 0px rgb(255, 255, 255),
|
|
||||||
|
|
||||||
-2px -2px 0px rgb(255, 255, 255),
|
|
||||||
-2px 2px 0px rgb(255, 255, 255),
|
|
||||||
2px 2px 0px rgb(255, 255, 255),
|
|
||||||
2px -2px 0px rgb(255, 255, 255),
|
|
||||||
|
|
||||||
-1px -2px 1px rgb(255, 255, 255),
|
|
||||||
-2px -1px 1px rgb(255, 255, 255),
|
|
||||||
-1px 2px 1px rgb(255, 255, 255),
|
|
||||||
-2px 1px 1px rgb(255, 255, 255),
|
|
||||||
1px 2px 1px rgb(255, 255, 255),
|
|
||||||
2px 1px 1px rgb(255, 255, 255),
|
|
||||||
1px -2px 1px rgb(255, 255, 255),
|
|
||||||
2px -1px 1px rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
.mathbox-outline-4 {
|
|
||||||
text-shadow:
|
|
||||||
4px 0px 0px rgb(255, 255, 255),
|
|
||||||
-4px 0px 0px rgb(255, 255, 255),
|
|
||||||
0px 4px 0px rgb(255, 255, 255),
|
|
||||||
0px -4px 0px rgb(255, 255, 255),
|
|
||||||
|
|
||||||
-3px -2px 0px rgb(255, 255, 255),
|
|
||||||
-3px 2px 0px rgb(255, 255, 255),
|
|
||||||
3px 2px 0px rgb(255, 255, 255),
|
|
||||||
3px -2px 0px rgb(255, 255, 255),
|
|
||||||
|
|
||||||
-2px -3px 0px rgb(255, 255, 255),
|
|
||||||
-2px 3px 0px rgb(255, 255, 255),
|
|
||||||
2px 3px 0px rgb(255, 255, 255),
|
|
||||||
2px -3px 0px rgb(255, 255, 255),
|
|
||||||
|
|
||||||
-1px -2px 1px rgb(255, 255, 255),
|
|
||||||
-2px -1px 1px rgb(255, 255, 255),
|
|
||||||
-1px 2px 1px rgb(255, 255, 255),
|
|
||||||
-2px 1px 1px rgb(255, 255, 255),
|
|
||||||
1px 2px 1px rgb(255, 255, 255),
|
|
||||||
2px 1px 1px rgb(255, 255, 255),
|
|
||||||
1px -2px 1px rgb(255, 255, 255),
|
|
||||||
2px -1px 1px rgb(255, 255, 255);
|
|
||||||
|
|
||||||
}
|
|
||||||
.mathbox-outline-fill, .mathbox-outline-fill * {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
@ -1054,9 +1054,6 @@ function on_ws_recv(evt) {
|
|||||||
fft_compression = config['fft_compression'];
|
fft_compression = config['fft_compression'];
|
||||||
divlog("FFT stream is " + ((fft_compression === "adpcm") ? "compressed" : "uncompressed") + ".");
|
divlog("FFT stream is " + ((fft_compression === "adpcm") ? "compressed" : "uncompressed") + ".");
|
||||||
clientProgressBar.setMaxClients(config['max_clients']);
|
clientProgressBar.setMaxClients(config['max_clients']);
|
||||||
mathbox_waterfall_colors = config['mathbox_waterfall_colors'];
|
|
||||||
mathbox_waterfall_frequency_resolution = config['mathbox_waterfall_frequency_resolution'];
|
|
||||||
mathbox_waterfall_history_length = config['mathbox_waterfall_history_length'];
|
|
||||||
var sql = Number.isInteger(config['initial_squelch_level']) ? config['initial_squelch_level'] : -150;
|
var sql = Number.isInteger(config['initial_squelch_level']) ? config['initial_squelch_level'] : -150;
|
||||||
$("#openwebrx-panel-squelch").val(sql);
|
$("#openwebrx-panel-squelch").val(sql);
|
||||||
updateSquelch();
|
updateSquelch();
|
||||||
@ -1625,7 +1622,6 @@ function add_canvas() {
|
|||||||
|
|
||||||
function init_canvas_container() {
|
function init_canvas_container() {
|
||||||
canvas_container = e("webrx-canvas-container");
|
canvas_container = e("webrx-canvas-container");
|
||||||
mathbox_container = e("openwebrx-mathbox-container");
|
|
||||||
canvas_container.addEventListener("mouseleave", canvas_container_mouseleave, false);
|
canvas_container.addEventListener("mouseleave", canvas_container_mouseleave, false);
|
||||||
canvas_container.addEventListener("mousemove", canvas_mousemove, false);
|
canvas_container.addEventListener("mousemove", canvas_mousemove, false);
|
||||||
canvas_container.addEventListener("mouseup", canvas_mouseup, false);
|
canvas_container.addEventListener("mouseup", canvas_mouseup, false);
|
||||||
@ -1663,27 +1659,6 @@ function waterfall_init() {
|
|||||||
waterfall_setup_done = 1;
|
waterfall_setup_done = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
var mathbox_shift = function () {
|
|
||||||
if (mathbox_data_current_depth < mathbox_data_max_depth) mathbox_data_current_depth++;
|
|
||||||
if (mathbox_data_index + 1 >= mathbox_data_max_depth) mathbox_data_index = 0;
|
|
||||||
else mathbox_data_index++;
|
|
||||||
mathbox_data_global_index++;
|
|
||||||
};
|
|
||||||
|
|
||||||
var mathbox_clear_data = function () {
|
|
||||||
mathbox_data_index = 50;
|
|
||||||
mathbox_data_current_depth = 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
var mathbox_get_data_line = function (x) {
|
|
||||||
return (mathbox_data_max_depth + mathbox_data_index + x - 1) % mathbox_data_max_depth;
|
|
||||||
};
|
|
||||||
|
|
||||||
var mathbox_data_index_valid = function (x) {
|
|
||||||
return x > mathbox_data_max_depth - mathbox_data_current_depth;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
function waterfall_add(data) {
|
function waterfall_add(data) {
|
||||||
if (!waterfall_setup_done) return;
|
if (!waterfall_setup_done) return;
|
||||||
var w = fft_size;
|
var w = fft_size;
|
||||||
@ -1695,26 +1670,18 @@ function waterfall_add(data) {
|
|||||||
waterfallColorsAuto();
|
waterfallColorsAuto();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (mathbox_mode === MATHBOX_MODES.WATERFALL) {
|
//Add line to waterfall image
|
||||||
//Handle mathbox
|
var oneline_image = canvas_context.createImageData(w, 1);
|
||||||
for (var i = 0; i < fft_size; i++) mathbox_data[i + mathbox_data_index * fft_size] = data[i];
|
for (var x = 0; x < w; x++) {
|
||||||
mathbox_shift();
|
var color = waterfall_mkcolor(data[x]);
|
||||||
} else {
|
for (i = 0; i < 4; i++)
|
||||||
//Add line to waterfall image
|
oneline_image.data[x * 4 + i] = ((color >>> 0) >> ((3 - i) * 8)) & 0xff;
|
||||||
var oneline_image = canvas_context.createImageData(w, 1);
|
|
||||||
for (var x = 0; x < w; x++) {
|
|
||||||
var color = waterfall_mkcolor(data[x]);
|
|
||||||
for (i = 0; i < 4; i++)
|
|
||||||
oneline_image.data[x * 4 + i] = ((color >>> 0) >> ((3 - i) * 8)) & 0xff;
|
|
||||||
}
|
|
||||||
|
|
||||||
//Draw image
|
|
||||||
canvas_context.putImageData(oneline_image, 0, canvas_actual_line--);
|
|
||||||
shift_canvases();
|
|
||||||
if (canvas_actual_line < 0) add_canvas();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Draw image
|
||||||
|
canvas_context.putImageData(oneline_image, 0, canvas_actual_line--);
|
||||||
|
shift_canvases();
|
||||||
|
if (canvas_actual_line < 0) add_canvas();
|
||||||
}
|
}
|
||||||
|
|
||||||
function check_top_bar_congestion() {
|
function check_top_bar_congestion() {
|
||||||
@ -1732,167 +1699,6 @@ function check_top_bar_congestion() {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var MATHBOX_MODES =
|
|
||||||
{
|
|
||||||
UNINITIALIZED: 0,
|
|
||||||
NONE: 1,
|
|
||||||
WATERFALL: 2,
|
|
||||||
CONSTELLATION: 3
|
|
||||||
};
|
|
||||||
var mathbox_mode = MATHBOX_MODES.UNINITIALIZED;
|
|
||||||
var mathbox;
|
|
||||||
var mathbox_element;
|
|
||||||
var mathbox_waterfall_colors;
|
|
||||||
var mathbox_waterfall_frequency_resolution;
|
|
||||||
var mathbox_waterfall_history_length;
|
|
||||||
var mathbox_correction_for_z;
|
|
||||||
var mathbox_data_max_depth;
|
|
||||||
var mathbox_data_current_depth;
|
|
||||||
var mathbox_data_index;
|
|
||||||
var mathbox_data;
|
|
||||||
var mathbox_data_global_index;
|
|
||||||
var mathbox_container;
|
|
||||||
|
|
||||||
function mathbox_init() {
|
|
||||||
//mathbox_waterfall_history_length is defined in the config
|
|
||||||
mathbox_data_max_depth = fft_fps * mathbox_waterfall_history_length; //how many lines can the buffer store
|
|
||||||
mathbox_data_current_depth = 0; //how many lines are in the buffer currently
|
|
||||||
mathbox_data_index = 0; //the index of the last empty line / the line to be overwritten
|
|
||||||
mathbox_data = new Float32Array(fft_size * mathbox_data_max_depth);
|
|
||||||
mathbox_data_global_index = 0;
|
|
||||||
mathbox_correction_for_z = 0;
|
|
||||||
|
|
||||||
mathbox = mathBox({
|
|
||||||
plugins: ['core', 'controls', 'cursor', 'stats'],
|
|
||||||
controls: {klass: THREE.OrbitControls}
|
|
||||||
});
|
|
||||||
var three = mathbox.three;
|
|
||||||
if (typeof three === "undefined") divlog("3D waterfall cannot be initialized because WebGL is not supported in your browser.", true);
|
|
||||||
|
|
||||||
three.renderer.setClearColor(new THREE.Color(0x808080), 1.0);
|
|
||||||
mathbox_container.appendChild((mathbox_element = three.renderer.domElement));
|
|
||||||
var view = mathbox
|
|
||||||
.set({
|
|
||||||
scale: 1080,
|
|
||||||
focus: 3
|
|
||||||
})
|
|
||||||
.camera({
|
|
||||||
proxy: true,
|
|
||||||
position: [-2, 1, 3]
|
|
||||||
})
|
|
||||||
.cartesian({
|
|
||||||
range: [[-1, 1], [0, 1], [0, 1]],
|
|
||||||
scale: [2, 2 / 3, 1]
|
|
||||||
});
|
|
||||||
|
|
||||||
view.axis({
|
|
||||||
axis: 1,
|
|
||||||
width: 3,
|
|
||||||
color: "#fff"
|
|
||||||
});
|
|
||||||
view.axis({
|
|
||||||
axis: 2,
|
|
||||||
width: 3,
|
|
||||||
color: "#fff"
|
|
||||||
//offset: [0, 0, 0],
|
|
||||||
});
|
|
||||||
view.axis({
|
|
||||||
axis: 3,
|
|
||||||
width: 3,
|
|
||||||
color: "#fff"
|
|
||||||
});
|
|
||||||
|
|
||||||
view.grid({
|
|
||||||
width: 2,
|
|
||||||
opacity: 0.5,
|
|
||||||
axes: [1, 3],
|
|
||||||
zOrder: 1,
|
|
||||||
color: "#fff"
|
|
||||||
});
|
|
||||||
|
|
||||||
var remap = function (x, z, t) {
|
|
||||||
var currentTimePos = mathbox_data_global_index / (fft_fps * 1.0);
|
|
||||||
var realZAdd = (-(t - currentTimePos) / mathbox_waterfall_history_length);
|
|
||||||
var zAdd = realZAdd - mathbox_correction_for_z;
|
|
||||||
if (zAdd < -0.2 || zAdd > 0.2) {
|
|
||||||
mathbox_correction_for_z = realZAdd;
|
|
||||||
}
|
|
||||||
|
|
||||||
var xIndex = Math.trunc(((x + 1) / 2.0) * fft_size); //x: frequency
|
|
||||||
var zIndex = Math.trunc(z * (mathbox_data_max_depth - 1)); //z: time
|
|
||||||
var realZIndex = mathbox_get_data_line(zIndex);
|
|
||||||
if (!mathbox_data_index_valid(zIndex)) return {y: undefined, dBValue: undefined, zAdd: 0};
|
|
||||||
var index = Math.trunc(xIndex + realZIndex * fft_size);
|
|
||||||
var dBValue = mathbox_data[index];
|
|
||||||
var y;
|
|
||||||
if (dBValue > waterfall_max_level) y = 1;
|
|
||||||
else if (dBValue < waterfall_min_level) y = 0;
|
|
||||||
else y = (dBValue - waterfall_min_level) / (waterfall_max_level - waterfall_min_level);
|
|
||||||
if (!y) y = 0;
|
|
||||||
return {y: y, dBValue: dBValue, zAdd: zAdd};
|
|
||||||
};
|
|
||||||
|
|
||||||
view.area({
|
|
||||||
expr: function (emit, x, z, i, j, t) {
|
|
||||||
var y;
|
|
||||||
var remapResult = remap(x, z, t);
|
|
||||||
if ((y = remapResult.y) === undefined) return;
|
|
||||||
emit(x, y, z + remapResult.zAdd);
|
|
||||||
},
|
|
||||||
width: mathbox_waterfall_frequency_resolution,
|
|
||||||
height: mathbox_data_max_depth - 1,
|
|
||||||
channels: 3,
|
|
||||||
axes: [1, 3]
|
|
||||||
});
|
|
||||||
|
|
||||||
view.area({
|
|
||||||
expr: function (emit, x, z, i, j, t) {
|
|
||||||
var dBValue;
|
|
||||||
if ((dBValue = remap(x, z, t).dBValue) === undefined) return;
|
|
||||||
var color = waterfall_mkcolor(dBValue, mathbox_waterfall_colors);
|
|
||||||
var b = (color & 0xff) / 255.0;
|
|
||||||
var g = ((color & 0xff00) >> 8) / 255.0;
|
|
||||||
var r = ((color & 0xff0000) >> 16) / 255.0;
|
|
||||||
emit(r, g, b, 1.0);
|
|
||||||
},
|
|
||||||
width: mathbox_waterfall_frequency_resolution,
|
|
||||||
height: mathbox_data_max_depth - 1,
|
|
||||||
channels: 4,
|
|
||||||
axes: [1, 3]
|
|
||||||
});
|
|
||||||
|
|
||||||
view.surface({
|
|
||||||
shaded: true,
|
|
||||||
points: '<<',
|
|
||||||
colors: '<',
|
|
||||||
color: 0xFFFFFF
|
|
||||||
});
|
|
||||||
|
|
||||||
view.surface({
|
|
||||||
fill: false,
|
|
||||||
lineX: false,
|
|
||||||
lineY: false,
|
|
||||||
points: '<<',
|
|
||||||
colors: '<',
|
|
||||||
color: 0xFFFFFF,
|
|
||||||
width: 2,
|
|
||||||
blending: 'add',
|
|
||||||
opacity: .25,
|
|
||||||
zBias: 5
|
|
||||||
});
|
|
||||||
mathbox_mode = MATHBOX_MODES.NONE;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mathbox_toggle() {
|
|
||||||
|
|
||||||
if (mathbox_mode === MATHBOX_MODES.UNINITIALIZED) mathbox_init();
|
|
||||||
mathbox_mode = (mathbox_mode === MATHBOX_MODES.NONE) ? MATHBOX_MODES.WATERFALL : MATHBOX_MODES.NONE;
|
|
||||||
mathbox_container.style.display = (mathbox_mode === MATHBOX_MODES.WATERFALL) ? "block" : "none";
|
|
||||||
mathbox_clear_data();
|
|
||||||
waterfall_clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
function waterfall_clear() {
|
function waterfall_clear() {
|
||||||
while (canvases.length) //delete all canvases
|
while (canvases.length) //delete all canvases
|
||||||
{
|
{
|
||||||
|
|||||||
@ -74,9 +74,6 @@ class OpenWebRxReceiverClient(Client):
|
|||||||
"start_mod",
|
"start_mod",
|
||||||
"start_freq",
|
"start_freq",
|
||||||
"center_freq",
|
"center_freq",
|
||||||
"mathbox_waterfall_colors",
|
|
||||||
"mathbox_waterfall_history_length",
|
|
||||||
"mathbox_waterfall_frequency_resolution",
|
|
||||||
"initial_squelch_level",
|
"initial_squelch_level",
|
||||||
"profile_id",
|
"profile_id",
|
||||||
]
|
]
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user