Power App Plugin

[luishp]

Yet another plugin before the year ends

This plugin will be populated with aditional actions. Right now it allows at run time to:

-Align the App vertically and horizontally.
-Set a background color for the surrounding App limits.
-Set a background image for the surrounding App limits.
-Set rounded corners for any page (or object).
-Set a drop shadow for any page.
-Set a zoom factor for any page.
-Set a rotation angle for any page.

Sample App:
http://sinlios.com/neoappbuilder/plugins/powerapp

You can download this free plugin here:
http://sinlios.com/neoappbuilder/plugins/powerapp/power-app.nabp.zip

Any comments welcome.
Happy new year!!

Regards.

[Roxie]

Thank you.

And Happy New Years.

[Neosoft Support]

You're giving the PlugIn Generator a good workout!

[luishp]

I have added three new important actions (please update the plugin following the above links):

-One to scale the app dinamically in LetterBox Mode (Full Screen, proportionaly).
-Another one to scale the app in Deform Mode (Full Screen, not proportional).
-Return to original scale.

These scale modes are independent from NAB own auto-size project properties so keep them unchecked to avoid conflicts.
Regards.

[luishp]

I have added three more actions:

slRequestFullScreen
Request to enter full screen mode on movile devices. The only important restriction to remember when requesting fullscreen mode is that we should do it only after a user's interaction. For example, activated by a touch operation.
Works fine on Google Chrome, Firefox OS, Firefox for Android, BlackBerry OS 10 and Amazon Silk.

slChangeInputType inputObject, newType, initValue
Changes the Type atribute of an Input Object so you can use some HTML5 new ones:
datetime-local, color, date, email, month, number, tel, time, url, week.
Input types, not supported by old web browsers, will behave as input type text.

slChangeMetaViewport newMeta
Deletes the current <meta name="viewport"...> tag and adds a new one.
Usefull to adapt your app according to current screen size. Only works on mobile devices.

Download link updated.

[luishp]

Yet three more actions:

slLoadJS url
Get and run a JavaScript file (.js) using an AJAX request.

slLoadCSS url
Get and run a CSS file (.css) dinamically.

slLoadHTML objectd url
Loads a file from a server and puts the returned data into the selected object.
Specify a .html or .txt file path in the url.

Download link updated.

[luishp]

Two more actions added:

slLoadGoogleFont fontName
Loads a font from Google Fonts at run time

slScaleAppFitWidth width height
Scales the App to fit the complete screen with keeping original ratio
Content outside is clipped and accesible through scrollbar.
Ideal for long content like websites.

[luishp]

One more action added:

slSubmitForm
Submits the info in a NAB Form to a URL programatically.

[luishp]

Another function added:

slTalk "text" "language"
Uses the speech engine to talk aloud the text. Only on Chrome (desktop or mobile)

[luishp]

I have decided to Open Source this plugin in the hope it will be of inspiration for new plugin developers as it has a lot of different samples.
The source code file is now included on the download link (see first post on this thread).
The plugin has not external dependencies, so it is easy to share here.
Please if you do any enhancement or add aditional options consider to share it here so I can update the plugin for everyone.

Anyway here it is the whole Code:

Code: Select all

function slTalk(texto,lang){
    if('speechSynthesis' in window){
    var speech = new SpeechSynthesisUtterance(texto);
         if(lang==""){
        speech.lang = lang;
         }else{
             speech.lang = 'en-US';
         }
    window.speechSynthesis.speak(speech);
    }
}
function slSubmitForm(formulario,url){
   var neoApp = angular.element(document.getElementById("ng-view")).scope();
   neoApp.SubmitForm(formulario,url,'POST',neoApp.Form1_submit,neoApp.Form1_success,neoApp.Form1_fail);
}
function slCenterApp(ancho,alto){
  $( "body" ).css( "width", ancho+"px");
  $( "body" ).css( "height", alto+"px");
  $( "body" ).css( "position", "absolute");
  $( "body" ).css( "top", "0px");
  $( "body" ).css( "bottom", "0px");
  $( "body" ).css( "left", "0px");
  $( "body" ).css( "right", "0px");
  $( "body" ).css( "margin", "auto");
}
function slAppBackgroundColor(color){
  $( "body" ).css( "background-color", color);
}

function slAppBackgroundImage(url){
  $( "body" ).css( "background-image", "url('"+url+"')");
  $( "body" ).css( "background-repeat", "no-repeat");
  $( "body" ).css( "background-size", "cover");
}

function slPageRoundedCorners(page,radius){
  $("#"+page).css( "border-radius", radius+"px");
}

function slPageShadow(page,horizontal,vertical,theblur,thecolor){
  $("#"+page).css( "box-shadow", horizontal+"px "+vertical+"px "+theblur+"px "+thecolor);
}

function slPageSetZoom(page,thezoom){
  $("#"+page).css( "transform", "scale("+thezoom+","+thezoom+")");
}
function slAppSetZoom(thezoom){
  $( "html" ).css( "transform-origin","0 0");
  $( "html" ).css( "transform", "scale("+thezoom+","+thezoom+")");
}
function slAppSetZoom2(thezoom){
  $( "html" ).css( "transform-origin","50% 50%");
  $( "html" ).css( "transform", "scale("+thezoom+","+thezoom+")");
}

function slPageSetRotation(page,angle){
  $("#"+page).css( "transform", "rotate("+angle+"deg)");
}
function slScaleAppFitWidth(ancho,alto){
   factor1=window.innerWidth/ancho;
   slCenterAppTop(ancho,alto,factor1);
   slAppSetZoom(factor1);
   window.onresize = function() {
      factor1=window.innerWidth/ancho;
      slCenterAppTop(ancho,alto,factor1);
      slAppSetZoom(factor1);
   }
}
function slCenterAppTop(ancho,alto,factor){
  altura=parseInt((alto*factor)/2);
  $( "html" ).css( "width", ancho+"px");
  $( "html" ).css( "height", alto+"px");
  $( "html" ).css( "position", "absolute");
  $( "html" ).css( "top", "0px");
  //$( "html" ).css( "bottom", "0px");
  $( "html" ).css( "left", "0px");
  //$( "html" ).css( "right", "0px");
  $( "html" ).css( "margin", "0px");
  $( "html" ).css( "overflow-x", "hidden");
  $( "html" ).css( "overflow-y", "auto");
}

function slScaleAppLetterBox(ancho,alto){
   slCenterApp(ancho,alto);
   aspect1=ancho/alto;
   aspect2=window.innerWidth/window.innerHeight;
   if(aspect1<aspect2){
      factor=window.innerHeight/alto;
   }else{
      factor=window.innerWidth/ancho;
   }
   if(factor>1){
        slAppSetZoom2(factor);
   }else{
        slAppSetZoom(factor);
   }
   window.onresize = function() {
      aspect1=ancho/alto;
      aspect2=window.innerWidth/window.innerHeight;
      if(aspect1<aspect2){
         factor=window.innerHeight/alto;
      }else{
         factor=window.innerWidth/ancho;
      }
      if(factor>1){
        slAppSetZoom2(factor);
      }else{
        slAppSetZoom(factor);
      }
   }
}
function slScaleAppDeform(ancho,alto){
   slCenterApp(ancho,alto);
   factor1=window.innerWidth/ancho;
   factor2=window.innerHeight/alto;
   $( "html" ).css( "transform-origin","50% 50%");
   $( "html" ).css( "transform", "scale("+factor1+","+factor2+")");
   window.onresize = function() {
      factor1=window.innerWidth/ancho;
      factor2=window.innerHeight/alto;
      $( "html" ).css( "transform", "scale("+factor1+","+factor2+")");
   }
}
function slScaleAppOriginalSize(ancho,alto){
   slCenterApp(ancho,alto);
   factor1=1;
   factor2=1;
   $( "html" ).css( "transform-origin","50% 50%");
   $( "html" ).css( "transform", "scale("+factor1+","+factor2+")");
   window.onresize = function() {
      factor1=1;
      factor2=1;
      $( "html" ).css( "transform", "scale("+factor1+","+factor2+")");
   }
}
function slRequestFullScreen(){
    var body = document.documentElement;
    if (body.requestFullscreen) {
      body.requestFullscreen();
    } else if (body.webkitrequestFullscreen) {
      body.webkitrequestFullscreen();
    } else if (body.mozrequestFullscreen) {
      body.mozrequestFullscreen();
    } else if (body.msrequestFullscreen) {
      body.msrequestFullscreen();
    }
}
function slChangeInputType(inputObject, newType, initValue){
    var oldInput = $("#"+inputObject);
    var newInput = oldInput.clone();
    newInput.attr("type", newType);
    newInput.attr("value", initValue);
    newInput.attr("id", "new"+inputObject);
    newInput.insertBefore(oldInput);
    oldInput.remove();
    newInput.attr("id", inputObject);
}
function slInputTypeRange(inputObject, minValue, maxValue){
    newType="range";
    var oldInput = $("#"+inputObject);
    var newInput = oldInput.clone();
    newInput.attr("type", newType);
    newInput.attr("min", minValue);
    newInput.attr("max", maxValue);
    newInput.attr("value", minValue);
    newInput.attr("id", "new"+inputObject);
    newInput.insertBefore(oldInput);
    oldInput.remove();
    newInput.attr("id", inputObject);
}
function slChangeMetaViewport(newMeta){
     $('head').remove('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
     $('head').append(newMeta);
}
function slLoadJS(url){
     $.getScript(url);
}
function slLoadCSS(url){
   $('<link rel="stylesheet" type="text/css" href="'+url+'" >')
   .appendTo("head");
}
function slLoadHTML(containerId,url){
   $("#"+containerId).load(url);
}
function slLoadGoogleFont(fontName){
    $("head").append("<link href='https://fonts.googleapis.com/css?family=" + fontName + "' rel='stylesheet' type='text/css'>");
}

[Neosoft Support]

Excellent idea!

[luishp]

I have updated the plugin (see link on first post in this thread).

All App scaling commands have been rewritten to be more consistent on all screen sizes.
Plugin source code is included.

Take a look at this sample app and be sure to resize the browser window:
https://sinlios.com/neoappbuilder/plugins/powerapp

If anyone is interested on scaling, I usually use the LetterBox scaling approach.
To get a crisp resolution on any screen size, I usually design in double width and height than the final targeted device so I can be sure even with retina display it will looks perfect.
It is also a good idea to use vector SVG graphics as they can be resized without quality lost (I design with Affinity Designer as the exported SVG can be used directly on NeoAppBuilder).

Regards.

[luishp]

I have updated the plugin again.
See first post for download links.

Two new commands:

slOpenModal ContainerId
Opens a container as a Modal Window.
It is possible to open various windows simultaneously.
Window will open at the exact position were the Container is placed.
This command allows any container to be used as a Modal Window, opening design possibilities. It also increase compatibility with modern libraries like BootStrap 4.
Remember to turn the Container "visible" property to False.

slCloseModal ContainerId
Closes a previously opened Modal Window

Sample App:
https://sinlios.com/neoappbuilder/plugi ... rapp/modal

Sample App Source Code:
https://sinlios.com/neoappbuilder/plugi ... dal.neoapp

[farhad2008]

very good and thanks

[luishp]

Added three new commands for using tabs:

slFixBootStrapTab
Fix problem when using BootStrap tabs.

slInitTabs "Container"
Initizalizes a container so every child container on it becomes a content tab

slShowTab "tab1"
Shows first tab of a container previously initialized. (use "tab2" "tab3"... for other tabs.)

I have updated the plugin and sample files:

Plugin and source code:
http://sinlios.com/neoappbuilder/plugin ... p.nabp.zip

Sample App:
https://sinlios.com/neoappbuilder/plugi ... app/modal/

Sample App Source Code:
https://sinlios.com/neoappbuilder/plugi ... dal.neoapp

Regards.