Skip to content

Commit 77d78bb

Browse files
ArnabdazArnabdaz
authored
feat(gsoc): convert timing diagram to vue component (CircuitVerse#183)
* feat(gsoc): initial working convertion of timing diagram to vue component Signed-off-by: Arnabdaz <[email protected]> * feat(gsoc): remove dom manipulation of when plot width is changed with vue refs Signed-off-by: Arnabdaz <[email protected]> * feat(gsoc): use panelHeader for the header of timing diagram Signed-off-by: Arnabdaz <[email protected]> * feat(gsoc): add vue methods to input of cycleunits Signed-off-by: Arnabdaz <[email protected]> * feat(gsoc): add i18n to timingDiagram component Signed-off-by: Arnabdaz <[email protected]> --------- Signed-off-by: Arnabdaz <[email protected]>
1 parent aaa50ac commit 77d78bb

File tree

8 files changed

+292
-148
lines changed

8 files changed

+292
-148
lines changed

‎src/assets/constants/Panels/TimingDiagramPanel/buttons.json

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
[
2+
{
3+
"title": "Decrease Size",
4+
"icon": "fa-chevron-left",
5+
"class": "timing-diagram-smaller",
6+
"type": "primary",
7+
"click": "smaller"
8+
},
9+
{
10+
"title": "Increase Size",
11+
"icon": "fa-chevron-right",
12+
"class": "timing-diagram-larger",
13+
"type": "primary",
14+
"click": "larger"
15+
},
16+
{
17+
"title": "Decrease Height",
18+
"icon": "fa-chevron-up",
19+
"class": "timing-diagram-small-height",
20+
"type": "primary",
21+
"click": "smallHeight"
22+
},
23+
{
24+
"title": "Increase Height",
25+
"icon": "fa-chevron-down",
26+
"class": "timing-diagram-large-height",
27+
"type": "primary",
28+
"click": "largeHeight"
29+
},
30+
{
31+
"title": "Download As Image",
32+
"icon": "fa-download",
33+
"class": "timing-diagram-download",
34+
"type": "primary",
35+
"click": "download"
36+
},
37+
{
38+
"title": "Reset Timing Diagram",
39+
"icon": "fa-undo",
40+
"class": "timing-diagram-reset",
41+
"type": "tertiary",
42+
"click": "reset"
43+
},
44+
{
45+
"title": "Autocalibrate Cycle Units",
46+
"icon": "fa-magic",
47+
"class": "timing-diagram-calibrate",
48+
"type": "tertiary",
49+
"click": "calibrate"
50+
},
51+
{
52+
"title": "Zoom In",
53+
"icon": "fa-search-plus",
54+
"class": "timing-diagram-zoom-in",
55+
"type": "primary",
56+
"click": "zoomIn"
57+
},
58+
{
59+
"title": "Zoom Out",
60+
"icon": "fa-search-minus",
61+
"class": "timing-diagram-zoom-out",
62+
"type": "primary",
63+
"click": "zoomOut"
64+
},
65+
{
66+
"title": "Resume auto-scroll",
67+
"icon": "fa-play",
68+
"class": "timing-diagram-resume",
69+
"type": "primary",
70+
"click": "resume"
71+
},
72+
{
73+
"title": "Pause auto-scroll",
74+
"icon": "fa-pause",
75+
"class": "timing-diagram-pause",
76+
"type": "primary",
77+
"click": "pause"
78+
}
79+
]

‎src/components/Extra.vue

Lines changed: 2 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -33,113 +33,7 @@
3333

3434
<!-- --------------------------------------------------------------------------------------------- -->
3535
<!-- Timing Diagram Panel -->
36-
<div class="timing-diagram-panel draggable-panel">
37-
<!-- Timing Diagram Panel -->
38-
<div class="panel-header">
39-
Timing Diagram
40-
<span class="fas fa-minus-square minimize panel-button"></span>
41-
<span
42-
class="fas fa-external-link-square-alt maximize panel-button-icon"
43-
></span>
44-
</div>
45-
<div class="panel-body">
46-
<div class="timing-diagram-toolbar noSelect">
47-
<button
48-
class="custom-btn--primary panel-button"
49-
title="Decrease Size"
50-
>
51-
<span
52-
class="fas fa-chevron-left timing-diagram-smaller panel-button-icon"
53-
></span>
54-
</button>
55-
<button
56-
class="custom-btn--primary panel-button"
57-
title="Increase Size"
58-
>
59-
<span
60-
class="fas fa-chevron-right timing-diagram-larger panel-button-icon"
61-
></span>
62-
</button>
63-
<button
64-
class="custom-btn--primary panel-button"
65-
title="Decrease Height"
66-
>
67-
<span
68-
class="fas fa-chevron-up timing-diagram-small-height panel-button-icon"
69-
></span>
70-
</button>
71-
<button
72-
class="custom-btn--primary panel-button"
73-
title="Increase Height"
74-
>
75-
<span
76-
class="fas fa-chevron-down timing-diagram-large-height panel-button-icon"
77-
></span>
78-
</button>
79-
<button
80-
class="custom-btn--primary panel-button"
81-
title="Download As Image"
82-
>
83-
<span
84-
class="fas fa-download timing-diagram-download"
85-
></span>
86-
</button>
87-
<button
88-
class="custom-btn--tertiary panel-button"
89-
title="Reset Timing Diagram"
90-
>
91-
<span class="fas fa-undo timing-diagram-reset"></span>
92-
</button>
93-
<button
94-
class="custom-btn--tertiary panel-button"
95-
title="Autocalibrate Cycle Units"
96-
>
97-
<span class="fas fa-magic timing-diagram-calibrate"></span>
98-
</button>
99-
<button
100-
class="custom-btn--primary panel-button"
101-
title="Zoom In"
102-
>
103-
<span
104-
class="fas fa-search-plus timing-diagram-zoom-in"
105-
></span>
106-
</button>
107-
<button
108-
class="custom-btn--primary panel-button"
109-
title="Zoom Out"
110-
>
111-
<span
112-
class="fas fa-search-minus timing-diagram-zoom-out"
113-
></span>
114-
</button>
115-
<button
116-
class="custom-btn--primary panel-button"
117-
title="Resume auto-scroll"
118-
>
119-
<span class="fas fa-play timing-diagram-resume"></span>
120-
</button>
121-
<button
122-
class="custom-btn--primary panel-button"
123-
title="Pause auto-scroll"
124-
>
125-
<span class="fas fa-pause timing-diagram-pause"></span>
126-
</button>
127-
1 cycle =
128-
<input
129-
id="timing-diagram-units"
130-
type="number"
131-
min="1"
132-
autocomplete="off"
133-
value="1000"
134-
/>
135-
Units
136-
<span id="timing-diagram-log"></span>
137-
</div>
138-
<div id="plot">
139-
<canvas id="plotArea"></canvas>
140-
</div>
141-
</div>
142-
</div>
36+
<TimingDiagramPanel />
14337
<!-- --------------------------------------------------------------------------------------------- -->
14438

14539
<!-- --------------------------------------------------------------------------------------------- -->
@@ -415,6 +309,7 @@
415309
import VerilogEditorPanel from './Panels/VerilogEditorPanel/VerilogEditorPanel.vue'
416310
import ElementsPanel from './Panels/ElementsPanel/ElementsPanel.vue'
417311
import PropertiesPanel from './Panels/PropertiesPanel/PropertiesPanel.vue'
312+
import TimingDiagramPanel from './Panels/TimingDiagramPanel/TimingDiagramPanel.vue'
418313
import TabsBar from './TabsBar/TabsBar.vue'
419314
import CombinationalAnalysis from './DialogBox/CombinationalAnalysis.vue'
420315
import HexBinDec from './DialogBox/HexBinDec.vue'

‎src/components/Panels/Shared/PanelHeader.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,12 @@ const props = defineProps({
1111
headerTitle: { type: String, default: 'Panel Header' },
1212
})
1313
</script>
14+
15+
<style scoped>
16+
.fa-external-link-square-alt {
17+
cursor: pointer;
18+
}
19+
.fa-minus-square {
20+
cursor: pointer;
21+
}
22+
</style>

‎src/components/Panels/TimingDiagramPanel/TimingDiagramButtons.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<button :class="'custom-btn--' + type + ' panel-button'" :title="title">
3+
<span :class="'fas ' + icon + ' ' + btnClass"></span>
4+
</button>
5+
</template>
6+
7+
<script lang="ts" setup>
8+
defineProps({
9+
title: {
10+
type: String,
11+
required: true,
12+
},
13+
icon: {
14+
type: String,
15+
required: true,
16+
},
17+
btnClass: {
18+
type: String,
19+
required: true,
20+
},
21+
type: {
22+
type: String,
23+
required: true,
24+
},
25+
})
26+
</script>

‎src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<div class="timing-diagram-panel draggable-panel">
3+
<!-- Timing Diagram Panel -->
4+
<PanelHeader
5+
:header-title="$t('simulator.panel_header.timing_diagram')"
6+
/>
7+
<div class="panel-body">
8+
<div class="timing-diagram-toolbar noSelect">
9+
<TimingDiagramButtons
10+
v-for="button in buttons"
11+
:key="button.title"
12+
:title="button.title"
13+
:icon="button.icon"
14+
:btn-class="button.class"
15+
class="timing-diagram-panel-button"
16+
:type="button.type"
17+
@click="
18+
() => {
19+
handleButtonClick(button.click)
20+
}
21+
"
22+
/>
23+
{{ $t('simulator.panel_body.timing_diagram.one_cycle') }}
24+
<input
25+
id="timing-diagram-units"
26+
type="number"
27+
min="1"
28+
autocomplete="off"
29+
:value="cycleUnits"
30+
@change="handleUnitsChange"
31+
@paste="handleUnitsChange"
32+
@keyup="handleUnitsChange"
33+
/>
34+
{{ $t('simulator.panel_body.timing_diagram.units') }}
35+
<span id="timing-diagram-log"></span>
36+
</div>
37+
<div id="plot" ref="plotRef">
38+
<canvas id="plotArea"></canvas>
39+
</div>
40+
</div>
41+
</div>
42+
</template>
43+
44+
<script lang="ts" setup>
45+
import { ref } from 'vue'
46+
import _plotArea from '#/simulator/src/plotArea'
47+
import { timingDiagramButtonActions } from '#/simulator/src/plotArea'
48+
import TimingDiagramButtons from './TimingDiagramButtons.vue'
49+
import buttonsJSON from '#/assets/constants/Panels/TimingDiagramPanel/buttons.json'
50+
import PanelHeader from '../Shared/PanelHeader.vue'
51+
52+
interface TimingDiagramButton {
53+
title: string
54+
icon: string
55+
class: string
56+
type: string
57+
click: string
58+
}
59+
60+
interface PlotArea {
61+
resize: () => void
62+
[key: string]: () => void
63+
}
64+
65+
const plotArea: PlotArea = _plotArea
66+
const buttons = ref<TimingDiagramButton[]>(buttonsJSON)
67+
const plotRef = ref<HTMLElement | null>(null)
68+
const cycleUnits = ref(1000)
69+
70+
function handleButtonClick(button: string) {
71+
console.log('clicked', button)
72+
if (button === 'smaller') {
73+
if (plotRef.value) {
74+
plotRef.value.style.width = `${Math.max(
75+
plotRef.value.offsetWidth - 20,
76+
560
77+
)}px`
78+
}
79+
plotArea.resize()
80+
} else if (button === 'larger') {
81+
if (plotRef.value) {
82+
plotRef.value.style.width = `${plotRef.value.offsetWidth + 20}px`
83+
}
84+
plotArea.resize()
85+
} else if (button === 'smallHeight') {
86+
timingDiagramButtonActions.smallHeight()
87+
} else if (button === 'largeHeight') {
88+
timingDiagramButtonActions.largeHeight()
89+
} else {
90+
plotArea[button]()
91+
}
92+
}
93+
94+
function handleUnitsChange(event: Event) {
95+
const inputElem = event.target as HTMLInputElement
96+
const timeUnits = parseInt(inputElem.value, 10)
97+
if (isNaN(timeUnits) || timeUnits < 1) return
98+
plotArea.cycleUnit = timeUnits
99+
}
100+
</script>
101+
102+
<style scoped>
103+
.timing-diagram-panel-button {
104+
margin-right: 5px;
105+
}
106+
</style>
107+
108+
<!-- TODO: input element to vue, remove remaining dom manipulation, header component -->

‎src/locales/en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@
8484
}
8585
},
8686
"timing_diagram": {
87-
"one_cycle_unit_html": "1 cycle = <br/><input id='timing-diagram-units' type='number' min='1' autocomplete='off' value='1000'><br/>Units"
87+
"one_cycle": "1 Cycle =",
88+
"units": "Units"
8889
},
8990
"verilog_module": {
9091
"reset_code": "Reset Code",

‎src/locales/hi.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@
8484
}
8585
},
8686
"timing_diagram": {
87-
"one_cycle_unit_html": "1 साइकिल = <br/><input id='timing-diagram-units' type='number' min='1' autocomplete='off' value='1000'><br/>यूनिट"
87+
"one_cycle": "1 साइकिल =",
88+
"units": "यूनिट्स"
8889
},
8990
"verilog_module": {
9091
"reset_code": "कोड रिसेट करें",

0 commit comments

Comments
 (0)