I’m having issues with the GoogleMaps and the new ‘swipe to close’ modal.
My issue is that the class _gmaps_cdv_ that gets attached to the body by GoogleMaps is changing the background color to white. The effect looks weird and bad.
I’ve tried pretty much everything…
Removing the class once the modal gets loaded. That will make the map disappear and take whatever color I’ve set to the background.
Removing the class once the modal gets loaded and attaching it again once the modal gets destroyed. Same result as previous
Destroying the map on the ionViewWillLeave() and recreating using the ionViewWIllLoad(). Same result as previous.
Any tips? Is this a bug?
Thanks
I got around this. The solution is pretty simple. The background color can be setup on the Environment class of the GoogleMaps.
Make sure the Environment is imported on your component and do as follows:
// If you're following the documentation, there should be more things imported here, because I'm focusing on the Environment, I will only use this one.
import { Environment } from '#ionic-native/google-maps/ngx';
ngOninit() {
Environment.setBackgroundColor('black'); // Or whatever color you want.
}
That's it!
Here is the documentation link for reference:
https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/environment/README.md
Related
I've noticed strange behaviour using material ui tabs with i18next npm package (useTranslation hook) - for localize my buttons. The main problem is: bottom indicator doesn't recalculate its position after page reload, but when I comment my useTranslation hook - everything is ok. my hook looks like this at top of component:
const { t: tc }: UseTranslationResponse = useTranslation('common');
I don't see any dependency here or any asynchronicity problem why this happens. Any ideas? Thanks
I faced the same issue today. Just like you, I'm using react material tabs with i18next.
To solve this problem, I forced namespaces load on i18n initialization.
I don't know why this bug happens, but this workaround works for me.
i18n.init({ns: ['components', 'pages', 'common', 'generalData']})
You're probably loading your translations asynchronously? Using i18next-http-backend maybe?
Then you may not be using Suspense and also not waiting for the ready flag: https://react.i18next.com/latest/usetranslation-hook#not-using-suspense
I'm trying to use SMPageControl, I've downloaded and added the h,m classes and I drag a UIView and set it's custom class to SMPageControl but it doesn't seem to work.
Any ideas about why wouldn't that work? I've also downloaded the sample project and dragged one of the UIViews that works there to my ViewController but it doesn't work.
SMPageControl: https://github.com/Spaceman-Labs/SMPageControl
The default appearance of SMPageControl is almost transparent and my background was white and thats why I couldn't see the control on my view.
I'm trying to put a spinner inside a custom info window that appears when the user presses a marker. I have a custom view for the window that has lots of subviews that show up fine. But when I try to add a UIActivityView or an animated PNG sequence, that doesn't show. Has anyone else experienced this?
The documentation on the mapView:markerInfoWindow: method says:
If you change this view after this method is called, those changes
will not necessarily be reflected in the rendered version.
It seems likely that the Google map is not showing the actual UIView you return, but a screenshot of it taken when the info window is returned by the delegate.
As mentioned in this answer, this is made explicit in the Android documentation - it seems likely that the Android and iOS SDKs work similarly.
If you've changed the view I'm not sure if there is a way to force the SDK to take a new screenshot of it. Possibly you could try setting the map's selected marker to nil and then back to your marker, to see if it then calls mapView:markerInfoWindow: again - although it might also re-centre the marker on the map when you do that. It also likely wouldn't be very efficient.
You can call mapView:markerInfoWindow: then inside the method you can create a UIView which you can add different controls on that UIView including the spinner. You can also specify on which location you would like to put the defined control.
I have been looking at the sample app provided by InAppSettingsKit and I noticed the use of a couple of buttons:
I would like to integrate a single red button in my app called reset, however I'm not sure how to do it. I've had a look at the code in the sample app and I'm a bit lost with it all. Please could someone help me out?
After spending a while searching through all the code and plists I managed to find the answer to my question. For those who are interested what you need to do is the following:
Add a row to your Root.plist file with the Type set to IASKButtonSpecifier.
Set the Identifier on this row as something useful e.g. 'myButton1'.
Add the following delegate method to the viewController you loaded the InAppSettingsKit from:
- (void)settingsViewController:(IASKAppSettingsViewController*)sender buttonTappedForKey:(NSString*)key
{
if ([key isEqualToString:#"myButton1"])
{
// Do some actions...
}
}
It's worth noting that the key is equal to the identifier you set in the Root.plist.
The only thing I haven't worked out yet is how to change the colour of the button; however I suspect this may be possible by overriding a method.
Great that you already found part of the solution. To customize the look, you should create a custom view using the IASKCustomViewSpecifier documented on http://www.inappsettingskit.com/. The yellow icon for instance is making use of this. In your case, you could return an instance of UIButton with a red background color (or a custom background image).
In this case, you don't need the buttonTappedForKey method to get the tap event but configure the target/action of your button as usual.
I'm trying to get a Gtk::Spinner object to display while calculations are in progress but nothing appears to be happening. The snippet of code looks like...
{
Gtk::Spinner spinner;
spinner.start ();
// do some work...
spinner.stop ();
}
I'd have thought the spinner needed to know which dialogue it appears over but I can't see any way of feeding that into the object. Does anyone know where I could find a worked example? I can find the Gtk documentation in many places, but that isn't helping much.
In short, here is a quick checklist if Gtk::Spinner is not appearing on screen:
Make sure librsvg is installed.
Check if your currently active Gtk theme has an image file with base name "process-working-symbolic" (e.g. /path/to/your/theme/icons/scalable-up-to-32/status/process-working-symbolic.svg).
In your app code: Make sure you added the spinner object to some parent widget / container: vbox.pack_start(spinner, Gtk::PACK_SHRINK);
In your app code: Ensure all widgets are actually made visible: show_all_children();
In your app code: Finally you need to call spinner.start() for the widget to actually appear and spin on screen.
In detail:
The actual Gtk spinner widget code (see function gtk_spinner_class_init() in gtkspinner.c) is not doing any drawing on its own. In fact its code is very little. All it does is adding CSS code to the gtk widget:
it assigns the CSS class "spinner" to the widget
and it automatically adds and removes the CSS pseudo-class "checked" whenever the widget's boolean gtk property "active" changes.
So the actual look (icon) and the animation is defined by your current theme's CSS file. E.g. in Gtk's default theme's gtk-contained.css file you find the following:
spinner {
background: none;
opacity: 0;
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
};
Which means it will automatically search for an appropriate image file with base name "process-working-symbolic" in the theme's "icons" directory tree. And the actual spinning animation is defined in the same CSS file by this:
spinner:checked {
opacity: 1;
animation: spin 1s linear infinite;
};
In most other themes these CSS code portions for the spinner widget are pretty much identical.
Now here is a common problem with this: in most themes the spinner image is an SVG file (e.g. typically "process-working-symbolic.svg"), but the stock Gdk pixbuf loaders do not support the SVG format at all. They support a variety of other image file formats, but for actually allowing Gdk/Gtk to load .svg files you need to install a third-party pixbuf loader capable to do so like librsvg.
Alternative:
In case you cannot or don't want to bother to install an SVG capable Gdk pixbuf loader like librsvg, then you can also simply add image file(s) with the same base name, but in another file format like "process-working-symbolic.png" to your theme's icons directory tree. So either draw or download some spinner picture then scale it and place them several times to the resolutions listed in your theme's "icons" directory, e.g.:
/THEMEDIR/icons/8x8/status/process-working-symbolic.png
/THEMEDIR/icons/16x16/status/process-working-symbolic.png
/THEMEDIR/icons/22x22/status/process-working-symbolic.png
/THEMEDIR/icons/24x24/status/process-working-symbolic.png
/THEMEDIR/icons/32x32/status/process-working-symbolic.png
/THEMEDIR/icons/64x64/status/process-working-symbolic.png
/THEMEDIR/icons/256x256/status/process-working-symbolic.png
/THEMEDIR/icons/512x512/status/process-working-symbolic.png
Also you should know: Whenever you do spinner.start() the spinner icon immediately appears on screen, but even on a decent machine it typically takes almost a second before the spinner starts its animation.
Did you call
spinner.show ();
and add it to some window?
Moreover, your calculations may block the UI, so it is not updated. Call
while (Gtk::Main::events_pending ())
Gtk::Main::iteration ();
once in a while.
To change the mouse cursor to "busy" you can do the following:
Glib::RefPtr<Gdk::Window> window = dialog.get_window();
if(window) {
window->set_cursor(Gdk::Cursor(Gdk::WATCH));
Gdk::flush();
}
To change it back, do
window->set_cursor();
instead.
Disclaimer: I usually work with GTK in C, and have translated this on the fly...