eddyverbruggen / cordova-plugin-3dtouch Goto Github PK
View Code? Open in Web Editor NEW:point_down: Quick Home Icon Actions and Link Previews
License: MIT License
:point_down: Quick Home Icon Actions and Link Previews
License: MIT License
Hi,
I was wondering how can I open the native IOS share window without launching the app itself? Most of the apps have a 'share' quick action option when pressing the app icon and when the 'share' option is chosen the app doesn't launch, it just opens the IOS native share window. Is this possible? Every thing I code in onHomeIconPressed function is triggered after the app is launched which is what I don't want.
Thanks for your help,
Sean
Right now when you want to add an icon with "iconTemplate" you mentioned that people need to manually drag icons into xcode into the resources.
I found a plugin to automate this process. You should include a link to it in the readme. The plugin includes a link to your repo as well.
https://github.com/dpa99c/cordova-custom-config#ios-image-resources
Trying to enhance one of my apps using this plugin. ThreeDeeTouch.configureQuickActions works great and I'm able to open the app using a QuickAction, but this action doesn't seem to be detected in the app. Only thing I have for now to see if the function works is the following:
ThreeDeeTouch.onHomeIconPressed = function(payload) {alert(payload.type);
if(payload.type=='play_last') {
}else{
console.log(JSON.stringify(payload));
}
}
This is in a function called onDeviceReady I run on "deviceready":
document.addEventListener("deviceready", onDeviceReady, false);
Any ideas on this?
Hello there,
I updated my ios app to cordova 6.0 and now I'm getting the above error and I am not able to find a fix for it. My Xcode version is 7.2.1.
Any help is much appreciated.
Many Thanks
Imran
Hi,
Is this a known problem?
Best
Hannes
Hi I updated my cordova project to 4.0.0 (ionic platform update [email protected])
When I build the project in xcode I get the following error in de AppDelegate+threedeetouch.m file line 20: "No visible @interface for 'UIView' declares the selector 'stringByEvaluatingJavaScriptFromString:'"
As the Title says the Methode isAvailable()
returns false on my iPhone 11 Pro. The Device officially uses HapticTouch (Thanks for nothing Apple 😒), but the Feature with the HomeIcons should still work.
Is there anything wrong with this code?
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var platform = device.platform;
if (platform == "iOS") {
ThreeDeeTouch.isAvailable(function (avail) {
if (avail == true) {
ThreeDeeTouch.onHomeIconPressed = function (payload) {
if (payload.type == 'create-note') {
$("#list-add-note").click();
}
else if (payload.type == 'get-tasks') {
$("#drawer-get-tasks").click();
}
else if (payload.type == "get-notes") {
$("#drawer-get-notes").click();
}
};
ThreeDeeTouch.configureQuickActions([
{
type: "create-note",
title: "Create a New Note",
iconType: "add"
},
{
type: 'get-notes',
title: 'Show Notes',
subtitle: 'Show the list of my notes',
iconType: 'compose'
},
{
type: 'get-tasks',
title: 'Show Tasks',
subtitle: 'Show the list of my tasks',
iconType: 'taskcompleted'
}
]);
}
});
}
}
Is there a max four limit on the number of quick actions allowed? I can't seem to be able to show more.
Hello,
what's wrong?
iMac:IVGBlog Nello$ cordova plugin add cordova-plugin-3dtouch
Fetching plugin "cordova-plugin-3dtouch" via npm
Plugin "cordova-plugin-3dtouch" already installed on android.
Plugin "cordova-plugin-3dtouch" already installed on ios.
Error during processing of action! Attempting to revert...
Error: Uh oh!
Invalid Version: undefined
getting this error when I build:
The following build commands failed: CompileC build/onBudget.build/Debug-iphonesimulator/onBudget.build/Objects-normal/i386/AppDelegate+threedeetouch.o onBudget/Plugins/cordova-plugin-3dtouch/AppDelegate+threedeetouch.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler CompileC build/onBudget.build/Debug-iphonesimulator/onBudget.build/Objects-normal/i386/ThreeDeeTouch.o onBudget/Plugins/cordova-plugin-3dtouch/ThreeDeeTouch.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler (2 failures)
might help to note I followed this walk thru: http://gonehybrid.com/how-to-set-up-quick-actions-with-3d-touch-for-your-ionic-app/
Hi there,
I'm having a slight issue with getting the action of the payload to work when booting the app via the quick action from a cold start, I believe the app is launching and attempting to use the action before my app has actually loaded the files which contain the action. So the order goes as follows:
The app opens perfectly fine from a warm start as all the files are present and loaded.
Do you have any ideas of alternate ways to use the quick launch icons as the boot order is very static and cannot ideally be altered. It is waiting until for deviceReady until it uses the function.
Is it possible to add custom icons? And is it possible to position the icons on the right?
Hello,
Can we use this plugin in android?
How can I add Quick Home icon in android cordova?
I am creating quick actions with only a title, subtitle, and type. For some reason when I open up the quick actions menu from the home screen, a black dot appears where the icon normally would next to each action. I'm not sure if this is due to something I'm doing wrong or if anybody else can replicate this issue.
When adding custom list (i.e. static list via .plist file) of actions, default 'Share App' button disappears.
Hello everyone,
I'm Jason.z, the founder of BSF.
We've noticed that this project has remained very popular in the past.
However, unfortunately, it seems that this project has not been maintained for some time,
which is unfortunate for users who want to continue using and supporting the project.
Based on this, BSF has initiated the Cordova Ecosystem Crowdfunding Plan ,
with the main purpose of addressing the upgrading and maintenance of old Cordova projects,
as well as compatibility and adaptability for new platforms.
You can learn more about it by clicking on this link.
So, if you feel that this project needs continued upgrading and maintenance,
please let us know through voting.
We will decide whether to launch a crowdfunding plan for this project based on the voting results and the recruitment of maintainers,
as well as the subsequent development and maintenance plans.
If you are willing to be a long-term maintainer of the project, you can also contact us.
Of course, if you do not agree with the operating model of BSF Software Foundation,
or if you are a maintenance team for this project and believe that this ISSUE infringes and damages your rights,
you can also delete this ISSUE.
We sincerely apologize for any inconvenience this may cause.
BSF is our bold attempt and exploration of the sustainable development of software projects.
We hope to contribute to the development of software projects through the power of the community!
Is it possible to replace the static home icons defined in the .plist by the dynamic ones ?
Would be great if it was possible to add predefined static quick actions in the plugin config, so that we can have quick actions available right after the app installation. For example:
Also with custom icons if possible.
Hi! I would absolutely LOVE to get this plugin working, but so far I've not been able to get anything to happen. Here's the details:
In my index.html I have a deviceready listener:
document.addEventListener('deviceready', start3Dtouch(), false);
start3Dtouch() is in my primary js file, which is already loaded. The function is firing, I get the alert on app load. The js below is probably the 30th permutation, I've tried many combos and this is about as simplified as I can make it.
function start3Dtouch() {
alert("start3dtouch");
ThreeDeeTouch.configureQuickActions([
{
type: 'scan', // optional, but can be used in the onHomeIconPressed callback
title: 'Attendance', // mandatory
subtitle: 'Scan QR Code to checkin at event', // optional
iconType: 'MarkLocation' // optional
},
{
type: 'evals',
title: 'Evaluations',
iconType: 'Task' // optional, case insensitive
},
{
type: 'transcript',
title: 'Transcript',
iconType: 'Message' // iconType is case insensitive
},
{
type: 'calendar',
title: 'Calendar',
iconType: 'Invitation' // iconType is case insensitive
}
]);
ThreeDeeTouch.onHomeIconPressed = function(payload) {
alert(payload.type);
}
}
If I launch the app, I see the alert. If I go back to the home screen on my phone and force touch the icon, I get the haptic feedback and the screen blurs for a moment but I've never gotten the menu of my options. Any suggestions would be greatly appreciated and thank you very much for your work to create these plugins!
Hi is it possible to change menu items dynamically?
Hi!
I saw all issues about it but nothing working for me... Subscribing to onHomeIconPressed does nothing, even in "platform.ready().then()"... Besides, I have another error that I can't explain:
To Native Cordova -> ThreeDeeTouch configureQuickActions INVALID ["options": [<__NSArrayM 0x280038690>(
{
iconType = Compose;
title = "New test";
type = newtest;
}
)
]]
Maybe my problem comes from here? 👆
I'm using:
Ionic 4 with Capacitor
Angular 10
cordova-plugin-3dtouch 1.3.8
@ionic-native/three-dee-touch 5.29.0
Developping / Running on iPhone X on iOS 14
In my app.module.ts (am I forgetting something here maybe?):
import { ThreeDeeTouch } from '@ionic-native/three-dee-touch/ngx';
...
and put "ThreeDeeTouch" in providers
My app.component.ts code:
this.platform.ready().then(() => {
this.statusBar.styleDefault();
**// Trigger 3D Touch options ---> SAME CODE AS IONIC DOC
this.threeDeeTouch.isAvailable().then(isAvailable => console.log('3D Touch available? ' + isAvailable));
this.threeDeeTouch.watchForceTouches()
.subscribe(
(data: ThreeDeeTouchForceTouch) => {
console.log('Force touch %' + data.force);
console.log('Force touch timestamp: ' + data.timestamp);
console.log('Force touch x: ' + data.x);
console.log('Force touch y: ' + data.y);
}
);
let actions: ThreeDeeTouchQuickAction[] = [
{
type: 'newtest',
title: 'New test',
iconType: 'Compose'
}
];
this.threeDeeTouch.configureQuickActions(actions);
this.threeDeeTouch.onHomeIconPressed().subscribe(
(payload) => {
// returns an object that is the button you presed
console.log('Pressed the ${payload.title} button');
console.log(payload);
},
error => console.log('Error on 3D Touch action', error)
);**
// Trigger the push setup
this.fcmService.initPush();
this.splashScreen.hide();
});
And here is my XCode log:
⚡️ [log] - onscript loading complete
⚡️ WebView loaded
⚡️ [log] - Angular is running in development mode. Call enableProdMode() to enable production mode.
**To Native Cordova -> ThreeDeeTouch deviceIsReady INVALID ["options": []]**
⚡️ [log] - Ionic Native: deviceready event fired after 400 ms
To Native Cordova -> ThreeDeeTouch isAvailable ThreeDeeTouch251958499 ["options": []]
To Native Cordova -> ThreeDeeTouch watchForceTouches ThreeDeeTouch251958500 ["options": []]
⚡️ [log] - [{"type":"newtest","title":"New test","iconType":"Compose"}]
**To Native Cordova -> ThreeDeeTouch configureQuickActions INVALID ["options": [<__NSArrayM 0x280038690>(
{
iconType = Compose;
title = "New test";
type = newtest;
}
)
]]**
⚡️ [log] - 3D Touch available? true
⚡️ [info] - [WDS] Live Reloading enabled.
If anybody can help... 🙏
Hi!
In ionic 4 have an issue what is based on this 2 file :
File 1. says, the method should exist to overwrite it.
File 2. implements file 1.
The solution is very easy and you have to modify only one file.
**www/ThreeDeeTouch.js **
You have to define the onHomeIconPressed function :
ThreeDeeTouch.prototype.onHomeIconPressed = function(){};
Then in the waitForIt function you have to modify the if :
if (window.ThreeDeeTouch && typeof window.ThreeDeeTouch.onHomeIconPressed !==ThreeDeeTouch.prototype.onHomeIconPressed)
In your case the function does not exist.
In my case the function exist but if the function was modified by a developer its trigger the deviceReady on native-site.
Is anyone ever tried this plugin with IONIC native.
I tried the configure actions and it working perfectly fine.
When I try to integrate the enableLinkPreview() feature the app is not reacting and nothing is happening.
I initialized the enableLinkPreview() in configure action method.
Here is my code
function configure() {
// Check if 3D Touch is supported on the device
check3DTouchAvailability().then(function(available) {
if (available) { // Comment out this check if testing in simulator
// Configure Quick Actions
window.ThreeDeeTouch.configureQuickActions([
{
type: 'newNote',
title: 'New Note',
subtitle: '',
iconType: 'compose'
}
]);
// Set event handler to check which Quick Action was pressed
window.ThreeDeeTouch.onHomeIconPressed = function(payload) {
if (payload.type == 'newNote') {
$rootScope.$broadcast('newNoteQuickAction');
}
};
window.ThreeDeeTouch.enableLinkPreview(function (available) {
alert('enabled');
});
}
})
}
Thanks.
Hello, maybe it is not an issue and I missed something in plugin documentation but I have the following behaviour, when I run app and make it foreground I have 3D touch icons and all actions works good with pressing them but if I close app (unload it from memory), I have 3D icons but they just run my app from the default state and doesn't pass any 3D touch type events. Could someone please advice what I'm doing wrong or maybe it is not available in this plugin?
I get a white screen after the splash screen while using this 3D touch extension. Can be reproduced with a new project from scratch. Any hints?
Hello,
Thanks a lot for this plugin! It works well except one important issue : touchmove never calls touchend once we lift our finger from the screen. This makes the next touchmove to not start on DOM side. We have to tap once (and so get a touchend event) to be able to receive the next touchmove event.
This is what happens when we try to move a finger across the screen:
DOM touchstart is called
ForceTouchRecognizer is called
DOM touchmove is called
Then we lift our finger up, and that's it. No touchend event.
If we try to do another move gesture, this is what happens:
ForceTouchRecognizer is called
And that's it.
No touchstart, no touchmove or touchend.
If we tap once, , we correctly get a touchstart, then a touchend. After this tap, we can once again repeat the initial sequence.
We use your plugin on top of Cocoon.io (built on Cordova). I do not know if this is specific to Cocoon.io webview or if it is a general issue, even with Phonegap. However it is fairly easy to test for you I guess.
Could you take a look at it please ? We have a deadline pretty soon and Apple asked us if we'll make use of 3dtouch in our game, we'd love to say yes to them as you can imagine :)
Regards.
Hi added the plugin to a project but I have some issues; QuickActions added properly but not fired when I use it.
I'm working with an iphone7 with iOS 10.3
Below is the code I used inside the app.run JS:
$ionicPlatform.ready(function ($cordovaGlobalization) {
ThreeDeeTouch.configureQuickActions([
{
iconType: 'Search', // optional
type: 'searchapplication', // optional, but can be used in the onHomeIconPressed callback
title: 'Application', // mandatory
subtitle: 'Search by Application' // optional
},
{
iconType: 'Search', // optional, case insensitive
type: 'searchcode',
title: 'Code',
subtitle: 'Search by Code' // optional
},
{
iconType: 'Search', // iconType is case insensitive
type: 'searchproduct',
title: 'Product',
subtitle: 'Search by Product' // optional
},
{
iconType: 'CapturePhoto', // iconType is case insensitive
type: 'searchbarcode',
title: 'Barcode',
subtitle: 'Scan Barcode' // optional
}
]);
ThreeDeeTouch.onHomeIconPressed = function(payload) {
console.log("Icon pressed. Type: " + payload.type + ". Title: " + payload.title + ".");
if
(payload.type == 'searchapplication') {$state.go('app.vehicles');}
else if
(payload.type == 'searchcode') {$state.go('app.code');}
else if
(payload.type == 'searchproduct') {$location.path('app/product');}
else if
(payload.type == 'searchbarcode') {$location.path('app/barcode');}
else {
// wrapping in a timeout, otherwise it collides with the splashscreen
setTimeout(function() {
alert(JSON.stringify(payload));
}, 500);
}
};
$rootScope.isWindows = device.platform == "windows";
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard && cordova.plugins.Keyboard.hideKeyboardAccessoryBar) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
}
cordova.plugins.Keyboard.disableScroll( true );
setTimeout(function() {
navigator.splashscreen.hide();
}, 100);
$rootScope.$apply(); // This resolved!
});
Hello,
I'm trying to use .disableLinkPreview
to avoid the preview popup to be shown when the user press a "button" inside my app.
I'm using links (<a>
) as buttons in our navigation bar and the toolbar, so it doesn't look good that the user presses the "button" and a preview popup appears. Eventhough I call the .disableLinkPreview()
as soon as the page loads, the preview popup keeps appearing in all the links of the app.
Am I understanding correctly that disableLinkPreview()
will avoid this preview popup to appear? or I'm misunderstanding its use?
I'm attaching a picture of what preview popup I'm referring to.
cordova-plugin-3dtouch version: ~1.3.5
ios version: 10.3.2
I'm testing this plugin on iPhone 6s (iOS ver.-9.2) and app was build with Xcode 7 as per the minimum requirements of this plugin to work, but when i'm checking the availability of the plugin, the following code returns me false, am i dong something wrong?
ThreeDeeTouch.isAvailable(function (avail) {
// 'avail' is a boolean
alert("avail? " + avail)
});
When the webview is Force Touched, let JS know, so the developer can do something sweet with that info.
Hi,
First of all - great plugin. Works great, also via PGB.
However, one thing which does not work (or I am not managing to get it working) is the definition of custom icons via UIApplicationShortcutItemIconFile.
I include the plugin via my config.xml:
<plugin name="cordova-plugin-privacyscreen" spec="https://github.com/devgeeks/PrivacyScreenPlugin.git" source="git" />
Furthermore I adjust the .plist (again via config.xml):
<gap:config-file platform="ios" parent="UIApplicationShortcutItems"> <array> <dict> <key>UIApplicationShortcutItemIconType</key> <string>UIApplicationShortcutIconTypeCloud</string> <key>UIApplicationShortcutItemTitle</key> <string>Cloud</string> <key>UIApplicationShortcutItemSubtitle</key> <string>Awesome subtitle</string> <key>UIApplicationShortcutItemType</key> <string>eyefromplist</string> </dict> <dict> <key>UIApplicationShortcutItemIconType</key> <string>UIApplicationShortcutIconTypeCompose</string> <key>UIApplicationShortcutItemTitle</key> <string>Compose</string> <key>UIApplicationShortcutItemSubtitle</key> <string>Foo bar</string> <key>UIApplicationShortcutItemType</key> <string>compose</string> </dict> <dict> <key>UIApplicationShortcutItemIconFile</key> <string>VIP</string> <key>UIApplicationShortcutItemTitle</key> <string>Virtual Promoter</string> <key>UIApplicationShortcutItemSubtitle</key> <string>Pin a picture</string> <key>UIApplicationShortcutItemType</key> <string>pinpicture</string> </dict> </array> </gap:config-file>
The file VIP.png is stored in the root folder of the PGB zip - however the shortcut menu does not show the image (it shows the entry in general but not the image).
Any ideas?
Thanks in advance.
Hi @EddyVerbruggen i am keen to learn how the peek and pop works there is some detail in the Documentation but i cant figure out how to make a peek and pop work
Correct me if i am wrong
when you enable enableLinkPreview does that call
ThreeDeeTouch.watchForceTouches(function(result) {
console.log("force touch % " + result.force); // 84
console.log("force touch timestamp " + result.timestamp); // 1449908744.706419
console.log("force touch x coordinate " + result.x); // 213
console.log("force touch y coordinate " + result.y); // 41
});
or Does it automatically Popup but what is shown in popup
Its Really confusing me
Please Help as i have gone through the https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/Adopting3DTouchOniPhone/ where does this plugin fit in
how can one configure the peek and the peek options
Regards
Ezaz
I can see a preview of google maps link, but not a simple image link
Example:
works well
<a href="https://maps.google.com/?cid=6871429669129962104" target="_blank">A.S.D. Polisportiva Cinecittà Bettini</a>
not working
<a href="https://developers.google.com/actions/assistant.png" target="_blank"><img src="https://developers.google.com/actions/assistant.png"></a>
How I can add the icon inside the Asset catalog?
I want to use one custom icon but i don't know how.
Thanks
This repo doesn't currently have an .npmignore
file so there's a lot of bloat.
On new iphones (like iphone XR, Iphone 11 or Iphone 11 PRO) the plugin return false
ThreeDeeTouch.isAvailable(function (avail) {
// always false
});
But... is I just call the configureQuickActions works fine, Apple Just remove 3dTouch and replace for Haptic touch
// Works Fine --> ThreeDeeTouch.configureQuickActions(MYBUTTONSCONFIG);
So i think that isAvailable method should check if have also haptic response.
https://developer.apple.com/documentation/uikit/uiimpactfeedbackgenerator
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.