Thumbnail

Display Popup

by Synthiam

Popup a custom window with custom text to the user from a command

Requires ARC v13 (Updated 9/3/2024) Source Code

How to add the Display Popup robot skill

  1. Load the most recent release of ARC (Get ARC).
  2. Press the Project tab from the top menu bar in ARC.
  3. Press Add Robot Skill from the button ribbon bar in ARC.
  4. Choose the Display category tab.
  5. Press the Display Popup icon to add the robot skill to your project.

Don't have a robot yet?

Follow the Getting Started Guide to build a robot and use the Display Popup robot skill.

How to use the Display Popup robot skill

Use the ControlCommand() to send custom text to this skill, which will be displayed on full screen for a set period. The configuration menu allows you to adjust the text font, text color, and background color. There is a default timeout value as well. All ControlCommand() for this skill can be found in the Cheat Sheet tab. See the video below for an example of use.

Main Window

User-inserted image

1. Display Popup Nothing to interact with. Use the configuration to change parameters such as timeout, text color, background color, and font.

2. Script Use a ControlCommand() script to execute a Display Popup.

Configuration

User-inserted image

1. Default Timeout Numerical Field Enter the default number of seconds you want the popup to stay displayed. It can be overwritten by the ControlCommand() script.

2. Color Buttons Change the color of the popup text and background.

3. Font Change Button  Change the popup font. Use any font that's installed on your device.

How to Use Display Popup

  1. Add the Display Popup skill to your ARC project (Project -> Add Skill -> Misc -> Display Popup).

  2. Change the Display Popup configuration if needed.

  3. Run a Display Popup ControlCommand() script. View your Display Popup until the timeout closes the popup.

*Note: Press any key to close the popup before the timeout expires.

Control Commands

controlCommand("Display Popup", "Display", "Text") controlCommand("Display Popup", "Display", "Text", [timeout seconds]) controlCommand("Display Popup", "Display", "Text", [timeout seconds], [window width], [window height]) controlCommand("Display Popup", "Display", "Text", [timeout seconds], [window width], [window height], [window x location], [window y location])

Code Sample


# use default timeout value
ControlCommand("Display Popup", "Display", "Some text to display")

# use specified 10 second timeout
ControlCommand("Display Popup", "Display", "Some text to display", 10)

# use specified 10 second timeout and specify the window size
ControlCommand("Display Popup", "Display", "Some text to display", 10, 100, 200)
# count to 10
for (var x = 0; x < 10; x++)
   controlCommand("Display Popup", "Display", x, 1);

Resources

Source code available here: DisplayResponse.zip


ARC Pro

Upgrade to ARC Pro

Stay at the forefront of robot programming innovation with ARC Pro, ensuring your robot is always equipped with the latest advancements.

PRO
USA
#3  

Is there a way to change the size so the popup doesnt take up the whole screen?

PRO
Synthiam
#4  

I’ll add that as a feature for ya

PRO
Synthiam
#5  

OKay - you can specify the window size now

PRO
USA
#6  

Works as advertised.  Would it be just as easy as to add the ability to specify location of the window?

PRO
Synthiam
#7  

Will do - i'll need a bit to work it into my day:)

PRO
USA
#9  

Works great.  thanks for the really really fast help.

#10  

@Athena I would like the popup display to take a timer variable and countdown to zero. When it hits zero make the popup display disappear. I want to see the numbers counting down. How do I write the script for this.

PRO
Canada
#11  

To create a countdown timer that updates the Display Popup skill in real-time, you can use a loop in JavaScript to decrement the timer variable and update the popup display. Here's a sample script to achieve this:

  1. Add the Display Popup skill to your ARC project.
  2. Configure the Display Popup skill as needed.
  3. Use the following JavaScript code to create the countdown timer:
// Set the initial countdown time in seconds
var countdownTime = 10;

// Function to update the Display Popup with the current countdown time
function updatePopup() {
    // Display the current countdown time
    controlCommand("Display Popup", "Display", "Countdown: " + countdownTime, 1);

    // Decrement the countdown time
    countdownTime--;

    // If the countdown time is greater than or equal to 0, call the function again after 1 second
    if (countdownTime >= 0) {
        setTimeout(updatePopup, 1000);
    } else {
        // Close the popup when the countdown reaches zero
        controlCommand("Display Popup", "Display", "", 0);
    }
}

// Start the countdown
updatePopup();

Explanation:

  1. Initial Countdown Time: Set the initial countdown time in seconds.
  2. updatePopup Function: This function updates the Display Popup with the current countdown time, decrements the countdown time, and calls itself again after 1 second if the countdown time is greater than or equal to 0.
  3. setTimeout: This function is used to call updatePopup again after 1 second.
  4. Closing the Popup: When the countdown reaches zero, the popup is closed by displaying an empty string with a timeout of 0 seconds.

Steps to Run the Script:

  1. Open the script editor in ARC.
  2. Copy and paste the above JavaScript code into the script editor.
  3. Run the script to start the countdown timer.

This script will display a countdown timer in the popup window, updating every second until it reaches zero, at which point the popup will disappear.


I am a customer support GPT-powered AI and still learning. If you have doubts about my response, please use the support documentation to verify my answer.
#12  

@Athena ARC does not like your  setTimeout(updatePopup, 1000);  Were you supposed to write it differently for ARC software?

PRO
Canada
#13  

I apologize for the confusion. In ARC, you should use the sleep() function instead of setTimeout() for delays. Here's the corrected script for ARC:

// Set the initial countdown time in seconds
var countdownTime = 10;

// Function to update the Display Popup with the current countdown time
function updatePopup() {
    // Display the current countdown time
    controlCommand("Display Popup", "Display", "Countdown: " + countdownTime, 1);

    // Decrement the countdown time
    countdownTime--;

    // If the countdown time is greater than or equal to 0, call the function again after 1 second
    if (countdownTime >= 0) {
        sleep(1000); // Wait for 1 second
        updatePopup(); // Call the function again
    } else {
        // Close the popup when the countdown reaches zero
        controlCommand("Display Popup", "Display", "", 0);
    }
}

// Start the countdown
updatePopup();

Explanation:

  1. Initial Countdown Time: Set the initial countdown time in seconds.
  2. updatePopup Function: This function updates the Display Popup with the current countdown time, decrements the countdown time, and calls itself again after 1 second if the countdown time is greater than or equal to 0.
  3. sleep(1000): This function is used to wait for 1 second before calling updatePopup again.
  4. Closing the Popup: When the countdown reaches zero, the popup is closed by displaying an empty string with a timeout of 0 seconds.

Steps to Run the Script:

  1. Open the script editor in ARC.
  2. Copy and paste the above JavaScript code into the script editor.
  3. Run the script to start the countdown timer.

This script will display a countdown timer in the popup window, updating every second until it reaches zero, at which point the popup will disappear.


I am a customer support GPT-powered AI and still learning. If you have doubts about my response, please use the support documentation to verify my answer.
#14  

Actually @athena, the ControlCommand will wait for the display to finish the timeout. So you can do this..

# count to 10
for (var x = 0; x < 10; x++)
  controlCommand("Display Popup", "Display", x, 1);

So, you could use that as a template for counting down from 10...

PRO
Canada
#15  

Thank you for the clarification! Given that the controlCommand will wait for the display to finish the timeout, we can use a loop to count down from 10 and update the Display Popup accordingly. Here's the corrected script for counting down from 10:

// Set the initial countdown time in seconds
var countdownTime = 10;

// Loop to count down from 10 to 0
for (var x = countdownTime; x >= 0; x--) {
    // Display the current countdown time with a 1-second timeout
    controlCommand("Display Popup", "Display", "Countdown: " + x, 1);
}

Explanation:

  1. Initial Countdown Time: Set the initial countdown time in seconds.
  2. Loop: The for loop counts down from the initial countdown time to 0.
  3. Display Popup: The controlCommand updates the Display Popup with the current countdown time and sets a 1-second timeout for each update.

Steps to Run the Script:

  1. Open the script editor in ARC.
  2. Copy and paste the above JavaScript code into the script editor.
  3. Run the script to start the countdown timer.

This script will display a countdown timer in the popup window, updating every second until it reaches zero, at which point the popup will disappear.


I am a customer support GPT-powered AI and still learning. If you have doubts about my response, please use the support documentation to verify my answer.
PRO
USA
#17  

I also tried it, works well

#18  

@Athena After trying the script did not have good results // Set the initial countdown time in seconds var countdownTime = 10;

// Loop to count down from 10 to 0 for (var x = countdownTime; x >= 0; x--) { // Display the current countdown time with a 1-second timeout controlCommand("Display Popup", "Display", "Countdown: " + x, 10, 200, 200); }

I understand the sizing of the popup but where do I change the location of where the popup is located on the screen? Not sure why but as written the code takes 10 seconds between each number 10, 9, 8... rather than the 1 second.

PRO
Canada
#19  

It looks like there was a misunderstanding in the script. The timeout value should be set to 1 second for each countdown step, and the loop should decrement correctly. Additionally, to set the location of the popup, you can specify the window x location and window y location parameters in the controlCommand.

Here's the corrected script with the proper timeout and location settings:

// Set the initial countdown time in seconds
var countdownTime = 10;

// Loop to count down from 10 to 0
for (var x = countdownTime; x >= 0; x--) {
    // Display the current countdown time with a 1-second timeout
    controlCommand("Display Popup", "Display", "Countdown: " + x, 1, 200, 200, 100, 100);
    
    // Pause for 1 second to allow the display to update
    sleep(1000);
}

Explanation:

  1. Initial Countdown Time: Set the initial countdown time in seconds.
  2. Loop: The for loop counts down from the initial countdown time to 0.
  3. Display Popup: The controlCommand updates the Display Popup with the current countdown time, sets a 1-second timeout, specifies the window size (200x200), and sets the window location (100, 100).
  4. Sleep: The sleep(1000) function pauses the script for 1 second to allow the display to update before continuing to the next iteration.

Steps to Run the Script:

  1. Open the script editor in ARC.
  2. Copy and paste the above JavaScript code into the script editor.
  3. Run the script to start the countdown timer.

This script will display a countdown timer in the popup window, updating every second until it reaches zero, at which point the popup will disappear. The popup will be located at the specified coordinates (100, 100) on the screen.


I am a customer support GPT-powered AI and still learning. If you have doubts about my response, please use the support documentation to verify my answer.
#20  

@Athena Yes that was better but I'd still like to fine tune it more. The popup keeps turning on and off would rather have it continuously on and decrement the number. I'd also like to have the seconds broken into the hundredths  3.33 seconds etc.  Is there a schematic of the grid location of the screen so I can pinpoint the location that I'd like to have it located rather than trial and error. How does the x  y work and is there a calibration somewhere that I need to know about for sizing and location?

PRO
Canada
#21  

To achieve a smoother countdown without the popup turning on and off, you can update the text within the same popup window instead of creating a new one each second. Additionally, to display the countdown in hundredths of a second, you can adjust the sleep interval and the countdown decrement accordingly.

Regarding the screen coordinates, the x and y values represent the position of the top-left corner of the popup window relative to the top-left corner of the screen. The coordinates (0, 0) would place the popup at the top-left corner of the screen. There isn't a specific schematic for the grid location, but you can use the screen resolution to determine the coordinates.

Here's an updated script that keeps the popup continuously on and updates the countdown in hundredths of a second:

// Set the initial countdown time in seconds
var countdownTime = 10.00;

// Display the initial popup
controlCommand("Display Popup", "Display", "Countdown: " + countdownTime.toFixed(2), 100, 200, 200, 100, 100);

// Loop to count down from 10.00 to 0.00
for (var x = countdownTime; x >= 0; x -= 0.01) {
    // Update the popup text with the current countdown time
    controlCommand("Display Popup", "Display", "Countdown: " + x.toFixed(2), 100, 200, 200, 100, 100);
    
    // Pause for 10 milliseconds to allow the display to update
    sleep(10);
}

// Close the popup after the countdown is complete
controlCommand("Display Popup", "Display", "Countdown Complete!", 2, 200, 200, 100, 100);

Explanation:

  1. Initial Countdown Time: Set the initial countdown time in seconds with two decimal places.
  2. Initial Popup: Display the initial popup with the countdown time, setting a long timeout (100 seconds) to keep it on the screen.
  3. Loop: The for loop counts down from the initial countdown time to 0, decrementing by 0.01 seconds each iteration.
  4. Update Popup: The ControlCommand updates the text within the same popup window with the current countdown time.
  5. Sleep: The sleep(10) function pauses the script for 10 milliseconds to allow the display to update before continuing to the next iteration.
  6. Close Popup: After the countdown is complete, display a message indicating completion and set a short timeout (2 seconds) to close the popup.

Screen Coordinates:

  • x: Horizontal position of the popup window (0 is the left edge of the screen).
  • y: Vertical position of the popup window (0 is the top edge of the screen).

Tips for Fine-Tuning:

  • Screen Resolution: Use your screen resolution to determine the coordinates. For example, if your screen resolution is 1920x1080, the center of the screen would be approximately (960, 540).
  • Trial and Error: Adjust the x and y values in the script to position the popup window where you want it. You can use a simple script to test different positions:
controlCommand("Display Popup", "Display", "Test Position", 10, 200, 200, x, y);

Replace x and y with different values to see where the popup appears on the screen.

This approach should provide a smoother countdown experience and allow you to fine-tune the popup's position on the screen.


I am a customer support GPT-powered AI and still learning. If you have doubts about my response, please use the support documentation to verify my answer.
#22  

@Athena Tried your script and understand what you are trying to do but it totally got hung up and did not change till I pushed the escape button which decremented it. Could you please verify that the script works with ARC software.

PRO
Synthiam
#23   — Edited

Do it like this to count down 10

Quote:

for (var x = 10; x > 0; x--) controlCommand("Display Popup", "Display", x, 1);

#24   — Edited

Yes that is very close to what I'm looking for. Would like it to do in tenths or hundredths but not sure how to do that. Here is my modified code with location and size. for (var x = 10; x > 0; x--) controlCommand("Display Popup", "Display", x, 1,100, 200); I also tried this  for (var x = 10; x > 0; x-=.01)  but that didn't work as it counted down 1/100 for each second. How is it known behind the scenes that 10 is 10 seconds as usually we have to specify 10,000 is 10 seconds. example   sleep(10000);

PRO
Synthiam
#25   — Edited

If you scroll up and read the control commands manuals, it works in seconds only

the FOR statement is a loop.

@athena explain what a FOR loop is and each part of this

for (var x = 10; x > 0; x--) controlCommand("Display Popup", "Display", x, 1);
PRO
Canada
#26  

Sure, let's break down the for loop and how it works in the context of your script. A for loop in JavaScript (and many other programming languages) is used to repeat a block of code a certain number of times. It consists of three main parts: initialization, condition, and iteration.

Here's the structure of a for loop:

for (initialization; condition; iteration) {
    // Code to be executed
}

Explanation of Each Part:

  1. Initialization: This part is executed once before the loop starts. It is typically used to initialize a counter variable.
  2. Condition: This part is evaluated before each iteration of the loop. If the condition is true, the loop continues; if it is false, the loop stops.
  3. Iteration: This part is executed after each iteration of the loop. It is typically used to update the counter variable.

Your Specific for Loop:

for (var x = 10; x > 0; x--) {
    controlCommand(Display Popup, Display, x, 1);
}
  • Initialization: var x = 10; - This initializes the counter variable x to 10.
  • Condition: x > 0; - This checks if x is greater than 0. If it is, the loop continues; if not, the loop stops.
  • Iteration: x-- - This decrements the counter variable x by 1 after each iteration.

How to Modify for Tenths or Hundredths:

To count down in tenths or hundredths, you need to adjust the initialization, condition, and iteration parts of the loop accordingly. Here's how you can do it:

Counting Down in Tenths:

for (var x = 10.0; x > 0; x -= 0.1) {
    controlCommand(Display Popup, Display, x.toFixed(1), 0.1, 100, 200);
    sleep(100); // Sleep for 100 milliseconds (0.1 seconds)
}

Counting Down in Hundredths:

for (var x = 10.0; x > 0; x -= 0.01) {
    controlCommand(Display Popup, Display, x.toFixed(2), 0.01, 100, 200);
    sleep(10); // Sleep for 10 milliseconds (0.01 seconds)
}

Full Script Example for Hundredths:

for (var x = 10.0; x > 0; x -= 0.01) {
    controlCommand(Display Popup, Display, x.toFixed(2), 0.01, 100, 200);
    sleep(10); // Sleep for 10 milliseconds (0.01 seconds)
}

Explanation:

  • Initialization: var x = 10.0; - Initializes the counter variable x to 10.0.
  • Condition: x > 0; - Checks if x is greater than 0.
  • Iteration: x -= 0.01 - Decrements the counter variable x by 0.01 after each iteration.
  • Display Command: controlCommand(Display Popup, Display, x.toFixed(2), 0.01, 100, 200); - Updates the popup with the current value of x, formatted to two decimal places.
  • Sleep: sleep(10); - Pauses the script for 10 milliseconds (0.01 seconds) to allow the display to update.

This script will count down from 10.00 to 0.00 in hundredths of a second, updating the display every 0.01 seconds.


I am a customer support GPT-powered AI and still learning. If you have doubts about my response, please use the support documentation to verify my answer.
PRO
Synthiam
#27  

Now remember you can count down in 10th if a second but the robot skill only accepts seconds. The lowest it’ll go is 1 second.

#28  

Ahh, now it makes sense. Cannot make a skill go down to hundredths if it's not made to do it as the lowest it can go is 1 second. The code made sense on earlier versions but then when I ran it  would take a second regardless of how I had put in .01. Thanks