I created a custom directive, chess-board, showing a chess position. With Ionic framework, I generate a list of chess-board, and would like to thumbnail chess-board on the left. Though I followed documentation, but using svg instead, as my directive generate svg, I can't get the desired layout.
Here is my JsBin (don't worry for missing pictures).
Here is index.html :
<!DOCTYPE html>
<html>
<head>
<script src="//code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.min.js"></script>
<link href="//code.ionicframework.com/1.0.0-beta.13/css/ionic.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"> </script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="static-board">
<ion-pane>
<ion-header-bar class="bar-dark">
<h1 class="title">Chess Positions Archiver</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a class="item item-thumbnail-left" href="#">
<chess-board cells-size="30" fen="3rr1k1/pb5p/1qp3pB/1pn1Q3/8/7P/PPP3P1/R3KR2 b - - 0 1" show-coords> </chess-board>
<h3>Exercise 1</h3>
</a>
<a class="item item-thumbnail-left" href="#">
<chess-board cells-size="30" show-coords></chess-board>
<h3>Exercise 2</h3>
</a>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Here is my script
(function(){
var chessPieces = {
'P': 'wp',
'N': 'wn',
'B': 'wb',
'R': 'wr',
'Q': 'wq',
'K': 'wk',
'b': 'bb',
'p': 'bp',
'n': 'bn',
'r': 'br',
'q': 'bq',
'k': 'bk'
};
angular.module('static-board', ['ionic'])
.factory('chessPictures', [function(){
return {
getPicture: function(pieceFen){
return chessPieces[pieceFen];
}
}
}])
.directive('chessBoard', [function(){
function getBoardHtml(cellsSize, positionFen, showCoords){
// taken from http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format
function sprintf() {
var args = arguments,
string = args[0],
i = 1;
return string.replace(/%((%)|s|d)/g, function (m) {
// m is the matched format, e.g. %s, %d
var val = null;
if (m[2]) {
val = m[2];
} else {
val = args[i];
// A switch statement so that the formatter can be extended. Default is %s
switch (m) {
case '%d':
val = parseFloat(val);
if (isNaN(val)) {
val = 0;
}
break;
}
i++;
}
return val;
});
}
function fenToPosition(){
function getSingleLine(lineFen){
var result = [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '];
var column = 0;
for (var index in lineFen){
var currElem = lineFen[index];
var isDigit = !isNaN(parseInt(currElem));
if (isDigit){
column += parseInt(currElem);
}
else {
result[column] = currElem;
column++;
}
}
return result;
}
var result = [];
var parts = positionFen.split(" ")[0].split("/");
for (var partIndex in parts){
var currPart = parts[partIndex];
result.push(getSingleLine(currPart));
}
return result;
}
function getBackground(size){
return sprintf("<rect x='0' y='0' width='%d' height='%d' fill='#BAA' />", size, size);
};
function getCells(){
function getSingleCell(cellX, cellY){
var x = cellX*cellsSize + cellsSize/2;
var y = cellY*cellsSize + cellsSize/2;
var color = (cellX+cellY)%2 === 0 ? "#E9E637" : "#7C4116";
return sprintf("<rect x='%d' y='%d' width='%d', height='%d' fill='%s' />",
x,y, cellsSize, cellsSize, color);
}
var result = "";
for (var line = 0; line < 8; line++){
for (var col = 0; col < 8; col++){
result += getSingleCell(col, line)+'\n';
}
}
return result;
}
function getPieces(positionPieces){
function getSinglePiece(cellX, cellY){
var x = cellX*cellsSize + cellsSize/2;
var y = cellY*cellsSize + cellsSize/2;
var pieceFen = positionPieces[cellY][cellX];
var piecePictureRef = chessPieces[pieceFen];
var path = sprintf("../img/chess_pieces/%s.svg", piecePictureRef);
return piecePictureRef ? sprintf("<image x='%d' y='%d' width='%d' height='%d' xlink:href='%s' />",
x, y, cellsSize, cellsSize, path
) : undefined;
}
var result = "";
for (var rank = 0; rank < 8; rank++){
for (var file = 0; file < 8; file++){
var line = getSinglePiece(file, rank);
if (line) {
result += line+'\n';
}
}
}
return result;
}
function getPlayerTurn(){
var turnStr = positionFen.split(" ")[1];
var color = turnStr === "w" ? "#FFF" : "#000";
var location = parseInt(8.5*cellsSize);
var size = cellsSize / 2;
return sprintf("<rect x='%d' y='%d' width='%d' height='%d' fill='%s'/>",
location, location, size, size, color);
}
function getCoordinates(){
result = "";
var files = "ABCDEFGH";
for (var index in files){
var currFile = files[index];
result += sprintf("<text x='%d' y='%d' fill='#000' font-size='%d'>%s</text>",
parseInt(cellsSize*index + cellsSize*.8), parseInt(cellsSize*.45),
parseInt(cellsSize*.4), currFile);
result += sprintf("<text x='%d' y='%d' fill='#000' font-size='%d'>%s</text>",
parseInt(cellsSize*index + cellsSize*.8), parseInt(cellsSize*8.9),
parseInt(cellsSize*.4), currFile);
}
var ranks = "87654321";
for (var index in ranks){
var currRank = ranks[index];
result += sprintf("<text x='%d' y='%d' fill='#000' font-size='%d'>%s</text>",
parseInt(cellsSize*.1), parseInt(cellsSize*1.25+cellsSize*index),
parseInt(cellsSize*.4), currRank);
result += sprintf("<text x='%d' y='%d' fill='#000' font-size='%d'>%s</text>",
parseInt(cellsSize*8.7), parseInt(cellsSize*1.25+cellsSize*index),
parseInt(cellsSize*.4), currRank);
}
return result;
}
var size = 9*cellsSize;
var result = sprintf("<svg width='%d' height='%d'>\n%s\n%s\n%s\n%s\n%s\n</svg>",
size, size, getBackground(size), getCells(), getPieces(fenToPosition()),
getPlayerTurn(), showCoords ? getCoordinates() : "");
return result;
}
return {
restrict: 'E',
link: {
post : function(scope, element, attrs){
var cellsSize = attrs.cellsSize || 20;
var positionFen = attrs.fen || 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w';
var showCoords = attrs.showCoords !== undefined ? true : false;
var newElem = angular.element(getBoardHtml(cellsSize, positionFen, showCoords));
element.replaceWith(newElem);
}
}
}
}])
})();
So what's wrong ?
Is that the fact that I am using an <svg> instead of an <img> ?
Or is it something else ?
you will need to do several things:
wrap svg into a div, and give it class item-image
<div class="item-image">
<chess-board cells-size="30"></chess-board>
</div>
then, when you create the SVG, you will need to set properties like this:
width="100%" height="100%" viewBox="0,0,270,270"
width and hight will tell it how to behave inside it's container, while viewBox property sets the size of canvas, on which the image will be drawn.
this line
var result = sprintf("<svg width='%d' height='%d'>\n%s\n%s\n%s\n%s\n%s\n</svg>", size, size, getBackground(size), getCells(), getPieces(fenToPosition()), getPlayerTurn(), showCoords ? getCoordinates() : "");
should look like this
var result = sprintf("<svg width='100%%' height='100%%' viewBox='0,0,%d,%d'>\n%s\n%s\n%s\n%s\n%s\n</svg>", size, size, getBackground(size), getCells(), getPieces(fenToPosition()), getPlayerTurn(), showCoords ? getCoordinates() : "");
You can see it here http://jsbin.com/basimodufa/1/edit?html,js,output
there is a good resource on SVG sizing/containing here
Related
I'm learning angularjs and got an exercise that wants me to Use angular filter to show a title in the following format :
first letter of each word upper cased and each other letter lower cased also
remove any non-English letters from the title. For example:
A title with the name
“##THIS is a Title!!”
should be changed to
“This Is A Title”
I'm getting each title from an array of objects and present them like so.
<div ng-repeat="obj in objects">
<h3 class="panel-title">{{obj.Title}}</h3>
</div>
i understand that filter receives an array and filters through it . but this requires me to filter the string.
been searching for a while, how can i do this?
please refer below fiddle
http://jsfiddle.net/HB7LU/28315/
<div ng-controller="MyCtrl">
Hello, {{ name | ordinal|capitalize }}
</div>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Super hero!!12##3';
}
myApp.filter('ordinal', function() {
// Create the return function
// set the required parameter name to **number**
return function(strTitle) {
// Ensure that the passed in data is a number
// If the data is not a number or is less than one (thus not having a cardinal value) return it unmodified.
strTitle=strTitle.replace(/[^a-zA-Z ]/g, "")
return strTitle;
}
});
myApp.filter('capitalize', function() {
return function(input){
if(input.indexOf(' ') !== -1){
var inputPieces,
i;
input = input.toLowerCase();
inputPieces = input.split(' ');
for(i = 0; i < inputPieces.length; i++){
inputPieces[i] = capitalizeString(inputPieces[i]);
}
return inputPieces.toString().replace(/,/g, ' ');
}
else {
input = input.toLowerCase();
return capitalizeString(input);
}
function capitalizeString(inputString){
return inputString.substring(0,1).toUpperCase() + inputString.substring(1);
}
};
});
angular.module('app', []).filter('myFilter', function(){
return function(input){
if(!input)
return;
var out = '';
var english = /^[A-Za-z0-9 ]*$/;
for(var letter of input)
if(english.test(letter))
out += letter;
var result = '';
for(var i = 0; i < out.length; i++)
result += out[i][(i === 0 || out[i-1] == ' ') ? 'toUpperCase' : 'toLowerCase']();
return result;
}
})
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<body ng-app="app">
<input ng-init='text="##THIS is a Title!!"' type='text' ng-model='text'>
<p>{{text | myFilter}}</p>
</body>
I'm a fresher for ionic and angularjs, I'm developing a tracking app, in which I am not able to calculate the tracked distance and store it in database.
here is my index.html
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="css/ionic.app.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHe3efHByU2G1ECBpenC8ZpiXlpO7GFXA "></script>
</head>
<body ng-controller="MapCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Maps</h1>
</ion-header-bar>
<ion-content ng-init="first(User)">
<div class="padding">
<button class="button button-large button-calm" ng-click="starttrack(User)">Start</button>
<button class="button button-large button-assertive" ng-click="endtrack(User)">End</button>
</div>
<div>coordinates = {{getText(User)}}</div>
<button class="button button-small button-balanced" ng-click="dist()">Show distance</button>
</ion-content>
</ion-pane>
</body>
</html>
here is my app.js
.factory('AllServices', function($http) {
return {
drivertrackFunction: function(User) {
var data = { coordinates: User.coordinates,
dis: User.dis};
var link = 'http://localhost/track.php';
return $http.post(link,data);
}
};
})
.controller('MapCtrl', function($scope, filterFilter, $state, $cordovaGeolocation, $interval, AllServices) {
$scope.User = {};
$scope.User.mysrclat= 0;
$scope.User.mysrclong = 0;
$scope.User.timer = "";
$scope.addstring=[];
$scope.addstring1 = [];
$scope.User.string1="";
$scope.User.coordinates=undefined;
$scope.User.string3="";
$scope.lat1 = "";
$scope.lon1 = "";
$scope.lat2 = "";
$scope.lon2 = "";
$scope.User.d = "";
$scope.User.totalDis="";
$scope.originals = [];
$scope.User.temp = 0;
$scope.points = "";
$scope.User.pLen = "";
$scope.User.len = "";
$scope.User.origin1 = "";
$scope.User.destinationB = "";
$scope.User.geocoder = "";
$scope.User.service = "";
$scope.User.originList ="";
$scope.User.destinationList = "";
$scope.User.outputDiv = "";
$scope.User.TotDis = "";
$scope.User.TotDur = "";
$scope.User.dis = 0;
$scope.first = function(User) {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
$scope.User.mysrclat = position.coords.latitude;
$scope.User.mysrclong = position.coords.longitude;
$scope.User.string1 = $scope.User.mysrclat + "," + $scope.User.mysrclong;
console.log($scope.User.mysrclat);
});
}
};
$scope.track = function(User) {
$scope.first(User);
};
function distance(User) {
var R = 6371; // km (change this constant to get miles)
var dLat = ($scope.lat2-$scope.lat1) * Math.PI / 180;
var dLon = ($scope.lon2-$scope.lon1) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos($scope.lat1 * Math.PI / 180 ) * Math.cos($scope.lat2 * Math.PI / 180 ) * Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
$scope.User.d = R * c;
if ($scope.User.d>1) {
return Math.round($scope.d)+"km";
}
else {
if ($scope.User.d<=1) {
return Math.round($scope.d*1000)+"m";
}
}
return $scope.User.d;
};
$scope.starttrack = function(User) {
$scope.track(User);
$scope.addstring.push($scope.User.string1);
$scope.addstring1.push($scope.User.string1);
var values = $scope.User.string1.split(",");
$scope.lat1 = $scope.User.mysrclat;
$scope.lon1 = $scope.User.mysrclong;
$scope.lat2 = values[0];
$scope.lon2 = values[1];
distance();
$scope.User.timer = $interval(function() {
if($scope.addstring != "") {
$scope.track(User);
$scope.lat1 = $scope.lat2;
$scope.lon1 = $scope.lon2;
$scope.lat2 = $scope.User.mysrclat;
$scope.lon2 = $scope.User.mysrclong;
distance();
console.log($scope.User.d);
$scope.User.dis = $scope.User.dis + $scope.User.d;
$scope.addstring.push("|" + $scope.User.string1);
$scope.addstring1.push($scope.User.string1);
}
}, 10000);
};
$scope.getText = function(User){
return $scope.addstring.join("");
};
$scope.endtrack = function(User, d) {
if(angular.isDefined($scope.User.timer)) {
$interval.cancel($scope.User.timer);
$scope.User.timer = undefined;
$scope.User.string2 = $scope.addstring[0];
for(var i=1; i<($scope.addstring).length; i++) {
$scope.User.string2 = $scope.User.string2 + $scope.addstring[i];
}
$scope.User.coordinates = $scope.User.string2;
$scope.User.dis = $scope.User.dis + " KM";
console.log($scope.User.dis);
AllServices.drivertrackFunction(User)
.then(function(response) {
})
.catch(function(error) {
console.log(error);
});
}
};
$scope.dist = function() {
distance();
console.log($scope.User.d, "Km");
};
})
and this is my php code
<?php
include("connection.php");
$data = json_decode(file_get_contents("php://input"));
$coordinates = $data->coordinates;
$dis = $data->dis;
$q = "INSERT INTO track (Coordinates, Distance) VALUES (:coordinates, :dis)";
$query = $db->prepare($q);
$execute = $query->execute(array(
":coordinates" => $coordinates,
":dis" => $dis
));
echo json_encode($data);
?>
app.controller('reviewCtrl',function($scope,$http) {
$http.get('http://~~~~~~~~~~~~~')
.success(function(data) {
$scope.reviewInfoList = data;
var cnt = 5;
var ind = 0;
$scope.reviewInfo = $scope.reviewInfoList.slice(0,cnt);
$scope.resetList = function(){
ind = 0
$scope.reviewInfo = $scope.reviewInfoList.slice(0,cnt);
};
$scope.loadMore = function() {
ind = ind + cnt
var r = cnt
if (ind + cnt > $scope.reviewInfoList.length) {
r = $scope.reviewInfoList.length - ind
}
$scope.reviewInfo = $scope.reviewInfo.concat($scope.reviewInfoList.slice(ind, r + ind))
}
});
This code is use in My project AngularJS.
I want add fadeIn effect at loadmore function
How to do that
some body help..please
You need to include the ng-animate script, and then when you create your module, include ngAnimate as a dependency. Then the rest is just css. Take a look at this snippet to see it in action.
angular.module('app', ['ngAnimate']).controller('reviewCtrl', function($scope, $http) {
$scope.reviewInfoList = [];
$scope.reviewInfo = [];
var cnt = 2;
var ind = 0;
//for the sake of this demo, generate some dummy data
for (var i = 0; i < 1000; i++) {
$scope.reviewInfoList.push(i);
}
$scope.loadMore = function() {
ind = ind + cnt
var r = cnt
if (ind + cnt > $scope.reviewInfoList.length) {
r = $scope.reviewInfoList.length - ind
}
$scope.reviewInfo = $scope.reviewInfo.concat($scope.reviewInfoList.slice(ind, r + ind))
}
//load the first bit right away
$scope.reviewInfo = $scope.reviewInfoList.slice(0, cnt);
$scope.resetList = function() {
ind = 0
$scope.reviewInfo = $scope.reviewInfoList.slice(0, cnt);
};
});
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition: 0.5s linear all;
opacity: 0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<div ng-app="app" ng-controller="reviewCtrl">
<button ng-click="loadMore()">Load more</button>
<ul>
<li class="fade" ng-repeat="review in reviewInfo">{{review}}</li>
</ul>
</div>
I am trying to use the "minisCtrlOverall" controller in my ng-include file, but none of the functionality in my controller works for the included file unless I put ng-controller in the actual overall.html file. What I am trying to do is access the "ring-fill" class that is in my overall.html file from my controller. I want to add the class "active" too all "ring-fills" but its not working. I'm guessing this isn't working because the included files comes after the controller runs? Anyone know how I can fix this?
Controller:
angular.module('ciscoImaDashboardAdmin',[])
.controller('minisCtrlOverall', function ($scope, $rootScope, dummyData) {
$scope.overallOn = true;
$scope.switchView = function(element) {
var value = element.target.attributes['value'].value;
if(value == "overall") {
$scope.overallOn = true;
$scope.swimlaneOn = false;
}
else if(value == "swimlane") {
$scope.swimlaneOn = true;
$scope.overallOn = false;
}
};
var totalRings = 9;
var maxScore = 10;
var data_overall = {
average_score: 6
}
var ringToHighlight = Math.floor((data_overall.average_score/maxScore)*totalRings); //round down
var i = 0;
var rings = [];
var ringClass = 'path.ring-fill:not(.ring-border)';
$(ringClass).each(function(){
rings.push($(this)[0]);
});
while( i < ringToHighlight) {
fillPath(i);
i = i + 1;
}
function fillPath(i) {
if(i < ringToHighlight) {
var selectedRing = $(rings[i]);
selectedRing.attr("class", "ring-fill active");
}
}
});
HTML:
<div class="row mini" ng-show="overallOn" ng-controller="minisCtrlOverall">
<div class="col-sm-3">
<div ng-include="'svgs/overall.html'"></div>
</div>
</div>
I've coded a custom directive in angularJs, in order to show a chess board. But though I include it two times into the html page, only one is rendered.
Here is my JS Bin attempt
My index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="static-board">
<chess-board /></br>
<chess-board cells-size="30"/>
</body>
</html>
Here is my script :
(function(){
angular.module('static-board', [])
.directive('chessBoard', [function(){
function getBoardHtml(cellsSize){
// taken from http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format
function sprintf() {
var args = arguments,
string = args[0],
i = 1;
return string.replace(/%((%)|s|d)/g, function (m) {
// m is the matched format, e.g. %s, %d
var val = null;
if (m[2]) {
val = m[2];
} else {
val = args[i];
// A switch statement so that the formatter can be extended. Default is %s
switch (m) {
case '%d':
val = parseFloat(val);
if (isNaN(val)) {
val = 0;
}
break;
}
i++;
}
return val;
});
}
function getBackground(size){
return sprintf("<rect x='0' y='0' width='%d' height='%d' fill='#BAA' />", size, size);
}
function getCells(cellsSize){
function getSingleCell(cellX, cellY){
var x = cellX*cellsSize + cellsSize/2;
var y = cellY*cellsSize + cellsSize/2;
var color = (cellX+cellY)%2 === 0 ? "#E9E637" : "#7C4116";
return sprintf("<rect x='%d' y='%d' width='%d', height='%d' fill='%s' />",
x,y, cellsSize, cellsSize, color);
}
var result = "";
for (var line = 0; line < 8; line++){
for (var col = 0; col < 8; col++){
result += getSingleCell(col, line)+'\n';
}
}
return result;
}
var size = 9*cellsSize;
var result = sprintf("<svg width='%d' height='%d'>\n%s\n%s\n</svg>",
size, size, getBackground(size), getCells(cellsSize));
return result;
}
return {
restrict: 'E',
link: {
post : function(scope, element, attrs){
var cellsSize = attrs.cellsSize || 20;
var newElem = angular.element(getBoardHtml(cellsSize));
element.replaceWith(newElem);
}
}
};
}]);
})();
I tried with isolated scope, but it does not change anything.
You need to explicitly close your custom chess-board elements.
So change this:
<chess-board /><br/>
<chess-board cells-size="30" />
to this:
<chess-board></chess-board><br/>
<chess-board cells-size="30"></chess-board>
This is based on a misconception that HTML5 self-closing tags work the same as XML/XHTML (I thought so too - I only found out about this in answering your question!).
Have a look at these two links for more information:
http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/
https://stackoverflow.com/a/3558200/81723
To summarise the issue, in HTML5:
<chess-board /> == <chess-board>
<chess-board /> != <chess-board></chess-board>
In your specific case, because the tags weren't closed the second directive received the same element as the first directive so you only saw one chessboard.