summaryrefslogtreecommitdiff
path: root/mod
diff options
context:
space:
mode:
Diffstat (limited to 'mod')
-rw-r--r--mod/web/resistors/default.nix12
-rw-r--r--mod/web/resistors/index.html339
-rw-r--r--mod/web/resistors/styles.css127
3 files changed, 478 insertions, 0 deletions
diff --git a/mod/web/resistors/default.nix b/mod/web/resistors/default.nix
new file mode 100644
index 0000000..5fca68b
--- /dev/null
+++ b/mod/web/resistors/default.nix
@@ -0,0 +1,12 @@
+{ pkgs, ... }:
+
+pkgs.stdenvNoCC.mkDerivation {
+ pname = "resistors";
+ version = "0.0";
+ src = ./.;
+
+ buildInputs = [ pkgs.nodePackages.prettier ];
+
+ phases = [ "installPhase" ];
+ installPhase = "mkdir -p $out; cp -r $src/*.{css,html} $out/";
+}
diff --git a/mod/web/resistors/index.html b/mod/web/resistors/index.html
new file mode 100644
index 0000000..0683f49
--- /dev/null
+++ b/mod/web/resistors/index.html
@@ -0,0 +1,339 @@
+<!doctype html>
+<head>
+ <meta charset="utf-8" />
+ <title>rs-calc</title>
+ <link rel="stylesheet" href="styles.css" />
+ <meta name="viewport" content="initial-scale=1.0" />
+</head>
+
+<body>
+ <h1>rs-calc</h1>
+
+ <input id="resistor-query" placeholder="e.g. 3.3K" />
+ <label class="resistor-query-label" for="resistor-query">&#8486;</label>
+
+ <div id="resistor-result" style="display: none">
+ <h2>four bands</h2>
+ <div class="resistor-diagram resistor-diagram-4">
+ <div id="resistor-stripe-4-1" class="resistor-stripe"></div>
+ <div id="resistor-stripe-4-2" class="resistor-stripe"></div>
+ <div id="resistor-stripe-4-3" class="resistor-stripe"></div>
+ <div id="resistor-stripe-4-4" class="resistor-stripe">
+ &nbsp;<br />&nbsp;
+ </div>
+ <div
+ class="resistor-stripe-tolerance resistor-stripe"
+ style="color: #000; background-color: #cfb53b"
+ >
+ gold<br />&plusmn;5%
+ </div>
+ </div>
+ <h2>five bands</h2>
+ <div class="resistor-diagram resistor-diagram-5">
+ <div id="resistor-stripe-5-1" class="resistor-stripe"></div>
+ <div id="resistor-stripe-5-2" class="resistor-stripe"></div>
+ <div id="resistor-stripe-5-3" class="resistor-stripe"></div>
+ <div id="resistor-stripe-5-4" class="resistor-stripe"></div>
+ <div
+ class="resistor-stripe-tolerance resistor-stripe"
+ style="color: #fff; background-color: #964b00"
+ >
+ brown<br />&plusmn;1%
+ </div>
+ </div>
+ <h2>surface mount</h2>
+ <div id="resistor-smt-3" class="resistor-smt"></div>
+ </div>
+
+ <footer>
+ <p>
+ forked from
+ <a href="https://github.com/joewalnes/resisto.rs/" target="_blank">this</a
+ >, with removed analytics, cleaned up code.
+ <a href="https://github.com/kleidib" target="_blank">my github</a>
+ </p>
+ </footer>
+</body>
+
+<script>
+ // Resistor calculator.
+ // -Joe Walnes
+ // See resistors-test.html
+
+ var resistors = {};
+
+ // These hex codes came from
+ // http://en.wikipedia.org/wiki/Electronic_color_code
+ resistors.digitsToColors = {
+ "-2": { hex: "#c0c0c0", label: "#000", name: "silver", multiplier: "0.01" },
+ "-1": { hex: "#cfb53b", label: "#000", name: "gold", multiplier: "0.1" },
+ 0: { hex: "#000000", label: "#fff", name: "black", figure: "0" },
+ 1: {
+ hex: "#964b00",
+ label: "#fff",
+ name: "brown",
+ figure: "1",
+ multiplier: "10",
+ },
+ 2: {
+ hex: "#ff0000",
+ label: "#fff",
+ name: "red",
+ figure: "2",
+ multiplier: "100",
+ },
+ 3: {
+ hex: "#ffa500",
+ label: "#000",
+ name: "orange",
+ figure: "3",
+ multiplier: "1K",
+ },
+ 4: {
+ hex: "#ffff00",
+ label: "#000",
+ name: "yellow",
+ figure: "4",
+ multiplier: "10K",
+ },
+ 5: {
+ hex: "#9acd32",
+ label: "#000",
+ name: "green",
+ figure: "5",
+ multiplier: "100K",
+ },
+ 6: {
+ hex: "#6495ed",
+ label: "#000",
+ name: "blue",
+ figure: "6",
+ multiplier: "1M",
+ },
+ 7: {
+ hex: "#ee82ee",
+ label: "#000",
+ name: "purple",
+ figure: "7",
+ multiplier: "10M",
+ },
+ 8: {
+ hex: "#a0a0a0",
+ label: "#000",
+ name: "gray",
+ figure: "8",
+ multiplier: "100M",
+ },
+ 9: {
+ hex: "#ffffff",
+ label: "#000",
+ name: "white",
+ figure: "9",
+ multiplier: "1000M",
+ },
+ };
+
+ resistors.query = function (input) {
+ input = input
+ .replace(/ +?/g, "")
+ .replace(/ohm[s]?/, "")
+ .replace(/\u2126/, "")
+ .replace(/\.$/, "");
+
+ var value = this.parseValue(input);
+
+ if (value !== null) {
+ value = this.roundToSignificantPlaces(value, 3);
+
+ if ((value <= 99900000000 && value >= 1) || value === 0) {
+ var colors5 = this.numberTo5ColorDigits(value);
+ var colors4 = this.numberTo4ColorDigits(value);
+ var smt3 = value < 10 ? colors4[0].toString() : colors4.join("");
+ var self = this;
+
+ return {
+ value: value,
+ smt3: smt3,
+ //smt4: smt4,
+ //smtEia96: smtEia96,
+ formatted: this.formatValue(value),
+ colors5: colors5.map(function (d) {
+ return self.digitsToColors[d];
+ }),
+ colors4: colors4.map(function (d) {
+ return self.digitsToColors[d];
+ }),
+ };
+ }
+ }
+
+ return null;
+ };
+
+ /**
+ * Given ohm rating as string (e.g. 3.2m or 3M2), return
+ * integer value (e.g. 3200000).
+ */
+ resistors.parseValue = function (input) {
+ var multiplier = 1;
+ var match;
+
+ if ((match = input.match(/^(\d+)(\.(\d+))?([km])?$/i))) {
+ // e.g. 123, 1.23, 1M, 1.23M
+ var unit = match[4];
+ if (unit) {
+ if (unit == "k" || unit == "K") {
+ multiplier = 1000;
+ }
+ if (unit == "m" || unit == "M") {
+ multiplier = 1000000;
+ }
+ }
+
+ return (match[1] + "." + (match[3] || 0)) * multiplier;
+ } else if ((match = input.match(/^(\d+)([km])(\d+)$/i))) {
+ // e.g. 12K3
+ var unit = match[2];
+ if (unit) {
+ if (unit == "k" || unit == "K") {
+ multiplier = 1000;
+ }
+ if (unit == "m" || unit == "M") {
+ multiplier = 1000000;
+ }
+ }
+ return (match[1] + "." + (match[3] || 0)) * multiplier;
+ } else {
+ return null;
+ }
+ };
+
+ /**
+ * Round a value to significant places.
+ * e.g. (123456789, 3) -> 123000000)
+ * (0.0045678, 3) -> 0.00457)
+ */
+ resistors.roundToSignificantPlaces = function (value, significant) {
+ if (!value) {
+ return 0;
+ }
+ var nearest = Math.pow(
+ 10,
+ Math.floor(Math.log(Math.abs(value)) / Math.log(10)) - (significant - 1),
+ );
+ return Math.round(value / nearest) * nearest;
+ };
+
+ /**
+ * Given ohm rating as integer (e.g. 470000), return
+ * array of color digits (e.g. 4, 7, 0, 3). See digitsTo_Colors.
+ */
+ resistors.numberTo5ColorDigits = function (value) {
+ if (!value) {
+ return [0, 0, 0, 0]; // Special case
+ }
+
+ var precision = 5;
+ var digits = (
+ Math.floor(value * 100 * Math.pow(10, precision)) /
+ Math.pow(10, precision)
+ ).toString();
+ function getDigit(digits, i) {
+ var d = parseInt(digits[i]);
+ return isNaN(d) ? 0 : d;
+ }
+ return [
+ getDigit(digits, 0),
+ getDigit(digits, 1),
+ getDigit(digits, 2),
+ digits.length - 5,
+ ];
+ };
+
+ /**
+ * Given ohm rating as integer (e.g. 470000), return
+ * array of color digits (e.g. 4, 7, 0, 3). See digitsTo_Colors.
+ */
+ resistors.numberTo4ColorDigits = function (value) {
+ if (!value) {
+ return [0, 0, 0]; // Special case
+ }
+
+ var precision = 5;
+ var digits = (
+ Math.floor(value * 100 * Math.pow(10, precision)) /
+ Math.pow(10, precision)
+ ).toString();
+ function getDigit(digits, i) {
+ var d = parseInt(digits[i]);
+ return isNaN(d) ? 0 : d;
+ }
+ return [getDigit(digits, 0), getDigit(digits, 1), digits.length - 4];
+ };
+
+ /**
+ * Given a numeric value, format it like '3.2M' etc.
+ */
+ resistors.formatValue = function (value) {
+ if (value >= 1000000) {
+ return value / 1000000 + "M";
+ } else if (value >= 1000) {
+ return value / 1000 + "K";
+ } else {
+ return value.toString();
+ }
+ };
+</script>
+<script>
+ var queryEl = document.getElementById("resistor-query"),
+ resultEl = document.getElementById("resistor-result");
+
+ function showStripes(colors, prefix) {
+ for (var i = 0; i < colors.length; i++) {
+ var color = colors[i];
+ var stripeEl = document.getElementById(
+ "resistor-stripe-" + prefix + "-" + (i + 1),
+ );
+ stripeEl.style.backgroundColor = color.hex;
+ stripeEl.style.color = color.label;
+ var text = color.name + "<br>";
+
+ if (i == colors.length - 1) {
+ if (color.multiplier !== undefined) {
+ text += "&times;" + color.multiplier;
+ } else {
+ text += "&nbsp;";
+ }
+ } else {
+ text += color.figure;
+ }
+ stripeEl.innerHTML = text;
+ }
+ }
+
+ queryEl.onchange = queryEl.onkeyup = function () {
+ location.hash = encodeURIComponent(queryEl.value);
+ var result = resistors.query(queryEl.value);
+
+ if (result) {
+ resultEl.style.display = "block";
+ showStripes(result.colors4, "4");
+ showStripes(result.colors5, "5");
+ document.getElementById("resistor-smt-3").innerHTML = result.smt3;
+ } else {
+ resultEl.style.display = "none";
+ }
+ };
+
+ if (location.hash) {
+ queryEl.value = decodeURIComponent(location.hash.substring(1));
+ queryEl.onchange();
+ }
+
+ window.onhashchange = function () {
+ queryEl.value = decodeURIComponent(location.hash.substring(1));
+ queryEl.onchange();
+ };
+
+ queryEl.focus();
+</script>
diff --git a/mod/web/resistors/styles.css b/mod/web/resistors/styles.css
new file mode 100644
index 0000000..e2823e4
--- /dev/null
+++ b/mod/web/resistors/styles.css
@@ -0,0 +1,127 @@
+* {
+ /*font-family: 'firacode';*/
+ text-rendering: optimizeLegibility;
+}
+
+body {
+ margin: 10px 20px;
+ color: #cccccc;
+ background: #252525;
+ background-attachment: fixed !important;
+}
+
+h1 {
+ font-weight: normal;
+ font-size: 50px;
+ margin: -10px 0 10px 0;
+}
+
+h2 {
+ font-weight: normal;
+ font-size: 15px;
+}
+
+strong {
+ font-weight: normal;
+}
+
+footer {
+ position: absolute;
+ font-size: 12px;
+ color: #555;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20px;
+}
+
+a {
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+footer a {
+ color: #775;
+}
+
+#resistor-query {
+ font-size: 20px;
+ border: 1px solid #999;
+ color: #fff;
+ background-color: #444;
+ outline: none;
+ width: 180px;
+}
+
+.resistor-stripe {
+ width: 80px;
+ height: 150px;
+ display: inline-block;
+ padding: 4px 4px;
+}
+
+.resistor-smt {
+ display: inline-block;
+ padding: 0px 10px;
+ font-size: 35px;
+ background-color: #000;
+ border-left: 15px solid silver;
+ border-right: 15px solid silver;
+ border-top: 1px solid silver;
+ border-bottom: 1px solid silver;
+ margin-right: 10px;
+}
+
+@media print, screen and (max-width: 520px) {
+ .resistor-stripe {
+ width: 55px;
+ font-size: 80%;
+ height: 100px;
+ }
+ .resistor-smt {
+ font-size: 25px;
+ border-left: 12px solid silver;
+ border-right: 12px solid silver;
+ }
+}
+
+@media print, screen and (max-width: 410px) {
+ .resistor-stripe {
+ width: 35px;
+ font-size: 55%;
+ height: 70px;
+ }
+ .resistor-smt {
+ font-size: 18px;
+ border-left: 8px solid silver;
+ border-right: 8px solid silver;
+ }
+}
+
+@media print, screen and (max-width: 300px) {
+ .resistor-stripe {
+ width: 25px;
+ font-size: 50%;
+ height: 60px;
+ padding: 2px;
+ }
+ .resistor-smt {
+ font-size: 13px;
+ border-left: 6px solid silver;
+ border-right: 6px solid silver;
+ padding: 2px 4px;
+ }
+}
+
+@media print, screen and (max-height: 660px) {
+ .resistor-stripe {
+ height: 55px;
+ }
+ footer {
+ position: inherit;
+ padding: 10px 0;
+ }
+}
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-04 09:04:06 +0000