Ad

How To Hand Over Dialogflow Input To Interactive Canvas

I want to display the input from Dialogflow inside a rectangle on my interactive Canvas.

The conversation flow in the index.js file works fine. But I can't receive the input in the main.js which designs my canvas.

The canvas should be set up right, I think. When uncommenting 'showR()' at the bottom of the main.js, the index.html looks like expected with the rectangle and the 'Error'-String in it which I initialized it with.

When I'm testing in the Action Console, the frame of the canvas shows correctly on the smart display. But after triggering the 'Reqcategory' Intent there should pop up the rectangle with the last user input in it which doesn't happen.

I tried various possibilities to hand over the input, for example by caching it in a variable or in entities or getting its value with ${} and other signs.. but didn't work.

Here are my codes. I cut them down to the relevant parts.

index.js

'use strict';

const {
  dialogflow,
  Suggestions,
  ImmersiveResponse,
} = require('actions-on-google');

const functions = require('firebase-functions');
const app = dialogflow({debug: true});
const firebaseConfig = JSON.parse(process.env.FIREBASE_CONFIG);

app.intent('Default Welcome Intent', (conv) => {
  conv.ask('Hello....');
  conv.ask(new ImmersiveResponse({
    url: `https://${firebaseConfig.projectId}.firebaseapp.com`,
  }));
});

// app.intent('Reqcategory', (conv, {Rcategory}) => {
app.intent('Reqcategory', (conv, input) => {
  conv.ask('Ok. Creating...!');
  conv.ask(new ImmersiveResponse({
    state: {
      // rcreate: Rcategory,
      rcreate: input,
    },
  }));
});

exports.yourAction = functions.https.onRequest(app);

main.js & main.css & index.html

'use strict;'

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var ak = "Error";

const callbacks = {
  onUpdate(state) {
    if ('rcreate' in state) {
        ak = state.rcreate; //overwrite 'Error'-String with user input
        showR();
    }
  },
};

function showR(){
  requestAnimationFrame(showR);
  var c = new CreateR(100,100,ak);
  c.createR();
}

function CreateR(x,y,cat){
  this.x = x;
  this.y = y;
  this.cat = cat;
  this.createR = function(){
    ctx.beginPath();
    ctx.strokeStyle = "#000000";
    ctx.fillStyle = "#FFFFFF";
    ctx.rect(x,y,200,100);
    ctx.fill();
    ctx.stroke();
    ctx.font = "12px Arial";
    ctx.fillStyle = "#000000";
    ctx.strokeStyle = "#000000";
    ctx.textAlign = "center";
    ctx.fillText(cat, 200, 120);
  }
}

showR(); //uncomment to test html
assistantCanvas.ready(callbacks);
html {
  display: flex;
  height: 100%;
}

body {
  display: flex;
  flex: 1;
  margin: 0;
  background-color: #F5F5F5;
}

.view {
  position: relative;
  flex: 1;
}

canvas {
  display: block;
  background-color: white;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

.debug {
  display: flex;
  flex-direction: column;

  /* Uncomment below to disable the debug overlay */
  /* display: none !important; */

  width: 200px;

  position: absolute;
  right: 8px;
  top: 8px;
  bottom: 8px;
}

.stats {
  display: flex;
  justify-content: flex-end;
}

.logs {
  display: block;
  flex: 1;
  opacity: 0.8;
  overflow-y: scroll;
  text-align: right;

  font-size: 12px;
}

.logs > p {
  display: inline-block;
  padding-top: 1px;
  padding-bottom: 1px;
  margin: 0px;
  margin-top: 1px;
  background: black;
  max-width: 100%;

  font-family: Arial, sans-serif;
  color: white;
  text-align: right;
  overflow-wrap: break-word;
}

.logs > p.error {
  color: red;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>test123</title>

    <style type="text/css">
        canvas {
            border: 6px solid navy;
            background: #D6EAF8;
        }
    </style>

    <!-- Disable favicon requests -->
    <link rel="shortcut icon" type="image/x-icon" target="_blank" rel="nofollow noreferrer" href="data:image/x-icon;,">

    <!-- Load Assistant Canvas CSS and JavaScript -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://www.gstatic.com/assistant/immersivecanvas/css/styles.css">
    <script src="https://www.gstatic.com/assistant/immersivecanvas/js/immersive_canvas_api.js"></script>

  </head>
  <body>
    <canvas width="1200" height="600" padding-left="56px"></canvas>
    <script src="js/main.js"></script>
  </body>
</html>

Any help would be appreciated.

Ad

Answer

It works now with conv.query instead of input.

Ad
source: stackoverflow.com
Ad