Question

我想将Dialogflow的输入显示在交互式Canvas上的矩形内。

index.js文件中的对话流工作正常。但是我无法在设计画布的main.js中收到输入。

我认为画布应该设置正确。取消注释main.js底部的'showR（）'时，index.html看起来像预期的那样带有矩形和我用来对其进行初始化的'Error'-String。

当我在操作控制台中进行测试时，画布的框架会在智能显示屏上正确显示。但是在触发“ Reqcategory”意图之后，应该弹出带有最后一个用户输入的矩形，这不会发生。

我尝试了各种可能性来移交输入，例如，将其缓存在变量或实体中，或者使用$ {}和其他符号获取其值..但是没有用。

这是我的密码。我把它们切成相关的部分。

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" href="data:image/x-icon;,">

    <!-- Load Assistant Canvas CSS and JavaScript -->
    <link rel="stylesheet" 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>

任何帮助将不胜感激。

Answer 1

现在可以使用conv.query代替input。

如何将Dialogflow输入移交给Interactive Canvas

1 个答案: