HTML 5 Canvas Whiteboard for iOS - ios

I have been working with the code here: http://code.google.com/p/html-5-canvas-whiteboard/
Everything works great in the browser, but not on iOS devices.
Can anyone point me in the right direction to make this iOS compatible? More specifically, I would like it to work in Safari for my iPad.
Here is a test version of my code: http://www.coderedsupport.com/whiteboard
Any advice would be great.

You have mousedown, mouseup, and mousemove events, you need to add touchstart, touchend and touchmove events to match them.

You need to map the mouse-click events used for drawing on the whiteboard to actual touch-events. Just have a look in the Apple-Developer-Libraries I used it for a little proof-of-concept and it worked just fine with iOS and Android.
UPDATE: Regarding to your comment, you should have a look at this Blog

Related

iOS Resizable GUIs with JUCE

I'm using the JUCE framework to make my first few iOS apps, mostly just proofs of concepts for my Github account for job recruiters.
I've got my first app compiled and working on iOS, but I'm having tons of issues with the GUI.
I can't seem to find the right resolutions to fill the screen. I'm testing with an iPhone 7 Plus, and I figured I could just type in the resolution of that screen to the Projucer, but it doesn't work correctly.
Then I realize I'd probably just want one that fills the screen automatically, but dont know which function calls to use or where its located in the Projucer (haven't found it yet).
Also, I'm entirely new to GUI developing as of December, so I'm still learning all of this. I would greatly appreciate keeping it simple. Thank you to anyone who is able to help.
Try this in MainComponent.cpp
Rectangle<int> area = Desktop::getInstance().getDisplays().getMainDisplay().totalArea;
centreWithSize (area.getWidth(), area.getHeight());

How to create a fluent pagination for mobile devices on a responsive website

I want users of my website to use pagination on their mobile devices, like for example UIScrollView with paging enabled in iOS.
Still the website should also be viewable on desktops.
So far, I tried Foundation's orbit, but that just doesn't feel fluent at all (when you release your finger, it performs the sliding a little delayed).
Is there any good alternative on how to get this done? If possible I would like the user to even slide vertically as well as horizontally.
Maybe Swipe.js is the thing you looking for.
have you tried SwipeView?
Here you have an demo gallery
I'm looking for this too, but I really think they are none.
If you want it to be fluid, you have create your own using CSS3 animation/transform and so it will not work on hold browser (IE < 10 or 11, but I'm not sure). If you want to handle touch events I recommend you to check out "jQuery Modile"
You can try iScroll 5 it's quite simple but do the trick perfectly.
You will find in the archive of the project an example of horizontal paging under demos/carousel, you will see it's quite good. :)
In addition you will be able to see all other things you can do with iScroll which should fit your demands.

SVGPan - anyone figure out ios touch event support?

I've been working with SVGPan (http://code.google.com/p/svgpan/) and I have generally found it fantastic (so thanks to all involved!).
Just wondering, did anyone ever add functionality to support ios devices (I'm mainly interested in the i-pad at the moment!)? I've been trying to work with some changes myself but I haven't got past being able to pan / drag more than one svg element at a time e.g. a rect / circle. I can't get it to work with a group of svg elements at once based on the various touch events. Best thing I've found is this: http://techblog.floorplanner.com/post/20528546052/interactive-svg-on-the-ipad.
Any help would be greatly appreciated!
Try hammer.js (http://eightmedia.github.io/hammer.js/) and there is a demo you can try with your ios browser: http://riagora.com/mobile/hammer/

IOS Orientation fix doesn't work all the time

I am developping a swipe gallery for mobile devices. Users can change images by sliding the screen, as any normal images gallery in most iPhone app.
Here is a demo:
http://daviddarx.com/stuffs/work/custom/swip/
To debug the iOS orientation bug (which let the content zoomed when you change the orientation), I used the only library that correct that:
http://scottjehl.github.com/iOS-Orientationchange-Fix/
Unfortunately, this library is working perfectly most of the time, but it happens to fail and not work correctly. This happen around 1 time on 10 times, and the result is then the same as if the library wasn't here.
This is not a huge problem on most of the mobile and responsive website, as the user can manually dezoom and then get back to the normal display.
But the problem here is that I had to disable the zoom function, to make my system work correctly. So, when the bug happen, once on 10 times, the gallery is then just bugged and stay like that....
So, here are my questions:
-do you know any other library that manage that bug fix, and is 100% completely reliable?
-if not, do you know a way to correct the used library to get a 100% support rate?
-if not, do you have any idea or solution for me?
Thank you in advance for your help!
David
There's an outstanding pull request on Scott Jehl's repo that uses slope detection instead of absolute values which seems to not suffer from the intermittent-ness of the original solution.
https://github.com/PeterWooster/iOS-Orientationchange-Fix/

Testing Ipad Touch Events in Windows

I have a website that I would like to be iPad compatible. However, I use Windows, so I can't install the official emulator.
I tried iBBDemo2 (http://code.google.com/p/ibbdemo2/) which looks good, but it uses regular mouse events instead of the touch events (so I can double click with my mouse and fire a dblclick event on an element... which in this case would just cause a zoom to occur on a real iPad)
Is there any way at all to test this?
Have you tried Ripple emulator? It is a very useful chrome extension. It has accelerometer support and other features.
The link is here.
I don't know if really solves your problem, but you can try it for free.

Resources