Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removing jQuery from and cleaning up HexBinDec.vue #245

Merged
merged 7 commits into from
Jan 5, 2024
Merged

Removing jQuery from and cleaning up HexBinDec.vue #245

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d389ba0
Removing jQuery from and cleaning up HexBinDec.vue
JoshVarga Jan 3, 2024
f1301dd
Merge branch 'main' into upstream
Arnabdaz Jan 3, 2024
6248996
Update HexBinDec.vue per review
JoshVarga Jan 3, 2024
a716eac
Format HexBinDec.vue with Prettier
JoshVarga Jan 3, 2024
04cded9
Update src/components/DialogBox/HexBinDec.vue
JoshVarga Jan 5, 2024
e1d244e
Updates per review
JoshVarga Jan 5, 2024
81571f2
Merge branch 'main' into upstream
Arnabdaz Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 75 additions & 51 deletions src/components/DialogBox/HexBinDec.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
>
<v-card class="messageBoxContent">
<v-card-text>
<p class="dialogHeader">Hex-Bin-Dec Convertor</p>
<p class="dialogHeader">Hex-Bin-Dec Converter</p>
<v-btn
size="x-small"
icon
Expand All @@ -17,20 +17,20 @@
<v-icon>mdi-close</v-icon>
</v-btn>
<div
v-for="inputEle in inputArr"
v-for="(value, index) in Object.entries(inputArr)"
id="bitconverterprompt"
:key="inputEle.inputId"
:key="value[0]"
title="Dec-Bin-Hex-Converter"
>
<label>{{ inputEle.label }}</label>
<label>{{ value[1].label }}</label>
<br />
<input
:id="inputEle.inputId"
:id="value[0]"
type="text"
:value="inputEle.val"
:label="inputEle.label"
:value="value[1].val"
:label="value[1].label"
name="text1"
@keyup="() => converter(inputEle.inputId)"
@keyup="(payload) => converter(payload)"
/>
<br /><br />
</div>
Expand All @@ -47,90 +47,114 @@
<script lang="ts" setup>
import { useState } from '#/store/SimulatorStore/state'
const SimulatorState = useState()
import { setBaseValues } from '#/simulator/src/utils'
import { onMounted, ref } from '@vue/runtime-core'

const inputArr = ref([])
inputArr.value = [
{
inputId: 'decimalInput',
const inputArr = ref({
decimalInput: {
val: '16',
label: 'Decimal value',
},
{
inputId: 'binaryInput',
binaryInput: {
val: '0b10000',
label: 'Binary value',
},
{
inputId: 'bcdInput',
bcdInput: {
val: '10110',
JoshVarga marked this conversation as resolved.
Show resolved Hide resolved
label: 'Binary-coded decimal vlaue',
label: 'Binary-coded decimal value',
},
{
inputId: 'octalInput',
octalInput: {
val: '020',
label: 'Octal value',
},
{
inputId: 'hexInput',
hexInput: {
val: '0x10',
label: 'Hexadecimal value',
},
]
})

onMounted(() => {
SimulatorState.dialogBox.hex_bin_dec_converter_dialog = false
})

function converter(feildChange) {
if (feildChange == 'decimalInput') decimalConvertor()
if (feildChange == 'binaryInput') binaryConvertor()
if (feildChange == 'bcdInput') bcdConvertor()
if (feildChange == 'octalInput') octalConvertor()
if (feildChange == 'hexInput') hexConvertor()
function converter(e: KeyboardEvent) {
const target = <HTMLInputElement>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
}
}

function decimalConvertor() {
var x = parseInt($('#decimalInput').val(), 10)
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 = 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)
}

function decimalConverter(input: string) {
const x = parseInt(input, 10)
setBaseValues(x)
}

function binaryConvertor() {
var inp = $('#binaryInput').val()
var x
if (inp.slice(0, 2) == '0b') x = parseInt(inp.slice(2), 2)
else x = parseInt(inp, 2)
function binaryConverter(input: string) {
let x
if (input.slice(0, 2) == '0b') {
x = parseInt(input.slice(2), 2)
} else {
x = parseInt(input, 2)
}
setBaseValues(x)
}

function bcdConvertor() {
var input = $('#bcdInput').val()
function bcdConverter(input: string) {
var num = 0
JoshVarga marked this conversation as resolved.
Show resolved Hide resolved
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++
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(num)
}

function octalConvertor() {
var x = parseInt($('#octalInput').val(), 8)
function octalConverter(input: string) {
var x = parseInt(input, 8)
setBaseValues(x)
}

function hexConvertor() {
var x = parseInt($('#hexInput').val(), 16)
function hexConverter(input: string) {
var x = parseInt(input, 16)
setBaseValues(x)
}
</script>

<style scoped></style>
69 changes: 2 additions & 67 deletions src/simulator/src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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')
Expand All @@ -269,50 +248,6 @@ export function parseNumber(num) {
return parseInt(num)
}

export function setupBitConvertor() {
console.log('check bit convertor')
$('#decimalInput').on('keyup', function () {
JoshVarga marked this conversation as resolved.
Show resolved Hide resolved
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'
Expand Down
59 changes: 0 additions & 59 deletions src/simulator/src/ux.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -184,7 +183,6 @@ export function setupUI() {
// $('#moduleProperty').draggable();
setupPanels()
// setupVerilogExportCodeWindow()
setupBitConvertor()
}

/**
Expand Down Expand Up @@ -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', () =>
Expand Down
Loading