I'm trying to create a legend which should work like on this site but I can't get it to work...
(press the 'i' button)
http://mtbmap.no/#6/63.400/10.390
I tried popup with easy button plugin but it shows up on the middle of the screen. I would like to have toggle like on mtbmap.
Here's my working site
http://pomorskieszlaki.pl/index.html#9/54.2516/18.3774/osm-rowerowe-piesze-ddr
Any chance to point me the right way?
Thanks a lot. I'm still a newbie with JS...
If you are still looking to add this feature to your map, there is a way.
You can use makeIcon( with your attributes) to embed, size and attach a graphic icon, you can also set the distance away from the icon that this popu opens up.
Then you can addPopup(with your attributes) to add a popUp box to that icon which is editable as any other popup would be.
Related
I'm kind of noobie in Flutter and I'm trying to learn it for the moment by creating different UI styles for whatever applications. But I encounter a problem in terms of designing a button.
WHAT I WANT TO DO:
WHAT I TRIED:
Using a GradientButton:
I can't change the rounded corners to not be that rounded.
I can't change the size of the button dynamically based on the size of text
I can't change the shadow of the box
Using a RaisedButton in combination with a Container:
If I will tap the button is going to show a gray box which was clicked on, but this box is not going to have the same size or shape with the box, so it's going to look weird.
Using an InkWell in combination with a Container:
I'm not quite sure but I can't do the click animation with that, is like I'm pressing on nothing, even those the action is happening.
If you do have any idea how can I archive this button please let me know, for me at the moment at least is the most complicated button I've ever seen.
see the source code at github
https://github.com/bluemix/Gradient-Widgets/blob/master/lib/src/gradient_button.dart
You can use Container to custom button gradient and add GestureDetector or InkWell to onTap handle action.
GestureDetector will have no effect. InkWell will have effect.
I would like to achieve with QML a menu with a single menu item, like chrome does it. It has this button with those three horizontal bars and when you click it you get a single menu. Recent versions of firefox also follow the same principle. It allows not to waste too much horizontal space in the GUI of the application, unline usual menus which take up the whole width of the window.
I did not manage to reproduce exactly this GUI with QML. From what I saw you can either use a QML ApplicationWindow, and then a MenuBar, but then it takes the whole width of the window... Or have a toggle button to trigger the menu, then use a standalone Menu and its popup() method, but then it pops-up directly under the cursor, not exactly under the button to open the menu, which doesn't look good. That's really more abusing the mechanism for a context menu.
I could make a fake menu which would be a custom widget in my window but then it could not expand beyond my application window. Such a behaviour is almost required because I'll put this button on the far right of the window, as chrome does it.
Is it possible to achieve exactly that behaviour in pure QML (no C++)?
What I did for now is the last option that I mentioned: fake menu in the window. It's drawing using the canvas which enables me to make it a little pointy arrow from the menu to the menu toggle button, as done also by firefox.
The minus as I said is that the menu cannot go out of the window, plus everything is very manual (mouseover effect for menu items...), so I'm still interested in other solutions.
EDIT: ok after some time I realized a big plus of my approach: I can put custom widgets, not only labels in the menu. So I think it's absolutely the right approach now.
I am working on a custom control box (that min,max/restore/close button in the top right of your Windows titlebar) for my new application. I use closeIcon = style.standardIcon(QStyle.SP_TitleBarCloseButton) to get the correct icon for them. See the full code here in my other SO question. What I got is a black icon. In which I need the white version when it's in hover state.
Can we .. I don't know, inverse it? Or should I get another icon from QStyle?
This question (and several others) are from the intention of creating a chrome like tab in PyQt application, by hiding the titlebar and reimplementing control box. But it didn't gives the best result. Right now this is my solution to create a chrome like tab in PyQt application. Therefore, I close this question.
Anyone know how to create animated auto-hide on ApplicationControlBar just like Windows's taskbar?
I'm totally new on this.
Thanks.
The issue with doing this is that on Windows, you have a 'lower bound'--also known as the bottom of the screen which is used to trigger the display of the task bar based on the mouse location.
In a browser based app, you don't have that spot which is easy for the user to roll their mouse over.
That said, if you're still adamant, you should be able to put something together easily using the mouse over events to swap the visibility of the ApplicationControlBar and then you can use show / hide effects to display the control bar.
Hey, I've been assigned to design a flex 3 volume control component similar to the one Youtube players have. I mean, you move the mouse over the volume icon and a vertical slider appears.
My only doubt is about how making this vertical slider to appear and to hide properly.
Should I extend a PopUpButton somehow? Maybe another kind of PopUp component? Or do I really need to program the whole thing in actionscript(that would be just sad and sounds like reinventing the wheel)?
Is anyone able to simply point me in the right direction?
OBS: No need to teach me about skinning, designing.. or any of the rest. :)
No! Don't use a popup. Put a canvas somewhere hidden behind your bar of controls and just set it's visible to true when you mouse over the control.
I don't remember if the youtube slider covers the volume button or appears above it, but either way you can put it in there with a canvas.
If you want it to be one single component, the problem you run in to is that the size will be wrong if you hide the slider in the button component (It will be measured to be the size of the slider, instead of the button). But don't worry! Just override measure() and measure the button instead of both. Then if you set clipContent to false, it can display the slider outside of its bounds
What I suggest is to create a flex control that contains a graphic for displaying the volume meter and a hidden slider.
When you roll over the graphic volume meter you show the slider.
When you roll out the slider or the volume meter then you hide the slider.
I believe that's all