Example API calls
=================

Here is an illustration of API calls that can give you a kickstart.

You can grab this as a `Postman collection <https://elements.getpostman.com/redirect?entityId=3736841-bf32f62f-f6c2-4665-9d24-0785dca86261&entityType=collection>`_

.. raw:: html

    <div class="postman-run-button"
    data-postman-action="collection/fork"
    data-postman-var-1="3736841-bf32f62f-f6c2-4665-9d24-0785dca86261"
    data-postman-collection-url="entityId=3736841-bf32f62f-f6c2-4665-9d24-0785dca86261&entityType=collection&workspaceId=b76ad8e1-a4ff-44b8-b36b-82d8776d7232"></div>
    <script type="text/javascript">
      (function (p,o,s,t,m,a,n) {
        !p[s] && (p[s] = function () { (p[t] || (p[t] = [])).push(arguments); });
        !o.getElementById(s+t) && o.getElementsByTagName("head")[0].appendChild((
          (n = o.createElement("script")),
          (n.id = s+t), (n.async = 1), (n.src = m), n
        ));
      }(window, document, "_pm", "PostmanRunObject", "https://run.pstmn.io/button.js"));
    </script>

Text in the middle of the screen with fade-in
---------------------------------------------

Displayed with 5 second fade-in for 120 seconds and then removed.

..  code-block:: console

    curl --location --request POST 'http://localhost:5080/LiveApp/rest/stamp/instructions'
     --header 'Content-Type: application/json' --data-raw '
    {
        "id": "myText1",
        "start": "now",
        "duration": 120,
        "text": "Hello Stamp",
        "position": {"x": 0.5, "y": 0.5, "anchor": "center-center"},
        "style": {"font":"Verdana", "size":40, "style": "bold", "color": "yellow"},
        "transitionIn": {"type": "fade", "duration": 5},
        "shadow": {"radius": 3 }
    }
    '

.. image:: images/text-middle.png

Image downloaded from external URL
----------------------------------

Delayed with 2 seconds after sending in, faded in, kept and then faded out.

..  code-block:: json

    {
        "id": "img-1234",
        "start": "now+2",
        "duration": 30,
        "image": "https://streamtoolbox.com/images/streamtoolbox-white-transparent-logo.png",
        "position": {"x": 100, "y": 100, "anchor": "top-left"},
        "transitionIn": {"type": "fade", "duration": 5},
        "transitionOut": {"type": "fade", "duration": 5}
    }

.. image:: images/image-from-external.png

Ticker at the bottom of the screen
----------------------------------

.. code-block:: json

  {
    "start": "now+1", "end": "2100.12.31 12:00:00",
    "text": "This is really breaking news here",
    "position": {"x": 0.5, "y": 0.9},
    "style": {"font":"Verdana", "size":62, "style": "bold", "color": "yellow"},
    "transitionIn": {"type":"ticker", "speed": 4}
  }

.. image:: images/ticker.png

Big clock in the top left corner
--------------------------------

.. code-block:: json

  {
    "clock":"HH:mm:ss",
    "start":"2000.01.01 00:00:00.000","end":"2100.01.01 00:00:00.000",
    "style": {"font":"sansserif", "color":"#ffffff","style":"bold","size":40},
    "position":{"x":100.0,"y":100.0,"z":2,"anchor":"top-left"}
  }

.. image:: images/clock.png


HTML Overlay using overlays.uno
-------------------------------

You can register on http://overlays.uno for a free account and grab your own
overlay. Swap the url in the below example to your own custom output url that you can control.
You can use the ``cropWidth``, ``cropHeight`` options to trim the HTML overlay to a smaller
rectangle and get better performance by not processing the transparent areas unnecessarily.

.. code-block:: json

    {
      "id": "overlay1",
      "start":"2000.01.01 00:00:00.000","end":"2100.01.01 00:00:00.000",
      "html": {
          "url": "https://app.overlays.uno/output/2VgYWfN6uPom34Mf9LhU2t?aspect=16x9"
      },
      "position":{"x":0,"y":0,"z":2,"anchor":"top-left"}
    }

.. image:: images/html-overlay-1.png

.. image:: images/html-overlay-2.png