如何在Google App Engine的HTML页面中嵌入Processing sketch

时间:2014-09-14 22:25:50

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

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

我找到了将Processing JS Javascript代码直接放入HTML文件的方法。 如果我将这个文件保存在我的计算机上并在浏览器中打开它就可以了!

然而,当我将此代码复制到我的Google应用引擎上时,我只得到一个空白框。

有没有人对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

我想在http://tb21g09.appspot.com/processing将其嵌入我的维基 如果有人成功地在网页中嵌入了处理草图,我很想知道如何!

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

1 个答案:

答案 0 :(得分:1)

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

handlers:
- url: /pages
  static_dir: pages

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

您提到您希望某些Processing JS代码出现在Wiki应用程序中。如果存在生成要在其中显示Processing JS代码的页面的服务器代码,则需要执行静态文件以外的操作。通常,您希望在应用程序生成的页面上显示的文本需要以某种方式提供给应用程序,并且需要应用程序逻辑才能将其与页面一起发出。为了给出更具体的答案,我们需要了解您的应用程序。

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

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