TheoryOfNekomata
/
piano-midi-monitor
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Add theme support 

Add custom themes and colors for keys.
master
Allan Crisostomo 4 years ago
parent
bca8bde51b
commit
7e156d024f
7 changed files with 115 additions and 21 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -1
      public/index.html
  2. +81
    -18
      src/electron.ts
  3. +3
    -0
      src/index.tsx
  4. +4
    -1
      src/services/Config.ts
  5. +7
    -0
      src/services/colors.json
  6. +12
    -1
      src/services/messages.json
  7. +3
    -0
      src/services/themes.json

+ 5
- 1
public/index.html View File

@@ -1,5 +1,9 @@
<!DOCTYPE html>
<html lang="en-PH" style="--size-close-button: 2rem;">
<html
lang="en-PH"
style="
--size-close-button: 2rem;
">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />


+ 81
- 18
src/electron.ts View File

@@ -1,10 +1,11 @@
import { app, BrowserWindow, Menu, ipcMain, } from 'electron'
import path from 'path'
import fs from 'fs'
import * as yargs from 'yargs'

import SPANS from './services/spans.json'
import SCALE_FACTORS from './services/scaleFactors.json'
import THEMES from './services/themes.json'
import COLORS from './services/colors.json'
import { _ } from './services/messages'
import getKeyName from './services/getKeyName'
import getNaturalKeyCount from './services/getNaturalKeyCount'
@@ -21,6 +22,9 @@ let config: Config = {
startKey: 21,
endKey: 108,
scaleFactor: 1,
colorNaturalKey: undefined,
colorAccidentalKey: undefined,
colorHighlight: undefined,
}

const createWindow = () => {
@@ -76,6 +80,20 @@ const createWindow = () => {
})
}

const reload = () => {
app.relaunch({
args: process.argv.slice(1).concat([
`--startKey=${config.startKey}`,
`--endKey=${config.endKey}`,
`--scaleFactor=${config.scaleFactor}`,
`--colorNaturalKey=${config.colorNaturalKey}`,
`--colorAccidentalKey=${config.colorAccidentalKey}`,
`--colorHighlight=${config.colorHighlight}`,
])
})
app.exit(0)
}

app
.whenReady()
.then(() => {
@@ -124,14 +142,7 @@ app
click: () => {
config.startKey = s.startKey
config.endKey = s.endKey
app.relaunch({
args: process.argv.slice(1).concat([
`--startKey=${config.startKey}`,
`--endKey=${config.endKey}`,
`--scaleFactor=${config.scaleFactor}`,
])
})
app.exit(0)
reload()
},
}))
},
@@ -143,18 +154,70 @@ app
checked: config.scaleFactor === s,
click: () => {
config.scaleFactor = s

app.relaunch({
args: process.argv.slice(1).concat([
`--startKey=${config.startKey}`,
`--endKey=${config.endKey}`,
`--scaleFactor=${config.scaleFactor}`,
])
})
app.exit(0)
reload()
},
})),
},
{
label: _('THEME'),
submenu: [
{
label: _('BASE'),
submenu: [
{
label: _('DEFAULT'),
type: 'radio',
checked: (
typeof config.colorAccidentalKey === 'undefined'
&& typeof config.colorNaturalKey === 'undefined'
),
click: () => {
config.colorNaturalKey = undefined
config.colorAccidentalKey = undefined
reload()
}
},
...Object.entries(THEMES).map(([key, [colorNaturalKey, colorAccidentalKey]]) => ({
label: _(key),
type: 'radio',
checked: (
config.colorAccidentalKey === colorAccidentalKey
&& config.colorNaturalKey === colorNaturalKey
),
click: () => {
config.colorNaturalKey = colorNaturalKey
config.colorAccidentalKey = colorAccidentalKey
reload()
}
}))
]
},
{
label: _('HIGHLIGHT'),
submenu: [
{
label: _('NONE'),
type: 'radio',
checked: typeof config.colorHighlight === 'undefined',
click: () => {
config.colorHighlight = undefined
reload()
}
},
...Object.entries(COLORS).map(([key, colorHighlight]) => ({
label: _(key),
sublabel: colorHighlight,
type: 'radio',
checked: config.colorHighlight === colorHighlight,
click: () => {
config.colorHighlight = colorHighlight
reload()
}
}))
]
}
]
}
]
},
...(


+ 3
- 0
src/index.tsx View File

@@ -6,6 +6,9 @@ const div = window.document.createElement('main')
const search = new URLSearchParams(window.location.search)
window.document.body.appendChild(div)
window.document.documentElement.style.setProperty('--size-scale-factor', search.get('scaleFactor'))
window.document.documentElement.style.setProperty('--color-natural-key', search.get('colorNaturalKey'))
window.document.documentElement.style.setProperty('--color-accidental-key', search.get('colorAccidentalKey'))
window.document.documentElement.style.setProperty('--color-channel-0', search.get('colorHighlight'))

ReactDOM.render(
<React.StrictMode>


+ 4
- 1
src/services/Config.ts View File

@@ -1,5 +1,8 @@
export default interface Config extends Record<string, string | number>{
export default interface Config extends Record<string, string | number | undefined>{
startKey: number,
endKey: number,
scaleFactor: number,
colorNaturalKey?: string,
colorAccidentalKey?: string,
colorHighlight?: string,
}

+ 7
- 0
src/services/colors.json View File

@@ -0,0 +1,7 @@
{
"REDDISH": "rgb(255,134,113)",
"YELLOWISH": "rgb(248,190,74)",
"GREENISH": "rgb(224,255,113)",
"BLUISH": "rgb(113,153,255)",
"PURPLISH": "rgb(190,145,255)"
}

+ 12
- 1
src/services/messages.json View File

@@ -2,5 +2,16 @@
"SPAN": "Span",
"DETAIL_SCALE_FACTOR": "Detail Scale Factor",
"DEBUG": "Debug",
"VIEW": "View"
"VIEW": "View",
"THEME": "Theme",
"BASE": "Base",
"HIGHLIGHT": "Highlight",
"DEFAULT": "Default",
"NONE": "None",
"INVERSE": "Inverse",
"REDDISH": "Tomato",
"YELLOWISH": "Gold",
"GREENISH": "Lime",
"BLUISH": "Cerulean",
"PURPLISH": "Mauve"
}

+ 3
- 0
src/services/themes.json View File

@@ -0,0 +1,3 @@
{
"INVERSE": ["rgb(53,54,58)", "rgb(145,147,155)"]
}

Write Preview
Loading…
Cancel
Save