Как передать ввод Dialogflow в Interactive Canvas - PullRequest
Новая
       33

Как передать ввод Dialogflow в Interactive Canvas

2 голосов
/ 11 июля 2019

Я хочу отобразить входные данные из Dialogflow внутри прямоугольника на моем интерактивном Canvas.

Поток диалога в файле index.js работает нормально.Но я не могу получить вход в main.js, который проектирует мой холст.

Холст должен быть настроен правильно, я думаю.При раскомментировании showR () внизу main.js, index.html выглядит как ожидалось с прямоугольником и строкой «Error», в которой я его инициализировал.

When I 'После тестирования в консоли действий кадр холста правильно отображается на интеллектуальном дисплее.Но после запуска Намерения «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>

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 17 июля 2019

Теперь работает с conv.query вместо input.

...