598 lines
35 KiB
HTML
598 lines
35 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Topos</title>
|
|
<meta name="description" content="Topos is a live coding environment inspired by the Monome Teletype.">
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" href="/favicon/favicon.ico" sizes="48x48" ><!-- REVISED (Aug 11, 2023)! -->
|
|
<link rel="icon" href="/favicon/favicon.svg" sizes="any" type="image/svg+xml"><!-- REVISED (Aug 11, 2023)! -->
|
|
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png"/>
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<link rel="stylesheet" href='/fonts/index.css' >
|
|
<link rel="stylesheet" href="/src/output.css" />
|
|
<script src="https://unpkg.com/hydra-synth"></script>
|
|
</head>
|
|
<style>
|
|
body {
|
|
font-family: "Arial";
|
|
overflow: hidden;
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.fluid-transition {
|
|
transition: background-color 0.05s ease-in-out;
|
|
}
|
|
|
|
.hydracanvas {
|
|
position: fixed; /* ignore margins */
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%; /* fill screen */
|
|
height: 100%;
|
|
background-size: cover;
|
|
overflow-y: hidden;
|
|
z-index: -5; /* place behind everything else */
|
|
display: block;
|
|
}
|
|
|
|
.fullscreencanvas {
|
|
position: fixed; /* ignore margins */
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%; /* fill screen */
|
|
height: 100%;
|
|
background-size: cover;
|
|
overflow-y: hidden;
|
|
z-index: -1; /* place behind everything else */
|
|
display: block;
|
|
}
|
|
|
|
details br {
|
|
display: none;
|
|
}
|
|
|
|
.app {
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.cm-editor {
|
|
width: 100%;
|
|
height: 92vh;
|
|
max-height: 100vh;
|
|
z-index: 0;
|
|
}
|
|
|
|
.cm-scroller {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bar_button {
|
|
@apply mx-2 px-2 py-2 flex inline rounded-lg bg-background text-foreground hover:bg-foreground hover:text-background
|
|
}
|
|
|
|
.side_button {
|
|
@apply px-2 py-2 bg-background text-foreground rounded-lg hover:bg-foreground hover:text-background
|
|
}
|
|
|
|
.subtitle {
|
|
@apply bg-selection_foreground text-sm lg:text-xl border-b py-4 text-foreground
|
|
}
|
|
|
|
.tab_panel {
|
|
@apply inline-block lg:px-4 px-8 py-1 text-brightwhite
|
|
}
|
|
|
|
.doc_header {
|
|
@apply pl-2 pr-2 lg:text-xl text-sm py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
|
}
|
|
|
|
.doc_subheader {
|
|
@apply pl-2 pr-2 lg:text-xl text-sm ml-6 py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<body id="all" class="z-0 overflow-y-hidden bg-black">
|
|
<!-- The header is hidden on smaller devices -->
|
|
<header class="py-0 block">
|
|
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background">
|
|
<a class="flex title-font font-medium items-center mb-0">
|
|
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/>
|
|
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-brightwhite placeholder-brightwhite" id="renamer" type="text" placeholder="Topos">
|
|
</a>
|
|
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
|
|
<!-- Play Button -->
|
|
<a title="Play button (Ctrl+P)" id="play-button-1" class="bar_button">
|
|
<svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
|
|
<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
|
|
</svg>
|
|
<svg id="pause-icon" class="hidden w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
|
|
</svg>
|
|
<p id="play-label" class="hidden lg:block text-xl pl-2 inline-block">Play</p>
|
|
</a>
|
|
|
|
<!-- Stop button -->
|
|
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="bar_button">
|
|
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
|
|
<rect x="6.5" y="6.5" width="7" height="7" fill="selection_background" rx="1" ry="1"/>
|
|
</svg>
|
|
<p class="hidden lg:block text-xl pl-2 inline-block">Stop</p>
|
|
</a>
|
|
|
|
<!-- Eval button -->
|
|
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="bar_button">
|
|
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
|
|
</svg>
|
|
<p class="hidden lg:block text-xl pl-2 inline-block">Eval</p>
|
|
</a>
|
|
|
|
<a title="Clear button" id="clear-button-1" class="bar_button">
|
|
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
|
<path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
|
|
</svg>
|
|
<p class="hidden lg:block text-xl pl-2 inline-block">Clear</p>
|
|
</a>
|
|
|
|
<a title="Share button" id="share-button" class="bar_button">
|
|
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
|
|
</svg>
|
|
<p class="hidden lg:block text-xl pl-2 inline-block">Share</p>
|
|
</a>
|
|
|
|
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="bar_button">
|
|
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
|
</svg>
|
|
<p class="hidden lg:block text-xl pl-2 inline-block">Docs</p>
|
|
</a>
|
|
|
|
</nav>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="documentation" class="hidden">
|
|
<div id="documentation-page" class="flex flex-row transparent">
|
|
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-background">
|
|
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-background">
|
|
<details class="" open>
|
|
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
|
|
<div class="flex flex-col">
|
|
<p rel="noopener noreferrer" id="docs_introduction" class="doc_header">Welcome </p>
|
|
<p rel="noopener noreferrer" id="docs_atelier" class="doc_header">Atelier (FR)</p>
|
|
<p rel="noopener noreferrer" id="docs_interface" class="doc_header">Interface</p>
|
|
<p rel="noopener noreferrer" id="docs_interaction" class="doc_header">Interaction</p>
|
|
<p rel="noopener noreferrer" id="docs_shortcuts" class="doc_header">Keyboard</p>
|
|
<p rel="noopener noreferrer" id="docs_mouse" class="doc_header">Mouse</p>
|
|
<p rel="noopener noreferrer" id="docs_code" class="doc_header">Coding</p>
|
|
</div>
|
|
</details>
|
|
<details class="space-y-2" open>
|
|
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
|
|
<div class="flex flex-col">
|
|
<!-- Time -->
|
|
<details class="space-y-2">
|
|
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Time</summary>
|
|
<div class="flex flex-col">
|
|
<p rel="noopener noreferrer" id="docs_time" class="doc_subheader">Dealing with time</p>
|
|
<p rel="noopener noreferrer" id="docs_linear" class="doc_subheader">Time & Transport</p>
|
|
<p rel="noopener noreferrer" id="docs_cyclic" class="doc_subheader">Time & Cycles</p>
|
|
<p rel="noopener noreferrer" id="docs_longform" class="doc_subheader">Time & Structure</p>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Audio Engine -->
|
|
<details class="space-y-2">
|
|
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Audio Engine</summary>
|
|
<div class="flex flex-col">
|
|
<p rel="noopener noreferrer" id="docs_audio_basics" class="doc_subheader">Playing a sound</p>
|
|
<p rel="noopener noreferrer" id="docs_amplitude" class="doc_subheader">Amplitude</p>
|
|
<p rel="noopener noreferrer" id="docs_sampler" class="doc_subheader">Sampler</p>
|
|
<p rel="noopener noreferrer" id="docs_synths" class="doc_subheader">Synths</p>
|
|
<p rel="noopener noreferrer" id="docs_filters" class="doc_subheader">Filters</p>
|
|
<p rel="noopener noreferrer" id="docs_effects" class="doc_subheader">Effects</p>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Samples -->
|
|
<details class="space-y-2">
|
|
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header ">Samples</summary>
|
|
<div class="flex flex-col">
|
|
<p rel="noopener noreferrer" id="docs_sample_list" class="doc_subheader">List of samples</p>
|
|
<p rel="noopener noreferrer" id="docs_loading_samples" class="doc_subheader">External samples</p>
|
|
</div>
|
|
</details>
|
|
<p rel="noopener noreferrer" id="docs_midi" class="doc_header">MIDI</p>
|
|
<p rel="noopener noreferrer" id="docs_osc" class="doc_header">OSC</p>
|
|
</div>
|
|
</details>
|
|
<details class="space-y-2" open>
|
|
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
|
|
<div class="flex flex-col">
|
|
|
|
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg doc_header">Array patterns</p>
|
|
<!-- Ziffers -->
|
|
<details class="space-y-2">
|
|
<summary class="doc_header">Ziffers</summary>
|
|
<div class="flex flex-col">
|
|
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="doc_subheader">Basics</p>
|
|
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="doc_subheader">Scales</p>
|
|
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="doc_subheader">Rhythm</p>
|
|
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="doc_subheader">Algorithmic</p>
|
|
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="doc_subheader">Tonnetz</p>
|
|
<p rel="noopener noreferrer" id="docs_ziffers_syncing" class="doc_subheader">Syncing</p>
|
|
</div>
|
|
</details>
|
|
<p rel="noopener noreferrer" id="docs_variables" class="doc_header">Global Variables</p>
|
|
<p rel="noopener noreferrer" id="docs_lfos" class="doc_header">Low Freq Oscs.</p>
|
|
<p rel="noopener noreferrer" id="docs_probabilities" class="doc_header">Probabilities</p>
|
|
<p rel="noopener noreferrer" id="docs_chaining" class="doc_header">Chaining</p>
|
|
<p rel="noopener noreferrer" id="docs_functions" class="doc_header">Functions</p>
|
|
<p rel="noopener noreferrer" id="docs_generators" class="doc_header">Generators</p>
|
|
</div>
|
|
</details>
|
|
<details class="space-y-2" open>
|
|
<summary class="font-semibold lg:text-xl doc_header">More</summary>
|
|
<div class="flex flex-col">
|
|
<a rel="noopener noreferrer" id="docs_synchronisation" class="doc_subheader">Synchronisation</a>
|
|
<a rel="noopener noreferrer" id="docs_oscilloscope" class="doc_subheader">Oscilloscope</a>
|
|
<a rel="noopener noreferrer" id="docs_visualization" class="doc_header">Visualization</a>
|
|
<a rel="noopener noreferrer" id="docs_bonus" class="doc_header">Bonus/Trivia</a>
|
|
<a rel="noopener noreferrer" id="docs_about" class="doc_header">About Topos</a>
|
|
</div>
|
|
</details>
|
|
<details class="" open>
|
|
<summary class="font-semibold lg:text-xl text-orange-300">Community</summary>
|
|
<form action="https://github.com/Bubobubobubobubo/topos">
|
|
<input rel="noopener noreferrer" id="github_link" class="doc_header" type="submit" value="GitHub" />
|
|
</form>
|
|
<form action="https://discord.gg/6T67DqBNNT">
|
|
<input rel="noopener noreferrer" id="discord_link" class="doc_header" type="submit" value="Discord" />
|
|
</form>
|
|
<form action="https://ko-fi.com/raphaelbubo">
|
|
<input rel="noopener noreferrer" id="support_link" class="doc_header" type="submit" value="Support" />
|
|
</form>
|
|
</details>
|
|
</nav>
|
|
</aside>
|
|
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 transparent"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="app">
|
|
<!-- This modal is used for switching between buffers -->
|
|
<div id="modal-buffers" class="invisible flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
|
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
|
|
<p class="text-semibold lg:text-2xl text-sm pb-4 text-selection_foreground">Known universes</p>
|
|
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
|
|
<div id="disclaimer" class="pb-4">
|
|
<form id="universe-creator">
|
|
<label for="search" class="mb-2 text-sm font-medium sr-only ">Search</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
|
|
</svg>
|
|
</div>
|
|
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg neutral-800 " placeholder="Buffer..." required>
|
|
<button id="load-universe-button" class="bg-background text-selection_background absolute right-2.5 bottom-2.5 focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
|
|
</div>
|
|
</form>
|
|
<div class="mt-2 flex space-x-6 border-t rounded-b border-spacing-y-4">
|
|
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-background text-selection_background">Close</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- This modal is used for settings -->
|
|
<div id="modal-settings" class="invisible flex
|
|
absolute lg:justify-center lg:items-center
|
|
lg:overflow-y-auto lg:overflow-x-auto
|
|
overflow-y-scroll owerflow-x-scroll
|
|
md:top-0 md:bottom-0 h-screen w-full"
|
|
>
|
|
<div class="grid w-full grid-col-3">
|
|
<div class="white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8 bg-foreground">
|
|
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg justify-center lg:text-center lg:pl-0 pl-8 mx-4 subtitle">Topos Application Settings</h1>
|
|
<div class="flex lg:flex-row flex-col mr-4 ml-4">
|
|
<!-- Font Size Selection -->
|
|
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
|
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4 text-selection_background">Theme Settings</p>
|
|
<div class="mb-6 mx-4 font-semibold">
|
|
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm text-foreground">Size:</label>
|
|
<input type="text" id="font-size-input" type="number" class="border
|
|
text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 focus:border-blue-500">
|
|
</div>
|
|
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Font:</label>
|
|
<select id="font-family" class=" ml-4 border mb-2
|
|
text-sm rounded-lg focus:border-blue-500 block p-2.5">
|
|
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
|
<option value="Jet Brains">Jet Brains</option>
|
|
<option value="Courier">Courier</option>
|
|
<option value="Comic Mono">Comic Mono</option>
|
|
<option value="jgs5">JGS 5</option>
|
|
<option value="jgs7">JGS 7</option>
|
|
<option value="jgs9">JGS 9</option>
|
|
<option value="jgs_vecto">JGS Vect</option>
|
|
<option value="Steps Mono">Steps Mono</option>
|
|
<option value="Steps Mono Thin">Steps Mono Thin</option>
|
|
</select>
|
|
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
|
<label for="theme" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Theme:</label>
|
|
<select id="theme-selector" class="ml-4 border mb-2
|
|
text-sm rounded-lg block p-2.5">
|
|
</select>
|
|
<div id="theme-previewer"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Editor mode selection -->
|
|
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
|
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Editor options</p>
|
|
<!-- Checkboxes -->
|
|
<div class="pr-4">
|
|
<div class="flex items-center mb-4 ml-5">
|
|
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
|
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-selection_background">Vim Mode</label>
|
|
</div>
|
|
<div class="flex items-center mb-4 ml-5">
|
|
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Line Numbers</label>
|
|
</div>
|
|
<div class="flex items-center mb-4 ml-5">
|
|
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Time Position</label>
|
|
</div>
|
|
<div class="flex items-center mb-4 ml-5">
|
|
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Hovering Tips</label>
|
|
</div>
|
|
<div class="flex items-center mb-4 ml-5">
|
|
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Completions</label>
|
|
</div>
|
|
<!--
|
|
<div class="flex items-center mb-4 ml-5">
|
|
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
|
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Load Demo Song</label>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
|
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">File Management</p>
|
|
<div class="flex flex-col space-y-2 pb-2">
|
|
<button id="download-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
|
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
|
<span class="text-selection_foreground">Download universes</span>
|
|
</button>
|
|
<button id="upload-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
|
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
|
<span class="text-selection_foreground">Upload universes</span>
|
|
</button>
|
|
<button id="destroy-universes" class="bg-brightwhite font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
|
</svg>
|
|
<span class="text-selection_foreground">Destroy universes</span>
|
|
</button>
|
|
<!-- Upload audio samples -->
|
|
<p class="font-bold lg:text-xl text-sm ml-4 pb-2 pt-2 underline underline-offset-4 text-selection_background">Audio samples</p>
|
|
|
|
<label class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
|
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
|
<input id="upload-samples" type="file" class="hidden" accept="file" webkitdirectory directory multiple>
|
|
<span id="sample-indicator" class="text-selection_foreground">Import samples</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Midi settings -->
|
|
<div id="midi-settings-container" class="rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4 bg-color bg-selection_foreground">
|
|
<div class="lg:flex lg:flex-row w-fit">
|
|
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">MIDI I/O Settings</p>
|
|
<div class="flex items-center mb-4 ml-6">
|
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">MIDI Clock: </label>
|
|
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
|
<option value="-1">Internal</option>
|
|
</select>
|
|
</div>
|
|
<div class="lg:flex block items-center mb-4 ml-6">
|
|
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">Clock PPQN: </label>
|
|
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
|
<option value="24">24</option>
|
|
<option value="48">48</option>
|
|
</select>
|
|
</div>
|
|
<div class="lg:flex block items-center mb-4 ml-6">
|
|
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Send MIDI Clock</label>
|
|
</div>
|
|
</div>
|
|
<div class="lg:flex block flex-row">
|
|
<div class="flex items-center mb-4 ml-6">
|
|
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">MIDI input: </label>
|
|
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600 focus:ring-2">
|
|
<option value="-1">None</option>
|
|
</select>
|
|
</div>
|
|
<div class="lg:flex block items-center mb-4 ml-6">
|
|
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600">
|
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Route channels to scripts</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio nudge slider -->
|
|
<div id="midi-settings-container" class="rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2 bg-selection_foreground">
|
|
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Audio/Event Nudging</p> <div class="flex flex-column pb-2">
|
|
<p class="pt-0.5 ml-4 text-foreground">Clock:</p>
|
|
<input
|
|
type="range" id="audio_nudge"
|
|
name="audiorangeInput"
|
|
min="-200" max="200"
|
|
value="0"
|
|
class="w-full ml-4 text-red"
|
|
oninput="nudgenumber.value=audio_nudge.value"
|
|
>
|
|
<output
|
|
name="nudgenumber"
|
|
id="nudgenumber"
|
|
for="audiorangeInput"
|
|
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
|
>0</output>
|
|
</div>
|
|
|
|
<div class="flex flex-column">
|
|
|
|
<p class="pt-0.5 ml-4 text-foreground">Audio:</p>
|
|
<input
|
|
type="range" id="dough_nudge"
|
|
name="doughrangeInput"
|
|
min="0" max="100"
|
|
value="0"
|
|
class="w-full ml-4 text-foreground"
|
|
oninput="doughnumber.value=dough_nudge.value"
|
|
>
|
|
<output
|
|
name="doughnumber"
|
|
id="doughnumber"
|
|
for="doughrangeInput"
|
|
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
|
>0</output>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex space-x-6 border-t rounded-b mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
|
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
|
|
hover:bg-background bg-background mt-4 mb-4 focus:ring-4
|
|
font-medium rounded-lg text-sm px-5 py-2.5 text-center text-selection_background">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row max-h-fit">
|
|
<!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
|
|
<aside id="sidebar" class="
|
|
flex flex-col items-center w-14
|
|
h-screen py-2 border-r
|
|
rtl:border-l max-h-fit
|
|
rtl:border-r-0 bg-background
|
|
border-neutral-700 border-none"
|
|
>
|
|
<nav class="flex flex-col space-y-6">
|
|
<a title="Local Scripts (Ctrl + L)" id="local-button" class="side_button">
|
|
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
|
<path d="M18 5H0v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5Zm-7.258-2L9.092.8a2.009 2.009 0 0 0-1.6-.8H2.049a2 2 0 0 0-2 2v1h10.693Z"/>
|
|
</svg>
|
|
</svg>
|
|
</a>
|
|
|
|
<a title="Global Script (Ctrl + G)" id="global-button" class="side_button">
|
|
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
|
<path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z"/>
|
|
<path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="side_button">
|
|
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<a title="Project notes (Ctrl + N)" id="note-button" class="side_button">
|
|
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<a title="Application Settings" id="settings-button" class="side_button">
|
|
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
|
|
</svg>
|
|
</a>
|
|
|
|
|
|
</aside>
|
|
|
|
<!-- Tabs for local files -->
|
|
<div class="min-w-screen flex grow flex-col">
|
|
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center bg-background space-x-1 lg:space-x-8">
|
|
<li class="pl-5">
|
|
<a title="Local Script 1 (F1)" id="tab-1" class="tab_panel">1</a>
|
|
</li>
|
|
<li class="">
|
|
<a title="Local Script 2 (F2)" id="tab-2" class="tab_panel">2</a>
|
|
</li>
|
|
<li class="">
|
|
<a title="Local Script 3 (F3)" id="tab-3" class="tab_panel">3</a>
|
|
</li>
|
|
<li class="">
|
|
<a title="Local Script 4 (F4)" id="tab-4" class="tab_panel">4</a>
|
|
</li>
|
|
<li class="">
|
|
<a title="Local Script 5 (F5)" id="tab-5" class="tab_panel">5</a>
|
|
</li>
|
|
<li class="">
|
|
<a title="Local Script 6 (F6)" id="tab-6" class="tab_panel">6</a>
|
|
</li>
|
|
<li class="">
|
|
<a title="Local Script 7 (F7)" id="tab-7" class="tab_panel">7</a>
|
|
</li>
|
|
<li class="">
|
|
<a title="Local Script 8 (F8)" id="tab-8" class="tab_panel">8</a>
|
|
</li>
|
|
<li class="">
|
|
<a title="Local Script 9 (F9)" id="tab-9" class="tab_panel">9</a>
|
|
</li>
|
|
</ul>
|
|
<!-- Here comes the editor itself -->
|
|
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
|
|
<canvas id="scope" class="fullscreencanvas"></canvas>
|
|
<canvas id="feedback" class="fullscreencanvas"></canvas>
|
|
<canvas id="drawings" class="fullscreencanvas"></canvas>
|
|
<canvas id="hydra-bg" class="hydracanvas"></canvas>
|
|
</div>
|
|
<p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
|
|
<template id="ui-known-universe-item-template">
|
|
<!-- A known universe button in "opening" interface -->
|
|
<li class="py-2 px-4 flex justify-between text-brightwhite hover:bg-selection_background hover:text-selection_foreground">
|
|
<button class="universe-name load-universe" title="Load this universe">Universe Name</button>
|
|
<button class="delete-universe" title="Delete this universe">🗑</button>
|
|
</li>
|
|
</template>
|
|
</body>
|
|
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold cursor-textpointer-events-none select-none text-sm absolute bottom-2 right-2 bg-foreground text-background"></p>
|
|
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold cursor-textpointer-events-none select-none text-sm absolute right-2 bottom-12 bg-foreground text-background">/////// Fill ///////</p>
|
|
</html>
|