Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Is there is any way or module to move cursor and simulate mouse clicks in windows7/8 with node.js?
I found this library https://www.npmjs.org/package/win_mouse but seems like it doesn't work
I've been working on a module for this, RobotJS.
Example code:
var robot = require("robotjs");
//Get the mouse position, retuns an object with x and y.
var mouse=robot.getMousePos();
console.log("Mouse is at x:" + mouse.x + " y:" + mouse.y);
//Move the mouse down by 100 pixels.
robot.moveMouse(mouse.x,mouse.y+100);
//Left click!
robot.mouseClick();
It's still a work in progress but it will do what you want!
I've previously tried the win_mouse package, but it didn't work for me either, think it requires an older version of node.js.
One solution would be to use the ffi package, which allows you to dynamically load and call native libraries. To move the mouse on windows, you'd need to call the SetCursorPos function from the user32.dll like this:
var ffi = require("ffi");
var user32 = ffi.Library('user32', {
'SetCursorPos': [ 'long', ['long', 'long'] ]
// put other functions that you want to use from the library here, e.g., "GetCursorPos"
});
var result = user32.SetCursorPos(10, 10);
console.log(result);
Another solution would be to write a native node add-on that wraps around the SetCursorPos function, but it is more complex.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a lot of questions its all on java script (with some jquery)
first im trying to detect the mouse X cordinates when the mousemove on an element :
(function() {
'use strict';
$('.AnyElement').mousemove(function (e) {
console.log(e.pageX)
});
})();
i want to detect the mouse X once i know theres a functions like mouseover etc...
but in general how to make this function run once and stop
Second when someone write :
if (document.body = 1) {
// do anything
}
he is checking if document.body equal to 1
i see a thing in someone else code i dont undertand here it is :
if (document.body) {
// do anything
}
it doesnt matter what the function do , the thing is what he is checking ???
In answer to your first question there are a few ways you could do it, one example would be to register the mousemove event and then remove the event after logging it once.
$('html').mousemove(function(e) {
console.log(e.pageX);
$('html').off('mousemove');
})
Another method could be use the one event listener built into jQuery.
$('html').one('mousemove',function(e) {
console.log(e.pageX);
});
In answer to your second question the first statement is looking for the length of the element, if the element exists it will generally be greater than 0. In the second statement document.body will return a boolean of true or false depending on whether or not the element exists. Again there are a million different ways you can do the same thing in Javascript.
Hope that helps!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a single page application I'm working on in which a variable x can change for many reasons. I want the value displayed in the DOM (the div below) to at all times match the value of the javascript variable.
I understand frameworks like angular are good for this, but I'm looking for a more lightweight and simple solution. I'm already using JQuery and underscore.js on the page if that helps.
<script>
var x = 100
</script>
<div id="value_display">100</div>
Ideally I'd like something where I just need to provide the variable and the element as arguments. For example:
bind(x,'#value_display')
My proposition is to create special Class to encapsulate those variables. It is very lightweight solution no intervals and value watching.
var ViewModel=function(selector){
this.dom=document.querySelector(selector);//here DOM element
this.value=null;
};
//method sets value
ViewModel.prototype.set=function(value){
if (value===this.value)
return;//the same value
this.value=value;//new value
this.dom.innerText=this.value; //most important changing in DOM
};
//method gets value
ViewModel.prototype.get=function(){
return this.value;
};
Usage:
var x=new ViewModel("#selector");
x.set(100);
Check example in jsFiddle -https://jsfiddle.net/maciejsikora/wrd14kwk/
You ask for a simple implementation (no large frameworks) of an observer pattern, ideally just by providing the variable name and the element's id as arguments.
What you ask for is possible, if we define the bind() function to repeatedly poll x to see if it has changed. Note that bind then has to be called like this:
bind('x','value_display');
A working example:
var x = 100;
function bind(varName, elementId){
var lastValue;
function check(){
if(lastValue !== window[varName]){
lastValue = window[varName];
document.getElementById(elementId).innerHTML = lastValue;
}
}
//poll for changes every 50 milliseconds
setInterval(check, 50);
}
//bind x to value_display
bind('x','value_display');
//test function by changing x every 100th millisecond
setInterval(function(){
x = +new Date;
},
100
);
<div id="value_display"></div>
Personally, I would prefer a lightweight publisher/subscriber module over using a polling function, but that would require assignment to the variable x to be controlled by a function/method (some kind of setter). If you research (google) observer pattern or pub/sub pattern, you will find easy ways of implementing this in much less code than a large framework—but probably not as lightweight as the polling approach.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a LESS file with color definitions:
#RED: #CE1512;
#BLUE: #3E83A0;
// ...
I now have need of using these color definitions in my JavaScript as well.
How best to share code like this between LESS and JavaScript?
I ended up coming up with my own solution, though I think I will try to avoid using it all-together (per the reasons listed by alttag).
Vohuman's answer provides another solution, but I don't really like the idea of embedding js directly in my LESS file, so would prefer an approach like below.
I created the following node.js module which will read a json file and output a less file.
var fs = require('fs');
var EOL = require('os').EOL;
module.exports = function (jsonFile, outputFileName) {
var json = require(jsonFile);
var lessFileContent = "";
for (color in json) {
var lessColorDefinition = '#' + color + ': ' + json[color] + ';';
lessFileContent += lessColorDefinition + EOL;
};
fs.writeFile(outputFileName, lessFileContent);
};
Example json file:
{
"RED": "#CE1512",
"BLUE": "#3E83A0"
}
Example usage in Gulp task:
var j2l = require('./baseStyles/jsonToLess');
gulp.task('build-base-less', function() {
j2l('./colors.json', 'colors.less');
});
The short answer to one of your questions is no, no it is not a good idea to use it in your javascript. In general, it is best to keep color and other visual information in CSS, and behavior information in javascript.
Exceptions should be exceedingly rare.
Is this even a good idea?
It depends on the application needs and how it's structured. If you have so many variables and your JavaScript heavily needs them then it makes sense. Otherwise having duplicates in both environments can be considered too.
Which should be the pre-compiled source? (js or less)
JavaScript as LESS compiler also understands JavaScript; however, JSON, in this case is the best option.
Does something like this already exist?
You could create a json file and import it in your LESS file. In JavaScript the file can be easily loaded by using Ajax.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have several JavaScript Objects (explicit Raphael.js paths), on which I want to apply one event. (e.g.: ".mouseover()")
example:
var p = Raphael(1, 1, 600, 600);
var x = p.path("M100 100 L 300 100") //first raphael.js path
var y = p.path(("M100 200 L 300 200") //second raphael.js path
var z = p.path(("M100 300 L 300 300") //third raphael.js path
var doStuff = function () {
//doStuff
};
x.mouseover(doStuff);
y.mouseover(doStuff);
z.mouseover(doStuff);
Question: Is there a way to shorten this,
so that you need to write .click(doStuff) only once.
JSFiddle example: http://jsfiddle.net/utg3k5mo/
Thank You
Now that you have added a jsFiddle, I know what you're talking about. I previously suggested a method that uses jQuery's .add() function because you tagged your question with jQuery; however, you are using Raphael and not jQuery, so this method didn't work for you. Please change that tag.
The best way to shorten your procedure is creating an array containing the variables and iterate through it:
var array = [x, y, z];
for(var i in array)
array[i].mouseover(doStuff);
Old answer:
jQuery uses .click(). .onClick() doesn't exist.
There are two ways to solve your problem:
First, you could store the event handler in a variable and pass it to the .click() function:
var eventHandler = function() {alert("test");};
x.click(eventHandler);
y.click(eventHandler);
z.click(eventHandler);
Or you could add the variables and invoke .click(function) on the new set:
x.add(y).add(z).click(function() {alert("test");});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I would like a stream graph as in this example:
http://mbostock.github.com/d3/ex/stream.html
but I would like real time data entering from the right and have old data leave from the left, such that I always have a window of 200 samples. How would I do this such that I have the appropriate transitions?
I tried changing the data points in the array a and then recreating an area as such
data0 = d3.layout.stack()(a);
but my transitions do not make it look like the chart is sliding across the screen.
Thanks in advance.
Try this tutorial:
When implementing realtime displays of time-series data, we often use the x-axis to encode time as position: as time progresses, new data comes in from the right, and old data slides out to the left. If you use D3’s built-in path interpolators, however, you may see some surprising behavior...
To eliminate the wiggle, interpolate the transform rather than the path. This makes sense if you think of the chart as visualizing a function—its value isn’t changing, we’re just showing a different part of the domain. By sliding the visible window at the same rate that new data arrives, we can seamlessly display realtime data...
Here is a simple example:
http://jsfiddle.net/cqDA9/1/
It shows a possible solution to keeping track and updating the different data series.
var update = function () {
for (Name in chart.chartSeries) {
chart.chartSeries[Name] = Math.random() * 10;
}
for (Name in chart2.chartSeries) {
chart2.chartSeries[Name] = Math.random() * 10;
}
setTimeout(update, 1000);
}
setTimeout(update, 1000);