Design and visualize microtonal scales and play them in your web browser

Overview

scale-workshop

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run build
npm run test:e2e # or `npm run test:e2e:ci` for headless testing

Lint with ESLint

npm run lint
Comments
  • VSCode extensions were renamed; update .vscode/extension.json …

    VSCode extensions were renamed; update .vscode/extension.json …

    …accordingly.

    I was also wondering if vscode-typescript-vue-plugin should be removed, since it's deprecated in favor of take-over mode, but the extension description page has a link to instructions for take-over mode, so I guess it's still useful.

    opened by forrcaho 7
  • Computer keyboard synth doesn't play after adjusting any slider on 'Synth' tab

    Computer keyboard synth doesn't play after adjusting any slider on 'Synth' tab

    When I first bring up scale-workshop in my browser (Firefox on Win 11), my computer keyboard keys play notes. (By default, they're all 440 Hz, but that's not the issue here). I switch to the Synth tab in the top menu, and they still play notes.

    If I adjust any of the sliders on the Synth page, my keyboard keys no longer create notes. When I switch to any other menu tab (e.g. Virtual Keyboard) the notes from my keyboard will start working again, with the new settings. I can also switch from Synth to any other tab and back before I try my keyboard again, and this also fixes the issue.

    Only touching the sliders seem to reliably produce the error. There is similar behavior when I change the waveform, but it seems to play a little bit before stopping (which can then be fixed in the same way, by switching tabs). Changing the other non-slider settings seem to cause the problems sometimes, but not reliably.

    I have this problem both with code from main running locally, and the online versions at https://sevish.com/scaleworkshop/synth?version=2.0.0 and https://scaleworkshop.lumipakkanen.com/ .

    I also checked Chrome on Win 11, and it has the same issue.

    opened by forrcaho 4
  • Deal with lack of og:image support in Vue

    Deal with lack of og:image support in Vue

    ~~Add a special command to copy/modify the relevant files or add instructions in the README on how to do that manually.~~ Upload the open graph image to sevish.com and hard code it in this repo's index.html.

    opened by frostburn 3
  • Configure MIDI velocity on/off and white only mode

    Configure MIDI velocity on/off and white only mode

    Add the option to average two white keys when playing a black key in white mode Pass and distribute unmanipulated MIDI messages from IN to OUT.

    refs #73 #172

    opened by frostburn 3
  • Implement temperament mappings and modals

    Implement temperament mappings and modals

    Add temperaments dependency Implement a prime mapping class suitable for tempering Implement Rank 1 scale creation modal Implement Rank 2 scale creation modal with support for temperaments built from vals and commas Implement tempering modal for scale modification

    opened by frostburn 3
  • import .scl not working when string after pitch value exists

    import .scl not working when string after pitch value exists

    https://huygens-fokker.org/scala/scl_format.html states "Anything after a valid pitch value should be ignored." (Ignored for setting up the scale itself). In practical use, people use this rule to put the name of the pitch after the pitch value. In the specifications website of the scl format (see link above), some valid examples are mentioned: 100.0 C# 5/4 E\

    Some software even import these strings into a pitch name column, for example Lingot.

    Unfortunately, the sevish scale-workshop rejects scl files containing strings after the pitch value during import, even though these files are valid according to the format specifications.

    opened by kingemir 2
  • Assign key colors on MOS scale creation

    Assign key colors on MOS scale creation

    Update moment-of-symmetry-dependecy. Add the option to assign parent MOS to white keys or to expand the scale to include new daughter MOS notes on black keys.

    opened by frostburn 2
  • Add support for tempering in huge subgroups

    Add support for tempering in huge subgroups

    Userminusone — 12/24/2022 5:39 AM

    So it turns out ScaleWorkshop tempering via commas just... fails with high prime limits?

    Is this a bug or am I not supposed to go up to the 31 limit with tempering?

    This is related to: https://github.com/xenharmonic-devs/temperaments/issues/30

    enhancement 
    opened by frostburn 2
  • Touching the same key twice leaves yellow marks on virtual keyboard

    Touching the same key twice leaves yellow marks on virtual keyboard

    To reproduce:

    1. Touch a key on the virtual keyboard
    2. Drag finger away from the key
    3. Touch the same key with another finger
    4. Release both fingers

    Result: The note keeps ringing and a yellow mark is left on the keyboard

    Expected result: The note stops ringing with no residue.

    bug 
    opened by frostburn 0
  • Difference in Monologue (mnlgtuns) tuning export

    Difference in Monologue (mnlgtuns) tuning export

    The mnlgtuns file that I exported from SW2 is tuned differently to the sclkbm and tun files.

    22ed2 pentachordal decatonic LsssLsssss C261.zip

    https://sevish.com/scaleworkshop/?n=22ed2%20pentachordal%20decatonic%20%28LsssLsssss%29%20C261&l=3Bm_5Bm_7Bm_9Bm_cBm_eBm_gBm_iBm_kBm_mBm&f=79.miqdhkcvh&m=1o&version=2.0.1

    Exporting mnlgtuns from SW1 works as expected:

    https://sevish.com/scaleworkshop1/?name=22ed2%20pentachordal%20decatonic%20(LsssLsssss)%20C261&data=3%5C22%0A5%5C22%0A7%5C22%0A9%5C22%0A12%5C22%0A14%5C22%0A16%5C22%0A18%5C22%0A20%5C22%0A22%5C22&freq=261.625565&midi=60&vert=5&horiz=1&colors=white%20black%20white%20white%20black%20white%20black%20white%20white%20black%20white%20black&waveform=semisine&ampenv=organ

    bug 
    opened by SeanArchibald 1
Owner
Xenharmonic Developers
Xenharmonic Developers
⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Haojen 84 Dec 26, 2022
CSS Transform Playground. Online tool to visualize 2D & 3D CSS3 Transform functions.

css-transform › css-transform.moro.es CSS3 Transform Functions Playground. Demo UI built with Vue, Gulp and LESS. Deployment via Netlify Development —

Jorge Moreno 132 Dec 7, 2022
Matteo Bruni 4.6k Dec 30, 2022
Ft transcendence - A single-page website to play pong, with a chat and an account system implemented

Welcome to my ft_transcendence repository ?? ⭐️ The aim of this project is to bu

Alexandre de Garrigues 0 Jan 11, 2022
A highly dynamic vue stars rating component, similar to google play stars rating

vue-dynamic-star-rating A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play) For a walkthrough blogpost about ho

Yonatan Doron 99 Dec 20, 2022
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Kevin Faveri 203 Dec 12, 2022
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Kevin Faveri 203 Dec 12, 2022
Atomic-design - Studies carried out through Bootcamp Fullstack Cataline on Atomic Design and componentization in Vue

Atomic Design Estudos realizados através do Bootcamp Fullstack Cataline sobre At

Daniel Antunes 0 Jan 12, 2022
Build on top of nuxt, boostrap vue, and design inspire from Education Courses UI Design

education-courses-ui-design Build on top of nuxt, boostrap vue, and design inspire from Education Courses UI Design Build Setup # install dependencies

silvesterwali 3 Jun 7, 2022
A platform collecting facts --data and evidence-- and presenting them AS IT IS in the useful way. No prejudice!

FactFinder.app @factfinderbot " Only Facts We Trust, No Prejudice! " Live (Release): https://factfinder.app Preview (Dev): https://fact-finder.vercel.

Kao.Geek 10 Aug 30, 2021
VueJS project for puling countries from rest api and display them

Live Demo https://shafeequeom.github.io/vue-world/ Run Project Locally 1. git cl

Shafeeque O M 1 Oct 25, 2022
Fast and lightweight library helps you to update js objects without mutating them

immhelper Fast and lightweight library helps you to update js objects without mutating them Install with npm npm install immhelper --save Features Ex

null 17 Apr 25, 2022
One component to link them all 🔗

VueLink - One component to link them all! Lightweight wrapper component for external and vue-router links. ?? Features Tiny functional component SSR-s

Developmint GbR 65 Aug 31, 2022
Scope IDs to an element by rewriting them to be globally unique

element-scope-ids - scope IDs to an element by rewriting them to be globally unique

null 0 Nov 2, 2021
A chrome extension for automating your browser by connecting blocks

Automa An extension for automating your browser by connecting blocks. From auto-fill forms, doing a repetitive task, taking a screenshot, to scraping

Ahmad Kholid 6.1k Jan 9, 2023
Vue live real-time avatar from your webcam in the browser.

Vitar Vue live real-time avatar from your webcam in the browser. Get Started Npm $ npm install @cloudgeek/vitar --save Yarn $ yarn add @cloudgeek/vita

Alex Liu 23 Dec 27, 2022
Add material design ripple effect to your Vue project.

vue-material-design-ripple Add material design ripple effect to your Vue project. Why another ripple plugin? Most of current plugins don't work exactl

null 31 Dec 15, 2022
One simple import to get component information for your design system

vue-metainfo-loader This loader extracts from SFC: Component description Component name Component props name description type default validator requir

Max Sosnov 4 Mar 18, 2022
Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript.

Vue Fixed Header Simple and cross-browser friendly fixed header component for Vue.js. Install yarn add vue-fixed-header Usage Use in Single File Compo

Takuma HANATANI 166 Nov 14, 2022