Cordova / Phonegap photo browser - html

I would like to create an application for iOS and Android that (among other things) allows the user to browse the device's photos and select some of them. Thus I would like to present the user with a list of directories containing photos and once a directory is opened, a gallery of the images is displayed.
My questions are:
1) Is there a standard way in Cordova to get a list of the "library" directories such as camera photos, facebook photos, viber photos, screenshots etc.?
2) Is there a way with Cordova to get a thumbnail of each image to display in the gallery (or even better take advantage of each OS' thumbnail caching system), since resizing the original images will run the application quickly out of resources?
Notes:
a) I know about the camera plugin, that has a nice native dialog to pick an image, but it only allows the user to pick one image.
b) I know about the image picker plugin, but it doesn't search in folders other than the camera's directory (i.e. no Facebook, Viber etc. directories).
c) I don't like a & b approaches. Instead I would prefer to display a gallery directly in my app rather than showing a dialog for this.

Related

Upload multiple camera photos with html input

I have a web application with an upload form.
<input type="file" name="c_files[]" id="c_files" multiple="multiple" />
I can select and upload mutliple files from the gallery but can't make multiple photos from the camera app. Taking the photos first and then uploading them from the gallery is not a good way to go.
I'm using Google Chrome Version 92.0.4515.159 on Android 11.
Firefox for Android and Safari on iOS isn't working either.
Apparently I have to use javascript right or is their an exisiting work around?
There is no such thing as "Out of the Box" that will solve your problem or your scenario, and the truth is that not HTML have at least one way to get there.
But... we have javascript I can think of something that is not exactly what you are looking for but it would be the way to perform this feat:
detect that you are on a mobile device.
allow that if you are on a mobile device when you click on the file field, you directly invoke the camera APP and take multiple photos.
when returning to the form detect the event and make the programmatic trigger of the multiple input type file, but directly open the image gallery...
select multiple images to attach.
As you can see, this is a concept/solution based on the capabilities that we know the mobile environment and the javascript language have. regardless of HTML.
To achieve this you must get each point mentioned above to work.

Show only valid actions on file input click on mobile devices

I have a input type=file and I want when user click on it to show only valid actions for documents. I don't want pictures or videos.
My file tag is:
<input type="file" name="file" accept=".doc,.docx,.pdf,.txt,.odt,.wps"/>
With this configuration when user click on it on ios safari will display a menu with:
Take a Photo or Video
Photo Library
iCloud
More
and on Android devices will show something like this:
Camera
Camcorder
Documents
Voice Recorder
other, depends what's installed on device.
What I want is to have on iOS only the options iCloud and More and on Android only Documents or other where you can find documents. I want to exclude to take a picture/video or to choose from photo library.
Is this possible?
No. You can dictate what kind of document you're willing to accept, but you cannot dictate what the file upload box actually looks like on a particular browser/OS.
Clearly it would be sensible for the browser not to show "Camera" or "Take a Photo" when the photo produced in that manner wouldn't ultimately be accepted, but that level of intelligence just isn't baked in... yet.

Google Chrome Extension Top Sites Images

So using the Google Chrome Top Sites api has values for the url and the title, but when you load the default google chrome page it also has an image of those sites, is there any way to get that sort of image for an extension? If not how does google get that image and how can you get an image of the the user's top viewed website?
Since that it isn't possible to get a screenshot of a page without loading it inside a tab, Chrome is simply getting those screenshots while you're browsing your favourite sites. You can tell this easily because sometimes sites and images do not coincide (e.g. sometimes my facebook.com top site has the image of my profile page, but links to the home).
Then, if you want your screenshots of the Top Sites, you'll have to start without screenshots, and create them while the user browses the web by using the chrome.tabs API to check when a tab loads one of the Top Sites (listening to the event onUpdated), and get a screenshot of that tab using captureVisibleTab.
NOTES: make sure that you've requested the permission for "<all_urls>" in your manifest, which is required for captureVisibleTab to work. Additionally, you may find this question and its answer helpful.
It's unfortunately not possible*. Chrome stores those thumbnails internally in URIs not accessible from an extension.
There is an existing feature request: https://code.google.com/p/chromium/issues/detail?id=11854
If you look at the comments, one of the main use cases is to access site thumbnails to replicate the New Tab page.
Do star the feature request above to raise its priority if you want this functionality implemented.
* By that I mean that it's not possilbe to access Chrome's own internal store of thumbnails.
Furthermore, as Marco suggested the way to replicate that would be tab capture, but you can't do it "in the background" for privacy reasons - a user must make an explicit gesture (e.g. click the extension's button, press a shortcut, etc.) to perform capture.
Marco's answer is valid now, captureVisibleTab should be accessible upon events. But yes, as of now Chrome forces you to have very broad permissions and maintaining your own thumbnail store.

Cast a website to TV from Android app - Chromecast; is it possible?

This is what I want to do.
Have a screen on my Android app with a few buttons on it. One of them would be the Chromecast icon, the other buttons would just be a few numbers most like (a "1" button, a "2" button, a "3" button etc).
When the cast button is hit, a default website is loaded (eg. www.example.com) on the TV. In the Android app, I still just see my buttons.
When a number his hit (ie. "1") the website changes, and www.example.com/parameter/1 is loaded for example.
I have been reading Google's documentation. If I understand correctly, I can create Android sender app code to do part 1 and 2. And a receiver application for part 3.
What I am confused about though is how I just get it to load a preexisting website. Surely I wouldn't need any custom HTML5 code for that? All I want to do is load a URL.
Could someone please advise me if what I want to do is possible, and if so point me in the right direction? Thanks
The default receiver only loads media URLs. Video, images, etc. If you want it to do anything else, like show a website, you need to create a custom receiver.
Luckily, that's rather easy, and they have some good samples on the Github account.
https://github.com/googlecast

Can I run different versions of my website based on detection of mode

I would like to create one website. This website will have behave differently if I am viewing it at a specific event via a kiosk. The kiosk, will just be an iPad. I believe I can figure out how to lock down the iPad to act like a kiosk and just show my website based on this http://www.webascender.com/Blog/ID/447/How-to-Setup-Kiosk-Mode-Lock-Your-iPad-to-Just-One-App#.U9Fx3oBdVX4
But what I am asking is, in code, is there a way to detect that I am in 'kiosk' mode and show different pages? For example, if you are at home(or anywhere that is NOT the event) you should be able to hit my website to find out all about my company and to view your existing profile. You should be able to see these same pages on the 'kiosk'(the iPad while at an event) but you will now see additional pages such as pages dealing with the specific event and payment pages. Vice-versa you might be able to see additional pages on the website while at home that you will not see while in 'kiosk' mode.
I do not know if the solution is tools/language dependent as we have not settled yet on all tools/languages/frameworks we will be using to build the site and so I am open to all but we will definitely have some javascript/css/html.
I believe you will need to write a native app in order to detect whether you are in 'guided access' aka 'kiosk' mode.
Taken from Detect or react to Guided Access?
NSLog(#"Accessabilitiy enabled: %#", UIAccessibilityIsGuidedAccessEnabled() ? #"YES" : #"NO");
if (!UIAccessibilityIsGuidedAccessEnabled()) {
// show something since I'm not in guided access
}
If you want to know when it changes...
[[NSNotificationCenter defaultCenter] addObserver:self selector:#selector(guidedAccessChanged) name:UIAccessibilityGuidedAccessStatusDidChangeNotification object:nil];
- (void)guidedAccessChanged
{
// do something when guided access changes
}
If you must work with a website then what you can do is write a native app that embeds a UIWebView. This class allows you to show websites within a native app. So, what you could do with this method is pass along the guided access setting to your website so that it can adjust itself accordingly.
If you know the IP address you can direct views using PHP (and probably a host of other programs). Or you can lock the iPad to only open a specific URL (http://mysubdomain.mydomain.com) and only have pages that you want viewed by the kiosk. I'm sure there are a mess of other ways too.