Source language: Translate to:

Power App Plugin

Questions, announcements and information regarding PlugIns for NeoAppBuilder

Moderator: Neosoft Support

Power App Plugin

Postby luishp » Thu Dec 31, 2015 9:46 am

Yet another plugin before the year ends :P

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Power App Plugin

Postby Roxie » Thu Dec 31, 2015 1:52 pm

Thank you.

And Happy New Years.
User avatar
Roxie
 
Posts: 35
Joined: Sat Apr 02, 2005 4:18 am
Location: Georgia

Re: Power App Plugin

Postby Neosoft Support » Thu Dec 31, 2015 5:30 pm

You're giving the PlugIn Generator a good workout!
NeoSoft Support
Neosoft Support
NeoSoft Team
 
Posts: 5603
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA

Re: Power App Plugin

Postby luishp » Fri Jan 01, 2016 1:25 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Power App Plugin

Postby luishp » Sun Jan 03, 2016 11:05 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Power App Plugin

Postby luishp » Mon Jan 04, 2016 12:22 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Power App Plugin

Postby luishp » Thu Jan 14, 2016 11:04 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Power App Plugin

Postby luishp » Mon Feb 08, 2016 9:12 am

One more action added:

slSubmitForm
Submits the info in a NAB Form to a URL programatically.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Power App Plugin

Postby luishp » Mon Mar 21, 2016 3:41 am

Another function added:

slTalk "text" "language"
Uses the speech engine to talk aloud the text. Only on Chrome (desktop or mobile)
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Power App Plugin

Postby luishp » Mon Mar 21, 2016 3:46 am

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'>");
}
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Power App Plugin

Postby Neosoft Support » Tue Mar 29, 2016 5:39 pm

Excellent idea!
NeoSoft Support
Neosoft Support
NeoSoft Team
 
Posts: 5603
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA

Re: Power App Plugin

Postby luishp » Sat Jul 01, 2017 3:57 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain


Return to NeoAppBuilder PlugIns

Who is online

Users browsing this forum: No registered users and 1 guest