currently i am working on native map in Titanium for android and iOS.
you might have seen native maps on which a custom image layer or layout is being displayed, which will rotate and zoom according to the user input (currently i am not talking about annotations)
i have tried using annotation map tile too but it doesn't seems to work as the native map app i have seen
if you have any question or are not able to understand my question please let me know so i could clarify and get solution for one of you
Update:
Can you give a better explanation of what you've tried?
you might already know about mapbox.com and leafletjs.com, by using their library we could make customize maps and offline map in webview but i am looking for some Titanium module which could help me use native map of iOS and android for performing similar functionalities(i am avoiding commercial library and plugins as my app is not commercial app). i want to create map tiles which could be used for offline purpose as the user would have downloaded with the app.
what i have tried yet!!
1: http://i.stack.imgur.com/CLiNh.jpg
2: http://i.stack.imgur.com/QOLO7.jpg
in first image link i have given image in which i showing screenshot of map with rotation (if you notice compass) and the map tile moved accordingly to it
in 2nd image ... i had put a map tile using createAnnontation function, but unable to fix its layout remains same and it doesn't resize when i do zoom in/out too
I assume you are talking about custom tiles on top of a MapView.
There is an example module for iOS at https://github.com/benbahrenburg/benCoding.Map which used the Titanium map module as a base. It is a bit dated, but see the TileOverlay example and code and it will get you on the right track.
The best tutorial I've found on how to create the tiles is at http://www.ericbinnion.com/creating-custom-overlays-for-ios-mapkit-framework/
I've tried to create a similar TileOverlay functionality by forking the Android map module with limited success. I never got it to work as well as the native maps.
You could also check out using Mapbox with Titanium. There are great tutorials and tools for creating your own tiles layers and manipulating existing layers. Adam Paxton gave a great demo of it at TiConf in New York this year.
Related
I have a question and I need to know if we can apply a morphing effect on a photograph in react native. If we can, can you help me to know how we do it and if we cannot what languages is more adapted for a mobile application?
So in fact I have to make a mobile application that allows me:
To Take or choose pictures.
To Define reference points between the two images.
To Calculate the corresponding animation.
And to Save the animation in a video or gif format.
I have already realized the classes that allows me to take a picture and to access at the gallery. (in react-native)
Without more details is hard to answer but you could try react-native-svg. Here is a link to an example Building React Native Animated Feedback UI
or reactArt Morphing SVG Paths with React Art
It would help if, when you ask, you gave more information though (e.g., the image format, what you have already tried, and research you have already conducted to look into the topic.)
Cheers!
I used react-native-camera on my iOS app and now trying to add Focus, Brightness and Zoom controls to it. So far I was unable to come up with a solution. Any idea how to do this?
I tried to find an option in different react native camera packages. Also posted in their git repos for help. Finally tried this post: https://medium.com/react-native-development/react-native-camera-app-with-live-preview-saturation-and-brightness-filters-d34535cc6d14 Where they take a photo from the camera every 5 milliseconds and adjust its brightness which seems to be very unstable and it makes the app crash.
It is not possible to use the focus and zoom functionalities with react-native-camera.
Unluckily the focus api has many bugs and the zoom functionalities will not render fast enough with javascript.
Maybe a solution is not using react-native-camera and instead just writing an intent to open the default camera application
The following app uses this solution, all the camera functionalities work perfectly.
Could they re-open the issue as it seems to not be solved?
Developers may need to review all the open issues to estimate the project deadlines.
I have a client that adamantly insists on a solution with embedded camera in terms of having a ContentPage with an camera stream and custom buttons and icons, similar to https://github.com/pierceboggan/Moments, or at very least as I understand it seeing as it is a Snapchat clone. And my client wants similar swipe capabilities as to how navigation works in Snapchat.
However, as far as I can tell most of what is utilized in that solution has been deprecated.
I have suggested using the Media Plugin https://github.com/jamesmontemagno/MediaPlugin but they're not satisfied with the camera being pushed on the stack.
I've looked into implementing it natively and using dependency injections but it appears to be an overwhelming amount of work just to implement the most basic functions, particularly for Android's Camera2.
I'm hoping someone can provide me with good news of an easier alternative or an alteration to either Moments or Media Plugin or anything similar that will facilitate the requirements or if my only option is time consuming and complex?
From the code of Moment, you can do what you want to achieve. I did this for iOS.
You will have to create a custom renderer to display the camera page. You will be able to add buttons on top of it.
You could try this example which use custom renderer to add a take photo button and switch camera button on the camera view. Which is able to use on iOS and Android platform.
Main Page:
Camera View with custom button page:
How to properly manage rendering map when device is offline?
Official documentation (https://github.com/mapbox/react-native-mapbox-gl/blob/master/API.md#offline) helped to get packs saved and being able to remove them, but trying to load component without network connection gives empty map. Mapbox.initializeOfflinePacks() is called in root component and offline packs may be seen and deleted from any point in app.
Other link suggested in documentation (https://www.mapbox.com/help/mobile-offline/) did not help.
Versions: React Native 0.46.4, React Native Mapbox GL 5.2.0
Edit:
This was a bug in our app. Latitude and longitude inside bounds argument passed to method createPack were swapped so pack was correctly downloaded but contained a map of region that was far beyond visible area at high zoom level and, due to its small size, invisible at wide zoom.
all!
Is there any way to build custom camera component in codename one?
I googled and got about PeerComponents, however don't know how to use it.
I just would like to use it as Label component with 2 buttons (Taking picture button and retaking picture button)
Kindly provide some small sample code for me. Best regards.
[UPDATE]
I need this because of following reason.
First of all, I need square Image taken by camera, and user should be able to know how the picture will be taken.
2 resolutions here:
First, if I have to use full screen camera, it will be better to draw or overlay square rectangle on camera view so that user can know which area will be taken.
Second, if overlaying and drawing is difficult (or should use native code for that), I need some custom components for camera area such like PeerComponent. So I would like to place it anywhere of screen area as square rectangle. Then, users won't need any overlay or drawing something on it because it is already square.
That's all what I need.
Regards.
Yes, it's certainly possible to create a component like this, and we do intend to create one at some point in the future. You can beat us to the punch.
First, you should familiarize yourself with how native interfaces work. This video is a good start:
https://www.codenameone.com/how-do-i---access-native-device-functionality-invoke-native-interfaces.html
This series of blog posts demonstrates how to wrap 3rd party SDKs into codename one on Android and iOS.
https://www.codenameone.com/blog/integrating-3rd-party-native-sdks-part-1.html
https://www.codenameone.com/blog/integrating-3rd-party-native-sdks-part-2.html
https://www.codenameone.com/blog/integrating-3rd-party-native-sdks-part-3.html
Although it doesn't include an example with PeerComponent, it is helpful for getting a grasp on the process. Adding peer components into the mix is really just a matter of returning the corresponding "View" type from a native interface. On Android, that is an android.view.View, on iOS it is a UIView, in Javascript it is an DOM element, in UWP it is a FrameworkElement, and in the simulator, it is a javax.swing.JComponent.
This blog post does include an example of a peer component, but it is targeting UWP:
https://www.codenameone.com/blog/uwp-native-interfaces-mix-c-java.html
Once you have a grasp of the material, you should look at relevant examples. Currently the most complete example I'm aware of of a cn1lib that implements a native peer is the Google Maps lib:
https://github.com/codenameone/codenameone-google-maps
You can see the Android native implementation here, and the iOS native implementation here
You may want to refer to the existing code for image capture in Codename One as well.
Android: https://github.com/codenameone/CodenameOne/blob/master/Ports/Android/src/com/codename1/impl/android/AndroidImplementation.java#L5788-L5811
https://github.com/codenameone/CodenameOne/blob/master/Ports/Android/src/com/codename1/impl/android/AndroidImplementation.java#L5701-L5714
Though it uses intent to open the native capture dialog, so it may not be too relevant.
IOS: https://github.com/codenameone/CodenameOne/blob/master/Ports/iOSPort/nativeSources/IOSNative.m#L2879-L2927