2024-01-27 21:17:21 +01:00
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" > < title > mod-host vs Pisound button< / title > < link rel = "stylesheet" href = "node_modules/reveal.js/dist/reset.css" > < link rel = "stylesheet" href = "node_modules/reveal.js/dist/reveal.css" > < link rel = "stylesheet" href = "node_modules/reveal.js/dist/theme/black.css" id = "theme" > <!-- This CSS is generated by the Asciidoctor reveal.js converter to further integrate AsciiDoc's existing semantic with reveal.js --> < style type = "text/css" > . r e v e a l d i v . r i g h t {
float: right
}
/* source blocks */
.reveal .listingblock.stretch > .content {
height: 100%
}
.reveal .listingblock.stretch > .content > pre {
height: 100%
}
.reveal .listingblock.stretch > .content > pre > code {
height: 100%;
max-height: 100%
}
/* auto-animate feature */
/* hide the scrollbar when auto-animating source blocks */
.reveal pre[data-auto-animate-target] {
overflow: hidden;
}
.reveal pre[data-auto-animate-target] code {
overflow: hidden;
}
/* add a min width to avoid horizontal shift on line numbers */
code.hljs .hljs-ln-line.hljs-ln-n {
min-width: 1.25em;
}
/* tables */
table {
border-collapse: collapse;
border-spacing: 0
}
table {
margin-bottom: 1.25em;
border: solid 1px #dedede
}
table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr td {
padding: .5em .625em .625em;
font-size: inherit;
text-align: left
}
table tr th, table tr td {
padding: .5625em .625em;
font-size: inherit
}
table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td {
display: table-cell;
line-height: 1.6
}
td.tableblock > .content {
margin-bottom: 1.25em
}
td.tableblock > .content > :last-child {
margin-bottom: -1.25em
}
table.tableblock, th.tableblock, td.tableblock {
border: 0 solid #dedede
}
table.grid-all > thead > tr > .tableblock, table.grid-all > tbody > tr > .tableblock {
border-width: 0 1px 1px 0
}
table.grid-all > tfoot > tr > .tableblock {
border-width: 1px 1px 0 0
}
table.grid-cols > * > tr > .tableblock {
border-width: 0 1px 0 0
}
table.grid-rows > thead > tr > .tableblock, table.grid-rows > tbody > tr > .tableblock {
border-width: 0 0 1px
}
table.grid-rows > tfoot > tr > .tableblock {
border-width: 1px 0 0
}
table.grid-all > * > tr > .tableblock:last-child, table.grid-cols > * > tr > .tableblock:last-child {
border-right-width: 0
}
table.grid-all > tbody > tr:last-child > .tableblock, table.grid-all > thead:last-child > tr > .tableblock, table.grid-rows > tbody > tr:last-child > .tableblock, table.grid-rows > thead:last-child > tr > .tableblock {
border-bottom-width: 0
}
table.frame-all {
border-width: 1px
}
table.frame-sides {
border-width: 0 1px
}
table.frame-topbot, table.frame-ends {
border-width: 1px 0
}
.reveal table th.halign-left, .reveal table td.halign-left {
text-align: left
}
.reveal table th.halign-right, .reveal table td.halign-right {
text-align: right
}
.reveal table th.halign-center, .reveal table td.halign-center {
text-align: center
}
.reveal table th.valign-top, .reveal table td.valign-top {
vertical-align: top
}
.reveal table th.valign-bottom, .reveal table td.valign-bottom {
vertical-align: bottom
}
.reveal table th.valign-middle, .reveal table td.valign-middle {
vertical-align: middle
}
table thead th, table tfoot th {
font-weight: bold
}
tbody tr th {
display: table-cell;
line-height: 1.6
}
tbody tr th, tbody tr th p, tfoot tr th, tfoot tr th p {
font-weight: bold
}
thead {
display: table-header-group
}
.reveal table.grid-none th, .reveal table.grid-none td {
border-bottom: 0 !important
}
/* kbd macro */
kbd {
font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
display: inline-block;
color: rgba(0, 0, 0, .8);
font-size: .65em;
line-height: 1.45;
background: #f7f7f7;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 0 0 .1em white inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 0 0 .1em #fff inset;
margin: 0 .15em;
padding: .2em .5em;
vertical-align: middle;
position: relative;
top: -.1em;
white-space: nowrap
}
.keyseq kbd:first-child {
margin-left: 0
}
.keyseq kbd:last-child {
margin-right: 0
}
/* callouts */
.conum[data-value] {
display: inline-block;
color: #fff !important;
background: rgba(0, 0, 0, .8);
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
font-size: .75em;
width: 1.67em;
height: 1.67em;
line-height: 1.67em;
font-family: "Open Sans", "DejaVu Sans", sans-serif;
font-style: normal;
font-weight: bold
}
.conum[data-value] * {
color: #fff !important
}
.conum[data-value] + b {
display: none
}
.conum[data-value]:after {
content: attr(data-value)
}
pre .conum[data-value] {
position: relative;
top: -.125em
}
b.conum * {
color: inherit !important
}
.conum:not([data-value]):empty {
display: none
}
/* Callout list */
.hdlist > table, .colist > table {
border: 0;
background: none
}
.hdlist > table > tbody > tr, .colist > table > tbody > tr {
background: none
}
td.hdlist1, td.hdlist2 {
vertical-align: top;
padding: 0 .625em
}
td.hdlist1 {
font-weight: bold;
padding-bottom: 1.25em
}
/* Disabled from Asciidoctor CSS because it caused callout list to go under the
* source listing when .stretch is applied (see #335)
* .literalblock+.colist,.listingblock+.colist{margin-top:-.5em} */
.colist td:not([class]):first-child {
padding: .4em .75em 0;
line-height: 1;
vertical-align: top
}
.colist td:not([class]):first-child img {
max-width: none
}
.colist td:not([class]):last-child {
padding: .25em 0
}
/* Override Asciidoctor CSS that causes issues with reveal.js features */
.reveal .hljs table {
border: 0
}
/* Callout list rows would have a bottom border with some reveal.js themes (see #335) */
.reveal .colist > table th, .reveal .colist > table td {
border-bottom: 0
}
/* Fixes line height with Highlight.js source listing when linenums enabled (see #331) */
.reveal .hljs table thead tr th, .reveal .hljs table tfoot tr th, .reveal .hljs table tbody tr td, .reveal .hljs table tr td, .reveal .hljs table tfoot tr td {
line-height: inherit
}
/* Columns layout */
.columns .slide-content {
display: flex;
}
.columns.wrap .slide-content {
flex-wrap: wrap;
}
.columns.is-vcentered .slide-content {
align-items: center;
}
.columns .slide-content > .column {
display: block;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
}
.columns .slide-content > .column > * {
padding: .75rem;
}
/* See #353 */
.columns.wrap .slide-content > .column {
flex-basis: auto;
}
.columns .slide-content > .column.is-full {
flex: none;
width: 100%;
}
.columns .slide-content > .column.is-four-fifths {
flex: none;
width: 80%;
}
.columns .slide-content > .column.is-three-quarters {
flex: none;
width: 75%;
}
.columns .slide-content > .column.is-two-thirds {
flex: none;
width: 66.6666%;
}
.columns .slide-content > .column.is-three-fifths {
flex: none;
width: 60%;
}
.columns .slide-content > .column.is-half {
flex: none;
width: 50%;
}
.columns .slide-content > .column.is-two-fifths {
flex: none;
width: 40%;
}
.columns .slide-content > .column.is-one-third {
flex: none;
width: 33.3333%;
}
.columns .slide-content > .column.is-one-quarter {
flex: none;
width: 25%;
}
.columns .slide-content > .column.is-one-fifth {
flex: none;
width: 20%;
}
.columns .slide-content > .column.has-text-left {
text-align: left;
}
.columns .slide-content > .column.has-text-justified {
text-align: justify;
}
.columns .slide-content > .column.has-text-right {
text-align: right;
}
.columns .slide-content > .column.has-text-left {
text-align: left;
}
.columns .slide-content > .column.has-text-justified {
text-align: justify;
}
.columns .slide-content > .column.has-text-right {
text-align: right;
}
.text-left {
text-align: left !important
}
.text-right {
text-align: right !important
}
.text-center {
text-align: center !important
}
.text-justify {
text-align: justify !important
}
.footnotes {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 0.5em 0 0 0;
font-size: 0.65em;
margin-top: 4em;
}
.byline {
font-size:.8em
}
ul.byline {
list-style-type: none;
}
ul.byline li + li {
margin-top: 0.25em;
}
2024-01-29 22:04:11 +01:00
< / style > < link rel = "stylesheet" href = "presentation.css" > < / head > < body > < div class = "reveal" > < div class = "slides" > < section class = "title" data-state = "title" > < h1 > mod-host vs Pisound button< / h1 > < div class = "preamble" > < div class = "paragraph" > < p > < a href = "https://sonoj.org/" target = "_blank" > Sonoj Convention< / a > < / p > < / div >
2024-01-27 21:17:21 +01:00
< div class = "paragraph" > < p > < a href = "https://github.com/danielappelt" target = "_blank" > Daniel Appelt< / a > / 2023-09-30< / p > < / div > < / div > < / section >
2024-01-29 22:04:11 +01:00
< section id = "_pisound_the_button" > < h2 > Pisound & the button< / h2 > < div class = "slide-content" > < div class = "ulist" > < ul > < li class = "fragment" > < p > < a href = "https://blokas.io/pisound/" target = "_blank" > Pisound< / a > is a sound card and MIDI interface for the Raspberry Pi< / p > < / li > < li class = "fragment" > < p > It comes with one < a href = "https://github.com/BlokasLabs/pisound/blob/master/pisound-btn/pisound.conf" target = "_blank" > configurable button< / a > < / p > < / li > < li class = "fragment" > < p > Bash scripts are used for button action (< a href = "https://github.com/BlokasLabs/pisound/blob/master/scripts/pisound-btn/toggle_wifi_hotspot.sh" target = "_blank" > example< / a > )< / p > < / li > < / ul > < / div > < / div > < / section >
< section id = "_mod_host" > < h2 > mod-host< / h2 > < div class = "slide-content" > < div class = "ulist" > < ul > < li class = "fragment" > < p > < a href = "https://github.com/moddevices/mod-host" target = "_blank" > mod-host< / a > is an LV2 host for JACK, controllable via socket or command line< / p > < / li > < li class = "fragment" > < p > < a href = "https://github.com/moddevices/mod-ui" target = "_blank" > mod-ui< / a > is started together with mod-host in MODEP< / p > < / li > < li class = "fragment" > < p > mod-ui uses file socket to communicate with mod-host< / p > < / li > < / ul > < / div > < / div > < / section >
2024-01-27 21:17:21 +01:00
< section id = "_problem" > < h2 > Problem< / h2 > < div class = "slide-content" > < div class = "ulist" > < ul > < li class = "fragment" > < p > Syncing mod-host as secondary via MIDI clock was unreliable< / p > < / li > < li class = "fragment" > < p > How to start/stop transport in mod-host as MIDI clock primary not using mod-ui?< / p > < / li > < / ul > < / div > < / div > < / section >
2024-01-29 22:04:11 +01:00
< section id = "_solution" > < h2 > Solution< / h2 > < div class = "slide-content" > < div class = "ulist" > < ul > < li class = "fragment" > < p > Let Pisound button start/stop mod-host via web socket< / p > < / li > < li class = "fragment" > < p > < a href = "https://github.com/vi/websocat" target = "_blank" > websocat< / a > is like netcat, curl and socat for WebSockets< / p > < / li > < li class = "fragment" > < p > Example script to start/stop transport in mod-host< / p > < / li > < / ul > < / div > < / div > < / section >
2024-01-27 21:17:21 +01:00
< section id = "_code" > < h2 > Code< / h2 > < div class = "slide-content" > < div class = "listingblock" > < div class = "content" > < pre class = "highlightjs highlight" > < code class = "language-bash hljs" data-noescape = "true" data-lang = "bash" > #!/bin/sh
. /usr/local/pisound/scripts/common/common.sh
# Use websocket interface to mod-ui as the regular socket is exclusively used for
# communication between mod-ui and mod-host.
if [ -z $(echo -n '' | /usr/local/bin/websocat --text ws://127.0.0.1:80/websocket/ | grep 'transport 1') ]; then
# Start transport and blinking
echo 'transport-rolling 1' | /usr/local/bin/websocat ws://127.0.0.1:80/websocket/
else
# Stop transport and blinking
echo 'transport-rolling 0' | /usr/local/bin/websocat ws://127.0.0.1:80/websocket/
fi< / code > < / pre > < / div > < / div > < / div > < / section > < / div > < / div > < script src = "node_modules/reveal.js/dist/reveal.js" > < / script > < script > A r r a y . p r o t o t y p e . s l i c e . c a l l ( d o c u m e n t . q u e r y S e l e c t o r A l l ( ' . s l i d e s s e c t i o n ' ) ) . f o r E a c h ( f u n c t i o n ( s l i d e ) {
if (slide.getAttribute('data-background-color')) return;
// user needs to explicitly say he wants CSS color to override otherwise we might break custom css or theme (#226)
if (!(slide.classList.contains('canvas') || slide.classList.contains('background'))) return;
var bgColor = getComputedStyle(slide).backgroundColor;
if (bgColor !== 'rgba(0, 0, 0, 0)' & & bgColor !== 'transparent') {
slide.setAttribute('data-background-color', bgColor);
slide.style.backgroundColor = 'transparent';
}
});
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
// Display presentation control arrows
controls: true,
// Help the user learn the controls by providing hints, for example by
// bouncing the down arrow when they first encounter a vertical slide
controlsTutorial: true,
// Determines where controls appear, "edges" or "bottom-right"
controlsLayout: 'bottom-right',
// Visibility rule for backwards navigation arrows; "faded", "hidden"
// or "visible"
controlsBackArrows: 'faded',
// Display a presentation progress bar
progress: true,
// Display the page number of the current slide
slideNumber: false,
// Control which views the slide number displays on
showSlideNumber: 'all',
// Add the current slide number to the URL hash so that reloading the
// page/copying the URL will return you to the same slide
hash: false,
// Push each slide change to the browser history. Implies `hash: true`
history: false,
// Enable keyboard shortcuts for navigation
keyboard: true,
// Enable the slide overview mode
overview: true,
// Disables the default reveal.js slide layout so that you can use custom CSS layout
disableLayout: false,
// Vertical centering of slides
center: true,
// Enables touch navigation on devices with touch input
touch: true,
// Loop the presentation
loop: false,
// Change the presentation direction to be RTL
rtl: false,
// See https://github.com/hakimel/reveal.js/#navigation-mode
navigationMode: 'default',
// Randomizes the order of slides each time the presentation loads
shuffle: false,
// Turns fragments on and off globally
fragments: true,
// Flags whether to include the current fragment in the URL,
// so that reloading brings you to the same fragment position
fragmentInURL: false,
// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen
embedded: false,
// Flags if we should show a help overlay when the questionmark
// key is pressed
help: true,
// Flags if speaker notes should be visible to all viewers
showNotes: false,
// Global override for autolaying embedded media (video/audio/iframe)
// - null: Media will only autoplay if data-autoplay is present
// - true: All media will autoplay, regardless of individual setting
// - false: No media will autoplay, regardless of individual setting
autoPlayMedia: null,
// Global override for preloading lazy-loaded iframes
// - null: Iframes with data-src AND data-preload will be loaded when within
// the viewDistance, iframes with only data-src will be loaded when visible
// - true: All iframes with data-src will be loaded when within the viewDistance
// - false: All iframes with data-src will be loaded only when visible
preloadIframes: null,
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
autoSlide: 0,
// Stop auto-sliding after user input
autoSlideStoppable: true,
// Use this method for navigation when auto-sliding
autoSlideMethod: Reveal.navigateNext,
// Specify the average time in seconds that you think you will spend
// presenting each slide. This is used to show a pacing timer in the
// speaker view
defaultTiming: 120,
// Specify the total time in seconds that is available to
// present. If this is set to a nonzero value, the pacing
// timer will work out the time available for each slide,
// instead of using the defaultTiming value
totalTime: 0,
// Specify the minimum amount of time you want to allot to
// each slide, if using the totalTime calculation method. If
// the automated time allocation causes slide pacing to fall
// below this threshold, then you will see an alert in the
// speaker notes window
minimumTimePerSlide: 0,
// Enable slide navigation via mouse wheel
mouseWheel: false,
// Hide cursor if inactive
hideInactiveCursor: true,
// Time before the cursor is hidden (in ms)
hideCursorTime: 5000,
// Hides the address bar on mobile devices
hideAddressBar: true,
// Opens links in an iframe preview overlay
// Add `data-preview-link` and `data-preview-link="false"` to customise each link
// individually
previewLinks: false,
// Transition style (e.g., none, fade, slide, convex, concave, zoom)
transition: 'slide',
// Transition speed (e.g., default, fast, slow)
transitionSpeed: 'default',
// Transition style for full page slide backgrounds (e.g., none, fade, slide, convex, concave, zoom)
backgroundTransition: 'fade',
// Number of slides away from the current that are visible
viewDistance: 3,
// Number of slides away from the current that are visible on mobile
// devices. It is advisable to set this to a lower number than
// viewDistance in order to save resources.
mobileViewDistance: 3,
// Parallax background image (e.g., "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'")
parallaxBackgroundImage: '',
// Parallax background size in CSS syntax (e.g., "2100px 900px")
parallaxBackgroundSize: '',
// Number of pixels to move the parallax background per slide
// - Calculated automatically unless specified
// - Set to 0 to disable movement along an axis
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null,
// The display mode that will be used to show slides
display: 'block',
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: 960,
height: 700,
// Factor of the display size that should remain empty around the content
margin: 0.1,
// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
maxScale: 1.5,
// PDF Export Options
// Put each fragment on a separate page
pdfSeparateFragments: true,
// For slides that do not fit on a page, max number of pages
pdfMaxPagesPerSlide: 1,
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'node_modules/reveal.js/plugin/zoom/zoom.js', async: true, callback: function () { Reveal.registerPlugin(RevealZoom) } },
{ src: 'node_modules/reveal.js/plugin/notes/notes.js', async: true, callback: function () { Reveal.registerPlugin(RevealNotes) } }
],
});< / script > < script > v a r d o m = { } ;
dom.slides = document.querySelector('.reveal .slides');
function getRemainingHeight(element, slideElement, height) {
height = height || 0;
if (element) {
var newHeight, oldHeight = element.style.height;
// Change the .stretch element height to 0 in order find the height of all
// the other elements
element.style.height = '0px';
// In Overview mode, the parent (.slide) height is set of 700px.
// Restore it temporarily to its natural height.
slideElement.style.height = 'auto';
newHeight = height - slideElement.offsetHeight;
// Restore the old height, just in case
element.style.height = oldHeight + 'px';
// Clear the parent (.slide) height. .removeProperty works in IE9+
slideElement.style.removeProperty('height');
return newHeight;
}
return height;
}
function layoutSlideContents(width, height) {
// Handle sizing of elements with the 'stretch' class
toArray(dom.slides.querySelectorAll('section .stretch')).forEach(function (element) {
// Determine how much vertical space we can use
var limit = 5; // hard limit
var parent = element.parentNode;
while (parent.nodeName !== 'SECTION' & & limit > 0) {
parent = parent.parentNode;
limit--;
}
if (limit === 0) {
// unable to find parent, aborting!
return;
}
var remainingHeight = getRemainingHeight(element, parent, height);
// Consider the aspect ratio of media elements
if (/(img|video)/gi.test(element.nodeName)) {
var nw = element.naturalWidth || element.videoWidth, nh = element.naturalHeight || element.videoHeight;
var es = Math.min(width / nw, remainingHeight / nh);
element.style.width = (nw * es) + 'px';
element.style.height = (nh * es) + 'px';
} else {
element.style.width = width + 'px';
element.style.height = remainingHeight + 'px';
}
});
}
function toArray(o) {
return Array.prototype.slice.call(o);
}
Reveal.addEventListener('slidechanged', function () {
layoutSlideContents(960, 700)
});
Reveal.addEventListener('ready', function () {
layoutSlideContents(960, 700)
});
Reveal.addEventListener('resize', function () {
layoutSlideContents(960, 700)
});< / script > < link rel = "stylesheet" href = "node_modules/reveal.js/plugin/highlight/monokai.css" / >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/highlight.min.js" > < / script >
< script >
/* highlightjs-line-numbers.js 2.6.0 | (C) 2018 Yauheni Pakala | MIT License | github.com/wcoder/highlightjs-line-numbers.js */
/* Edited by Hakim for reveal.js; removed async timeout */
!function(n,e){"use strict";function t(){var n=e.createElement("style");n.type="text/css",n.innerHTML=g(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[v,L,b]),e.getElementsByTagName("head")[0].appendChild(n)}function r(t){"interactive"===e.readyState||"complete"===e.readyState?i(t):n.addEventListener("DOMContentLoaded",function(){i(t)})}function i(t){try{var r=e.querySelectorAll("code.hljs,code.nohighlight");for(var i in r)r.hasOwnProperty(i)& & l(r[i],t)}catch(o){n.console.error("LineNumbers error: ",o)}}function l(n,e){"object"==typeof n& & f(function(){n.innerHTML=s(n,e)})}function o(n,e){if("string"==typeof n){var t=document.createElement("code");return t.innerHTML=n,s(t,e)}}function s(n,e){e=e||{singleLine:!1};var t=e.singleLine?0:1;return c(n),a(n.innerHTML,t)}function a(n,e){var t=u(n);if(""===t[t.length-1].trim()& & t.pop(),t.length>e){for(var r="",i=0,l=t.length;i< l ; i + + ) r + = g ( ' < tr > < td class = "{0}" > < div class = "{1} {2}" { 3 } = " { 5 } " > < / div > < / td > < td class = "{4}" > < div class = "{1}" > {6}< / div > < / td > < / tr > ',[j,m,L,b,p,i+1,t[i].length>0?t[i]:" "]);return g('< table class = "{0}" > {1}< / table > ',[v,r])}return n}function c(n){var e=n.childNodes;for(var t in e)if(e.hasOwnProperty(t)){var r=e[t];h(r.textContent)>0& & (r.childNodes.length>0?c(r):d(r.parentNode))}}function d(n){var e=n.className;if(/hljs-/.test(e)){for(var t=u(n.innerHTML),r=0,i="";r< t.length ; r + + ) { var l = t[r].length > 0?t[r]:" ";i+=g('< span class = "{0}" > {1}< / span > \n',[e,l])}n.innerHTML=i.trim()}}function u(n){return 0===n.length?[]:n.split(y)}function h(n){return(n.trim().match(y)||[]).length}function f(e){e()}function g(n,e){return n.replace(/{(\d+)}/g,function(n,t){return e[t]?e[t]:n})}var v="hljs-ln",m="hljs-ln-line",p="hljs-ln-code",j="hljs-ln-numbers",L="hljs-ln-n",b="data-line-number",y=/\r\n|\r|\n/g;n.hljs?(n.hljs.initLineNumbersOnLoad=r,n.hljs.lineNumbersBlock=l,n.hljs.lineNumbersValue=o,t()):n.console.error("highlight.js not detected!")}(window,document);
/**
* This reveal.js plugin is wrapper around the highlight.js
* syntax highlighting library.
*/
(function( root, factory ) {
if (typeof define === 'function' & & define.amd) {
root.RevealHighlight = factory();
} else if( typeof exports === 'object' ) {
module.exports = factory();
} else {
// Browser globals (root is window)
root.RevealHighlight = factory();
}
}( this, function() {
// Function to perform a better "data-trim" on code snippets
// Will slice an indentation amount on each line of the snippet (amount based on the line having the lowest indentation length)
function betterTrim(snippetEl) {
// Helper functions
function trimLeft(val) {
// Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Polyfill
return val.replace(/^[\s\uFEFF\xA0]+/g, '');
}
function trimLineBreaks(input) {
var lines = input.split('\n');
// Trim line-breaks from the beginning
for (var i = 0; i < lines.length ; i + + ) {
if (lines[i].trim() === '') {
lines.splice(i--, 1);
} else break;
}
// Trim line-breaks from the end
for (var i = lines.length-1; i >= 0; i--) {
if (lines[i].trim() === '') {
lines.splice(i, 1);
} else break;
}
return lines.join('\n');
}
// Main function for betterTrim()
return (function(snippetEl) {
var content = trimLineBreaks(snippetEl.innerHTML);
var lines = content.split('\n');
// Calculate the minimum amount to remove on each line start of the snippet (can be 0)
var pad = lines.reduce(function(acc, line) {
if (line.length > 0 & & trimLeft(line).length > 0 & & acc > line.length - trimLeft(line).length) {
return line.length - trimLeft(line).length;
}
return acc;
}, Number.POSITIVE_INFINITY);
// Slice each line with this amount
return lines.map(function(line, index) {
return line.slice(pad);
})
.join('\n');
})(snippetEl);
}
var RevealHighlight = {
HIGHLIGHT_STEP_DELIMITER: '|',
HIGHLIGHT_LINE_DELIMITER: ',',
HIGHLIGHT_LINE_RANGE_DELIMITER: '-',
init: function( reveal ) {
// Read the plugin config options and provide fallbacks
var config = Reveal.getConfig().highlight || {};
config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true;
config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true;
[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( function( block ) {
block.parentNode.className = 'code-wrapper';
// Code can optionally be wrapped in script template to avoid
// HTML being parsed by the browser (i.e. when you need to
// include < , > or & in your code).
let substitute = block.querySelector( 'script[type="text/template"]' );
if( substitute ) {
// textContent handles the HTML entity escapes for us
block.textContent = substitute.innerHTML;
}
// Trim whitespace if the "data-trim" attribute is present
if( block.hasAttribute( 'data-trim' ) & & typeof block.innerHTML.trim === 'function' ) {
block.innerHTML = betterTrim( block );
}
// Escape HTML tags unless the "data-noescape" attrbute is present
if( config.escapeHTML & & !block.hasAttribute( 'data-noescape' )) {
block.innerHTML = block.innerHTML.replace( /< /g,"< ").replace(/>/g, '> ' );
}
// Re-highlight when focus is lost (for contenteditable code)
block.addEventListener( 'focusout', function( event ) {
hljs.highlightElement( event.currentTarget );
}, false );
if( config.highlightOnLoad ) {
RevealHighlight.highlightBlock( block );
}
} );
// If we're printing to PDF, scroll the code highlights of
// all blocks in the deck into view at once
reveal.on( 'pdf-ready', function() {
[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code[data-line-numbers].current-fragment' ) ).forEach( function( block ) {
RevealHighlight.scrollHighlightedLineIntoView( block, {}, true );
} );
} );
},
/**
* Highlights a code block. If the < code > node has the
* 'data-line-numbers' attribute we also generate slide
* numbers.
*
* If the block contains multiple line highlight steps,
* we clone the block and create a fragment for each step.
*/
highlightBlock: function( block ) {
hljs.highlightElement( block );
// Don't generate line numbers for empty code blocks
if( block.innerHTML.trim().length === 0 ) return;
if( block.hasAttribute( 'data-line-numbers' ) ) {
hljs.lineNumbersBlock( block, { singleLine: true } );
var scrollState = { currentBlock: block };
// If there is at least one highlight step, generate
// fragments
var highlightSteps = RevealHighlight.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
if( highlightSteps.length > 1 ) {
// If the original code block has a fragment-index,
// each clone should follow in an incremental sequence
var fragmentIndex = parseInt( block.getAttribute( 'data-fragment-index' ), 10 );
if( typeof fragmentIndex !== 'number' || isNaN( fragmentIndex ) ) {
fragmentIndex = null;
}
// Generate fragments for all steps except the original block
highlightSteps.slice(1).forEach( function( highlight ) {
var fragmentBlock = block.cloneNode( true );
fragmentBlock.setAttribute( 'data-line-numbers', RevealHighlight.serializeHighlightSteps( [ highlight ] ) );
fragmentBlock.classList.add( 'fragment' );
block.parentNode.appendChild( fragmentBlock );
RevealHighlight.highlightLines( fragmentBlock );
if( typeof fragmentIndex === 'number' ) {
fragmentBlock.setAttribute( 'data-fragment-index', fragmentIndex );
fragmentIndex += 1;
}
else {
fragmentBlock.removeAttribute( 'data-fragment-index' );
}
// Scroll highlights into view as we step through them
fragmentBlock.addEventListener( 'visible', RevealHighlight.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock, scrollState ) );
fragmentBlock.addEventListener( 'hidden', RevealHighlight.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock.previousSibling, scrollState ) );
} );
block.removeAttribute( 'data-fragment-index' )
block.setAttribute( 'data-line-numbers', RevealHighlight.serializeHighlightSteps( [ highlightSteps[0] ] ) );
}
// Scroll the first highlight into view when the slide
// becomes visible. Note supported in IE11 since it lacks
// support for Element.closest.
var slide = typeof block.closest === 'function' ? block.closest( 'section:not(.stack)' ) : null;
if( slide ) {
var scrollFirstHighlightIntoView = function() {
RevealHighlight.scrollHighlightedLineIntoView( block, scrollState, true );
slide.removeEventListener( 'visible', scrollFirstHighlightIntoView );
}
slide.addEventListener( 'visible', scrollFirstHighlightIntoView );
}
RevealHighlight.highlightLines( block );
}
},
/**
* Animates scrolling to the first highlighted line
* in the given code block.
*/
scrollHighlightedLineIntoView: function( block, scrollState, skipAnimation ) {
cancelAnimationFrame( scrollState.animationFrameID );
// Match the scroll position of the currently visible
// code block
if( scrollState.currentBlock ) {
block.scrollTop = scrollState.currentBlock.scrollTop;
}
// Remember the current code block so that we can match
// its scroll position when showing/hiding fragments
scrollState.currentBlock = block;
var highlightBounds = RevealHighlight.getHighlightedLineBounds( block )
var viewportHeight = block.offsetHeight;
// Subtract padding from the viewport height
var blockStyles = getComputedStyle( block );
viewportHeight -= parseInt( blockStyles.paddingTop ) + parseInt( blockStyles.paddingBottom );
// Scroll position which centers all highlights
var startTop = block.scrollTop;
var targetTop = highlightBounds.top + ( Math.min( highlightBounds.bottom - highlightBounds.top, viewportHeight ) - viewportHeight ) / 2;
// Account for offsets in position applied to the
// < table > that holds our lines of code
var lineTable = block.querySelector( '.hljs-ln' );
if( lineTable ) targetTop += lineTable.offsetTop - parseInt( blockStyles.paddingTop );
// Make sure the scroll target is within bounds
targetTop = Math.max( Math.min( targetTop, block.scrollHeight - viewportHeight ), 0 );
if( skipAnimation === true || startTop === targetTop ) {
block.scrollTop = targetTop;
}
else {
// Don't attempt to scroll if there is no overflow
if( block.scrollHeight < = viewportHeight ) return;
var time = 0;
var animate = function() {
time = Math.min( time + 0.02, 1 );
// Update our eased scroll position
block.scrollTop = startTop + ( targetTop - startTop ) * RevealHighlight.easeInOutQuart( time );
// Keep animating unless we've reached the end
if( time < 1 ) {
scrollState.animationFrameID = requestAnimationFrame( animate );
}
};
animate();
}
},
/**
* The easing function used when scrolling.
*/
easeInOutQuart: function( t ) {
// easeInOutQuart
return t< .5 ? 8 * t * t * t * t : 1-8 * ( --t ) * t * t * t ;
},
getHighlightedLineBounds: function( block ) {
var highlightedLines = block.querySelectorAll( '.highlight-line' );
if( highlightedLines.length === 0 ) {
return { top: 0, bottom: 0 };
}
else {
var firstHighlight = highlightedLines[0];
var lastHighlight = highlightedLines[ highlightedLines.length -1 ];
return {
top: firstHighlight.offsetTop,
bottom: lastHighlight.offsetTop + lastHighlight.offsetHeight
}
}
},
/**
* Visually emphasize specific lines within a code block.
* This only works on blocks with line numbering turned on.
*
* @param {HTMLElement} block a < code > block
* @param {String} [linesToHighlight] The lines that should be
* highlighted in this format:
* "1" = highlights line 1
* "2,5" = highlights lines 2 & 5
* "2,5-7" = highlights lines 2, 5, 6 & 7
*/
highlightLines: function( block, linesToHighlight ) {
var highlightSteps = RevealHighlight.deserializeHighlightSteps( linesToHighlight || block.getAttribute( 'data-line-numbers' ) );
if( highlightSteps.length ) {
highlightSteps[0].forEach( function( highlight ) {
var elementsToHighlight = [];
// Highlight a range
if( typeof highlight.end === 'number' ) {
elementsToHighlight = [].slice.call( block.querySelectorAll( 'table tr:nth-child(n+'+highlight.start+'):nth-child(-n+'+highlight.end+')' ) );
}
// Highlight a single line
else if( typeof highlight.start === 'number' ) {
elementsToHighlight = [].slice.call( block.querySelectorAll( 'table tr:nth-child('+highlight.start+')' ) );
}
if( elementsToHighlight.length ) {
elementsToHighlight.forEach( function( lineElement ) {
lineElement.classList.add( 'highlight-line' );
} );
block.classList.add( 'has-highlights' );
}
} );
}
},
/**
* Parses and formats a user-defined string of line
* numbers to highlight.
*
* @example
* RevealHighlight.deserializeHighlightSteps( '1,2|3,5-10' )
* // [
* // [ { start: 1 }, { start: 2 } ],
* // [ { start: 3 }, { start: 5, end: 10 } ]
* // ]
*/
deserializeHighlightSteps: function( highlightSteps ) {
// Remove whitespace
highlightSteps = highlightSteps.replace( /\s/g, '' );
// Divide up our line number groups
highlightSteps = highlightSteps.split( RevealHighlight.HIGHLIGHT_STEP_DELIMITER );
return highlightSteps.map( function( highlights ) {
return highlights.split( RevealHighlight.HIGHLIGHT_LINE_DELIMITER ).map( function( highlight ) {
// Parse valid line numbers
if( /^[\d-]+$/.test( highlight ) ) {
highlight = highlight.split( RevealHighlight.HIGHLIGHT_LINE_RANGE_DELIMITER );
var lineStart = parseInt( highlight[0], 10 ),
lineEnd = parseInt( highlight[1], 10 );
if( isNaN( lineEnd ) ) {
return {
start: lineStart
};
}
else {
return {
start: lineStart,
end: lineEnd
};
}
}
// If no line numbers are provided, no code will be highlighted
else {
return {};
}
} );
} );
},
/**
* Serializes parsed line number data into a string so
* that we can store it in the DOM.
*/
serializeHighlightSteps: function( highlightSteps ) {
return highlightSteps.map( function( highlights ) {
return highlights.map( function( highlight ) {
// Line range
if( typeof highlight.end === 'number' ) {
return highlight.start + RevealHighlight.HIGHLIGHT_LINE_RANGE_DELIMITER + highlight.end;
}
// Single line
else if( typeof highlight.start === 'number' ) {
return highlight.start;
}
// All lines
else {
return '';
}
} ).join( RevealHighlight.HIGHLIGHT_LINE_DELIMITER );
} ).join( RevealHighlight.HIGHLIGHT_STEP_DELIMITER );
}
}
Reveal.registerPlugin( 'highlight', RevealHighlight );
return RevealHighlight;
}));
hljs.configure({
ignoreUnescapedHTML: true,
});
hljs.highlightAll();
< / script > < / body > < / html >
