I am trying to add a background image to this tile layout I have going on in angularjs.
javascript
angular.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('gridListDemoCtrl', function($scope) {
this.tiles = buildGridModel({
icon: "avatar:svg-",
title: "Svg-",
background: ""
});
function buildGridModel(tileTmpl) {
var it, results = [];
for (var j = 11; j > 0; j--) {
it = angular.extend({}, tileTmpl);
it.icon = it.icon + (j - 1);
it.title = it.title + (j - 1);
it.span = { row: 1, col: 1 };
switch (j - 1) {
case 0:
it.title = "My First Video";
break;
case 1:
it.background = "red";
it.title = "Yo";
break;
case 2:
it.background = "green";
break;
case 3:
it.background = "darkBlue";
break;
case 4:
it.background = "blue";
break;
case 5:
it.background = "yellow";
break;
case 6:
it.background = "pink";
break;
case 7:
it.background = "darkBlue";
break;
case 8:
it.background = "purple";
break;
case 9:
it.background = "deepBlue";
break;
case 10:
it.background = "lightPurple";
break;
case 11:
it.background = "yellow";
break;
}
results.push(it);
}
return results;
}
})
.config(function($mdIconProvider) {
$mdIconProvider.iconSet("avatar", 'icons/avatar-icons.svg', 128);
});
What should I do? Should I add/change a directive? I can post the html/css if needed. Thank you for your help.
Related
My code has to see if there is a ball in a mapPoint and then changing the color of the pixels where the ball is by the color of the ball.
Here is my code:
function UpdateColorInMapPoints(mapPointIndexs)
{
mapPointIndexs.forEach(mapPointIndex => {
var mapPointData=ballsMap[mapPointIndex]
var ballsAtTheMapPoint=ballsMap[mapPointIndex].balls;
var temperature;
if(ballsAtTheMapPoint.length>0)
{
temperature=balls[ballsAtTheMapPoint[ballsAtTheMapPoint.length-1]].temperature;
}else
{
temperature="none1";
}
var column,line=0;
while(line<scale)
{
column=0;
while(column<scale)
{
putTemperatureColorAt(temperature,(mapPointData.horizontalPosition*scale+column)*4+(mapPointData.verticalPosition*scale+line)*4*imgWidth*scale);
column++;
}
line++;
}
});
canvasContext.putImageData(ImgData,0,0);
}
function putTemperatureColorAt(temperature,index)
{
switch(Math.round(temperature))
{
case -5:
ImgData.data[index+0]=0;
ImgData.data[index+1]=255;
ImgData.data[index+2]=255;
ImgData.data[index+3]=255;
break;
case -4:
ImgData.data[index+0]=50;
ImgData.data[index+1]=255;
ImgData.data[index+2]=200;
ImgData.data[index+3]=255;
break;
case -3:
ImgData.data[index+0]=100;
ImgData.data[index+1]=255;
ImgData.data[index+2]=150;
ImgData.data[index+3]=255;
break;
case -2:
ImgData.data[index+0]=150;
ImgData.data[index+1]=255;
ImgData.data[index+2]=100;
ImgData.data[index+3]=255;
break;
case -1:
ImgData.data[index+0]=200;
ImgData.data[index+1]=255;
ImgData.data[index+2]=50;
ImgData.data[index+3]=255;
break;
case 0:
ImgData.data[index+0]=255;
ImgData.data[index+1]=255;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 1:
ImgData.data[index+0]=255;
ImgData.data[index+1]=200;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 2:
ImgData.data[index+0]=255;
ImgData.data[index+1]=150;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 3:
ImgData.data[index+0]=255;
ImgData.data[index+1]=100;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 4:
ImgData.data[index+0]=255;
ImgData.data[index+1]=50;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 5:
ImgData.data[index+0]=255;
ImgData.data[index+1]=0;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case "none1":
ImgData.data[index+0]=0;
ImgData.data[index+1]=0;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
default:
console.log("Impossible to find color:"+temperature);
}
}
when i run the code, console say : "Impossible to find color: none1"
this means that temperature="none1" but if temperature="none1" the outpout of switch shouldn't be default cause there is case "none1":
case "none1":
ImgData.data[index+0]=0;
ImgData.data[index+1]=0;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
I very don't understand wath's wrong, i hope my english wasn't too bad.
Change your switch to the following:
switch (isFinite(temperature) ? Math.round(temperature) : temperature) {
// ...
}
You want to avoid rounding on a non-finite value aka an invalid Number.
Example
const process = (temperature) => {
switch (isFinite(temperature) ? Math.round(temperature) : temperature) {
case 0: return 'Zero';
case 1: return 'One';
case 'none1': return 'None';
default: throw new Error(`Unknown temperature: ${temperature}`);
}
};
console.log(process(0.2)); // Zero
console.log(process(0.8)); // One
console.log(process('none1')); // None
console.log(process(undefined)); // throw Error
Check your switch statement.
console.log(Math.round("none1"))
How I get out from the loop if switch-case implemented (there is a switch inside the loop).
function playInbestPlace() {
console.log("hello from playInbestPlace ")
findEmptyarea();
for (var i = 0; i < indexOfEmpty.length; i++) {
var elem = indexOfEmpty[i];
switch (elem) {
case 0:
cells[elem].childNodes[0].append("o");
break;
case 2:
cells[elem].childNodes[0].append("o");
break;
case 4:
cells[elem].childNodes[0].append("o");
break;
case 6:
cells[elem].childNodes[0].append("o");
break;
case 8:
cells[elem].childNodes[0].append("o");
break;
}
}
}
I want it to get out if any case valid.
you can add a variable found and break out of the loop if it's true :
function playInbestPlace() {
console.log("hello from playInbestPlace ")
findEmptyarea();
for (var i = 0; i < indexOfEmpty.length; i++) {
var elem = indexOfEmpty[i];
var found = false; // initial found is false
switch (elem) {
case 0:
cells[elem].childNodes[0].append("o");
found = true;
break;
case 2:
cells[elem].childNodes[0].append("o");
found = true;
break;
case 4:
cells[elem].childNodes[0].append("o");
found = true;
break;
case 6:
cells[elem].childNodes[0].append("o");
found = true;
break;
case 8:
cells[elem].childNodes[0].append("o");
found = true;
break;
}
if(found) // break out if it's true
break;
}
}
You could use a flag variable to break from the loop when some condition is verified.
function playInbestPlace() {
console.log("hello from playInbestPlace ");
findEmptyarea();
var keepOnLooping = true;
for (var i = 0; keepOnLooping && i < indexOfEmpty.length; i++) {
if (elem % 2 === 0) {
cells[elem].childNodes[0].append("o");
keepOnLooping = false;
}
}
}
I've also added epascarello optimization in my answer.
https://jsfiddle.net/b3nyzp9n/
When probabilityAPI.card() is called, it returns ' of '
It seems like this.apicardrankvar doesn't exist at all.
So when I defined apicardrankvar and apicardsuitvar, it returned "undefined of undefined".
I am trying to get it to say a card name, such as "3 of Diamonds"
var probabilityAPI = {
coin: function() {
if(Math.random() >= 0.5) {
return "Heads";
} else if(Math.random() > 0.5){
return "Tails";
}},
dice: function() {
return Math.floor(Math.random() * (Math.floor(7) - Math.ceil(1))) + Math.ceil(1);
},
spinner: function() {
return Math.floor(Math.random() * (Math.floor(9) - Math.ceil(0))) + Math.ceil(1);
},
apimarblevar: Math.floor(Math.random() * (Math.floor(6) - Math.ceil(1))) + Math.ceil(1),
marble: function(apimarblevar) {
switch(this.apimarblevar)
{
case 1:
return "A"
break;
case 2:
return "B"
break;
case 3:
return "C"
break;
case 4:
return "D"
break;
case 5:
return "E"
break;
}
},
apidreidelvar: Math.floor(Math.random() * (Math.floor(5) - Math.ceil(1))) + Math.ceil(1),
dreidel: function() {
switch(this.apidreidelvar) {
case 1:
return "Nun"
break;
case 2:
return "Gimel"
break;
case 3:
return "He"
break;
case 4:
return "Shin"
break;
}
},
apicardsuitvar: "",
apicardrankvar: "",
apicardrankrandom: Math.floor(Math.random() * (Math.floor(14) - Math.ceil(1))) + Math.ceil(1),
apicardsuit: function(){
switch(this.apidreidelvar) {
case 1:
this.apicardsuitvar = "Clubs"
break;
case 2:
this.apicardsuitvar = "Diamonds"
break;
case 3:
this.apicardsuitvar = "Hearts"
break;
case 4:
this.apicardsuitvar = "Spades"
break;
}
},
apicardrank: function() {
switch(this.apicardrankrandom) {
case 1:
this.apicardrankvar = "Ace"
break;
case 2:
this.apicardrankvar = "2"
break;
case 3:
this.apicardrankvar = "3"
break;
case 4:
this.apicardrankvar = "4"
break;
case 5:
this.apicardrankvar = "5"
break;
case 6:
this.apicardrankvar = "6"
break;
case 7:
this.apicardrankvar = "7"
break;
case 8:
this.apicardrankvar = "8"
break;
case 9:
this.apicardrankvar = "9"
break;
case 10:
this.apicardrankvar = "10"
break;
case 11:
this.apicardrankvar = "Jack"
break;
case 12:
this.apicardrankvar = "Queen"
break;
case 13:
this.apicardrankvar = "King"
break;
}
},
card: function() {
return this.apicardrankvar + " of " + this.apicardsuitvar
}
};
probabilityAPI.card();
Please tell me how I can do with two parameters and simplify this code to a normal state. Thank you! This logic is very necessary for me, I hope for your indulgence.
var treshhold_two = 0;
function Test(attack, ratio) {
switch (attack) {
case 0,01:
switch (ratio) {
case 2:
treshhold = 2798,6;
break;
case 4:
treshhold = 3678,16;
break;
case 6:
treshhold = 5757,12;
break;
}
break;
case >0,01:
switch (attack, ratio) {
case 0,03,2:
treshhold = -5,75712;
break;
case 0,03,4:
treshhold = -5,75712 * 1,1;
break; // -45%
case 0,03,6:
treshhold = -5,75712 * 0,96;
break; // -52%, and etc.
...
}
break;
}
}
Try:
var treshhold_two = 0;
function Test(attack, ratio) {
if(attack == 0,01) {
switch (ratio) {
case 2:
treshhold = 2798,6;
break;
case 4:
treshhold = 3678,16;
break;
case 6:
treshhold = 5757,12;
break;
}
}
else {
switch (attack) {
case 0,03:
if(ratio==2) treshhold = -5,75712;
if(ratio==4) treshhold = -5,75712 * 1,1;
if(ratio==6) treshhold = -5,75712 * 0,96;
break;
...
}
}
}
//option:1
var treshhold = 0;
function Test(attack, ratio) {
switch (attack) {
case 0,01:
if(ratio==2) treshhold = 2798,6;
if(ratio==4) treshhold = 3678,16;
if(ratio==6) treshhold = 5757,12;
break;
case 0,03:
if(ratio==2) treshhold = -5,75712;
if(ratio==4) treshhold = -5,75712 * 1,1;
if(ratio==6) treshhold = -5,75712 * 0,96;
break;
// ...
}
}
}
//option:2
var treshhold = 0;
function Test(attack, ratio) {
switch (attack) {
case 0,01:
switch (ratio) {
case 2: treshhold = 2798,6; break;
case 4: treshhold = 3678,16; break;
case 6: treshhold = 5757,12; break;
}
case 0,03:
switch (ratio) {
case 2: treshhold = -5,75712; break;
case 4: treshhold = -5,75712 * 1,1; break;
case 6: treshhold = -5,75712 * 0,96;; break;
}
// ...
}
}
//option:3
var treshhold = 1223456;
function Test(ratio, attack) {
switch (ratio) {
case 2:
switch (attack) {
case 0,01: ... break;
case 0,03: ... break;
case 0,1: ... break;
}
break;
case 4:
switch (attack) {
case 0,01: ... break;
case 0,03: ... break;
case 0,1: ... break;
}
break;
case 6:
switch (attack) {
case 0,01: ... break;
case 0,03: ... break;
case 0,1: ... break;
}
break;
}
// option?
var treshhold_two = 0;
function Test(attack, ratio) {
if (attack == 0.01) {
switch (ratio) {
case 2:
treshhold = 2798.6;
break;
case 4:
treshhold = 3678.16;
break;
case 6:
treshhold = 5757.12;
break;
}
}
else if (attack > 0.01) {
switch (attack, ratio) {
case 0,03,2: // what does it mean ?
treshhold = -5.75712;
break;
case 0,03,4: // what does it mean ?
treshhold = -5.75712 * 1.1;
break; // -45%
case 0,03,6: // what does it mean ?
treshhold = -5.75712 * 0.96;
break; // -52%, and etc.
...
}
}
}
I'm trying to draw some text in an array of colors to the screen. However, when using jQuery's $.append() with the <span> tag, it stops my loop and does not color anything. This is what it looks like:
var pixelsjson = '[{"red":232,"green":255,"blue":255},{"red":230,"green":255,"blue":255},{"red":229,"green":255,"blue":255},{"red":228,"green":255,"blue":255},{"red":227,"green":255,"blue":255},{"red":226,"green":255,"blue":255},{"red":224,"green":255,"blue":255},{"red":223,"green":255,"blue":255},{"red":222,"green":255,"blue":255},{"red":221,"green":254,"blue":255},{"red":220,"green":254,"blue":255},{"red":219,"green":254,"blue":255},{"red":217,"green":253,"blue":255},{"red":215,"green":253,"blue":255},{"red":213,"green":251,"blue":255},{"red":210,"green":250,"blue":255},{"red":207,"green":248,"blue":255},{"red":203,"green":246,"blue":255},{"red":200,"green":244,"blue":255},{"red":196,"green":242,"blue":255},{"red":96,"green":247,"blue":154},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54}]]';
var pixels = JSON.parse(pixelsjson);
var imgheight = 80;
var imgwidth = 106;
$(document).ready(function () {
var drawcount = 0;
for (var i = 0; i < imgheight; i++) {
$("#image").append("<br>");
for (var j = 0; j < imgwidth; j++) {
$("#image").append("<span style='color: rgba(" + pixels[i][j].red + " , " + pixels[i][j].green + " , " + pixels[i][j].blue + ", 1);'>");
switch (drawcount % 18) {
case 0:
$("#image").append("/");
break;
case 2:
$("#image").append("-");
break;
case 3:
$("#image").append("/");
break;
case 4:
$("#image").append("-");
break;
case 5:
$("#image").append("/");
break;
case 6:
$("#image").append("-");
break;
case 7:
$("#image").append("(");
break;
case 8:
$("#image").append("8");
break;
case 9:
$("#image").append("8");
break;
case 10:
$("#image").append(")");
break;
case 11:
$("#image").append("-");
break;
case 12:
$("#image").append("\\");
break;
case 13:
$("#image").append("-");
break;
case 14:
$("#image").append("\\");
break;
case 15:
$("#image").append("-");
break;
case 16:
$("#image").append("\\");
break;
case 17:
$("#image").append(" ");
break;
}
$("#image").append("</span>");
drawcount++;
}
}
});
This is the html:
<div id="image" style="font-family:Courier New, Courier, monospace; font-size: 10px;"></div>
I updated the script to:
$(document).ready(function () {
var drawcount = 0;
for (var i = 0; i < imgheight; i++) {
$("#image").append("<br>");
for (var j = 0; j < imgwidth; j++) {
$("#image").append("<span style='position:relative; color: rgba(" + pixels[i][j].red + " , " + pixels[i][j].green + " , " + pixels[i][j].blue + ", 1);'></span>");
switch (drawcount % 18) {
case 0:
$("#image span").append("/");
break;
case 2:
$("#image span").append("-");
break;
case 3:
$("#image span").append("/");
break;
case 4:
$("#image span").append("-");
break;
case 5:
$("#image span").append("/");
break;
case 6:
$("#image span").append("-");
break;
case 7:
$("#image span").append("(");
break;
case 8:
$("#image span").append("8");
break;
case 9:
$("#image span").append("8");
break;
case 10:
$("#image span").append(")");
break;
case 11:
$("#image span").append("-");
break;
case 12:
$("#image span").append("\\");
break;
case 13:
$("#image span").append("-");
break;
case 14:
$("#image span").append("\\");
break;
case 15:
$("#image span").append("-");
break;
case 16:
$("#image span").append("\\");
break;
case 17:
$("#image span").append(" ");
break;
}
//$("#image").append("</span>");
drawcount++;
}
}
});
However, now the <br> tag isn't working (as before). However, the colors are working.