Valentine Gadget

[Hutchboy]

Hi,
I made a digital "toy" in time for Valentine's Day.

Following my Starfield Animation demo I'm adapting that code for my project along with a number of other effects. I have an animation going to generate a kind of particle effect using small pink hearts and it works well, except it would be nice if the animation would continue, but it is interrupted when I press a different button yet resumes afterwards. I'm kind of amazed it continues and doesn't crash.

The main effect is to display a random valentine message and a small image. It loads the messages from a hidden "Phrases" field and the images are on the 2nd card. These are easy to revise to add your own messages and images (64x64 pixels)

The zipped file size is 1.1MB so too large to attach here but I have a download link:

https://mygiantbrain.com/downloads/file ... Gadget.zip

If you have any suggestions on how to improve the heart effect I would love to hear it.

I am attaching a snapshot of the gadget interface.

- Mike

[stam]

Nice -- a bit too cutsey for me, but nice animation with the hearts
By and large works well, but there are 3 issues I would personally address:

1. It's not clear what is a button and what isn't
There are close to 20 things that could be buttons and it's confusiing for the user. Consider changing the cursor when hovering over an actual button like so:

Code: Select all

on mouseEnter
    set the cursor to hand
    lock cursor
end mouseEnter

on mouseLeave
    unlock cursor
end mouseLeave

You could add this to each button, but for simplicity I would create a hidden button and put this script in it and then select that button as the behaviour for all actual buttons (meaning if you add more buttons you can just select this behaviour to make the cursor change to a hand when hovering and back to normal when not).

2. You probably have inverted the roles of the top-right and bottom-centre buttons
It seems like it's the bottom center button that should be displaying the 'made with livecode text'. On that note, please be aware that if the user has clicked the show random text + image button and the user then clicks the 'about' button, the icon will still be present until it fades. Looks weird, but probably because I had already changed he code as in point 3 below...

3. What is currently the bottom-centre button blocks the interface with slow fade-in and fade-out of random phrase & image.
This makes the stack feel unresponsive.
Simply adding 'with messages' to all the wait statements makes it much more responsive (i.e. the user doesn't have to wait until the animation has faded in and faded out to try another phrase/graphic)

In other words, the script of the bottom center button, changing your repeat loops to the below makes it feel much more responsive

Code: Select all

repeat with i = 0 to 70
    set the blendLevel of image "Heart Cover.png" to i
    wait 10 milliseconds with messages
end repeat
wait 90 ticks with messages
repeat with i = 70 down to 0
    set the blendLevel of image "Heart Cover.png" to i
    wait 10 milliseconds with messages
end repeat

Great job otherwise, keep em coming
Stam


PS:
rather than attaching a screenshot of the gadget, convert it to JPEG and reduce it's size to <= 200 Kb so it will display inline with the post instead of some full sized attachment, like so:

Valentine Gadget.jpg (118.2 KiB) Viewed 2984 times

[Hutchboy]

Thanks for the quick reply. I'll make the updates you suggested along with some other interface updates and a few more effects and replace the file to download on the website. For the life of me I don't know how I missed "waiting with messages".

BTW, if this is "a bit too cutesy", creates a tickle in the back of the throat, or triggers the gag reflex...1st project goal attained! :lol:

Thanks again,
-Mike

[stam]

BTW, if this is "a bit too cutesy", creates a tickle in the back of the throat, or triggers the gag reflex...1st project goal attained!

LOL

Another thought: you could use the graphic (without the pink background! Just the box with the buttons on it) as a windowShape, so your stack's window is shaped like the gadget.
Not sure what would happen with your floating hearts, may or may not need to be moved to inside the perimeter of the gadget. Presumably you have created this and have a layered image - just export that image as PNG, import it to your stack and set the widnowShape of the stack to it...

Ultimately what does one do with this? I can imagine building it as a standalone executable and send it to someone... in that case it would be nice if it had a 'kiosk' mode so for example it would automatically go through all the effects if left idle. The full screen checkbox you have could be moved to one of the buttons in the gadget to complete the look

[stam]

Just to prove it's doable, I made a crude approximation of your main graphic imported into the stack, set the stack's windowShape to the id of the newly imported image (having resized this to be approximately right -- crudely) and with some re-jigging got the size and position right, so the whole stack looks like it's cut-out and sitting on the desktop:

One downside is the little hearts only appear when within the bounds of the windowShaped stack - so if you did. go with this, you'd need to change where the hearts appear from and spread. Maybe from the middle of the stack and spreading radially?


Of course without a titleBar you can't drag this around - so to do this, in the stack I put this code ( based on Scott Rossi's breeze.rev stack) which allows you to move the stack clicking anywhere:

Code: Select all

local sAllowDrag

on mouseEnter
  put empty into sAllowDrag
end mouseEnter

on mouseDown
  put mouseLoc() into sAllowDrag
end mouseDown

on mouseMove X,Y
  if sAllowDrag is empty then exit mouseMove
  set topLeft of this stack to globalLoc(X - item 1 of sAllowDrag & "," & Y - item 2 of sAllowDrag)
end mouseMove

on mouseUp
  put empty into sAllowDrag
end mouseUp

on mouseRelease
  put empty into sAllowDrag
end mouseRelease

on escapeKey -- just in case mouseUp sticks
   put empty into sAllowDrag
end escapeKey

[Hutchboy]

I like the suggestions for the floating window and the kiosk mode.

If you look at the border area around the central heart in the gadget it looks like a tv screen. I intended to temporarily hide the central heart and use this blank display area for certain effects, which would be perfect for the floating window and kiosk mode:

1. the star field animation but rendered in hearts;
2. heart and spherical bubbles "bubbling up" from the bottom; and
3. hearts bouncing around the inside of this smaller screen with collision detection. Lots of possibilities.

I had one goal for this project. It has been to use the Custom GPTs I have created on the ChatGPT store, including a LC Helper GPT, to see how much more productive I can be developing in LiveCode. To me it is night and day from where I was. When everything is in sync I feel like Picard standing in front of the replicator "Tea, Earl Grey, Hot". 8)

-Mike

[stam]

Look forward to seeing what you create!

[Hutchboy]

Hi,

I've updated my Valentine Gadget to improve the effects buttons, added some "lights" and added a new animation effect simulating bubbles rising from the bottom of the screen. Below is an updated image. The updated stack and a compiled Mac app are available in the download section of my website at the following link:https://mygiantbrain.com/downloads/.

Note: On my silicon Mac the animation is smooth but on my 2014 iMac (3.5 GHz i5) running Mojave it is very slow. I think I need to add some detection code so I can speed up the effect on Intel Macs and leave it be for Silicon Macs.

Right now the bubble effects are limited to one image but I am working to create a way to pass images as a parameter to the create and update bubble handlers.

Happy coding (I thought I'd have this thing polished off before V-day, but I'm obviously not going to make it) :oops:
- Mike

[Hutchboy]

Hi,

I took a little detour on my Valentine Gadget after the suggestion about making it a floating gadget-shaped stack and creating a kiosk demo mode. In my first foray into making a stack with a different window shape I came up with this little demo "My First Clown". It doesn't do much but if you double-click it it will bounce around the screen. I have code to stop the action with the escape key but it doesn't work correctly for some reason.

In the stack script you can play around with the friction settings ( I have it set at .999) and change the initial velocity when the stack animates.

I've compiled it into a simple app, but I have one question about creating standalone apps (not related to App Store deployment). I think I fully expected to have to go into security settings to enable the apps I've compiled for MacOS to run, but I have not run into that at all and it surprises me. In the StandAlone set up all I do is select MacOS and check the Intel/Apple boxes and that's it. I haven't tried to fill in any additional info.

Happy coding, -Mike

[jacque]

LC creates a temporary signing certificate when you build a standalone with "sign for development" but it only works for you. Others won't be able to open the app until it's signed and notarized, unless they manually approve it in system prefs.

[Hutchboy]

Jacque, Thanks for clearing that up for me, I had never heard that although it is probably documented somewhere. - Mike