Skip to content

Commit

Permalink
Add HPQ, LPQ, BP, and NO filter types
Browse files Browse the repository at this point in the history
  • Loading branch information
@selinali2010
selinali2010 committed Sep 22, 2023
1 parent 357c189 commit 151dcf8
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 95 deletions.
15 changes: 8 additions & 7 deletions src/common/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ export const MIN_NUM_FILTERS = 1;
// Need to use LSC and HSC to allow users to adjust quality for low/high shelf filters
export enum FilterTypeEnum {
PK = 'PK', // Peak ["PK",True,True]
// LPQ = 'LPQ', // Low Pass ["LPQ",False,True]
// HPQ = 'HPQ', // High Pass ["HPQ",False,True]
// BP = 'BP', // Band Pass ["BP",False,True]
// NO = 'NO', // Notch ["NO",False,True]
LPQ = 'LPQ', // Low Pass ["LPQ",False,True]
HPQ = 'HPQ', // High Pass ["HPQ",False,True]
BP = 'BP', // Band Pass ["BP",False,True]
NO = 'NO', // Notch ["NO",False,True]
// AP = 'AP', // All Pass ["AP",False,True]
LSC = 'LSC', // Low Shelf ["LSC",True,True]
HSC = 'HSC', // High Shelf ["HSC",True,True]
Expand All @@ -52,11 +52,12 @@ export enum FilterTypeEnum {

export const FilterTypeToLabelMap: Record<FilterTypeEnum, string> = {
[FilterTypeEnum.PK]: 'Peak Filter',
// [FilterTypeEnum.LPQ]: 'Low Pass Filter',
// [FilterTypeEnum.HPQ]: 'High Pass Filter',
[FilterTypeEnum.LPQ]: 'Low Pass Filter',
[FilterTypeEnum.HPQ]: 'High Pass Filter',
[FilterTypeEnum.BP]: 'Band Pass Filter',
[FilterTypeEnum.NO]: 'Notch Filter',
[FilterTypeEnum.LSC]: 'Low Shelf Filter',
[FilterTypeEnum.HSC]: 'High Shelf Filter',
// [FilterTypeEnum.NO]: 'Notch Filter',
};

export const WINDOW_WIDTH = 1428;
Expand Down
34 changes: 28 additions & 6 deletions src/renderer/graph/Chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,31 @@ const Chart = ({ data = [], dimensions }: IChartProps) => {
[height, margins]
);

const padding = {
left: 50,
top: 0,
right: 0,
bottom: 30,
};
const padding = useMemo(() => {
return {
left: 50,
top: 0,
right: 0,
bottom: 30,
};
}, []);

const chartWidth = useMemo(
() =>
Math.max(
width - margins.left - margins.right - padding.left - padding.right,
0
),
[width, margins, padding]
);
const chartHeight = useMemo(
() =>
Math.max(
height - margins.top - margins.bottom - padding.top - padding.bottom,
0
),
[height, margins, padding]
);

const { xTickFormat, yTickFormat, xScaleFreq, yScaleGain } = useController({
data,
Expand Down Expand Up @@ -102,6 +121,9 @@ const Chart = ({ data = [], dimensions }: IChartProps) => {
{data.map((e: IChartCurveData) => (
<Curve key={e.id} data={e} xScale={xScaleFreq} yScale={yScaleGain} />
))}
<clipPath id="chart-clip-path">
<rect x={padding.left} width={chartWidth} height={chartHeight} />
</clipPath>
<Axis
type="left"
scale={yScaleGain}
Expand Down
4 changes: 3 additions & 1 deletion src/renderer/graph/Line.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,9 @@ const Line = ({

// Set initial path attribute
const initRender = useCallback(() => {
d3.select(ref.current).attr('d', d);
d3.select(ref.current)
.attr('d', d)
.attr('clip-path', 'url(#chart-clip-path)');
}, [d]);

// Handle animation for the initial render
Expand Down
61 changes: 31 additions & 30 deletions src/renderer/graph/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const getTFCoefficients = (filter: IFilter) => {
quality: userQuality,
} = filter;

// TODO: add additional shelf filter cases when/if we add them in
// Handle these filter types differently:
// 'peak', 'low-shelf-fixed', 'high-shelf-fixed', 'low-shelf-q', 'high-shelf-q', 'low-shelf-db', 'high-shelf-db'
const specialFilters = new Set([
Expand All @@ -77,7 +78,7 @@ const getTFCoefficients = (filter: IFilter) => {

const shelfFilters = new Set([FilterTypeEnum.HSC, FilterTypeEnum.LSC]);
if (shelfFilters.has(filterType)) {
// TODO: add additional shelf filter cases when /if we add them in
// TODO: add additional shelf filter cases when/if we add them in
// if (filterType in {'low-shelf-fixed', 'high-shelf-fixed'}){
// quality = 0.9
// } else
Expand Down Expand Up @@ -122,35 +123,35 @@ const getTFCoefficients = (filter: IFilter) => {
a0 = 1 + alpha / gain;
a1 = -2 * cosine;
a2 = 1 - alpha / gain;
// TODO: Add these filters back in when we re-enable the filter types
// } else if ( filterType === FilterTypeEnum.NO){
// b0 = 1
// b1 = -2*cosine
// b2 = 1
// a0 = 1+alpha
// a1 = -2*cosine
// a2 = 1-alpha
// } else if (filterType === FilterTypeEnum.LPQ){
// b0 = (1-cosine)/2
// b1 = 1-cosine
// b2 = (1-cosine)/2
// a0 = 1+alpha;
// a1 = -2*cosine;
// a2 = 1-alpha;
// } else if (filterType === FilterTypeEnum.HPQ){
// b0 = (1+cosine)/2
// b1 = -(1+cosine)
// b2 = (1+cosine) /2
// a0 = 1+alpha
// a1 = -2*cosine
// a2 = 1-alpha
// } else if (filterType === FilterTypeEnum.BP){
// b0 = alpha
// b1 = 0
// b2 = -alpha
// a0 = 1+alpha
// a1 = -2*cosine
// a2 = 1-alpha
} else if (filterType === FilterTypeEnum.NO) {
b0 = 1;
b1 = -2 * cosine;
b2 = 1;
a0 = 1 + alpha;
a1 = -2 * cosine;
a2 = 1 - alpha;
} else if (filterType === FilterTypeEnum.LPQ) {
b0 = (1 - cosine) / 2;
b1 = 1 - cosine;
b2 = (1 - cosine) / 2;
a0 = 1 + alpha;
a1 = -2 * cosine;
a2 = 1 - alpha;
} else if (filterType === FilterTypeEnum.HPQ) {
b0 = (1 + cosine) / 2;
b1 = -(1 + cosine);
b2 = (1 + cosine) / 2;
a0 = 1 + alpha;
a1 = -2 * cosine;
a2 = 1 - alpha;
} else if (filterType === FilterTypeEnum.BP) {
b0 = alpha;
b1 = 0;
b2 = -alpha;
a0 = 1 + alpha;
a1 = -2 * cosine;
a2 = 1 - alpha;
// TODO: Add this filter back in when/if we decide to add all pass filter
// } else if ( filterType === FilterTypeEnum.AP){
// b0 = 1-alpha
// b1 = -2*cosine
Expand Down
119 changes: 68 additions & 51 deletions src/renderer/icons/FilterTypeIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,40 +37,74 @@ const FilterTypeIcon = ({ type }: { type: FilterTypeEnum }) => {
/>
</svg>
);
// case FilterTypeEnum.LPQ:
// return (
// <svg
// width="32"
// height="17"
// viewBox="0 0 32 17"
// fill="none"
// xmlns="http://www.w3.org/2000/svg"
// >
// <title>Low Pass Filter</title>
// <path
// d="M1 2C1 2 10.5 2 13.5 2C16.5 2 20.5 7.50024 22 10.0002C23.5 12.5002 24.5 15.5002 24.5 16.0002"
// stroke="#F7844F"
// strokeWidth="2"
// />
// </svg>
// );
// case FilterTypeEnum.HPQ:
// return (
// <svg
// width="32"
// height="17"
// viewBox="0 0 32 17"
// fill="none"
// xmlns="http://www.w3.org/2000/svg"
// >
// <title>High Pass Filter</title>
// <path
// d="M32 2C32 2 22.5 2 19.5 2C16.5 2 12.5 7.50024 11 10.0002C9.5 12.5002 8.5 15.5002 8.5 16.0002"
// stroke="#4FF7D8"
// strokeWidth="2"
// />
// </svg>
// );
case FilterTypeEnum.LPQ:
return (
<svg
width="32"
height="17"
viewBox="0 0 32 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Low Pass Filter</title>
<path
d="M1 2C1 2 10.5 2 13.5 2C16.5 2 20.5 7.50024 22 10.0002C23.5 12.5002 24.5 15.5002 24.5 16.0002"
stroke="#F7844F"
strokeWidth="2"
/>
</svg>
);
case FilterTypeEnum.HPQ:
return (
<svg
width="32"
height="17"
viewBox="0 0 32 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>High Pass Filter</title>
<path
d="M32 2C32 2 22.5 2 19.5 2C16.5 2 12.5 7.50024 11 10.0002C9.5 12.5002 8.5 15.5002 8.5 16.0002"
stroke="#4FF7D8"
strokeWidth="2"
/>
</svg>
);
case FilterTypeEnum.BP:
return (
<svg
width="32"
height="16"
viewBox="0 0 32 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Band Pass Filter</title>
<path
d="M0 14C0 14 2.62316 14 5.5 14C8.37684 14 7.50674 2.00001 10 2.00001C12.4933 2.00001 19.5 2.00001 22 2.00001C24.5 2.00001 24 14 26.5 14C29 14 32 14 32 14"
stroke="#4FF784"
strokeWidth="2"
/>
</svg>
);
case FilterTypeEnum.NO:
return (
<svg
width="32"
height="16"
viewBox="0 0 32 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Notch Filter</title>
<path
d="M32 2C32 2 26.2271 2 23.3503 2C20.4735 2 18.5556 14 16.0623 14C13.5691 14 11.6512 2 8.39077 2C5.13036 2 0 2 0 2"
stroke="#F74F6E"
strokeWidth="2"
/>
</svg>
);
case FilterTypeEnum.LSC:
return (
<svg
Expand Down Expand Up @@ -105,23 +139,6 @@ const FilterTypeIcon = ({ type }: { type: FilterTypeEnum }) => {
/>
</svg>
);
// case FilterTypeEnum.NO:
// return (
// <svg
// width="32"
// height="16"
// viewBox="0 0 32 16"
// fill="none"
// xmlns="http://www.w3.org/2000/svg"
// >
// <title>Notch Filter</title>
// <path
// d="M32 2C32 2 26.2271 2 23.3503 2C20.4735 2 18.5556 14 16.0623 14C13.5691 14 11.6512 2 8.39077 2C5.13036 2 0 2 0 2"
// stroke="#F74F6E"
// strokeWidth="2"
// />
// </svg>
// );
default:
return <></>;
}
Expand Down

0 comments on commit 151dcf8

Please sign in to comment.