custom 'widgets'

[richmond62]

--
This is dead easy . . . although, in a perfect world, it would be even better if one
could extend the dimmed out area to the edge of one's monitor, as per your
screenshot of a macOS app.

[stam]

Thanks @dunbarx, your persistence is appreciated...
however i'm going to stop here now - we keep talking in crossed purposes.

I can do this and a whole lot more already.
Actually what i want is to change custom properties of the popover in the IDE without switching from EDIT to BROWSE modes (are these the correct names for selecting pointer tool and browse tool?).
The popover is dynamically constructed so the arrow can be on any side and move along that side where needed (eg if near the top or bottom of the screen the arrow would be up or down respectively, to keep the popover area in the screen)

I've created a hidden group that contains settings for the popover i can adjust for layout purposes - but to show this and use this i have to be in BROWSE mode.

Coming from other environments you can often do this at design time rather than runtime (i.e. the custom properties can be directly exposed in the IDE with an interface that is easy to use - i know you can directly edit these in the inspector as it is) but I suspect it's overly complicated so i'll leave this for now.

Thinking about it more, i think this is probably something that can be done with a plugin but right now don't have time to look into how to create plugins so maybe a project for the future. For now i'll just keep switching modes

[dunbarx]

Hi.

Persistent, eh?

Make a field on a new card. Put this in the card script:

Code: Select all

on mouseEnter
   if "card" is not in the target then answer random(999)
end mouseEnter

Messages are sent in edit mode. We can play around with that later, but I have to go.

Craig

[SWEdeAndy]

Stam, would this do what you want?:

In the group script of the settings gadget:

Code: Select all

on mouseEnter
   choose browse tool
end mouseEnter

on mouseLeave
   choose pointer tool
end mouseLeave

This saves you the hassle in the IDE of changing tools manually. I use this myself sometimes, when I have something similar to your settings gadget. It does get tedious manually changing tools often in some development phases.

Sometimes though, this solution too gets tedious, because you keep accidentally moving the cursor over the triggering area. Then you could add e.g. "if the shiftKey is down then" before the "choose" line.

[dunbarx]

@SWEdeandy. I set up, in a plug-in, so a right click switches tools. I find this very comforting.

@ Stam. I am not surprised that Hermann hacked the PI. Everything in LC is just a stack, so everything in LC is hackable. I have done some stuff with the SE.

That said, do you really need to hack the PI? Since you already know the difference between a widget and a gadget, I would make a gadget that comforts you as well. For example, and I am still not quite sure what you are trying to achieve, change the card script to:

Code: Select all

on mouseMove
   if abs(item 2 of the mouseLoc - the top of fld 1) < 10 and\
      item 1 of the mouseLoc > the left of fld 1 and\
      item 1 of the mouseLoc < the right of fld 1 and\
      item 2 of the mouseLoc < the bottom of fld 1 then
      get the rect of fld 1
      put item 2 of the the mouseLoc into item 2 of it
      set the rect of fld 1 to it
   end if
end mouseMove

In edit mode, get the cursor near the top of the field and move around, though not too fast. Now this is all silly. But it works while in edit mode (pointer tool). My point is, again, that I do not yet know what you want. Is the handler pertinent? Would other functionality in edit mode do?

Craig

[stam]

Thanks both,

@SWEdeAndy - that's not a bad idea actually but not directly useable as it would make it impossible to work with the popover in edit mode (like adding controls to the group, which is really what this is for). I guess a key modifier could be added so this only triggers when say the option key is pressed?

@dunbarx - not sure i get it but will look at your code...

My popover at present is a bit 'hacky', mainly because i haven't yet familiarised myself with directly drawing custom shapes in LC yet (my time is too limited sadly) - but it works for my purposes.

Download: Popover stack

I'm posting it here to make it clearer what i was aiming to do - the popover group can be resized correctly in edit mode (i.e. the 'arrow' is positioned always where it's supposed to be); in browse mode, right-clicking on the shape shows some simple controls to set up the desired appearance.
It also has a simple API with just 3 methods: setSide, setLocation (set the side and location of the 'arrow') and toggleConfigurator (show/hide configuration settings) - all set in the group script.
I intend to expand the API a bit to include functions for setting the colour correctly and the line thickness across all elements of the group and also implement scaling of the 'arrows' for popover size.

What i was after was a graphical way to use the API in the IDE without switching modes (ideally as a palette of some kind) but I'm guessing this needs to be set up as a plugin perhaps... Any input welcome...

----------------
EDIT: for now i've used Andreas' code but with the adding of a check for the option key so it doesn't trigger every time i want edit a copy

[bn]

Hi stam,

If I understand you correctly what you want is:
when being in edit mode and you want to configure your popOver via the the build in configurator you have to switch to browse mode for the right-click.
As an exercise you want to do it all with the mouse, no keyboard.

It is very tricky to get this right with mouseEnter/mouseLeave at the group level because when hiding the configurator the group gets a mouseEnter message.

I tried (as an exercise) to come up with a mouse only solution.
For that I added a graphic "gRedDot" which is shown only in edit mode. If you move over the redDot the mode switches to browse mode. Then you can do your right-click to edit the popOver. Once you dismiss the configurator it switches back to edit mode.

The redDot graphic is controlled by a subscription mechanism built-in to the IDE. When in edit mode the redDot is shown, otherwise it is hidden.
The subscription is started on "openControl" and unsubscribed on "closeControl"

In a short test it did what I described above.

Kind regards
Bernd

popover_liveCode 2.zip

(4.52 KiB) Downloaded 205 times

[dunbarx]

Hi

I have not looked at Bernd's stack. My only point was that messages can be sent and trapped while in edit mode. It is not "just" a world in which you access development gadgets such as the PI, and therefore you can do stuff without switching tools.

Craig

[stam]

Hi Bernd... that is definitely more functional than mouse enter/leave with option key, thank you.

Thinking more about it, what i was really envisioning is the option to to have a floating palette for the configuration in edit mode (rather than switching back and forth from browse mode) - but i guess that would be something like a plugin?

[SWEdeAndy]

Thinking more about it, what i was really envisioning is the option to to have a floating palette for the configuration in edit mode (rather than switching back and forth from browse mode) - but i guess that would be something like a plugin?

You could make a substack with the configuration controls, and have it open as a palette on the side. One way is to put this in the stack script or first card script:

Code: Select all

on openStack
   palette "myConfigStack"
   set the topLeft of stack "myConfigStack" to the topRight of this stack -- Or wherever you wish it to appear
end openStack

Note though, that the palette will float above the script editor window too, so it can get in the way when developing. Maybe there's a way to get around that? I count on Bernd to solve that one too!

[stam]

You could make a substack with the configuration controls,...

That sounds good but might be tricky?

The idea is to add this gadget into projects where a need them and as these may contain other controls (eg buttons, fields linking to a database etc) I would probably have more than one per card as needed. Currently the configuration controls are internal to the group and linked into the group itself (ie the methods refer to the control of me).

A stack or substack would i think need to be external to the group and at the very least keep a record of the long id of a specific gadget.
Probably the best way would be to have the stack add the gadget to the card in that case?
In that case could it just be a an external stack rather than substack of the project?

[SWEdeAndy]

A stack or substack would i think need to be external to the group and at the very least keep a record of the long id of a specific gadget.
Probably the best way would be to have the stack add the gadget to the card in that case?
In that case could it just be a an external stack rather than substack of the project?

Well, yes. Both a stack and a substack can use palette mode. But you have described visions for a plugin or floating palette, and neither could practically be part of a group (a plugin is also an external stack). What is still a little unclear to me is if the configuration controls are only needed while developing (i.e. in the IDE) or if they are part of the interface also in the standalone?

In the latter case, it makes sense that you integrate them in the popover groups. And just use a suitable tweak among the ones suggested to make your life a little easier in the IDE, when switching between browse and pointer tools.

[stam]

Thanks SWEdAndy,

Configuration controls only really make sense in the IDE - these are display and data editing interface elements in the stand alone, there is no role for adjusting appearance at runtime. I think i'll just work a bit more on Bernd's 'red dot' suggestion for now as i need to crack on with the larger project this was meant to be a component for
I'll probably take this further at some point in the future...

[jiml]

If you're really lazy try this variation on your stack:

Code: Select all

go url "http://netrin.on-rev.com/misc/Popover_Lambert.livecode"

Jim Lambert

[bn]

Hi stam,

I changed your stack a bit: I moved the logic of your main group into the card script of a sub stack. There I changed the reference to "me" to the long id of the "real" me in your main stack. See card script of sub stack.

I left the red dot graphic that shows up in edit mode only now if you move into it it will open the substack as palette. From there you can configure the popover.

Thanks to your structured coding it was not as hard as I thought it would be.
It now has a structure that you can extend. I might have forgotten to adapt some things but in short testing the main controls worked.

Kind regards
Bernd

PopoverWithPalette.livecode.zip

(5.29 KiB) Downloaded 217 times