Forums

Web2py javascript or html issue

Hello,

I have been trying various approaches and looking through all the topics on javascript in this forum, but I can't seem to get my view_sheet.html to load properly. I had the javascript in the .html file to start with. I have since moved it to it's own .js file called drillsheet.js. I keep getting an attribute error when loading the view_sheet.html page. Please see code below.

view_sheet.html

{{extend 'layout.html'}}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <script src="{{=URL('static','js/drillsheet.js')}}"></script>

</head> <body onload="draw();"> <div class="row" padding="0"> <div class="col-md-6"> <div class="row"> <div class="col-md-6"> <h2> Customer Information </h2> </div> <div class="col-md-6"> <h4> <br/> Handed: <b>{{=customer.handed}}</b><br/> Drill Sheet Title: <b>{{=sheet.title}}</b> </h4> </div> </div> <div class="row"> <div class="col-md-6"> <h4> Name: <b>{{=customer.first_name}} {{=customer.last_name}}</b><br/> Address: <b>{{=customer.address1}}</b><br/> <b>{{=customer.address2}}</b><br/> Phone Number: <b>{{=customer.phone}}</b> </h4> </div> <div class="col-md-6"> <h4> City: <b>{{=customer.city}}</b><br/> State: <b>{{=customer.state_province}}</b><br/> Postal: Code <b>{{=customer.postal_code}}</b> </h4> </div> </div> <div class="row"> <div class="col-md-6"> <h2> Notes: </h2> <h4> {{if len(notes):}} {{for sheet_note in notes:}} <ul> {{=LI(A(sheet_note.title, _href=URL("view_note", args=[sheet_note.id, sheet.id, customer.id])))}} {{=sheet_note.created_on}} </ul> {{pass}} {{else:}} <h4> No notes created yet. </h4> {{pass}} </h4> </div> <div class="col-md-6"> <h4> {{=form.custom.begin}} Title: <div>{{=form.custom.widget.title}}</div> Note: <div>{{=form.custom.widget.note}}</div><br/> {{=form.custom.submit}} {{=form.custom.end}} </h4> </div> </div> </div> <div class="col-md-6"> <canvas id="tutorial"></canvas> </div> </div> </body> </html>

drillsheet.js

function draw(){
    var canvas = document.getElementById('tutorial');
      if (canvas.getContext){
        var context = canvas.getContext('2d');
        var width = 650;
        var height = 650;
        var scale = width/650;

        screen_width = ((window.innerWidth)/2);
        screen_height = (window.innerHeight)-140;

        if (screen_width > 650) {
            if (screen_width < screen_height) {
                width = screen_width;
                height = screen_width;
                scale = screen_width/650;
            } else {
                width = screen_height;
                height = screen_height;
                scale = screen_height/650;
            }
        }

        var fradius = 50*scale;
        var tradius = 60*scale;
        var lfHor = (width / 8) * 3.875;
        var lfVer = (height / 6) * 1.25;
        var rfHor = (width / 8) * 6.375;
        var rfVer = (height / 6) * 1.25;
        var thmbHor = (width / 8) * 5.125;
        var thmbVer = (height / 6) * 4.75;
        var middle = lfHor+((rfHor-lfHor)/2)

        context.canvas.width = width;
        context.canvas.height = height;

        //circles
        draw_circle(context, lfHor, lfVer, fradius);
        draw_circle(context, rfHor, rfVer, fradius);
        draw_circle(context, thmbHor, thmbVer, tradius);
        draw_circle(context, lfHor-(260*scale), lfVer-(60*scale), 25*scale);
        draw_circle(context, lfHor-(180*scale), lfVer-(60*scale), 25*scale);

        //lines that bisect circle
        bisect(context, 135, lfHor, lfVer, fradius);
        bisect(context, 135, rfHor, rfVer, fradius);
        bisect(context, 135, thmbHor, thmbVer, tradius);

        //lines between circles
        draw_line2Circle(context, lfHor, lfVer, thmbHor, thmbVer, fradius, tradius);
        draw_line2Circle(context, rfHor, rfVer, thmbHor, thmbVer, fradius, tradius);
        draw_line2Circle(context, lfHor, lfVer, rfHor, rfVer, fradius, fradius);

        //lines
        draw_line(context, lfHor + fradius, lfVer - fradius, lfHor + fradius, lfVer + fradius);
        draw_line(context, rfHor - fradius, rfVer - fradius, rfHor - fradius, rfVer + fradius);
        draw_line(context, middle-(160*scale), thmbVer-(240*scale), middle-(80*scale), thmbVer-(240*scale));
        draw_line(context, middle+(80*scale), thmbVer-(240*scale), middle+(160*scale), thmbVer-(240*scale));
        draw_line(context, middle-(150*scale), thmbVer-(190*scale), middle-(70*scale), thmbVer-(190*scale));
        draw_line(context, middle+(70*scale), thmbVer-(190*scale), middle+(150*scale), thmbVer-(190*scale));
        draw_line(context, middle-(140*scale), thmbVer-(140*scale), middle-(60*scale), thmbVer-(140*scale));
        draw_line(context, middle+(60*scale), thmbVer-(140*scale), middle+(140*scale), thmbVer-(140*scale));

        //arrows
        draw_arrow(context, lfHor, lfVer, 0, fradius, scale);
        draw_arrow(context, lfHor, lfVer, 180, fradius, scale);
        draw_arrow(context, lfHor, lfVer, 270, fradius, scale);
        draw_arrow(context, rfHor, rfVer, 0, fradius, scale);
        draw_arrow(context, rfHor, rfVer, 90, fradius, scale);
        draw_arrow(context, rfHor, rfVer, 180, fradius, scale);
        draw_arrow(context, thmbHor, thmbVer, 0, tradius, scale);
        draw_arrow(context, thmbHor, thmbVer, 90, tradius, scale);
        draw_arrow(context, thmbHor, thmbVer, 180, tradius, scale);
        draw_arrow(context, thmbHor, thmbVer, 270, tradius, scale);

        //rectangles
        draw_rect(context, (40*scale), (165*scale), (70*scale), (30*scale));
        draw_rect(context, (110*scale), (165*scale), (70*scale), (30*scale));
        draw_rect(context, (40*scale), (225*scale), (70*scale), (30*scale));
        draw_rect(context, (110*scale), (225*scale), (70*scale), (30*scale));
        draw_rect(context, (110*scale), (285*scale), (70*scale), (30*scale));
        draw_rect(context, (110*scale), (325*scale), (70*scale), (30*scale));
        draw_rect(context, (110*scale), (365*scale), (70*scale), (30*scale));
        draw_rect(context, (110*scale), (405*scale), (70*scale), (30*scale));
        draw_rect(context, (110*scale), (445*scale), (70*scale), (30*scale));
        draw_rect(context, (110*scale), (485*scale), (70*scale), (30*scale));

        //static text
        draw_text(context, "POSITIVE AXIS POINT", (110*scale), (160*scale), "black", "center", "n", scale);
        draw_text(context, "OVAL", (110*scale), (220*scale), "black", "center",  "n", scale);
        draw_text(context, "OVAL", (145*scale), (280*scale), "black", "center", "n", scale);
        draw_text(context, "ANGLE:", (105*scale), (310*scale), "black", "right", "n", scale);
        draw_text(context, "VERT:", (105*scale), (350*scale), "black", "right", "n", scale);
        draw_text(context, "HORZ:", (105*scale), (390*scale), "black", "right", "n", scale);
        draw_text(context, "SLUG:", (105*scale), (430*scale), "black", "right", "n", scale);
        draw_text(context, "OFFSET:", (105*scale), (470*scale), "black", "right", "n", scale);
        draw_text(context, "CLT:", (105*scale), (510*scale), "black", "right", "n", scale);
        draw_text(context, "GRIP SIZE", lfHor-(220*scale), lfVer-(90*scale), "black", "center", "n", scale);
        draw_text(context, "LEFT", lfHor-(260*scale), lfVer-(10*scale), "black", "center", "n", scale);
        draw_text(context, "RIGHT", lfHor-(180*scale), lfVer-(10*scale), "black", "center", "n", scale);
        draw_text(context, "SPAN", middle, lfVer+30, "black", "center", "n", scale);
        draw_text(context, "R", lfHor, lfVer-(80*scale), "black", "center", "n", scale);
        draw_text(context, "R", rfHor, rfVer-(80*scale), "black", "center", "n", scale);
        draw_text(context, "F", lfHor, lfVer+(100*scale), "black", "center", "n", scale);
        draw_text(context, "F", rfHor, rfVer+(100*scale), "black", "center", "n", scale);
        draw_text(context, "L", lfHor-(90*scale), lfVer+(10*scale), "black", "center", "n", scale);
        draw_text(context, "L", rfHor+(90*scale), lfVer+(10*scale), "black", "center", "n", scale);
        draw_text(context, "F", thmbHor, thmbVer-(90*scale), "black", "center", "n", scale);
        draw_text(context, "R", thmbHor, thmbVer+(110*scale), "black", "center", "n", scale);
        draw_text(context, "L", thmbHor-(100*scale), thmbVer+(10*scale), "black", "center", "n", scale);
        draw_text(context, "R", thmbHor+(100*scale), thmbVer+(10*scale), "black", "center", "n", scale);
        draw_text(context, "OVERALL", thmbHor, thmbVer-(240*scale), "black", "center", "n", scale);
        draw_text(context, "CENTER", thmbHor, thmbVer-(190*scale), "black", "center", "n", scale);
        draw_text(context, "CUT", thmbHor, thmbVer-(140*scale), "black", "center", "n", scale);
        draw_text(context, "{{=sheet.left_grip_size}}", lfHor-(260*scale), lfVer-(50*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.right_grip_size}}", lfHor-(180*scale), lfVer-(50*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.pap1}}", lfHor-(240*scale), lfVer+(55*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.pap2}}", lfHor-(170*scale), lfVer+(55*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.oval_start}}", lfHor-(240*scale), lfVer+(115*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.oval_end}}", lfHor-(170*scale), lfVer+(115*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.oval_left}}", lfHor-(220*scale), lfVer+(115*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.oval_right}}", lfHor-(150*scale), lfVer+(115*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.angle}}", lfHor-(170*scale), lfVer+(175*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.vertical}}", lfHor-(170*scale), lfVer+(215*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.horizontal}}", lfHor-(170*scale), lfVer+(255*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.slug}}", lfHor-(170*scale), lfVer+(295*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.offset_p}}", lfHor-(170*scale), lfVer+(335*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.clt}}", lfHor-(170*scale), lfVer+(375*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.left_reverse_pitch}}", lfHor, lfVer-(60*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.left_lateral_pitch}}", lfHor-(70*scale), lfVer+(10*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.left_forward_pitch}}", lfHor, lfVer+(80*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.left_hole_size}}", lfHor-(15*scale), lfVer-(10*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.left_insert_size}}", lfHor+(15*scale), lfVer+(25*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.right_reverse_pitch}}", rfHor, rfVer-(60*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.right_lateral_pitch}}", rfHor+(70*scale), rfVer+(10*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.right_forward_pitch}}", rfHor, rfVer+(80*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.right_hole_size}}", rfHor-(15*scale), rfVer-(10*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.right_insert_size}}", rfHor+(15*scale), rfVer+(25*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.thumb_reverse_pitch}}", thmbHor, thmbVer+(90*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.thumb_right_lateral_pitch}}", thmbHor+(80*scale), thmbVer+(10*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.thumb_left_lateral_pitch}}", thmbHor-(80*scale), thmbVer+(10*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.thumb_forward_pitch}}", thmbHor, thmbVer-(70*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.thumb_hole_size}}", thmbHor-(15*scale), thmbVer-(10*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.thumb_insert_size}}", thmbHor+(15*scale), thmbVer+(25*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.bridge}}", middle, lfVer-15, "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.overall_left}}", middle-140, thmbVer-(240*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.overall_right}}", middle+140, thmbVer-(240*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.center_left}}", middle-130, thmbVer-(190*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.center_right}}", middle+130, thmbVer-(190*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.cut_left}}", middle-120, thmbVer-(140*scale), "purple", "center", "b", scale);
        draw_text(context, "{{=sheet.cut_right}}", middle+120, thmbVer-(140*scale), "purple", "center", "b", scale);

      } //end if
  } // end draw

  function draw_circle(context, center_x, center_y, radius) {
    var lineWidth = 3;
    context.beginPath();
    context.arc(center_x, center_y, radius, 0, 2 * Math.PI, false);
    context.fillStyle = '#dcdcdc';
    context.fill();
    context.lineWidth = lineWidth;
    context.strokeStyle = '#003300';
    context.stroke();
  }

  function vec(x, y) {
      this.length = function () {
          return Math.sqrt((this.x * this.x) + (this.y * this.y));
      };
      this.normalize = function () {
          var scale = this.length();
          this.x /= scale;
          this.y /= scale;
      };
      this.x = x;
      this.y = y;
  }

  function draw_line2Circle(context, center1_x, center1_y, center2_x, center2_y, fradius, tradius) {
      var lineWidth = 3;
      var betweenVec = new vec(center2_x - center1_x, center2_y - center1_y);
      betweenVec.normalize();

      var p1x = center1_x + (fradius * betweenVec.x);
      var p1y = center1_y + (fradius * betweenVec.y);

      var p2x = center2_x - (tradius * betweenVec.x);
      var p2y = center2_y - (tradius * betweenVec.y);

      context.lineWidth = lineWidth;
      context.beginPath();
      context.moveTo(p1x, p1y);
      context.lineTo(p2x, p2y);
      context.stroke();
  }

  function draw_line(context, p1x, p1y, p2x, p2y) {
      var lineWidth = 3;
      context.lineWidth = lineWidth;
      context.beginPath();
      context.moveTo(p1x, p1y);
      context.lineTo(p2x, p2y);
      context.stroke();
  }

  function draw_rect(context, p1x, p1y, w, h) {
      var lineWidth = 3;
      context.beginPath();
      context.rect(p1x, p1y, w, h);
      context.fillStyle = '#dcdcdc';
      context.fill();
      context.lineWidth = lineWidth;
      context.strokeStyle = 'black';
      context.stroke();
  }

  function draw_arrow(context, center1_x, center1_y, side, radius, scale) {
      var lineWidth = 3;
      var offset = .5*scale;
      var length = 25*scale;
      context.lineWidth = lineWidth;
      context.beginPath();

      if (side === 0) {
          var posX = (center1_x + (radius * offset));
          var posY = (center1_y - (radius + 5));
          context.moveTo(posX, posY);
          context.lineTo(posX, posY - length);
          context.lineTo(center1_x, posY - (length * 2));
          context.lineTo((center1_x - (radius * offset)), posY - length);
          context.lineTo((center1_x - (radius * offset)), posY);
          context.closePath();
      } else if (side === 90) {
          posX = (center1_x + (radius + 5));
          posY = (center1_y + (radius * offset));
          context.moveTo(posX, posY);
          context.lineTo(posX + length, posY);
          context.lineTo(posX + (length * 2), center1_y);
          context.lineTo(posX + length, (center1_y - (radius * offset)));
          context.lineTo(posX, (center1_y - (radius * offset)));
          context.closePath();
      } else if (side === 180) {
          posX = (center1_x - (radius * offset));
          posY = (center1_y + (radius + 5));
          context.moveTo(posX, posY);
          context.lineTo(posX, posY + length);
          context.lineTo(center1_x, posY + (length * 2));
          context.lineTo((center1_x + (radius * offset)), posY + length);
          context.lineTo((center1_x + (radius * offset)), posY);
          context.closePath();
      } else if (side === 270) {
          posX = (center1_x - (radius + 5));
          posY = (center1_y - (radius * offset));
          context.moveTo(posX, posY);
          context.lineTo(posX - length, posY);
          context.lineTo(posX - (length * 2), center1_y);
          context.lineTo(posX - length, (center1_y + (radius * offset)));
          context.lineTo(posX, (center1_y + (radius * offset)));
          context.closePath();
      }

      context.fillStyle = '#dcdcdc';
      context.fill();
      context.stroke();
  }

  function bisect(context, degrees, cx, cy, radius) {
      var lineWidth = 3;
      // calculate the point on the edge of the circle
      var x1 = cx + radius * Math.cos(degrees / 180 * Math.PI);
      var y1 = cy + radius * Math.sin(degrees / 180 * Math.PI);
      // get the point on the opposite side of the circle
      // e.g. if 90, get 270, and vice versa
      // (super verbose but easily readable)
      if (degrees > 180) {
          var degrees2 = degrees - 180;
      } else {
          var degrees2 = degrees + 180;
      }
      // and calculate the point on the opposite side
      var x2 = cx + radius * Math.cos(degrees2 / 180 * Math.PI);
      var y2 = cy + radius * Math.sin(degrees2 / 180 * Math.PI);
      // now actually draw the line
      context.beginPath();
      context.moveTo(x1, y1);
      context.lineTo(x2, y2);
      context.stroke();
  }

  function draw_text(context, text, x, y, color, align, bold, scale) {
      var new_size = 16*scale;
      context.fillStyle = color;
      if (bold == "b") {
          context.font = 'bold ' + new_size + 'px' + ' ' + 'Sans-Serif';
      } else {
          context.font = new_size + 'px' + ' ' + 'Sans-Serif';
      }
      //context.font = 'bold ' + new_size + 'px' + ' ' + 'Sans-Serif';
      context.textAlign = align;
      context.textBaseline = "bottom";
      context.fillText(text, x, y);
  }
Beloved premium user drillsheetpro | 4 posts | March 24, 2016, 3:58 p.m. | permalink

Is your browser loading the javascript file?

Staff glenn | 9498 posts | PythonAnywhere staff | March 24, 2016, 4:38 p.m. | permalink

It does not appear be loading.

deleted-user-860404 | 6 posts | March 24, 2016, 6:52 p.m. | permalink

I added the javascript back into the html view and made sure I had <script type="text/javajscript"> and it works. I discovered when I had the javascript together with the html previously I had <script type-"text/css"> which of course does not work. I have to combine the javascript with the html because the Web2py field calls {{=your_table.your.field}} will not work outside of the html.

deleted-user-860404 | 6 posts | March 24, 2016, 11:59 p.m. | permalink

Ah, right -- yes, the incorrect type would definitely cause problems like that. So, all sorted now?

Staff giles | 11788 posts | PythonAnywhere staff | March 25, 2016, 3:28 p.m. | permalink

Yes, thank you very much for providing a sounding board and another set of eyes.

deleted-user-860404 | 6 posts | March 25, 2016, 4:21 p.m. | permalink

Awesome -- thanks for confirming!

Staff giles | 11788 posts | PythonAnywhere staff | March 25, 2016, 5:13 p.m. | permalink