Skip to content

Commit

Permalink
Public release of new features
Browse files Browse the repository at this point in the history 
- Downloadable CSV of all active graphs
- Per page Y scaling (requested by listener)
- Added a Graph Customisation menu
  • Loading branch information
@HarutoHiroki
HarutoHiroki committed Sep 17, 2024
1 parent d6213bd commit 63fdbdb
Show file tree
Hide file tree
Showing 9 changed files with 579 additions and 136 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ https://graphtool-demo.harutohiroki.com/
- Per-measurement compensation (requested by listener)
- Added support for Haruto's Graph Extension to apply eq to browserwide
- Made Preference Bounds better and not relying on a png anymore
- Downloadable CSV of all active graphs
- Per page Y scaling (requested by listener)
- Added a Graph Customisation menu


# TODO
Expand Down
167 changes: 161 additions & 6 deletions assets/css/extra.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,57 @@ image.graph_logo {
filter: var(--svg-filter);
}

/** Color Picker Thingy **/
.colorStylePicker {
display: flex;
align-items: flex-start;
box-sizing: border-box;
flex-wrap: wrap;
flex-direction: row;
background-color: var(--background-color);
border: 1px solid var(--background-color-contrast-more);
border-radius: 6px;
z-index: 1000;
}

.colorStylePicker .left-side {
display: flex;
align-items: center;
padding: 0 10px 0 0;
}

.colorStylePicker .right-side {
flex: 1;
align-items: center;
}

.colorStylePicker .right-side .row {
display: flex;
flex-direction: row;
}


.colorStylePicker .right-side>div>span {
color: var(--font-color-inputs);
font-family: var(--font-primary);
font-size: 13.5px;
line-height: 1em;
}

.tickText {
order: 1 !important;
}
.tickInput {
order: 2 !important;
width: 55px !important;
}
.spaceText {
order: 3 !important;
}
.spaceInput {
order: 4 !important;
width: 55px !important;
}

/** Custom DF tilt**/

Expand Down Expand Up @@ -125,7 +176,8 @@ div.customDF>button+div {
margin-left: 6px
}

div.customDF>div>input {
div.customDF>div>input,
.colorStylePicker input {
order: 2;
box-sizing: border-box;
width: 70px;
Expand All @@ -146,7 +198,16 @@ div.customDF>div>input {
padding-left: 11px
}

div.customDF>div:after {
.colorStylePicker input {
border: 1px solid var(--background-color-contrast-more);
border-radius: 6px;
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
height: 35.6px;
}

div.customDF>div:after{
order: 3;
content: '';
box-sizing: border-box;
Expand All @@ -159,7 +220,8 @@ div.customDF>div:after {
border-radius: 0 6px 6px 0
}

div.customDF>div>span {
div.customDF>div>span,
.colorStylePicker .right-side>.row>span {
order: 1;
padding: 11px 16px;
background-color: var(--background-color)!important;
Expand All @@ -179,7 +241,8 @@ div.customDF>div.selected>span {
color: var(--font-color-secondary)
}

div.customDF>button {
div.customDF>button,
.colorStylePicker button {
padding: 11px 16px;

background-color: var(--background-color) !important;
Expand All @@ -194,21 +257,47 @@ div.customDF>button {
white-space: nowrap;
cursor: pointer;
}
.colorStylePicker button {
order: 3;
margin-left: 7px;
height: 35.6px;
}

div.customDF>button:active {
div.customDF>button:active,
.colorStylePicker button:active {
box-sizing: border-box;
background-color: var(--accent-color) !important;
border-color: var(--accent-color) !important;

color: var(--font-color-secondary);
}

div.customDF>button.selected {
div.customDF>button.selected,
.colorStylePicker button.selected {
background-color: var(--accent-color)!important;
border-color: var(--accent-color);
color: var(--font-color-secondary)
}

.colorStylePicker select {
box-sizing: border-box;
width: 120px;
height: 36px;
padding: 8px 6px 8px 0px;

background-color: var(--background-color-inputs);
border: 1px solid var(--background-color-contrast-more);
border-radius: 6px;
outline: none;

color: var(--font-color-inputs);
font-family: var(--font-secondary);
font-size: 11px;
line-height: 1em;
text-transform: uppercase;
text-align: center;
}

/** extra panel **/

div.extra-panel {
Expand Down Expand Up @@ -650,4 +739,70 @@ tbody.curves > tr > td.comp select {
tbody.curves > tr > td.button-pin {
order: 5;
}
}

tbody.curves > tr > td.remove {
order: 7 !important;
}

:root {
--icon-save: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z'/%3E%3C/svg%3E");
}

tbody.curves > tr > td.button-saveSquig {
order: 6;
}

tbody.curves > tr > td.button.button-saveSquig {
mask: var(--icon-save);
-webkit-mask: var(--icon-save);
mask-size: 15px;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: 15px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

tbody.curves > tr > td.button-saveSquig:before {
background-color: var(--background-color-contrast);
border-color: transparent;
}

tbody.curves > tr > td.button-saveSquig:after {
background-color: var(--font-color-primary) !important;
}

/** color and line weight / line dash style menu **/
.line-style-menu {
display: flex;
align-items: center;
gap: 10px;
display: inline-block;
}

.line-style-menu-content {
display: none;
position: absolute;
background-color: var(--background-color);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.line-style-menu-content .style-button {
color: var(--font-color-primary);
padding: 12px 16px;
text-decoration: none;
display: block;
cursor: pointer;
}

.line-style-menu-content input[type="squig_color"] {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
cursor: pointer;
}
1 change: 1 addition & 0 deletions assets/css/reinvented-color-wheel.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

56 changes: 37 additions & 19 deletions assets/js/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,21 @@ const targets = [
];

// Haruto's Addons
const preference_bounds_name = "Preference Bounds RAW", // Preference bounds name
preference_bounds_dir = "assets/pref_bounds/", // Preference bounds directory
preference_bounds_startup = false, // If true, preference bounds are displayed on startup
PHONE_BOOK = "phone_book.json", // Path to phone book JSON file
default_DF_name = "KEMAR DF", // Default RAW DF name
dfBaseline = true, // If true, DF is used as baseline when custom df tilt is on
default_bass_shelf = 8, // Default Custom DF bass shelf value
default_tilt = -0.8, // Default Custom DF tilt value
default_ear = 0, // Default Custom DF ear gain value
default_treble = 0, // Default Custom DF treble gain value
tiltableTargets = ["KEMAR DF"], // Targets that are allowed to be tilted
compTargets = ["KEMAR DF"], // Targets that are allowed to be used for compensation
allowCreatorSupport = true; // Allow the creator to have a button top right to support them
const preference_bounds_name = "Preference Bounds RAW", // Preference bounds name
preference_bounds_dir = "assets/pref_bounds/", // Preference bounds directory
preference_bounds_startup = false, // If true, preference bounds are displayed on startup
allowSquigDownload = false, // If true, allows download of measurement data
PHONE_BOOK = "phone_book.json", // Path to phone book JSON file
default_y_scale = "40db", // Default Y scale; values: ["20db", "30db", "40db", "50db", "crin"]
default_DF_name = "KEMAR DF", // Default RAW DF name
dfBaseline = true, // If true, DF is used as baseline when custom df tilt is on
default_bass_shelf = 8, // Default Custom DF bass shelf value
default_tilt = -0.8, // Default Custom DF tilt value
default_ear = 0, // Default Custom DF ear gain value
default_treble = 0, // Default Custom DF treble gain value
tiltableTargets = ["KEMAR DF"], // Targets that are allowed to be tilted
compTargets = ["KEMAR DF"], // Targets that are allowed to be used for compensation
allowCreatorSupport = true; // Allow the creator to have a button top right to support them

// *************************************************************
// Functions to support config options set above; probably don't need to change these
Expand Down Expand Up @@ -129,7 +131,7 @@ setLayout();
const
// Short text, center-aligned, useful for a little side info, credits, links to measurement setup, etc.
simpleAbout = `
<p class="center">This graph database is maintained by HarutoHiroki with frequency responses generated via an "IEC60318-4"-compliant ear simulator. This web software is based on the <a href="https://github.com/mlochbaum/CrinGraph">CrinGraph</a> open source software project, with <a href="https://www.teachmeaudio.com/mixing/techniques/audio-spectrum">Audio Spectrum</a>'s definition source.</p>
<p class="center">This graph database is maintained by HarutoHiroki with frequency responses generated via an "IEC60318-4"-compliant ear simulator. This web software is based on a heavily modified version of the <a href="https://github.com/mlochbaum/CrinGraph">CrinGraph</a> open source software project, with <a href="https://www.teachmeaudio.com/mixing/techniques/audio-spectrum">Audio Spectrum</a>'s definition source.</p>
`,
// Which of the above variables to actually insert into the page
whichAccessoriesToUse = simpleAbout;
Expand All @@ -145,6 +147,18 @@ const linkSets = [
name: "Audio Discourse",
url: "https://iems.audiodiscourse.com/"
},
{
name: "Bad Guy",
url: "https://hbb.squig.link/"
},
{
name: "Banbeucmas",
url: "https://banbeu.com/graph/tool/"
},
{
name: "HypetheSonics",
url: "https://www.hypethesonics.com/iemdbc/"
},
{
name: "In-Ear Fidelity",
url: "https://crinacle.com/graphs/iems/graphtool/"
Expand All @@ -158,9 +172,13 @@ const linkSets = [
url: "https://squig.link/"
},
{
name: "Timmy",
name: "Timmy (Gizaudio)",
url: "https://timmyv.squig.link/"
},
{
name: "Rohsa",
url: "https://rohsa.gitlab.io/graphtool/"
},
]
},
{
Expand Down Expand Up @@ -221,7 +239,7 @@ let headerLogoText = "HarutoHiroki",
},
{
name: "Donate",
url: "https://www.paypal.me/harutohirokiUS"
url: "https://ko-fi.com/harutohiroki"
},
// {
// name: "GitHub",
Expand Down Expand Up @@ -259,12 +277,12 @@ let tutorialDefinitions = [
{
name: 'Presence',
width: '5.9%',
description: 'The Presence range is responsible for the clarity and definition of a sound. Over-boosting can cause an irritating, harsh sound. Cutting in this range makes the sound more distant and transparent.'
description: 'The presence range is responsible for the clarity and definition of a sound. Over-boosting can cause an irritating, harsh sound. Cutting in this range makes the sound more distant and transparent.'
},
{
name: 'Treble',
name: 'Brilliance',
width: '17.4%',
description: 'The Treble range is composed entirely of harmonics and is responsible for sparkle and air of a sound. Over boosting in this region can accentuate hiss and cause ear fatigue.'
description: 'The brilliance range is composed entirely of harmonics and is responsible for sparkle and air of a sound. Over boosting in this region can accentuate hiss and cause ear fatigue.'
}
]

Expand Down
Loading

0 comments on commit 63fdbdb

Please sign in to comment.