Anvil for class lectures

[jcrowson]

I have been playing around with anvil for much of this semester and thinking about features that I would want to use with my classes. I have come across this spectacle. Is that something that would be feasible in anvil? If so, how would you get anvil to recognize that the arrow keys have been pressed? I have looked into using javascript for this, but everything that I have come across uses an input box. If it is feasible, should I try getting spectacle to work in anvil or write something similar from scratch? Here is the GitHub for spectacle. I am not very familiar with html, css, and javascript. Spectacle uses react. I’m guessing react will not work with anvil.

[stucork]

I don’t totally follow? What would you want to do with spectale here?

---

To bind window events to arrow key presses you’d probably want to use jquery since it ships with anvil under the hood.

something like

<script>
$(document).keydown(function(e) {
    if (e.which == 40) {
         e.preventDefault();
        alert("hello down key");
    }
});
</script>

[shaun]

Here’s an example of controlling an Anvil app using the arrow keys.

https://anvil.works/build#clone:V4ONF7EPG6I5EWSO=TIDVFEFYV3GEAMLNJHCFPO7I

It allows you to draw on a Canvas by moving a circle around using the arrow keys.

The main Form has a method to move the circle given an x and y direction:

  def move_circle(self, direction_x, direction_y):
    if self.position[0] in (self.canvas_1.width, 0):
      return
    if self.position[1] in (self.canvas_1.height, 0):
      return
    self.position[0] += direction_x*4
    self.position[1] += direction_y*4
    self.draw_canvas()

The Canvas has a unique Role applied to it - I’ve called the role circle-arena.

Here’s a screenshot of the Canvas with the circle-arena Role applied to it:

I’ve expanded @stucork’s JS snippet to handle all arrow keys. It uses JQuery to select the element with class .anvil-role-circle-arena (Anvil adds this CSS class to the Canvas because it has the role circle-arena). Once it’s got the Canvas, it calls the move_circle method with the relevant direction:

<script>
$(document).keydown(function(e) {
  if (e.which == 37) {
    // Left
    e.preventDefault();
    var canvas = $('.anvil-role-circle-arena');
    anvil.call(canvas, 'move_circle', -1, 0);
  }
  if (e.which == 38) {
    // Up
    e.preventDefault();
    var canvas = $('.anvil-role-circle-arena');
    anvil.call(canvas, 'move_circle', 0, -1);
  }
  if (e.which == 39) {
    // Right
    e.preventDefault();
    var canvas = $('.anvil-role-circle-arena');
    anvil.call(canvas, 'move_circle', 1, 0);
  }
  if (e.which == 40) {
    // Down
    e.preventDefault();
    var canvas = $('.anvil-role-circle-arena');
    anvil.call(canvas.parent(), 'move_circle', 0, 1);
  }
});
</script>

This code is in Native Libraries:

And that’s it! Hopefully you can see how to modify this to add any custom keyboard control you like.

Hint: If you’re running an app like this in the Anvil Editor, you need to click somewhere in the running app before it will capture your keyboard input. The running app needs to be ‘selected’.

[jcrowson]

Thanks Shaun. I have implemented using the up and down arrow keys. I have syntax highlighting working using google code-prettify, but I am stuck on how to apply syntax highlighting to the contents of a label. I have have read this link Seeking rich text displays, but I am getting errors because anvil cannot find hljs. Here is a link to my project. I really appreciate the input!

[stucork]

Do you have a clone link you can share so we can take a look at the code…

[jcrowson]

Thanks. I shared the wrong link. https://anvil.works/build#clone:QLCELYZMD2Q73JJF=UUY736D3CJBX5V7BY6ELGEWP

[stucork]

I think it’s the link you’re using for the js and css. If you go to publish you can get the link to your app.

so rather than:

<link rel="stylesheet" href="https://anvil.works/build#app:QLCELYZMD2Q73JJF/_/theme/default.css">
<script src="https://anvil.works/build#app:QLCELYZMD2Q73JJF/_/theme/highlight.js"></script>

it’ll be something like

<link rel="stylesheet" href="https://QLCELYZMD2Q73JJF.anvil.app/FJIOEJFOQJFCACW14JF/_/theme/default.css">
<script src="https://QLCELYZMD2Q73JJF.anvil.app/FJIOEJFOQJFCACW14JF/_/theme/highlight.js"></script>

Find the link to your app in the settings --> publish

I changed those and it worked for me…

[jcrowson]

Thank you @stucork and @shaun. Your input was very helpful. Here are two new projects. The first is a demo of the code slide feature so that I can better discuss algorithms in class. The second uses the first as a dependancy. The second runs into an error when using the component created in the first because the second project cannot find the javascript from the first. Am I doing something wrong or is Anvil just not capable of having projects as dependancies with javascript?

Code slide demo
https://anvil.works/build#clone:QLCELYZMD2Q73JJF=UUY736D3CJBX5V7BY6ELGEWP

Project that needs code slide as a dependancy
https://anvil.works/build#clone:TLOV3QZS4YVBRV4M=6VN5GXEVJXOSIG2ZT7MZA6NI

[jcrowson]

I moved the javascript out of the custom html section to the native library and it works now.

[stefano.menci]

The standard_page.html in Assets defines the HTML template used by the app and it starts with a <script> section used by the app.

After creating a new app I always add a few javascript functions there, whether the app uses them or not, so I know that my apps can use them.