Cordova plugin<\/h2>\n
\n The plugin example can be easily included in your app with the following command:\n<\/p>\n
cordova\u00a0plugin\u00a0add\u00a0https:\/\/github.com\/conceptdev\/cordova-dualscreeninfo-plugin\/<\/pre>\n\n Once added to your Cordova app, you can use the methods provided by the plugin to get information about the device and, if it is a Surface Duo, whether the app is spanned and masked by the hinge:\n<\/p>\n
- \n
- \n
window.ScreenHelper.isDualScreenDevice<\/code> \u2013 Use this method to determine if the device is a Surface Duo. Returnstrue<\/code> orfalse<\/code>.\n<\/li>\n- \n
window.ScreenHelper.getHinge<\/code> \u2013 Returns the coordinates of the hinge (if the app is spanned) as a comma-separated string\"x,y,width,height\"<\/code>. All zeros\"0,0,0,0\"<\/code> will be returned if the app is not spanned and the hinge can\u2019t be detected (or the app is running on a single-screen device).\n<\/li>\n<\/ul>\n\n Using these methods you can detect when your app is running on a Surface Duo, whether it is spanned, and the orientation. The samples include a Hinge<\/strong> class to help work with the data returned.\n<\/p>\n
Default app template demo<\/h2>\n
\n By adding the plugin to a cordova new<\/strong> app template, I used the two plugin methods to enhance the HTML and JavaScript for dual-screens:\n<\/p>\n
- \n
- \n Show information about the device, screen size, and spanned state of the app.\n <\/li>\n
- \n Display a \u2018debug\u2019 hinge that will draw slightly larger than the masked area (for testing, not required for your live apps).\n <\/li>\n
- \n Position the content correctly when the app is spanned, and add a Surface Duo photo on the second screen.\n <\/li>\n<\/ul>\n
\n When spanned, the app shows the content side-by-side with the hinge debug visualization in the middle:\n<\/p>\n
\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-3.png\")
\n The basic structure of the index.html<\/strong> page consists of three div<\/strong> elements (the left and right panes, and the hinge between them):\n<\/p>\n
<div class=\"app\">\r\n <h1>Apache Cordova<\/h1><!--text placeholders omitted for clarity-->\r\n<\/div>\r\n<div class=\"fold angled stripes single\" id=\"debughinge\"><\/div>\r\n<div class=\"secondscreen\"><\/div><\/pre>\n
\n The JavaScript for the page (in js\/index.js<\/strong>) requires an event listener for the
resize<\/code> event:\n<\/p>\nwindow.addEventListener('resize',\u00a0onResize,\u00a0true);<\/pre>\n\n The
onResize<\/code> function uses theScreenHelper.getHinge<\/code> method from the plugin to get the device metrics that indicate whether the app is spanned, and positions elements to adapt to the hinge and device orientation:\n<\/p>\nfunction onResize() {\r\n window.ScreenHelper.getHinge(\r\n function(result) { \r\n var h = new Hinge (result);\r\n if (h.isSpanned) {\r\n \/\/ show the debug hinge visualization, and show the second screen content\r\n document.getElementById('debughinge').classList.add('spanned');\r\n document.getElementsByClassName(\"secondscreen\")[0].style.display = 'block';\r\n if (h.isVertical) { \/\/ move the app content to the left\r\n document.getElementsByClassName(\"app\")[0].style.left = '25%';\r\n document.getElementsByClassName(\"app\")[0].style.top = '50%';\r\n }\r\n\/\/ ... rest of the layout changes ...\r\n}, function(error) { }\r\n );\r\n}<\/pre>\n\n The complete sample code is available on GitHub<\/a> \u2013 this approach could be used with existing Cordova apps to adjust the layout when spanned on a Surface Duo.\n<\/p>\n
Foldable CSS demo<\/h2>\n
\n CSS and JavaScript browser extensions were discussed in an earlier blog post on building and testing dual-screen web apps<\/a>. While the web view that\u2019s embedded in Cordova does not yet natively support those extensions, it\u2019s possible to use the polyfill implementations<\/a> (in conjunction with the plugin) to get them working in your apps. Here\u2019s how the boxes.html<\/strong> page looks when rendered inside Cordova (I added some app metrics text to each box):\n<\/p>\n
\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-4.png\")
\n You can download the app source from GitHub<\/a> to see how it works \u2013 the key elements are summarized below.\n<\/p>\n
\n The HTML consists of elements that are positioned using CSS, and includes the polyfill JavaScript:\n<\/p>\n
<div class=\"blue><\/div><!--text placeholders omitted for clarity-->\r\n<div class=\"yellow\"><\/div>\r\n<div class=\"pink\"><\/div>\r\n<div class=\"green\"><\/div>\r\n<div class=\"fold angled stripes\"><\/div>\r\n<!-- Polyfills for dual screen capabilities -->\r\n<script src=\"js\/spanningcsspolyfill.js\"><\/script>\r\n<script src=\"js\/windowsegmentspolyfill.js\"><\/script><\/pre>\n
\n The CSS uses the dual-screen @media<\/strong> query for screen-spanning<\/strong> to position the elements differently for each screen configuration (excerpt shown):\n<\/p>\n
@media (screen-spanning: single-fold-vertical) {\r\n .fold {\r\n height: env(fold-height);\r\n width: env(fold-width);\r\n left: env(fold-left);\r\n top: 0;\r\n }\r\n .blue {\r\n left: calc(env(fold-left) - 100px);\r\n }\r\n .yellow {\r\n width: calc(100vw - env(fold-left) - env(fold-width)); \/*fold-right*\/\r\n left: calc(env(fold-left) + env(fold-width)); \/*fold-right*\/\r\n top: 0;\r\n }\r\n \/* other styles *\/\r\n }\r\n @media (screen-spanning: single-fold-horizontal) {\r\n \/* double-landscape styles *\/ \r\n }\r\n @media (screen-spanning: none) {\r\n .fold {\r\n height: 0;\r\n width: 0;\r\n }\r\n \/* other single-screen styles *\/ \r\n}<\/pre>\n\n Finally, a resize event listener uses the plugin to detect when the app is spanned and supply relevant information to update the polyfills (which in turn processes the CSS and updates the layout):\n<\/p>\n
window.ScreenHelper.getHinge(\r\n function(result) { \r\n var h = new Hinge (result);\r\n if (h.isSpanned) {\r\n if (h.isVertical) {\r\n window[\"__foldables_env_vars__\"].update({spanning: 'single-fold-vertical', foldSize: parseInt(h.width)});\r\n } else { \/\/ isHorizontal\r\n window[\"__foldables_env_vars__\"].update({spanning: 'single-fold-horizontal', foldSize: parseInt(h.height)});\r\n }\r\n } else { \/\/ not spanned\r\n window[\"__foldables_env_vars__\"].update({spanning: 'none', foldSize: 0});\r\n }<\/pre>\nPhoto Gallery sample<\/h2>\n
\n This photo gallery sample<\/a> was created to demonstrate the foldable CSS @media screen-spanning<\/strong> feature in the browser<\/a>. It was embedded in a Cordova sample app using the approach described above to enable the CSS and JavaScript polyfills. The source is available on GitHub<\/a>, and a screenshot is shown below:\n<\/p>\n
![\"Cordova](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/cordova-photo-gallery.jpg\")
<\/a>Feedback<\/h2>\n
\n If you are using Cordova, Ionic, or any other web-based app deployment tools we\u2019d love to hear about your app and how it might be enhanced for dual-screens. \n<\/p>\n
\n Please reach to out to the team using our\u00a0feedback forum<\/a>\u00a0or message us on Twitter @surfaceduodev<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello hybrid app developers, This week I\u2019m happy to share an example plugin for use with Cordova that will help to enhance your hybrid apps for dual-screens. The plugin includes DisplayMask.jar to detect the Surface Duo and return information about the masked hinge area when the app is spanned, and exposes it in JavaScript for […]<\/p>\n","protected":false},"author":570,"featured_media":1128,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[707,31,708,412,530],"class_list":["post-1127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-cordova","tag-dual-screen-development","tag-hybrid","tag-javascript","tag-web"],"acf":[],"blog_post_summary":"
Hello hybrid app developers, This week I\u2019m happy to share an example plugin for use with Cordova that will help to enhance your hybrid apps for dual-screens. The plugin includes DisplayMask.jar to detect the Surface Duo and return information about the masked hinge area when the app is spanned, and exposes it in JavaScript for […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/570"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1127"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1127\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1128"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n