I'm looking to integrate PhoneGap's BarcodeScanner plugin with my app but would like to integrate it with the existing HTML/JS (inside the WebView) a little more closely than it currently allows.
Ideally I would like to see the BarcodeScanner's 'camera capture' view appear underneath PhoneGap's main WebView so I can layer my app's controls on top (toolbar etc).
I have come across a similar plugin from Moodstocks (http://www.moodstocks.com/2013/04/03/augmented-reality-with-phonegap-sencha-touch/) which appears to do just this by giving the WebView a transparent background and displaying it above the camera's view. The source code for this plugin can be found here (https://github.com/Moodstocks/moodstocks-phonegap-plugin) and more specifically (based on my reading the code with very unknowledgable eyes!) on Line 74-80 of the MSScannerController.m (https://github.com/Moodstocks/moodstocks-phonegap-plugin/blob/master/ios/MSScannerController.m).
So my question is, firstly, is this achievable? and, secondly, how can I modify the PhoneGap plugin to do it?
Any pointers or direction would be very helpful!
For the first question, the answer is quite sure - YES.
For the second question, what we (I work for Moodstocks) have done is:
Detaching the webview from MainViewController, knowing that you can retrieve the webview via plugin. In MoodstocksPlugin.m, lines 99-100 show how we pass the plugin's reference:
Attaching the webview to the current view controller, which is our scanner controller. MSScannerController.m, Line 46 shows how we take the webview over:
I hope this can give you several ideas about how to modify the original PhoneGap BarcodeScanner plugin, just out of curious, why not use MoodstocksPlugin directly? ;)
p.s Here is a video shows the animation of our Sencha Touch demo made with our plugin.
Related
I am currently trying trying to implement an Action Extension that transforms content on a Safari web page through Google's Translation API.
My issue is that I would like to display some UI on the screen without covering the whole screen, but no matter what I do that doesn't seem to work.
I have tried the following:
Setting this in the info.plist
<key>NSExtensionActionWantsFullScreenPresentation</key>
<false/>
Trying to change the content size in the interface builder to the following
https://imgur.com/a/gfYvFiD (Uploading images through stack isn't working for some reason)
Giving the UI a clear background color (always ends up being grey after the presentation is complete)
Setting the presentation style to be over current context.
Now i have seen a similar question where the accepted response was that it cannot be done due to Apple restrictions (https://stackoverflow.com/a/38764183/10058854), but I have seen some apps that seem to do it.
For example, iTranslate:
https://imgur.com/a/QpFo5St
The above 2 images clearly show that they have created an Action Extension and that the added UI is just the bar at the bottom of the web view.
Any help would be much appreciated, and thank you for reading this.
In short I am trying to build some typical browser functionalities in a Swift iOS app with WKWebViews (WebKit). I already have a functioning browser based on a WKWebView, which already has a menu bar with a URL input, navigation buttons, a share button, page title etc.
What I am struggling with is creating tabs for the browser. At first this seemed trivial as surely WKWebViews would support this in some way. Well, as far as I can tell they do not (looked at and tried multiple tutorials incl. hackingwithswift, Ray Wenderlich etc. + I checked Apple's documentation + stackoverflow)
This is what I have come up with so far:
1) Creating a new tab/opening a new URL should create a new UIView + WKWebView programmatically (I'll have to make a subclass out of my current browser view)
=> this should create a separate thread for each WKWebView/tab according to Apple's documentation
2) I need something like a Collection View (or Stack Views etc.) to store screenshot images of the already open tabs as a preview page of all tabs. The cells should be linked via a delegate to the corresponding WkWebView and they should have a close button to close (= delete) the tabs.
Am I overthinking this? If I go down this path I have to find a way to wire up (and subsequently delete) multiple delegates and views to the Collection View dynamically and I have to store & delete screenshots every time the user interacts with the tabs. It seems VERY messy. But given that Chrome on iOS is based on WebKit as of late, it's obviously doable.
How would you tackle this problem?
PS I didn't include a mockup because you all know how the tabs in Chrome, Safari etc. on iOS look like.
EDIT:
I am just looking for a clean and sensible way to add/remove and show the multiple WKWebViews, which are created by opening new tabs - just like in Chrome for iOS or Safari etc.
Ok, I have solved this today :) I will have a main UIView and then multiple WKWebViews, which can be "zoomed in" in order to enter full screen mode. No need for screenshots etc.
I am trying to mimic the half-screen camera as exists in apps like Taptalk. The goal is to have a live camera in a self-contained view on the upper half of the screen controlled by a Cordova plugin, with the lower half of the screen containing the normal HTML-based Cordova content.
I know the standard cordova camera plugin allows you to bring up the fullscreen camera component, and I know that doing this natively, at least on iOS would be relatively straightforward, but I'm really not sure where I would start trying to do this in a cross-platform way within a larger phonegap app (via Ionic).
I'm guessing I need to write a custom Cordova plugin ala this excellent article, but the main conceptual issue I'm worried about is that I think I'd have to use a view positioned and sized to only fill the top half of the screen, as opposed to a fullscreen ViewController (focusing on iOS for now).
Does anyone have any advice for implementing this approach?
I ended up writing my own Cordova plugin, SnapsCamera.
It uses a half-screen-sized view with UIImagePickerController's UIView added as a subview.
I've tried to figure out if the functionality I need is possible with a PhoneGap plugin and haven't found a clear answer.
I'd just like some clarification as far as if this is within the scope of a plugin.
The functionality would be...
Within the webview a user triggers a button.
A camera preview screen of custom size, not full
screen, pops up over the webview.
The preview shows view from front facing camera except it's
cropped to the custom size.
A video automatically starts recording for a set amount of time,
then stops.
Once the video stops recording the preview screen goes away and the
local path to the movie file is returned to a callback.
Is this all reasonable functionality for a phonegap plugin?
Yes, you can definitely implement that functionality as a Phonegap plugin.
Possible steps that you can take are the following:
- Write the native code of the functionality first (Note: You can call and start activities through Phonegap plugin).
- Create a layout (Maybe, something that will overlay the webview with transparent background).
- Use the File API of Phonegap to access the movie file you just captured.
Having made a few iOS apps, I'm now taking my first steps in building a HTML5 app with PhoneGap.
One of the things that has stumped me is how to present a modal view. In iOS it's trivial:
[myViewController presentModalViewController:modalViewController animated:YES];
But after a bit of Googling, and checking out PhoneGap's API reference, I can't find a single example of how to present a modal view...something I thought would be a trivial task with 100s of tutorials.
Or maybe I'm just really bad at Googling! I think however, that I'm missing something blindingly obvious...
there is no presentModalViewController for phonegap, in phonegap you load all your code in a "webView", and all the code and page transitions have to be done with html+css+javascript, so you have to create your own flip, crossdisolve and other animations (or use jquery mobile, jqtouch, jqmobi or any other javascript framework with this animations), so you can reuse the code in other platforms, you don't have presentModalViewController on android or blackberry.
If you really want to use presentModalViewController on a iOS phonegap app, you have to create a plugin, or use phonegap as a component, then you create different views, loading different html files on them, and change betweem them with native code.
This will help you to
http://malsup.com/jquery/block/#dialog
I much rather use bootstrap (http://getbootstrap.com/javascript/)
$('#myModal').modal('show')