When Raphael Drag's iPhone met the camera app, it was a disappointing encounter

Check out our web app here.

To access the main javascript, click here.

If you're looking for relevant functions, they are located at the bottom of visualizer.js and are named "dragger," "move," and "up."

A decade ago, I worked as a programmer and recently picked it back up to assist my company in creating a web app that allows customers to visualize how a specific lens will appear on a specific camera.

Disregard the info wall; feel free to input random entries. Alternatively, add the function unlock(); at the end of window.onload to bypass the info wall screen and go directly into the app.

I've made significant progress with the app but have hit a major roadblock. Despite passing testing on Mac Safari, Mac Chrome, and Mac Firefox, it failed testing on an iPhone4s and iPad1. The sliders for focal length (located in the top right) do not work correctly. Users may experience issues where the slider jumps to the far left of the screen, causing the entire app to malfunction.

Any insights or suggestions would be greatly appreciated!

On another note, if you're interested in creating a custom Google Docs Form with validation and a personalized confirmation page, check out this methodology from .

Answer №1

To begin, it is essential to determine whether the issue at hand is your bug or Raphael's bug. One possibility is to replace your "move" method with an empty method and observe the outcome.

Alternatively, a debugging strategy could involve placing a fixed-position div in the corner of the page and displaying the x/y values within it. This way, you can monitor the numbers in real-time.

It is likely that there is a discrepancy in how touch-points are calculated compared to mouse-cursor positions, leading to the issue you are experiencing.

Given the additional code you have implemented, it seems plausible that Raphael may be sending you a NaN value for Dx.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am experiencing an issue with my iOS Application as it is not appearing in the Settings/Notification Center

Issue: I am experiencing a problem with my iPhone 6s 64GB, running iOS 8.3, where my app is not showing in the notification center. Despite trying various troubleshooting steps such as deleting and reinstalling the app, restarting the phone, and launching ...

Issue with Installing Vue CLI Plugin Vue-ChartJS

For my project, I am utilizing Vue CLI and planning to incorporate the vue-chartjs plugin. In order to set it up, I followed this instructional guide: . However, upon running the process, I encountered an error with the npm package: https://i.sstatic.net ...

What is the method for clipping subviews in SwiftUI using ZStack?

Is there a way to clip the background view behind a Text element using its Rectangle? I want to ensure that when I place a Text above this 1-pixel height rectangle, it will "clip" the underlying subview in order to make the text more readable. https://i.s ...

Supertest and Jest do not allow for sending JSON payloads between requests

Below is the test function I have written: describe("Test to Create a Problem", () => { describe("Create a problem with valid input data", () => { it("Should successfully create a problem", async () => { const ProblemData = { ...

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

Utilizing ElementRef in Angular 4 to close dropdown when clicking outside of it

I recently came across this helpful tutorial, but I'm having trouble grasping how it actually functions. Here's the code snippet I've incorporated into my TypeScript file: @Component({ host: { '(document:click)': 'onOuts ...

What is the process for uploading a string as a file to Google Drive?

Issue at hand: I am facing a challenge with my project. I am attempting to develop a Google Sheets extension that involves extracting data from a Google Sheet, manipulating it using node JS methods, and then converting the modified data into a string. My ...

"Oops, it looks like there is a TypeError with this.props.tracks.map not being a function. Any ideas on why this might be

When passing information as props from one component to another, I encountered an error message in the TrackList component saying "TypeError: this.props.tracks.map is not a function". Can someone please assist me with this issue? This code snippet is from ...

Discover the name of a color using its HEX code or RGB values

Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery? Take for instance: Color Name RGB black #000000 white #FFFFFF red #FF0000 green #008000 ...

Encountered a Surprising Nil While using UIView Transition

override func viewDidAppear(_ animated: Bool) { images = ["gambar1", "gambar2", "gambar3", "gambar4"] home?.image = UIImage.init(named: "gambar1") timer = Timer.scheduledTimer(timeInterval: 2.0, target: self, selector: #selector(onTransition), ...

A pop-up window displaying an electron error message appears, but no errors are logged in the console

In a Nutshell: While developing a single-page website with Electron, I encountered the common issue of jQuery not being globally accessible. To tackle this problem, I decided to simplify it by using a quick start example, but unfortunately, I'm strugg ...

fullpage.js: the content exceeds the height limit

I am currently working on customizing the jquery script fullpage.js for a website built on the French CMS "SPIP" (). This script is used to create a one-page website with both horizontal and vertical navigation. However, I have encountered an issue with ...

Unable to submit live data due to unobtrusive validation issue in MVC 4.5

In our form, users can easily move items between multi-select boxes. Our setup includes MVC 4.5 and jQuery validate with Microsoft's unobtrusive javascript. One issue we encountered is that when the form is submitted, the values in the select boxes a ...

Server not displaying React Components

Just starting out with React and I'm puzzled why my components won't load. I may have some outdated code lingering around that's causing the issue. Repository URL: https://github.com/04lex/alex-workspace/tree/1da077943681bccba1876165cfd299b ...

The message "In Angular, there is no such property as 'data' in the type '{ user: User; session: Session; error: ApiError; }'."

Here is my complete supabase.service.ts code: import { Injectable } from "@angular/core"; import { createClient, SupabaseClient, User } from "@supabase/supabase-js"; import { BehaviorSubject } from "rxjs"; import { envi ...

Just starting out with JS, curious if it's possible to transform these circles into diamonds instead

My goal is to transform this animated field of blinking circles into rectangles or diamonds, whichever is easier. Link: http://jsfiddle.net/Jksb5/1/ HTML <canvas id="pixie"></canvas> JS var WIDTH; var HEIGHT; var canvas; var con; var g; va ...

Maintain the proportion of the browser window when reducing its size

<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <img src="spacer--1200x800.png" width="1200" height="800" /> </body> </html> This section contains CSS ...

How can I retrieve the most recent date from a collection of hashes and then extract the corresponding name key/value pair?

I am dealing with an array of hashes structured like this: [ { "Address": 25, "AlertType": 1, "Area": "North", "MeasureDate": "2019-02-01T00:01:01.001Z", "MeasureValue": -1 }, { "Address": 26, "AlertType": 1, "Area": "West", "MeasureDa ...

unable to display a variable in Swift

I created the following code snippet. How can I access the A4 variable? Whenever I attempt to do so, I encounter an error? Error: __lldb_expr_1.Paper // Paper Production // All dimensions are in millimeters import UIKit class Paper { var weight: D ...

The mystery of d3.js and its absence in Meteor

I've been working with Meteor for a while and have experience with d3, but I'm struggling to make them work together! So far, I've attempted: meteor add d3js:d3, which results in: d3 is not defined <script src="http://d3js.org/d3.v3 ...