Change gen code from rebuilding tree constantly.

Fix stylization for firefox
2026-06-21 18:29:28 +00:00 · 2024-10-28 23:19:06 -07:00 · 2024-10-28 20:08:03 -07:00
3 changed files with 54 additions and 37 deletions
@@ -26,22 +26,12 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
    src: url('AudioLinkMono-Bold.ttf')  format('truetype')
 }

-@property --dark {
-	syntax: "<color>";
-	inherits: true;
-	initial-value: #111;
-}
-
-@property --light {
-	syntax: "<color>";
-	inherits: true;
-	initial-value: white;
-}
-
 :root {
 	color-scheme: dark;
 	--gl: radial-gradient(circle 1px at 0px 0px, var(--light) 1px, transparent 0);
 	--gd: radial-gradient(circle 1px at 0px 0px, var(--dark) 1px, transparent 0);
+	--dark: #111;
+	--light: #eee;
 	--bg-0: var(--dark);
 	--bg-1: var(--gl) 0px 0px / 4px 4px, var(--dark);
 	--bg-2: var(--gl) 0px 0px / 4px 4px, var(--gl) 2px 2px / 4px 4px, var(--dark);
@@ -166,7 +156,7 @@ input::-webkit-inner-spin-button {
 input[type=number] {
 	background: var(--bg-0);
 	outline: 0;
-	/*text-indent: 12px;*/
+    -moz-appearance:textfield; /* Firefox */
 	padding-top: 1rem;
 	padding-bottom: 1rem;
 	padding-left: 1.1rem;
@@ -183,7 +173,6 @@ input[type=number] {
 	}
 }

-
 textarea,input:not([type='number']) {
 	background: var(--bg-0);
 	border: 0;
@@ -191,6 +180,7 @@ textarea,input:not([type='number']) {
 	outline: 0;
 	border-radius: .8rem;
 	padding: .5rem;
+	padding-bottom:.3rem;
 	text-shadow: var(--l-shadow);
 	border: 1px var(--light) solid;
 	animation: dark-to-light 200ms ease-out forwards;
@@ -203,7 +193,7 @@ textarea,input:not([type='number']) {
 	}
 }

-button, input[type=submit] {
+button,input[type=submit] {
 	background: var(--bg-0);
 	border: 0;
 	outline: 0;
@@ -13,10 +13,20 @@ var darkmode = true;
 function DrawSpan( rowspan, colspan, freq, target, docolor, extrastr = "" )
 {
 	var fdist = Math.abs( freq - target );
-	fdist = Math.pow( fdist, 0.5 ) * 500;
-//	if( fdist > 255 ) fdist = 255;
+	fdist = Math.pow( fdist, 0.5 ) * 300;
+	if( fdist > 511 ) fdist = 511;
+
 	let ret = "<TD COLSPAN=" + colspan + ' ROWSPAN' + rowspan + ' ';
-	if( docolor ) ret += 'STYLE="color:black;background-color:rgba(' + fdist + ',' + (511-fdist) + ',0,0.2)";';
+
+	let bg = 8 - fdist / 60;
+	if( bg < 0) bg = 0; if( bg > 8 ) bg = 8;
+	if( docolor ) ret += 'STYLE="color:var(--' + ((bg >= 3 ) ? 'dark' : 'light' ) + ');' +
+		'text-shadow: 1px 1px 2px ' + ((bg < 3 ) ? '#000' : '#fff' ) + ',' +
+		'-1px 1px 2px ' + ((bg < 3 ) ? '#000' : '#fff' ) + ',' +
+		'1px -1px 2px ' + ((bg < 3 ) ? '#000' : '#fff' ) + ',' +
+		'-1px -1px 2px ' + ((bg < 3 ) ? '#000' : '#fff' ) + ';' +
+		'background:var(--bg-' + bg.toFixed(0) + ');"';
+		//background-color:rgba(' + fdist + ',' + (511-fdist) + ',0,0.2)";';
 	ret += '>' + extrastr + freq.toFixed(6) + "</TD>";
 	return ret;
 }
@@ -222,7 +232,7 @@ function computeTable()
 	else if( goertzels )
 	{
 		contents +=
-			"<TABLE BORDER=1>" +
+			"<TABLE>" +
 			"<TR><TD>Goertzel</TD></TR>" +
 			"<TR><TD>Goertzel (Inverse)</TD></TR>" +
 			"</TABLE><TEXTAREA ROWS=8 COLS=80 ID=goertzeloutput></TEXTAREA>" +
@@ -356,7 +366,7 @@ function computeTable()
 			contents += "<TH COLSPAN=1>" + h + "</TH>";
 		}

-		for( let n = 0|28; n <= 96; n+=2 )
+		for( let n = 0|42; n <= 96; n+=2 )
 		{
 			let freq = ( xtal / n );
 			let goertzelpoint = 0;
@@ -410,7 +420,6 @@ function computeTable()
 		contents += "</TABLE>";
 	}

-
 	document.getElementById( "TABLE" ).innerHTML = contents;
 }

@@ -457,10 +466,9 @@ function onLoad()
 </SCRIPT>
 </HEAD>
 <BODY onLoad="onLoad()">
-
 <TABLE WIDTH=100%>
 <TR>
-<TD COLSPAN=3>
+<TD COLSPAN=2>
 <p>Tool for computing tuning to specific frequencies by use of direct ADC reading at specific timer-controlled rate to "tune" to specific frequencies either by quadrature or differential.</p>
 </TD>
 <TD ROWSPAN=2 VALIGN=TOP HEIGHT=200 WIDTH=100% ID=LiveGraphContainer>
@@ -484,7 +492,6 @@ function onLoad()
 </TABLE>
 </TD>
 <TD VALIGN=TOP ROWSPAN=2>
-
 Live Control:<br>
 <TABLE><TR>
 <TD><INPUT TYPE=SUBMIT onClick="reqConnect()" VALUE="Open Device" ID=connectButton>
@@ -499,17 +506,17 @@ Live Control:<br>
 </TR>
 <tr>
 <td>
-</td><td>
 <div id=GeneralData></DIV>
 <input type=checkbox ID=toggle_adc_buffer onchange='toggleBuffer(this)'>ADC Buffer Enable
 <BR>Pow2 Attenuation: 
 <input id=g_attenuation_pow2 onwheel='attenuationpow2wheel(event, this)' size=3 type=number style="width:3em" value=3><br>
-
 </td>
 </tr>
+<tr><td>
+<DIV STYLE="position:relative">
+<DIV style="margin:0px;top:0px;position:absolute" ID=TABLE></DIV>
+</DIV>
+</td></tr>
 </TABLE>
-
-<DIV ID=TABLE></DIV>
-
 </BODY>
 </HTML>
@@ -11,7 +11,7 @@ var lastIntensity = 1.0;
 var lastNumQ = 0;
 var lastTotalTime = 1;
 var lastTimeUsed = 1;
-
+var didSetupGeneralData = false;
 var graphIsClicked = false;

 function graphClick( e )
@@ -337,6 +337,11 @@ function ComputeRemoteClock( remote_time_ticks, now_ms )
 	remote_clock_last_timems = now_ms;
 }

+function updateCrystalWithMHz()
+{
+	document.getElementById('crystalmhz').value = remote_clock_mhz/1000000.0;
+}
+
 async function sendLoop()
 {
 	const sleep = ms => new Promise(r => setTimeout(r, ms));
@@ -369,13 +374,28 @@ async function sendLoop()
 				document.getElementById( "StatusPerf" ).innerHTML = 
 					(kBsecAvg).toFixed(2) + " kB/s<br>" +
 					(xActionSecAvg).toFixed(2)  + "x/s<br>";
-				document.getElementById( "GeneralData" ).innerHTML =
-					"<TABLE WIDTH=100%><TR><TD width=25%>Count: " + goodCount + " / " + badCount + "</td>" +
-					"<td width=20%>Inten: " + ((Math.log( lastIntensity * lastIntensity )/Math.log(10)) * 10-120).toFixed(2) + "db (" + lastIntensity + ")</td>" +
-					"<td width=20%>ADCs: " + (lastadc>>16).toFixed(0)  + " / " + (lastadc&0xffff).toFixed(0)  + "</td>" +
-					"<td width=20%>Remote clock: <INPUT TYPE=SUBMIT VALUE=" + (remote_clock_mhz/1000000.0).toFixed(6) + ` ONMOUSEDOWN="document.getElementById('crystalmhz').value = ${remote_clock_mhz/1000000.0};">MHz ` + "</TD>" +
-					"<td width=20%>" + ((remote_clock_mhz-288000000)/288).toFixed(3) + " PPM</td>" +
-					"</tr></table>";
+
+				if( !didSetupGeneralData )
+				{
+					document.getElementById( "GeneralData" ).innerHTML =
+						"<TABLE WIDTH=100% border=1><TR><TD width=25% ID=gdCount>Count: " + goodCount + " / " + badCount + "</td>" +
+						"<td width=20% ID=gdInten>Inten: " + ((Math.log( lastIntensity * lastIntensity )/Math.log(10)) * 10-120).toFixed(2) + "db (" + lastIntensity + ")</td>" +
+						"<td width=20% ID=gdADCs>ADCs: " + (lastadc>>16).toFixed(0)  + " / " + (lastadc&0xffff).toFixed(0)  + "</td>" +
+						"<td width=20%><INPUT TYPE=submit ID=gdButton style='padding:.1em' VALUE=" + (remote_clock_mhz/1000000.0).toFixed(6) + ` ONMOUSEDOWN="updateCrystalWithMHz()"> MHz ` + "</TD>" +
+						"<td width=20% ID=gdPPM>" + ((remote_clock_mhz-288000000)/288).toFixed(3) + " PPM</td>" +
+						"</tr></table>";
+					didSetupGeneralData = true;
+				}
+				else
+				{
+
+					document.getElementById( "gdCount" ).innerHTML = "Count: " + goodCount + " / " + badCount;
+					document.getElementById( "gdInten" ).innerHTML = "Inten: " + ((Math.log( lastIntensity * lastIntensity )/Math.log(10)) * 10-120).toFixed(2) + "db (" + lastIntensity + ")";
+					document.getElementById( "gdADCs" ).innerHTML = "ADC:" + (lastadc>>16).toFixed(0)  + " / " + (lastadc&0xffff).toFixed(0);
+					document.getElementById( "gdButton" ).value = "" + (remote_clock_mhz/1000000.0).toFixed(6);
+					document.getElementById( "gdPPM" ).innerHTML = "" + ((remote_clock_mhz-288000000)/288).toFixed(3) + " PPM";
+					didSetupGeneralData = true;
+				}

 				lastTime = thisTime;
 			}
Author	SHA1	Message	Date
cnlohr	21a585236d	Change gen code from rebuilding tree constantly.	2024-10-28 23:19:06 -07:00
cnlohr	710a07d913	Fix stylization for firefox	2024-10-28 20:08:03 -07:00