Nomen/generator.js at main · jackestar/Nomen

776 lines (710 loc) · 22.1 KB
"use strict";
let instanceCode;
let instanceCommercial;
let instanceRedraw;
const config = {
    component: 'R',
    type: 'THT',
const getSvg = (bandNumber = 4) => {
    const positions = [];
    switch (bandNumber) {
        case 3:
            positions.push(5.5, 7.1, 8.7);
            break;
        case 4:
            positions.push(4.7, 6.3, 7.9, 9.5);
            break;
        case 5:
            positions.push(3.9, 5.5, 7.1, 8.7, 10.3);
            break;
        default:
            positions.push(4.7, 6.3, 7.9, 9.5);
            break;
    const bandsSvg = positions
        .map(
            (a, i) =>
                `<rect
     style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.357771;paint-order:markers stroke fill"
     id="band${i + 1}"
     width="0.8"
     height="3.2"
     x="${a}"
     y="0" />`
        .join("");
    const svgRaw = `<svg
   width="15mm"
   height="3.2mm"
   viewBox="0 0 15 3.2"
   version="1.1">
     style="fill:#d9b578;fill-opacity:1;stroke:none;stroke-width:0.4;paint-order:markers stroke fill"
     id="base"
     width="9"
     height="3.2"
     rx="0.5" />
     style="fill:#868584;fill-opacity:1;stroke:none;stroke-width:0.4;paint-order:markers stroke fill"
     id="cond-r"
     width="3"
     height="0.5"
     x="12"
     y="1.35" />
     style="fill:#868584;fill-opacity:1;stroke:none;stroke-width:0.4;paint-order:markers stroke fill"
     id="cond-l"
     width="3"
     height="0.5"
     y="1.35" />
${bandsSvg}
    return svgRaw;
const commercialValues = [
    1.0, 1.1, 1.2, 1.3, 1.5, 1.6, 1.8, 2.0, 2.2, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9,
    4.3, 4.7, 5.1, 5.6, 6.2, 6.8, 7.5, 8.2, 9.1,
const values = {
        value: 220,
        tolerance: 1,
        bands: 5,
        value: 1e-3,
        tolerance: 1,
        bands: 5,
        value: 1e-6,
        tolerance: 1,
        bands: 5,
    lang: 'eng',
let colors = {
    black: {
        name: (lang) => {
            switch (lang) {
                case 'eng':
                    return 'black';
                case 'esp':
                    return 'black';
                default:
                    return 'black';
        color: "#0A0A0D",
        colorHC: "#3c3c3c",
        value: 0,
        multiplier: 1,
        tolerance: 0,
        letter: "",
    brown: {
        name: (lang) => {
            switch (lang) {
                case 'eng':
                    return 'brown';
                case 'esp':
                    return 'marron';
                default:
                    return 'brown';
        color: "#80542F",
        colorHC: "#875A41",
        value: 1,
        multiplier: 1e1,
        tolerance: 1,
        letter: "F",
        name: (lang) => {
            switch (lang) {
                case 'eng':
                    return 'red';
                case 'esp':
                    return 'rojo';
                default:
                    return 'red';
        color: "#AB2524",
        colorHC: "#ab413d",
        value: 2,
        multiplier: 1e2,
        tolerance: 2,
        letter: "G",
    orange: {
        name: (lang) => {
            switch (lang) {
                case 'eng':
                    return 'orange';
                case 'esp':
                    return 'naranja';
                default:
                    return 'orange';
        color: '#FA842B',
        colorHC: "#f67f43",
        value: 3,
        multiplier: 1e3,
        tolerance: 0.05,
        letter: "W",
    yellow: {
        name: (lang) => {
            switch ((lang = "eng")) {
                case "eng":
                    return "yellow";
                case "esp":
                    return "amarillo";
                default:
                    return "yellow";
        color: "#F6B600",
        colorHC: "#f8b900",
        value: 4,
        multiplier: 1e4,
        tolerance: 0.02,
        letter: "P",
    green: {
        name: (lang) => {
            switch ((lang = "eng")) {
                case "eng":
                    return "green";
                case "esp":
                    return "verde";
                default:
                    return "green";
        color: "#48A43F",
        colorHC: "#699e4b",
        value: 5,
        multiplier: 1e5,
        tolerance: 0.5,
        letter: "D",
    blue: {
        name: (lang) => {
            switch ((lang = "eng")) {
                case "eng":
                    return "blue";
                case "esp":
                    return "azul";
                default:
                    return "blue";
        color: "#2874B2",
        colorHC: "#0083b4",
        value: 6,
        multiplier: 1e6,
        tolerance: 0.25,
        letter: "C",
    violet: {
        name: (lang) => {
            switch (lang) {
                case 'eng':
                    return 'violet';
                case 'esp':
                    return 'morado';
                default:
                    return 'violet';
        color: "#83639D",
        colorHC: "#8072a1",
        value: 7,
        multiplier: 1e7,
        tolerance: 0.1,
        letter: "B",
    gray: {
        name: (lang) => {
            switch ((lang = "eng")) {
                case "eng":
                    return "gray";
                case "esp":
                    return "gris";
                default:
                    return "gray";
        color: "#7E8B92",
        colorHC: "#828e94",
        value: 8,
        multiplier: 1e8,
        tolerance: 0.01,
        letter: "L",
    white: {
        name: (lang) => {
            switch ((lang = "eng")) {
                case "eng":
                    return "white";
                case "esp":
                    return "blanco";
                default:
                    return "white";
        color: "#E3D9C6",
        colorHC: "#e5dccb",
        value: 9,
        multiplier: 1e9,
        tolerance: 0,
        letter: "",
    gold: {
        name: (lang) => {
            switch ((lang = "eng")) {
                case "eng":
                    return "gold";
                case "esp":
                    return "dorado";
                default:
                    return "gold";
        color: "#E49E00",
        colorHC: "#e6a222",
        value: -1,
        multiplier: 1e-1,
        tolerance: 5,
        letter: "J",
    silver: {
        name: (lang) => {
            switch ((lang = "eng")) {
                case "eng":
                    return "silver";
                case "esp":
                    return "silver";
                default:
                    return "silver";
        color: "#8F999F",
        colorHC: "#939ca2",
        value: -1,
        multiplier: 1e-2,
        tolerance: 10,
        letter: "K",
    pink: {
        name: (lang) => {
            switch (lang) {
                case 'eng':
                    return 'pink';
                case 'esp':
                    return 'rosado';
                default:
                    return 'pink';
        color: '#E1A6AD',
        colorHC: '#DAA5AC',
        value: -1,
        multiplier: 1e-3,
        tolerance: 0,
        letter: 'X',
const colorsAmount = Object.keys(colors);
document.addEventListener('DOMContentLoaded', () => {
    const selR = document.querySelector('aside .selector-R');
    const selL = document.querySelector('aside .selector-L');
    const selC = document.querySelector('aside .selector-C');
    const selTHT = document.querySelector('aside .selector-THT');
    const selSMD = document.querySelector('aside .selector-SMD');
    if (selR) selR.addEventListener('click', () => update('R'));
    if (selL) selL.addEventListener('click', () => update('L'));
    if (selC) selC.addEventListener('click', () => update('C'));
    if (selTHT) selTHT.addEventListener('click', () => update(undefined, 'THT'));
    if (selSMD) selSMD.addEventListener('click', () => update(undefined, 'SMD'));
    instanceCode = document.querySelector('.contain .resistance .code');
    instanceCommercial = document.querySelector('.contain .resistance .comercial');
    instanceRedraw = {};
    drawComercialTable(instanceCommercial);
    const colorArray = Object.entries(colors);
    drawColorTable(instanceCode, colorArray);
    instanceRedraw = instanceCode ? instanceCode.querySelector('.svgContainer') : null;
    if (instanceRedraw) redraw();
let update = (component = undefined, type = undefined) => {
    if (component) config.component = component;
    if (type) config.type = type;
    redraw();
let valueSimplified = (value) => {
    let baseString = "";
    if (value < 1e-6) {
        baseString = "p";
        value *= 1e9;
    } else if (value < 1e-3) {
        baseString = "μ";
        value *= 1e6;
    } else if (value < 1) {
        baseString = "m";
        value *= 1e3;
    } else if (value >= 1e9) {
        baseString = "G";
        value /= 1e9;
    } else if (value >= 1e6) {
        baseString = "M";
        value /= 1e6;
    } else if (value >= 1e3) {
        baseString = "K";
        value /= 1e3;
    if (value == 0) return "0Ω";
    return parseFloat(value.toFixed(2)) + baseString + "Ω";
let getValue = (value) => {
    const regex =
        /^\+?(?:(?:(?:\d+(?:[.,]\d*)?|[.,]\d+)[kKGmMunpμRr]?)|(?:\d+[kKGmMunpμRr]\d+))(?:[eE][+\-]?\d+)?(?:\s*(?:Ω|ohms?))?$/i;
    if (!regex.test(value)) return NaN;
    if (typeof value !== "string" || value.trim() === "") {
        return NaN;
    const multipliers = {
        G: 1e9,
        M: 1e6,
        k: 1e3,
        K: 1e3,
        m: 1e-3,
        u: 1e-6,
        μ: 1e-6,
        n: 1e-9,
        p: 1e-12,
        // R/r are treated as decimal points (1)
        R: 1,
        r: 1,
    // Normalize the string
    let cleanStr = value.trim().replace(/\s*(?:Ω|ohms?)$/i, "");
    // Standardize decimal separator
    cleanStr = cleanStr.replace(",", ".");
    let multiplier = 1;
    let numericPart = cleanStr;
    // Find the suffix and its position
    let suffix = null;
    let suffixIndex = -1;
    for (let i = 0; i < cleanStr.length; i++) {
        const char = cleanStr[i];
        if (multipliers.hasOwnProperty(char)) {
            // Ensure it's not part of an exponent (like 'e')
            const prevChar = i > 0 ? cleanStr[i - 1].toLowerCase() : "";
            if (prevChar !== "e") {
                suffix = char;
                suffixIndex = i;
                break; // Found the single allowed suffix
    // Apply parsing logic based on suffix
    if (suffix) {
        // Get the multiplier for the found suffix
        multiplier = multipliers[suffix];
        // Check if the suffix is used as a decimal point (e.g., "4k7", "2R3")
        const isDecimalReplacement =
            suffixIndex > 0 &&
            suffixIndex < cleanStr.length - 1 &&
            !cleanStr.includes(".");
        if (isDecimalReplacement || suffix.toLowerCase() === "r") {
            // Replace suffix with a decimal point: "4k7" -> "4.7"
            numericPart =
                cleanStr.substring(0, suffixIndex) +
                cleanStr.substring(suffixIndex + 1);
        } else {
            // Suffix is a multiplier at the end, so just remove it: ".1k" -> ".1"
            numericPart = cleanStr.substring(0, suffixIndex);
    // parseFloat handles standard numbers, leading decimals, and exponents
    const baseValue = parseFloat(numericPart);
    if (isNaN(baseValue)) {
        return NaN;
    return baseValue * multiplier;
let redraw = (instance = instanceRedraw) => {
    updateComercialTable();
    // Color Code
    const colorArray = Object.entries(colors);
    // Get Values
    // Numbers
    let band = [];
    let chain = values.R.value.toExponential(2).replace(".", "");
    band.push(colorArray[chain[0] / 1]);
    band.push(colorArray[chain[1] / 1]);
    if (values.R.bands > 4) {
        band.push(colorArray[chain[2] / 1]);
    // Multiplier
    const multiplier = chain.split("e")[1] / 1 + (values.R.bands == 5 ? 0 : 1);
    band.push(
        colorArray[
            chain[0] === "0"
                : multiplier - 1 > 0
                ? multiplier - 2
                : -multiplier + 11
    // Tolerance
    if (values.R.bands > 3)
        for (let colorIndx = 0; colorIndx < colorArray.length; colorIndx++) {
            const color = colorArray[colorIndx];
            if (color[1].tolerance == values.R.tolerance) {
                band.push(color);
                break;
    instance.innerHTML = getSvg(values.R.bands);
    const svg = instance.querySelector('svg');
    band.forEach((a, i) => {
        const rect = svg.querySelector(`rect#band${i + 1}`);
        if (rect) rect.style.fill = a[1].color;
    const baseRect = svg.querySelector('rect#base');
    if (baseRect) baseRect.style.fill = values.R.tolerance == 1 && values.R.bands == 5 ? '#7BC6B8' : '#d9b578';
let updateInput = () => {
    const input = document.getElementById('inputR');
    if (input) input.value = valueSimplified(values.R.value);
let drawColorTable = (instance, colorArray) => {
    let svgContainer;
    instance.innerHTML = "";
    let isBandHide = () => {
        if (values.R.bands == 5) instance.classList.add("fiveBands");
        else instance.classList.remove("fiveBands");
    let inputCont = document.createElement("div");
    inputCont.classList.add("inputCont");
    let placeholder = document.createElement("input");
    placeholder.type = "text";
    placeholder.value = valueSimplified(values.R.value);
    let updateValue = (e) => {
        const evaluate = getValue(placeholder.value);
        if (isNaN(evaluate)) {
            values.R.value = 1000;
            // error handler
        } else values.R.value = evaluate;
        redraw();
    placeholder.oninput = updateValue;
    placeholder.onchange = (e) => {
        placeholder.value = valueSimplified(values.R.value);
    placeholder.id = "inputR";
    inputCont.appendChild(placeholder);
    let toleranceP = document.createElement("p");
    toleranceP.classList.add("toleranceP");
    toleranceP.innerText = `±${values.R.tolerance}%`;
    inputCont.appendChild(toleranceP);
    instance.appendChild(inputCont);
    let bandRemove = document.createElement("div");
    bandRemove.title = "Remove Band";
    bandRemove.classList.add("bandRemove");
    bandRemove.classList.add("band");
    bandRemove.addEventListener("click", (e) => {
        if (values.R.bands > 3) values.R.bands--;
        if (values.R.bands == 3) values.R.tolerance = 20;
        toleranceP.innerText = `±${values.R.tolerance}%`;
        isBandHide();
        redraw();
    let bandRemoveP = document.createElement("p");
    bandRemoveP.innerText = "-";
    bandRemove.appendChild(bandRemoveP);
    instance.appendChild(bandRemove);
    svgContainer = document.createElement("div");
    svgContainer.classList.add("svgContainer");
    instance.appendChild(svgContainer);
    let bandAdd = document.createElement("div");
    bandAdd.title = "Add Band";
    bandAdd.classList.add("bandAdd");
    bandAdd.classList.add("band");
    bandAdd.addEventListener("click", (e) => {
        if (values.R.bands < 5) values.R.bands++;
        if (values.R.bands == 4) values.R.tolerance = 5;
        toleranceP.innerText = `±${values.R.tolerance}%`;
        isBandHide();
        redraw();
    let bandAddP = document.createElement("p");
    bandAddP.innerText = "+";
    bandAdd.appendChild(bandAddP);
    instance.appendChild(bandAdd);
    // Table
    let table = document.createElement("table");
    for (const [k, value] of colorArray) {
        let tr = document.createElement("tr");
        tr.style.background = value.color;
        let tdName = document.createElement("td");
        let pName = document.createElement("p");
        pName.innerText = value.name(config.lang);
        tdName.appendChild(pName);
        tr.appendChild(tdName);
        let tdValue = document.createElement("td");
        tdValue.classList.add("tdValue");
        let pValue = document.createElement("p");
        if (value.value >= 0) {
            pValue.innerText = value.value;
        } else {
            tdValue.classList.add("noSelect");
        tdValue.appendChild(pValue);
        let tdValue2 = tdValue.cloneNode(true);
        if (value.value >= 0) {
            tdValue.addEventListener("click", (e) => {
                let chain = values.R.value.toExponential(2).replace(".", "");
                let splitChain = chain.split("");
                splitChain[0] = value.value;
                values.R.value = splitChain.join("") / 100;
                redraw();
                placeholder.value = valueSimplified(values.R.value);
            tdValue2.addEventListener("click", (e) => {
                let chain = values.R.value.toExponential(2).replace(".", "");
                let splitChain = chain.split("");
                splitChain[1] = value.value;
                values.R.value = splitChain.join("") / 100;
                redraw();
                placeholder.value = valueSimplified(values.R.value);
        } else {
        tr.appendChild(tdValue);
        tr.appendChild(tdValue2);
        if (values.R.bands > 4) {
            let tdValue3 = tdValue.cloneNode(true);
            tdValue3.classList.add("thirdBand");
            if (value.value >= 0)
                tdValue3.addEventListener("click", (e) => {
                    let chain = values.R.value
                        .toExponential(2)
                        .replace(".", "");
                    let splitChain = chain.split("");
                    splitChain[2] = value.value;
                    values.R.value = splitChain.join("") / 100;
                    redraw();
                    placeholder.value = valueSimplified(values.R.value);
            else {
                // tdValue3.classList.add("noSelect")
            tr.appendChild(tdValue3);
        let tdMultiplier = document.createElement("td");
        let pMultiplier = document.createElement("p");
        pMultiplier.innerText = value.multiplier;
        pMultiplier.addEventListener("click", (e) => {
            let chain = values.R.value.toExponential(2).replace(".", "");
            let splitChain = chain.split("e");
            const exponent =
                value.multiplier.toExponential().split("e")[1] / 1 +
                (values.R.bands == 5 ? 0 : -1);
            splitChain[1] = "e" + exponent;
            values.R.value = splitChain.join("") / 1;
            redraw();
            placeholder.value = valueSimplified(values.R.value);
        });
        tdMultiplier.appendChild(pMultiplier);
        tr.appendChild(tdMultiplier);
        if (values.R.bands > 3) {
            let tdTolerance = document.createElement("td");
            let pTolerance = document.createElement("p");
            pTolerance.innerText =
                value.tolerance > 0 ? `±${value.tolerance}%` : "";
            tdTolerance.appendChild(pTolerance);
            if (value.tolerance > 0)
                tdTolerance.addEventListener("click", (e) => {
                    values.R.tolerance = value.tolerance;
                    toleranceP.innerText =
                        values.R.bands > 3 ? `±${value.tolerance}%` : "±20%";
                    redraw();
            else tdTolerance.classList.add("noSelect");
            tr.appendChild(tdTolerance);
        table.appendChild(tr);
    instance.appendChild(table);
    isBandHide();
let getTarget = (base) => {
    return base.reduce((closest, current) => {
        const currentDiff = Math.abs(current - values.R.value);
        const closestDiff = Math.abs(closest - values.R.value);
        return currentDiff < closestDiff ? current : closest;
let scrollElement = null;
let updateComercialTable = (instance = instanceCommercial) => {
    if (!instance) return;
    const base = Array.from(instance.childNodes[0].childNodes);
    const scrollElementNew = base.reduce((closest, current) => {
        const currentDiff = Math.abs(getValue(current.innerText) - values.R.value);
        const closestDiff = Math.abs(getValue(closest.innerText) - values.R.value);
        return currentDiff < closestDiff ? current : closest;
    if (!scrollElement || scrollElement.innerHTML !== scrollElementNew.innerHTML) selElement(values.R.value, scrollElementNew);
    instance.scrollTop = -instance.clientHeight / 2 + scrollElementNew.offsetTop;
let selElement = (e, li) => {
    values.R.value = e;
    li.classList.add('selected');
    if (scrollElement) scrollElement.classList.remove('selected');
    scrollElement = li;
let drawComercialTable = (instance = instanceCommercial) => {
    if (!instance) return;
    let list = document.createElement('ul');
    let base = [];
        1e11, 1e10, 1e9, 1e8, 1e7, 1e6, 1e5, 1e4, 1e3, 1e2, 1e1, 1, 1e-1, 1e-2,
        1e-3, 1e-4, 1e-5, 1e-6, 1e-7, 1e-8, 1e-9, 1e-10,
    ].forEach((e) => {
        base.push(commercialValues.map((i) => e * i).reverse());
    base.push(0);
    base = base.flat();
    scrollElement = null;
    let target = getTarget(base);
    base.forEach((e) => {
        let li = document.createElement('li');
        let p = document.createElement('p');
        p.innerHTML = valueSimplified(e);
        li.appendChild(p);
        li.addEventListener('click', () => {
            selElement(e, li);
            updateInput();
            redraw();
        });
        if (e == target) {
            li.classList.add('selected');
            scrollElement = li;
        list.appendChild(li);
    instance.appendChild(list);
    instance.scrollTop = -instance.clientHeight / 2 + (scrollElement ? scrollElement.offsetTop : 0);
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

generator.js

Latest commit

History

generator.js

File metadata and controls
