Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closes without error on Android #20

Closed
darkyelox opened this issue Feb 16, 2021 · 12 comments
Closed

Closes without error on Android #20

darkyelox opened this issue Feb 16, 2021 · 12 comments

Comments

@darkyelox
Copy link

When I create a simple view where I try to draw it closes the app unexpectedly with no error, when the app doesn't close the canvas draws nothing, on iOS works perfectly.

NativeScript Core: 7.2.1
NativeScript Android: 7.0.1
@nativescript-community/ui-canvas: 0.9.9

@triniwiz
Copy link
Member

@darkyelox the package is @nativescript/canvas not @nativescript-community/ui-canvas , so atm android isn't perfect as I would like it to be that said it would be helpful to get some more info.

  1. Device or Emulator if it's a real device what is the model
  2. which context are you trying 2D, WebGL/WebGL2
  3. Can you send me the ADB logs it would be really helpful in perfecting this

@darkyelox
Copy link
Author

Sorry my bad, actually the package version is ok but I copied the wrong package name, I'm trying to use 2D context, the single call to const canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D; breaks the app, I'm running on a Genymotion With Android 10 image (Galaxy S10)

I did remove the community library and test again.

ADB output between opening and crash of the app:

02-17 09:16:15.233   641   679 V DisplayPowerController: Brightness [102] reason changing to: 'manual', previous reason: 'manual [ dim ]'.
02-17 09:16:15.261   164   164 I hwservicemanager: getTransport: Cannot find entry [email protected]::ILight/default in either framework or device manifest.
02-17 09:16:15.334   641  1529 I ActivityTaskManager: START u0 {act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] flg=0x10200000 cmp=com.dragonfly.mindfulsynchrony/com.tns.NativeScriptActivity bnds=[585,1179][854,1618]} from uid 10085
02-17 09:16:15.329   164   164 I chatty  : uid=1000(system) hwservicemanage identical 4 lines
02-17 09:16:15.346   164   164 I hwservicemanager: getTransport: Cannot find entry [email protected]::ILight/default in either framework or device manifest.
02-17 09:16:15.350   282   282 D Zygote  : Forked child process 4803
02-17 09:16:15.351  4803  4803 I Zygote  : seccomp disabled by setenforce 0
02-17 09:16:15.352  4803  4803 I indfulsynchron: Late-enabling -Xcheck:jni
02-17 09:16:15.355   641   672 I ActivityManager: Start proc 4803:com.dragonfly.mindfulsynchrony/u0a129 for activity {com.dragonfly.mindfulsynchrony/com.tns.NativeScriptActivity}
02-17 09:16:15.361  4803  4803 E indfulsynchron: Unknown bits set in runtime_flags: 0x8000
02-17 09:16:15.361  4803  4803 W indfulsynchron: Unexpected CPU variant for X86 using defaults: x86
02-17 09:16:15.363   164   164 I hwservicemanager: getTransport: Cannot find entry [email protected]::ILight/default in either framework or device manifest.
02-17 09:16:15.380   164   164 I chatty  : uid=1000(system) hwservicemanage identical 1 line
02-17 09:16:15.397   164   164 I hwservicemanager: getTransport: Cannot find entry [email protected]::ILight/default in either framework or device manifest.
02-17 09:16:15.401   641   666 E system_server: Invalid ID 0x00000000.
02-17 09:16:15.414   164   164 I hwservicemanager: getTransport: Cannot find entry [email protected]::ILight/default in either framework or device manifest.
02-17 09:16:15.835   288  4322 D genymotion_audio: out_write: pcm_write() with out_frames=557 frame_size=4 returned -EPIPE
02-17 09:16:15.735   164   164 I chatty  : uid=1000(system) hwservicemanage identical 12 lines
02-17 09:16:15.755   164   164 I hwservicemanager: getTransport: Cannot find entry [email protected]::ILight/default in either framework or device manifest.
02-17 09:16:15.835   288  4322 W StreamHAL: Error from HAL stream in function write: Broken pipe
02-17 09:16:15.840   307   509 E AudioStreamOutSink: Error while writing data to HAL: -61
02-17 09:16:16.007  4803  4803 I FirebaseApp: Device unlocked: initializing all Firebase APIs for app [DEFAULT]
02-17 09:16:16.436   288  4322 W StreamHAL: Error from HAL stream in function write: Broken pipe
02-17 09:16:16.438   307   509 E AudioStreamOutSink: Error while writing data to HAL: -61
02-17 09:16:16.535  4803  4833 W DynamiteModule: Local module descriptor class for com.google.firebase.auth not found.
02-17 09:16:16.694  4803  4803 W FirebaseCrashlytics: A new version of the Google Analytics for Firebase SDK is now available. For improved performance and compatibility with Crashlytics, please update to the latest version.
02-17 09:16:16.731  4803  4836 W DynamiteModule: Local module descriptor class for com.google.firebase.auth not found.
02-17 09:16:16.748  4803  4836 I FirebaseAuth: [FirebaseAuth:] Preparing to create service connection to gms implementation
02-17 09:16:16.767   288  4322 W StreamHAL: Error from HAL stream in function write: Broken pipe
02-17 09:16:16.767   307   509 E AudioStreamOutSink: Error while writing data to HAL: -61
02-17 09:16:16.768  1664  1664 D BoundBrokerSvc: onBind: Intent { act=com.google.firebase.auth.api.gms.service.START pkg=com.google.android.gms }
02-17 09:16:16.768  1664  1664 D BoundBrokerSvc: Loading bound service for intent: Intent { act=com.google.firebase.auth.api.gms.service.START pkg=com.google.android.gms }
02-17 09:16:16.822  4803  4803 I FirebaseCrashlytics: Initializing Crashlytics 17.2.2
02-17 09:16:16.849  4803  4803 I FirebaseInitProvider: FirebaseApp initialization successful
02-17 09:16:16.851  4803  4831 I FA      : App measurement initialized, version: 21028
02-17 09:16:16.855  4803  4831 I FA      : To enable debug logging run: adb shell setprop log.tag.FA VERBOSE
02-17 09:16:16.868  4803  4831 I FA      : To enable faster debug mode event logging run:
02-17 09:16:16.868  4803  4831 I FA      :   adb shell setprop debug.firebase.analytics.app com.dragonfly.mindfulsynchrony
02-17 09:16:17.051  4803  4803 I TNS.Runtime: NativeScript Runtime Version 7.0.1, commit no commit sha was provided by build.gradle build
02-17 09:16:17.626  4803  4803 D TNS.Runtime: V8 version 8.3.110.9
02-17 09:16:17.979   641   666 I Choreographer: Skipped 152 frames!  The application may be doing too much work on its main thread.
02-17 09:16:18.600  4803  4803 I JS      : NativeScript-globalevents auto disabled; functionality appears to be already present!
02-17 09:16:16.436   288  4322 I chatty  : uid=1041(audioserver) writer identical 1 line
02-17 09:16:16.767   288  4322 D genymotion_audio: out_write: pcm_write() with out_frames=557 frame_size=4 returned -EPIPE
02-17 09:16:18.693   641  1527 W ActivityManager: Unable to start service Intent { act=android.support.customtabs.action.CustomTabsService pkg=com.android.chrome } U=0: not found
02-17 09:16:18.702  4803  4852 D libEGL  : Emulator has host GPU support, qemu.gles is set to 1.
02-17 09:16:18.696  4803  4803 I RenderThread: type=1400 audit(0.0:224): avc: denied { write } for name="property_service" dev="tmpfs" ino=9353 scontext=u:r:untrusted_app_27:s0:c129,c256,c512,c768 tcontext=u:object_r:property_socket:s0 tclass=sock_file permissive=1 app=com.dragonfly.mindfulsynchrony
02-17 09:16:18.696  4803  4803 I RenderThread: type=1400 audit(0.0:225): avc: denied { connectto } for path="/dev/socket/property_service" scontext=u:r:untrusted_app_27:s0:c129,c256,c512,c768 tcontext=u:r:init:s0 tclass=unix_stream_socket permissive=1 app=com.dragonfly.mindfulsynchrony
02-17 09:16:18.707  4803  4852 D libEGL  : loaded /vendor/lib/egl/libEGL_emulation.so
02-17 09:16:18.708  4803  4852 D libEGL  : loaded /vendor/lib/egl/libGLESv1_CM_emulation.so
02-17 09:16:18.709  4803  4852 D libEGL  : loaded /vendor/lib/egl/libGLESv2_emulation.so
02-17 09:16:18.805  4803  4803 I JS      : DATABASE EXISTS true
02-17 09:16:18.808  4803  4803 I JS      : ERROR HANDLING INITIALIZED!
02-17 09:16:18.809  4803  4803 I JS      : MOMENT JS INITIALIZED!
02-17 09:16:18.814  4803  4803 W indfulsynchron: Accessing hidden field Llibcore/io/Libcore;->os:Llibcore/io/Os; (greylist, reflection, allowed)
02-17 09:16:18.816  4803  4853 D TNS.Runtime: V8 version 8.3.110.9
02-17 09:16:18.816  4803  4803 W indfulsynchron: Accessing hidden method Llibcore/io/ForwardingOs;->sysconf(I)J (greylist, reflection, allowed)
02-17 09:16:18.818  4803  4803 D LifecycleCallbacks: Unregistering the activity lifecycle callbacks...
02-17 09:16:18.818  4803  4803 D LifecycleCallbacks: Registering the activity lifecycle callbacks...
02-17 09:16:18.819  4803  4803 D FirebasePluginCB: Unregistering the activity lifecycle callbacks...
02-17 09:16:18.819  4803  4803 D FirebasePluginCB: Registering the activity lifecycle callbacks...
02-17 09:16:18.840  4803  4803 W indfulsynchron: Accessing hidden method Landroid/view/View;->computeFitSystemWindows(Landroid/graphics/Rect;Landroid/graphics/Rect;)Z (greylist, reflection, allowed)
02-17 09:16:18.840  4803  4803 W indfulsynchron: Accessing hidden method Landroid/view/ViewGroup;->makeOptionalFitsSystemWindows()V (greylist, reflection, allowed)
02-17 09:16:18.869  4803  4803 D LocalNotifyPlugin: onActivityPaused: Application has been started
02-17 09:16:18.869  4803  4803 D FirebasePlugin: onActivityResumed: Application has been started
02-17 09:16:18.873  4803  4831 I FA      : Tag Manager is not found and thus will not be used
02-17 09:16:18.900  4803  4850 D         : HostConnection::get() New Host Connection established 0xe11539b0, tid 4850
02-17 09:16:18.902  4803  4850 D         : HostComposition ext GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object ANDROID_EMU_gles_max_version_3_0 
02-17 09:16:18.902  4803  4850 W         : Process pipe failed
02-17 09:16:18.911  4803  4850 W OpenGLRenderer: Failed to choose config with EGL_SWAP_BEHAVIOR_PRESERVED, retrying without...
02-17 09:16:18.912  4803  4850 D EGL_emulation: eglCreateContext: 0xe111b140: maj 3 min 0 rcv 3
02-17 09:16:18.959   164   164 I hwservicemanager: getTransport: Cannot find entry [email protected]::IMapper/default in either framework or device manifest.
02-17 09:16:18.962  4803  4850 W Gralloc3: mapper 3.x is not supported
02-17 09:16:18.969  4803  4850 D         : createUnique: call
02-17 09:16:18.984  4803  4850 D         : HostConnection::get() New Host Connection established 0xe1153c80, tid 4850
02-17 09:16:18.995  4803  4850 D         : HostComposition ext GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object ANDROID_EMU_gles_max_version_3_0 
02-17 09:16:18.996  4803  4850 E eglCodecCommon: goldfish_dma_create_region: could not obtain fd to device! fd -1 errno=2
02-17 09:16:19.055   641   670 I ActivityTaskManager: Displayed com.dragonfly.mindfulsynchrony/com.tns.NativeScriptActivity: +3s721ms
02-17 09:16:19.093  4803  4803 I JS      : query:  BEGIN TRANSACTION
02-17 09:16:19.097  4803  4803 I JS      : query:  SELECT * FROM "sqlite_master" WHERE "type" = 'table' AND "name" IN ('slide', 'slide_image', 'session', 'user_podcast_history', 'podcast', 'audio', 'category', 'faq', 'mentor', 'mentors_group', 'practice', 'program_rate', 'programs_group', 'programs_group_programs_program', 'program', 'program_type', 'user_recent', 'user_progress_info', 'user_synchronization_chart_data', 'buyable_product', 'user', 'push_notification', 'tag', 'settings', 'UserPodcastHistoryPodcasts', 'mentors_group_mentors_mentor', 'program_categories_category')
02-17 09:16:19.102  4803  4803 I JS      : query:  SELECT * FROM "sqlite_master" WHERE "type" = 'index' AND "tbl_name" IN ('slide', 'slide_image', 'session', 'user_podcast_history', 'podcast', 'audio', 'category', 'faq', 'mentor', 'mentors_group', 'practice', 'program_rate', 'programs_group', 'programs_group_programs_program', 'program', 'program_type', 'user_recent', 'user_progress_info', 'user_synchronization_chart_data', 'buyable_product', 'user', 'push_notification', 'tag', 'settings', 'UserPodcastHistoryPodcasts', 'mentors_group_mentors_mentor', 'program_categories_category')
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("slide")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("slide")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("slide")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("audio")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("audio")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("audio")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("faq")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("faq")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("faq")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("mentor")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("mentor")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("mentor")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("mentors_group")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("mentors_group")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("mentors_group")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("program_rate")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("program_rate")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("program_rate")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("programs_group")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("programs_group")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("programs_group")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("program_type")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("program_type")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("program_type")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("push_notification")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("push_notification")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("push_notification")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("tag")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("tag")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA foreign_key_list("tag")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA table_info("settings")
02-17 09:16:19.106  4803  4803 I JS      : query:  PRAGMA index_list("settings")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("settings")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("slide_image")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("slide_image")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("slide_image")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("session")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("session")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("session")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("user_podcast_history")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("user_podcast_history")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("user_podcast_history")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("podcast")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("podcast")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("podcast")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("category")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("category")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("category")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("practice")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("practice")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("practice")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("programs_group_programs_program")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("programs_group_programs_program")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("programs_group_programs_program")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("program")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("program")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("program")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("user_recent")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("user_recent")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("user_recent")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("user_progress_info")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("user_progress_info")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("user_progress_info")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("user_synchronization_chart_data")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("user_synchronization_chart_data")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("user_synchronization_chart_data")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("buyable_product")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("buyable_product")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("buyable_product")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("user")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("user")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("user")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("UserPodcastHistoryPodcasts")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("UserPodcastHistoryPodcasts")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("UserPodcastHistoryPodcasts")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("mentors_group_mentors_mentor")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("mentors_group_mentors_mentor")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("mentors_group_mentors_mentor")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA table_info("program_categories_category")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA index_list("program_categories_category")
02-17 09:16:19.107  4803  4803 I JS      : query:  PRAGMA foreign_key_list("program_categories_category")
02-17 09:16:19.175  4803  4803 I JS      : query:  PRAGMA index_info("sqlite_autoindex_session_1")
02-17 09:16:19.177  4803  4803 I JS      : query:  PRAGMA index_info("IDX_7cdd233352dca453272178bc49")
02-17 09:16:19.186  4803  4803 I JS      : query:  PRAGMA index_info("sqlite_autoindex_podcast_1")
02-17 09:16:19.192  4803  4803 I JS      : query:  PRAGMA index_info("sqlite_autoindex_practice_1")
02-17 09:16:19.197  4803  4803 I JS      : query:  PRAGMA index_info("sqlite_autoindex_program_1")
02-17 09:16:19.199  4803  4803 I JS      : query:  PRAGMA index_info("IDX_237158eb19da3efc89776244ca")
02-17 09:16:19.201  4803  4803 I JS      : query:  PRAGMA index_info("sqlite_autoindex_user_progress_info_1")
02-17 09:16:19.207  4803  4803 I JS      : query:  PRAGMA index_info("IDX_b4abb9a142013735a3fb66fac6")
02-17 09:16:19.214  4803  4803 I JS      : query:  PRAGMA index_info("sqlite_autoindex_buyable_product_1")
02-17 09:16:19.217  4803  4803 I JS      : query:  PRAGMA index_info("sqlite_autoindex_user_2")
02-17 09:16:19.217  4803  4803 I JS      : query:  PRAGMA index_info("sqlite_autoindex_user_1")
02-17 09:16:19.222  4803  4803 I JS      : query:  PRAGMA index_info("IDX_613d131c9375cb00e284d8769e")
02-17 09:16:19.222  4803  4803 I JS      : query:  PRAGMA index_info("IDX_f8d189de6857a30e2b01349d5e")
02-17 09:16:19.227  4803  4803 I JS      : query:  PRAGMA index_info("IDX_576d89cc0f10cf152a920d77a3")
02-17 09:16:19.227  4803  4803 I JS      : query:  PRAGMA index_info("IDX_5df4c762ffd383501196304bfb")
02-17 09:16:19.231  4803  4803 I JS      : query:  PRAGMA index_info("IDX_2c2fc6482d789b821e9eba374a")
02-17 09:16:19.231  4803  4803 I JS      : query:  PRAGMA index_info("IDX_c55d29577e139fe40f8e630cf3")
02-17 09:16:19.234  4803  4803 I JS      : query:  PRAGMA index_info("IDX_8fe2caaba9b216d4ed647c1765")
02-17 09:16:19.235  4803  4803 I JS      : query:  PRAGMA index_info("IDX_b58910ecbc8852353be4e37ac1")
02-17 09:16:19.240  4803  4803 I JS      : query:  PRAGMA index_info("IDX_ccd8bf0787865ff7000a5c049f")
02-17 09:16:19.251  4803  4803 I JS      : query:  SELECT * FROM "sqlite_master" WHERE "type" = 'table' AND "name" = 'typeorm_metadata'
02-17 09:16:19.267  4803  4803 I JS      : query:  COMMIT
02-17 09:16:19.270  4803  4803 I JS      : query:  SELECT * FROM "sqlite_master" WHERE "type" = 'table' AND "name" = 'migrations'
02-17 09:16:19.275  4803  4803 I JS      : query:  SELECT * FROM "migrations" "migrations" ORDER BY "id" DESC
02-17 09:16:19.277  4803  4803 I JS      : TYPEORM CONNECTION CREATED!
02-17 09:16:19.282  4803  4803 I JS      : FIREBASE INITIALIZED!
02-17 09:16:19.282  4803  4803 I JS      : APP FULLY INITIALIZED, DOING BOOTSTRAP
02-17 09:16:19.309  4803  4803 I JS      : Angular is running in development mode. Call enableProdMode() to enable production mode.
02-17 09:16:19.334  4803  4803 I canvasnative::android: Canvas Native library loaded
02-17 09:16:19.338  4803  4803 W indfulsynchron: Accessing hidden method Landroid/app/AppGlobals;->getInitialApplication()Landroid/app/Application; (greylist, reflection, allowed)
02-17 09:16:19.434  4803  4860 D         : HostConnection::get() New Host Connection established 0xc5feee10, tid 4860
02-17 09:16:19.436  4803  4860 D         : HostComposition ext GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object ANDROID_EMU_gles_max_version_3_0 
02-17 09:16:19.440  4803  4860 F libc    : ../../buildtools/third_party/libc++abi/trunk/src/abort_message.cpp:72: abort_message: assertion "terminate_handler unexpectedly threw an exception" failed
02-17 09:16:19.464   641   733 W InputDispatcher: channel '71e1b3e com.dragonfly.mindfulsynchrony/com.tns.NativeScriptActivity (server)' ~ Consumer closed input channel or an error occurred.  events=0x9
02-17 09:16:19.464   641   733 E InputDispatcher: channel '71e1b3e com.dragonfly.mindfulsynchrony/com.tns.NativeScriptActivity (server)' ~ Channel is unrecoverably broken and will be disposed!
02-17 09:16:19.465   282   282 I Zygote  : Process 4803 exited due to signal 6 (Aborted)
02-17 09:16:19.465   641   673 I libprocessgroup: Successfully killed process cgroup uid 10129 pid 4803 in 0ms
02-17 09:16:19.465   641  1529 I ActivityManager: Process com.dragonfly.mindfulsynchrony (pid 4803) has died: fore TOP 
02-17 09:16:19.465   641   933 I WindowManager: WIN DEATH: Window{71e1b3e u0 com.dragonfly.mindfulsynchrony/com.tns.NativeScriptActivity}
02-17 09:16:19.465   641   933 W InputDispatcher: Attempted to unregister already unregistered input channel '71e1b3e com.dragonfly.mindfulsynchrony/com.tns.NativeScriptActivity (server)'
02-17 09:16:19.474  1664  1664 D BoundBrokerSvc: onUnbind: Intent { act=com.google.firebase.auth.api.gms.service.START pkg=com.google.android.gms }
02-17 09:16:19.474   641  1529 W ActivityTaskManager: Force removing ActivityRecord{42fcc06 u0 com.dragonfly.mindfulsynchrony/com.tns.NativeScriptActivity t265}: app died, no saved state
02-17 09:16:19.480   641   665 W ActivityManager: setHasOverlayUi called on unknown pid: 4803

@triniwiz
Copy link
Member

Thanks another important thing when are you trying to call const canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D; loaded ?

@darkyelox
Copy link
Author

in the ready event, here is my code for reference:

<StackLayout>
    <Canvas #canvas  width="100%" height="100%" (ready)="onDraw($event)"></Canvas>
</StackLayout>
  onDraw(event: EventData) {
    const canvas = event.object as Canvas

    this.draw(canvas)
  }

  private draw(canvas: Canvas) {
    const canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D;

    console.log('hey')

    /* canvasContext.globalCompositeOperation = 'destination-over';
    canvasContext.clearRect(0, 0, this.viewPortWidth, this.viewPortHeight)
    canvasContext.setTransform(1, 0, 0, 1, 0, 0);

    canvasContext.save()

    const balloonPath = this.buildBalloonPath(this.viewPortSize, this.viewPortWidth, this.viewPortHeight, this.padding)

    canvasContext.lineJoin = 'round'
    canvasContext.lineCap = 'round'

    if (this.active) {
      canvasContext.fillStyle = !this.disabled ? this.activeColor.hex : this.disabledColor.hex
      canvasContext.fill(balloonPath)
    } else {
      canvasContext.strokeStyle = !this.disabled ? this.activeColor.hex : this.disabledColor.hex
      canvasContext.lineWidth = toDevicePixels(this.ballonBorderWidth)
      canvasContext.stroke(balloonPath)
    }

    this.drawPrimaryText(this.viewPortWidth, this.viewPortHeight, canvasContext)
    this.drawSecondaryText(this.viewPortSize, this.viewPortWidth, this.viewPortHeight, this.padding, canvasContext)

    canvasContext.restore() */
  }

@triniwiz
Copy link
Member

Thanks I have some ideas where it’s coming from also does it work on a real device ?

@darkyelox
Copy link
Author

It works in a real device, tested in my Moto G7 Plus, at least it doesn't break but it has some flaws that I don't know if is the library's fault or mine but in iOS runs smoothly

@triniwiz
Copy link
Member

Can you share these flaws you talk about might be something I missed

@darkyelox
Copy link
Author

The problems in Android are that in some cases the text I draw in the canvas jumps from one position to another randomly when I redraw the canvas (this doesn't happen in iOS, I console.log the points and it doesn't change in each redraw, is like the point is ignored and the text is drawn in the upper left position) and for some reason it doesn't center properly (maybe problems with toDevicePixels in Android NativeScript). I'm going to share to you my whole component maybe it could help you with testing and for compare in both platforms, the function of this component is to draw a balloon like form with colors and states (active, inactive and disabled)

balloon-indicator.component.html

<StackLayout>
    <Canvas #canvas  width="100%" height="100%" (ready)="onDraw($event)"></Canvas>
</StackLayout>

balloon-indicator.component.ts

import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { registerElement } from '@nativescript/angular';
import { Color, ContentView, CSSType, EventData, Font, ImageSource } from '@nativescript/core';
// import { Align, Canvas, CanvasView, Direction, Op, Paint, Path, RectF, Style } from '@nativescript-community/ui-canvas';
import { Canvas, CanvasRenderingContext2D, Path2D } from '@nativescript/canvas';
import { isNil } from '@shared/lodash.utils';
import { toDevicePixels, toDeviceIndependentPixels } from '@nativescript/core/utils/layout-helper';

const componentName = 'BalloonIndicator'


class Point {
  constructor(
    public x: number,
    public y: number
  ) { }
}

export class BalloonIcon {
  constructor(
    public unicode: number,
    public fontName: string
  ) { }
}

@CSSType(componentName)
@Component({
  selector: componentName,
  templateUrl: './balloon-indicator.component.html'
})
export class BalloonIndicatorComponent extends ContentView implements OnInit, AfterViewInit {
  private _activeColor: Color;
  private _inactiveColor: Color;
  private _disabledColor: Color;

  @ViewChild('canvas', { static: false }) canvasRef: ElementRef<Canvas>

  @Input()
  get activeColor() {
    return this._activeColor
  }

  set activeColor(color: Color) {
    if (typeof color === 'string') {
      color = new Color(color)
    }

    this._activeColor = color
  }

  @Input()
  get inactiveColor() {
    return this._inactiveColor
  }

  set inactiveColor(color: Color) {
    if (typeof color === 'string') {
      color = new Color(color)
    }

    this._inactiveColor = color
  }

  @Input()
  get disabledColor() {
    return this._disabledColor
  }

  set disabledColor(color: Color) {
    if (typeof color === 'string') {
      color = new Color(color)
    }

    this._disabledColor = color

  }

  private _active: boolean

  @Input()
  get active() {
    return this._active
  }

  set active(active: boolean) {
    this._active = active;

    this.redraw()
  }

  @Input() public primaryInfo: string | BalloonIcon
  @Input() public secondaryInfo: string | BalloonIcon

  @Input() public disabled: boolean
  @Input('balloonBorderWidth') public ballonBorderWidth: number
  @Input() public padding: number
  @Input() public primaryInfoFontSize: number
  @Input() public secondaryInfoFontSize: number

  @ViewChild('canvas', { static: true }) canvasViewRef: ElementRef<Canvas>

  private layoutFinished = false;

  // private paint = new Paint();

  private viewPortWidth: number;
  private viewPortHeight: number;
  private viewPortSize: number;

  constructor(
    private readonly elRef: ElementRef<ContentView>,
  ) {
    super()
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.elRef.nativeElement.on('layoutChanged', () => {
      setTimeout(() => {
        this.viewPortWidth = this.elRef.nativeElement.getMeasuredWidth();
        this.viewPortHeight = this.elRef.nativeElement.getMeasuredHeight();
        this.viewPortSize = Math.min(this.viewPortWidth, this.viewPortHeight);

        if (isNil(this.padding)) {
          this.padding = Math.floor((this.viewPortSize * 5) / 100);
        }

        if (isNil(this.primaryInfoFontSize)) {
          this.primaryInfoFontSize = (this.viewPortSize * 20) / 100;
        }

        if (isNil(this.secondaryInfoFontSize)) {
          this.secondaryInfoFontSize = (this.primaryInfoFontSize * 15) / 100;
        }

        this.layoutFinished = true;

        this.redraw()
      }, 200)
    })
  }

  onDraw(event: EventData) {
    const canvas = event.object as Canvas

    this.draw(canvas)
  }

  private draw(canvas: Canvas) {
    if(!this.layoutFinished) {
      return 
    }
    const canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D;

    console.log('hey')

    canvasContext.globalCompositeOperation = 'destination-over';
    canvasContext.clearRect(0, 0, this.viewPortWidth, this.viewPortHeight)
    canvasContext.setTransform(1, 0, 0, 1, 0, 0);

    canvasContext.save()

    const balloonPath = this.buildBalloonPath(this.viewPortSize, this.viewPortWidth, this.viewPortHeight, this.padding)

    canvasContext.lineJoin = 'round'
    canvasContext.lineCap = 'round'

    if (this.active) {
      canvasContext.fillStyle = !this.disabled ? this.activeColor.hex : this.disabledColor.hex
      canvasContext.fill(balloonPath)
    } else {
      canvasContext.strokeStyle = !this.disabled ? this.activeColor.hex : this.disabledColor.hex
      canvasContext.lineWidth = toDevicePixels(this.ballonBorderWidth)
      canvasContext.stroke(balloonPath)
    }

    this.drawPrimaryText(this.viewPortWidth, this.viewPortHeight, canvasContext)
    this.drawSecondaryText(this.viewPortSize, this.viewPortWidth, this.viewPortHeight, this.padding, canvasContext)

    canvasContext.restore()
  }

  buildBalloonPath(viewPortSize: number, viewPortWidth: number, viewPortHeight: number, padding: number): Path2D {
    const balloonWidth = viewPortSize - padding * 2

    const primaryInfoCenterX = viewPortWidth / 2;
    const primaryInfoCenterY = viewPortHeight / 2;
    const primaryInfoRadius = balloonWidth / 2

    console.log(primaryInfoCenterX, primaryInfoCenterY, primaryInfoRadius)

    const primaryInfoCenterPoint = new Point(primaryInfoCenterX, primaryInfoCenterY)

    const balloonPath = new Path2D()

    if (this.hasSecondaryInfo()) {

      const primaryInfoStartAngle = this.degreesToRadians(-25)
      const primaryInfoEndAngle = this.degreesToRadians(290)

      const primaryInfoStartPoint = this.getPointByAngleCenterAndRadius(primaryInfoCenterPoint, primaryInfoStartAngle, balloonWidth / 2)
      const primaryInfoEndPoint = this.getPointByAngleCenterAndRadius(primaryInfoCenterPoint, primaryInfoEndAngle, balloonWidth / 2)

      const secondaryInfoCenterPoint = this.midPoint(primaryInfoStartPoint, primaryInfoEndPoint)
      const secondaryInfoRadius = this.distance(primaryInfoStartPoint, primaryInfoEndPoint) / 2

      const secondaryInfoStartAngle = this.getAngleByPointAndCenter(primaryInfoStartPoint, secondaryInfoCenterPoint)
      const secondaryInfoEndAngle = this.getAngleByPointAndCenter(primaryInfoEndPoint, secondaryInfoCenterPoint)

      balloonPath.arc(primaryInfoCenterX, primaryInfoCenterY, primaryInfoRadius, primaryInfoStartAngle, primaryInfoEndAngle, false)
      balloonPath.moveTo(primaryInfoStartPoint.x, primaryInfoStartPoint.y)
      balloonPath.arc(secondaryInfoCenterPoint.x, secondaryInfoCenterPoint.y, secondaryInfoRadius, secondaryInfoStartAngle, secondaryInfoEndAngle, true)
    } else {
      balloonPath.arc(primaryInfoCenterX, primaryInfoCenterY, primaryInfoRadius, 0, 2 * Math.PI)
    }

    return balloonPath
  }

  public redraw() {
    if (this.canvasRef) {
      this.draw(this.canvasRef.nativeElement)
    }
  }

  private drawPrimaryText(viewPortWidth, viewPortHeight, canvasContext: CanvasRenderingContext2D) {
    const primaryInfoCenterX = viewPortWidth / 2;
    const primaryInfoCenterY = viewPortHeight / 2;

    const fontSize = toDevicePixels(this.primaryInfoFontSize)

    canvasContext.font = `${fontSize}px arial`

    const fontMeasuredWidth = canvasContext.measureText(String(this.primaryInfo as string)).width

    const primaryTextX = primaryInfoCenterX - fontMeasuredWidth / 2
    const primaryTextY = primaryInfoCenterY + fontSize / 3

    canvasContext.lineWidth = toDevicePixels(this.ballonBorderWidth)
    if (this.active) {
      canvasContext.globalCompositeOperation = 'destination-out';
      canvasContext.fillStyle = 'black'
    } else {
      canvasContext.fillStyle = !this.disabled ? this.inactiveColor.hex : this.disabledColor.hex
    }

    canvasContext.fillText(String(this.primaryInfo as string), primaryTextX, primaryTextY)

  }

  private drawSecondaryText(viewPortSize: number, viewPortWidth: number, viewPortHeight: number, padding: number, canvasContext: CanvasRenderingContext2D) {

    const balloonWidth = viewPortSize - padding * 2

    const primaryInfoCenterX = viewPortWidth / 2;
    const primaryInfoCenterY = viewPortHeight / 2;

    const primaryInfoCenterPoint = new Point(primaryInfoCenterX, primaryInfoCenterY)

    const primaryInfoStartAngle = this.degreesToRadians(-25)
    const primaryInfoEndAngle = this.degreesToRadians(290)

    const primaryInfoStartPoint = this.getPointByAngleCenterAndRadius(primaryInfoCenterPoint, primaryInfoStartAngle, balloonWidth / 2)
    const primaryInfoEndPoint = this.getPointByAngleCenterAndRadius(primaryInfoCenterPoint, primaryInfoEndAngle, balloonWidth / 2)

    const secondaryInfoCenterPoint = this.midPoint(primaryInfoStartPoint, primaryInfoEndPoint)
    const secondaryInfoCenterX = secondaryInfoCenterPoint.x;
    const secondaryInfoCenterY = secondaryInfoCenterPoint.y;

    const fontSize = toDevicePixels(this.secondaryInfoFontSize)

    console.log(secondaryInfoCenterPoint)

    if (this.secondaryInfo instanceof BalloonIcon) {
      const text = String.fromCharCode(this.secondaryInfo.unicode)

      if (this.active) {
        canvasContext.globalCompositeOperation = 'destination-out';
        canvasContext.fillStyle = 'black'
      } else {
        canvasContext.fillStyle = !this.disabled ? this.inactiveColor.hex : this.disabledColor.hex
      }

      const font = Font.default.withFontFamily(this.secondaryInfo.fontName)
      font.fontSize = fontSize / 2

      const image = ImageSource.fromFontIconCodeSync(text, font, !this.disabled ? this.inactiveColor : this.disabledColor)

      canvasContext.drawImage(image, secondaryInfoCenterX - image.width - padding / 2, secondaryInfoCenterY - image.height - padding / 2)
    } else {
      canvasContext.font = `${fontSize}px arial`

      const fontMeasuredWidth = canvasContext.measureText(this.secondaryInfo as string).width

      canvasContext.fillText(String(this.secondaryInfo as string), secondaryInfoCenterX - fontMeasuredWidth / 2, secondaryInfoCenterY + fontSize / 4)
    }

  }

  private degreesToRadians(angle: number): number {
    return (angle * Math.PI) / 180
  }

  private getPointByAngleCenterAndRadius(center: Point, angle: number, radius: number): Point {
    let x = center.x + radius * Math.cos(angle)
    let y = center.y + radius * Math.sin(angle)

    return new Point(x, y)
  }

  private getAngleByPointAndCenter(point: Point, center: Point): number {
    return Math.atan2(point.y - center.y, point.x - center.x)
  }

  private midPoint(a: Point, b: Point): Point {
    let x = (a.x + b.x) / 2
    let y = (a.y + b.y) / 2

    return new Point(x, y)
  }

  private distance(a: Point, b: Point): number {
    let xDist = a.x - b.x
    let yDist = a.y - b.y
    return Math.sqrt(xDist * xDist + yDist * yDist)
  }


  /* buildBalloon(viewPortSize: number, viewPortWidth: number, viewPortHeight: number, padding: number, canvas: Canvas) {
    const balloonSize = viewPortSize - padding * 2;

    console.log(balloonSize)

    const left = viewPortWidth / 2 - balloonSize / 2;
    const top = viewPortHeight / 2 - balloonSize / 2;
    const right = viewPortWidth / 2 + balloonSize / 2;
    const bottom = viewPortHeight / 2 + balloonSize / 2;

    if (this.active) {
      this.paint.setXfermode(null);
      this.paint.setStyle(Style.FILL);

      this.paint.setColor(this.disabled ? this.disabledColor : this.activeColor);

      const primaryInfoRect = new RectF(left, top, right, bottom);

      canvas.drawOval(primaryInfoRect, this.paint);

      if (this.hasSecondaryInfo()) {
        const secondaryInfoRect = new RectF(left + balloonSize / 2 + padding * 2, top, right, bottom - (balloonSize / 2 + padding * 2));
        canvas.drawOval(secondaryInfoRect, this.paint);
      }
    } else if (this.hasSecondaryInfo()) {
      this.paint.setStyle(Style.STROKE);
      this.paint.setColor(this.disabled ? this.disabledColor : this.inactiveColor);

      const primaryInfoPath = new Path()
      const secondaryInfoPath = new Path()

      const primaryInfoRect = new RectF(left, top, right, bottom);
      const secondaryInfoRect = new RectF(left + balloonSize / 2 + padding * 2, top, right, bottom - (balloonSize / 2 + padding * 2));

      primaryInfoPath.addOval(primaryInfoRect, Direction.CW);
      secondaryInfoPath.addOval(secondaryInfoRect, Direction.CW);

      canvas.clipPath(secondaryInfoPath, Op.UNION)

      canvas.drawPath(primaryInfoPath, this.paint);
    } else {
      this.paint.setStyle(Style.STROKE);
      this.paint.setStrokeWidth(2);
      this.paint.setColor(this.disabled ? this.disabledColor : this.inactiveColor);

      
      const primaryInfoRect = new RectF(left, top, right, bottom);

      const primaryInfoPath = new Path()

      primaryInfoPath.addOval(primaryInfoRect, Direction.CW)

      canvas.drawPath(primaryInfoPath, this.paint)
    }
  } */

  private hasSecondaryInfo() {
    return this.secondaryInfo !== undefined && this.secondaryInfo !== ''
  }

}

registerElement(componentName, () => require('./balloon-indicator.component').BalloonIndicatorComponent)

You should use it like this in another component:

<StackLayout>
     <BalloonIndicator (tap)="active = !active" width="200" height="200" activeColor="#EB9581" inactiveColor="#EB9581" disabledColor="dimgray" balloonBorderWidth="5" [active]="active" [disabled]="false" primaryInfo="1" [secondaryInfo]="'USD'"></BalloonIndicator>
</StackLayout>

In this example the state of the component changes when you tap it.

@nikkolai14
Copy link

nikkolai14 commented Apr 5, 2021

I also encountered this kind of error.

@triniwiz
Copy link
Member

triniwiz commented Apr 5, 2021

@nikkolai14 which part exactly ?

@nikkolai14
Copy link

nikkolai14 commented Apr 5, 2021

@triniwiz thanks for the help. I was using your sample code from here

I started a new project with a blank template with no frameworks.

@triniwiz
Copy link
Member

triniwiz commented Apr 9, 2021

Can you try 0.9.12 an LMK

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants