From d389ba00d219f80ca5c24c1d7386130e10703f1e Mon Sep 17 00:00:00 2001 From: Josh Varga Date: Tue, 2 Jan 2024 20:12:11 -0600 Subject: [PATCH 1/5] Removing jQuery from and cleaning up HexBinDec.vue --- src/components/DialogBox/HexBinDec.vue | 222 ++++++++++++------------- src/simulator/src/utils.js | 69 +------- src/simulator/src/ux.js | 59 ------- 3 files changed, 112 insertions(+), 238 deletions(-) diff --git a/src/components/DialogBox/HexBinDec.vue b/src/components/DialogBox/HexBinDec.vue index 5fc55df9..8bca3ea4 100644 --- a/src/components/DialogBox/HexBinDec.vue +++ b/src/components/DialogBox/HexBinDec.vue @@ -1,136 +1,134 @@ - +function hexConverter(input: string) { + var x = parseInt(input, 16) + setBaseValues(x) +} + \ No newline at end of file diff --git a/src/simulator/src/utils.js b/src/simulator/src/utils.js index 6549edfd..9d6a32b9 100644 --- a/src/simulator/src/utils.js +++ b/src/simulator/src/utils.js @@ -216,20 +216,8 @@ export function truncateString(str, num) { } export function bitConverterDialog() { - console.log('Open dialog box') - const simulatorStore = SimulatorStore() - simulatorStore.dialogBox.hex_bin_dec_converter_dialog = true - console.log(simulatorStore.dialogBox.hex_bin_dec_converter_dialog) - // $('#bitconverterprompt').dialog({ - // buttons: [ - // { - // text: 'Reset', - // click: function () { - // setBaseValues(0) - // }, - // }, - // ], - // }) + const simulatorStore = SimulatorStore(); + simulatorStore.dialogBox.hex_bin_dec_converter_dialog = true; } export function getImageDimensions(file) { @@ -250,15 +238,6 @@ export var convertors = { dec2bcd: (x) => parseInt(x.toString(10), 16).toString(2), } -export function setBaseValues(x) { - if (isNaN(x)) return - $('#binaryInput').val(convertors.dec2bin(x)) - $('#bcdInput').val(convertors.dec2bcd(x)) - $('#octalInput').val(convertors.dec2octal(x)) - $('#hexInput').val(convertors.dec2hex(x)) - $('#decimalInput').val(x) -} - export function parseNumber(num) { if (num instanceof Number) return num if (num.slice(0, 2).toLocaleLowerCase() == '0b') @@ -269,50 +248,6 @@ export function parseNumber(num) { return parseInt(num) } -export function setupBitConvertor() { - console.log('check bit convertor') - $('#decimalInput').on('keyup', function () { - var x = parseInt($('#decimalInput').val(), 10) - setBaseValues(x) - }) - - $('#binaryInput').on('keyup', function () { - var inp = $('#binaryInput').val() - var x - if (inp.slice(0, 2) == '0b') x = parseInt(inp.slice(2), 2) - else x = parseInt(inp, 2) - setBaseValues(x) - }) - $('#bcdInput').on('keyup', function () { - var input = $('#bcdInput').val() - var num = 0 - while (input.length % 4 !== 0) { - input = '0' + input - } - if (input !== 0) { - var i = 0 - while (i < input.length / 4) { - if (parseInt(input.slice(4 * i, 4 * (i + 1)), 2) < 10) - num = - num * 10 + parseInt(input.slice(4 * i, 4 * (i + 1)), 2) - else return setBaseValues(NaN) - i++ - } - } - return setBaseValues(x) - }) - - $('#hexInput').on('keyup', function () { - var x = parseInt($('#hexInput').val(), 16) - setBaseValues(x) - }) - - $('#octalInput').on('keyup', function () { - var x = parseInt($('#octalInput').val(), 8) - setBaseValues(x) - }) -} - export function promptFile(contentType, multiple) { var input = document.createElement('input') input.type = 'file' diff --git a/src/simulator/src/ux.js b/src/simulator/src/ux.js index f01bdcee..9d61a4dc 100644 --- a/src/simulator/src/ux.js +++ b/src/simulator/src/ux.js @@ -22,7 +22,6 @@ import { setProjectName, getProjectName } from './data/save' import { changeScale } from './canvasApi' import { generateImage, generateSaveData } from './data/save' import { setupVerilogExportCodeWindow } from './verilog' -import { setupBitConvertor } from './utils' import { updateTestbenchUI, setupTestbenchUI } from './testbench' import { applyVerilogTheme } from './Verilog2CV' import { dragging } from './drag' @@ -184,7 +183,6 @@ export function setupUI() { // $('#moduleProperty').draggable(); setupPanels() // setupVerilogExportCodeWindow() - setupBitConvertor() } /** @@ -631,63 +629,6 @@ export function deleteSelected() { updateRestrictedElementsInScope() } -/** - * listener for opening the prompt for bin conversion - * @category ux - */ -$('#bitconverter').on('click', () => { - console.log('something clicked') - $('#bitconverterprompt').dialog({ - resizable: false, - buttons: [ - { - text: 'Reset', - click() { - $('#decimalInput').val('0') - $('#binaryInput').val('0') - $('#octalInput').val('0') - $('#hexInput').val('0') - }, - }, - ], - }) -}) - -// convertors -const convertors = { - dec2bin: (x) => `0b${x.toString(2)}`, - dec2hex: (x) => `0x${x.toString(16)}`, - dec2octal: (x) => `0${x.toString(8)}`, -} - -function setBaseValues(x) { - if (isNaN(x)) return - $('#binaryInput').val(convertors.dec2bin(x)) - $('#octalInput').val(convertors.dec2octal(x)) - $('#hexInput').val(convertors.dec2hex(x)) - $('#decimalInput').val(x) -} - -$('#decimalInput').on('keyup', () => { - var x = parseInt($('#decimalInput').val(), 10) - setBaseValues(x) -}) - -$('#binaryInput').on('keyup', () => { - var x = parseInt($('#binaryInput').val(), 2) - setBaseValues(x) -}) - -$('#hexInput').on('keyup', () => { - var x = parseInt($('#hexInput').val(), 16) - setBaseValues(x) -}) - -$('#octalInput').on('keyup', () => { - var x = parseInt($('#octalInput').val(), 8) - setBaseValues(x) -}) - export function setupPanels() { // $('#dragQPanel') // .on('mousedown', () => From 624899669336bfb4fa10cd68ec5091491e2c0077 Mon Sep 17 00:00:00 2001 From: Josh Varga Date: Wed, 3 Jan 2024 11:10:59 -0600 Subject: [PATCH 2/5] Update HexBinDec.vue per review --- src/components/DialogBox/HexBinDec.vue | 152 +++++++++++++++---------- 1 file changed, 90 insertions(+), 62 deletions(-) diff --git a/src/components/DialogBox/HexBinDec.vue b/src/components/DialogBox/HexBinDec.vue index 8bca3ea4..95f5c2d6 100644 --- a/src/components/DialogBox/HexBinDec.vue +++ b/src/components/DialogBox/HexBinDec.vue @@ -1,26 +1,46 @@ @@ -30,28 +50,28 @@ const SimulatorState = useState() import { onMounted, ref } from '@vue/runtime-core' const inputArr = ref( -{ -'decimalInput' : { - val: '16', - label: 'Decimal value', - }, - 'binaryInput': { - val: '0b10000', - label: 'Binary value', - }, - 'bcdInput': { - val: '10110', - label: 'Binary-coded decimal value', - }, - 'octalInput': { - val: '020', - label: 'Octal value', - }, - 'hexInput': { - val: '0x10', - label: 'Hexadecimal value', - }, -}) + { + 'decimalInput': { + val: '16', + label: 'Decimal value', + }, + 'binaryInput': { + val: '0b10000', + label: 'Binary value', + }, + 'bcdInput': { + val: '10110', + label: 'Binary-coded decimal value', + }, + 'octalInput': { + val: '020', + label: 'Octal value', + }, + 'hexInput': { + val: '0x10', + label: 'Hexadecimal value', + }, + }) onMounted(() => { SimulatorState.dialogBox.hex_bin_dec_converter_dialog = false @@ -59,31 +79,39 @@ onMounted(() => { function converter(e: KeyboardEvent) { const target = e.target!; - switch(target.id) { - case 'decimalInput': - decimalConverter(target.value); - break; - case 'binaryInput': - binaryConverter(target.value); - break; - case 'bcdInput': - bcdConverter(target.value); - break; - case 'octalInput': - octalConverter(target.value); - break; - case 'hexInput': - hexConverter(target.value); - break; + switch (target.id) { + case 'decimalInput': + decimalConverter(target.value); + break; + case 'binaryInput': + binaryConverter(target.value); + break; + case 'bcdInput': + bcdConverter(target.value); + break; + case 'octalInput': + octalConverter(target.value); + break; + case 'hexInput': + hexConverter(target.value); + break; } } +function convertToBCD(value: number) { + let digits = value.toString().split(''); + let bcdOfDigits = digits.map(function(digit) { + return parseInt(digit).toString(2).padStart(4, '0'); + }); + return bcdOfDigits.join(''); +} + function setBaseValues(x: number) { if (isNaN(x)) { return; } inputArr.value.binaryInput.val = '0b' + x.toString(2); - inputArr.value.bcdInput.val = parseInt(x.toString(10), 16).toString(2); + inputArr.value.bcdInput.val = convertToBCD(x); inputArr.value.octalInput.val = '0' + x.toString(8); inputArr.value.hexInput.val = '0x' + x.toString(16); inputArr.value.decimalInput.val = x.toString(10); @@ -131,4 +159,4 @@ function hexConverter(input: string) { var x = parseInt(input, 16) setBaseValues(x) } - \ No newline at end of file + From a716eac7576feddef86b0662e06ff33dd8c23680 Mon Sep 17 00:00:00 2001 From: Josh Varga Date: Wed, 3 Jan 2024 11:14:15 -0600 Subject: [PATCH 3/5] Format HexBinDec.vue with Prettier --- src/components/DialogBox/HexBinDec.vue | 238 ++++++++++++------------- 1 file changed, 118 insertions(+), 120 deletions(-) diff --git a/src/components/DialogBox/HexBinDec.vue b/src/components/DialogBox/HexBinDec.vue index 95f5c2d6..da02502a 100644 --- a/src/components/DialogBox/HexBinDec.vue +++ b/src/components/DialogBox/HexBinDec.vue @@ -1,47 +1,47 @@ From 04cded9d95eef36d3cb2ec89d9cf2e0a69e88703 Mon Sep 17 00:00:00 2001 From: Josh Varga Date: Thu, 4 Jan 2024 20:57:37 -0600 Subject: [PATCH 4/5] Update src/components/DialogBox/HexBinDec.vue Co-authored-by: Arnabdaz <96580571+Arnabdaz@users.noreply.github.com> --- src/components/DialogBox/HexBinDec.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DialogBox/HexBinDec.vue b/src/components/DialogBox/HexBinDec.vue index da02502a..b5f6cc88 100644 --- a/src/components/DialogBox/HexBinDec.vue +++ b/src/components/DialogBox/HexBinDec.vue @@ -59,7 +59,7 @@ const inputArr = ref({ label: 'Binary value', }, bcdInput: { - val: '10110', + val: '00010110', label: 'Binary-coded decimal value', }, octalInput: { From e1d244ec123a5b31204551149f3c65d7cf1c8fa7 Mon Sep 17 00:00:00 2001 From: Josh Varga Date: Thu, 4 Jan 2024 21:23:44 -0600 Subject: [PATCH 5/5] Updates per review --- src/components/DialogBox/HexBinDec.vue | 77 +++++++++++++++++++++++--- 1 file changed, 68 insertions(+), 9 deletions(-) diff --git a/src/components/DialogBox/HexBinDec.vue b/src/components/DialogBox/HexBinDec.vue index b5f6cc88..86c89f4e 100644 --- a/src/components/DialogBox/HexBinDec.vue +++ b/src/components/DialogBox/HexBinDec.vue @@ -42,6 +42,49 @@ + + + +

Hex-Bin-Dec Converter

+ + mdi-close + +
+ +
+ +

+
+ + + + Reset + + + +