Webcomponents

.storybook/main.js

@@ -10,5 +10,5 @@ module.exports = {
     "@storybook/addon-storyshots",
   ],
   framework: "@storybook/react",
-  staticDirs: ["../src/stories/assets"],
+  staticDirs: ["../src/stories/assets", "../src/webaudio-controls/images"],
 };

src/Knob.tsx

@@ -0,0 +1,24 @@
+import React, { FC, DOMAttributes } from "react";
+import { WebAudioKnob } from "./webaudio-controls/webaudio-knob";
+console.log("WebAudioKnob", WebAudioKnob);
+import "./webaudio-controls/webaudio-knob.js";
+import { KnobProps } from "./Knob.types";
+
+export type CustomEvents<K extends string> = {
+  [key in K]: (event: CustomEvent) => void;
+};
+export 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>;
+    }
+  }
+}
+
+export const Knob: FC<KnobProps> = (props) => {
+  return <webaudio-knob {...props}></webaudio-knob>;
+};

src/Knob.types.ts

@@ -0,0 +1,12 @@
+export interface KnobProps {
+  src?: string;
+  sprites?: number;
+  value?: number;
+  knobColors?: string; //example: "#e00;#000;#fff"
+  knobWidth?: number;
+  knobHeight?: number;
+  knobDiameter?: number;
+  outline?: number;
+  valueTip?: string;
+  midilearn?: boolean;
+}

src/stories/Knob.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="UI/Knob/Docs" />
+
+# webaudio-controls
+
+- [webaudio-controls](https://g200kg.github.io/webaudio-controls/docs/)
+- Check out WebKnobMan at [g200kg KnobGallery](https://www.g200kg.com/en/webknobman/gallery.php)

src/stories/Knob.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Knob } from "../Knob";
+
+export default {
+  title: "UI/Knob",
+  component: Knob,
+} as ComponentMeta<typeof Knob>;
+
+export const Gallery = () => {
+  return (
+    <>
+      <Knob></Knob>
+      <Knob src={"./knobs/lineshadow.png"}></Knob>
+      <Knob src={"./knobs/Aqua.png"}></Knob>
+      <Knob src={"./knobs/Carbon.png"}></Knob>
+      <Knob src={"./knobs/Chromed.png"}></Knob>
+      <Knob src={"./knobs/Jambalaya.png"}></Knob>
+      <Knob src={"./knobs/JP8000.png"}></Knob>
+      <Knob src={"./knobs/lineshadow2.png"}></Knob>
+      <Knob src={"./knobs/LittlePhatty.png"}></Knob>
+      <Knob src={"./knobs/m400.png"}></Knob>
+      <Knob src={"./knobs/MiniMoog_Main.png"}></Knob>
+      <Knob src={"./knobs/nice_lamp_knob.png"}></Knob>
+      <Knob src={"./knobs/plastic_knob.png"}></Knob>
+      <Knob src={"./knobs/SimpleFlat3.png"}></Knob>
+      <Knob src={"./knobs/simplegray.png"}></Knob>
+      <Knob src={"./knobs/vernier.png"}></Knob>
+      <Knob src={"./knobs/Vintage_Knob.png"}></Knob>
+      <Knob
+        src={"./knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png"}
+        sprites={127}
+        value={50}
+      ></Knob>
+      <Knob src={"./knobs/yellow.png"} sprites={127}></Knob>
+    </>
+  );
+};
+
+const Template: ComponentStory<typeof Knob> = (args) => <Knob {...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,*/
+};