Samsung Ambient Mode vs Frame TV
-
Similar Topics
-
By BGR
The Galaxy S23 preorder period is almost over, and Samsung will soon start shipping the Galaxy S23, S23 Plus, and Ultra to buyers. The consensus seems to be that the three phones are great upgrades, ready to deliver a solid experience all around. The Galaxy S23 phones offer great performance and camera features, and battery life is also a Galaxy S23 Ultra highlight. Overall, the Galaxy S23 is a much better upgrade than the Galaxy S22. And the phone might have a few hidden features that Samsung hasn’t exactly detailed on stage.
One of these features is a secret battery charging mode for playing games or using any other apps that might be taxing the processor. The phone can bypass battery charging to provide energy directly to the processor. In turn, this boosts peak performance and prevents overheating.
The Galaxy S22 series surprised fans with a throttling feature that would reduce the processor speed to prevent overheating. The phone was also cheating in benchmarks. This was a major issue that impacted the phone’s launch, forcing Samsung to apologize to buyers and shareholders. The Galaxy S22 is the reason why there’s no Exynos-powered Galaxy S23 this year. And why there might not be one for years to come.
Instead, Samsung rocks a custom version of the Qualcomm Snapdragon 8 Gen 2 chip inside all Galaxy S23 handsets. That chip offers the best possible performance an Android phone can get this year, even if the Galaxy S23 can’t match the iPhone 14’s performance. Or iPhone 12, for that matter.
Benchmarks aside, the Galaxy S23 should have no problem running apps and high-end games. But if you happen to be playing a title that uses plenty of CPU and GPU resources while you’re charging the Galaxy S23 battery, you’ll be able to take advantage of a new Pause USB Power Delivery feature. Found by YouTube channel NL Tech in the Game Booster settings, the feature lets you power the phone without recharging it.
The battery charging bypass might help you reduce overheating during extended gameplay sessions. The phone won’t have to simultaneously provide energy to the Galaxy S23 chips and the battery. Instead, it’ll provide less power that goes directly to the processor, bypassing the battery.
According to the Galaxy S23 Ultra review above, the phone draws just 6W of power when Pause USB Power Delivery is on. If the battery is charging at the same time, the power consumption increases to 17W.
In addition to preventing battery overheating and wear, the feature should also improve peak CPU performance during intensive tasks.
The downside is that the battery won’t charge during gameplay. Also, to pause battery charging during games, the Galaxy S23 has to hold a charge of at least 20%. The other immediate issue is that you have to play games while connected to a charger, which might not be a great experience.
Considering the Galaxy S23 phones rock the latest Snapdragon flagship, you don’t have to worry about gameplay performance. The battery charging bypass might come in handy on mid-range devices. And it looks like Samsung is rolling it out to older hardware.
According to the same YouTube channel, many Samsung phones quietly support the Pause USB Power Delivery feature. Check out the video below to see how to enable it.
Don't Miss: Galaxy S23 Ultra is slower than the iPhone 13 mini and iPhone 12 in benchmarksThe post Galaxy S23 has a secret battery charging mode for when you’re playing games appeared first on BGR.
View the full article
-
-
By STF News
Photo by Alexander Andrews on Unsplash
As promised in my last post about dark mode, I bring you a dark mode tutorial 🌚. If you just want to see the code, a refactored version lives on Glitch. Let’s get straight into it.
Prerequisites
This tutorial is beginner friendly but not if you’ve done absolutely no HTML, CSS, JavaScript. You’ll also need a small HTML and CSS site that you’d like to add dark mode to. I’ll be using my own personal site.
System Preferences
Many operating systems now have dark and light mode settings which we should respect. A safe assumption to make is that if someone has their operating settings set to “dark” then they probably also want to view your site in dark mode too.
We can do this with the CSS media query [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), this media query allows us to recognise the operating system’s colour scheme and define some CSS rules within it. So, just to make sure things are working let’s set the background to black if the operating system is set to dark:
@media (prefers-color-scheme: dark) { body { background-color: black; } } This is my result. The media query can read what the operating system has as its colour scheme and applies the appropriate rules. You can test this by toggling the colour scheme settings on your computer.
Toggle colours
Okay, but what if the visitor wants to view your site in a different colour scheme than what the operating system is? We should give them that choice and we can do so by adding a toggle button and using JavaScript to switch between light and dark colour schemes.
HTML
First, let’s add a meta tag the head of our HTML:
<meta name="color-scheme" content="dark light"> This will act as a fallback for the browser should it not have prefers-colour-scheme since it can act as an indicator for browser to know that the content supports colour schemes.
Then we want to add the button to our body.
<button id="colourModeBtn">Toggle Dark Mode</button> Finally on the body, we want to add a specific class (which will be important later on):
<body class="`systemDarkPreference"> `<button id="colourModeBtn">Toggle Dark Mode</button> `</body>` CSS
Next, we want to set some CSS rules for a light theme within our prefers-color-scheme: dark block. We’re doing this so that if someone has set their operating system to “dark” everything that happens is within a dark OS context since we can’t override that setting. Now, we need to switch gears in how we’ve been thinking about our colour scheming. Sure, it’s light vs dark but it’s also system settings vs overridden, and this is important. It‘s helpful to think of @ media (prefers-color-scheme: dark) as the system dark context within which we also want some rules for that media query and also when we want to override the system setting. It may be complicated but hopefully the code sheds some light:
@media (prefers-color-scheme: dark) { body.systemDarkPreference { background-color: black; } } So within our dark context, we’ve added a systemDarkPreference to the body class as a way to apply our dark theme within the system dark context. We don’t need a class for our light theme because we’re going to be toggling the systemDarkPreference. So if the body is in our dark context but doesn’t have the systemDarkPreference class, then it will fall back to what rule it finds for the body element.
So, what happens if a visitor switches off the dark theme? Or their operating system colour scheme is set to light and they want to switch to dark? Or what if the visitor’s operating system doesn’t allow users to change their colour themes? To ensure these visitors are properly served, we’ll want to add some rules outside of the media query.
/* Default */ body{ background-color: white; } /* Dark */ body.dark { background-color: black; } We want to define the body element’s ruleset without any classes as the default behaviour for anyone who visits the site. Then a .dark class for those who want to toggle to a dark theme. There is a bit of repetition here since all the dark rules will have to be defined both inside and outside of the prefers-color-scheme media query but the default theme only needs to be defined once.
JavaScript
Remember to ensure your JavaScript is within <script></script> tag in your HTML or, if you prefer, is in a JavaScript file which is being called from your HTML like so: <script src="your_file.js"></script>.
Without the JavaScript the visitor won’t be able to interact with the page. So next, we’ll add an event listener to the button we created earlier. Let’s get the button element:
const ***toggleColourModeBtn ***= ***document***.getElementById("colourModeBtn"); Then we can add the event listener to the button:
***toggleColourModeBtn***.addEventListener("click", function () {}); At the moment this won’t have any functionality since we’re not asking it to do anything in the listener. Within the listener, first we want to make a few checks :
***toggleColourModeBtn***.addEventListener("click", function () { const hasSysDarkClass = ***document***.body.classList.contains('systemDarkPreference'); const currentSysIsDark = ***window***.matchMedia("(prefers-color-scheme: dark)").matches; const isDark = (hasSysDarkClass && currentSysIsDark) || ***document***.body.classList.contains('dark'); }); Let’s see what each variable is checking:
hasSysDarkClass checks that the body has the systemDarkPreference class on it.
currentSysIsDark checks if the operating system is set to dark using the prefers-color-scheme similar to what we’re doing in our CSS.
isDark checks that the first two variables ( hasSysDarkClass and currentSysIsDark ) are both true at the same time *or *that the body has the .dark class.
This could have been one variable but it’s far easier to read split up like this. Before we apply the correct styles to our body, we need to remove the hard coded systemDarkPreference since as soon as someone presses our button, they are indicating they want to override the system settings.
***toggleColourModeBtn***.addEventListener("click", function () { const hasSysDarkClass = ***document***.body.classList.contains('systemDarkPreference'); const currentSysIsDark = ***window***.matchMedia("(prefers-color-scheme: dark)").matches; const isDark = (hasSysDarkClass && currentSysIsDark) || ***document***.body.classList.contains('dark'); *** document***.body.classList.remove('systemDarkPreference'); }); Then we want to finally apply the correct CSS rules by toggling the body’s class list to include the .dark class if isDark is false.
***toggleColourModeBtn***.addEventListener("click", function () { const hasSysDarkClass = ***document***.body.classList.contains('systemDarkPreference'); const currentSysIsDark = ***window***.matchMedia("(prefers-color-scheme: dark)").matches; const isDark = (hasSysDarkClass && currentSysIsDark) || ***document***.body.classList.contains('dark'); *** document***.body.classList.remove('systemDarkPreference'); ***document***.body.classList.toggle('dark', !isDark); }); The end result should look like this.
Storing Settings
So that our visitors don’t have to keep readjusting the settings, we should store their preferences. In my last post I spoke about different methods to do this including localStorage and Cookies. Since my personal site is small and doesn’t collect data to be stored on the server, I’ve decided to go with localStorage. When we make any colour scheme change, we want to save it to the browser’s localStorage which we can do in the event listener we just added.
***toggleColourModeBtn***.addEventListener("click", function () { ... let colourMode; if (***document***.body.classList.contains("dark")) { colourMode = "dark"; } else { colourMode = "light"; } ***localStorage***.setItem("colourMode", colourMode); ***localStorage***.setItem("overRideSysColour", "true") }); For this first section there are a few moving parts. First we initiate colourMode so that we can dynamically set it later. Next we check if the .dark class is applied to the body element, if it is then we can set colourMode to dark and if it isn’t then we can set it to light. Then we can save this value in the localStorage. Finally, we also want to keep track of the fact that we’ve overridden the system’s settings in the localStorage.
The second section to this is to use what’s in the localStorage to set the page’s colour scheme when the visitor visits the page again. So somewhere outside of and above the event listener, we want to get the colourMode we saved previously and present the correct colour scheme depending on the value.
if (***localStorage***.getItem("overRideSysColour") == "true") { const ***currentColourMode ***= ***localStorage***.getItem("colourMode"); ***document***.body.classList.remove('systemDarkPreference'); ***document***.body.classList.add(***currentColourMode***); } So we’re checking that the system colour scheme has been overridden and if it is, then we remove that hard coded system class then add the value that’s in the localStorage. Something to note here is that this value can either be "light" or "dark" however, we don’t have any rules for the .light class so nothing will be applied to this and it will use the default rules as defined in our CSS. If you have rules for .light this will cause issues, so you may want to use a different name or an empty string when you’re setting the value in localStorage.
Choosing colours
Now, arguably the most important factor of dark themes. Choosing the correct colours. Many sites go for an off-black background and lighter white or off-white text. You want to be careful not to have contrast that’s too sharp but you also need to meet the minimum colour contrast of 4.5:1 for normal text for accessibility purposes. It’s important to make your user experience as comfortable to all visitors as possible. However, you don’t have to be confined to black and white, feel free to be creative. Coolors is a tool that allows you to view colour combinations and ensure they meet the Web Content Accessibility Guidelines.
I went for a dark blue, light blue and pink combo.
Finished Page
Play with the finished thing.
Last Words
Samsung Internet is starting to support prefers-color-scheme as a Labs menu item, so web developers can start working with it, and exploring how it helps them to build better UI. In the meantime, Samsung Internet will support force dark mode for the sake of users how expect dark web page when they set the device as dark. So if you want to experiment with prefers-color-scheme on Samsung Internet, make sure to turn it on via the Labs menu for now.
As I mentioned in my last post, there are many ways to implement dark mode and it’s up to you to analyse what the sacrifices for each method is. For example, if a visitor to my website has JavaScript turned off on their browser, then this solution won’t work. However, it’s overkill for me to store the theming data in a database (another method) because I don’t collect user data and don’t need to. The method I went with, while not perfect, is a nice middle ground. There are also other factors you may need to consider, such as the typography and icons which I didn’t have to think about. Check out the final glitch project to see how I refactored the code and managed the state of the button.
If this tutorial is useful to you, feel free to share it and show off your new dark mode sites! ✨
View the full blog at its source
-
By STF News
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.
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
-
By STF News
What is Water lock mode?
Water lock mode was introduced on the Galaxy Watch to prevent accidental touches and wake-up gestures on your screen while swimming. And the thrilling news for developers is that you can enable Water lock mode directly from your app. If you have a fitness-related app, you can use this feature to enhance your app’s capability for various water-based exercises like swimming, water aerobics, and aqua teaser. Let’s dig into the details of how to do this in a Tizen web app.
How do you enable Water lock mode from your app?
This implementation is quite simple. Water lock mode can be enabled using the Application launch API. It involves three simple steps:
Configure your app with privileges Retrieve application ID Enable Water lock mode Let’s get started.
Configure your app with privileges
First, add the following privileges to the config.xml file.
<tizen:privilege name="http://tizen.org/privilege/application.launch"/> <tizen:privilege name="http://tizen.org/privilege/application.info"/> <tizen:privilege name="http://tizen.org/privilege/power"/> http://tizen.org/privilege/application.launch - Allows the application to open other applications http://tizen.org/privilege/application.info - Allows the application to retrieve information related to other applications http://tizen.org/privilege/power - Allows the application to control power-related settings Retrieve application ID
You can enable Water lock mode directly using the launch() method of the Application API. The launch() method launches an application with the given application ID. That’s why we need to know the application ID of the Water lock mode pop-up.
Retrieve the app ID using the following code snippet in the JS file. The following code snippet returns the list of all applications installed on the watch. Among them you can choose the exact ID of the app which you need to launch. For example, we picked the ID com.samsung.clocksetting.water-lock-popup to enable Water lock mode.
function onListInstalledApps(applications) { for (var i = 0; i < applications.length; i++) console.log("ID : " + applications[i].id); } tizen.application.getAppsInfo(onListInstalledApps);
Figure 1: Installed application list
Enable Water lock mode
Once you get the app ID, you can enable Water lock mode with following code snippet in the JS file:
tizen.application.launch("com.samsung.clocksetting.water-lock-popup"); And that’s it. Water lock mode is launched. Please note that, if the mode is launched for the first time in the device, a pop-up appears with a permission message.
When Water lock mode is enabled, the touchscreen, as well as the wake-up gesture feature, is deactivated. So, there is no user interaction between the user and your app. Meanwhile your application runs in the background. So if you want to keep your app running in the foreground, you can use the Power API.
To set the power state, the request() method is called. To manage the screen and CPU state, use the following code snippet in the JS file:
tizen.power.request(“SCREEN”, “SCREEN_NORMAL"); tizen.power.request("CPU", "CPU_AWAKE"); tizen.power.release("SCREEN"); tizen.power.release("CPU"); For example, here I have added a time counter while the Water lock mode is on using an open source library named EasyTimer.js. First, add the JS library to the HTML file.
<script src="lib/easytimer/dist/easytimer.min.js"></script> After that, add the following code snippet to the JS file to implement a time counter.
var timerInstance = new easytimer.Timer(); timerInstance.start(); timerInstance.addEventListener('secondsUpdated', function (e) { document.getElementById("excercise_timer").textContent=timerInstance.getTimeValues().toString(); }); document.getElementById("counting_done").addEventListener("click", function(){ timerInstance.stop(); });
Figure 2: Water lock enabled
To disable Water lock mode, users must long press the Home key. After disabling Water lock mode, the user can start interacting with your app immediately. For example, the user can stop the time counter using the Done button in the sample app (see Figure 2).
Quite simple, right? You can check out the sample app here. If you have any questions, you can post your queries to Samsung Developer's forum.
View the full blog at its source
-
-
-
Similar Tagged Content
Recommended Posts
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.