article

AndresGenvid avatar image
AndresGenvid posted

04. Unreal Blueprint Notifications & Annotations Guide   

Unreal Notifications & Annotations Guide

This guide was written as a quick reference step by step guide for setting up a simple Unreal notification/annotation. For more in depth information on each step please check the documentation at https://www.genvidtech.com/

Blueprint Implementation

  1. On your GenvidStreams blueprint create 2 boolean variables. One called “ShouldSendNotification” and the other called “ShouldSendAnnotation”

  2. Create another variable of type integer called “PreviousUsedSecond”

  3. In the event graph add the following code:

  4. 1668447230191.pngGenvidStreams Code


  5. Make sure the Tick event used is actually ticking (there will be one that won’t actually tick)

  6. This flips both booleans created above to true the first tick that the current second is 0, 15, 30, or 45. We also save the second value that flipped the booleans

  7. In BeginPlay add the following:

  8. 1668447229536.pngGenvidStreamsCode



  9. We add annotation and notification streams to the built in streams property

  10. 1668447230159.pngClockNotification collapsed graph



  11. ClockNotification creates a genvid stream called “ClockNotification” with FrameRate value 30 and binds it to a new event

  12. The new event only proceeds with the boolean created above is true

  13. We send the second that flipped the boolean as a notification

  14. Note that SubmitNotification exists on the GenvidSession and not the GenvidStream

  15. We flip the boolean to make sure it fires only once

  16. 1668447229620.pngFunction in GenvidStreams that forms the JSON



  17. We form the JSON string using the second that flipped the boolean

  18. ClockAnnotation will work similarly:

  19. 1668447230010.pngClockAnnotation CollapsedGraph



  20. The main differences is SubmitAnnotation is on GenvidStream, we name the GenvidStream “ClockAnnotation”, we flip the proper boolean, and we call a different function to form the JSON string

  21. 1668447230374.pngForming a JSON string again



  22. The new function works exactly the same way and can be combined into one if desired


Web Implementation

  1. Go back to your Web/public folder. Open index.html

  2. Add two divs. One for notification and one for annotation:

  3.         <div class="child" id="notification"></div>
            <div class="child" id="annotation"></div>
  4. Open overlay.js. Create two new functions. One called notificationUpdate and one the other called annotationUpdate. Both take in a parameter called data:

  5. function notificationUpdate(data) {
         
        document.getElementById("notification").innerHTML = "Notification: " + Math.round(data.second);
    }
    
    
    function annotationUpdate(data) {
          
        document.getElementById("annotation").innerHTML = "Annotation: " + Math.round(data.second);
    }
  6. We set the divs created with the second value we sent in the above steps

  7. In the existing genvidClient.onDraw function add the following code after the existing “ClockTime” stream code:

  8. if ("ClockAnnotation" in frame.annotations && frame.annotations["ClockAnnotation"].length)
    {
              
    for (let gameAnnotation of frame.annotations["ClockAnnotation"])
        {
          
            if (gameAnnotation && gameAnnotation.user)
            {
          
                annotationUpdate(gameAnnotation.user);
            }
                }
    }
  9. We check to see if a ClockAnnotation data value exists. If we pass the parsed JSON value to annotationUpdate. (It is already being parsed in onStreamsRecieved)

  10. Similarly to genvidClient.onDraw we will define another function on genvidClient called “onNotificationsReceived” that triggers whenever a notification is sent:

  11. genvidClient.onNotificationsReceived(function (notifications)
    {
          
        for (let notification of notifications.notifications) 
    {
          
            try 
    {
          
                notification.user = JSON.parse(notification.data);
                notificationUpdate(notification.user);
            }
            catch (e) {
          
                console.log(e, notification);
            }
        }
    });
  12. We parse the notification received and pass in the data to notificationUpdate


Putting it all together

  1. Package your project making sure that .exe ends up in the same location as before so that it can be picked up by the web code

    • If you need to - recreate your bastion instance, setup the genvid-sdk, and load using the python script

  2. Open up your genvid monitor page using genvid-sdk monitor. Hit start all and open up your stream

  3. Note that the annotation updates in sync with the video whenever the seconds hand hits a 15 second interval

  4. Note that the notification updates out of sync with the video ASAP when the second hand hits a 15 second interval



1668535160416.pngStream with a notification out of sync with the video and an annotation in sync




unreal engineunreal
1668535160416.png (200.6 KiB)
10 |600

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

Article

Contributors

AndresGenvid contributed to this article