remove 3d view aka mathbox since it consumes more than 1MB data per
visit
This commit is contained in:
		| @@ -261,20 +261,6 @@ waterfall_auto_level_margin = (5, 40) | ||||
| #        \_waterfall_auto_level_margin[0]_/ |__ current_min_power_level          | \_waterfall_auto_level_margin[1]_/ | ||||
| #                                                      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 === | ||||
| # Warning! The settings below are very experimental. | ||||
| 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; | ||||
| } | ||||
|  | ||||
| #openwebrx-mathbox-container | ||||
| { | ||||
|     flex-grow: 1; | ||||
| 	overflow: none; | ||||
| 	display: none; | ||||
| } | ||||
|  | ||||
| #openwebrx-log-scroll | ||||
| { | ||||
|     /*overflow-y:auto;*/ | ||||
|   | ||||
| @@ -24,7 +24,6 @@ | ||||
|     <head> | ||||
|         <title>OpenWebRX | Open Source SDR Web App for Everyone!</title> | ||||
|         <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/lib/jquery-3.2.1.min.js"></script> | ||||
|         <script src="static/lib/jquery.nanoscroller.js"></script> | ||||
| @@ -45,7 +44,6 @@ | ||||
|             <canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas> | ||||
|         </div> | ||||
|     </div> | ||||
|     <div id="openwebrx-mathbox-container"> </div> | ||||
|     <div id="webrx-canvas-background"> | ||||
|         <div id="webrx-canvas-container"> | ||||
|             <!-- 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="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="mathbox_toggle();" title="Toggle 3D view"><img src="static/gfx/openwebrx-3d-spectrum.png" /></div> | ||||
|                     <div id="openwebrx-smeter-db">0 dB</div> | ||||
|                 </div> | ||||
|                 <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']; | ||||
|                         divlog("FFT stream is " + ((fft_compression === "adpcm") ? "compressed" : "uncompressed") + "."); | ||||
|                         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; | ||||
|                         $("#openwebrx-panel-squelch").val(sql); | ||||
|                         updateSquelch(); | ||||
| @@ -1625,7 +1622,6 @@ function add_canvas() { | ||||
|  | ||||
| function init_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("mousemove", canvas_mousemove, false); | ||||
|     canvas_container.addEventListener("mouseup", canvas_mouseup, false); | ||||
| @@ -1663,27 +1659,6 @@ function waterfall_init() { | ||||
|     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) { | ||||
|     if (!waterfall_setup_done) return; | ||||
|     var w = fft_size; | ||||
| @@ -1695,26 +1670,18 @@ function waterfall_add(data) { | ||||
|         waterfallColorsAuto(); | ||||
|     } | ||||
|  | ||||
|     if (mathbox_mode === MATHBOX_MODES.WATERFALL) { | ||||
|         //Handle mathbox | ||||
|         for (var i = 0; i < fft_size; i++) mathbox_data[i + mathbox_data_index * fft_size] = data[i]; | ||||
|         mathbox_shift(); | ||||
|     } else { | ||||
|         //Add line to waterfall image | ||||
|         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(); | ||||
|     //Add line to waterfall image | ||||
|     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(); | ||||
| } | ||||
|  | ||||
| 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() { | ||||
|     while (canvases.length) //delete all canvases | ||||
|     { | ||||
|   | ||||
| @@ -74,9 +74,6 @@ class OpenWebRxReceiverClient(Client): | ||||
|         "start_mod", | ||||
|         "start_freq", | ||||
|         "center_freq", | ||||
|         "mathbox_waterfall_colors", | ||||
|         "mathbox_waterfall_history_length", | ||||
|         "mathbox_waterfall_frequency_resolution", | ||||
|         "initial_squelch_level", | ||||
|         "profile_id", | ||||
|     ] | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Jakob Ketterl
					Jakob Ketterl