Comments (4)
So I programmed my own buttons, thanks to this useful hint.
Now I'm trying to use a static nipple instead. It's there, working, but not throwing any events...
I just got from this:
var nippleManager = nipplejs.create({
zone: document.getElementById('box'),
color: 'red'
});
to that:
var nippleManager = nipplejs.create({
zone: document.getElementById('box'),
color: 'red',
mode: 'static',
position: {left: '100px', bottom: '100px'}
});
What am I missing?
from nipplejs.
I made a very simple test, and everything is working but the static nipple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nipple debug</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body bgcolor="#CCCCCC">
<script src="nipplejs.js"></script>
<div class="static-box" id="nipplebox"></div>
<script>
var nippleManager = nipplejs.create({
zone: document.getElementById('nipplebox'),
color: 'red',
//mode: 'semi',
//mode: 'static',
//catchDistance: 200,
position: {left: '50%', bottom: '50%'}
});
nippleManager.on('added', function (evt, nipple) {
nipple.on('start move end', function(evt, data) {
console.log(data);
});
});
</script>
<style>
#nipplebox {
width:800px;
height: 600px;
background-color:#bbccaa;
border: 2px solid rgba(90, 90, 60);
position:relative;
top:0;
left:0;
margin-left: auto;
margin-right: auto;
}
</style>
</body>
</html>
I really don't know what's going on with it...
It is available here:
https://www.txori.com/stuff/ruffle/simplenipple.php
from nipplejs.
I'm still digging, and it appears that the on added doesn't work when the nipple is static:
nippleManager.on('added', function (evt, nipple) {
console.log("nipple added");
}
So I replaced it by:
var nipple = nippleManager.get(0);
nipple .on('start move end', function(evt, data) {
console.log(data);
});
There should be a bit of explanations about this in the help doc :)
from nipplejs.
it appears that the on added doesn't work when the nipple is static
This is expected since the joystick is already there and never actually added.
The added
event is for other modes than static
.
from nipplejs.
Related Issues (20)
- How to use this joystick with three js 3d object HOT 1
- [FEAT] Only count touches when joystick is pressed down
- [FEAT] Disable joystick movement
- Option for Touch / mobile only - ignore desktop mouse events HOT 3
- Joystick is frozen in Safari and Chrome on iOS 15.3 but not in Firefox [BUG] HOT 1
- joystick with other elements HOT 2
- [BUG] Joystick not appearing in correct location when used in the svelte framework HOT 5
- iOS safari shows zoom on longpress, is it possible to fix? HOT 1
- [BUG] Cant use both joysticks simultaneously
- catchDistance for static nipple[FEAT] HOT 3
- How to get 8 directions? HOT 4
- [BUG] dataOnly will create an exception in move event creation HOT 1
- [BUG] Pressure not working on MacBook Pro M1 Trackpads
- [BUG] HOT 2
- [FEAT] move the joystick(UI) from a gamepad contorller
- How to set the direction of nipplejs. HOT 2
- [FEAT] Provide nipple.esm.js in dist
- Multi touch issue on swipe [BUG]
- [BUG] Right-to-left issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nipplejs.