CSS Stylize the calculator page.

ch32v/lib/calculator.css

@@ -0,0 +1,315 @@
+/*
+Copyright (c) 2024 by Brett Schwickerath (https://codepen.io/schwiiiii/pen/wvVqLmX)
+Modified
+Copyright (c) 2024 by cnlohr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this
+software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+@font-face {
+    font-family: 'AudioLink';
+    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);
+	--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);
+	--bg-3: var(--gl) 0px 0px / 2px 2px, var(--dark);
+	--bg-4: var(--gl) 0px 0px / 2px 2px, var(--gl) 1px 1px / 2px 2px, var(--dark);
+	--bg-5: var(--gd) 0px 0px / 2px 2px, var(--light);
+	--bg-6: var(--gd) 0px 0px / 4px 4px, var(--gd) 2px 2px / 4px 4px, var(--light);
+	--bg-7: var(--gd) 0px 0px / 4px 4px, var(--light);
+	--bg-8: var(--light);
+	
+	--l-shadow:
+		-1px -1px 0 var(--dark),
+		0 -1px 0 var(--dark),
+		1px -1px 0 var(--dark),
+		1px 0 0 var(--dark),
+		1px 1px 0 var(--dark),
+		0 1px 0 var(--dark),
+		-1px 1px 0 var(--dark),
+		-1px 0 0 var(--dark);
+	
+	--d-shadow:
+		-1px -1px 0 var(--light),
+		0 -1px 0 var(--light),
+		1px -1px 0 var(--light),
+		1px 0 0 var(--light),
+		1px 1px 0 var(--light),
+		0 1px 0 var(--light),
+		-1px 1px 0 var(--light),
+		-1px 0 0 var(--light);
+	
+	--drop-shadow:
+		drop-shadow(-1px -1px 0 var(--light))
+		drop-shadow(0 -1px 0 var(--light))
+		drop-shadow(1px -1px 0 var(--light))
+		drop-shadow(1px 0 0 var(--light))
+		drop-shadow(1px 1px 0 var(--light))
+		drop-shadow(0 1px 0 var(--light))
+		drop-shadow(-1px 1px 0 var(--light))
+		drop-shadow(-1px 0 0 var(--light));
+}
+
+* {
+	box-sizing: border-box;
+	font-family: "AudioLink", monospace;
+	text-rendering: optimizeSpeed;
+	font-size: inherit;
+	color: light-dark(var(--dark), var(--light));
+}
+
+html {
+	/*font-size: 1vmin;*/
+	/* animation:
+		adjust-light 17s linear infinite both,
+		adjust-dark 11s linear infinite both; */
+}
+
+body {
+	margin: 0;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	/*
+	justify-content: center;
+	align-items: center;
+	*/
+	gap: 4rem;
+	background: var(--dark);
+}
+
+.shades {
+	display: inline-flex;
+	gap: 1rem;
+}
+
+.shade {
+	height: calc(80rem / 9);
+	width: calc(80rem / 9);
+	border-radius: 50%;
+	border: 3px solid var(--light);
+	
+	&:nth-child(1) { background: var(--bg-0); }
+	&:nth-child(2) { background: var(--bg-1); }
+	&:nth-child(3) { background: var(--bg-2); }
+	&:nth-child(4) { background: var(--bg-3); }
+	&:nth-child(5) { background: var(--bg-4); }
+	&:nth-child(6) { background: var(--bg-5); }
+	&:nth-child(7) { background: var(--bg-6); }
+	&:nth-child(8) { background: var(--bg-7); }
+	&:nth-child(9) { background: var(--bg-8); }
+}
+
+form {
+	font-size: 2rem;
+	background: var(--bg-4);
+	padding: 2rem;
+	border-radius: 2rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	border: 3px var(--light) solid;
+}
+
+label {
+	background: var(--bg-1);
+	display: flex;
+	flex-direction: column;
+	gap: .5rem;
+	padding: 1rem;
+	border-radius: 1rem;
+	text-shadow: var(--l-shadow);
+	border: 1px var(--light) solid;
+	color: var(--light);
+}
+
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+
+/*.scrollwheel_tune{*/
+input[type=number] {
+	background: var(--bg-0);
+	outline: 0;
+	/*text-indent: 12px;*/
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	padding-left: 1.1rem;
+	padding-right: 1.0rem;
+	text-shadow: var(--l-shadow);
+	border: 1px var(--light) solid;
+	animation: dark-to-light 200ms ease-out forwards;
+	transition: 200ms ease-out;
+	border-radius: 1.5rem;
+	&:hover {
+		animation: light-to-dark 200ms linear forwards;
+		color: var(--dark);
+		text-shadow: var(--d-shadow);
+	}
+}
+
+
+textarea,input:not([type='number']) {
+	background: var(--bg-0);
+	border: 0;
+	overflow:hidden;
+	outline: 0;
+	border-radius: .8rem;
+	padding: .5rem;
+	text-shadow: var(--l-shadow);
+	border: 1px var(--light) solid;
+	animation: dark-to-light 200ms ease-out forwards;
+	transition: 200ms ease-out;
+
+	&:hover {
+		animation: light-to-dark 200ms linear forwards;
+		color: var(--dark);
+		text-shadow: var(--d-shadow);
+	}
+}
+
+button, input[type=submit] {
+	background: var(--bg-0);
+	border: 0;
+	outline: 0;
+	border-radius: 2rem;
+	padding: .7rem;
+	font-weight: bold;
+	text-shadow: var(--l-shadow);
+	cursor: pointer;
+	border: 1px var(--light) solid;
+	color: var(--light);
+	animation: dark-to-light 200ms ease-out forwards;
+	transition: 200ms ease-out;
+	
+	&:hover {
+		animation: light-to-dark 200ms linear forwards;
+		color: var(--dark);
+		text-shadow: var(--d-shadow);
+	}
+}
+
+.cube-wrapper {
+	--size: 8rem;
+	margin-top: 2rem;
+	perspective: 200px;
+	perspective-origin: 50% 0%;
+	filter: var(--drop-shadow);
+}
+
+.cube {
+	height: var(--size);
+	width: var(--size);
+	position: relative;
+	transform-style: preserve-3d;
+	transform-origin: 50% 50% calc(var(--size) * .5);
+	animation: rotate 10s linear infinite;
+}
+
+.face {
+	position: absolute;
+	height: var(--size);
+	width: var(--size);
+	transform-style: preserve-3d;
+	transform-origin: 50% 50% calc(var(--size) * .5);
+	
+	&:nth-child(1) { transform: rotateY(90deg); background: var(--bg-2); }
+	&:nth-child(2) { transform: rotateY(180deg); background: var(--bg-3) }
+	&:nth-child(3) { transform: rotateY(-90deg); background: var(--bg-4) }
+	&:nth-child(4) { transform: rotateX(90deg); background: var(--bg-5) }
+	&:nth-child(5) { transform: rotateX(-90deg); background: var(--bg-6) }
+	&:nth-child(6) { background: var(--bg-7) }
+}
+
+@keyframes light-to-dark {
+	0% { background: var(--bg-0); }
+	12.5% { background: var(--bg-1); }
+	25% { background: var(--bg-2); }
+	37.5% { background: var(--bg-3); }
+	50% { background: var(--bg-4); }
+	62.5% { background: var(--bg-5); }
+	75% { background: var(--bg-6); }
+	87.5% { background: var(--bg-7); }
+	100% { background: var(--bg-8); }
+}
+
+@keyframes dark-to-light {
+	0% { background: var(--bg-8); }
+	12.5% { background: var(--bg-7); }
+	25% { background: var(--bg-6); }
+	37.5% { background: var(--bg-5); }
+	50% { background: var(--bg-4); }
+	62.5% { background: var(--bg-3); }
+	75% { background: var(--bg-2); }
+	87.5% { background: var(--bg-1); }
+	100% { background: var(--bg-0); }
+}
+
+@keyframes rotate {
+	from { transform: rotateY(0) rotateX(1turn) rotateZ(0) }
+	to { transform: rotateY(1turn) rotateX(0) rotateZ(1turn) }
+}
+
+@keyframes adjust-dark {
+	0% { --dark: hsl(0turn, 100%, 80%); }
+	10% { --dark: hsl(.1turn, 100%, 80%); }
+	20% { --dark: hsl(.2turn, 100%, 80%); }
+	30% { --dark: hsl(.3turn, 100%, 80%); }
+	40% { --dark: hsl(.4turn, 100%, 80%); }
+	50% { --dark: hsl(.5turn, 100%, 80%); }
+	60% { --dark: hsl(.6turn, 100%, 80%); }
+	70% { --dark: hsl(.7turn, 100%, 80%); }
+	80% { --dark: hsl(.8turn, 100%, 80%); }
+	90% { --dark: hsl(.9turn, 100%, 80%); }
+	100% { --dark: hsl(1turn, 100%, 80%); }
+}
+
+@keyframes adjust-light {
+	0% { --light: hsl(0turn, 100%, 20%); }
+	10% { --light: hsl(.1turn, 100%, 20%); }
+	20% { --light: hsl(.2turn, 100%, 20%); }
+	30% { --light: hsl(.3turn, 100%, 20%); }
+	40% { --light: hsl(.4turn, 100%, 20%); }
+	50% { --light: hsl(.5turn, 100%, 20%); }
+	60% { --light: hsl(.6turn, 100%, 20%); }
+	70% { --light: hsl(.7turn, 100%, 20%); }
+	80% { --light: hsl(.8turn, 100%, 20%); }
+	90% { --light: hsl(.9turn, 100%, 20%); }
+	100% { --light: hsl(1turn, 100%, 20%); }
+}
+

ch32v/lib/calculator.html

@@ -2,10 +2,8 @@
 <HTML>
 <HEAD>
 <LINK rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
+<link rel="stylesheet" type="text/css" href="calculator.css" />
 <META charset="UTF-8"/>
-<STYLE>
-:root { color-scheme: dark; }
-</STYLE>
 <SCRIPT src=webhidcontrol.js></SCRIPT>
 <SCRIPT>
 var darkmode = true;
@@ -227,7 +225,7 @@ function computeTable()
 			"<TABLE BORDER=1>" +
 			"<TR><TD>Goertzel</TD></TR>" +
 			"<TR><TD>Goertzel (Inverse)</TD></TR>" +
-			"</TABLE><TEXTAREA ROWS=8 COLS=120 ID=goertzeloutput></TEXTAREA>" +
+			"</TABLE><TEXTAREA ROWS=8 COLS=80 ID=goertzeloutput></TEXTAREA>" +
 			"<P>Click on a ordinal offset to create the C code needed for that tuning parameter. Clicking will copy-to-clipboard.</P>" +
 			"<P>N Divisor #30 (row 3) is usually pretty good.  And, try to select things near 0.25 / 0.75, and avoid 0.0, 0.5, and 1.0.</P>" +
 			"<P>Goertzel's mode is for the ch32v203</P>";
@@ -336,20 +334,20 @@ function computeTable()
 	else if( goertzel2 )
 	{
 		contents += "</TABLE>";
-		contents += "<TABLE><TR><TD><TEXTAREA ROWS=6 COLS=120 ID=goertzeloutput></TEXTAREA></TD><TD><DIV>";
+		contents += "<TABLE><TR><TD><TEXTAREA ROWS=6 COLS=100 ID=goertzeloutput></TEXTAREA></TD><TD><DIV>";
 
 		// Add widget to control various things, realtime.
 		contents += "<BR>Scroll Wheel Control:<BR>";
-		contents += "<input id=mhzm0 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>";
+		contents += "<input id=mhzm0 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>";
-		contents += "<input id=mhzm1 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>";
+		contents += "<input id=mhzm1 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>";
-		contents += "<input id=mhzm2 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>.";
+		contents += "<input id=mhzm2 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>.";
-		contents += "<input id=mhzm3 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>";
+		contents += "<input id=mhzm3 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>";
-		contents += "<input id=mhzm4 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>";
+		contents += "<input id=mhzm4 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>";
-		contents += "<input id=mhzm5 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>,";
+		contents += "<input id=mhzm5 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>,";
-		contents += "<input id=mhzm6 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>";
+		contents += "<input id=mhzm6 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>";
-		contents += "<input id=mhzm7 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>";
+		contents += "<input id=mhzm7 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>";
-		contents += "<input id=mhzm8 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>,";
+		contents += "<input id=mhzm8 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>,";
-		contents += "<input id=mhzm9 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 style='width:2em'>";
+		contents += "<input id=mhzm9 onwheel='mhzm(event, this)' size=1 type=number min=0 max=9 class='scrollwheel_tune'>";
 		contents += "</DIV></TD></TR></TABLE><BR>";
 		contents += "v Click in this row; <TABLE BORDER=1>";
 		contents += '<TR><TH>d\\h</div></TH>';
@@ -465,26 +463,27 @@ function onLoad()
 <TD COLSPAN=3>
 <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 WIDTH=100% ID=LiveGraphContainer>
+<TD ROWSPAN=2 VALIGN=TOP HEIGHT=200 WIDTH=100% ID=LiveGraphContainer>
+
 <CANVAS WIDTH=100% HEIGHT=200 ID=LiveGraph> </CANVAS>
 </TD>
 </TR>
 <TR>
-<TD VALIGN=TOP>
+<TD VALIGN=TOP ROWSPAN=2>
-<TABLE WIDTH=480>
+<TABLE WIDTH=380>
 <TR><TD>System Rate MHz</TD><TD><INPUT ID=crystalmhz VALUE=288></TD></TR>
 <TR><TD>Target MHz</TD><TD><INPUT ID=targetmhz VALUE=27.019360></TD></TR>
-<TR><TD>Quanta</TD><TD><INPUT ID=quanta VALUE=1024> (Goertzel's Only)</TD></TR>
+<TR><TD>Quanta</TD><TD><INPUT ID=quanta VALUE=1024></TD></TR>
-<TR><TD>Quanta Search Range</TD><TD><INPUT ID=quantasearch VALUE=64> (Goertzel's Only)</TD></TR>
+<TR><TD>Quanta Search Range</TD><TD><INPUT ID=quantasearch VALUE=64></TD></TR>
 <TR><TD>Table Type</TD><TD>
-	<INPUT TYPE=RADIO ID=QUADRATURE NAME=computetype>Quadrature</INPUT>
+	<INPUT TYPE=RADIO ID=QUADRATURE NAME=computetype>Quadrature</INPUT><br>
-	<INPUT TYPE=RADIO ID=GOERTZELS NAME=computetype>Goertzels</INPUT>
+	<INPUT TYPE=RADIO ID=GOERTZELS NAME=computetype>Goertzels</INPUT><br>
 	<INPUT TYPE=RADIO ID=GOERTZEL2 NAME=computetype checked>Goertzel (unalign)</INPUT>
 </TD></TR>
 <TR><TD COLSPAN=2><INPUT TYPE=SUBMIT VALUE="Compute" ONCLICK="computeTable()"></TD></TR>
 </TABLE>
 </TD>
-<TD VALIGN=TOP>
+<TD VALIGN=TOP ROWSPAN=2>
 
 Live Control:<br>
 <TABLE><TR>
@@ -495,15 +494,21 @@ Live Control:<br>
 </TR></TABLE>
 <DIV ID="StatusPerf"></DIV>
 </TD>
-
+<TD>
 </TD>
 </TR>
-</TABLE>
+<tr>
+<td>
+</td><td>
 <div id=GeneralData></DIV>
-<input type=checkbox ID=toggle_adc_buffer onchange='toggleBuffer(this)'><label for=toggle_buffer>ADC Buffer Enable</label>
+<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>
+</TABLE>
+
 <DIV ID=TABLE></DIV>
 
 </BODY>