Just a general question,
I know the most common approach to <canvas> tags in JavaScript is with the onMouseDown, onMouseUp and onMouseMove events when it comes to drawing. However I was wondering what is the corrent way to add touch events for mobile devices such as onTouchStart, onTouchEnd and onTouchMove without using traditional jQ such as document.getElementById()?
Thank you.
Related
I'm currently trying to create a desktop AND mobile experience using React Three Fiber, using this example as a boilerplate: https://codesandbox.io/s/vkgi6. For mobile I've managed to create some buttons which simulate pointerControls interactions for panning the camera.
The problem now, is simulating key presses (such as spacebar); I can't seem to add a ref to Keyboard Controls, and I've tried doing something like this:
How to trigger keypress event in React.js and using ref.dispatchEvent connected to the <App> container itself, but to no avail.
Any suggestions for how to simulate keypresses which get picked up by the Player component (such as Space for causing the player to jump)? Alternatively, anyone know of any great 'dual' joystick control examples for mobile, with one for moving and one for panning?
Thanks
I am new to React. I want to find a package that handles zooming and panning on a canvas. For those that have used Figma, just like that. Does this make sense? If you know of any, please let me know!
Try react-touch-canvas
This is a set of two React higher order components, for hooking mouse and touch events panning/zooming functionality into your application.
I'm building a video application for the web in React using OpenTok. OpenTok has built in buttons for muting the mic for the publisher and muting the audio for subscribers. In my case I also need buttons to mute the video for both the publisher and the subscriber.
I haven't seen anything about a mute video button in the documentation so I built the functionality myself using subscribeToVideo. The problem is that I want to add a button with this functionality next to the mute audio button, but I haven't found anything about custom buttons in the documentation.
So my question is: What's the best way to add custom buttons to OpenToks bar?
Of course I could append a button to the html and style it in place myself, but it feels ugly and I don't know what the consequences are. I guess this is my back up solution if there isn't any other way.
I will probably need to add other buttons as well in the future so I really hope OpenTok supports custom buttons and that it's just me that haven't found how to do it.
TokBox Developer Evangelist here.
We don't have any documentation on custom buttons, but you do have three options for the video and mute buttons on the video element.
If you want a custom button, you will have to append that to the HTML and toggle subscribeToVideo and subscribeToAudio properties like you said.
Here is a react sample that adds a mute video button https://opentok.github.io/opentok-web-samples/React-Basic-Video-Chat/
I would recommend that you just set the buttonDisplayMode to off and then recreate the mute audio button just using subscriber.subscribeToAudio() and publisher.publishAudio(). This way if eg. the opentok UI changes slightly it doesn't matter for you, plus you can make it all look however you want.
I noticed that Polymer "consumes" gestures on my own web components.
I have 2 web components on my page: google-map (Polymer based) and animated button (native one, written by myself, not using any frameworks).
They are imported in this way:
google-map folder has the following structure:
Angular ng-click is defined on animated button:
<animated-button-web-component ng-click="fireEvent('click');" data-src="" data-src-click="" data-src-hover="" data-text="foo" class=""></animated-button-web-component>
When I use Chrome in regular mode click event is fired as expected but when I use Chrome in the device mode the similar touch event is not fired from the animated button. If I remove google-map completely from the page it starts working.
Do you have any idea how to "isolate" Polymer so it doesn't interfere with the events in the document?
Thank you,
Alex
I am creating a simple app with the ionic framework, and I want to run a function on each of the swipe events or drag events.
like this :
When user swipe up/drag up arrow, it will open it ( like open notifications smarthphone ).
swipe down or drag down, it will close it.
Can anyone help provide sample HTML & JS to listen to gesture event?
Regarding gesture events handlers you can check the Ionic docs, for example:
http://ionicframework.com/docs/api/directive/onDragUp/
AFAIK no official component fits with your requirement (the most similar is ionSlides but works horizontally). However there are some 3rd party directives or demos like the following you may adapt to your needs:
https://github.com/bramus/ion-drawer-vertical
https://github.com/darylrowland/ionic-contrib-swipe-cards
http://www.idangero.us/swiper/demos/#.VrxDjfnhC71