I am trying to add two vertexes and disconnect them, by using this example https://jgraph.github.io/mxgraph/javascript/examples/portrefs.html.
In mxGraph, there is a listener available for connecting event https://jgraph.github.io/mxgraph/docs/js-api/files/handler/mxConnectionHandler-js.html#mxConnectionHandler.mxEvent.CONNECT
graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
{
var edge = evt.getProperty('cell');
var source = graph.getModel().getTerminal(edge, true);
var target = graph.getModel().getTerminal(edge, false);
var style = graph.getCellStyle(edge);
var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
var targetPortId = style[mxConstants.STYLE_TARGET_PORT];
mxLog.show();
mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});
But when I am trying to listen to disconnect event, https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxEvent-js.html#mxEvent.DISCONNECT, that is not working.
graph.connectionHandler.addListener(mxEvent.DISCONNECT, function(sender, evt)
{
var edge = evt.getProperty('cell');
var source = graph.getModel().getTerminal(edge, true);
var target = graph.getModel().getTerminal(edge, false);
var style = graph.getCellStyle(edge);
var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
var targetPortId = style[mxConstants.STYLE_TARGET_PORT];
mxLog.show();
mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});
graph.addListener(mxEvent.DISCONNECT, function(sender, evt)
{
var edge = evt.getProperty('cell');
var source = graph.getModel().getTerminal(edge, true);
var target = graph.getModel().getTerminal(edge, false);
var style = graph.getCellStyle(edge);
var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
var targetPortId = style[mxConstants.STYLE_TARGET_PORT];
mxLog.show();
mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});
In both ways, I am not able to listen to the disconnect event.
I don't know if this is the smart way of doing this, but for me it works... I don't listen to disconnect, but to "CHANGE" and then react if the change happened in a connection... Here is how:
model.addListener(mx.mxEvent.CHANGE, function(sender, evt)
{
var changes = evt.getProperty('edit').changes;
for (var i = 0; i < changes.length; i++)
{
// Manage any mxChildChange
if (changes[i].constructor.name === "mxChildChange") {
// This is a deletion case and this is an edge
if ((changes[i].index === undefined) && (changes[i].child.edge)) {
// ... Manage the deletion of the changes[i].child
}
}
}
}
Related
Is there an easy way to repeat this code to create a volume controller that works for 4 different players simultaneously? I've managed to get it to work for one player at any given point by changing the myAudio(x) value but any more than that seems to confuse it.
// Global variables and controls
var vid = document.getElementById("myVideo");
var volumeControl = document.getElementById("vol-control");
var setVolume = function(){
vid.volume = this.value / 100;
};
var audio = document.getElementById("myAudio(1)");
var volumeControl2 = document.getElementById("vol-control2");
var setVolume2 = function(){
audio.volume = this.value / 100;
};
//event listeners
volumeControl.addEventListener('change',setVolume);
volumeControl.addEventListener('input',setVolume);
volumeControl2.addEventListener('change',setVolume2);
volumeControl2.addEventListener('input',setVolume2);
Delegate
HTML
<div id="audvid">
<video.../>
<audeo.../>
</div>
event listeners
document.getElementById("audvid").addEventListener("change", setVolume)
document.getElementById("audvid").addEventListener("input", setVolume)
change whatever is accessed
const setVolume = function(e) {
const tgt = e.target;
if (["AUDIO", "VIDEO"].includes(tgt.tagName)) {
tgt.volume = tgt.value / 100;
}
};
change any audio/video
const setVolume = function(e) {
const tgt = e.target;
[...document.querySelectorAll("AUDIO", "VIDEO")].forEach(ele => {
ele.volume = tgt.value / 100;
})
};
I am back with another question. In this condition i have added two events which is Autodesk.Viewing.ISOLATE_EVENT, Autodesk.Viewing.SHOW_ALL_EVENT but now problem is with SHOW_ALL_EVENT.
Whenever the SHOW_ALL_EVENT occur both the event are triggered.
OpenanotherPanel.prototype.onSelectionEvent = function(event) {
var currSelection = this.viewer.getSelection();
alert("Something is isolatied");
};
OpenanotherPanel.prototype.nothingToDo = function(event) {
var currSelection = this.viewer.getSelection();
alert("Nothing to do");
};
OpenanotherPanel.prototype.load = function() {
alert('OpenanotherPanel is loaded!');
this.onSelectionBinded = this.onSelectionEvent.bind(this);
this.nothingToDoBinded = this.nothingToDo.bind(this);
this.viewer.addEventListener(Autodesk.Viewing.ISOLATE_EVENT, this.onSelectionBinded);
this.viewer.addEventListener(Autodesk.Viewing.SHOW_ALL_EVENT, this.nothingToDoBinded);
return true;
};
I would like to create a decibel meter for the audio that is playing in a video element. The video element is playing a WebRTC stream.
At the moment WebRTC streams cannot be passed into a Web Audio Analyzer. (Although this might change soon … ) (see Web Audio API analyser node getByteFrequencyData returning blank array)
Is there currently another way to get decibel information from a remote mediastream?
Chrome 50 was released: As of the 13th of April 2016 using an Analyser Node with a MediaStreamAudioSourceNode works fine to get audio levels. The resulting audioLevels value can be animated or simply passed into a html meter element.
var _mediaStream = SOME_LOCAL_OR_RTP_MEDIASTREAM;
var _audioContext = new AudioContext();
var _audioAnalyser = [];
var _freqs = [];
var audioLevels = [0];
var _audioSource = _audioContext.createMediaStreamSource(_mediaStream);
var _audioGain1 = _audioContext.createGain();
var _audioChannelSplitter = _audioContext.createChannelSplitter(_audioSource.channelCount);
_audioSource.connect(_audioGain1);
_audioGain1.connect(_audioChannelSplitter);
_audioGain1.connect(_audioContext.destination);
for (let i = 0; i < _audioSource.channelCount; i++) {
_audioAnalyser[i] = _audioContext.createAnalyser();
_audioAnalyser[i].minDecibels = -100;
_audioAnalyser[i].maxDecibels = 0;
_audioAnalyser[i].smoothingTimeConstant = 0.8;
_audioAnalyser[i].fftSize = 32;
_freqs[i] = new Uint8Array(_audioAnalyser[i].frequencyBinCount);
_audioChannelSplitter.connect(_audioAnalyser[i], i, 0);
}
function calculateAudioLevels() {
setTimeout(() => {
for (let channelI = 0; channelI < _audioAnalyser.length; channelI++) {
_audioAnalyser[channelI].getByteFrequencyData(_freqs[channelI]);
let value = 0;
for (let freqBinI = 0; freqBinI < _audioAnalyser[channelI].frequencyBinCount; freqBinI++) {
value = Math.max(value, _freqs[channelI][freqBinI]);
}
audioLevels[channelI] = value / 256;
}
requestAnimationFrame(calculateAudioLevels.bind(this));
}, 1000 / 15); // Max 15fps — not more needed
}
This is a good example:
https://webrtc.github.io/samples/src/content/getusermedia/volume/
And this is the source code:
https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/volume
And this is a sample:
function recordAudio() {
try {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
window.audioContext = new AudioContext();
const instantMeter = document.querySelector('#sound-meter');
const constraints = {'video': false, 'audio': true};
const stream = await navigator.mediaDevices.getUserMedia(constraints);
window.stream = stream;
const soundMeter = window.soundMeter = new SoundMeter(window.audioContext);
soundMeter.connectToSource(stream, function(e) {
if (e) {
alert(e);
return;
}
setInterval(() => {
instantMeter.value = soundMeter.instant.toFixed(2);
}, 200);
});
$('#sound-meter').show();
$('#audio-icon').hide()
} catch(error) {
console.error('Error recording audio.', error);
}
}
I have just start learning LimeJS, but i have a problem with the sound, when i open it in firefox i have not problem but when i open it in chrome the game stop working and doesnt show, i dont know why, i try to fix it and now i can see the objects but i cant drag them, is like it stop . here is the code, I hope you can help me
//set main namespace
goog.provide('bichos');
//get requirements
goog.require('lime');
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.fill.LinearGradient');
goog.require('lime.Sprite');
goog.require('goog.math');
goog.require('lime.GlossyButton');
goog.require('lime.audio.Audio');
goog.require('lime.Layer');
goog.require('bichos.Bug');
goog.require('lime.Label');
// entrypoint
bichos.start = function(){
var director = new lime.Director(document.body,480,320);
director.makeMobileWebAppCapable();
director.setDisplayFPS(false);
var scene = new lime.Scene().setRenderer(lime.Renderer.DOM);
var initialscene = new lime.Scene().setRenderer(lime.Renderer.DOM);
//InitialScene
var initialLayer = new lime.Layer().setPosition(0,0).setAnchorPoint(0,0);
var initialContainer = new lime.Sprite().setAnchorPoint(0,0).setPosition(0,0).setFill('#EEE0E5').setSize(480,320);
var initialTitle = new lime.Label().setText('Welcome').setFontFamily('Arial').setFontColor('#000000').setFontSize(20).setPosition(240,60);
var startButton = new lime.GlossyButton().setSize(200,60).setPosition(240,150).setText('Start').setColor('#00cD00');
initialscene.appendChild(initialLayer);
initialLayer.appendChild(initialContainer);
initialLayer.appendChild(initialTitle);
initialLayer.appendChild(startButton);
//director
director.replaceScene(initialscene);
//evento inicial
goog.events.listen(startButton,['mousedown','touchstart'],function(e){
e.event.stopPropagation();
director.replaceScene(scene);
});
//Grass
var grass_gradient = new lime.fill.LinearGradient().setDirection(0,0,1,-1).addColorStop(0,'#7CCD7C').addColorStop(1,'#00FF00');
var grass = new lime.Sprite().setSize(480,320).setPosition(0.0).setAnchorPoint(0,0).setFill(grass_gradient);
//caja
var box = new lime.Sprite().setAnchorPoint(0,0).setPosition(390,230).setFill('img/Box01.png').setSize(80,80);
//contar
var num_bugs_catched = 0;
var bug_count = new lime.Label().setText('Bug Count: '+num_bugs_catched).setFontFamily('Arial').setFontColor('#000000').setFontSize(20).setPosition(100,300);
scene.appendChild(grass);
scene.appendChild(box);
//Insectos
var num_bugs =goog.math.randomInt(10)+1;
var x,y,bug;
for(var i = 0; i < num_bugs; i++){
bug = new bichos.Bug();
bug.crawl();
scene.appendChild(bug);
//sound
var bugSound = new lime.audio.Audio('audio/bug.ogg');
//eventos
goog.events.listen(bug,['mousedown','touchstart'],function(e){
var drag = e.startDrag();
drag.addDropTarget(box);
e.event.stopPropagation();
bug = this;
goog.events.listen(drag,lime.events.Drag.Event.DROP, function(e){
//play sound
bugSound.stop();
bugSound.play();
num_bugs_catched++;
bug_count.setText('Bug Count: '+num_bugs_catched);
//Desaparecer bichos
bug.setHidden(true);
delete bug;
//Tambien se puede usar window.location='';
if(num_bugs_catched == num_bugs){
alert('Has Ganado!');
bichos.start();
}
})
})
}
scene.appendChild(bug_count);
// set current scene active
}
//this is required for outside access after code is compiled in ADVANCED_COMPILATIONS mode
goog.exportSymbol('bichos.start', bichos.start);
could someone please help me to find out why this won't work on safari browser? It seems to work really well in all other browsers apart from Safari. I really could not work it out.
Any help will be most appreciated.
function loadPlayer()
{
var audioPlayer = new Audio();
audioPlayer.controls="";
audioPlayer.setAttribute("data-index", -1); //set default index to -1.
audioPlayer.addEventListener('ended',nextSong,false);
audioPlayer.addEventListener('error',errorFallback,true);
document.getElementById("player").appendChild(audioPlayer);
}
function nextSong(index, e)
{
var next;
var audioPlayer = document.getElementsByTagName('audio')[0];
//check for index. If so load from index. If not, index is defined auto iterate to next value.
if (index >= 0)
{
next = index;
}
else
{
next = parseInt(audioPlayer.getAttribute("data-index"))+1;
next >= urls.length ? next = 0 : null;
}
audioPlayer.src=urls[next][0]; //load the url.
audioPlayer.setAttribute("data-index", next);
//disable the player.
var audioPlayerControls = document.getElementById("playerControls");
audioPlayer.removeEventListener('canplay',enablePlayerControls,false);
audioPlayerControls.setAttribute("disabled", true);
audioPlayer.addEventListener('canplay',enablePlayerControls,false);
audioPlayer.load();
//show the image:
var image = document.getElementById("playerList").querySelectorAll("a")[next].querySelector("img").cloneNode();
image.style.width = "30px";
if(audioPlayerControls.querySelector("img"))
{
audioPlayerControls.replaceChild(image, audioPlayerControls.querySelector("img"));
}
else
{
audioPlayerControls.insertBefore(image, audioPlayerControls.querySelector("a"));
}
}
function enablePlayerControls()
{
//File has loaded, so we can start playing the audio.
//Enable the player options.
var audioPlayer = document.getElementsByTagName('audio')[0];
audioPlayer.removeEventListener('canplay',enablePlayerControls,false);
document.getElementById("playerControls").removeAttribute("disabled");
audioPlayer.play();
}
function errorFallback() {
nextSong();
}
function playPause()
{
var audioPlayer = document.getElementsByTagName('audio')[0];
if (audioPlayer.paused)
{
audioPlayer.play();
} else
{
audioPlayer.pause();
}
}
function pickSong(e)
{
//we want the correct target. Select it via the event (e).
var target;
//pickSong does the selecting:
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() == "img")
{
//The event target = the img element.
target = e.target.parentElement;
}
else
{
//the event target is the a element
target = e.target;
}
var index = target.getAttribute("data-index"); //get the song index stored in the data-index attribute.
nextSong(index);
}
var urls = new Array();
urls[0] = ['http://mp3lg4.tdf-cdn.com/9079/jet_143844.mp3', 'http://radio-maghreb.net/radio/radio almazighia.png'];
urls[1] = ['http://mp3lg4.tdf-cdn.com/9077/jet_143651.mp3', "http://radio-maghreb.net/radio/alwatania.png"];
urls[2] = ['http://mp3lg4.tdf-cdn.com/9080/jet_144136.mp3', "http://radio-maghreb.net/radio/inter.jpg"];
function startAudioPlayer()
{
loadPlayer();
for (var i = 0; i < urls.length; ++i)
{
//this for loop runs through all urls and appends them to the player list. This smooths the adding off new items. You only have
//to declare them in the array, the script does the rest.
var link = document.createElement("a");
link.href = "javascript: void(0)";
link.addEventListener("click", pickSong, false);
link.setAttribute("data-index", i);
link.img = document.createElement("img");
link.img.src = urls[i][1];
link.appendChild(link.img);
document.getElementById("playerList").appendChild(link);
}
}
//Event that starts the audio player.
window.addEventListener("load", startAudioPlayer, false);
#playerControls[disabled=true] > a{
color: #c3c3c3;
}
<span id="playerControls" disabled="true">
Play
Stop
</span>
Next Track
<!-- player ends -->
<br>
<br>
<!-- img links start -->
<div id="playerList">
</div>