Closed RFSH closed 3 years ago
carouselSize
of preview available, in this case should we shrink the carousel and center align it?About the use of whitespace in carousel and position of next/previous buttons:
Based on this, there should be a JS code to deal with how we want to position the prev/next button and images. Their position should be set on load and only change when the container resizes. For the same sort of tasks in Chaise we're using this library. This library would allow you to add callbacks that would be called when the size of a container changes.
The initial position should be center aligned with enough space between the buttons and images. The previous button should be disabled and Chaise would let OSD viewer know whether next button is enabled or not.
When the page changes we don't need to move the next/previous buttons. That's because changing the page would result in the same number of images, or less. We just have to position the images in between the buttons. If there are less images than the page size (which means the last page), we would disable the next button. The fact that images are left aligned and there is more space between the images and the next button should be OK and actually an indicator that this is the end of the list.
min-width
of the carousel? i.e. after the width of the parent container is reduced to such an extent we will need to add scroll into the carousel.W = width of the entire preview container minus the size of the arrows, i.e. width of the carousel
hc = 92px (height of the image inside the preview container) mc = margin of the container pc = padding of container
hi = height of the image wi = width of the image
function getPreviewCount (hc, wc, hi, wi)
widthOfImageInContainer = wi/hc --------------------------- w1
totalWidthOfSinglePreview = w1 + (2 * pc) + (2 * mc) ------ w2
numberOfImagesThatCanFit = int(W/w2)
return numberOfImagesThatCanFit
(2 * pc) + (2 * mc)
for proper spacing) to it.W
by the width of a single preview container.Since the count is an int, it means that numberOfImagesThatCanFit
* totalWidthOfSinglePreview
!= W
. Therefore the spacing between the images would have to be changed, i.e. the margin (left & right) would have to be increased to uniformly distribute them in the carousel.
Everytime the window will be resized the value of W
will change and this function will be called again, to get the new value.
I created a new branch in chaise with the same name as the branch that you created in osd viewer (multi-z
) that includes the changes required to send the request for the multi-z support. I also had to push some changes to osd viewer to make this work. You now should do the osd viewer part of these changes. you can test it here:
https://dev.rebuildingakidney.org/~ashafaei/chaise/viewer/#2/Gene_Expression:Image/id=16-2GJM
For now I’m printing a lot of stuff to console to make sure everything is working properly. you should see a
updating the z-plane-list with the following data:
message that is being printed in the z-plane-list.js file in the updateList function. This is the function that chaise is calling to update the list on load as well as page change. You should work on the rest of changes in osd viewer to make sure the returned data is properly displayed. If I want to give you a list of actions that you should take (in order):
totalCount
and mainImageZIndex
are properly displayed. I’m updating those based on the data that chaise returns in the init function of zPlaneList_calculatePageSize
to properly calculate the number of images that would fit. For now just assume the size of thumbnail. hasNext
, hasPrevious
, and size of the images array to properly show the controls. For example in this case if the page is supposed to fit 15 images, just make sure you’re showing 15 placeholder images (again don’t worry about showing proper thumbnail.)_fetchList
) to update the list based on how many images would fit.We will do the proper thumbnail later. that would require more thought from me
Meeting discussion (5th Jan 2021) When the number of indexes to display are less than the calculated page size, align the indexes to the left in the z plane carousel.
With the current implementation, the z-plane container is not displayed on load and it takes a seconds for it to show up. This causes a slight shift in the page. We should try to avoid this. We could show the container as soon as the iframe loads if we know there is a z-plane list in advance.
The first iteration of this has been implemented. Moving the remaining tasks to #66
This issue is related to the UI changes required for #57