Quantcast
Jump to content

Zooming In/Out in Samsung DeX Mode


STF News
 Share

Recommended Posts

2020-10-14-01-banner.jpg

Samsung DeX offers a PC-like experience for your phone app. If an app is compatible with DeX, the user can run it on a PC and enjoy its full features on a big screen. Generally, no additional coding is required to make your app DeX-compatible if the best practices of Android programming are followed during development. However, you must make some features compatible with DeX mode so that the user can fully enjoy the desktop experience.

If your app is a gallery app, a game, or any kind of app where multi-touch is required, this feature needs to be made compatible with DeX mode as well. You can replace the multi-touch action with a mouse wheel up/down action for DeX mode. Today, let’s get into the details of how the mouse wheel up/down action can be used to implement the pinch zoom in/out action in a DeX-compatible app.

Get Started

First, let’s go through an example where an image can be zoomed in/out by using multi-touch. For an Android device, you can achieve this feature by detecting the pinch gesture. For DeX mode, you instead need to detect the mouse wheel up/down event to implement this feature.

To start with, develop an app in which you can zoom in/out on an image. Then, make this feature compatible with DeX by receiving the mouse wheel up/down event.

Detect the Pinch Gesture on a Touch Screen

Create a new project in Android Studio, and then add a layout in an XML file. This layout should contain an image on which you can use the pinch gesture for zooming in/out.

The ScaleGestureDetector class is used to determine the scaling transformation gestures using the supplied MotionEvents. First, a ScaleGestureDetector type variable is declared. Next, implement a scale listener, which extends the SimpleOnScaleGestureListener to listen for a subset of scaling-related events. The onScale() method responds to a scaling event. The scale factor is determined in this method and then the layout is scaled accordingly. The maximum and minimum factor values are set for the layout.

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
    @Override
    public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
        scaleFactor *= scaleGestureDetector.getScaleFactor();
        scaleFactor = Math.max(minScaleFactor, Math.min(scaleFactor, maxScaleFactor));
        layout_main.setScaleX(scaleFactor);
        layout_main.setScaleY(scaleFactor);
        return true;
    }
} 

An instance of ScaleGestureDetector is created in the onCreate() method and the reference of the current activity and the ScaleListener instance are passed as arguments.

Next, an onTouchEvent() callback method is implemented to receive the gesture event and pass this event through to the onTouchEvent() method of the ScaleGestureDetector object.

private ScaleGestureDetector scaleGestureDetector;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    layout_main=findViewById(R.id.layout);
    scaleGestureDetector = new ScaleGestureDetector(this, new ScaleListener());
}
 
@Override
public boolean onTouchEvent(MotionEvent motionEvent) {
    scaleGestureDetector.onTouchEvent(motionEvent);
    return true;
}

Detect Mouse Wheel Scroll for DeX

The MotionEvent object is used to report movement events such as mouse movement. The mouse wheel up/down event is received by the MotionEvent.ACTION_SCROLL action. This action is always delivered to the window or view under the mouse pointer.

The setOnGenericMotionListener event is set on the layout where the implementation of the zoom in/out action should be done. View.OnGenericMotionListener is invoked before the generic motion event is given to the view. The onGenericMotion(View v, MotionEvent event) method is called when a generic motion event is dispatched to a view. It returns true if the listener has consumed the event, false otherwise.

AXIS_VSCROLL is the vertical scroll axis of a motion event. For a mouse, the value is normalized to a range from -1.0 (wheel down) to 1.0 (wheel up).

layout_main=findViewById(R.id.layout);

layout_main.setOnGenericMotionListener(new View.OnGenericMotionListener() {
    @Override
    public boolean onGenericMotion(View v, MotionEvent event) {
        int action = event.getAction();
            if (action == MotionEvent.ACTION_SCROLL) {
                float wheelY = event.getAxisValue(MotionEvent.AXIS_VSCROLL);

                if (wheelY > 0.0f)
                {
                    scaleFactor=  Math.min(maxScaleFactor, scaleFactor*2);

                    Log.d("Mouse_Wheel","up");
                    // write the code to zoom in
                    layout_main.setScaleX(scaleFactor);
                    layout_main.setScaleY(scaleFactor);
                }
                else
                {
                    scaleFactor=  Math.max(minScaleFactor, scaleFactor/2);
                    Log.d("Mouse_Wheel","down");
                    // write the code to zoom out
                    layout_main.setScaleX(scaleFactor);
                    layout_main.setScaleY(scaleFactor);
                }
                return true;
            }
        return true;
   }
});

If the layout supports using the mouse wheel for scrolling, then Ctrl + Mouse wheel up/down can be used for the zoom in/out action. You can implement this by following the steps below:

1. Check the status of Ctrl key. The onKeyDown() and onKeyUp() methods are called when the Ctrl key is pressed or released, respectively.

private boolean ctrlKeyPressed;

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    switch (keyCode) {
        case KeyEvent.KEYCODE_CTRL_LEFT:
        case KeyEvent.KEYCODE_CTRL_RIGHT:
            ctrlKeyPressed = true;
            break;
    }
    return super.onKeyDown(keyCode, event);
}

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    switch (keyCode) {
        case KeyEvent.KEYCODE_CTRL_LEFT:
        case KeyEvent.KEYCODE_CTRL_RIGHT:
            ctrlKeyPressed = false;
            break;
    }
    return super.onKeyUp(keyCode, event);
}

2. Execute the zoom in/out action if the Ctrl key is pressed and the mouse wheel is scrolled.

if ((action == MotionEvent.ACTION_SCROLL)&& ctrlKeyPressed) {
    
    float wheelY = event.getAxisValue(MotionEvent.AXIS_VSCROLL);

        if (wheelY > 0.0f){}
        else {}
    return true;
}

Testing

Run the sample app in an Android phone to zoom the image in and out with the pinch in/out gesture. To check the mouse wheel zoom in/out feature, run the app in DeX mode. The source code of the sample app is attached at the end of this article. Feel free to download it and experiment on your own.

2020-10-14-01-01.jpg 2020-10-15-02-01.jpg

Conclusion

This is a basic introduction to mouse wheel interaction in Samsung DeX. There are many things you can do by enabling the mouse and mouse-wheel actions in your app. If you want to add more keyboard functionality, refer to the Android guide for Handling Keyboard Actions.

Additional Resource

Download the Source Code of Sample App

View the full blog at its source

Link to comment
Share on other sites



  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Similar Topics

    • By STF News
      Since it opened in 2004, the Leeum Museum of Art has earned a reputation as a cultural space where traditional, modern and international artworks that span a range of eras and styles are brought together. After the pandemic required it to close for nineteen months, the renovated museum has now reopened with new exhibits that include advanced technological displays which provide enhanced viewing of its expansive collection.
       
      As technology continues to enter the art world in ways that haven’t been seen before, the display and creation of digital art are becoming increasingly common. Amid this climate, Samsung Electronics has partnered with the Leeum Museum of Art to promote the convergence of art and technology and allow people to experience 5,000 years of history with a curated collection in the Art Store on The Frame.
       
      Samsung Newsroom reached out to Kwang-bae Lee, a curator at the Leeum Museum of Art, to get the inside scoop on the museum’s reopening, its collections and its collaboration with Samsung.
       
       
      Transcending Time and Space With Artworks That Span Eras and Styles
      ▲ Exterior view of the Leeum Museum of Art
       
      The Samsung Foundation of Culture established the Leeum Museum of Art in Hannam-dong, Seoul, Korea in 2004 in order to preserve its cultural assets and share them with the public. It was designed by acclaimed architects, Mario Botta, Jean Nouvel and Rem Koolhaas, and is highly regarded for its architectural value and harmonious design which blends with nature. With its unfailing dedication to holding exhibitions and showcasing its expansive collection, the museum now has one of the most broadly representative and varied collections in South Korea. Today, the Leeum is known as an open museum where various artistic styles, from traditional Korean art to vibrant and modern contemporary pieces from both Korea and abroad, can coexist. The museum has also been utilizing digital technology in its exhibits for the past ten years with this technology allowing, old artworks to be displayed in new and exciting ways. In this way, the Leeum seeks to head toward the future while not forgetting about the past. The museum is currently using a variety of state-of-the-art devices for both exhibition and education purposes.
       
      ▲ The interior of the Leeum Museum of Art
       
      During the renovation period, the Leeum launched new permanent exhibits featuring both traditional and modern artworks. It also revived a special exhibition entitled “Human, 7 questions”, which is designed to offer visitors a chance to reflect on humanity as the source of art and contemplate the meaning of human existence during times of crisis. It has also installed a massive Media Wall in its lobby, allowing users to appreciate the artwork of Jennifer Steinkamp upon entering the museum.
       
      “Following the Leeum’s reopening, people seem to be paying special attention to the new collections and special exhibitions we have opened,” said Lee. “I am excited to have visitors come in and see the new and improved space for themselves as they enjoy the full experience the renovated museum offers.”
       
       
      Samsung and Leeum Usher in a New Era of Digital Art
      The partnership between Samsung Electronics and the Leeum is also playing an important role in the ongoing unification of art and technology. Thanks to the fact that works curated by the museum are included on The Frame, users can now view them not just outside of the museum, but across the world. As Korean culture continues to grow more popular and expand into new countries, the introduction of this collection on the Art Store opens new opportunities for users around the world to experience the beauty of Korean traditional art.
       
      ▲ Lidded Bowl (National Treasure), 11th-12th century (Goryeo Dynasty)
       
      Curators spent a great amount of time and effort selecting a collection that shines a light on the artistry and aesthetic of Korean art for display on The Frame. Because of this, viewers can now enjoy beautiful patterns on metal, subtly colored pottery and vibrant paintings from the comfort of their homes.
       
      “Technology allows visitors to appreciate finer details in an artwork – whether it is a picture, a text, or a voice – that they may not have noticed before,” Lee said. “As technologies continue developing, our appreciation and understanding of art will expand beyond what we could ever have imagined.”
       
      ▲ Daoist Immortals, Kim Hong Do, 1776 (Joseon Dynasty)
       
      Samsung Electronics and Leeum have been cooperating on using technology to promote art since the museum opened in 2004. Beyond digital art displays, this partnership has also demonstrated how digital archives can play an important role in preserving historical legacies.
       
      “In this era, when we have access to abundance of masterpieces, the best of art and technology have to come together to complement one another,” Lee commented. “We hope our collaboration with Samsung will eventually come to be regarded as a masterpiece in and of itself.”
       
      The collection of artworks curated by the Leeum is available in the Art Store on The Frame today.
       
      Check out some of the Leeum’s top picks for The Frame below.
       

      View the full article
    • By STF News
      ▲ Still Life #1 (Desert Oasis) (2018)
       
      Versatility is one of the greatest strengths of Samsung’s award-winning lifestyle TV, The Frame. Not only does it offer customization to fit any home décor and stunning QLED picture quality, but the Art Store also transforms the user’s display into a window to the world. With over 1,500 pieces to choose from, including world-renowned artworks like Vincent Van Gogh’s ‘Starry Night’ and partnerships with Magnum Photos, Etsy and a host of museums, the Art Store lets consumers embark on a premium virtual travel experience from the comfort of their home.
       
      With July bearing the curation theme of ‘Summer Vibes’, Samsung Newsroom is introducing photographer Dean West, who travels across continents to take pictures that capture things like the intensity of the desert heat, the refreshing first step into a luxury pool and the feeling of the sun on a tropical beach. West strives to give viewers an escape from reality with his art, and always finds himself coming back to landscapes that are warm and bright – or, as he describes them, “the places you’d rather be.”
       

       
      With West’s work perfectly encapsulating the theme of ‘Summer Vibes’, Newsroom spoke to the photographer about some of his top picks from the Art Store and why The Frame is the ideal platform for displaying his work.
       
      ▲ Pink Dreams #1, Miami Shores (2020)
       
       
      Showcasing Carefully Crafted Scenes With Quantum Dot Technology
      Vibrant colors are a key aspect of West’s artfully orchestrated scenes. “When photographing a scene, I always try to capture the essence or the feeling of a place,” says West. “Color is one way of communicating that. For example, when capturing my pool scenes, the feeling I’m going for is that moment when you first take off your sunglasses – when the sun bounces off the walls into the glistening pool. A colorful array of swimsuits and sunscreen-soaked skin are made visible, and color plays a beautiful role in capturing that essence.”
       
      ▲ St Pete Beach (2016)
       
      The Frame’s QLED 4K picture quality offers the perfect medium for West’s work to be showcased to thousands across the globe. Quantum Dot technology allows more than a billion colors to be displayed at 100% color volume, allowing West’s artistic intent to shine through on a bright screen with vivid and accurate color reproduction. The cutting-edge display technology analyzes every piece of each image and adjusts the contrast to give it an enhanced sense of depth and color for a stunning result every time.
       
      “The technology used provides such a harmonious viewing experience that it has to be seen to be believed,” relates West. “The display’s ability to reproduce color and light is so good that photographers and viewers from around the world can’t help but express their admiration. On top of this, The Frame gives users from all corners of the globe quality access to works that they may otherwise never have seen. This alone is something I truly respect.”
       
      West describes ‘art’ as a series of complex images that blend into a single idea. He adds, “Understanding light is at the heart of creating imagery that are vivid and bright. Any person can put themselves in the right place at the right time and capture something beautiful, but learning to blend complex images takes years to master. The keys are to be curious, do your research and make the time to create.”
       
      ▲ Eagle Rock Office, Los Angeles (2019)
       
       
      How Technology Is Making the Art World More Accessible
      Technology plays a key role in expanding access to art. It provides a multitude of platforms on which work can be displayed and accessed by a broad range of users on different devices. And The Frame is one of those devices. “We’ve already seen how wonderfully the worlds of art and tech are merging,” West remarks. “Artists have always used the best tools available to them at the time, and they will continue to do so as technology advances.”
       
      The Art Store provides access to an expansive library of artworks to appeal to every taste, mood or setting. This ever-growing collection features pieces from a wide range of eras, as well as contributions from 47 global partners and 626 artists so far.
       
      Fifteen of Dean’s pieces are available today for display on the Art Store and The Frame.
       

      View the full article
    • By STF News
      Over the past year and a half, our lives have changed inordinately, with social distancing measures taking over and requiring us to transform every part of our routines from the way we work to the way we shop.
       
      In light of this ‘new normal’ that we find ourselves living in, Samsung Electronics has been working non-stop to develop innovative solutions for businesses as well as users. Samsung Kiosk, a point-of-sale (POS) terminal for customers, is one such solution.
       
      Samsung Kiosk is not only equipped with a range of functionalities and operational settings to fit different business types and sizes, but also features a dedicated User Interface that allows for the easy set-up and usage of menu, payment and saving systems. With a refined design for seamless in-store integration and antibacterial coating technology, Samsung Kiosk has been developed to provide the best possible experiences to retailers as well as customers.
       
      Take a look at the infographic below to learn more about Samsung Kiosk.
       

      View the full article
    • By BGR
      Samsung released the first Galaxy Z Flip on February 14th, 2020, and a 5G model followed in July. Samsung has yet to announce a follow-up to the Galaxy Z Flip 5G, but Waqar Khan has shared a stunning concept video that offers up one potential design. In addition to including the same triple camera array that appeared on the Galaxy S21, Khan also added a small touchscreen on the front of the phone. One of the more intriguing design trends to follow in recent years has been the resurrection of the flip phone. Back in the mid-2000s, the Motorola RAZR’s clamshell chassis was ubiquitous, and the concept of flipping a phone open and closed seemed natural. A decade later, smartphones had taken over, and the new goal was to have a display take up as much of the front panel as possible. But no trend ever truly dies, and over the past few years, some of the biggest names in the industry have revived flip phones with a modern twist: Foldable displays.
      At this point, there are a number of foldable smartphones on the market, but Samsung’s have certainly received the most attention. The company’s first attempt at a foldable — the Galaxy Fold — was plagued with issues, but gave us a valuable peek into the future of phone design. Months later, Samsung introduced us to the Galaxy Z Flip, which did away with the book-like design of the Fold in favor of a layout similar to that of the old Razr. Later in 2020, Samsung revealed a 5G model of the Z Flip, but it looked virtually identical to the original.
      A follow-up to the Galaxy Z Flip seems inevitable, and in anticipation of its arrival, Waqar Khan has mocked up a 3D model of the phone that draws heavy inspiration from the design of the recently-released Galaxy S21.

      Today's Top Deal
      N95 masks made in the USA are on Amazon for $1.16!
      Price: $57.90
      Buy Now
      Not much about the Galaxy Z Flip 2 (or the Z Flip 3, if Samsung wants to align the naming scheme with that of the Z Fold series) has leaked yet, but there are rumors that the next Z Flip will feature a triple rear camera. If this turns out to be the case, it would certainly make sense for Samsung to carry over the same camera array that debuted on the Galaxy S21 series. The Galaxy S21 received significantly better reviews than its immediate predecessor, due to its lower price and its updated design, so it’s easy to see why Khan chose to include the camera on his concept:
      In addition to the updated rear camera, Khan has also added a small touchscreen that would show the time and date, allow users to interact with media, and present notifications. This is one element of the all-new Motorola Razr that the current Galaxy Z Flip can’t match. It’s unclear if Samsung has any plans to add such a feature to the next Z Flip, but none of the upgrades that Khan proposes seem all that far-fetched for a sequel.
      Samsung has yet to even hint at a release date for any future foldable phones, but the Galaxy Z Flip 5G was unveiled on July 22nd, so we might be waiting until at least this summer to see the Z Flip 3.

      Today's Top Deal
      Amazon shoppers are obsessed with these black AccuMed face masks - now at the lowest price ever!
      Price: $19.99
      You Save: $6.26 (24%)
      Buy Now View the full article



×
×
  • Create New...