I'm designing a game for windows 8 using HTML5 , but my game can't be shown in snapped view and i'm wondering if it is possible to just show an image (like : Store application )?! if so how can i do that ?!
also can i set my game not to work in snap view like looking orientation?
i want to make it similar to the next screenshot
You have two choices for changing your view for snapped. You can specify different CSS in the different media queries which should already be in your CSS, or you can do it with imperative code in the page's updateLayout event.
For what you're attempting, I would just have a div with your icon in it and a div with everything else and change the "display" property in the media queries.
Let me know if you need me to be more specific.
Thanks alot for your help , i solved it as you said "detecting when the app is in the snap view and so it will appear as i set in CSS file
sample code
checking for snap view
window.onresize = function () {
var myViewState = Windows.UI.ViewManagement.ApplicationView.value;
var viewStates = Windows.UI.ViewManagement.ApplicationViewState;
if (myViewState == viewStates.snapped)
//do what you want
}
then you should be perviously setting up your CSS file
#media screen and (-ms-view-state: snapped) {
//do what you want to show when app go to snap view stat
}
Related
I created a hybrid app with Vue.js. Can I write a keyboard accessoryView in Vue code that exists in ios? Or is there a way to fix the custom accessoryView by detecting the keyboard coming up and calculating the height? I failed in both ways.
I guess that Visual Viewport API can be useful as shown in this tweet: https://twitter.com/rikschennink/status/1361598959828037633
visualViewport.addEventListener('resize', () => {
console.log(window.innerHeight);
console.log(visualViewport.height);
})
But for the specific accessoryView property/method, I guess that you need to add some iOS tags for this question to be noticed by those people.
I try to combine Tabbar + Carousel for a drag effect with Onsen UI
I have a little problem ;
When I add the Tabbar in the same page as the carousel, the carousel swipe does not work.
And when I put the tabbar in a different page of the carousel the swipe works well but I can not retrieve the current index (OnPostChange)
Someone has the solution please?
Thank you
I put the two codes that do not work below
First :
https://codepen.io/yohann3396/pen/brppxY
Second :
https://codepen.io/yohann3396/pen/jLqqdK
ons.bootstrap();
ons.ready(function() {
alert('test');
carousel.on('postchange', function(event) {
var test = carousel.getActiveIndex();
alert(test);
});
});
It's not possible in the current version. I'm sorry nobody answered you, I've been struggling to find a solution.
There is a workaround for a simple site. If you make a complete duplicate carousel for every tab, then you can change the page value to a distinct name. You must have a page for every tab, and you may not use duplicates, but you can link to a specific page in a carousel. The user wouldn't be able to tell they are actually on a separate carousel with a distinct template ID if you duplicate all of them.
First of all, thanks to everything of codenameone.
I would like to customize camera view, simply overlaying PNG image on the full camera view screen.
Any way how to do it?
Here is code snippet.
Form mainForm = new Form();
ImageViewer iv = new ImageViewer();
mainForm.getToolbar().addMaterialCommandToRightBar("",
FontImage.MATERIAL_CAMERA_ALT, 4, (ev) -> {
filePath = Capture.capturePhoto();
setImage(filePath, iv);
});
I couldn't any view component of camera view, because Capture.capturePhoto() works automatically.
Or is there any way to build custom camera component in codename one?
I googled and got about PeerComponents, however don't know how to use it.
Just please provide some small sample code for me.
Best regards.
Currently Capture.capturePhoto() opens its own "window" over the app so you can't customize it. In the future we will likely add a more flexible API to embed the camera into your UI, especially now that we have Z-layering (we can draw over top of native widgets).
If you need this functionality right now, you would need to write a native interface and make your own capture component.
I'm facing a Problem with my list . There is button naming List ..on click of it I'm showing list overlay, but due to more columns I have to make user to see it in landscape mode only..How would I achieve it ? I have made my whole Project orientation as Portrait . And I want to show this page in Landscape only...
The only thing I could think of is to create a landscape and portrait profile for that view and toggle them based on a listener for orientationchange.
I have a feeling though that will like the way that works even less. You may be better off rethinking that layout all together.
Good luck, Brad
There are certain elements of Win 8 Store App UI that change based on whether the user has a touch screen. For example, a ScrollViewer, when rendered on a non-touch screen shows a vertical scrollbar. On a touch screen, the scrollbar is hidden.
I would like to tailor my application UI, adding extra controls, for non-touch screen users. Does anyone know if it is possible to detect whether a user has a touch screen?
You can use the Windows.Devices.Input namespace to detect various capabilities (touch, keyboard, mouse, etc.). For example, the TouchCapabilities class has a TouchPresent property you could check to see if there's a digitizer available.
Take a look at the Input: Device capabilities sample to see them in action.
If you are using HTML/JS you can query it like this
var touchCapabilities = new Windows.Devices.Input.TouchCapabilities();
var isTouchCapable = touchCapabilities.touchPresent;