http://www.html5canvastutorials.com/tutorials/
771545
public function networkMap(Request $request)
    {
        $this->admControlInit($request, '/dashboard/db/diagrams');
        if (!$this->checkCache('/dashboard/db/diagrams/network-map')) {
            $this->v["errors"] = '';
            $this->sysDef = new SystemDefinitions;
            $this->v["css"] = $this->sysDef->loadCss();
            $this->v["canvasDimensions"] = array(950, 950);
            $mainCircleCenter = [ $this->v["canvasDimensions"][0]/2, $this->v["canvasDimensions"][1]/2 ];
            $sizeMax = 0;
            $this->v["tables"] = $tableLookup = [];
            //$this->v["tables"][] = array('English', Size, Center-X, Center-Y);
            $tbls = SLTables::select('TblID', 'TblName', 'TblNumForeignKeys', 'TblNumForeignIn', 'TblOpts')
                ->where('TblDatabase', $this->dbID)
                ->orderBy('TblOrd', 'asc')
                ->get();
            if ($tbls->isNotEmpty()) {
                foreach ($tbls as $tbl) {
                    $tableLookup[$tbl->TblID] = sizeof($this->v["tables"]);
                    $this->v["tables"][] = [
                        $tbl->TblName, 
                        sqrt(sqrt($tbl->TblNumForeignKeys+$tbl->TblNumForeignIn)), 
                        0, 
                        0, 
                        (($GLOBALS["SL"]->isCoreTbl($tbl->TblID)) ? $this->v["css"]["color-success-on"] : '')
                    ];
                }
                foreach ($this->v["tables"] as $i => $tbl) {
                    if ($sizeMax < $this->v["tables"][$i][1]) {
                        $sizeMax = $this->v["tables"][$i][1];
                    }
                }
                foreach ($this->v["tables"] as $i => $tbl) {
                    if ($sizeMax <= 0) $sizeMax = 1;
                    $this->v["tables"][$i][1] = 43*($this->v["tables"][$i][1]/$sizeMax);
                    if ($this->v["tables"][$i][1] <= 10) {
                        $this->v["tables"][$i][1] = 10;
                    }
                    $rad = deg2rad(360*$i/sizeof($this->v["tables"]));
                    $dim = 0.42*$this->v["canvasDimensions"][1];
                    $this->v["tables"][$i][2] = round($mainCircleCenter[0]+(sin($rad)*$dim));
                    $this->v["tables"][$i][3] = round($mainCircleCenter[1]-(cos($rad)*$dim));
                }
            }
            $this->v["keyLines"] = [];
            $foreignFlds = SLFields::select('FldTable', 'FldForeignTable')
                ->where('FldForeignTable', '>', 0)
                ->where('FldSpecType', 'NOT LIKE', 'Generic')
                ->where('FldDatabase', $this->dbID)
                ->get();
            if ($foreignFlds->isNotEmpty()) {
                foreach ($foreignFlds as $fld) {
                    if (!isset($tableLookup[$fld->FldTable])) {
                        $this->v["errors"] .= '<br />add line, missing FldTable tblLookup[' . $fld->FldTable . ']';
                    } elseif (!isset($tableLookup[$fld->FldForeignTable])) {
                        $this->v["errors"] .= '<br />add line, missing FldForeignTable tblLookup[' . $fld->FldForeignTable . ']';
                    } else {
                        $this->v["keyLines"][] = [
                            $tableLookup[$fld->FldTable], 
                            $tableLookup[$fld->FldForeignTable]
                        ];
                    }
                }
            }
            $this->v["content"] = view('vendor.survloop.admin.db.network-map', $this->v)->render();
            $this->saveCache();
        }
        $this->v["hideWrap"] = true;
        $this->v["isPrint"] = true;
        $this->v["isFrame"] = true;
        return view('vendor.survloop.master', $this->v);
    }
346510
function renderCanvas(document) {
    var map = document.mindmap;
    var root = prepareNodes(map);
    var dimensions = getMindMapDimensions(root);

    var width = dimensions.width;
    var height = dimensions.height;
    $canvas.attr({
      width : width,
      height : height
    });

    ctx.textBaseline = "top";
    ctx.textAlign = "center";

    // fill background white
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, width, height);

    ctx.translate(width / 2, height / 2);

    // render in two passes: 1. lines, 2. captions. because we have
    // no z-index, captions should not be covered by lines
    drawLines(root);
    drawCaptions(root);

    /**
     * Draws all branches
     */
    function drawLines(node, parent) {
      ctx.save();
      var x = node.offset.x;
      var y = node.offset.y;
      ctx.translate(x, y);

      // branch
      if (parent) {
        drawBranch(node, parent);
      }

      // bottom border
      if (!node.isRoot()) {
        ctx.fillStyle = node.branchColor;
        var tm = node.textMetrics;
        ctx.fillRect(0, tm.height + padding, tm.width, node.lineWidth);
      }

      node.forEachChild(function(child) {
        drawLines(child, node);
      });

      ctx.restore();
    }

    /**
     * Draws all captions.
     * 
     * @param node
     */
    function drawCaptions(node) {
      ctx.save();
      var x = node.offset.x;
      var y = node.offset.y;
      ctx.translate(x, y);

      var tm = node.textMetrics;
      var caption = node.getCaption();
      var font = node.text.font;

      // ctx.strokeStyle = "#CCC";
      // ctx.strokeRect(0, 0, tm.width, tm.height);

      ctx.font = font.style + " " + font.weight + " " + font.size
          + "px sans-serif";

      var captionX = tm.width / 2;
      var captionY = 0;
      if (node.isRoot()) {
        // TODO remove magic numbers
        captionX = 0;
        captionY = 20;

        // root box
        ctx.lineWidth = 5.0;
        ctx.strokeStyle = "orange";
        ctx.fillStyle = "white";
        mindmaps.CanvasDrawingUtil.roundedRect(ctx,
            0 - tm.width / 2 - 4, 20 - 4, tm.width + 8,
            tm.height + 8, 10);
      }

      ctx.strokeStyle = font.color;
      ctx.fillStyle = font.color;

      // TODO underline manually. canvas doesnt support it
      // TODO strike through manually

      function checkLength(str) {
        var ctm = ctx.measureText(str);
        return ctm.width <= tm.width;
      }

      // write node caption.

      if (checkLength(caption)) {
        // easy part only one line
        ctx.fillText(caption, captionX, captionY);
      } else {
        /**
         * caption consists of multiple lines. needs special handling
         * that imitates the line breaking algorithm "word-wrap:
         * break-word;"
         * 
         * <pre>
         * 1. break up string into words
         * 2. cut words that are too long into smaller pieces so they fit on a line
         * 3. construct lines: fit as many words as possible on a line
         * 4. print lines
         * </pre>
         */

        /**
         * step 1
         */
        // check all words and break words that are too long for a one
        // line
        // TODO not perfect yet
        // find words in string (special treatment for hyphens)
        // a hyphen breaks like a white-space does
        // var regex = /(\w+-+)|(\w+)|(-+)/gi;
        // var regex = /[^- ]+[- ]*/gi;
        // var regex = /[^ -]+-* *|[- ]+/gi;
        // for now just match for words and the trailing space
        // hyphenating has probably be done in step 2
        var regex = /[^ ]+ */gi;
        var words1 = caption.match(regex);
        console.log("words1", words1);

        /**
         * step 2
         */
        var words2 = [];
        words1.forEach(function(word) {
          if (!checkLength(word)) {
            var part = "";
            for ( var i = 0; i < word.length; i++) {
              var c = word.charAt(i);
              if (checkLength(part + c)) {
                part += c;
                continue;
              } else {
                words2.push(part);
                part = c;
              }
            }
            words2.push(part);
          } else {
            words2.push(word);
          }
        });

        console.log("words2", words2);

        /**
         * step 3
         */
        var wordWidth = function(str) {
          return ctx.measureText(str).width;
        };

        var lines = [];
        var line = "";
        var lineWidth = tm.width;

        // construct invidual lines
        words2.forEach(function(word) {
          if (line === "") {
            line = word;
          } else {
            if (wordWidth(line + " " + word) > lineWidth) {
              lines.push(line);
              line = word;
            } else {
              line += " " + word;
            }
          }
        });
        lines.push(line);
        console.log("lines", lines);

        /**
         * step 4
         */
        // print lines
        for ( var j = 0; j < lines.length; j++) {
          var line = lines[j];
          ctx.fillText(line, captionX, captionY + j * font.size);
        }
      }

      node.forEachChild(function(child) {
        drawCaptions(child);
      });

      ctx.restore();
    }
  }
766511
function() {
		var self = this;

		// Create Dom elements
		this._el.content_item	= TL.Dom.create("div", "tl-media-item tl-media-documentcloud tl-media-shadow", this._el.content);
		this._el.content_item.id = TL.Util.unique_ID(7)

		// Check url
		if(this.data.url.match(/\.html$/)) {
		    this.data.url = this._transformURL(this.data.url);
		} else if(!(this.data.url.match(/.(json|js)$/))) {
		    trace("DOCUMENT CLOUD IN URL BUT INVALID SUFFIX");
		}

		// Load viewer API
        TL.Load.js([
					'https://assets.documentcloud.org/viewer/loader.js',
					'https://assets.documentcloud.org/viewer/viewer.js'],
            function() {	
	            self.createMedia();
			}
		);
	}
451109
function (videoId, canvaId, outputOptions) {
    let editorVideo;
    const domElement = document.getElementById(videoId);

    if (domElement !== null) {
        editorVideo = new Video(domElement);
    }
    const store = new Store();

    function getCanva() {
        return document.getElementById(canvaId);
    }

    outputOptions = outputOptions || {};

    function setAltCanvas() {
        let domElements = [];
        let altCanvas = outputOptions.altCanvas;
        if (altCanvas.length > 0) {
            for (let i = 0; i < altCanvas.length; i++) {
                domElements.push({
                    el: new Canva(altCanvas[i]),
                    width: altCanvas[i].getAttribute('data-width'),
                    name: altCanvas[i].getAttribute('data-name')
                });
            }
        }
        return domElements;
    }

    return {
        isSupported: function () {
            const elem = document.createElement('canvas');

            return !!document.getElementById(videoId) && document.getElementById(canvaId)
                && !!elem.getContext && !!elem.getContext('2d');
        },
        screenshot: function () {
            const screenshot = new ScreenShot(
                store.getLength() + 1,
                new Canva(getCanva()),
                editorVideo,
                setAltCanvas()
            );

            store.set(screenshot.getId(), screenshot);

            return screenshot;
        },
        store: store,
        copy: function (mainSource, altSources) {

            const elementDomNode = document.createElement('img');
            elementDomNode.src = mainSource;

            const element = new Image(elementDomNode);
            const editorCanva = new Canva(getCanva());
            const altEditorCanva = setAltCanvas();
            editorCanva
                .reset()
                .resize(editorVideo)
                .copy(element);


            // handle alternative canvas:
            if (altEditorCanva.length > 0) {
                for (let i = 0; i < altEditorCanva.length; i++) {

                    let tmpEl = document.createElement('img');
                    tmpEl.src = altSources[i].dataURI;

                    const canvaEl = altEditorCanva[i].el;

                    canvaEl
                        .reset()
                        .resize(editorVideo, altEditorCanva[i].width)
                        .copy(new Image(tmpEl)); // @TODO: should copy the right stored image
                }
            }
        },
        getCanvaImage: function () {
            const canva = new Canva(getCanva());

            return canva.extractImage();
        },
        resetCanva: function () {
            const editorCanva = new Canva(getCanva());
            editorCanva.reset();
        },
        getNbScreenshot: function () {
            return store.getLength();
        }
    };
}
531751
function (dom) {
            var html = '';
            dom.forEach(function (node) {
                if (node.type === 'tag') {
                    var tag = node.name;
                    html += '<' + tag;
                    Object.keys(node.attribs).forEach(function (attr) {
                        html += ' ' + attr + '=' + this.generateAttribute(node.attribs[attr]);
                    }, this);
                    html += (voidTags[tag] ? '/>' : '>');
                    if (!voidTags[tag]) {
                        html += this.vdomToHtml(node.children);
                        html += '</' + tag + '>';
                    }
                } else if (node.type === 'text') {
                    var text = node.data || '';
                    html += this.htmlEncode(text); //escape <,> and &.
                } else if (node.type === 'comment') {
                    html += '<!-- ' + node.data.trim() + ' -->';
                } else if (node.type === 'script' || node.type === 'style') {
                    //No need to escape text inside script or style tag.
                    html += '<' + node.name;
                    Object.keys(node.attribs).forEach(function (attr) {
                        html += ' ' + attr + '=' + this.generateAttribute(node.attribs[attr]);
                    }, this);
                    html += '>' + ((node.children[0] || {}).data || '') + '</' + node.name + '>';
                } else if (node.type === 'directive') {
                    html += '<' + node.data + '>';
                }
            }, this);
            return html;
        }
998465
def create_html(self):
        """"""

        html_table = ""
        columns = [panel.get_html_column() for panel in self.panels]
        trs = len(columns[0])
        html_table += os.linesep.join(
            [
                "<tr>{}</tr>".format("".join(["<td>{}</td>".format(columns[col][row]) for col in range(len(columns))]))
                for row in range(trs)
            ]
        )

        with open(self._html_fn, "w+") as f:
            css_src = textwrap.dedent(
                """\
					.main_table                       {border-collapse:collapse;margin-top:15px;}
					td                                {border: solid #aaaaff 1px;padding:4px;vertical-alignment:top;}
					colgroup, thead                   {border: solid black 2px;padding 2px;}
					.configuration                    {font-size:85%;}
					.configuration, .configuration *  {margin:0;padding:0;}
					.formats                          {text-align:center;margin:20px 0px;}
					img                               {min-width:640px}
			"""
            )

            html_src = """<!DOCTYPE html>
			<html>
			<head>
				<meta charset="UTF-8" />
				<title>{title}</title>
				<style type="text/css">
				{css}
				</style>
			</head>
			<body>
				<h1>{title}</h1>
				<strong>{description}</strong>

				<table class="main_table">
				{html_table}
				</table>

			</body>
			""".format(
                html_table=html_table,
                css=css_src,
                title=self.title,
                description=self.description,
            )

            tidy_html_src = bs4.BeautifulSoup(html_src).prettify()
            f.write(tidy_html_src)
260224
function html()
	{
		// vars
		$dir = apply_filters('acf/get_info', 'dir');
		
		
		$premium = array();
		$premium[] = array(
			'title' => __("Repeater Field",'acf'),
			'description' => __("Create infinite rows of repeatable data with this versatile interface!",'acf'),
			'thumbnail' => $dir . 'images/add-ons/repeater-field-thumb.jpg',
			'active' => class_exists('acf_field_repeater'),
			'url' => 'http://www.advancedcustomfields.com/add-ons/repeater-field/'
		);
		$premium[] = array(
			'title' => __("Gallery Field",'acf'),
			'description' => __("Create image galleries in a simple and intuitive interface!",'acf'),
			'thumbnail' => $dir . 'images/add-ons/gallery-field-thumb.jpg',
			'active' => class_exists('acf_field_gallery'),
			'url' => 'http://www.advancedcustomfields.com/add-ons/gallery-field/'
		);
		$premium[] = array(
			'title' => __("Options Page",'acf'),
			'description' => __("Create global data to use throughout your website!",'acf'),
			'thumbnail' => $dir . 'images/add-ons/options-page-thumb.jpg',
			'active' => class_exists('acf_options_page_plugin'),
			'url' => 'http://www.advancedcustomfields.com/add-ons/options-page/'
		);
		$premium[] = array(
			'title' => __("Flexible Content Field",'acf'),
			'description' => __("Create unique designs with a flexible content layout manager!",'acf'),
			'thumbnail' => $dir . 'images/add-ons/flexible-content-field-thumb.jpg',
			'active' => class_exists('acf_field_flexible_content'),
			'url' => 'http://www.advancedcustomfields.com/add-ons/flexible-content-field/'
		);
		
		
		$free = array();
		$free[] = array(
			'title' => __("Gravity Forms Field",'acf'),
			'description' => __("Creates a select field populated with Gravity Forms!",'acf'),
			'thumbnail' => $dir . 'images/add-ons/gravity-forms-field-thumb.jpg',
			'active' => class_exists('gravity_forms_field'),
			'url' => 'https://github.com/stormuk/Gravity-Forms-ACF-Field/'
		);
		$free[] = array(
			'title' => __("Date & Time Picker",'acf'),
			'description' => __("jQuery date & time picker",'acf'),
			'thumbnail' => $dir . 'images/add-ons/date-time-field-thumb.jpg',
			'active' => class_exists('acf_field_date_time_picker'),
			'url' => 'http://wordpress.org/extend/plugins/acf-field-date-time-picker/'
		);
		$free[] = array(
			'title' => __("Location Field",'acf'),
			'description' => __("Find addresses and coordinates of a desired location",'acf'),
			'thumbnail' => $dir . 'images/add-ons/google-maps-field-thumb.jpg',
			'active' => class_exists('acf_field_location'),
			'url' => 'https://github.com/elliotcondon/acf-location-field/'
		);
		$free[] = array(
			'title' => __("Contact Form 7 Field",'acf'),
			'description' => __("Assign one or more contact form 7 forms to a post",'acf'),
			'thumbnail' => $dir . 'images/add-ons/cf7-field-thumb.jpg',
			'active' => class_exists('acf_field_cf7'),
			'url' => 'https://github.com/taylormsj/acf-cf7-field/'
		);
		
		?>
<div class="wrap" style="max-width:970px;">

	<div class="icon32" id="icon-acf"><br></div>
	<h2 style="margin: 4px 0 15px;"><?php _e("Advanced Custom Fields Add-Ons",'acf'); ?></h2>
	
	<div class="acf-alert">
	<p style=""><?php _e("The following Add-ons are available to increase the functionality of the Advanced Custom Fields plugin.",'acf'); ?><br />
	<?php _e("Each Add-on can be installed as a separate plugin (receives updates) or included in your theme (does not receive updates).",'acf'); ?></p>
	</div>
	<?php /*
	<div class="acf-alert">
		<p><strong><?php _e("Just updated to version 4?",'acf'); ?></strong> <?php _e("Activation codes have changed to plugins! Download your purchased add-ons",'acf'); ?> <a href="http://www.advancedcustomfields.com/add-ons-download/" target="_blank"><?php _e("here",'acf'); ?></a></p>
	</div>
	*/ ?>
	
	<div id="add-ons" class="clearfix">
		
		<div class="add-on-group clearfix">
		<?php foreach( $premium as $addon ): ?>
		<div class="add-on wp-box <?php if( $addon['active'] ): ?>add-on-active<?php endif; ?>">
			<a target="_blank" href="<?php echo $addon['url']; ?>">
				<img src="<?php echo $addon['thumbnail']; ?>" />
			</a>
			<div class="inner">
				<h3><a target="_blank" href="<?php echo $addon['url']; ?>"><?php echo $addon['title']; ?></a></h3>
				<p><?php echo $addon['description']; ?></p>
			</div>
			<div class="footer">
				<?php if( $addon['active'] ): ?>
					<a class="button button-disabled"><span class="acf-sprite-tick"></span><?php _e("Installed",'acf'); ?></a>
				<?php else: ?>
					<a target="_blank" href="<?php echo $addon['url']; ?>" class="button"><?php _e("Purchase & Install",'acf'); ?></a>
				<?php endif; ?>
			</div>
		</div>
		<?php endforeach; ?>
		</div>
		
		<div class="add-on-group clearfix">
		<?php foreach( $free as $addon ): ?>
		<div class="add-on wp-box <?php if( $addon['active'] ): ?>add-on-active<?php endif; ?>">
			<a target="_blank" href="<?php echo $addon['url']; ?>">
				<img src="<?php echo $addon['thumbnail']; ?>" />
			</a>
			<div class="inner">
				<h3><a target="_blank" href="<?php echo $addon['url']; ?>"><?php echo $addon['title']; ?></a></h3>
				<p><?php echo $addon['description']; ?></p>
			</div>
			<div class="footer">
				<?php if( $addon['active'] ): ?>
					<a class="button button-disabled"><span class="acf-sprite-tick"></span><?php _e("Installed",'acf'); ?></a>
				<?php else: ?>
					<a target="_blank" href="<?php echo $addon['url']; ?>" class="button"><?php _e("Download",'acf'); ?></a>
				<?php endif; ?>
			</div>
		</div>
		<?php endforeach; ?>	
		</div>
		
				
	</div>
	
</div>
<script type="text/javascript">
(function($) {
	
	$(window).load(function(){
		
		$('#add-ons .add-on-group').each(function(){
		
			var $el = $(this),
				h = 0;
			
			
			$el.find('.add-on').each(function(){
				
				h = Math.max( $(this).height(), h );
				
			});
			
			$el.find('.add-on').height( h );
			
		});
		
	});
	
})(jQuery);	
</script>
		<?php
		
		return;
		
	}
96438
function () {
    var draw = this.el.components.draw;
    var selector = this.data.asset;
    var width = draw.data.width;
    var height = draw.data.height;

    if (this.rendering) {
      return;
    }

    this.rendering = true;

    var node = document.querySelector(selector);

    if (!node) {
      console.error('Could not find html element with selector "' + selector + '"');
      return;
    }

    if (!this.observer) {
      this.observer = new MutationObserver(function (mutations) {
        queueRender(node, width, height, function (canvas) {
          renderedCanvas = canvas;
          draw.render();
        });
      });

      var config = { attributes: true, childList: true, characterData: true, subtree: true };
      this.observer.observe(node, config);
    }

    queueRender(node, width, height, function (canvas) {
      renderedCanvas = canvas;
      draw.render();
    });
  }
874816
function Example() {

  var oMX = new MergeXML(); /* instantiate the class */
  var fls = [];             /* output files info */

  /**
   * get element object
   * @param {string} id
   */
  var $ = function(id) {
    return document.getElementById(id);
  };

  /**
   * add event handler
   * @param {string} evt
   * @param {string} id
   * @param {function} fnc
   */
  var AddEvent = function(evt, id, fnc) {
    var elem = $(id);
    if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evt, fnc, false);
    else if (elem.attachEvent) { // IE DOM
      elem.attachEvent('on' + evt, fnc);
    }
    else { // No much to do
      elem[evt] = fnc;
    }
  };

  /**
   * FileList objects handler
   * @param {object} evt
   */
  var FileSelect = function(evt) {
    $('output').innerHTML = '';
    $('result').innerHTML = '';
    oMX.Init(); /* begin with new objects */
    fls = [];
    var cnt = 0;
    var files = evt.target.files; /* FileList object */
    for (var i = 0; i < files.length; i++) { /* loop the selected files */
      var reader = new FileReader();
      reader.onload = function(file) {
        fls[cnt + 1] = oMX.AddFile(file) ? true : false;  /* get a file */
        var c = $('result').innerHTML;
        if (c !== '') {
          c += ', ';
        }
        $('result').innerHTML = c + fls[cnt];
        cnt += 2;
      };
      fls.push(files[i].name, null);
      reader.readAsText(files[i]);
    }
  };

  /**
   * Check results
   * @return {mixed} array -- files list
   *                 string -- error
   *                 null -- loading yet
   */
  var FileCheck = function() {
    var r = [];
    for (var i = 0; i < fls.length; i += 2) {
      if (fls[i + 1]) {
        r.push(fls[i]);
      } else {
        r = fls[i + 1] === false ? fls[i] : null;
        break;
      }
    }
    return r;
  };

  /**
   * Show results
   */
  var FileMerge = function() {
    var err = '';
    var r = FileCheck();
    if (typeof r === 'string') {
      err = oMX.error.text + ': ' + r;
    } else if (r === null) {
      err = 'Files are not loaded yet';
    } else if (oMX.count < 2) {
      err = 'Minimum 2 files are required';
    }
    $('output').innerHTML = err ? err : oMX.Get(2);
  };

  if (oMX.error.code !== '') {
    $('output').innerHTML = oMX.error.text; /* no DOM support */
  } else if (!window.File || !window.FileList || !window.FileReader) {
    $('output').innerHTML = 'Sorry, the demo needs a browser supporting FileReader API';
  } else {
    AddEvent('change', 'files', FileSelect);
    AddEvent('click', 'merge', FileMerge);
  }

}
846112
private void constructExample() {
		add(new WHeading(HeadingLevel.H3, "ACCORDION tabs"));
		WTabSet tabset1c = new SampleWTabset(TabSetType.ACCORDION);
		add(tabset1c);


		/* Content height */
		add(new WHeading(HeadingLevel.H2, "Examples showing content height property."));
		add(new WHeading(HeadingLevel.H3, "Tall content."));

		WTabSet htabset1c = new SampleWTabset(TabSetType.ACCORDION);
		htabset1c.setContentHeight(TALL_CONTENT);
		add(htabset1c);

		add(new WHeading(HeadingLevel.H3, "Short content."));

		WTabSet htabset1g = new SampleWTabset(TabSetType.ACCORDION);
		htabset1g.setContentHeight(SHORT_CONTENT);
		add(htabset1g);


		add(new WHeading(HeadingLevel.H2, "Examples showing accordion's single property."));
		WTabSet singleOpenAccordionabset = new SampleWTabset(WTabSet.TYPE_ACCORDION);
		singleOpenAccordionabset.setSingle(true);
		add(singleOpenAccordionabset);


		add(new WHeading(HeadingLevel.H2, "Using WSubordinateControl"));
		WTabSet targetTabset = new SampleWTabset(TabSetType.ACCORDION);
		add(targetTabset);

		WFieldLayout layout = new WFieldLayout(WFieldLayout.LAYOUT_STACKED);
		add(layout);
		final WCheckBox disabledControllerCb = new WCheckBox();
		final WCheckBox hiddenControllerCb = new WCheckBox();
		layout.addField("disable tabset", disabledControllerCb);
		layout.addField("hide tabset", hiddenControllerCb);


		// Build & add the subordinate
		SubordinateBuilder builder = new SubordinateBuilder();
		builder.condition().equals(hiddenControllerCb, String.valueOf(true));
		builder.whenTrue().hide(targetTabset);
		builder.whenFalse().show(targetTabset);
		add(builder.build());

		builder = new SubordinateBuilder();
		builder.condition().equals(disabledControllerCb, String.valueOf(true));
		builder.whenTrue().disable(targetTabset);
		builder.whenFalse().enable(targetTabset);
		add(builder.build());

	}
1263195
function getLocalCanvas(puzzle, imageopt){
	var imgcanvas = createSubCanvas(imageopt.type);
	
	var pc2 = new puzzle.klass.Graphic();
	pc2.context = imgcanvas.getContext("2d");
	pc2.context.enableTextLengthWA = false;
	pc2.outputImage = true;		/* 一部画像出力時に描画しないオブジェクトがあるパズル向け設定 */
	if('bgcolor' in imageopt){ pc2.bgcolor = imageopt.bgcolor;}
	if(puzzle.pid==='kramma'){ pc2.imgtile = puzzle.painter.imgtile;}
	
	// canvasの設定を適用して、再描画
	pc2.resizeCanvasByCellSize(imageopt.cellsize);
	pc2.unsuspend();
	
	return imgcanvas;
}
732449
function createCanvas (element) {
  const canvas = document.createElement('canvas');

  canvas.style.display = 'block';
  canvas.classList.add(CANVAS_CSS_CLASS);
  element.appendChild(canvas);

  return canvas;
}
457666
def html(args = {})
      id     = SecureRandom.uuid
      width  = args[:width]  || "50"
      config = args[:config] || @config.json
      type   = @config.type

      "<div id=\"canvas-holder\" style=\"width:#{width}%\">
        <canvas id=\"#{id}\" />
      </div>
      <script>
        var config = #{config}
        window.onload = function() {
          var ctx = document.getElementById(\"#{id}\").getContext(\"2d\");
          new Chart(ctx, config);
        };
      </script>" 
    end
1015107
function(el, type){
		if(!el){ return;}
		
		var rect = pzpr.util.getRect(el);
		var _div = document.createElement('div');
		_div.style.width  = rect.width+'px';
		_div.style.height = rect.height+'px';
		el.appendChild(_div);
		this.canvas = _div;
		
		setCanvas_main(this, (type || this.preInitCanvasInfo.type));
	}
126766
def build_html():
    """"""
    source = AjaxDataSource(data_url='./data',
                            polling_interval=INTERVAL,
                            method='GET')

    # OHLC plot
    p = figure(plot_height=400,
               title='OHLC',
               sizing_mode='scale_width',
               tools="xpan,xwheel_zoom,xbox_zoom,reset",
               x_axis_type=None,
               y_axis_location="right",
               y_axis_label="Price ($)")
    p.x_range.follow = "end"
    p.x_range.follow_interval = 100
    p.x_range.range_padding = 0
    p.line(x='time', y='average', alpha=0.25, line_width=3, color='black',
           source=source)
    p.line(x='time', y='ma', alpha=0.8, line_width=2, color='steelblue',
           source=source)
    p.segment(x0='time', y0='low', x1='time', y1='high', line_width=2,
              color='black', source=source)
    p.segment(x0='time', y0='open', x1='time', y1='close', line_width=8,
              color='color', source=source, alpha=0.8)

    # MACD plot
    p2 = figure(plot_height=200,
                title='MACD',
                sizing_mode='scale_width',
                x_range=p.x_range,
                x_axis_label='Time (s)',
                tools="xpan,xwheel_zoom,xbox_zoom,reset",
                y_axis_location="right")
    p2.line(x='time', y='macd', color='darkred', line_width=2, source=source)
    p2.line(x='time', y='macd9', color='navy', line_width=2, source=source)
    p2.segment(x0='time', y0=0, x1='time', y1='macdh', line_width=6, color='steelblue',
               alpha=0.5, source=source)

    # Combine plots together
    plot = gridplot([[p], [p2]], toolbar_location="left", plot_width=1000)

    # Compose html from plots and template
    script, div = components(plot, theme=theme)
    html = template.render(resources=CDN.render(), script=script, div=div)

    return html
235896
function prepareHTML(html, info) {
  const cssPath = `../doc_styles.css`;
  const nav = info.map(p => {
    return `<li><a href="/static/docs/${p.name.replace('@vx/', 'vx-')}.html">${p.name}</a></li>`;
  });
  return `
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="${cssPath}">
    </head>
    <div class="nav-container">
      <div class="nav">
        <div class="nav-inner">
          <div class="logo"></div>
          <ul>
          <li class="Item">
            <a href="/">Home</a>
          </li>
          <li class="Item">
            <a href="/docs">Docs</a>
          </li>
          <li class="Item">
            <a href="https://medium.com/vx-code">Guides</a>
          </li>
          <li class="Item">
            <a href="/gallery">Gallery</a>
          </li>
          </ul>
          <a class="github-button" href="https://github.com/hshoff/vx" data-show-count="true" aria-label="Star hshoff/vx on GitHub">Star</a>
          </div>
        </div>
    </div>
    <div class="doc-container">
      <div class="doc-nav">
        <ul>
        <li>Packages</li>
        ${nav.join('')}
        </ul>
      </div>
      <div class="content">
      ${html}
      </div>
    </div>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </html>`;
}
107827
function recordCanvasUsingRecordRTC(canvas) {
  var recorder = RecordRTC(canvas, {
      type: 'canvas',
      showMousePointer: true
  });

  recorder.startRecording();

  setTimeout(function() {
      recorder.stopRecording(function(url) {
          var blob = recorder.getBlob();
          console.log('blob', blob);

          var video = document.createElement('video');
          video.src = URL.createObjectURL(blob);
          video.setAttribute('style', 'height: 100%; position: absolute; top:0;');
          var body = document.querySelector('body');
          body.innerHTML = '';
          body.appendChild(video);
          video.controls = true;
          video.play();
      });
  }, 10 * 1000);
}