Announcement

Collapse
No announcement yet.

UMG Media Gallery

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    UMG Media Gallery

    Hi! I'm Luca, a graphic designer, I'm learning Unreal from June and I'm working on an interactive application based on a simple menu system with a lot of write and media content like images and videos.
    Actually I'm trying to implement the Gallery with the swipe by using touch or left mouse button (for change images) and with the zoom by using the mouse wheel or by using two fingers move (for zoomin and out).
    I'm newbie and unfortunately I don't know the C++. This is my gallery blueprint:

    Click image for larger version

Name:	gallery.PNG
Views:	1
Size:	319.7 KB
ID:	1208355

    Anyway I'm thinking to use for the swipe an Horizontal "scrollable box" but it can't stop (I think) on a particular image when you swipe.
    For the zooming I'm tried to use a lot of tutorial but no one of these works. I need of an image that will be zoomable by scrolling the mouse wheel or by using the traditional two fingers move.
    Any Suggestions?
    Thank you!

    #2
    I believe the keyword you are looking for is carousel menu, these come in different shapes and sizes, including 3d ones.

    You could use a scroll box with the scroll functionality disabled (oh, the irony) and control the position of the scroll manually. Here's an example with the buttons.

    Click image for larger version

Name:	scroll.png
Views:	1
Size:	195.6 KB
ID:	1122159

    The whole thing is done in the widget graph, the buttons set the desired position of the Scrollbox, and the Event Tick tries to reach this position. This is a very basic setup and can be improved in many way, like Gating the Tick so it does not unnecessarily eat the performance, and adding clamping to the scroll offset.

    Click image for larger version

Name:	scroll2.png
Views:	1
Size:	182.2 KB
ID:	1122160

    When it comes to zooming In&Out, I'd create a widget on top of everything else - this will allow you to control its size in the viewport.

    Hope it can get you started. If you have any questions, don't hesitate to ask them.
    Last edited by Everynone; 01-28-2017, 07:06 AM.

    Comment


      #3
      Thank You Everynone for your precious help! I will test and come back to you soon as possible!

      Comment


        #4
        Hi Everynone,
        I tried today your way, and it works very nice with the button.
        I setup the scrollbox with the same size of the images contained in it (1920x1080), and when I use the button with the offset on 1920, the scrool stop exactly on my image.
        But my problem is the touch control. I tried to use it without button and doesn't work, because after swiping the scroll come back as if there was a magnet.

        I tried to set up somenthing like this:

        https://forums.unrealengine.com/show...-UMG-Scrollbox

        But doesn't work also. What I will setup?
        (I have in My Player Controller all my blueprint with the touch and mouse control)

        Thanks again for your help and time!

        Comment


          #5
          I've never used any swipe functionality in UE4, not sure what kind of data it returns but when you say it snaps back like a magnet it's most likely caused by the Tick event trying to set the position of the Scrollbox to the requested value. In this very case, your touch movement should be setting the ScrollOffset variable rather than the position of the Scrollbox and you should let the Tick event handle the actual movement. This way no matter how fast/hard one swipes, only one item can be swiped at a time. (althought the offset would most likely stack up which might end up looking convincingly responsive)

          If you want the scrollable item to follow the finger independently as the user navigates within the boundaries of the Scrollbox, additional tweaks will be needed. You could disable (gate off) the Tick for the duration of the swipe and only reactivated it once the touch is finished, and only then let the Tick take over and slide the button to the final resting position.

          To sum it up, for the most natural feel, I think you'd want to implement 2 separate behaviours when interacting with this widget:

          Scrolling with the buttons: (already working as intended)
          • when a button is clicked the scrollbox offset is increased/decreased by a certain amount
          • Tick will handle the sliding trying to reach the desired position using a curve


          Swiping:
          • disable Tick onTouchStarted so the user can control the Scrollbox position directly
          • touch location sets the Scrollbox offset directly
          • on TouchEnded, set the ScrollOffset variable to the desired final resting position (left or right of the current touch position, whatever is closer to the centre of the scrollbox)
          • enable Tick and let it handle the rest of the sliding


          This is untested. If someone comes here and corrects me, listen to them.
          Last edited by Everynone; 01-30-2017, 05:50 AM.

          Comment


            #6
            Hi Everynone,
            I'm finishing this week to works on the Galley in Umg.
            I don't know if is the right way but I think is a good start.
            I use your example for build the scroll box interpolation every 1920 pixel.

            Click image for larger version

Name:	Gallery_Blueprint.PNG
Views:	1
Size:	747.3 KB
ID:	1123078

            Now the next step is build a touch interaction because the buttons works fine but when I try to drag and change the image (with the same offset 1920 pixel)
            the scrollbox come back.
            I will try tomorrow to disable the tick on touch started and I will come back to you soon!

            Comment


              #7
              Hi Everynone,
              I'm trying to work on this:

              Swiping:
              disable Tick onTouchStarted so the user can control the Scrollbox position directly
              touch location sets the Scrollbox offset directly
              on TouchEnded, set the ScrollOffset variable to the desired final resting position (left or right of the current touch position, whatever is closer to the centre of the scrollbox)
              enable Tick and let it handle the rest of the sliding


              but I don't find the right way. Can you help me with a blueprint example?

              Also I'm trying to set up all the button in the master menu for go directly to the corresponding image (size 1920x1080).

              Click image for larger version

Name:	2.PNG
Views:	1
Size:	507.2 KB
ID:	1123149

              For Ex:
              - if I press the button number 1 I want to show the image number 1 - scroll box position 0.
              - if I press the button number 2 I want to show the image number 2 - scroll box position 1920.
              - if I press the button number 3 I want to show the image number 2 - scroll box position 3840.

              This is what I want to do, but in the reality If I press the button number 1, it shows me the image number 1.
              But If I change the image by left/right buttons for example on image number 2 and after I close the slideshow,
              when I open again by pressing the button 1 the position is on image 2.
              How I can reset the position on closing button? Or I can setup the reset position directly on the image button?

              ThankYOU!
              Attached Files

              Comment


                #8
                Originally posted by lucasca View Post
                [...]For Ex:
                - if I press the button number 1 I want to show the image number 1 - scroll box position 0.
                - if I press the button number 2 I want to show the image number 2 - scroll box position 1920.
                - if I press the button number 3 I want to show the image number 2 - scroll box position 3840.
                You can achieve the above by setting the ScrollOffset directly, like so:

                Click image for larger version

Name:	scrollwiththembuttons.png
Views:	1
Size:	306.0 KB
ID:	1123172

                I'll try to post something regarding the swiping a bit later.
                Last edited by Everynone; 02-17-2017, 05:16 AM.

                Comment


                  #9
                  You did not provide any details so I made some assumptions:

                  Click image for larger version

Name:	widget.png
Views:	1
Size:	77.0 KB
ID:	1123194
                  • the Scrollbox can display 5 images at a time
                  • there's a Spacer at the beginning and at the end (2x width of the image) - this allows for the first/last image to be centred
                  • you have a set number of images and there aren't that many of them (otherwise, I'd go a different route altogether)
                  • you're not going to do anything fancy with this (the scrollbox's functionality is somewhat limited and for the fancy stuff you'd be better off writing your own scrolling widget)



                  The basic idea is to Enable Tick when using Buttons and Disable Tick when scrolling by dragging the scrollbox (this is native funcionality)

                  Click image for larger version

Name:	graph.png
Views:	1
Size:	585.7 KB
ID:	1123198

                  Hope this will get you started.

                  Attached Files

                  Comment


                    #10
                    Hi Everynone,
                    I am truly grateful for your precious help! I will start now on testing it!
                    I will come back to you soon!

                    Comment


                      #11
                      Originally posted by Everynone View Post
                      I believe the keyword you are looking for is carousel menu, these come in different shapes and sizes, including 3d ones.

                      You could use a scroll box with the scroll functionality disabled (oh, the irony) and control the position of the scroll manually. Here's an example with the buttons.

                      [ATTACH=CONFIG]126944[/ATTACH]

                      The whole thing is done in the widget graph, the buttons set the desired position of the Scrollbox, and the Event Tick tries to reach this position. This is a very basic setup and can be improved in many way, like Gating the Tick so it does not unnecessarily eat the performance, and adding clamping to the scroll offset.

                      [ATTACH=CONFIG]126945[/ATTACH]

                      When it comes to zooming In&Out, I'd create a widget on top of everything else - this will allow you to control its size in the viewport.

                      Hope it can get you started. If you have any questions, don't hesitate to ask them.

                      Thanks. FInterp To Constant didn't work for me but FInterp Ease In Out did the trick.

                      Comment

                      Working...
                      X