diff --git a/css/docs.css b/css/docs.css index ff9410f..5d63055 100644 --- a/css/docs.css +++ b/css/docs.css @@ -1,272 +1,313 @@ /* From CodeMirror docs */ @font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(//themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff'); + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(//themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff'); } -body, html { margin: 0; padding: 0; height: 100%; } -section, article { display: block; padding: 0; } +body, +html { + margin: 0; + padding: 0; + height: 100%; +} + +section, +article { + display: block; + padding: 0; +} body { - background: #f8f8f8; - font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; - line-height: 1.5; + background: #f8f8f8; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + line-height: 1.5; +} + +p { + margin-top: 0; +} + +h2, +h3, +h1 { + font-weight: normal; + margin-bottom: .7em; +} + +h1 { + font-size: 140%; +} + +h2 { + font-size: 120%; } -p { margin-top: 0; } +h3 { + font-size: 110%; +} -h2, h3, h1 { - font-weight: normal; - margin-bottom: .7em; +article>h2:first-child, +section:first-child>h2 { + margin-top: 0; } -h1 { font-size: 140%; } -h2 { font-size: 120%; } -h3 { font-size: 110%; } -article > h2:first-child, section:first-child > h2 { margin-top: 0; } #nav h1 { - margin-right: 12px; - margin-top: 0; - margin-bottom: 2px; - color: #d30707; - letter-spacing: .5px; + margin-right: 12px; + margin-top: 0; + margin-bottom: 2px; + color: #d30707; + letter-spacing: .5px; } -a, a:visited, a:link, .quasilink { - color: #A21313; - text-decoration: none; +a, +a:visited, +a:link, +.quasilink { + color: #A21313; + text-decoration: none; } em { - padding-right: 2px; + padding-right: 2px; } .quasilink { - cursor: pointer; + cursor: pointer; } article { - max-width: 700px; - margin: 0 0 0 160px; - border-left: 2px solid #E30808; - border-right: 1px solid #ddd; - padding: 30px 50px 100px 50px; - background: white; - z-index: 2; - position: relative; - min-height: 100%; - box-sizing: border-box; - -moz-box-sizing: border-box; + max-width: 700px; + margin: 0 0 0 160px; + border-left: 2px solid #E30808; + border-right: 1px solid #ddd; + padding: 30px 50px 100px 50px; + background: white; + z-index: 2; + position: relative; + min-height: 100%; + box-sizing: border-box; + -moz-box-sizing: border-box; } #nav { - position: fixed; - padding-top: 30px; - max-height: 100%; - box-sizing: -moz-border-box; - box-sizing: border-box; - overflow-y: auto; - left: 0; right: none; - width: 160px; - text-align: right; - z-index: 1; + position: fixed; + padding-top: 30px; + max-height: 100%; + box-sizing: -moz-border-box; + box-sizing: border-box; + overflow-y: auto; + left: 0; + right: none; + width: 160px; + text-align: right; + z-index: 1; } @media screen and (min-width: 1000px) { - article { - margin: 0 auto; - } - #nav { - right: 50%; - width: auto; - border-right: 349px solid transparent; - } + article { + margin: 0 auto; + } + + #nav { + right: 50%; + width: auto; + border-right: 349px solid transparent; + } } #nav ul { - display: block; - margin: 0; padding: 0; - margin-bottom: 32px; + display: block; + margin: 0; + padding: 0; + margin-bottom: 32px; } #nav li { - display: block; - margin-bottom: 4px; + display: block; + margin-bottom: 4px; } #nav li ul { - font-size: 80%; - margin-bottom: 0; - display: none; + font-size: 80%; + margin-bottom: 0; + display: none; } #nav li.active ul { - display: block; + display: block; } #nav li li a { - padding-right: 20px; - display: inline-block; + padding-right: 20px; + display: inline-block; } #nav ul a { - color: black; - padding: 0 7px 1px 11px; + color: black; + padding: 0 7px 1px 11px; } -#nav ul a.active, #nav ul a:hover { - border-bottom: 1px solid #E30808; - margin-bottom: -1px; - color: #E30808; +#nav ul a.active, +#nav ul a:hover { + border-bottom: 1px solid #E30808; + margin-bottom: -1px; + color: #E30808; } #logo { - border: 0; - margin-right: 12px; - margin-bottom: 25px; + border: 0; + margin-right: 12px; + margin-bottom: 25px; } section { - border-top: 1px solid #E30808; - margin: 1.5em 0; + border-top: 1px solid #E30808; + margin: 1.5em 0; } section.first { - border: none; - margin-top: 0; + border: none; + margin-top: 0; } #demo { - position: relative; + position: relative; } #demolist { - position: absolute; - right: 5px; - top: 5px; - z-index: 25; + position: absolute; + right: 5px; + top: 5px; + z-index: 25; } .yinyang { - position: absolute; - top: -10px; - left: 0; right: 0; - margin: auto; - display: block; - height: 120px; + position: absolute; + top: -10px; + left: 0; + right: 0; + margin: auto; + display: block; + height: 120px; } .actions { - margin: 1em 0 0; - min-height: 100px; - position: relative; + margin: 1em 0 0; + min-height: 100px; + position: relative; } .actionspicture { - pointer-events: none; - position: absolute; - height: 100px; - top: 0; left: 0; right: 0; + pointer-events: none; + position: absolute; + height: 100px; + top: 0; + left: 0; + right: 0; } .actionlink { - pointer-events: auto; - font-family: arial; - font-size: 80%; - font-weight: bold; - position: absolute; - top: 0; bottom: 0; - line-height: 1; - height: 1em; - margin: auto; + pointer-events: auto; + font-family: arial; + font-size: 80%; + font-weight: bold; + position: absolute; + top: 0; + bottom: 0; + line-height: 1; + height: 1em; + margin: auto; } .actionlink.download { - color: white; - right: 50%; - margin-right: 13px; - text-shadow: -1px 1px 3px #b00, -1px -1px 3px #b00, 1px 0px 3px #b00; + color: white; + right: 50%; + margin-right: 13px; + text-shadow: -1px 1px 3px #b00, -1px -1px 3px #b00, 1px 0px 3px #b00; } .actionlink.fund { - color: #b00; - left: 50%; - margin-left: 15px; + color: #b00; + left: 50%; + margin-left: 15px; } .actionlink:hover { - text-decoration: underline; + text-decoration: underline; } .actionlink a { - color: inherit; + color: inherit; } .actionsleft { - float: left; + float: left; } .actionsright { - float: right; - text-align: right; + float: right; + text-align: right; } @media screen and (max-width: 800px) { - .actions { - padding-top: 120px; - } - .actionsleft, .actionsright { - float: none; - text-align: left; - margin-bottom: 1em; - } + .actions { + padding-top: 120px; + } + + .actionsleft, + .actionsright { + float: none; + text-align: left; + margin-bottom: 1em; + } } th { - text-decoration: underline; - font-weight: normal; - text-align: left; + text-decoration: underline; + font-weight: normal; + text-align: left; } #features ul { - list-style: none; - margin: 0 0 1em; - padding: 0 0 0 1.2em; + list-style: none; + margin: 0 0 1em; + padding: 0 0 0 1.2em; } #features li:before { - content: "-"; - width: 1em; - display: inline-block; - padding: 0; - margin: 0; - margin-left: -1em; + content: "-"; + width: 1em; + display: inline-block; + padding: 0; + margin: 0; + margin-left: -1em; } .rel { - margin-bottom: 0; + margin-bottom: 0; } + .rel-note { - margin-top: 0; - color: #555; + margin-top: 0; + color: #555; } pre { - padding-left: 15px; - border-left: 2px solid #ddd; + padding-left: 15px; + border-left: 2px solid #ddd; } code { - padding: 0 2px; + padding: 0 2px; } strong { - text-decoration: underline; - font-weight: normal; + text-decoration: underline; + font-weight: normal; } .field { - border: 1px solid #A21313; -} + border: 1px solid #A21313; +} \ No newline at end of file diff --git a/css/editor.css b/css/editor.css index 1668385..279f632 100644 --- a/css/editor.css +++ b/css/editor.css @@ -1,228 +1,234 @@ html { - font-family: 'Roboto', sans-serif; - margin: 0px; - padding: 0px; + font-family: 'Roboto', sans-serif; + margin: 0px; + padding: 0px; } .application { - display: grid; - height:100%; - grid-template-columns: 80px auto; - grid-template-rows: 60px auto; + display: grid; + height: 100%; + grid-template-columns: 80px auto; + grid-template-rows: 60px auto; } .logozone { - grid-column: 1; - grid-row: 1; - background-color: #2b3373; - color:#343232; - text-align: center; - line-height: 4rem; - font-weight: bold; - font-size : 1.8rem; + grid-column: 1; + grid-row: 1; + background-color: #2b3373; + color: #343232; + text-align: center; + line-height: 4rem; + font-weight: bold; + font-size: 1.8rem; } .actionzone { - grid-column: 1; - grid-row: 2; - background-color: #2b3373; + grid-column: 1; + grid-row: 2; + background-color: #2b3373; } .dynamic-button { - width: auto; - margin: 10px; - padding: 4px; - height: 1.5rem; - text-align: center; - color: #fff; - opacity: 0.3; - background-color: #0069d9; - border-color: #0069d9; - border-radius: 2px; - user-select: none; + width: auto; + margin: 10px; + padding: 4px; + height: 1.5rem; + text-align: center; + color: #fff; + opacity: 0.3; + background-color: #0069d9; + border-color: #0069d9; + border-radius: 2px; + user-select: none; } .action-button { - width: auto; - margin: 10px; - padding: 4px; - height: 1.5rem; - text-align: center; - color: #fff; - background-color: #0069d9; - border-color: #0069d9; - border-radius: 2px; - user-select: none; + width: auto; + margin: 10px; + padding: 4px; + height: 1.5rem; + text-align: center; + color: #fff; + background-color: #0069d9; + border-color: #0069d9; + border-radius: 2px; + user-select: none; } .action-select { - text-align: center; + text-align: center; } + .export-button { - width: auto; - margin: 10px; - padding: 4px; - height: 1.5rem; - text-align: center; - color: #fff; - background-color: #0069d9; - border-color: #0069d9; - border-radius: 2px; - user-select: none; + width: auto; + margin: 10px; + padding: 4px; + height: 1.5rem; + text-align: center; + color: #fff; + background-color: #0069d9; + border-color: #0069d9; + border-radius: 2px; + user-select: none; } .export-button:hover { - background-color: #007bff; - border-color: #007bff; + background-color: #007bff; + border-color: #007bff; } .action-button:hover { - background-color: #007bff; - border-color: #007bff; + background-color: #007bff; + border-color: #007bff; } .dropzone { - grid-column: 2; - grid-row: 1; - width: auto; - height: auto; - font-weight: bold; - line-height: 3rem; - text-align: center; - padding: 0 0; - color: #8d97e8; - border: 4px dashed #8d97e8; - cursor: default; - font-size : 20px; + grid-column: 2; + grid-row: 1; + width: auto; + height: auto; + font-weight: bold; + line-height: 3rem; + text-align: center; + padding: 0 0; + color: #8d97e8; + border: 4px dashed #8d97e8; + cursor: default; + font-size: 20px; } -.dropzone:hover{ - color: #0069d9; - border-color: #0062cc; +.dropzone:hover { + color: #0069d9; + border-color: #0062cc; } .dropzone input { - min-width: 300px; - height: auto; - text-align: center; - line-height: 2.5rem; - font-size : 20px; - background-color: inherit; - color: #0069d9; - border-width: 0px; + min-width: 300px; + height: auto; + text-align: center; + line-height: 2.5rem; + font-size: 20px; + background-color: inherit; + color: #0069d9; + border-width: 0px; } + .editionzone { - grid-column: 2 3; - grid-row: 2 3; - height: calc(100vh - 61px); - width: calc(100vw - 86px); + grid-column: 2 3; + grid-row: 2 3; + height: calc(100vh - 61px); + width: calc(100vw - 86px); } .CodeMirror { - height: 100%; + height: 100%; } .modalwrapper { - display:none; - position: fixed; - z-index:4; - left: 0; - top:0; - height: 100%; - width:100%; - overflow: auto; - background-color: rgba(229, 231, 233, 0.83); + display: none; + position: fixed; + z-index: 4; + left: 0; + top: 0; + height: 100%; + width: 100%; + overflow: auto; + background-color: rgba(229, 231, 233, 0.83); } .faustui { - margin:20px 40px 40px 40px; - width: calc(100% - 80px); - height: calc(100% - 80px); + margin: 20px 40px 40px 40px; + width: calc(100% - 80px); + height: calc(100% - 80px); } /* Close Button used to stop the running Faust code */ -.closeBtn{ - float: right; - font-size:40px; - color:#0069d9; - margin: 0px 10px 0px 0px; - } +.closeBtn { + float: right; + font-size: 40px; + color: #0069d9; + margin: 0px 10px 0px 0px; +} -.closeBtn:hover,.closeBtn:focus{ - color:#007bff; - text-decoration: none; - cursor:pointer; +.closeBtn:hover, +.closeBtn:focus { + color: #007bff; + text-decoration: none; + cursor: pointer; } -.exportui{ - display: grid; - grid-template-columns: 1fr; - grid-gap:20px; - margin:auto; - margin-top:100px; - padding:20px; - width: 250px; - /* height: calc(100% - 80px); */ - background-color:white; - box-shadow: 3px 3px 5px 0px rgba(75, 81, 122, 0.46); +.exportui { + display: grid; + grid-template-columns: 1fr; + grid-gap: 20px; + margin: auto; + margin-top: 100px; + padding: 20px; + width: 250px; + /* height: calc(100% - 80px); */ + background-color: white; + box-shadow: 3px 3px 5px 0px rgba(75, 81, 122, 0.46); } .exportui h1 { - text-align: center; - color:hsla(220, 66%, 39%, 0.91); + text-align: center; + color: hsla(220, 66%, 39%, 0.91); } #qrDiv { - display: block; - min-height: 130px; + display: block; + min-height: 130px; } + #loader { - display: none; - text-align: center; - color:hsla(220, 66%, 39%, 0.91); - font-size: 3em; + display: none; + text-align: center; + color: hsla(220, 66%, 39%, 0.91); + font-size: 3em; } - -.configui{ - display: grid; - grid-template-columns: 1fr; - grid-gap:20px; - margin:auto; - margin-top:100px; - padding:20px; - width: 80%; - /* height: calc(100% - 80px); */ - background-color:white; - box-shadow: 3px 3px 5px 0px rgba(75, 81, 122, 0.46); +.configui { + display: grid; + grid-template-columns: 1fr; + grid-gap: 20px; + margin: auto; + margin-top: 100px; + padding: 20px; + width: 80%; + /* height: calc(100% - 80px); */ + background-color: white; + box-shadow: 3px 3px 5px 0px rgba(75, 81, 122, 0.46); } .configui h1 { - text-align: center; - color:hsla(220, 66%, 39%, 0.91); + text-align: center; + color: hsla(220, 66%, 39%, 0.91); } .config { - display:grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 8px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-gap: 8px; } .config-element { - border: none; - background-color: #9FA8EB; - padding: 10px; + border: none; + background-color: #9FA8EB; + padding: 10px; } + .config-element p { - font-style: italic; - font-size: 0.8em; + font-style: italic; + font-size: 0.8em; } + .config-element ul { - font-style: italic; - list-style-type: none; + font-style: italic; + list-style-type: none; } + .config-element li { - font-style: italic; - list-style-type: none; -} + font-style: italic; + list-style-type: none; +} \ No newline at end of file diff --git a/css/faust.css b/css/faust.css index 8337b0a..20f7a17 100644 --- a/css/faust.css +++ b/css/faust.css @@ -1,229 +1,230 @@ /* WEBKIT */ text { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } /**/ .faust-group-label { - font-family: Arial, Verdana, Helvetica, sans; - font-size: 13px; - fill: rgba(199,190,162,0.6); + font-family: Arial, Verdana, Helvetica, sans; + font-size: 13px; + fill: rgba(199, 190, 162, 0.6); } .faust-tooltip-text { - font-family: Arial, Verdana, Helvetica, sans; - font-size: 13px; + font-family: Arial, Verdana, Helvetica, sans; + font-size: 13px; } .faust-button-label { - font-family: Arial, Verdana, Helvetica, sans; - font-size: 13px; - fill: rgba(122, 219, 255, 0.79); + font-family: Arial, Verdana, Helvetica, sans; + font-size: 13px; + fill: rgba(122, 219, 255, 0.79); } .faust-tgroup-label { - font-family: Arial, Verdana, Helvetica, sans; - font-size: 13px; - fill: rgba(122, 219, 255, 0.79); + font-family: Arial, Verdana, Helvetica, sans; + font-size: 13px; + fill: rgba(122, 219, 255, 0.79); } .faust-label { - font-family: Arial, Verdana, Helvetica, sans; - font-size: 14px; - fill: rgba(248, 187, 208, 0.75); + font-family: Arial, Verdana, Helvetica, sans; + font-size: 14px; + fill: rgba(248, 187, 208, 0.75); } .faust-value-text { - font-family: Arial, Verdana, Helvetica, sans; - font-size: 11px; - font-weight: bold; - fill: rgb(82,79,79); + font-family: Arial, Verdana, Helvetica, sans; + font-size: 11px; + font-weight: bold; + fill: rgb(82, 79, 79); } path { - -webkit-user-select: none; + -webkit-user-select: none; } rect { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } circle { - -webkit-user-select: none; + -webkit-user-select: none; } text:hover { - cursor: default; + cursor: default; } path.faust-vbox { - fill : white; - stroke : black; + fill: white; + stroke: black; } path.faust-rbutton-groove { - fill : rgb(152,251,152); - stroke : black; + fill: rgb(152, 251, 152); + stroke: black; } path.faust-rbutton-handle { - fill : grey; - stroke : black; + fill: grey; + stroke: black; } rect.faust-hslider-handle { - fill : black; + fill: black; } rect.faust-vslider-meter, rect.faust-hslider-meter { - fill : #F48FB1; + fill: #F48FB1; } rect.faust-vslider-groove, rect.faust-hslider-groove { - /*fill : #FCE4EC;*/ - fill : black; + /*fill : #FCE4EC;*/ + fill: black; } rect.faust-vslider-handle, rect.faust-hslider-handle { - fill : rgba(233, 30, 101, 0.63); - stroke : rgba(233, 30, 101, 0.99); + fill: rgba(233, 30, 101, 0.63); + stroke: rgba(233, 30, 101, 0.99); } rect.faust-hbargraph-curtain { - fill : rgb(20,20,20); - stroke : black; + fill: rgb(20, 20, 20); + stroke: black; } /* hbargraph meters cannot be defined via CSS because their widths and * heights are dynamic */ rect.faust-hbargraph-meter { - fill : url(#horizontalBarGraphMeterGradient); - stroke : black; + fill: url(#horizontalBarGraphMeterGradient); + stroke: black; } rect.faust-vbargraph-curtain { - fill : rgb(20,20,20); - stroke : black; + fill: rgb(20, 20, 20); + stroke: black; } rect.faust-vbargraph-meter { - fill : url(#verticalBarGraphMeterGradient); - stroke : black; + fill: url(#verticalBarGraphMeterGradient); + stroke: black; } rect.faust-checkbox-box { - fill : white; - stroke : black; + fill: white; + stroke: black; } path.faust-checkbox-check { - fill : black; - stroke : black; + fill: black; + stroke: black; } rect.faust-nentry-box { - fill : url(#numericalEntryUpGradient); - stroke : black; + fill: url(#numericalEntryUpGradient); + stroke: black; } path.faust-nentry-operation { - stroke : black; + stroke: black; } rect.faust-button-box { - fill : url(#buttonUpGradient); - stroke : black; + fill: url(#buttonUpGradient); + stroke: black; } rect.faust-tgroup-box { - fill : url(#tabGroupUpGradient); - stroke : black; + fill: url(#tabGroupUpGradient); + stroke: black; } circle.faust-rbutton-groove { - /*fill : rgba(233, 30, 101, 0.63);*/ - fill : url(#rotatingButtonHandleGradient); - stroke : rgb(233, 30, 101); + /*fill : rgba(233, 30, 101, 0.63);*/ + fill: url(#rotatingButtonHandleGradient); + stroke: rgb(233, 30, 101); } circle.faust-rbutton-dot { - fill : pink; - stroke : black; + fill: pink; + stroke: black; } path.faust-rbutton-meter { - fill : black; + fill: black; } path.faust-rbutton-mgroove { - fill : #F48FB1; + fill: #F48FB1; } /* as all of the above rectangles could be implemented as paths, we duplicate the definitions for paths */ path.faust-hslider-groove { - fill : red; - stroke : black; + fill: red; + stroke: black; } path.faust-hslider-handle { - fill : url(#horizontalSliderHandleGradient); - stroke : black; + fill: url(#horizontalSliderHandleGradient); + stroke: black; } path.faust-vslider-groove { - fill : red; - stroke : black; + fill: red; + stroke: black; } path.faust-vslider-handle { - fill : url(#verticalSliderHandleGradient); - stroke : black; + fill: url(#verticalSliderHandleGradient); + stroke: black; } path.faust-hbargraph-curtain { - fill : rgb(0,255,255); - stroke : black; + fill: rgb(0, 255, 255); + stroke: black; } path.faust-hbargraph-meter { - fill : grey; - stroke : black; + fill: grey; + stroke: black; } path.faust-vbargraph-curtain { - fill : rgb(0,255,255); - stroke : black; + fill: rgb(0, 255, 255); + stroke: black; } path.faust-vbargraph-meter { - fill : grey; - stroke : black; + fill: grey; + stroke: black; } path.faust-checkbox-box { - fill : white; - stroke : black; + fill: white; + stroke: black; } path.faust-nentry-box { - fill : url(#numericalEntryUpGradient); - stroke : black; + fill: url(#numericalEntryUpGradient); + stroke: black; } path.faust-button-box { - fill : #B0B0B0; - stroke : black; + fill: #B0B0B0; + stroke: black; } -/**/ + +/**/ \ No newline at end of file diff --git a/index.html b/index.html index f3fcd7e..ce05ce3 100644 --- a/index.html +++ b/index.html @@ -2,176 +2,206 @@
- - - - -You can change the buffer size (from 256 to 8192 frames in ScripProcessor mode, it will be fixed + at 128 frames + in AudioWorklet mode).
+Assuming your DSP code is polyphonic + ready, you can activate the polyphonic mode, adjust the number of available voices, and + test it with a MIDI + device or application (usable with Chrome which implements the Web + MIDI API). +
ScriptProcessor: audio rendering is done using the old ScriptProcessor model
+AudioWorklet: audio rendering is done using the new AudioWorklet model. This can only be tested + with Chrome + Canary for now, be sure to activate + it +
+
Save DSP control + parameters state +
+ +Save DSP + source
+