Issue #161: Support CalChart's new Viewer File exporter with Close

Adding a new Movement for Close and changing the current Stand to Stand and Play. Close should just print a direction, not for how long, and Stand & Play is CalBand convention, so using that syntax. Also, updated to allow quick gen, where we can generate PDF without having to go to the next screen.
calband · Apr 15, 2024 · 4cac3d1 · 4cac3d1
1 parent 43dc5ff
commit 4cac3d1
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 133 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 node_modules
 .DS_Store
-build/*
+build/
diff --git a/build/js/pdf.js b/build/js/pdf.js
diff --git a/css/app.less b/css/app.less
@@ -58,7 +58,7 @@
     .header-title {
         .title {
             font-size: 30px;
-            width: @main-width * 0.2;
+            width: @main-width * 0.27;
         }
 
         .version {
@@ -137,31 +137,6 @@
                     max-height: 100px;
                 }
             }
-
-            .gengen {
-                display: inline-block;
-                vertical-align: top;
-                font-size: 14px;
-                width: @header-files-width * 0.3;
-                text-align: center;
-
-                label {
-                    display: block;
-                    margin: 20px 0 10px;
-                }
-
-                button {
-                    font-family: @sans;
-                    font-size: 14px;
-                    color: @calband-blue;
-                    background: white;
-                    border: 1px solid @calband-blue;
-                    padding: 3px;
-                    width: @header-files-width * 0.35;
-                    -webkit-appearance: none;
-                    cursor: pointer;
-                }
-            }
         }
     }
 

diff --git a/index.html b/index.html
@@ -52,18 +52,10 @@ <h1>Loading</h1>
                             <input type="file" id="audio-file" class='js-audio-file'>
                             <button class="js-audio-file-btn">Choose file...</button>
                         </div>
-                        <div class="autoload">
-                            <label>Or autoload show:</label>
-                            <select class="js-select-show select-show" data-placeholder="None"></select>
-                        </div>
                     </div>
-                    <div class="gengen">
-                        <label>Quick Generate:</label>
-                        <select class="js-quick-gen-dot-labels" data-placeholder="None">
-                            <option></option>
-                        </select>
-                        <button class="js-quick-generate-continuity">Choose <span
-                                class="js-quick-gen-selected-dot-label">dots</span></button>
+                    <div class="autoload">
+                        <label>Or autoload show:</label>
+                        <select class="js-select-show select-show" data-placeholder="None"></select>
                     </div>
                 </div>
             </div>
@@ -98,8 +90,13 @@ <h1>Loading</h1>
                         <option></option>
                     </select>
                 </div>
-                <div class="control-button js-generate-continuity">
-                    Generate continuity for <span class="js-selected-dot-label">dots</span>
+                <div class="next-prev-control">
+                    <div class="control-button js-generate-continuity">
+                        Generate continuity for <span class="js-selected-dot-label">dots</span>
+                    </div>
+                    <div class="control-button js-quick-generate-continuity disabled">
+                        Quick Gen for <span class="js-selected-dot-label">dot</span>
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/js/application.js b/js/application.js
@@ -91,52 +91,34 @@ $(document).ready(function () {
     });
 
     $(".js-generate-continuity").click(function () {
-        //        var show = $(".js-viewer-file").val();
-                var show = $(".js-select-show").val();
-                var dot = $(".js-dot-labels").val();
-                var defaults = "&md-orientation=west&bev-orientation=west&sd-orientation=west&layout-order=ltr";
-                console.log("Generating ", show);
-                window.location.href = "pdf.html?show=" + show + "&dots=" + dot + defaults;
-                // so instead of going somewhere, generate the PDF right here.
-                    // // generate pdf
-
-                    // var options = {};
-                    // window.generator = new PDFGenerator(applicationController._show, [dot])
-                    // try {
-                    //     window.generator.generate(options);
-                    //     console.log("done Generating ", show);
-                    //     window.generator.pdf.save();
-                    //     console.log("done saving ", show);
-                    // } catch(err) {
-                    //     console.log("Error occured ", err);
-                    //     showError("An error occurred.");
-                    //     throw err;
-                    // }
-            });
-
-    $(".js-quick-generate-continuity").click(function () {
-        var show = $(".js-viewer-file").val();
-        // var show = $(".js-select-show").val();
-        var dot = $(".js-quick-gen-dot-labels").val();
-        console.log("dot is ", dot);
+        var show = $(".js-select-show").val();
+        var dot = $(".js-dot-labels").val();
         var defaults = "&md-orientation=west&bev-orientation=west&sd-orientation=west&layout-order=ltr";
-        console.log("Generating ", show, dot);
-        // window.location.href = "pdf.html?show=" + show + "&dots=" + dot + defaults;
-        // so instead of going somewhere, generate the PDF right here.
-            // // generate pdf
+        window.location.href = "pdf.html?show=" + show + "&dots=" + dot + defaults;
+    });
 
-            var options = {};
-            window.generator = new PDFGenerator(applicationController._show, [dot])
-            try {
-                window.generator.generate(options);
-                console.log("done Generating ", show);
-                window.generator.pdf.save();
-                console.log("done saving ", show);
-            } catch(err) {
-                console.log("Error occured ", err);
-                showError("An error occurred.");
-                throw err;
-            }
+    $(".js-quick-generate-continuity").click(function () {
+        var show = $(".js-viewer-file").val();
+        var dot = $(".js-dot-labels").val();
+        window.generator = new PDFGenerator(applicationController._show, [dot])
+        try {
+            var options = {
+                "md-orientation":"west",
+                "bev-orientation":"west",
+                "sd-orientation":"west",
+                "layout-order":"ltr"
+            };
+            window.generator.generate(options);
+            window.generator.pdf.save();
+        } catch(err) {
+            console.log("Error occured ", err);
+            $(".file-input-error")
+            .text("Error occured " + err)
+            .fadeIn(1000)
+            .delay(1000)
+            .fadeOut(500);
+            throw err;
+        }
     });
 
     $(".js-dot-labels").chosen({
@@ -145,16 +127,13 @@ $(document).ready(function () {
     }).change(function(evt, params){
         if (params) {
             applicationController.applyAnimationAction("selectDot", params.selected);
+            $(".js-quick-generate-continuity").removeClass("disabled");
         } else {
             applicationController.applyAnimationAction("clearSelectedDot");
+            $(".js-quick-generate-continuity").addClass("disabled");
         }
     });
 
-    $(".js-quick-gen-dot-labels").chosen({
-        allow_single_deselect: true,
-        width: "90px"
-    });
-
     $(".js-select-show")
         .chosen({
             width: "150px",

diff --git a/js/pdf.js b/js/pdf.js
@@ -96,27 +96,6 @@ $(document).ready(function() {
         refreshPage();
     });
 
-    // choose dots
-    $(".js-quick-gen-choose-dots").click(function() {
-        var dots = $(".dot-labels").val();
-        if (dots.length === 0) {
-            return;
-        }
-        dots = dots.split("\n");
-
-        // validate dots
-        var labels = $(".dot-labels").data("labels");
-        for (var i = 0; i < dots.length; i++) {
-            var dot = dots[i];
-            if (labels.indexOf(dot) === -1) {
-                alert("Dot " + dot + " does not exist!");
-                return;
-            }
-        }
-
-        refreshPage();
-    });
-
     // add link for back-link
     var backDot = options.dots[0] || "";
     var url = "index.html?show=" + options.show + "&dot=" + backDot;

diff --git a/js/pdf/BirdsEyeWidget.js b/js/pdf/BirdsEyeWidget.js
@@ -75,7 +75,6 @@ BirdsEyeWidget.prototype.draw = function(x, y, width, height, options) {
         if (dot === selectedDot) {
             return;
         }
-        console.log("Getting dot ", dot);
         var position = dot.getAnimationState(0);
         if (!_this.westUp) {
             position.x = 160 - position.x;
@@ -90,7 +89,6 @@ BirdsEyeWidget.prototype.draw = function(x, y, width, height, options) {
     });
 
     // drawing selected dot
-    console.log("now selected dot ", selectedDot);
     var position = selectedDot.getAnimationState(0);
     if (!this.westUp) {
         position.x = 160 - position.x;
@@ -99,11 +97,9 @@ BirdsEyeWidget.prototype.draw = function(x, y, width, height, options) {
     var x = position.x * scale;
     var y = position.y * scale;
 
-    console.log("and done ");
     this.pdf.setFillColor(0);
     this.pdf.circle(box.x + x, box.y + y, .5, "F");
     this.pdf.resetFormat();
-    console.log("and really done ");
 };
 
 module.exports = BirdsEyeWidget;
diff --git a/js/pdf/PDFGenerator.js b/js/pdf/PDFGenerator.js
@@ -34,7 +34,6 @@ var QUADRANT_WIDTH = WIDTH/2 - SIDE_MARGIN * 2;
  * @param {Array<String>} dots is the list of dot labels to include in the PDF
  */
 var PDFGenerator = function(show, dots) {
-    console.log("PDFGenerator ", show);
     this.pdf = jsPDF("portrait", "mm", "letter");
     this.show = show;
     this.dots = dots;
@@ -63,7 +62,6 @@ PDFGenerator.prototype.generate = function(options) {
     // 4 stuntsheets per page + front sheet + endsheet
     var totalPages = Math.ceil(this.sheets.length / 4) + 2;
 
-    console.log("Start generate  dots ", this.dots);
     for (var i = 0; i < this.dots.length; i++) {
         if (i !== 0) {
             this.pdf.addPage();
@@ -85,7 +83,6 @@ PDFGenerator.prototype.generate = function(options) {
  * Generate a PDF for one dot, given by this.dot
  */
 PDFGenerator.prototype._generate = function(options) {
-    console.log("Start generate ");
     // Widgets
     this.headerWidget = new HeaderWidget(this.pdf, {
         dotLabel: this.dot,
@@ -100,7 +97,6 @@ PDFGenerator.prototype._generate = function(options) {
 
     this._addFrontSheet();
 
-    console.log("getting movements ");
     var movements = this._getMovements();
     for (var pageNum = 0; pageNum < Math.ceil(this.sheets.length / 4); pageNum++) {
         this.pdf.addPage();
@@ -183,7 +179,6 @@ PDFGenerator.prototype._generate = function(options) {
     }
 
     this._addEndSheet(movements);
-    console.log("End generate ");
 };
 
 /**
@@ -232,7 +227,6 @@ PDFGenerator.prototype._getMovements = function() {
  * mostly from endsheet
  */
 PDFGenerator.prototype._addFrontSheet = function() {
-    console.log("Start front sheet ");
     this.pdf.vLine(WIDTH/2, 10, HEIGHT - 10);
     var title = this.show.getTitle() + " - Dot " + this.dot;
     this.pdf.setFontSize(15);
@@ -248,13 +242,9 @@ PDFGenerator.prototype._addFrontSheet = function() {
     var height = width * 84/160; // aspect ratio from BirdsEyeWidget
     var x = 0;
     var y = 10;
-    console.log("num shets ", this.sheets);
     for (var i = 0; i < this.sheets.length; i++) {
         var sheet = this.sheets[i];
-        console.log("sheet ", sheet);
-        console.log("this.dot ", this.dot);
         var dot = sheet.getDotByLabel(this.dot);
-        console.log("dot ", dot);
 
         if (y + height > HEIGHT - 5) {
             if (x === 0) {
@@ -280,7 +270,6 @@ PDFGenerator.prototype._addFrontSheet = function() {
             dot: dot,
             minimal: true,
         };
-        console.log("going to draw ");
         this.birdsEyeWidget.draw(
             x + labelWidth + paddingX + SIDE_MARGIN,
             y + paddingY,
@@ -290,7 +279,6 @@ PDFGenerator.prototype._addFrontSheet = function() {
         );
         y += height + 2 * paddingY;
     }
-    console.log("Done front sheet ");
 };
 
 /**

diff --git a/js/viewer/ApplicationController.js b/js/viewer/ApplicationController.js
@@ -126,7 +126,6 @@ ApplicationController.prototype.autoloadShow = function(show, dot) {
                 _this.applyAnimationAction("selectDot", dot);
                 $("option[value=" + dot + "]").prop("selected", true);
                 $(".js-dot-labels").trigger("chosen:updated");
-                $(".js-quick-gen-dot-labels").trigger("chosen:updated");
             }
 
             // load beats file
@@ -181,11 +180,9 @@ ApplicationController.prototype._updateUIWithShow = function () {
             .attr("value", dot)
             .attr("data-dot-label", dot)
             .text(dot)
-            .appendTo(".js-dot-labels")
-            .appendTo(".js-quick-gen-dot-labels");
+            .appendTo(".js-dot-labels");
     });
     $(".js-dot-labels").trigger("chosen:updated");
-    $(".js-quick-gen-dot-labels").trigger("chosen:updated");
 };
 
 /**
@@ -447,7 +444,6 @@ ApplicationController.prototype.getViewerFileHandler = function () {
             var show = ShowUtils.fromJSONString(fileContentsAsText);
             _this.setShow(show);
             _this._setFileInputText(".js-viewer-file-btn", fileName);
-            console.log("Selected show ", fileName);
         } catch (err) {
             $(".js-viewer-file").val("");
             if (err.name === "SyntaxError") {

diff --git a/js/viewer/MovementCommandClose.js b/js/viewer/MovementCommandClose.js
@@ -0,0 +1,38 @@
+/**
+ * @fileOverview Defines the MovementCommandClose class.
+ */
+
+var JSUtils = require("./utils/JSUtils");
+var MovementCommand = require("./MovementCommand");
+var AnimationState = require("./AnimationState");
+
+/**
+ * A MovementCommand representing being closed.
+ * @param {float} x The x coordinate to stand at.
+ * @param {float} y The y coordinate to stand at.
+ * @param {float} orientation The angle at which the marcher will
+ *   face while standing. This is measured in degrees relative
+ *   to Grapher standard position (@see MathUtils.js for a definition
+ *   of "grapher standard position).
+ * @param {int} beats The duration of the movement, in beats.
+ */
+var MovementCommandClose = function(x, y, orientation, beats) {
+    this._orientation = orientation;
+    MovementCommand.apply(this, [x, y, x, y, beats]);
+};
+
+JSUtils.extends(MovementCommandClose, MovementCommand);
+
+MovementCommandClose.prototype.getAnimationState = function(beatNum) {
+    return new AnimationState(this._startX, this._startY, this._orientation);
+};
+
+/**
+ * Returns the continuity text for this movement
+ * @return {String} the continuity text in the form of "Close E"
+ */
+MovementCommandClose.prototype.getContinuityText = function() {
+    return "Close " + this.getOrientation();
+};
+
+module.exports = MovementCommandClose;
diff --git a/js/viewer/MovementCommandStand.js b/js/viewer/MovementCommandStand.js
@@ -32,7 +32,7 @@ MovementCommandStand.prototype.getAnimationState = function(beatNum) {
  * @return {String} the continuity text in the form of "Close 16E"
  */
 MovementCommandStand.prototype.getContinuityText = function() {
-    return "Close " + this._numBeats + this.getOrientation();
+    return "Stand & Play " + this._numBeats + this.getOrientation();
 };
 
 module.exports = MovementCommandStand;