Skip to content

Commit

Permalink
1.1.30 Dark mode for android app.
Browse files Browse the repository at this point in the history
  • Loading branch information
rerdavies committed Aug 30, 2023
1 parent 21b5a2f commit 6242a1a
Show file tree
Hide file tree
Showing 26 changed files with 147 additions and 66 deletions.
2 changes: 1 addition & 1 deletion CMakeLists.txt
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
cmake_minimum_required(VERSION 3.16.0)
project(pipedal
VERSION 1.1.29
VERSION 1.1.30
DESCRIPTION "PiPedal Guitar Effect Pedal For Raspberry Pi"
HOMEPAGE_URL "https://rerdavies.github.io/pipedal"
)
Expand Down
2 changes: 1 addition & 1 deletion debian/control
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ Package: pipedal
Pre-Depends: hostapd;authbind;dnsmasq
Priority: optional
Section: sound
Version: 1.1.29
Version: 1.1.30
Installed-Size: 15147

4 changes: 4 additions & 0 deletions docs/ReleaseNotes.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
# Release Notes
## PiPedal 1.1.30

- Use system preferences for dark mode when connecting from Android app.
-

## PiPedal 1.1.28

Expand Down
2 changes: 1 addition & 1 deletion docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

To download PiPedal, click [here](download.md).

> NEW version 1.1.29 release. See the [release notes](https://rerdavies.github.io/pipedal/ReleaseNotes) for details.
> NEW version 1.1.30 release. See the [release notes](https://rerdavies.github.io/pipedal/ReleaseNotes) for details.

Use your Raspberry Pi as a guitar effects pedal. Configure and control PiPedal with your phone or tablet.
Expand Down
3 changes: 2 additions & 1 deletion react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
},
"devDependencies": {
"@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.5"
"@types/react-window": "^1.8.5",
"@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2"
}
}
61 changes: 46 additions & 15 deletions react/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,22 +40,52 @@
}
</style>
<script>
const darkMode = localStorage.getItem("darkMode"); if (darkMode) { }
if (darkMode)
{
let bgStyle = document.getElementById("bgStyle");
if (bgStyle)
{
// disable the style block.
bgStyle.setAttribute('media',"max-width: 1px");
}
const androidHosted = !!(window.AndroidHost);

var darkMode = false;
var useSystem = false;

var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

switch (localStorage.getItem("colorScheme")) {
case null:
default:
if (androidHosted) {
useSystem = true;
} else {
darkMode = false;
}
break;

case "Light":
darkMode = false;
break;
case "Dark":
darkMode = true;
break;
case "System":
useSystem = true;
break;
}
if (useSystem)
{
darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

if (!darkMode) {
let bgStyle = document.getElementById("bgStyle");
if (bgStyle) {
// disable the style block.
bgStyle.setAttribute('media', "max-width: 1px");
}
}
</script>
</head>
<body >
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expand All @@ -65,5 +95,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</body>

</html>
2 changes: 1 addition & 1 deletion react/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import React from 'react';
import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/material/styles';

import AppThemed from "./AppThemed";
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';

declare module '@mui/material/styles' {
interface Theme {
Expand Down
2 changes: 1 addition & 1 deletion react/src/AppThemed.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ import { BankIndex, BankIndexEntry } from './Banks';
import RenameDialog from './RenameDialog';
import JackStatusView from './JackStatusView';
import { Theme } from '@mui/material/styles';
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';

import {ReactComponent as RenameOutlineIcon} from './svg/drive_file_rename_outline_black_24dp.svg';
import {ReactComponent as SaveBankAsIcon} from './svg/ic_save_bank_as.svg';
Expand Down
56 changes: 51 additions & 5 deletions react/src/DarkMode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,58 @@
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

export enum ColorTheme {
Light,
Dark,
System
};

export default function isDarkMode(): boolean {
let value = localStorage.getItem("darkMode");
return value === "true";


export function getColorScheme(): ColorTheme {
const androidHosted = !!((window as any).AndroidHost);

switch (localStorage.getItem('colorScheme')) {
case null:
default:
if (androidHosted) {
return ColorTheme.System;
} else {
return ColorTheme.Light;
}
case "Light":
return ColorTheme.Light;
case "Dark":
return ColorTheme.Dark;
case "System":
return ColorTheme.System;
}
}
export function setColorScheme(value: ColorTheme): void {
var storageValue;
switch (value) {
default:
case ColorTheme.Light:
storageValue = "Light";
break;
case ColorTheme.Dark:
storageValue = "Dark";
break;

export function setDarkMode(value: boolean): void {
localStorage.setItem("darkMode",value? "true": "false");
case ColorTheme.System:
storageValue = "System";
break;
}
localStorage.setItem("colorScheme", storageValue);
}

export function isDarkMode(): boolean {
var colorTheme = getColorScheme();
if (colorTheme === ColorTheme.System) {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
return true;
}
}
return colorTheme === ColorTheme.Dark;
}

2 changes: 1 addition & 1 deletion react/src/DraggableGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { Theme } from '@mui/material/styles';
import createStyles from '@mui/styles/createStyles';
import { Property } from "csstype";
import { nullCast} from './Utility'
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';

const SELECT_SCALE = 1.0;

Expand Down
3 changes: 1 addition & 2 deletions react/src/FilePropertyControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ import { PiPedalModel, PiPedalModelFactory, ListenHandle} from './PiPedalModel';
import ButtonBase from '@mui/material/ButtonBase'
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import {PedalboardItem} from './Pedalboard';
import isDarkMode from './DarkMode';

import {isDarkMode} from './DarkMode';

export const StandardItemSize = { width: 80, height: 140 }

Expand Down
3 changes: 1 addition & 2 deletions react/src/GxTunerControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@ import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { MonitorPortHandle, PiPedalModel, State, PiPedalModelFactory } from "./PiPedalModel";
import SvgPathBuilder from './SvgPathBuilder'
import isDarkMode from './DarkMode';

import {isDarkMode} from './DarkMode';
//const char* model[] = {"12-TET","19-TET","24-TET", "31-TET", "53-TET"};
// set_adjustment(ui->widget[2]->adj,440.0, 440.0, 427.0, 453.0, 0.1, CL_CONTINUOS);

Expand Down
3 changes: 1 addition & 2 deletions react/src/JackHostStatus.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@

import React from 'react';
import Typography from '@mui/material/Typography';
import isDarkMode from './DarkMode';

import {isDarkMode} from './DarkMode';

const RED_COLOR = isDarkMode()? "#F88":"#C00";
const GREEN_COLOR = isDarkMode()? "rgba(255,255,255,0.7)": "#666";
Expand Down
3 changes: 1 addition & 2 deletions react/src/MainPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,7 @@ import MidiBindingsDialog from './MidiBindingsDialog';
import PluginPresetSelector from './PluginPresetSelector';
import {ReactComponent as OldDeleteIcon} from "./svg/old_delete_outline_24dp.svg";
import {ReactComponent as MidiIcon} from "./svg/ic_midi.svg";
import isDarkMode from './DarkMode';

import {isDarkMode} from './DarkMode';

const SPLIT_CONTROLBAR_THRESHHOLD = 650;

Expand Down
3 changes: 1 addition & 2 deletions react/src/PedalboardView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ import Draggable from './Draggable'
import Rect from './Rect';
import {PiPedalStateError} from './PiPedalError';
import Utility from './Utility';
import isDarkMode from './DarkMode';

import {isDarkMode} from './DarkMode';
import {
Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType
} from './Pedalboard';
Expand Down
13 changes: 5 additions & 8 deletions react/src/PiPedalModel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,8 @@ import GovernorSettings from './GovernorSettings';
import WifiChannel from './WifiChannel';
import AlsaDeviceInfo from './AlsaDeviceInfo';
import { AndroidHostInterface, FakeAndroidHost } from './AndroidHost';
import isDarkMode, {setDarkMode} from './DarkMode';
import {ColorTheme, getColorScheme,setColorScheme} from './DarkMode';

export enum ColorTheme {
Light,
Dark
};

export enum State {
Loading,
Expand Down Expand Up @@ -2546,13 +2542,14 @@ export class PiPedalModel //implements PiPedalModel
}

getTheme(): ColorTheme {
return isDarkMode() ? ColorTheme.Dark: ColorTheme.Light;
return getColorScheme();
}

setTheme(value: ColorTheme) {

if (this.getTheme() !== value)
{
setDarkMode(value === ColorTheme.Dark);
setColorScheme(value);
this.reloadPage();
}
}
Expand All @@ -2562,7 +2559,7 @@ export class PiPedalModel //implements PiPedalModel
reloadPage() {
this.reloadRequested = true;
// eslint-disable-next-line no-restricted-globals
location.reload();
window.location.reload();
}


Expand Down
3 changes: 1 addition & 2 deletions react/src/PluginOutputControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ import withStyles from '@mui/styles/withStyles';
import { UiControl } from './Lv2Plugin';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, MonitorPortHandle,State } from './PiPedalModel';
import isDarkMode from './DarkMode';

import {isDarkMode} from './DarkMode';



Expand Down
2 changes: 1 addition & 1 deletion react/src/PresetDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

import React, { SyntheticEvent,Component } from 'react';
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, PresetIndexEntry, PresetIndex } from './PiPedalModel';
Expand Down
3 changes: 1 addition & 2 deletions react/src/PresetSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ import Divider from '@mui/material/Divider';
import RenameDialog from './RenameDialog'
import Select from '@mui/material/Select';
import UploadPresetDialog from './UploadPresetDialog';
import isDarkMode from './DarkMode';

import {isDarkMode} from './DarkMode';

interface PresetSelectorProps extends WithStyles<typeof styles> {

Expand Down
12 changes: 10 additions & 2 deletions react/src/SelectThemeDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import FormControl from '@mui/material/FormControl';

import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import {ColorTheme} from './PiPedalModel';
import {ColorTheme} from './DarkMode';



Expand All @@ -45,7 +45,14 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
const { onClose, defaultTheme, open,onOk } = props;
const [ selectedTheme, setSelectedTheme ] = useState(defaultTheme);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
let value = ((event.target as HTMLInputElement).value) === '0' ? ColorTheme.Light: ColorTheme.Dark;
let value = ColorTheme.Light;
if ((event.target as HTMLInputElement).value === '1')
{
value = ColorTheme.Dark;
} else if ((event.target as HTMLInputElement).value === '2')
{
value = ColorTheme.System;
}
setSelectedTheme(value);
};
const handleClose = (): void => {
Expand All @@ -67,6 +74,7 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
>
<FormControlLabel value={ColorTheme.Light} control={<Radio size='small' />} label="Light" />
<FormControlLabel value={ColorTheme.Dark} control={<Radio size='small' />} label="Dark" />
<FormControlLabel value={ColorTheme.System} control={<Radio size='small' />} label="Use system setting" />
</RadioGroup>
</FormControl>
</DialogContent>
Expand Down
6 changes: 4 additions & 2 deletions react/src/SettingsDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ import OkCancelDialog from './OkCancelDialog';
import ListSelectDialog from './ListSelectDialog';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, State, ColorTheme } from './PiPedalModel';
import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
import {ColorTheme} from './DarkMode';
import ButtonBase from "@mui/material/ButtonBase";
import AppBar from '@mui/material/AppBar';
import Button from '@mui/material/Button';
Expand Down Expand Up @@ -749,7 +750,8 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Color Theme</Typography>
<Typography className={classes.secondaryItem} display="block" variant="caption" color="textSecondary" noWrap>
{ this.model.getTheme() === ColorTheme.Dark ? "Dark" :"Light"}
{ this.model.getTheme() === ColorTheme.Dark ? "Dark" :
(this.model.getTheme() === ColorTheme.Light ? "Light": "System")}
</Typography>
</div>
</ButtonBase>
Expand Down
3 changes: 1 addition & 2 deletions react/src/TemporaryDrawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ import IconButton from '@mui/material/Toolbar';
import Drawer from '@mui/material/Drawer';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { Theme } from '@mui/material/styles';
import isDarkMode from './DarkMode';

import {isDarkMode} from './DarkMode';

const drawerStyles = (theme: Theme) => {
return createStyles({
Expand Down
Loading

0 comments on commit 6242a1a

Please sign in to comment.