I need a Image gallery look like in Windows Phone where when we swipe from the left , the other half of the image is seen and if the image is drag more than 220 width of the image , it should roolback to its original position. I am currently using listbox to get the images dynamically and when using Gestures Drag for swiping. I would like to do some animation so that it exactly behaves as it is seen in Windows Phone 7 Picture Gallery
Here is the piece of code for the same
private void gestur_DragCompleted(object sender, DragCompletedGestureEventArgs e)
{
double len = 0.0;
double sc = 0.0;
if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
{
sw = (ScrollViewer)((VisualTreeHelper.GetChild(OfferImage, 0) as FrameworkElement).FindName("ScrollViewer"));
sw.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible;
len = sw.HorizontalOffset;
var abs = PANEL_DRAG_HORIZONTAL;
if (abs < 0)
{
if (abs < 0 && CurrentItem < IamgeList.Count)
{
//flick right
sc = 455.0 * CurrentItem;
CurrentItem++;
sw.ScrollToHorizontalOffset(sc);
}
Related
We have an overlapping issue on QT Widget windows. 3 camera windows are displayed in our main application. When we zoomed in one of the window, it displays full screen view. However, after approx. 10 minutes, we see other two camera windows on top of zoomed in window (overlapping).
Attaching the screen shot for visualization.
Below is the code snippet for zoom-in and zoom-out functionality.
overlapping camera output
//For making invisible background windows that were coming after zoom in
void MyCamera::zoomInCamera(uint cameraHandle, int camearachanelid)
{
//Start - For continuous clicking
QApplication::setOverrideCursor(QCursor(Qt::WaitCursor));
GstreamerStream *camHandle=NULL;
if(CAMERA_HANDLE_VALID == isHandleValid(cameraHandle))
{
camHandle = (GstreamerStream*)cameraHandle;
camHandle->zoomInCameraThread();
QWidget *window = camHandle->getWindowObj();
window->setWindowState(window->windowState() ^ Qt::WindowActive);
}
for(int i=0;i<3;i++){
GstreamerStream *camHandleVar = (GstreamerStream*)m_CameraHandles[i];
if( cameraHandle != m_CameraHandles[i] ){
QWidget *window = camHandleVar->getWindowObj();
window->setUpdatesEnabled(false);
//window->hide();
}
}
QApplication::restoreOverrideCursor();
}
//Start - For showing invisible windows after zoom out
void MyCamera::zoomOutCamera(uint cameraHandle, int camearachanelid)
{
//Start - By - For continuous clicking
QApplication::setOverrideCursor(QCursor(Qt::WaitCursor));
GstreamerStream *camHandle=NULL;
if(CAMERA_HANDLE_VALID == isHandleValid(cameraHandle))
{
camHandle = (GstreamerStream*)cameraHandle;
camHandle->zoomOutCameraThread();
QWidget *window = camHandle->getWindowObj();
window->setWindowState(window->windowState() ^ Qt::WindowActive);
}
for(int i=0;i<3;i++){
GstreamerStream *camHandleVar = (GstreamerStream*)m_CameraHandles[i];
if( cameraHandle != m_CameraHandles[i] ){
QWidget *window = camHandleVar->getWindowObj();
//Added below line
window->setUpdatesEnabled(true);
window->setWindowState(window->windowState() ^ Qt::WindowActive);
}
}
QApplication::restoreOverrideCursor();
}
==========================================================
I tried using setWindowState, setUpdatesEnabled API calls, but it is not working as per expected behaviour.
How do I prevent the windows overlapping issue?
Regards
Amar
I am trying to use the scale(qreal x, qreal y) method/function for Graphics view to scale a pixmap in the graphics view widget. Below I've attached code of my attempts. When I execute the program it will display my pixmap but as soon as I move the horizontal slider the pixmap disappears and the graphics view just displays a blank white page. The commented out parts are all things I have tried but produced the same result. I'm not entirely sure if scaling the graphics view will scale everything in the graphics view, I assumed so but could not find anything concrete from the documentation.
*One thing to note is that I have a button that displays two different Pixmaps, even after I am presented with the white screen upon moving the scroll bar, if I press the button it will still update the y axis scroll bar(as one pixmap is slightly larger than the graphics widget) however a blank white graphics view is still displayed
*PixMapView is the name of the graphics view widget
void CanvasTest::on_horizontalSlider_valueChanged(int value)
{
//int scaleX = value/(ui->horizontalSlider->maximum())*2;
//Graph is updating and Y scroll bar is updating to show for it
//int scaleY = ui->verticalSlider->value();
QGraphicsScene* scene = ui->PixMapView->scene();
ui->PixMapView->scale(value/10, 1);
ui->PixMapView->setScene(scene);
ui->PixMapView->show();
}
There was truncation issue using integers, this code also uses static variables to keep track of the previous scale values.
static float valueTracker = 1;\
static float valueTracker1 = 1;
static int count = 1;
bool order;
if (count%2 == 1)
{
valueTracker = newSliderValue;
order = 0;
}
else
{
valueTracker1 = newSliderValue;
order = 1;
}
if(valueTracker == valueTracker1 || valueTracker == 0 || valueTracker1 == 0)
{
count++;
return;
}
else if(order == 0)
{
ui->PixMapView->scale(((valueTracker/valueTracker1)), 1);
}
else if(order == 1)
{
ui->PixMapView->scale(((valueTracker1/valueTracker)), 1);
}
count++;
I am implementing a GWT application, have a scroll panel, flow panel which contains image, mouse down/move/up to drag the flow panel in scroll panel.
Left part (x direction) works perfectly, however, the same code for top (y direction) does not work well, it seems it shake and move unstable.
Somehow the top value is much larger than left which cause the problem, but no idea how it happens and how to make the Y direction work smoothly.
public void mouseDown(MouseDownEvent event)
{
isMouseDown = true;
event.preventDefault();
xoffset = event.getX();
yoffset = event.getY();
Event.setCapture(panel.getElement());
}
public void mouseMove(MouseMoveEvent event) {
int = event.getX();
int y = event.getY();
float left = panel.getAbsoluteLeft();
float top = panel.getAbsoluteTop();
float offset_XX = x - xoffset;
float offset_YY = y - yoffset;
panel.getElement().getStyle().setProperty("position", "absolute");
float newLeft = left + offset_XX;
if (isMouseDown) {
if (newLeft < scrollPanel.getAbsoluteLeft() ) {
offset_XX = offset_XX - Math.abs(scrollPanel.getAbsoluteLeft() -panel.getAbsoluteLeft());
if (Math.abs(offset_XX) > Math.abs(scrollPanel.getOffsetWidth() - panel.getOffsetWidth())) {
if (offset_XX > 0 )
offset_XX = Math.abs(scrollPanel.getOffsetWidth() - panel.getOffsetWidth());
else
offset_XX = -Math.abs(scrollPanel.getOffsetWidth() - panel.getOffsetWidth());
}
panel.getElement().getStyle().setPropertyPx("left", (int)offset_XX);
}
float newtop = top + offset_YY;
if (newtop < scrollPanel.getAbsoluteTop()) {
offset_YY = offset_YY - Math.abs(scrollPanel.getAbsoluteTop() -panel.getAbsoluteTop());
if (Math.abs(offset_YY) > Math.abs(scrollPanel.getOffsetHeight() - panel.getOffsetHeight())) {
if (offset_YY > 0 )
offset_YY = Math.abs(scrollPanel.getOffsetHeight() - panel.getOffsetHeight());
else
offset_YY = -Math.abs(scrollPanel.getOffsetHeight() - panel.getOffsetHeight());
}
panel.getElement().getStyle().setPropertyPx("top", (int)offset_YY);
}
}
}
Long story short, there're too many computations and DOM calls going on in your drag code. I suggest you to incorporate GWT team's solution for draggable/resizable panels following the implementation of com.google.gwt.logging.client.LoggingPopup. It's very fast, elegant, easy to understand and use. You can get the code here https://github.com/stephenh/google-web-toolkit/blob/master/user/src/com/google/gwt/logging/client/LoggingPopup.java
I'm starting a new project in Flash Builder 4.6 and need some advices before going in one direction instead of the right one.
Basically, my application in Flash Builder is for mobile devices and tablets, so I need to know how could I create a chess board that fix exactly the width of any device. I do not know how could i do it exactly in Flex.
Could anyone give an idea or supply an example i could use?
Thanks.
Why not use a TileGroup/TileLayout with 100% height and width? You then set the rowHeight to be {this.height / ROWS} (ROWS being however many rows there are on a Chessboard) and doing the same for columnWidth. You could even use the horizontalGap and verticalGap properties to show through to a black background that could be used as separators between each box (though you would have to account for this in your rowHeight and columnWidth calculations, obviously)
I would populate the screen via AS3, as opposed to Flex. Something like this is what I have in mind.
var columnCount:int = 0;
var rowCount:int = 0;
var boxes:int = 64; //however many boxes on a chess board goes here
for ( var i:Number = 0; i < boxes; i+ ){
var rect:Rect = new Rect();
var color:SolidColor;
rect.percentHeight = 100;
rect.percentWidth = 100;
rect.name = i.toString(); //this will make it easier to keep track of which box is which later on
if ( rowCount % 2 == 1 ) {
if ( i % 2 == 1 ) color = 0x000000;
else color = 0xffffff;
}
else {
if ( i % 2 == 1 ) color = 0xffffff;
else color = 0x000000;
}
this.rect.fill = color;
this.tileGroup.addElement(rect);
if ( columnCount == 7 ) {
columnCount = 0;
rowCount++;
}
else {
columnCount++;
}
}
That is completely off the top of my head and untested, so I am sure there is an error or two, but you get the idea of how it would work.
EDIT: As an afterthought, you could probably do the colors 100% mathematically without using rowCount/columnCount vars, though it is probably much much easier to do so.
A long time ago I tried to find method how to stick QDialog window to screen borders for my small projects like Skype windows do it, but I failed. May be I was looking this code not in the right place, so now I'm looking the solution here, on stack! :)
So, does any one have a deal with some kind of such code, links, samples?
In my opinion, we have to reimplement QDialog moveEvent function, like below, but that code does not working:
void CDialog::moveEvent(QMoveEvent * event) {
QRect wndRect;
int leftTaskbar = 0, rightTaskbar = 0, topTaskbar = 0, bottomTaskbar = 0;
// int top = 0, left = 0, right = 0, bottom = 0;
wndRect = this->frameGeometry();
// Screen resolution
int screenWidth = QApplication::desktop()->width();
int screenHeight = QApplication::desktop()->height();
int wndWidth = wndRect.right() - wndRect.left();
int wndHeight = wndRect.bottom() - wndRect.top();
int posX = event->pos().x();
int posY = event->pos().y();
// Snap to screen border
// Left border
if (posX >= -m_nXOffset + leftTaskbar &&
posX <= leftTaskbar + m_nXOffset) {
//left = leftTaskbar;
this->move(leftTaskbar, posY);
return;
}
// Top border
if (posY >= -m_nYOffset &&
posY <= topTaskbar + m_nYOffset) {
//top = topTaskbar;
this->move(posX, topTaskbar);
return;
}
// Right border
if (posX + wndWidth <= screenWidth - rightTaskbar + m_nXOffset &&
posX + wndWidth >= screenWidth - rightTaskbar - m_nXOffset) {
//right = screenWidth - rightTaskbar - wndWidth;
this->move(screenWidth - rightTaskbar - wndWidth, posY);
return;
}
// Bottom border
if (posY + wndHeight <= screenHeight - bottomTaskbar + m_nYOffset &&
posY + wndHeight >= screenHeight - bottomTaskbar - m_nYOffset) {
//bottom = screenHeight - bottomTaskbar - wndHeight;
this->move(posX, screenHeight - bottomTaskbar - wndHeight);
return;
}
QDialog::moveEvent(event);
}
Thanks.
As you thought you can achieve this in the moveEvent function.
I guess the following code do the trick but since I have nothing to test here I will write some pseudo code:
First get the available screen area:
const QRect screen = QApplication::availableGeometry(this);
// This get the screen rect where you can drag a dialog
Then get the position of your dialog relative to the desktop (if your dialog is a child of an other widget, you need to transform coordinates from widget relative to desktop relative):
const QRect dialog = geometry();
// Do here transformation
Now test if dialog is near screen border
if( abs(dialog.left()-screen.left() < OFFSET )
move(screen.left(), dialog.top();
else if( abs(dialog.top()-screen.top() < OFFSET )
move(dialog.left(), screen.top() )
// etc. for the 2 other cases
Let me know if it works
In the pos property description from the QWidget documentation, there is the following warning about moving a window inside the move event handling method.
Warning: Calling move() or setGeometry() inside moveEvent() can
lead to infinite recursion.
That said, there is no proper way to stick the dialog window inside the screen border.
Note :
The behavior you observed in KDE comes from the Window Manager. Actually, the Window Manager is the one that arranges the application windows (like dialog boxes) to show them on the screen. The KDE Window Manager has an option to make all application windows (called client) stick to the border.