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

Jump to bottom

For Transform types visit using transform block mode. #70

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

For Transform types visit using transform block mode. #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
25933f8
For Transform types visit using transform block mode.
jimbankoski Oct 16, 2018
6417566
Add compound type and motion mode to analyzer.
jimbankoski Oct 19, 2018
164df7c
Histograms for big files
jimbankoski Oct 29, 2018
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
60 changes: 58 additions & 2 deletions src/components/Analyzer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ enum HistogramTab {
TransformType,
PredictionMode,
UVPredictionMode,
MotionMode,
CompoundType,
Skip,
DualFilterType
}
Expand Down Expand Up @@ -249,7 +251,7 @@ export class FrameInfoComponent extends React.Component<{
<TableRowColumn>Video</TableRowColumn><TableRowColumn style={valueStyle}>{this.props.activeGroup}</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>Frame</TableRowColumn><TableRowColumn style={valueStyle}>{this.props.activeFrame + 1}</TableRowColumn>
<TableRowColumn>Frame Number</TableRowColumn><TableRowColumn style={valueStyle}>{frame.json.frame}</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>Frame Type</TableRowColumn><TableRowColumn style={valueStyle}>{frame.json.frameType}</TableRowColumn>
Expand Down Expand Up @@ -362,6 +364,12 @@ export class ModeInfoComponent extends React.Component<{
<TableRow>
<TableRowColumn>UV Mode</TableRowColumn><TableRowColumn style={valueStyle}>{getProperty("uv_mode")}</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>Motion Mode</TableRowColumn><TableRowColumn style={valueStyle}>{getProperty("motion_mode")}</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>Compound Type</TableRowColumn><TableRowColumn style={valueStyle}>{getProperty("compound_type")}</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>Skip</TableRowColumn><TableRowColumn style={valueStyle}>{getProperty("skip")}</TableRowColumn>
</TableRow>
Expand Down Expand Up @@ -408,6 +416,8 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
showCDEF: boolean;
showMode: boolean;
showUVMode: boolean;
showMotionMode: boolean;
showCompoundType: boolean;
showSegment: boolean;
showBits: boolean;
showBitsScale: "frame" | "video" | "videos";
Expand Down Expand Up @@ -573,6 +583,22 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
value: undefined,
icon: "icon-l"
},
showMotionMode: {
key: "#",
description: "Motion Mode",
detail: "Display motion modes.",
default: false,
value: undefined,
icon: "icon-l"
},
showCompoundType: {
key: "@",
description: "Compound Type",
detail: "Display compound type.",
default: false,
value: undefined,
icon: "icon-l"
},
showSegment: {
key: "v",
description: "Show Segment",
Expand Down Expand Up @@ -636,6 +662,9 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
showCDEF: false,
showMode: false,
showUVMode: false,
showMotionMode: false,
showCompoundType: false,
showVMode: false,
showSegment: false,
showBits: false,
showBitsScale: "frame",
Expand Down Expand Up @@ -768,6 +797,8 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
this.state.showFilters && this.drawFilters(frame, ctx, src, dst);
this.state.showMode && this.drawMode("mode", frame, ctx, src, dst);
this.state.showUVMode && this.drawMode("uv_mode", frame, ctx, src, dst);
this.state.showMotionMode && this.drawMotionMode(frame, ctx, src, dst);
this.state.showCompoundType && this.drawCompoundType(frame, ctx, src, dst);
this.state.showSegment && this.drawSegment(frame, ctx, src, dst);
this.state.showBits && this.drawBits(frame, ctx, src, dst);
this.state.showCDEF && this.drawCDEF(frame, ctx, src, dst);
Expand Down Expand Up @@ -1179,6 +1210,10 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
return frames.map(x => x.predictionModeHist);
case HistogramTab.UVPredictionMode:
return frames.map(x => x.uvPredictionModeHist);
case HistogramTab.MotionMode:
return frames.map(x => x.motionModeHist);
case HistogramTab.CompoundType:
return frames.map(x => x.compoundTypeHist);
case HistogramTab.Skip:
return frames.map(x => x.skipHist);
case HistogramTab.DualFilterType:
Expand All @@ -1199,6 +1234,8 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
case HistogramTab.TransformType:
color = getColor(name, palette.transformType);
break;
case HistogramTab.MotionMode:
case HistogramTab.CompoundType:
case HistogramTab.PredictionMode:
case HistogramTab.UVPredictionMode:
color = getColor(name, palette.predictionMode);
Expand Down Expand Up @@ -1431,6 +1468,8 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
<MenuItem value={HistogramTab.TransformType} label="Transform Type" primaryText="Transform Type" />
<MenuItem value={HistogramTab.PredictionMode} label="Prediction Mode" primaryText="Prediction Mode" />
<MenuItem value={HistogramTab.UVPredictionMode} label="UV Prediction Mode" primaryText="UV Prediction Mode" />
<MenuItem value={HistogramTab.MotionMode} label="Motion Mode" primaryText="Motion Mode" />
<MenuItem value={HistogramTab.CompoundType} label="Compound Type" primaryText="Compound Type" />
<MenuItem value={HistogramTab.Skip} label="Skip" primaryText="Skip" />
<MenuItem value={HistogramTab.DualFilterType} label="Dual Filter Type" primaryText="Dual Filter Type" />
</DropDownMenu>
Expand Down Expand Up @@ -1679,6 +1718,22 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
});
ctx.restore();
}
drawMotionMode(frame: AnalyzerFrame, ctx: CanvasRenderingContext2D, src: Rectangle, dst: Rectangle) {
let compoundTypeMap = reverseMap(frame.json["motion_modeMap"]);
let motionModeTypeGrid = frame.json["motion_mode"];
this.fillBlock(frame, ctx, src, dst, (blockSize, c, r, sc, sr) => {
ctx.fillStyle = getColor(motionModeTypeGrid[r][c], palette.motion_mode);
return true;
});
}
drawCompoundType(frame: AnalyzerFrame, ctx: CanvasRenderingContext2D, src: Rectangle, dst: Rectangle) {
let compoundTypeMap = reverseMap(frame.json["compound_typeMap"]);
let compoundTypeGrid = frame.json["compound_type"];
this.fillBlock(frame, ctx, src, dst, (blockSize, c, r, sc, sr) => {
ctx.fillStyle = getColor(compoundTypeGrid[r][c], palette.compound_type);
return true;
});
}
drawSegment(frame: AnalyzerFrame, ctx: CanvasRenderingContext2D, src: Rectangle, dst: Rectangle) {
let segGrid = frame.json["seg_id"];
let segMapByValue = reverseMap(frame.json["seg_idMap"]);
Expand All @@ -1693,7 +1748,7 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
this.fillBlock(frame, ctx, src, dst, (blockSize, c, r, sc, sr) => {
ctx.fillStyle = getColor(transformTypeMapByValue[typeGrid[r][c]], palette.transformType);
return true;
});
}, VisitMode.TransformBlock);
}
drawBits(frame: AnalyzerFrame, ctx: CanvasRenderingContext2D, src: Rectangle, dst: Rectangle) {
let { blocks, total } = frame.accounting.countBits(this.state.showBitsFilter);
Expand Down Expand Up @@ -1746,6 +1801,7 @@ export class AnalyzerView extends React.Component<AnalyzerViewProps, {
let modeGrid = frame.json[type];
let modeMap = frame.json["modeMap"];
let uvModeMap = frame.json["uv_modeMap"];
let motionModeMap = frame.json["motion_modeMap"];
let alphaIndex = frame.json["cfl_alpha_idx"];
let modeMapByValue = reverseMap(modeMap);
const V_PRED = modeMap.V_PRED;
Expand Down
22 changes: 14 additions & 8 deletions src/components/Histogram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,22 +110,28 @@ export class HistogramComponent extends React.Component<{
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
let w = this.w * this.ratio;
let h = this.h * this.ratio;
let bw = Math.min(16 * this.ratio, w / data.length | 0);
let bh = Math.min(16 * this.ratio, h / data.length | 0);
//let bw = Math.min(16 * this.ratio, w / data.length | 0);
let bw = Math.min(16 * this.ratio, w / 32 | 0);
//let bh = Math.min(16 * this.ratio, h / data.length | 0);
let bh = Math.min(16 * this.ratio, h / 32 | 0);
let selectedName = null;
let selectedValue = undefined;
let selectedFrame = -1;
for (let i = 0; i < data.length; i++) {
let histStart = Math.max(this.props.highlight - 16, 0)
let histEnd = Math.min(this.props.highlight + 16, data.length)
// for (let i = 0; i < data.length; i++) {
for (let i = histStart; i < histEnd; i++) {
let t = 0;
let r = new Rectangle(0, 0, 0, 0);
let ii = i - histStart;
names.forEach(k => {
let v = data[i][k];
ctx.fillStyle = this.props.color(k);
if (this.props.horizontal) {
let y = (h - ((t + v) * h));
r.set(i * bw, y | 0, bw - 1, (v * h + (y - (y | 0))) | 0);
r.set(ii * bw, y | 0, bw - 1, (v * h + (y - (y | 0))) | 0);
} else {
r.set((t * w | 0), bh * i, (v * w) | 0, bh - 1);
r.set((t * w | 0), bh * ii, (v * w) | 0, bh - 1);
}
if (r.containsPoint(this.position)) {
ctx.globalAlpha = 1;
Expand All @@ -142,9 +148,9 @@ export class HistogramComponent extends React.Component<{
if (this.props.highlight == i) {
ctx.fillStyle = "white";
if (this.props.horizontal) {
ctx.fillRect(i * bw, 0, bw - 1, this.ratio * 4);
ctx.fillRect(ii * bw, 0, bw - 1, this.ratio * 4);
} else {
ctx.fillRect(0, i * bh, this.ratio * 4, bh - 1);
ctx.fillRect(0, ii * bh, this.ratio * 4, bh - 1);
}
}
}
Expand Down Expand Up @@ -177,4 +183,4 @@ export class HistogramComponent extends React.Component<{
<canvas ref={(self: any) => this.canvas = self} width="256" height="256"></canvas>
</div>
}
}
}
2 changes: 1 addition & 1 deletion src/components/Loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export class LoaderComponent extends React.Component<LoaderComponentProps, {
decodeFrames(decoder: Decoder, count: number): Promise<AnalyzerFrame[]> {
// If we use the split view, we don't need any layers making decoding faster.
if (!this.props.split && !this.props.bench) {
decoder.setLayers(0xffffffff);
decoder.setLayers(0xffffffffff);
}
if (this.props.bench == 1) {
decoder.shouldReadImageData = false;
Expand Down
18 changes: 18 additions & 0 deletions src/components/analyzerTools.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,7 @@ export class Histogram {

export class AnalyzerFrame {
json: {
frame: number;
frameType: number;
showFrame: number;
baseQIndex: number;
Expand All @@ -314,6 +315,8 @@ export class AnalyzerFrame {
transformTypeHist: Histogram;
predictionModeHist: Histogram;
uvPredictionModeHist: Histogram;
motionModeHist: Histogram;
compoundTypeHist: Histogram;
skipHist: Histogram;
dualFilterTypeHist: Histogram;
frameImage: FrameImage;
Expand Down Expand Up @@ -420,6 +423,8 @@ function readFrameFromJson(json): AnalyzerFrame {
uncompress(json["transformType"]);
uncompress(json["mode"]);
uncompress(json["uv_mode"]);
uncompress(json["motion_mode"]);
uncompress(json["compound_type"]);
uncompress(json["skip"]);
uncompress(json["filter"]);
uncompress(json["cdef_level"]);
Expand All @@ -441,6 +446,8 @@ function readFrameFromJson(json): AnalyzerFrame {
frame.transformTypeHist = getHistogramFromJson(json, "transformType");
frame.predictionModeHist = getHistogramFromJson(json, "mode");
frame.uvPredictionModeHist = getHistogramFromJson(json, "uv_mode");
frame.motionModeHist = getHistogramFromJson(json, "motion_mode");
frame.compoundTypeHist = getHistogramFromJson(json, "compound_type");
frame.dualFilterTypeHist = getHistogramFromJson(json, "dualFilterType");
frame.miSizeLog2 = log2(json.config.MI_SIZE);
frame.miSuperSizeLog2 = log2(64); // TODO: Does this ever change?
Expand Down Expand Up @@ -974,6 +981,17 @@ export const palette = {
7: "#682bff",
8: "#e62b00",
},
motion_mode: {
0: "#a45a00",
1: "#00a781",
2: "#ff70a6",
},
compound_type: {
0: "#00372a",
1: "#ff9556",
2: "#7a0032",
},

transformType: {
DCT_DCT: "#f4ffc3",
ADST_DCT: "#622cd8",
Expand Down