Develop Reference

make pagination in papaya dicom viewer slices using javascript

i'm using papaya API from github
In this papaya dicom viewer, I want to integrate few things.
One is pagination. if i try to edit this API, I'm getting error
What i want:-
In the papaya viewer NEXT, PREV is working fine but I want to make
On click to FIRST and the LAST slice moving.
And also the pagination will be 1,2,3,4...If click ONE first slice
should appear.
Advance thanks

After download Papaya medical research image viewer, choose to work test folder file, So that you can understand how papaya Dicom viewer working.
Step 1:-
In the js folder open constants.js file and create the constants
var MOVE_TO_FIRST_SLICE = "move-to-first-slice",
MOVE_TO_LAST_SLICE = "move-to-last-slice";
PAGINATION_LIST = "pagination-list";
Step2:-
Now open the viewer.js, create this on click functions FIRST, LAST and 1,2,3... slices(data-value).
$(this.container.containerHtml.find("#" + MOVE_TO_FIRST_SLICE + this.container.containerIndex)).click(function () {
viewer.firstLastSlice(false);
});
$(this.container.containerHtml.find("#" + MOVE_TO_LAST_SLICE + this.container.containerIndex)).click(function () {
viewer.firstLastSlice(true)
});
$(this.container.containerHtml.find("." + PAGINATION_LIST + this.container.containerIndex)).click(function () {
var id = $(this).data('value');
viewer.pagination(id);
});
Step 3:-
And open the main.js and create the elements
papaya.Container.fillContainerHTML = function (containerHTML, isDefault, params, replaceIndex) {
containerHTML.append("<button type='button' id='"+ (MOVE_TO_FIRST_SLICE + index) + "' class='" + MOVE_TO_FIRST_SLICE + "'>First</button> ");
containerHTML.append("<button type='button' id='"+ (PAPAYA_CONTROL_MAIN_INCREMENT_BUTTON_CSS + index) + "' class='" + PAPAYA_CONTROL_MAIN_INCREMENT_BUTTON_CSS + "'><</button> ");
var max = 23;
var slice;
for(slice=1; slice<=max; slice++){
containerHTML.append("<button id='"+ (PAGINATION_LIST + index) +"' class='"+ (PAGINATION_LIST + index) + "' data-value='" + slice + "' OnClick(" + slice +") >" + slice + "</button>");
}
containerHTML.append("<button id='"+ (PAPAYA_CONTROL_MAIN_DECREMENT_BUTTON_CSS + index) + "' class='" + PAPAYA_CONTROL_MAIN_DECREMENT_BUTTON_CSS + "'>></button> ");
containerHTML.append("<button type='button' id='"+ (MOVE_TO_LAST_SLICE + index) + "' class='" + MOVE_TO_LAST_SLICE + "'>Last</button> ");
containerHTML.append("<button type='button' id='"+ (GET_MAX_VALUE + index) + "' class='" + GET_MAX_VALUE + index + "'>TesT</button> ");
}
Step4:-
The below functions are important to move slices viewer.js
//pagination 1,2,3
papaya.viewer.Viewer.prototype.pagination = function (id, paginationList) {
var max = this.volume.header.imageDimensions.zDim;
//console.log(id);
this.currentCoord.z = id;
this.gotoCoordinate(this.currentCoord);
};
// firstLastSlice
papaya.viewer.Viewer.prototype.firstLastSlice = function (flSlice, degree) {
var max = this.volume.header.imageDimensions.zDim;
if (degree === undefined) {
degree = 0;
}
if (flSlice) {
this.currentCoord.z = max;
} else {
this.currentCoord.z = 0;
}
this.gotoCoordinate(this.currentCoord);
};
Explanation
viewer.js calculated total slices this.volume.header.imageDimensions.zDim; and stored the total count in Max variable. If the this.currentCoord.z = max; It will go to last slice else, If the this.currentCoord.z = 0; It will move to first slice.
In pagination on click to passed data-value to viewer.js pagination function and if this.currentCoord.z = id(id <=> data-value ) It will move to particular slice.
After click using this function this.gotoCoordinate(this.currentCoord); the slice will move.

Dynamically change content when slider values are updated

I am trying to dynamically change my page content when the slider values are changed. At the moment the user sets the slider, clicks a button below and content is displayed. When the sliders are changed again, the user has to click the button again to reload the content (because each button is assigned to the goalkeeperstat function.
<a class="chosenstat" title="Saves" value="saves" name="save" onclick="goalkeeperstat(this);">Saves</a>
Rather than having to press the button again I would like the content to change as soon as the user drags the slider handles to their chosen values.
Below is a screenshot of my page.
http://i.imgur.com/eZq08sI.jpg
$(function initSlider() {
$("#slider1").slider({
range: true,
min: 0,
max: 100,
values: [0, 100],
slide: function update1 (event, ui) {
$(".amount").val(ui.values[0] + " - " + ui.values[1]);
slidervalueg1 = $('#g1').val(ui.values[0]);
slidervalueg2 = $('#g2').val(ui.values[1]);
}
});
$(".amount").val($("#slider1").slider("values", 0) +
" - " + $("#slider1").slider("values", 1));
});
function goalkeeperstat(element){
$('#result1').empty();
$('.amount').empty();
var category = element.getAttribute("value");
var categoryprompt = element.getAttribute("title");
var infocategory = element.getAttribute("name");
var position = 1;
var fr = $(myjson).filter(function (i,n){return n.element_type===position & n[category] >= slidervalueg1.val() && n[category] <= slidervalueg2.val() });
for (var i=0;i<fr.length;i++)
{
document.getElementById('result1').innerHTML += ("<div class='profile'><img src='https://platform-static-files.s3.amazonaws.com/premierleague/photos/players/110x140/p" + fr[i].code + ".png'/><div class='playerinfo'><p>Name: " + fr[i].first_name + " " + fr[i].second_name + "</p><p>Position: " + posdictionary[fr[i].element_type.toString()] + "</p><p class='teamname'>Team: " + dictionary[fr[i].team.toString()] + "</p><p>" + categoryprompt + ": <span class='categoryprompt'>" + fr[i][category] + "</span></p></div><div class='infobg'><p>Minutes: " + fr[i].minutes + "</p><p>Minutes per " + infocategory + ": " + parseFloat(Math.round((fr[i].minutes / fr[i][category]) * 100) / 100).toFixed(2) + "</p></div></div>");
}
}
EDIT: Tried using "stop" but it wouldn't work. Any other tips?

you can use event or method explicit :
$("#slider1").slider({
range: true,
min: 0,
max: 100,
values: [0, 100],
slide: function update1 (event, ui) {
$(".amount").val(ui.values[0] + " - " + ui.values[1]);
slidervalueg1 = $('#g1').val(ui.values[0]);
slidervalueg2 = $('#g2').val(ui.values[1]);
},
stop : function(event, ui){
console.log("slider changed");
// call your fucntion here
}
});

How to toggleClass with SignalR hub.server?

I am currently learning SignalR with .Net MVC and following a tutorial to work on a simple app. Right now it is working alright, but I am having trouble understanding some part and also if possible, want to sort of enhance it.
Plane Seats Tutorial link
Right now the app is working as when a user clicks on a seat, it reserves it. And there is no going back. I want to implement like a toggle, where if the user wants to change seat, he gets to unreserve his selected seat, and then be free to reserve another one. I am not being able to do it with myHub.server.selectSeat(userId, $(this).toggleClass(settings.selectingSeatCss));. Whenever I click on a seat, it gives me this error in the Dev tools
Uncaught: Converting circular structure to JSON
var settings = {
rows: 5,
cols: 15,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
$(function() {
//// Start the hub
window.hubReady = $.connection.hub.start();
});
$.connection.hub.start().done(function() {
// Call the server side function AFTER the connection has been started
myHub.server.createUser();
//invoke for the user data
myHub.server.populateSeatData();
});
// Seat selection
$('.' + settings.seatCss).click(function() {
if ($(this).hasClass(settings.selectedSeatCss)) {
alert('Sorry, this seat has been already reserved');
} else {
//$(this).toggleClass(settings.selectingSeatCss);
//myHub.server.selectSeat(userId, $(this).toggleClass(settings.selectingSeatCss));
myHub.server.selectSeat(userId, $(this)[0].innerText);
}
});
// Client method to broadcast the message
myHub.client.createUser = function(message) {
userId = message;
};
//get seats data
myHub.client.populateSeatData = function(message) {
var parsedSeatsData = JSON.parse(message);
$('li.seat').removeClass(settings.selectedSeatCss);
$.each(parsedSeatsData, function(index, value) {
$("a:contains('" + value.seatnumber + "')").parent("li").toggleClass(settings.selectedSeatCss);
});
};
// Client method to broadcast the message as user selected the seat
myHub.client.selectSeat = function(message) {
var parsedSeatData = JSON.parse(message);
$("a:contains('" + parsedSeatData.seatnumber + "')").parent("li").toggleClass(settings.selectedSeatCss);
};
And can anyone please briefly explain what is str.push doing in this block of code? What is it exactly pushing into the array?
var init = function(reservedSeat) {
var str = [],
seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 2; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' + 'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' + '<a title="' + seatNo + '">' + seatNo + '</a>' + '</li>');
}
}
$('#place').html(str.join(''));
};

I had to use a toggleSeat() function instead of just using toggleClass.
public void toggleSeat(int userId, int seatNumber)
{
PlaneSeatArrangment mySeat = allSeats.Where(s => s.SeatNumber == seatNumber).FirstOrDefault();
var retunData = JsonConvert.SerializeObject(mySeat);
if (mySeat != null && userId == mySeat.UserId)
..............
}

Sharepoint consult get only 100 objects

I have thes JSON, I need to get back 100+ or more items, but json only caught 100 objects :
Code:
function GalleryContentPopulate(url, listname, target) {
var eng = false;
var queryGallery = "$select=Title,Description,Enlace,EncodedAbsUrl,Categoria/Title&$expand=Categoria/Title";
if ((window.location.href.indexOf("lang=en") > 0)) {
queryGallery = "$select=TitleEnglish,DescriptionEnglish,Enlace,EncodedAbsUrl,Categoria/English&$expand=Categoria/English";
eng = true;
}
// Getting our list items
$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/items?" + queryGallery,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
completeGalleryContent(data, target, eng);
},
error: function (data) {
failureGalleryContent(data, target);
}
});
}
function completeGalleryContent(data, target, eng) {
var items = data.d.results;
console.log(items);
console.log(items);
var menu = "";
var cat = "";
for (var item in items) {
if(items[item].DescriptionEnglish==null)
items[item].DescriptionEnglish="";
if(items[item].Description==null)
items[item].Description="";
if(items[item].Categoria.results!= null && items[item].Categoria.results!= undefined && items[item].Categoria.results.length > 0){
cat =setCategories(eng,items[item].Categoria.results);
}
if (eng){
menu += "<div class='mega-entry " + cat + " cat-all' id='mega-entry-1' data-src='" + items[item].EncodedAbsUrl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].TitleEnglish + "</div><p>" + items[item].DescriptionEnglish + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class='fancybox' rel='group' href='" + items[item].EncodedAbsUrl + "' title='" + items[item].TitleEnglish + "'><div class='mega-view mega-red'></div></a></div></div>";
}else{
menu += "<div class='mega-entry "+ cat + " cat-all' id='mega-entry-1' data-src='" + items[item].EncodedAbsUrl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].Title + "</div><p>" + items[item].Description + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class='fancybox' rel='group' href='" + items[item].EncodedAbsUrl + "' title='"+ items[item].Title +"'><div class='mega-view mega-red'></div></a></div></div>";
}
}
$(target).html(menu);
var api = $(target).megafoliopro(
{
filterChangeAnimation: "pagebottom", // fade, rotate, scale, rotatescale, pagetop, pagebottom,pagemiddle
filterChangeSpeed: 400, // Speed of Transition
filterChangeRotate: 99, // If you ue scalerotate or rotate you can set the rotation (99 = random !!)
filterChangeScale: 0.6, // Scale Animation Endparameter
delay: 20,
defaultWidth: 980,
paddingHorizontal: 10,
paddingVertical: 10,
layoutarray: [9, 11, 5, 3, 7, 12, 4, 6, 13] // Defines the Layout Types which can be used in the Gallery. 2-9 or "random". You can define more than one, like {5,2,6,4} where the first items will be orderd in layout 5, the next comming items in layout 2, the next comming items in layout 6 etc... You can use also simple {9} then all item ordered in Layout 9 type.
});
//console.log("entra");
// FANCY BOX ( LIVE BOX) WITH MEDIA SUPPORT
jQuery(".fancybox").fancybox();
//console.log("sale");
// THE FILTER FUNCTION
$('.filter').click(function () {
$('.filter').each(function () { jQuery(this).removeClass("selected") });
api.megafilter(jQuery(this).data('category'));
$(this).addClass("selected");
});
var categorySelected = getParameterByName("Category");
$("div[data-category='"+categorySelected +"']").click();
So these only returns 100 objects, there are some restrictions of number of objects?
There is a photo of console google chrome inspector of console.log(items);

Implement function into js string variable

Here I have a code to show for on place a PHOTO,NAME,RATING in SIDE_bar
but I only get first object, so I dont know what is wrong with this code:
var rating="";
if (!!place.rating) ocene = raty({ score: place.rating, path: 'http://wbotelhos.com/raty/lib/img' });
var photo ="<img src='http://carsedia.com/code/voyage/icons/7.png'></img>";
if (!!place.photos) photo = '<img src='+place.photos[0].getUrl({ 'maxWidth': 50, 'maxHeight': 50 })+'></img>';
var htmlside = "<div class='element'>"+photo+"<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a></br>" + ocene + "</div>";
$(htmlside).appendTo('#side_bar');
}
Without rating and RATY plugin all works perfect.