Newwac

src/WebAudioKeyboard.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from "react";
+import "./webaudio-controls/webaudio-controls-module.js";
+import { WebAudioKeyboardProps } from "./WebAudioKeyboard.types";
+
+export const WebAudioKeyboard: FC<WebAudioKeyboardProps> = (props) => {
+  return <webaudio-keyboard {...props}></webaudio-keyboard>;
+};

src/WebAudioKeyboard.types.ts

@@ -0,0 +1 @@
+export interface WebAudioKeyboardProps {}

src/WebAudioKnob.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from "react";
+import "./webaudio-controls/webaudio-controls-module.js";
+import { WebAudioKnobProps } from "./WebAudioKnob.types";
+
+export const WebAudioKnob: FC<WebAudioKnobProps> = (props) => {
+  return <webaudio-knob {...props}></webaudio-knob>;
+};

src/Knob.types.ts → src/WebAudioKnob.types.ts

@@ -1,4 +1,4 @@
-export interface KnobProps {
+export interface WebAudioKnobProps {
   src?: string;
   sprites?: number;
   value?: number;

src/WebAudioParam.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from "react";
+import "./webaudio-controls/webaudio-controls-module.js";
+import { WebAudioParamProps } from "./WebAudioParam.types";
+
+export const WebAudioParam: FC<WebAudioParamProps> = (props) => {
+  return <webaudio-param {...props}></webaudio-param>;
+};

src/WebAudioParam.types.ts

@@ -0,0 +1,3 @@
+export interface WebAudioParamProps {
+  value?: number;
+}

src/WebAudioSlider.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from "react";
+import "./webaudio-controls/webaudio-controls-module.js";
+import { WebAudioSliderProps } from "./WebAudioSlider.types";
+
+export const WebAudioSlider: FC<WebAudioSliderProps> = (props) => {
+  return <webaudio-slider {...props}></webaudio-slider>;
+};

src/WebAudioSlider.types.ts

@@ -0,0 +1,10 @@
+export interface WebAudioSliderProps {
+  src?: string;
+  knobsrc?: string;
+  tracking?: "rel" | "abs";
+  value?: number;
+  min?: number;
+  max?: number;
+  width?: number;
+  height?: number;
+}

src/WebAudioSwitch.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from "react";
+import "./webaudio-controls/webaudio-controls-module.js";
+import { WebAudioSwitchProps } from "./WebAudioSwitch.types";
+
+export const WebAudioSwitch: FC<WebAudioSwitchProps> = (props) => {
+  return <webaudio-switch {...props}></webaudio-switch>;
+};

src/WebAudioSwitch.types.ts

@@ -0,0 +1,8 @@
+export interface WebAudioSwitchProps {
+  src?: string;
+  value?: number;
+  min?: number;
+  max?: number;
+  width?: number;
+  height?: number;
+}

src/index.tsx

@@ -5,5 +5,8 @@ export * from "./PlayPauseButton";
 export * from "./Slider";
 export * from "./Spectrogram";
 export * from "./Switch";
+export * from "./WebAudioKnob";
+export * from "./WebAudioSlider";
+export * from "./WebAudioSwitch";
 
 export * from "./utils";

src/stories/WebAudioKeyboard.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { WebAudioKeyboard } from "../WebAudioKeyboard";
+
+export default {
+  title: "WebAudio-Controls/WebAudioKeyboard",
+  component: WebAudioKeyboard,
+} as ComponentMeta<typeof WebAudioKeyboard>;
+
+export const Gallery = () => {
+  return (
+    <>
+      <WebAudioKeyboard />
+    </>
+  );
+};

src/stories/WebAudioKnob.stories.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { WebAudioKnob } from "../WebAudioKnob";
+
+export default {
+  title: "WebAudio-Controls/WebAudioKnob",
+  component: WebAudioKnob,
+} as ComponentMeta<typeof WebAudioKnob>;
+
+export const Gallery = () => {
+  return (
+    <>
+      <WebAudioKnob />
+      <WebAudioKnob src={"./knobs/lineshadow.png"} />
+      <WebAudioKnob src={"./knobs/Aqua.png"} />
+      <WebAudioKnob src={"./knobs/Carbon.png"} />
+      <WebAudioKnob src={"./knobs/Chromed.png"} />
+      <WebAudioKnob src={"./knobs/Jambalaya.png"} />
+      <WebAudioKnob src={"./knobs/JP8000.png"} />
+      <WebAudioKnob src={"./knobs/lineshadow2.png"} />
+      <WebAudioKnob src={"./knobs/LittlePhatty.png"} />
+      <WebAudioKnob src={"./knobs/m400.png"} />
+      <WebAudioKnob src={"./knobs/MiniMoog_Main.png"} />
+      <WebAudioKnob src={"./knobs/nice_lamp_knob.png"} />
+      <WebAudioKnob src={"./knobs/plastic_knob.png"} />
+      <WebAudioKnob src={"./knobs/simpleBlue.png"} />
+      <WebAudioKnob src={"./knobs/SimpleFlat3.png"} />
+      <WebAudioKnob src={"./knobs/simplegray.png"} />
+      <WebAudioKnob src={"./knobs/vernier.png"} />
+      <WebAudioKnob src={"./knobs/Vintage_Knob.png"} />
+      <WebAudioKnob
+        src={"./knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png"}
+        sprites={127}
+        value={50}
+      />
+      <WebAudioKnob src={"./knobs/yellow.png"} sprites={127} />
+    </>
+  );
+};
+
+const Template: ComponentStory<typeof WebAudioKnob> = (args) => (
+  <WebAudioKnob {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  src: "",
+  sprites: 100,
+  value: 0,
+  /* knobColors: "#000;#fff;#e00;",
+  knobWidth: 100,
+  knobHeight: 100,
+  knobDiameter: 100,
+  outline: 0,
+  valueTip: "info here",
+  midilearn: false,*/
+};

src/stories/WebAudioParam.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { WebAudioParam } from "../WebAudioParam";
+
+export default {
+  title: "WebAudio-Controls/WebAudioParam",
+  component: WebAudioParam,
+} as ComponentMeta<typeof WebAudioParam>;
+
+export const Gallery = () => {
+  return (
+    <>
+      <WebAudioParam />
+    </>
+  );
+};

src/stories/WebAudioSlider.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { WebAudioSlider } from "../WebAudioSlider";
+
+export default {
+  title: "WebAudio-Controls/WebAudioSlider",
+  component: WebAudioSlider,
+} as ComponentMeta<typeof WebAudioSlider>;
+
+export const Gallery = () => {
+  return (
+    <>
+      <WebAudioSlider />
+      <WebAudioSlider
+        src={"./img/hsliderbody.png"}
+        knobsrc={"./img/hsliderknob.png"}
+        tracking={"rel"}
+      />
+      <br />
+      <WebAudioSlider
+        src={"./img/vsliderbody.png"}
+        knobsrc={"./img/vsliderknob.png"}
+        tracking={"rel"}
+      />
+    </>
+  );
+};
+
+const Template: ComponentStory<typeof WebAudioSlider> = (args) => (
+  <WebAudioSlider {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {};

src/stories/WebAudioSwitch.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { WebAudioSwitch } from "../WebAudioSwitch";
+
+export default {
+  title: "WebAudio-Controls/WebAudioSwitch",
+  component: WebAudioSwitch,
+} as ComponentMeta<typeof WebAudioSwitch>;
+
+export const Gallery = () => {
+  return (
+    <>
+      <WebAudioSwitch />
+      <WebAudioSwitch src="./knobs/switch_toggle.png" />
+      <WebAudioSwitch src="./knobs/redbutton128.png" />
+    </>
+  );
+};
+
+const Template: ComponentStory<typeof WebAudioSwitch> = (args) => (
+  <WebAudioSwitch {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {};

src/stories/WebaudioControls.stories.mdx

@@ -0,0 +1,39 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="WebAudio-Controls/Docs" />
+
+# webaudio-controls
+
+- [Webcomponent Docs: webaudio-controls](https://g200kg.github.io/webaudio-controls/docs/)
+- [webaudio-controls Github](https://github.com/g200kg/webaudio-controls)
+- Check out WebKnobMan at [g200kg KnobGallery](https://www.g200kg.com/en/webknobman/gallery.php)
+
+- Credit to original authors!
+
+**The Webaudio Controls implemented here have been customized to work with react, typescript, and storybook. Untested, some functionality may be lost.**
+
+```
+/**
+ *
+ *  WebAudio-Controls is based on
+ *    webaudio-knob by Eiji Kitamura http://google.com/+agektmr
+ *    webaudio-slider by RYoya Kawai https://plus.google.com/108242669191458983485/posts
+ *    webaudio-switch by Keisuke Ai http://d.hatena.ne.jp/aike/
+ *  Integrated and enhanced by g200kg http://www.g200kg.com/
+ *
+ *	Copyright 2013 Eiji Kitamura / Ryoya KAWAI / Keisuke Ai / g200kg(Tatsuya Shinyagaito)
+ *
+ *	 Licensed under the Apache License, Version 2.0 (the "License");
+ *	 you may not use this file except in compliance with the License.
+ *	 You may obtain a copy of the License at
+ *
+ *	 http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *	 Unless required by applicable law or agreed to in writing, software
+ *	 distributed under the License is distributed on an "AS IS" BASIS,
+ *	 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *	 See the License for the specific language governing permissions and
+ *	 limitations under the License.
+ *
+ **/
+```

src/webaudio-controls/index.ts

@@ -0,0 +1,27 @@
+export * from "./webaudio-controls-module";
+
+import { DOMAttributes } from "react";
+import { WebAudioKnob } from "./webaudio-controls-module.js";
+import { WebAudioSlider } from "./webaudio-controls-module.js";
+import { WebAudioSwitch } from "./webaudio-controls-module.js";
+import { WebAudioParam } from "./webaudio-controls-module.js";
+import { WebAudioKeyboard } from "./webaudio-controls-module.js";
+
+type CustomEvents<K extends string> = {
+  [key in K]: (event: CustomEvent) => void;
+};
+type CustomElement<T, K extends string = ""> = Partial<
+  T & DOMAttributes<T> & { children: any } & CustomEvents<`on${K}`>
+>;
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      ["webaudio-knob"]: CustomElement<WebAudioKnob>;
+      ["webaudio-slider"]: CustomElement<WebAudioSlider>;
+      ["webaudio-switch"]: CustomElement<WebAudioSwitch>;
+      ["webaudio-param"]: CustomElement<WebAudioParam>;
+      ["webaudio-keyboard"]: CustomElement<WebAudioKeyboard>;
+    }
+  }
+}