davecoffin / nativescript-blur Goto Github PK

The blur is simply too strong and none of the underlying content can be seen very well. Is there any way to decrease the amount of blur?

I can successfully apply the blur upon any element you defined in your instructions.
But my initial intend was to get a blurry overlay effect like the following:

How can I apply the blur effect to the background?

Using IOS platform on emulator & passing a nativeView object, from a reference.
tns version 4.1.2. iOS & android both 3.0.0 within package.json within tns-core-modules

Blur artifacts also visible.

<StackLayout ref="overlay">
this.blur.on(this.$refs.overlay, "blurMe", 10, 'regular', 1.0).catch(this.handleError);

full package.json dependencies

{
"name": "app",
"version": "1.0.0",
"description": "A native application built with NativeScript-Vue",
"author": "soup",
"license": "Proprietary",
"scripts": {
"build": "webpack --env.tnsAction build",
"build:android": "npm run build -- --env.android",
"build:ios": "npm run build -- --env.ios",
"debug": "webpack --watch --env.tnsAction debug",
"debug:android": "npm run debug -- --env.android",
"debug:ios": "npm run debug -- --env.ios",
"watch": "webpack --watch --env.tnsAction run",
"watch:android": "npm run watch -- --env.android",
"watch:ios": "npm run watch -- --env.ios",
"clean": "rimraf dist"
},
"dependencies": {
"mdi": "^2.2.43",
"nativescript-animate-sass": "0.0.2",
"nativescript-blur": "^2.0.0",
"nativescript-camera": "^4.1.1",
"nativescript-dev-sass": "^1.6.0",
"nativescript-gradient": "^2.0.1",
"nativescript-screenshot": "0.0.2",
"nativescript-theme-core": "^1.0.4",
"nativescript-ui-core": "^1.0.1",
"nativescript-ui-sidedrawer": "^4.1.1",
"nativescript-vue": "^1.3.1",
"tns-core-modules": "4.2.0-2018-06-14-04",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"fs-extra": "^5.0.0",
"nativescript-vue-externals": "^0.2.0",
"nativescript-vue-loader": "^0.1.5",
"nativescript-vue-target": "^0.1.0",
"nativescript-vue-template-compiler": "^1.3.1",
"node-sass": "^4.7.2",
"ns-vue-loader": "^0.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"vue-template-compiler": "^2.5.16",
"webpack": "^3.11.0",
"webpack-synchronizable-shell-plugin": "0.0.7",
"winston-color": "^1.0.0"
},
"nativescript": {
"id": "org.nativescript.vuecc",
"tns-ios": {
"version": "4.2.0-2018.6.26.3"
},
"tns-android": {
"version": "4.2.0-2018-05-31-01"
}
}
}

Hello, i am trying to run a the blur test on the image, but i get an error Cannot read property 'blurkit' of undefined:

System.err: TypeError: Cannot read property 'blurkit' of undefined System.err: File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 1, column: 14485 System.err: System.err: StackTrace: System.err: Frame: function:'e', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 146404 System.err: Frame: function:'onTap', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 146147 System.err: Frame: function:'n', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 6984 System.err: Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16227 System.err: Frame: function:'e.$emit', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 113488 System.err: Frame: function:'onTap', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 141808 System.err: Frame: function:'n', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 6984 System.err: Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16227 System.err: Frame: function:'Observable.notify', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/data/observable/observable.js', line: 103, column: 23 System.err: Frame: function:'Observable._emit', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/data/observable/observable.js', line: 120, column: 18 System.err: Frame: function:'ClickListenerImpl.onClick', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/button/button.js', line: 26, column: 23 System.err: System.err: at com.tns.Runtime.callJSMethodNative(Native Method) System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088) System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:970) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:957) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:941) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:933) System.err: at com.tns.gen.java.lang.Object_button_19_32_ClickListenerImpl.onClick(Object_button_19_32_ClickListenerImpl.java:12) System.err: at android.view.View.performClick(View.java:6261) System.err: at android.widget.TextView.performClick(TextView.java:11157) System.err: at android.view.View$PerformClick.run(View.java:23748) System.err: at android.os.Handler.handleCallback(Handler.java:751) System.err: at android.os.Handler.dispatchMessage(Handler.java:95) System.err: at android.os.Looper.loop(Looper.java:154) System.err: at android.app.ActivityThread.main(ActivityThread.java:6776) System.err: at java.lang.reflect.Method.invoke(Native Method) System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1520) System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1410) ActivityManager: Process org.nativescript.application (pid 5444) has died(206,892) ActivityManager: cleanUpApplicationRecord -- 5444

Maybe i am missing some packages?

Which platform(s) does your issue occur on?

• Android

I know that the documentation says only images can be blurred on Android but Is there any workaround to blur a nativescript view on Android such as a StackLayout ? I'm trying to blur the entire screen except the ActionBar and I would like to keep it consistent between the IOS and Android versions.

Thank you

Hi,

Just wanted to make a suggestion:
Would it be possible to make the wrapper use this cocoa plugin for iOS platform instead https://github.com/KyoheiG3/DynamicBlurView ?

It seems to support blur radius on iOS and as far as I could try, it seems very performant.

Thanks!

Hi

Demo app is crashing on iOS during the startup.

Which platform(s) does your issue occur on?

• iOS
• Verified it on iOS 10.3 and 11.0
• emulator.

Please, provide the following version numbers that your issue occurs with:

• CLI: 3.2.1

Which platform(s) does your issue occur on?

I am using android version 6.0

emulator or device. What type of device?
nexus 5 , emulator version 26.1.4-4266726

• CLI: 3.4.3

• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)

• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
  "android": "3.0.0"

• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)
  "version": "3.4.2"

"dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "nativescript-angular": "~5.2.0",
    "nativescript-blur": "^2.0.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.5.5",
    "tns-core-modules": "3.4.1",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~1.9.4",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "~0.9.1",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
  }

also I have added the options you said to add in the defaultConfig in my /app/App_Resources/Android/app.gradle

  defaultConfig {  
    generatedDensities = []
    applicationId = "org.nativescript.test2"  
    renderscriptTargetApi 25
    renderscriptSupportModeEnabled true
  }  

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

• I did not do much just created an angular template the blank one
• installed the plugin with tns plugin add nativescript-blur
• then put those two lines to check if everything is oka i have tried to import with the typescript way but , it generates the same error.

let Blur = require("nativescript-blur").Blur;
let blur = new Blur();

This is the error produced:

JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'init' of undefined
JS: TypeError: Cannot read property 'init' of undefined
JS:     at new Blur (file:///data/data/org.nativescript.test2/files/app/tns_modules/nativescript-blur/blur.js:8:39)
JS:     at Object.<anonymous> (file:///data/data/org.nativescript.test2/files/app/home/home.component.js:5:12)
JS:     at require (<anonymous>:1:266)
JS:     at Object.<anonymous> (file:///data/data/org.nativescript.test2/files/app/home/home-routing.module.js:5:24)
JS:     at require (<anonymous>:1:266)
JS:     at Object.<anonymous> (file:///data/data/org.nativescript.test2/files/app/home/home.module.js:5:29)
JS:     at require (<anonymous>:1:266)
JS:     at file:///data/data/org.nativescript.test2/files/app/tns_modules/tns-core-modules/globals/globals.js:92:32
JS:     at new ZoneAwarePromise (file:///data/data/org.nativescript.test2/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:777:29)
JS:     at Object.import (file:///data/data/org.nativescript.test2/files/app/tns_modules/tns-core-modules/globals/globals.js:90:16)
JS:     at SystemJsNgModuleLoader.loadAndCompile (file:///data/data/org.nativescript.test2/files/app/tns_modules/@angular/core/bundles/core.umd.js:6596:29)
JS:     at SystemJsNgModuleLoader.load (file:///data/data/org.nativescript.test2/files/app/tns_modules/@angular/core/bundles/core.umd.js:6580:60)
JS:     at RouterConfigLoader.loadModuleFactory (file:///data/data/org.nativescript.test2/files/app/tns_modules/@angular/router/bundles/router.umd.js:4611:72)
JS:     at RouterConfigLoader.load (file:///data/data/org.nativescript.test2/files/app/tns_modules/@angular/router/bundles/router.umd.js:4591:52)
JS:     at MergeMapSubscriber.project (file:///data/data/org.nativescript.test2/files/app/tns_modules/@angular/router/bundles/router.umd.js:2083:74)