Develop Reference

How to Set the value of an angular variable to another variable dynamically

I have a slideshow on my website with left and right buttons.
Like this (http://i.prntscr.com/863ad10cfd4e4f1ea9b90721cc6582e8.png).
I am using angular to change the image on left and right.
As you can see in the function I increase the value
/*SlideShow Pictures*/
$scope.picture_1 = "./images/photos/watch.jpg";
$scope.picture_2 = "./images/photos/watch.jpg";
$scope.picture_3 = "./images/photos/watch.jpg";
$scope.picture_4 = "./images/photos/watch.jpg";
$scope.picture = $scope.picture_1;
$scope.picture_value = 1;
$scope.image_change_right = function () {
if ($scope.picture_value < 4)
{
$scope.picture_value = $scope.picture_value + 1;
$scope.picture = ('$scope.picture_' + $scope.picture_value);
console.log($scope.picture_value);
}
else{
$scope.picture_value = 1;
$scope.picture = ('$scope.picture_' + $scope.picture_value);
console.log($scope.picture_value);
}
}
Above is the function called for button right press.
The function increases the variable by 1 and adds it to the string to call the new variable. In the console log it looks great! However I think it is only showing as a string --- it is not actually setting the value of scope.picture to the variable.
How can I set this to not be a string but as a valid variable?
Thanks everyone!

A better way would be like this:
The Controller:
// The array of picture links.
$scope.pictures = [
"./images/photos/watch.jpg",
"./images/photos/watch.jpg",
"./images/photos/watch.jpg",
"./images/photos/watch.jpg"
];
$scope.current = 0; // Initialize the current pictures place in the array.
$scope.picture = $scope.pictures[$scope.current]; // Set the current picture.
// The direction is either 1 or -1;
$scope.changePicture = function (direction) {
$scope.current += direction; // add or remove one depending on direction.
$scope.current %= $scope.pictures.length; // Normalize the number based on the length of the pictures array.
console.log($scope.picture);
}
The Html:
<img src="{{picture}}">
<button ng-click="changePicture(1)">Next</button>
<button ng-click="changePicture(-1)">Previous</button>

Why don't you use an array with image links like this?
/*SlideShow Pictures*/
$scope.pictures = ["./images/photos/watch.jpg", "./images/photos/watch.jpg", "./images/photos/watch.jpg", "./images/photos/watch.jpg"];
$scope.picture = $scope.pictures[0];
$scope.picture_value = 0;
$scope.image_change_right = function () {
if ($scope.picture_value < 4)
{
$scope.picture_value = $scope.picture_value + 1;
$scope.picture = $scope.pictures[$scope.picture_value];
console.log($scope.picture_value);
}
else{
$scope.picture_value = 0;
$scope.picture = $scope.pictures[$scope.picture_value];
console.log($scope.picture_value);
}
}

Change properties of a class from time to time

I have two functions. In the first one I increase a variable by adding 100 to it and I put a setInterval so the funcion repeats itself after some time. The other function is a class, a contrusctor to create an object. I want this.x_origen to get increased by adding aumento to it after some time and repeat it. However what I'm getting here is that the first function increases aument and then it finishes and then the second function starts. How can I solve this?
var aument = 0;
function aumento(){
aument = aument + 100;
return aument;
}
setInterval(function () {aumento()}, 1000/50);
function create_class_brick (x_origen_in, y_origen_in, x_final_in, y_final_in, mi_estado, mi_velocidad, mi_id){
this.x_origen = x_origen_in + aumento();
this.y_origen = y_origen_in;
this.x_final = x_final_in + aumento();
this.y_final = y_final_in;
this.estado = mi_estado;
this.velocidad = mi_velocidad;
this.id_elemento = mi_id;
this.DESPLAZAR_LADRILLO = desplazar_ladrillo;
this.F0 = f0;
this.F2 = f2;
this.crear_ladrillo = crear_ladrillo;
this.obtener_x_origen_ladrillo = obtener_x_origen_ladrillo;
this.obtener_y_origen_ladrillo = obtener_y_origen_ladrillo;
this.obtener_x_final_ladrillo = obtener_x_final_ladrillo;
this.obtener_y_final_ladrillo = obtener_y_final_ladrillo;
}

An example on how to wait for the initial call:
function brick (x_origen_in){
this.x_origen = x_origen_in;
}
function aumento(brick){
console.log(brick.x_origen);
brick.x_origen += 100;
setTimeout(aumento.bind(this, brick), 500);
}
var brick = new brick(100);
aumento(brick);
http://jsfiddle.net/x6c08u39/

You can use Object.defineProperty to dynamically generate the value whenever it is accessed.
First, lets simplify the auto-incrementing of aument:
var aument = 0;
function aumento(){
aument += 100;
}
// The first argument for setInterval is the function to execute
// No need to figure out the interval value at runtime as there are no dynamic values
setInterval(aumento, 20); // 1000/50 === 20
Now lets make an object that will have a the correct value:
function create_class_brick (x_origen_in, y_origen_in, x_final_in, y_final_in, mi_estado, mi_velocidad, mi_id){
Object.defineProperty(this, 'x_origen', {
get: function () { return x_origen_in + aument; }
});
// Other stuff
// ...
}
A quick test:
> aument
34100
> var obj = new create_class_brick(23);
undefined
> obj.x_origen
161523
> obj.x_origen
167223
> obj.x_origen
172423

SVG Pan around viewport - onclick/onmove keeps resetting?

i posted this question earlier however it was a jumbled and made no real sense.
Also I've re hashed the code but i'm still getting the same issue.
To explain; i have an SVG element that i can current click on and drag about, this will works peachy and i'm, pleased with it, however once the user unclicks the mouse button and then goes and moves the mouse and starts the dragging functionality, the svg co-ords simply go back to 0 and the whole image just starts back at 0.0.
this is really buggin me now, i feel like i'm missing something simple.
edit: JSFiddle as requested - https://jsfiddle.net/2cu2jvbp/2/
Here is the code that i've "hashed" together:
var states = '', stateOrigin;
var root = document.getElementById("svgCanvas");
var viewport = root.getElementById("viewport");
function setAttributes(element, attribute)
{
for(var n in attribute) //rool through all attributes that have been created.
{
element.setAttributeNS(null, n, attribute[n]);
}
}
function setupEventHandlers() //self explanatory;
{
setAttributes(root, {
"onmousedown": "mouseDown(evt)", //do function
"onmouseup": "mouseUp(evt)",
"onmousemove": "mouseMove(evt)",
});
}
function setCustomTransMatrix(element, a,b,c,d,e,f) {
var m = "matrix(" + a + " " + b + " " + c + " " +d + " " + e + " " + f + ")";
element.setAttribute("transform", m);
}
function getMousePoint(evt) { //this creates an SVG point object with the co-ords of where the mouse has been clicked.
var points = root.createSVGPoint();
points.x = evt.clientX;
points.Y = evt.clientY;
return points;
}
function mouseDown(evt)
{
if(evt.target == root || viewport)
{
states = "pan";
stateOrigin = getMousePoint(evt);
}
}
function mouseMove(evt)
{
var pointsLive = getMousePoint(evt);
var storedCo = [];
if(states == "pan")
{
setCustomTransMatrix(viewport, 1,0,0,1, pointsLive.x - stateOrigin.x, pointsLive.Y - stateOrigin.Y);
storedCo[0] = pointsLive.x - stateOrigin.x
storedCo[1] = pointsLive.Y - stateOrigin.Y;
}
else if(states == "store")
{
stateOrigin = pointsLive;
states = "stop";
}
}
function mouseUp(evt)
{
if(states == "pan")
{
states = "store";
if(states == "stop")
{
states ='';
}
}
}
function intialize() {
var matrik = root.getCTM();
setupEventHandlers();
console.log(matrik);
//setCustomTransMatrix(viewport, matrik.a, matrik.b, matrik.c, matrik.d, matrik.e,matrik.f);
}
intialize();

I am tring to create "Sinking ships" using jQuery

So far I am tring to make functions for placing ships on board and I have some problems with function for checking is some field available. My basic idea is to have one method which will be called on button click:
$("#dodaj1x1").click(function(){
var raspolozivo=parseInt($("#raspolozivo1x1").text());
if(raspolozivo>0){
generisi1x1();//call for function that generate random field
var novoRaspolozivo= raspolozivo-1;
$("#raspolozivo1x1").html(novoRaspolozivo);
}
else{
alert("Rasporedjeni svi raspolozivi brodovi ovog tipa!");
}
});
and it will call function to generate random field:
function generisi1x1(){
var minR = 0;
var maxR = 9;
var minK = 0;
var maxK = 9;
randRed=Math.floor(Math.random() * (maxR - minR + 1)) + minR;
randKol=Math.floor(Math.random() * (maxK - minK + 1)) + minK;
proveri1x1(randRed,randKol);//call to function to check is field available
}
than function generisi1x1() calls function that checks is that field available:
function proveri1x1(randRed,randKol){
for(i=randRed-1;i<randRed+2;i++){
for(j=randKol-1;j<randKol+2;j++){
if($(".red"+i+".kolona"+j+"").hasClass('deoBroda')){
alert("red:"+" "+i+" kolona:"+j);
generisi1x1();
}
else { postavi1x1(randRed,randKol);}
}
}
}
And my problem is that sometimes this work great(at least it looks that work great,maybe pure luck), and sometimes it generate only 3 ships 1x1(there should be 4) , sometimes it show me message about problem and generate 5 ships(4 on right places, 1 on bad) etc.
Printscreen of bad case: Added ship 1x1 on position 5,3 right next to ship 4x1
Here is live demo of entire code: Live demo
So far I made available to insert ships 4x1 and 1x1, and doing check only for 1x1, plan is to do the same for all ships, any help would be great.

You will find it easier to understand if proveri1x1() performs the checks and returns true or false, and generisi1x1() performs the postavi1x1() action;
function generisi1x1() {
var minR = 0, maxR = 9, minK = 0, maxK = 9;
randRed = Math.floor(Math.random() * (maxR - minR + 1)) + minR;
randKol = Math.floor(Math.random() * (maxK - minK + 1)) + minK;
if(proveri1x1(randRed, randKol)) { //call to function to check is field available
postavi1x1(randRed,randKol);//set
} else {
generisi1x1();//try again
}
}
function proveri1x1(randRed, randKol) {
for(var i=randRed-1; i<randRed+2; i++) {
for(var j=randKol-1; j<randKol+2; j++) {
if($(".red" + i + ".kolona" + j).hasClass('deoBroda')) {
return false;
}
}
}
return true;//<<<< note the position of this return statement
}

jquery / javascript - storing reference to array - not array values

I'm trying to combine a few similar functions into a single functions, which need to make calls to different arrays / variables, but I'm not quite getting it right. Here's my code:
var initialPreloadArray = ['scenes/icons_orange.png','scenes/icons_blue.png','scenes/icons_green.png','site/pedestal_h.png']; //These must be loaded before we advance from the intro screen
var initialPreloadCounter = 0;
var secondaryPreloadArray = ['site/restart-black.png','site/back_black.png','interludes/city.png','interludes/town.png','interludes/country.png']; //These must be loaded before we can advance from the initial decision scene
var secondaryPreloadCounter = 0;
var vehiclesPreloadArray = ['vehicles/vehicles.png','site/close.png']; //These must be loaded before we can display the vehicles
var vehiclesPreloadCounter = 0;
var arrName; //Store the variable name of the array for the stage of preloading we're in
var arrCounter; //Stores the variable name of the counter for the stage of preloading we're in
function setPreloadStage(preloadStage){
if (preloadStage == initial){
arrName = initialPreloadArray;
arrCounter = initialPreloadCounter;
} else if (preloadStage == 'secondary'){
arrName = secondaryPreloadArray;
arrCounter = secondaryPreloadCounter;
} else if (preloadStage == 'vehicles'){
arrName = vehiclesPreloadArray;
arrCounter = vehiclesPreloadCounter;
}
preloadImages(preloadStage);
}
//Recurse through scene xml and populate scene array
function preloadImages(preloadStage) {
console.log(arrName[arrCounter]);
var img = new Image();
img.src = 'images/' + arrName[arrCounter];
if(!img.complete){
jQuery(img).bind('error load onreadystatechange', imageComplete(preloadStage));
} else {
imageComplete(preloadStage);
}
//$j.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});
}
function imageComplete(preloadStage){
arrCounter++;
var preloadLength = arrName.length-1;
if (arrName && preloadLength && arrName[arrCounter]) {
if (preloadLength == arrCounter){
if (preloadStage == 'initial'){
initialImagesLoaded();
} else if (preloadStage == 'secondary'){
secondaryImagesLoaded();
} else if (preloadStage == 'vehicles'){
vehiclesLoaded();
}
}
preloadImages(preloadStage);
}
}
Anybody have an idea what I'm doing wrong?

Actually, here’s an even more obvious problem:
jQuery(img).bind('error load onreadystatechange', imageComplete(preloadStage));
You would have to do this:
jQuery(img).bind('error load onreadystatechange', function () {
imageComplete(preloadStage)
});

I suggest that you should use an array to manage state.
define an array holding your stages, like this:
var stages = [
{
label : 'initial',
imgs : [ 'img/whoobee.png', ...more here...],
doneSoFar: 0,
allDone: function(){}
},
{ label : 'secondary', imgs : .....},
{ label : 'whatever', imgs : ....}
];
NB: You will need to set the "allDone" fn for each stage appropriately.
Then a fn that kicks off one stage:
function kickoffPreloadOneStage(stage) {
console.log ("preloading stage " + stage.label);
preloadNextImage(stage);
}
function preloadNextImage(stage) {
var img = new Image();
img.src = 'images/' + stage.imgs[stage.doneSoFar];
if(!img.complete){
jQuery(img).bind('error load onreadystatechange', function() {
imageComplete(preloadStage);
});
}
else {
imageComplete(preloadStage);
}
}
function imageComplete(stage){
stage.doneSoFar++;
var preloadLength = stage.imgs.length-1;
if (stage.doneSoFar == preloadLength) {
stage.allDone(); // call the allDone function. may want to pass stage back
}
else {
preloadNextImage(stage);
}
}
To do all stages, use code like this:
var i;
for(i=0; i < stages.length; i++) {
kickoffPreloadOneStage(stages[i]);
}
You can also go OO, defining those functions as members of a Stage() class, but ....what I suggested is a reasonable simplification without getting too complicated.