BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mockup of the settings menu

Browse Source
This commit is contained in:
Raphaël Forment
2023-07-30 16:01:13 +02:00
parent fd20db2dc8
commit e785e0ae0a
3 changed files with 69 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
README.md
View File

@ -1,14 +1,14 @@
# Topos: a Teletype inspired algorithmic sequencer
Monome Teletype inspired algorithmic sequencer for live coding in the browser. This is a prototype of an (hopefully) soon to be instrument that can generate sound through WebAudio and or MIDI. This sequencer works by letting the user enter short JS code snippets that are evaluated in a _sandboxed_ environment. An API is providing tools to manipulate time, instruments and data.
[Monome Teletype](https://monome.org/docs/teletype/) inspired algorithmic sequencer for live coding in the browser. This is a prototype of an (hopefully) soon to be instrument that can generate sound through WebAudio and or MIDI. This sequencer works by letting the user enter short JS code snippets that are evaluated in a _sandboxed_ environment. An API is providing tools to manipulate time, instruments and data.
Just like the Teletype, this interface works by using the following hierarchy:
- **the global buffer** is used to sequence and activate scripts and major events.
- **the local buffers** are describing some process taking place when activated.
- **the global buffer** is used to sequence and activate scripts and control major global events.
- **the local buffers** are describing some musical processes taking place when activated.
- **the init buffer** is used to initialise the state of the universe.
A _universe_ is a set of files (global, init and locals) representing a musical composition, a song, a piece. The user can create as many universes as they want and switch between them at any time. The application is saving the state of the universe in the browser's local storage. To switch between universes, use the `Ctrl+B` keybinding that will open a modal allowing you to do so. The clear button will delete restore the current universe to a blank slate.
A _universe_ is a set of files (global, init and locals) representing a musical composition, a song, a piece. The user can create as many universes as they want and switch between them at any time. The application is saving the state of the universe in the browser's local storage. To switch between universes, use the `Ctrl+B` keybinding that will open a modal. The clear button will delete restore the current universe to a blank slate.
The application is a based on CodeMirror (for the editor), Tailwind (CSS) and Vite (bundler). The code is written in TypeScript when possible.
@ -28,60 +28,26 @@ To run the application:
- `Ctrl+I`: initialisation buffer.
- `Ctrl+L`: local buffers.
- `F1...F9`: switch to one of the 9 local buffers.
- `Ctrl` + `F1...F9`: manual trigger of a local buffer.
- `Ctrl+B`: switch between universes.
- `Ctrl+Shift+V`: toggle Vim editor mode.
To evaluate code, press `Ctrl+Enter` (no visible animation). This is true for every buffer. To stop a buffer from playing, comment your code or delete it.
# Small tutorial for devs and people passing by :)
The global buffer is evaluated at a very high rate, typically for every pulse of the clock. To play your first note, it is best to pick a specific pulse or beat to play on and stick to it. In the global buffer (`Ctrl+G`), write:
```js
if (mod(12)) beep(400, 0.5);
```
Press `Ctrl+Enter` to submit that code for evaluation. If successful, the playback will start immediately and this code will loop on every tick. You can trigger one of the local scripts by using the `script(x)` function that also accepts multiple arguments: (_e.g._ `script(1, 4)`).
To get a glimpse of the intended workflow, let's create a simple musical piece. In your global buffer write:
```js
if (mod(12)) {
if Math.random() > 0.5 {
script(1);
} else {
script(2);
}
}
```
This code will trigger either the first or the second local buffer on every 12th pulse. Now, let's write some code in the first local buffer (`Ctrl+L` and/or `F1`):
```js
// Local file n°1
if (sometimes()) beep(400, 0.5);
```
```js
// Local file n°2
if (sometimes()) beep(pick(800, 1200, 1600), 0.5);
```
Once evaluated, a small tune will be playing.
# TODO
## Scheduler
- [ ] Stable / robust clock and script/event scheduler.
- [ ] Add a way to set the clock's tempo.
- [ ] Add a way to set the clock's time signature.
- [x] Add a way to set the clock's tempo.
- [x] Add a way to set the clock's time signature.
- [ ] Add a way to set the clock's swing.
- [ ] MIDI Clock In/Out support.
- [ ] Performance optimisations and metrics.
- [ ] Add a way to save the current universe as a file.
- [ ] Add a way to load a universe from a file.
- [ ] Add MIDI support.
- [x] Add MIDI support.
- This is only partial, more work needed to support more messages.
## UI
@ -91,6 +57,7 @@ Once evaluated, a small tune will be playing.
- [ ] Vim mode.
- [ ] Repair the current layout (aside + CodeMirror)
- [ ] Optimizations for smaller screens and mobile devices.
- [ ] Add a new "note" buffer for each universe (MarkDown)
## Web Audio

52
index.html
View File

@ -81,14 +81,60 @@
</div>
</form>
</div>
</div>
</div>
</div>
<!-- This modal is used for settings -->
<div id="modal-settings" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div class="flex flex flex-col w-full">
<div class="bg-white rounded-lg mx-48 my-48 space-y-8 px-8">
<h1 class="mt-12 font-semibold rounded bg-gray-800 justify-center text-center text-white mx-4 text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
<!-- Font Size Selection -->
<div class="space-y-6 w-auto min-w-screen px-4">
<div id="font-size-selector" class="flex flex-row space-x-4 rounded-lg">
<label for="default-range" class="text-sm font-medium text-black w-1/5">Font Size</label>
<input id="default-range" type="range" step=1 value="22" class="w-4/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
<!-- Font Family Selection -->
<div class="space-y-6 w-auto min-w-screen px-4">
</div>
<!-- Editor mode selection -->
<div class="flex flex-row space-x-4 justify-center px-4">
<div class="flex items-center pl-4 border border-gray-200 rounded dark:border-gray-700 w-full">
<input id="bordered-radio-1" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Editor Mode</label>
</div>
<div class="flex items-center pl-4 border border-gray-200 rounded dark:border-gray-700 w-full">
<input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Editor Mode</label>
</div>
</div>
<!-- Information card -->
<div class="flex lg:flex-row flex-col w-auto min-w-screen px-4 pb-8 space-x-8">
<a class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">GitHub</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Get involved in the dev process and or file an issue for a broken feature</p>
</a>
<a class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Discord</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Join the community on the official Topos/Sardine Discord Server.</p>
</a>
<a class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-800 hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Website</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Documentation, videos and more on the official website.</p>
</a>
</div>
</div>
</div>
</div>
<!-- This modal pops up when the page is first loaded and then disappears forever -->
<div id="modal-container" class="motion-safe:animate-pulse flex min-h-screen flex flex-col">
<div id="modal" class="bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="start-button" class="bg-white px-16 py-14 rounded-md text-center">
<h1 class="text-xl mb-4 font-bold text-white rounded bg-black">Topos Prototype</h1>
<h1 class="text-xl mb-4 font-bold text-white rounded bg-gray-800 py-4">Topos Prototype</h1>
<div id="social-links" class="pb-4 font-bold flex flex-row space-x-4 justify-center">
<a href="https://google.fr">Website</a>
<a href="https://google.fr">Discord</a>
@ -153,7 +199,7 @@
</svg>
</a>
<a id="settings-button" data-modal-show="settingsModal" class="p-2 text-gray-700 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:bg-gray-800 bg-gray-100">
<a id="settings-button" class="p-2 text-gray-700 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:bg-gray-800 bg-gray-100">
<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" />

13
src/main.ts
View File

@ -74,6 +74,9 @@ export class Editor {
init_button: HTMLButtonElement = document.getElementById(
"init-button"
) as HTMLButtonElement;
settings_button: HTMLButtonElement = document.getElementById(
"settings-button"
) as HTMLButtonElement;
universe_viewer: HTMLDivElement = document.getElementById(
"universe-viewer"
) as HTMLDivElement;
@ -85,9 +88,6 @@ export class Editor {
buffer_search: HTMLInputElement = document.getElementById(
"buffer-search"
) as HTMLInputElement;
settings_modal: HTMLDivElement = document.getElementById(
"modal-settings"
) as HTMLDivElement;
// Local script tabs
local_script_tabs: HTMLDivElement = document.getElementById(
@ -294,6 +294,13 @@ export class Editor {
this.changeModeFromInterface("init")
);
this.settings_button.addEventListener("click", () => {
let modal_settings = document.getElementById('modal-settings');
let editor = document.getElementById('editor');
modal_settings?.classList.remove('invisible')
editor?.classList.add('invisible')
})
this.buffer_search.addEventListener("keydown", (event) => {
this.changeModeFromInterface("local");
if (event.key === "Enter") {