printdotio / pio.js

An embeddable widget that enables users to quickly and easily monetize a webpage by enabling photo-product sales of its images.
4 stars 0 forks source link

Drag positioning functionality not working in FF/Windows 7 #75

Open gurustump opened 9 years ago

gurustump commented 9 years ago

When using the Printio Web Plugin with Firefox 35/Windows 7, in the Customization step, I'm unable to drag the image I've uploaded to reposition its cropping in the preview picture. My mouse icon turns into an empty set symbol (circle with a line through it) when I attempt to drag, suggesting that that action is not available.

Steps to reproduce:

  1. Using Firefox, go to http://www.print.io/platform-web and click the "View Demo" button.
  2. Choose any product (I'm trying "Shower Curtains" this time).
  3. Click "Get Started".
  4. Select the number of photos (I'm going with 1 this time, but it has failed to work regardless of the number I've chosen).
  5. Drag a photo from your computer into the uploader, then click "Continue" when the upload is complete.
  6. Hover your cursor over the image preview with the shower curtain cutout overlaying it. Click and attempt to drag.

Result: you get a circle-with-line-through cursor, and your image does not move.

I've already told Micah at print.io about this issue, and he was unable to reproduce the bug on his system using Firefox 33.1/Windows 7.

I tried restarting Firefox in "safe mode" (which disables all plugins). Even in safe mode, the dragging functionality would not work for me. I have had another user who has a Windows 7 box with Firefox 34 attempt to use the plugin. Dragging did not work for him either.

Both he and I attempted using the plugin in Google Chrome, and it worked fine. I also tested it in IE 11, where dragging works (though it is a little clunky, as a ghosted version of the image appears over the top of the original image I'm dragging and the shower curtain/throw pillow/etc overlay, making it difficult to see what I was doing.

micahasmith commented 9 years ago

@gurustump this is one of the most detailed bug submissions we've ever got! very appreciated.

In the background we have tested:

We still can't recreate. Were the both of you using the same image? Are you both on the same hardware (esp mouse)? If so, what?

ocram commented 9 years ago

I'm using FF/Windows 7 as well and can't reproduce, either. Unless this has been fixed already.

gurustump commented 9 years ago
Sorry I didn't respond to this right
  away. It just got lost in my email. We're certainly using
  different images. I'm on a mouse. I don't know what Jason was
  using.

  On 1/21/2015 4:22 AM, Micah Smith wrote:

  @gurustump this is one of the most
    detailed bug submissions we've ever got! very appreciated.
  In the background we have tested:

    FF 35 on Win 7
    FF 35 on Win 8.1

  We still can't recreate. Were the both of you using the same
    image? Are you both on the same hardware (esp mouse)? If so,
    what?
  —
    Reply to this email directly or view
      it on GitHub.
gurustump commented 9 years ago

Hello, Micah. I'm tasked with trying to use data and preview images from your web API in our Pixoto print configuration page for when users set up print orders. I'm wondering if we can talk about how you set up your previewer.

I really have two main questions:

First, I notice that some products can be rotated and others are locked to the orientation they start on. I can't find anything in the data I get back from your API that specifies which items can be rotated and which cannot. So how do you determine that?

Second, I want to make sure I understand how the previewer is set up correctly. I can see in the product template data that comes from your API, there are often a couple of image URLs: BackgroundImageUrl and OverlayImageUrl. The two images appear to always have the same pixel dimensions. For example, when I use "ThrowPillow_Sewn_14x14" as the Sku in requesting a product template, I get a pair of 450x450 images. One is just grey, and the other has a pillow shaped cutout in it. It looks like these images are used in your Web Plugin to determine how much the user can drag and zoom the image they want to print, and how it will eventually be cropped. I can see that when I upload an image and start manipulating it in your Plugin, I'm only allowed to drag it to the right until the left edge of my image meets the left edge of the Overlay image. Am I correct in assuming that this is all that's going on, and there aren't any numbers being calculated somewhere in the background?

The reason I wonder about this is that the 14x20 Throw pillow overlay image doesn't have the same image aspect as a 14x20 inch picture would. The Background and Overlay images that come from your API for the ThrowPillow_Sewn_14x20 sku are 610x450. that means their image aspect ratio is 610/450, or about 1.36. 20/14 is is about 1.43. That means the preview image is narrower than the actual pillow. Of course the preview image isn't an exact representation of what the eventual print will be, but how do you determine where the edges will be in such a way that you don't accidentally cut Uncle Larry out of the picture because he was over on the left side of the wedding party?

It might be hard to compose an answer to these questions in an email (in fact, I understand if it's hard to tell exactly what I'm asking for). If you prefer, we can just have a phone call. You can contact me at 310-869-1669, or contact me via Skype (username gurustump). Or you can give me your number or Skype info and just let me know when I can call or contact you so we can talk about this. Thanks in advance.

Matthew Stumphy