shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Interrim Checkin

Browse Source
This commit is contained in:
Robin Davies
2023-06-28 10:38:08 -04:00
parent bc410edd88
commit 2904518181
14 changed files with 86 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/AppThemed.tsx
+1 -1
View File
@@ -200,7 +200,7 @@ const appStyles = (theme: Theme) => createStyles({
},
heroContent: {
backgroundColor: isDarkMode()? theme.palette.background.default: "#FFFFFF",
backgroundColor: isDarkMode()? "#222": "#FFFFFF",
position: "relative",
height: "100%",
width: "100%"
react/src/FilePropertyControl.tsx
+5 -2
View File
@@ -33,6 +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';
export const StandardItemSize = { width: 80, height: 140 }
@@ -204,14 +205,16 @@ const FilePropertyControl =
<div style={{ flex: "0 0 auto", width: "100%" }}>
<ButtonBase style={{ width: "100%", borderRadius: "4px 4px 0px 0px", overflow: "hidden", marginTop: 8 }} onClick={() => { this.onFileClick() }} >
<div style={{ width: "100%", background: "rgba(0,0,0,0.07)", borderRadius: "4px 4px 0px 0px" }}>
<div style={{ width: "100%", background:
isDarkMode()? "rgba(255,255,255,0.03)": "rgba(0,0,0,0.07)",
borderRadius: "4px 4px 0px 0px" }}>
<div style={{ display: "flex", alignItems: "center", flexFlow: "row nowrap" }}>
<Typography noWrap={true} style={{ flex: "1 1 100%", textAlign: "start", verticalAlign: "center", paddingTop: 4, paddingBottom: 4, paddingLeft: 4 }}
variant='caption'
>{value}</Typography>
<MoreHorizIcon style={{ flex: "0 0 auto", width: "16px", height: "16px", verticalAlign: "center", opacity: 0.5, marginRight: 4 }} />
</div>
<div style={{ height: "1px", width: "100%", background: "black" }}>&nbsp;</div>
<div style={{ height: "1px", width: "100%", background: this.props.theme.palette.text.secondary }}>&nbsp;</div>
</div>
</ButtonBase>
</div>
react/src/LoadPluginDialog.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ const pluginGridStyles = (theme: Theme) => createStyles({
justifyContent: "space-between",
paddingLeft: "24px",
paddingRight: "48px",
background: theme.palette.background.paper,
},
paper: {
position: "relative",
react/src/MainPage.tsx
+5 -3
View File
@@ -45,6 +45,8 @@ import PluginInfoDialog from './PluginInfoDialog';
import { GetControlView } from './ControlViewFactory';
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";
@@ -461,7 +463,7 @@ export const MainPage =
</div>
<div style={{ flex: "0 0 auto", display: (canInsert || canAppend) ? "block" : "none", paddingRight: 8 }}>
<IconButton onClick={(e) => { this.onAddClick(e) }} size="large">
<AddIcon />
<AddIcon style={{opacity: 0.6}} />
</IconButton>
<Menu
id="add-menu"
@@ -482,7 +484,7 @@ export const MainPage =
<IconButton
onClick={() => { this.onDeletePedal(pedalboardItem?.instanceId ?? -1) }}
size="large">
<img src="/img/old_delete_outline_black_24dp.svg" alt="Delete" style={{ width: 24, height: 24, opacity: 0.6 }} />
<OldDeleteIcon style={{height: 24, width: 24,fill: this.props.theme.palette.text.primary, opacity: 0.6}} />
</IconButton>
</div>
<div style={{ flex: "0 0 auto" }}>
@@ -502,7 +504,7 @@ export const MainPage =
<IconButton
onClick={(e) => { this.handleMidiConfiguration(instanceId); }}
size="large">
<img src="img/ic_midi.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="Midi configuration" />
<MidiIcon style={{height: 24, width: 24,fill: this.props.theme.palette.text.primary, opacity: 0.6}} />
</IconButton>
</div>
react/src/PedalboardView.tsx
+6 -4
View File
@@ -33,6 +33,7 @@ import Draggable from './Draggable'
import Rect from './Rect';
import {PiPedalStateError} from './PiPedalError';
import Utility from './Utility';
import isDarkMode from './DarkMode';
import {
Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType
@@ -45,8 +46,9 @@ const END_CONTROL = Pedalboard.END_CONTROL;
const START_PEDALBOARD_ITEM_URI = Pedalboard.START_PEDALBOARD_ITEM_URI;
const END_PEDALBOARD_ITEM_URI = Pedalboard.END_PEDALBOARD_ITEM_URI;
const ENABLED_CONNECTOR_COLOR = "#666";
const DISABLED_CONNECTOR_COLOR = "#CCC";
const ENABLED_CONNECTOR_COLOR = isDarkMode() ? "#CCC": "#666";
const DISABLED_CONNECTOR_COLOR = isDarkMode() ? "#666": "#CCC";
const CELL_WIDTH: number = 96;
@@ -130,14 +132,14 @@ const pedalboardStyles = (theme: Theme) => createStyles({
alignItems: "center",
justifyContent: "center",
background: theme.palette.background.paper,
background: theme.palette.background.default,
marginLeft: (CELL_WIDTH - FRAME_SIZE) / 2,
marginRight: (CELL_WIDTH - FRAME_SIZE) / 2,
marginTop: (CELL_HEIGHT - FRAME_SIZE) / 2,
marginBottom: (CELL_HEIGHT - FRAME_SIZE) / 2,
width: FRAME_SIZE,
height: FRAME_SIZE,
border: "1pt #666 solid",
border: isDarkMode()? "1pt #AAA solid": "1pt #666 solid",
borderRadius: 6
},
borderlessIconFrame: {
react/src/PluginControl.tsx
+21 -21
View File
@@ -1,4 +1,4 @@
// Copyright (c) 2022 Robin Davies
// Copyright (c) 2022 Robin Davies
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
@@ -30,7 +30,7 @@ import Switch from '@mui/material/Switch';
import Utility, {nullCast} from './Utility';
import MenuItem from '@mui/material/MenuItem';
import {PiPedalModel,PiPedalModelFactory} from './PiPedalModel';
import {ReactComponent as DialIcon} from './svg/fx_dial.svg';
const MIN_ANGLE = -135;
const MAX_ANGLE = 135;
@@ -72,8 +72,8 @@ const styles = (theme: Theme) => createStyles({
right: 0,
bottom: 4,
textAlign: "center",
background: "white",
color: "#666",
background: theme.palette.background.paper,
color: theme.palette.text.secondary,
// zIndex: -1,
}
});
@@ -98,7 +98,7 @@ const PluginControl =
{
frameRef: React.RefObject<HTMLDivElement>;
imgRef: React.RefObject<HTMLImageElement>;
imgRef: React.RefObject<SVGSVGElement>;
inputRef: React.RefObject<HTMLInputElement>;
selectRef: React.RefObject<HTMLSelectElement>;
@@ -243,7 +243,7 @@ const PluginControl =
e.preventDefault();
}
isValidPointer(e: PointerEvent<HTMLImageElement>): boolean {
isValidPointer(e: PointerEvent<SVGSVGElement>): boolean {
if (e.pointerType === "mouse") {
return e.button === 0;
} else if (e.pointerType === "pen") {
@@ -257,9 +257,9 @@ const PluginControl =
touchDown: boolean = false;
touchIdentifier: number = -1;
onTouchStart(e: TouchEvent<HTMLImageElement>) {
onTouchStart(e: TouchEvent<SVGSVGElement>) {
}
onTouchMove(e: TouchEvent<HTMLImageElement>) {
onTouchMove(e: TouchEvent<SVGSVGElement>) {
// e.preventDefault();
e.stopPropagation(); // cancels scroll!!!
@@ -282,7 +282,7 @@ const PluginControl =
pointerId: number = 0;
pointerType: string = "";
isCapturedPointer(e: PointerEvent<HTMLImageElement>): boolean {
isCapturedPointer(e: PointerEvent<SVGSVGElement>): boolean {
return this.mouseDown
&& e.pointerId === this.pointerId
&& e.pointerType === this.pointerType;
@@ -294,9 +294,9 @@ const PluginControl =
dRange: number = 0;
pointersDown: number = 0;
captureElement?: HTMLElement = undefined;
captureElement?: SVGSVGElement = undefined;
onPointerDown(e: PointerEvent<HTMLImageElement>): void {
onPointerDown(e: PointerEvent<SVGSVGElement>): void {
if (!this.mouseDown && this.isValidPointer(e)) {
e.preventDefault();
e.stopPropagation();
@@ -351,7 +351,7 @@ const PluginControl =
}
onPointerLostCapture(e: PointerEvent<HTMLImageElement>) {
onPointerLostCapture(e: PointerEvent<SVGSVGElement>) {
if (this.isCapturedPointer(e)) {
--this.pointersDown;
@@ -361,7 +361,7 @@ const PluginControl =
}
updateRange(e: PointerEvent<HTMLImageElement>): number {
updateRange(e: PointerEvent<SVGSVGElement>): number {
let ultraHigh = false;
let high = false;
@@ -396,7 +396,7 @@ const PluginControl =
this.lastX = e.clientX;
return this.dRange;
}
onPointerUp(e: PointerEvent<HTMLImageElement>) {
onPointerUp(e: PointerEvent<SVGSVGElement>) {
if (this.isCapturedPointer(e)) {
--this.pointersDown;
@@ -414,7 +414,7 @@ const PluginControl =
}
}
releaseCapture(e: PointerEvent<HTMLImageElement>)
releaseCapture(e: PointerEvent<SVGSVGElement>)
{
let img = this.imgRef.current;
@@ -437,7 +437,7 @@ const PluginControl =
}
onPointerMove(e: PointerEvent<HTMLImageElement>): void {
onPointerMove(e: PointerEvent<SVGSVGElement>): void {
if (this.isCapturedPointer(e)) {
e.preventDefault();
let dRange = this.updateRange(e)
@@ -651,6 +651,7 @@ const PluginControl =
return (<div>#Error</div>);
}
let dialColor = this.props.theme.palette.text.primary;
let control: UiControl = t;
this.uiControl = control;
let value = this.props.value;
@@ -684,13 +685,12 @@ const PluginControl =
this.makeSelect(control, value)
) : (
<div style={{ flex: "0 1 auto" }}>
<img ref={this.imgRef} src="img/fx_dial.svg"
style={{ overscrollBehavior: "none", touchAction: "none",
<DialIcon ref={this.imgRef}
style={{ overscrollBehavior: "none", touchAction: "none", fill: dialColor,
width: 36, height: 36, opacity: DEFAULT_OPACITY, transform: this.getRotationTransform() }}
draggable="true"
onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove}
onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} onPointerMoveCapture={this.onPointerMove} onDrag={this.onDrag}
alt={control.name}
/>
</div>
)
@@ -736,7 +736,7 @@ const PluginControl =
);
}
/*
isSamePointer(PointerEvent<HTMLImageElement> e): boolean
isSamePointer(PointerEvent<SVGSVGElement> e): boolean
{
return e.pointerId === this.pointerId
&& e.pointerType === this.pointerType;
react/src/PluginControlView.tsx
+7 -4
View File
@@ -39,6 +39,7 @@ import FilePropertyDialog from './FilePropertyDialog';
import JsonAtom from './JsonAtom';
import PluginOutputControl from './PluginOutputControl';
import Units from './Units';
import isDarkMode from './DarkMode';
export const StandardItemSize = { width: 80, height: 110 };
@@ -78,6 +79,8 @@ let endPluginInfo: UiPlugin =
makeIoPluginInfo("Output", Pedalboard.END_PEDALBOARD_ITEM_URI);
const darkBackgroundColor = "#181818";
const styles = (theme: Theme) => createStyles({
frame: {
display: "block",
@@ -96,7 +99,7 @@ const styles = (theme: Theme) => createStyles({
paddingRight: 4,
paddingBottom: 24,
left: 0,
background: "white",
background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
zIndex: 3
},
@@ -106,7 +109,7 @@ const styles = (theme: Theme) => createStyles({
marginRight: 22,
paddingLeft: 4,
paddingBottom: 24,
background: "white",
background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
zIndex: 3
},
@@ -116,7 +119,7 @@ const styles = (theme: Theme) => createStyles({
paddingRight: 22,
paddingLeft: 12,
paddingBottom: 24,
background: "white",
background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
zIndex: 3
},
@@ -188,7 +191,7 @@ const styles = (theme: Theme) => createStyles({
portGroupTitle: {
position: "absolute",
top: -15,
background: "white",
background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
textOverflow: "ellipsis",
minWidth: 0,
marginLeft: 20,
react/src/PluginPresetSelector.tsx
+12 -2
View File
@@ -33,6 +33,8 @@ import {PluginUiPresets} from './PluginPreset';
import Divider from "@mui/material/Divider";
import {ReactComponent as PluginPresetsIcon} from "./svg/ic_pluginpreset.svg";
import {ReactComponent as PluginPresetIcon} from "./svg/ic_pluginpreset2.svg";
interface PluginPresetSelectorProps extends WithStyles<typeof styles> {
pluginUri?: string;
@@ -60,6 +62,12 @@ interface PluginPresetSelectorState {
const styles = (theme: Theme) => createStyles({
itemIcon: {
width: 24, height: 24, marginRight: "4px", opacity: 0.6
},
pluginIcon: {
width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary
},
pluginMenuIcon: {
width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary, marginRight: 4
}
});
@@ -285,7 +293,7 @@ const PluginPresetSelector =
return (
<div >
<IconButton onClick={(e)=> this.handlePresetMenuClick(e)} size="large">
<img src="img/ic_pluginpreset.svg" style={{ width: 24, height: 24,opacity: 0.6 }} alt="Plugin Presets" />
<PluginPresetsIcon className={classes.pluginIcon}/>
</IconButton>
<Menu
id="edit-plugin-presets-menu"
@@ -310,7 +318,9 @@ const PluginPresetSelector =
this.state.presets.presets.map((preset) => {
return (<MenuItem key={preset.instanceId}
onClick={(e) => this.handleLoadPluginPreset(preset.instanceId)}
><img src="img/ic_pluginpreset2.svg" className={classes.itemIcon} alt="" />
>
<PluginPresetIcon className={classes.pluginMenuIcon}/>
{preset.label}</MenuItem>);
})
}
react/src/SelectHoverBackground.tsx
+4 -4
View File
@@ -36,15 +36,15 @@ const styles = ({ palette }: Theme) => createStyles({
position: "absolute",
width: "100%",
height: "100%",
background: "#000000",
opacity: 0.1
background: palette.action.hover,
//opacity: palette.action.hoverOpacity
},
selected: {
position: "absolute",
width: "100%",
height: "100%",
background: palette.action.active,
opacity: 0.3
background: palette.action.selected,
//opacity: palette.action.selectedOpacity
}
});
react/src/svg/ic_midi.svg
+14
View File
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path fill="none" d="M0,0h24v24H0V0z"/>
<g>
<path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8
c0-3.537,2.311-6.541,5.5-7.594v1.815h5V4.406C17.689,5.459,20,8.463,20,12C20,16.41,16.41,20,12,20z"/>
<circle cx="12" cy="16.242" r="1.5"/>
<circle cx="7.757" cy="13.5" r="1.5"/>
<circle cx="16.243" cy="13.5" r="1.5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 882 B

react/src/svg/ic_pluginpreset.svg
+14
View File
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M17.493,10.993L17.49,7c0-1.1-0.891-2-1.99-2h-4h-3h-4C3.4,5,2.51,5.9,2.51,7l-0.003,3.993L2.5,11v10c0,1.1,0.891,2,1.99,2
H4.5h11h0.01c1.1,0,1.99-0.9,1.99-2V11L17.493,10.993z M15.5,12v9h-11v-9V7h5h1h5V12z"/>
<path d="M20.493,7.993L20.49,4c0-1.1-0.891-2-1.99-2h-4h-3h-4C6.4,2,5.51,2.9,5.51,4H7.5h5h1h5v5v9v2h0.01c1.1,0,1.99-0.9,1.99-2V8
L20.493,7.993z"/>
<line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="4" y1="14" x2="10" y2="14"/>
<line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="13.259" y1="14" x2="16.064" y2="14"/>
<path d="M10,10c-1.474,0-2.75,0.81-3.443,2H10c1.103,0,2,0.897,2,2s-0.897,2-2,2H6.556c0.694,1.189,1.97,2,3.444,2
c2.206,0,4-1.794,4-4C14,11.794,12.206,10,10,10z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/src/svg/ic_pluginpreset2.svg
Executable
+12
View File
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M19.495,8.991l-0.003-3.993c0-1.1-0.891-2-1.99-2h-4h-3h-4c-1.1,0-1.99,0.9-1.99,2L4.509,8.991L4.502,8.998v10
c0,1.1,0.891,2,1.99,2h0.01h11h0.01c1.1,0,1.99-0.9,1.99-2v-10L19.495,8.991z M17.502,9.998v9h-11v-9v-5h5h1h5V9.998z"/>
<line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="6.002" y1="11.998" x2="12.002" y2="11.998"/>
<line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="15.261" y1="11.998" x2="18.066" y2="11.998"/>
<path d="M12.002,7.998c-1.474,0-2.75,0.81-3.443,2h3.443c1.103,0,2,0.896,2,2s-0.897,2-2,2H8.558c0.694,1.189,1.97,2,3.444,2
c2.206,0,4-1.794,4-4S14.208,7.998,12.002,7.998z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

react/src/svg/ic_presets.svg
+12
View File
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M20.953,7.993L20.949,4c0-1.1-0.891-2-1.99-2h-4h-3h-3c-1.1,0-1.99,0.9-1.99,2h1.99h4h1h5h0.006v16h0.004
c1.1,0,1.99-0.9,1.99-2V8L20.953,7.993z"/>
<path d="M17.993,10.993L17.99,7c0-1.1-0.891-2-1.99-2h-4H9H6C4.9,5,4.01,5.9,4.01,7l-0.003,3.993L4,11v10c0,1.1,0.891,2,1.99,2H6h10
h0.01c1.1,0,1.99-0.9,1.99-2V11L17.993,10.993z M16,12v9H6v-9V7h4h1h5V12z"/>
<rect x="8" y="9" width="6" height="2"/>
<circle cx="11" cy="15.859" r="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 919 B

react/src/svg/old_delete_outline_24dp.svg
+12
View File
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path fill="none" d="M0,0h24v24H0V0z"/>
<g>
<path d="M20,4h-4.5l-1-1h-5l-1,1H4v2h1v13c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2V6h1V4z M17,19H7V6h10V19z"/>
<rect x="9" y="8" width="2" height="8"/>
<rect x="13" y="8" width="2" height="8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 723 B