如何在 Google App Engine 上的 HTML 页面中嵌入处理草图答案

【问题标题】：How do you embed a Processing sketch in a HTML page on Google App Engine如何在 Google App Engine 上的 HTML 页面中嵌入处理草图
【发布时间】：2014-09-14 22:25:50
【问题描述】：

我想将我的处理草图在线放到我在 Google App Engine 上的网页上。

我找到了一种将处理 JS Javascript 代码直接放入 HTML 文件的方法。如果我将此文件保存在我的计算机上并在浏览器中打开它，它就可以工作！

但是，当我将此代码复制到我的谷歌应用程序引擎时，我只是得到一个空白框。

有人对 GAE 有一点了解吗？为什么会这样？我的 HTML 文件中的代码是这样的。

<html>
<head>
    <title>Mouse2D \ Examples \ Processing.org</title>

    <!-- script type="text/javascript" src="/_ah/channel/jsapi"></script -->
    <script src="processing.js" type="text/javascript"></script>    
    <!-- script src="http://processing.org/javascript/modernizr-2.6.2.touch.js" type ="!text/javascript"></script -->
</head>

<body>
    <label>This is above the Processing Canvas</label>
    <br>
    <div class="proc">
    <script type="application/processing"> 
    void setup() 
    {
      size(640, 360);
      noStroke();
      rectMode(CENTER);
    }

    void draw() 
    {   
      background(51); 
      fill(255, 204);
      rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
      fill(255, 204);
      int inverseX = width-mouseX;
      int inverseY = height-mouseY;
      rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
    }

    </script>
    <canvas width="640" height="360"></canvas>
    <div>This is below the canvas</div>


</body>

我在处理示例页面上查看了他们是如何做到这一点的，这里是http://processing.org/examples/mouse2d.html

我正在尝试将其嵌入到我的 wiki http://tb21g09.appspot.com/processing 如果有人成功地将处理草图嵌入到网页中，我很想知道如何！

我知道您也可以将 javascript 文件放到网络服务器上，然后从 html 文件中调用它。我不知道该怎么做，这似乎更容易和更快地尝试。

【问题讨论】：

标签： javascript html google-app-engine embed processing

【解决方案1】：

如果您想在 App Engine 应用中部署 HTML 文件，以便可以通过访问 URL 将文件直接加载到浏览器中，您可以使用 App Engine 的“静态文件”功能。为此，您可以在 app.yaml 文件中配置一个静态文件处理程序，将 URL 路径与文件路径相关联：

handlers:
- url: /pages
  static_dir: pages

这个例子说当用户访问相应的/pages/... URL 时，我的应用程序的pages/... 目录中的所有内容都应该直接提供。这些文件是逐字提供的，不会与您的应用程序的服务器代码交互。有关配置静态文件处理程序的更多信息：https://developers.google.com/appengine/docs/python/config/appconfig#Python_app_yaml_Static_file_handlers

您提到您希望一些处理 JS 代码出现在 wiki 应用程序中。如果有服务器代码正在生成您希望处理 JS 代码出现在其中的页面，则您需要执行静态文件以外的操作。通常，您希望在应用程序生成的页面上显示的文本需要以某种方式可供应用程序使用，并且需要有应用程序逻辑以将其与页面一起发出。要给出更具体的答案，我们需要更多地了解您的申请。

例如，Processing JS 代码可能放在一个文件中，并且应用程序代码被指示从该文件中读取并将其内容插入到动态生成页面的中间。也许页面是从“模板”文件生成的，并且可以将处理 JS 代码插入其中。如果是 wiki 应用程序，并且页面内容作为数据存储，那么可能需要将 Processing JS 代码添加到用于制作页面的数据中，例如使用 wiki 的页面编辑工具。

（如果您需要更具体的建议，请修改问题以详细说明您的 wiki 应用程序的工作原理。）

【讨论】：