Since i did use zoom ( mouse wheel ) I can't do blurs?

Hi all

I do feel stupid ! But since i did use zoom ( mouse wheel ) I can’t do blurs !

Then i press left mouse button down and move mouse the hole picture moves !!!

How do i get out of that mode ? I have even tryed to reboot but it still the same.

Lars

In general, the position of the pointer on the screen matters.

You’re not stupid, most people assume that this is how it works. But dragging the mouse is already used to move the background. To draw a blur you have to click, release, move the mouse, and click again.
The devs are aware and are trying to get the possibility to draw a blur by dragging.

1 Like

That sequence of clicks and mouse moving doesn’t work for me once I have zoomed in.

I have used a method of creating a bunch of blurs based upon what I guess might be unblurred license plates. Then I can zoom in, move the blurs around, and delete unneeded ones.

Needless to say, I often skip it, because it is too much work.

Once or twice, I did something which allowed me to create a blur on a zoomed image, but I couldn’t figure out what I did.

@nereocystis so what happens when you’ve zoomed in and try to create a blur? At my end, it works as it should with the click-release-move-click to mark the two corners of the blur.

After zooming in, I see the hand.

click-release-move-click

still see the hand, otherwise nothing.

Click-move-release moves the image, of course.

@nereocystis Interesting… Can you email us on support@mapillary.com with

  1. your browser and OS version

  2. a copy of the javascript console logs (e.g. for Chrome this is accessed via View > Developer)

  3. a screen recording of the behaviour if possible

Then we can have a closer look since I’m not able to reproduce your problem.

@katrin Have you tried repeating it with a touch screen system? I appreciate that the bug states it uses the mousewheel. I’ve just had various problems in my own projects dealing with mouse-up and touch-up events getting in the way of each other.

@Gness good thinking! I tried and it does seem to work for me both with mouse and touchpad, though. So this will need some more digging. How about yourself, does it work for you?

@katrin I tried with a touch screen laptop + a mouse. So it isn’t that…

Although i now realise that it’s quite possible people could be simply viewing an image in a sequence full screen and not realise they need to select ‘edit blurs in this image’ from the small menu to the bottom right?
The UI is reasonably similar, and it’s very easy to accidentally leave the edit blurs.

I certainly couldn’t find my way back to the edit blurs section when i first started using Mapillary.

@nereocystis


To the bottom right, you can find the way back to the edit blur section.
Apologies if you already knew this!

Browser Version: 59.0.1+build1-0ubuntu0.17.10.1

OS kevin@awabi:~$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 17.10
Release: 17.10
Codename: artful

I’m using a touchpad, though I also have a touchscreen.

double-clicking used to cause a zoom, though it doesn’t seem to do it today.

With the touchscreen, I can’t figure out how to zoom.

The console data is too long to cut and paste it.

Here’s info from the console.
1: precision highp float;
2: precision highp int;
3: #define SHADER_NAME LineBasicMaterial
4: #define GAMMA_FACTOR 2
5: #define NUM_CLIPPING_PLANES 0
6: #define UNION_CLIPPING_PLANES 0
7: uniform mat4 viewMatrix;
8: uniform vec3 cameraPosition;
9: #define TONE_MAPPING
10: #ifndef saturate
11: #define saturate(a) clamp( a, 0.0, 1.0 )
12: #endif
13: uniform float toneMappingExposure;
14: uniform float toneMappingWhitePoint;
15: vec3 LinearToneMapping( vec3 color ) {
16: return toneMappingExposure * color;
17: }
18: vec3 ReinhardToneMapping( vec3 color ) {
19: color = toneMappingExposure;
20: return saturate( color / ( vec3( 1.0 ) + color ) );
21: }
22: #define Uncharted2Helper( x ) max( ( ( x * ( 0.15 * x + 0.10 * 0.50 ) + 0.20 * 0.02 ) / ( x * ( 0.15 * x + 0.50 ) + 0.20 * 0.30 ) ) - 0.02 / 0.30, vec3( 0.0 ) )
23: vec3 Uncharted2ToneMapping( vec3 color ) {
24: color = toneMappingExposure;
25: return saturate( Uncharted2Helper( color ) / Uncharted2Helper( vec3( toneMappingWhitePoint ) ) );
26: }
27: vec3 OptimizedCineonToneMapping( vec3 color ) {
28: color = toneMappingExposure;
29: color = max( vec3( 0.0 ), color - 0.004 );
30: return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) );
31: }
32:
33: vec3 toneMapping( vec3 color ) { return LinearToneMapping( color ); }
34:
35: vec4 LinearToLinear( in vec4 value ) {
36: return value;
37: }
38: vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {
39: return vec4( pow( value.xyz, vec3( gammaFactor ) ), value.w );
40: }
41: vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {
42: return vec4( pow( value.xyz, vec3( 1.0 / gammaFactor ) ), value.w );
43: }
44: vec4 sRGBToLinear( in vec4 value ) {
45: return vec4( mix( pow( value.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.w );
46: }
47: vec4 LinearTosRGB( in vec4 value ) {
48: return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.w );
49: }
50: vec4 RGBEToLinear( in vec4 value ) {
51: return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );
52: }
53: vec4 LinearToRGBE( in vec4 value ) {
54: float maxComponent = max( max( value.r, value.g ), value.b );
55: float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );
56: return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );
57: }
58: vec4 RGBMToLinear( in vec4 value, in float maxRange ) {
59: return vec4( value.xyz * value.w * maxRange, 1.0 );
60: }
61: vec4 LinearToRGBM( in vec4 value, in float maxRange ) {
62: float maxRGB = max( value.x, max( value.g, value.b ) );
63: float M = clamp( maxRGB / maxRange, 0.0, 1.0 );
64: M = ceil( M * 255.0 ) / 255.0;
65: return vec4( value.rgb / ( M * maxRange ), M );
66: }
67: vec4 RGBDToLinear( in vec4 value, in float maxRange ) {
68: return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );
69: }
70: vec4 LinearToRGBD( in vec4 value, in float maxRange ) {
71: float maxRGB = max( value.x, max( value.g, value.b ) );
72: float D = max( maxRange / maxRGB, 1.0 );
73: D = min( floor( D ) / 255.0, 1.0 );
74: return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );
75: }
76: const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 );
77: vec4 LinearToLogLuv( in vec4 value ) {
78: vec3 Xp_Y_XYZp = value.rgb * cLogLuvM;
79: Xp_Y_XYZp = max(Xp_Y_XYZp, vec3(1e-6, 1e-6, 1e-6));
80: vec4 vResult;
81: vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z;
82: float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0;
83: vResult.w = fract(Le);
84: vResult.z = (Le - (floor(vResult.w
255.0))/255.0)/255.0;
85: return vResult;
86: }
87: const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 );
88: vec4 LogLuvToLinear( in vec4 value ) {
89: float Le = value.z * 255.0 + value.w;
90: vec3 Xp_Y_XYZp;
91: Xp_Y_XYZp.y = exp2((Le - 127.0) / 2.0);
92: Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y;
93: Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z;
94: vec3 vRGB = Xp_Y_XYZp.rgb * cLogLuvInverseM;
95: return vec4( max(vRGB, 0.0), 1.0 );
96: }
97:
98: vec4 mapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
99: vec4 envMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
100: vec4 emissiveMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
101: vec4 linearToOutputTexel( vec4 value ) { return LinearToLinear( value ); }
102:
103: uniform vec3 diffuse;
104: uniform float opacity;
105: #ifndef FLAT_SHADED
106: varying vec3 vNormal;
107: #endif
108: #define PI 3.14159265359
109: #define PI2 6.28318530718
110: #define PI_HALF 1.5707963267949
111: #define RECIPROCAL_PI 0.31830988618
112: #define RECIPROCAL_PI2 0.15915494
113: #define LOG2 1.442695
114: #define EPSILON 1e-6
115: #define saturate(a) clamp( a, 0.0, 1.0 )
116: #define whiteCompliment(a) ( 1.0 - saturate( a ) )
117: float pow2( const in float x ) { return x
x; }
118: float pow3( const in float x ) { return x
xx; }
119: float pow4( const in float x ) { float x2 = x
x; return x2*x2; }
120: float average( const in vec3 color ) { return dot( color, vec3( 0.3333 ) ); }
121: highp float rand( const in vec2 uv ) {
122: const highp float a = 12.9898, b = 78.233, c = 43758.5453;
123: highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
124: return fract(sin(sn) * c);
125: }
126: struct IncidentLight {
127: vec3 color;
128: vec3 direction;
129: bool visible;
130: };
131: struct ReflectedLight {
132: vec3 directDiffuse;
133: vec3 directSpecular;
134: vec3 indirectDiffuse;
135: vec3 indirectSpecular;
136: };
137: struct GeometricContext {
138: vec3 position;
139: vec3 normal;
140: vec3 viewDir;
141: };
142: vec3 transformDirection( in vec3 dir, in mat4 matrix ) {
143: return normalize( ( matrix * vec4( dir, 0.0 ) ).xyz );
144: }
145: vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {
146: return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );
147: }
148: vec3 projectOnPlane(in vec3 point, in vec3 pointOnPlane, in vec3 planeNormal ) {
149: float distance = dot( planeNormal, point - pointOnPlane );
150: return - distance * planeNormal + point;
151: }
152: float sideOfPlane( in vec3 point, in vec3 pointOnPlane, in vec3 planeNormal ) {
153: return sign( dot( point - pointOnPlane, planeNormal ) );
154: }
155: vec3 linePlaneIntersect( in vec3 pointOnLine, in vec3 lineDirection, in vec3 pointOnPlane, in vec3 planeNormal ) {
156: return lineDirection * ( dot( planeNormal, pointOnPlane - pointOnLine ) / dot( planeNormal, lineDirection ) ) + pointOnLine;
157: }
158: mat3 transposeMat3( const in mat3 m ) {
159: mat3 tmp;
160: tmp[ 0 ] = vec3( m[ 0 ].x, m[ 1 ].x, m[ 2 ].x );
161: tmp[ 1 ] = vec3( m[ 0 ].y, m[ 1 ].y, m[ 2 ].y );
162: tmp[ 2 ] = vec3( m[ 0 ].z, m[ 1 ].z, m[ 2 ].z );
163: return tmp;
164: }
165: float linearToRelativeLuminance( const in vec3 color ) {
166: vec3 weights = vec3( 0.2126, 0.7152, 0.0722 );
167: return dot( weights, color.rgb );
168: }
169:
170: #ifdef USE_COLOR
171: varying vec3 vColor;
172: #endif
173:
174: #if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) || defined( USE_EMISSIVEMAP ) || defined( USE_ROUGHNESSMAP ) || defined( USE_METALNESSMAP )
175: varying vec2 vUv;
176: #endif
177: #if defined( USE_LIGHTMAP ) || defined( USE_AOMAP )
178: varying vec2 vUv2;
179: #endif
180: #ifdef USE_MAP
181: uniform sampler2D map;
182: #endif
183:
184: #ifdef USE_ALPHAMAP
185: uniform sampler2D alphaMap;
186: #endif
187:
188: #ifdef USE_AOMAP
189: uniform sampler2D aoMap;
190: uniform float aoMapIntensity;
191: #endif
192: #ifdef USE_LIGHTMAP
193: uniform sampler2D lightMap;
194: uniform float lightMapIntensity;
195: #endif
196: #if defined( USE_ENVMAP ) || defined( PHYSICAL )
197: uniform float reflectivity;
198: uniform float envMapIntensity;
199: #endif
200: #ifdef USE_ENVMAP
201: #if ! defined( PHYSICAL ) && ( defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG ) )
202: varying vec3 vWorldPosition;
203: #endif
204: #ifdef ENVMAP_TYPE_CUBE
205: uniform samplerCube envMap;
206: #else
207: uniform sampler2D envMap;
208: #endif
209: uniform float flipEnvMap;
210: #if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG ) || defined( PHYSICAL )
211: uniform float refractionRatio;
212: #else
213: varying vec3 vReflect;
214: #endif
215: #endif
216:
217: #ifdef USE_FOG
218: uniform vec3 fogColor;
219: varying float fogDepth;
220: #ifdef FOG_EXP2
221: uniform float fogDensity;
222: #else
223: uniform float fogNear;
224: uniform float fogFar;
225: #endif
226: #endif
227:
228: #ifdef USE_SPECULARMAP
229: uniform sampler2D specularMap;
230: #endif
231: #ifdef USE_LOGDEPTHBUF
232: uniform float logDepthBufFC;
233: #ifdef USE_LOGDEPTHBUF_EXT
234: varying float vFragDepth;
235: #endif
236: #endif
237:
238: #if NUM_CLIPPING_PLANES > 0
239: #if ! defined( PHYSICAL ) && ! defined( PHONG )
240: varying vec3 vViewPosition;
241: #endif
242: uniform vec4 clippingPlanes[ NUM_CLIPPING_PLANES ];
243: #endif
244:
245: void main() {
246: #if NUM_CLIPPING_PLANES > 0
247: for ( int i = 0; i < UNION_CLIPPING_PLANES; ++ i ) {
248: vec4 plane = clippingPlanes[ i ];
249: if ( dot( vViewPosition, plane.xyz ) > plane.w ) discard;
250: }
251:
252: #if UNION_CLIPPING_PLANES < NUM_CLIPPING_PLANES
253: bool clipped = true;
254: for ( int i = UNION_CLIPPING_PLANES; i < NUM_CLIPPING_PLANES; ++ i ) {
255: vec4 plane = clippingPlanes[ i ];
256: clipped = ( dot( vViewPosition, plane.xyz ) > plane.w ) && clipped;
257: }
258: if ( clipped ) discard;
259:
260: #endif
261: #endif
262:
263: vec4 diffuseColor = vec4( diffuse, opacity );
264: #if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT )
265: gl_FragDepthEXT = log2( vFragDepth ) * logDepthBufFC * 0.5;
266: #endif
267: #ifdef USE_MAP
268: vec4 texelColor = texture2D( map, vUv );
269: texelColor = mapTexelToLinear( texelColor );
270: diffuseColor *= texelColor;
271: #endif
272:
273: #ifdef USE_COLOR
274: diffuseColor.rgb *= vColor;
275: #endif
276: #ifdef USE_ALPHAMAP
277: diffuseColor.a *= texture2D( alphaMap, vUv ).g;
278: #endif
279:
280: #ifdef ALPHATEST
281: if ( diffuseColor.a < ALPHATEST ) discard;
282: #endif
283:
284: float specularStrength;
285: #ifdef USE_SPECULARMAP
286: vec4 texelSpecular = texture2D( specularMap, vUv );
287: specularStrength = texelSpecular.r;
288: #else
289: specularStrength = 1.0;
290: #endif
291: ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
292: #ifdef USE_LIGHTMAP
293: reflectedLight.indirectDiffuse += texture2D( lightMap, vUv2 ).xyz * lightMapIntensity;
294: #else
295: reflectedLight.indirectDiffuse += vec3( 1.0 );
296: #endif
297: #ifdef USE_AOMAP
298: float ambientOcclusion = ( texture2D( aoMap, vUv2 ).r - 1.0 ) * aoMapIntensity + 1.0;
299: reflectedLight.indirectDiffuse *= ambientOcclusion;
300: #if defined( USE_ENVMAP ) && defined( PHYSICAL )
301: float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) );
302: reflectedLight.indirectSpecular *= computeSpecularOcclusion( dotNV, ambientOcclusion, material.specularRoughness );
303: #endif
304: #endif
305:
306: reflectedLight.indirectDiffuse *= diffuseColor.rgb;
307: vec3 outgoingLight = reflectedLight.indirectDiffuse;
308: #ifdef USE_ENVMAP
309: #if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG )
310: vec3 cameraToVertex = normalize( vWorldPosition - cameraPosition );
311: vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );
312: #ifdef ENVMAP_MODE_REFLECTION
313: vec3 reflectVec = reflect( cameraToVertex, worldNormal );
314: #else
315: vec3 reflectVec = refract( cameraToVertex, worldNormal, refractionRatio );
316: #endif
317: #else
318: vec3 reflectVec = vReflect;
319: #endif
320: #ifdef ENVMAP_TYPE_CUBE
321: vec4 envColor = textureCube( envMap, vec3( flipEnvMap * reflectVec.x, reflectVec.yz ) );
322: #elif defined( ENVMAP_TYPE_EQUIREC )
323: vec2 sampleUV;
324: reflectVec = normalize( reflectVec );
325: sampleUV.y = asin( clamp( reflectVec.y, - 1.0, 1.0 ) ) * RECIPROCAL_PI + 0.5;
326: sampleUV.x = atan( reflectVec.z, reflectVec.x ) * RECIPROCAL_PI2 + 0.5;
327: vec4 envColor = texture2D( envMap, sampleUV );
328: #elif defined( ENVMAP_TYPE_SPHERE )
329: reflectVec = normalize( reflectVec );
330: vec3 reflectView = normalize( ( viewMatrix * vec4( reflectVec, 0.0 ) ).xyz + vec3( 0.0, 0.0, 1.0 ) );
331: vec4 envColor = texture2D( envMap, reflectView.xy * 0.5 + 0.5 );
332: #else
333: vec4 envColor = vec4( 0.0 );
334: #endif
335: envColor = envMapTexelToLinear( envColor );
336: #ifdef ENVMAP_BLENDING_MULTIPLY
337: outgoingLight = mix( outgoingLight, outgoingLight * envColor.xyz, specularStrength * reflectivity );
338: #elif defined( ENVMAP_BLENDING_MIX )
339: outgoingLight = mix( outgoingLight, envColor.xyz, specularStrength * reflectivity );
340: #elif defined( ENVMAP_BLENDING_ADD )
341: outgoingLight += envColor.xyz * specularStrength * reflectivity;
342: #endif
343: #endif
344:
345: gl_FragColor = vec4( outgoingLight, diffuseColor.a );
346: #ifdef PREMULTIPLIED_ALPHA
347: gl_FragColor.rgb *= gl_FragColor.a;
348: #endif
349:
350: #if defined( TONE_MAPPING )
351: gl_FragColor.rgb = toneMapping( gl_FragColor.rgb );
352: #endif
353:
354: gl_FragColor = linearToOutputTexel( gl_FragColor );
355:
356: #ifdef USE_FOG
357: #ifdef FOG_EXP2
358: float fogFactor = whiteCompliment( exp2( - fogDensity * fogDensity * fogDepth * fogDepth * LOG2 ) );
359: #else
360: float fogFactor = smoothstep( fogNear, fogFar, fogDepth );
361: #endif
362: gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );
363: #endif
364:
365: }
366:

And another comment.

I am really editing blurs. Before I zoom in, I can mark a blur. After I zoom in, I am stuck, until I move forward to the next image.

1 Like

@nereocystis ah ha! I can recreate it too, though only if i double click to zoom in. Never created the same problem with the mouse wheel.

@katrin I used Chrome 65.0.3325.181 on Windows 10 and firefox 57 on Mint and got the same result

1 Like

@Gness I feel better that I am not alone. I had earlier missed the mouse wheel reference, and missed that i got to the problem in a different way

1 Like

I can’t test it right now because blurring is locked at the moment, but have you tried pinching out to zoom in instead of double clicking?
Usually devices, including notebook touchpads, allow to zoom in by placing two fingers on the pad and moving them away from each other. (Here’s a video of what I mean).
Like I said I can’t test it right now for the blur editing mode, but it definitely works on the normal viewing mode.
That may be a workaround, if I understood the problem correctly.