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

Implement fast zsmooth option for image trace #5354

Merged
merged 14 commits into from
Jan 7, 2021
Merged

Implement fast zsmooth option for image trace #5354

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0db886c
Add Image.interpolate property
almarklein Dec 18, 2020
e4cfb61
change to enumeration
almarklein Dec 18, 2020
0eaabaf
keep dflt in attributes
almarklein Dec 18, 2020
0bf264c
implement suggestion
almarklein Dec 18, 2020
1b53120
Update src/traces/image/defaults.js
almarklein Jan 4, 2021
8f0b0f1
Update src/traces/image/attributes.js
almarklein Jan 5, 2021
33ab959
Update src/traces/image/attributes.js
almarklein Jan 5, 2021
a3eff71
Update src/traces/image/attributes.js
almarklein Jan 5, 2021
bd28585
Update src/traces/image/attributes.js
almarklein Jan 5, 2021
d9210c3
Merge branch 'master' into interp
almarklein Jan 5, 2021
6dcb840
put pixelated style in constants
almarklein Jan 5, 2021
8b39030
add to docstring
almarklein Jan 5, 2021
5b01253
style
almarklein Jan 6, 2021
15d157f
fix css
almarklein Jan 7, 2021
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
11 changes: 11 additions & 0 deletions src/traces/image/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,17 @@ module.exports = extendFlat({
'otherwise it defaults to `rgb`.'
].join(' ')
},
zsmooth: {
valType: 'enumerated',
values: ['fast', false],
dflt: false,
role: 'info',
editType: 'plot',
description: [
'Picks a smoothing algorithm used to smooth `z` data.',
'This only applies for image traces that use the `source` attribute.'
].join(' ')
Copy link
Contributor Author

@almarklein almarklein Jan 5, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The heatmap trace has ['fast', 'best', false]. I'm not sure what false means there, but would it not make more sense to have 'fast' and 'best' here, which would resolve to pixelated and "auto", respectively?

We should also add a note that the result may be browser dependent.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ha, we really need better documentation of those options for heatmaps, but here's what they mean:

  • false means no smoothing, each data point is a rectangle (or "brick") of constant color.
  • 'fast' means we let the browser interpolate smoothly between one data value and the next (so yes, the result may be browser-dependent). This only works when all pixels are the same size, and it can cause problems if two neighboring points have very different value, as the browser will probably interpolate linearly in RGB space and intermediate values may not be present in the colorscale at all.
  • 'best' means we smooth by calculating the color at each screen pixel independently, first with bilinear interpolation of data values, then we map the result onto the colorscale. This can be slow, but it handles nonuniform x or y spacing and ensures every interpolated value is in the colorscale.

So what you've implemented here - assuming the browser behaves as expected - corresponds to false (pixelated) and 'fast' (smoothed). 'best' probably doesn't make sense for images unless there are important browsers that we can't get to behave correctly with 'fast'. But we don't support nonuniform pixels in image traces, and there's no colorscale so the interpolation we would do manually is likely the same as the browser does, unless perhaps we wanted to support interpolating in HSL space.

},
zmin: {
valType: 'info_array',
items: [
Expand Down
14 changes: 13 additions & 1 deletion src/traces/image/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,17 @@ module.exports = {
},
suffix: ['°', '%', '%', '']
}
}
},
// For pixelated image rendering
// http://phrogz.net/tmp/canvas_image_zoom.html
// https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
pixelatedStyle: [
'image-rendering: optimizeSpeed',
'image-rendering: -moz-crisp-edges',
'image-rendering: -o-crisp-edges',
'image-rendering: -webkit-optimize-contrast',
'image-rendering: optimize-contrast',
'image-rendering: crisp-edges',
'image-rendering: pixelated'
].join('; ')
};
1 change: 1 addition & 0 deletions src/traces/image/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ module.exports = function supplyDefaults(traceIn, traceOut) {
traceOut.zmax = cm.zmaxDflt;
}

coerce('zsmooth');
coerce('text');
almarklein marked this conversation as resolved.
Show resolved Hide resolved
coerce('hovertext');
coerce('hovertemplate');
Expand Down
6 changes: 2 additions & 4 deletions src/traces/image/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,8 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {

image3.exit().remove();

// Pixelated image rendering
// http://phrogz.net/tmp/canvas_image_zoom.html
// https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
var style = 'image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated;';
var style = (trace.zsmooth === false) ? constants.pixelatedStyle : '';

if(fastImage) {
var xRange = Lib.simpleMap(xa.range, xa.r2l);
var yRange = Lib.simpleMap(ya.range, ya.r2l);
Expand Down