{"id":2019,"date":"2024-11-25T11:06:48","date_gmt":"2024-11-25T16:06:48","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=2019"},"modified":"2026-01-30T20:31:53","modified_gmt":"2026-01-31T01:31:53","slug":"share-your-apps-with-matlab-online-and-focused-view-a-pumpkin-example","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/11\/25\/share-your-apps-with-matlab-online-and-focused-view-a-pumpkin-example\/","title":{"rendered":"Share your Apps with MATLAB Online and Focused View: A Pumpkin Example"},"content":{"rendered":"<table style=\"background-color: #e2f0ff\">\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 120px;padding: 3px;vertical-align: middle\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-405 size-full\" src=\"http:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2023\/10\/EricPortrait.png\" alt=\"\" width=\"150\" height=\"150\" \/><\/td>\r\n<td style=\"vertical-align: middle;padding: 3px\"><strong>Guest Writer: <span style=\"font-weight: bold\"><a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/869244\" target=\"_blank\" rel=\"noopener\">Eric Ludlam<\/a><\/span>\r\n<\/strong>Today Eric Ludlam shares three steps to share your app with others using a hyperlink. Eric is the development manager of MATLAB\u2019s charting team and a returning contributor to the Graphics and App Building blog.\u00a0 See Eric's full bio on our <a href=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/contributors\/\" target=\"_blank\" rel=\"noopener\">contributors page<\/a>.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<div class=\"rtcContent\">\r\n<div class=\"rtcContent\">\r\n<div><\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Over on the MathWorks LinkedIn, Facebook and Instagram feeds, we posted a link to a pumpkin designing app for people to try out for Halloween. It included this fun video showing how to use an app created with App Designer to create your own customized pumpkin.<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><div class=\"row\"><div class=\"col-xs-12 containing-block\"><div class=\"bc-outer-container add_margin_20\"><videoplayer><div class=\"video-js-container\"><video data-video-id=\"6365050876112\" data-video-category=\"blog\" data-autostart=\"false\" data-account=\"62009828001\" data-omniture-account=\"mathwgbl\" data-player=\"rJ9XCz2Sx\" data-embed=\"default\" id=\"mathworks-brightcove-player\" class=\"video-js\" controls><\/video><script src=\"\/\/players.brightcove.net\/62009828001\/rJ9XCz2Sx_default\/index.min.js\"><\/script><script>if (typeof(playerLoaded) === 'undefined') {var playerLoaded = false;}(function isVideojsDefined() {if (typeof(videojs) !== 'undefined') {videojs(\"mathworks-brightcove-player\").on('loadedmetadata', function() {playerLoaded = true;});} else {setTimeout(isVideojsDefined, 10);}})();<\/script><\/div><\/videoplayer><\/div><\/div><\/div><\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">The best part is it's easy to jump from a simple link in your browser to trying out the app using MATLAB Online. Here, give it a try:<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">\r\n\r\n<a href=\"https:\/\/matlab.mathworks.com\/open\/github\/v1?repo=MATLAB-Graphics-and-App-Building\/pumpkin-designer&amp;file=pumpkindesigner.mlapp&amp;focus=true\"><img decoding=\"async\" class=\"\" src=\"https:\/\/www.mathworks.com\/images\/responsive\/global\/open-in-matlab-online.svg\" alt=\"Open in MATLAB Online\" \/><\/a>\r\n\r\n<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">While I happen to enjoy designing pumpkins in MATLAB, you probably have something different you're interested in and would like to share with your colleagues or friends. To that end, let's look at this new feature that showed up for MATLAB Online over the summer of 2024. These steps will let you create and share an app the same way we shared the pumpkin app.<\/div>\r\n<h2 style=\"margin: 20px 10px 5px 4px;padding: 0px;line-height: 25px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Step 1: Build your App<\/h2>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Open up appdesigner and select the type of app you want to build. I used the \"2-Panel App with Auto Reflow\"<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><img decoding=\"async\" loading=\"lazy\" class=\"imageNode\" style=\"vertical-align: baseline;width: 505px;height: 359px\" src=\"http:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/11\/PumpkinDesignerAndFocusMode.mlx-11-23-24_2.png\" alt=\"\" width=\"505\" height=\"359\" \/><\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">For simple concepts with a few parameters and a graphic, this type of app is useful because it handles figure resizes nicely, and it's easy to explore how modifying values in the UI can impact your data visualization.<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">For more on building Apps in App Designer, try these tutorials:<\/div>\r\n<ul style=\"margin: 10px 0px 20px;padding-left: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size: 14px\">\r\n \t<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\"><a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2024b\/matlab\/app-designer.html\" target=\"_blank\" rel=\"noopener\">Getting Started with App Designer<\/a><\/li>\r\n \t<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\"><a href=\"https:\/\/www.mathworks.com\/support\/search.html?s_eid=PSM_24659&amp;fq%5B%5D=asset_type_name:video&amp;fq%5B%5D=category:matlab\/app-designer&amp;page=1\" target=\"_blank\" rel=\"noopener\">Develop Apps Using App Designer - Videos<\/a><\/li>\r\n \t<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\"><a href=\"https:\/\/matlabacademy.mathworks.com\/details\/app-building-onramp\/orab\" target=\"_blank\" rel=\"noopener\">App Building Onramp<\/a><\/li>\r\n<\/ul>\r\n<h2 style=\"margin: 20px 10px 5px 4px;padding: 0px;line-height: 25px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Step 2: Upload to GitHub<\/h2>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">If you don't have an account on GitHub, you can create one for free and create your first repository.<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><img decoding=\"async\" loading=\"lazy\" class=\"imageNode\" style=\"vertical-align: baseline;width: 225px;height: 159px\" src=\"http:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/11\/PumpkinDesignerAndFocusMode.mlx-11-23-24_3.png\" alt=\"\" width=\"225\" height=\"159\" \/><\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">If you aren't familiar with using GitHub and MATLAB, you can check out this short tutorial.<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><a href=\"https:\/\/youtu.be\/O7A27uMduo0?si=YQzu--pNkwXwh_3m\" target=\"_blank\" rel=\"noopener\">How to use Source Control in MATLAB with GitHub<\/a><\/div>\r\n<h2 style=\"margin: 20px 10px 5px 4px;padding: 0px;line-height: 25px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Step 3: Add an Open in MATLAB Online button to your README<\/h2>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Once you have an app you want to share, you can visit <a href=\"https:\/\/www.mathworks.com\/products\/matlab-online\/git.html\">\"Open in MATLAB Online from GitHub\" doc page<\/a> to create your own link!<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><img decoding=\"async\" loading=\"lazy\" class=\"imageNode\" style=\"vertical-align: baseline;width: 535px;height: 348px\" src=\"http:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/11\/PumpkinDesignerAndFocusMode.mlx-11-23-24_4.png\" alt=\"\" width=\"535\" height=\"348\" \/><\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">I added a <span style=\"font-weight: bold\">RED<\/span> box around the \"File path\" - this can be your app designer app, OR it can be a Live script that will be opened so the person who clicks the link can start interacting with your content right away.<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">I added an <span style=\"font-weight: bold\">ORANGE<\/span> box around the \"Open in Focused view\" toggle. When toggled on, the app or live script will fill the browser when opened, providing a full-screen experience for your content. If you leave this toggle unchecked, then the app will open in a window in MATLAB Online. This is handy if you want the person who clicked the link to easily explore the underlying code, build off it, and collaborate with the MATLAB Desktop.<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Once you've created your links, you can paste the URL into an email, or paste the markdown into your <span style=\"font-family: monospace\">README.md<\/span>, and you'll get a button that will let visitors to your GitHub page open your app directly in MATLAB Online to try it out.<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Your button will look like this. To try out my pumpkin app give it a click to see what the workflow is like.<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><a href=\"https:\/\/matlab.mathworks.com\/open\/github\/v1?repo=MATLAB-Graphics-and-App-Building\/pumpkin-designer&amp;file=pumpkindesigner.mlapp&amp;focus=true\"><img decoding=\"async\" loading=\"lazy\" class=\"imageNode\" style=\"vertical-align: baseline;width: 185px;height: 28px\" src=\"http:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/11\/PumpkinDesignerAndFocusMode.mlx-11-23-24_1.png\" alt=\"\" width=\"185\" height=\"28\" \/><\/a><\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">I turned on the \"Focused View\" toggle when making my link, so if you clicked the above link your view will look like this, filling the whole browser page. Your users will still get a button in the corner (circled) to access the desktop if they need it.<\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><img decoding=\"async\" loading=\"lazy\" class=\"imageNode\" style=\"vertical-align: baseline;width: 541px;height: 358px\" src=\"http:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/11\/PumpkinDesignerAndFocusMode.mlx-11-23-24_6.png\" alt=\"\" width=\"541\" height=\"358\" \/><\/div>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">For more on focused view:<\/div>\r\n<ul style=\"margin: 10px 0px 20px;padding-left: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size: 14px\">\r\n \t<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\"><a href=\"https:\/\/www.mathworks.com\/products\/matlab-online\/focused-view.html\" target=\"_blank\" rel=\"noopener\">Focused View for MATLAB Apps and Live Scripts<\/a><\/li>\r\n<\/ul>\r\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Share your favorite pumpkin, or App \/ Live Script via this functionality in the comments below!<\/div>\r\n<\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img src=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/11\/OpenInMLO_focusedApp.png\" class=\"img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/div><p>\r\n\r\n\r\n\r\nGuest Writer: Eric Ludlam\r\nToday Eric Ludlam shares three steps to share your app with others using a hyperlink. Eric is the development manager of MATLAB\u2019s charting team and a returning... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/11\/25\/share-your-apps-with-matlab-online-and-focused-view-a-pumpkin-example\/\">read more >><\/a><\/p>","protected":false},"author":198,"featured_media":2040,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,11,20],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts\/2019"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/users\/198"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/comments?post=2019"}],"version-history":[{"count":10,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts\/2019\/revisions"}],"predecessor-version":[{"id":3647,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts\/2019\/revisions\/3647"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/media\/2040"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/media?parent=2019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/categories?post=2019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/tags?post=2019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}