@ircam/comote-helpers 1.0.1 → 1.0.3

package/max/CoMote/examples/simple-webview/public/styles.css

@@ -1,99 +0,0 @@
-:root {
-  --background-color: #181817;
-  --font-color: #ffffff;
-  --font-family: Consolas, monaco, monospace;
-  --font-size: 62.5%;
-  --interface-margin: 20px;
-}
-
-* {
-  box-sizing: border-box;
-  font-family: var(--font-family);
-}
-
-html, body {
-  width: 100%;
-  min-height: 100vh;
-  background-color: var(--background-color);
-  color: var(--font-color);
-}
-
-html {
-  font-size: var(--font-size);
-}
-
-body {
-  padding: 20px;
-  margin: 0;
-  display: flex;
-}
-
-.screen {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  flex: 1;
-  background-color: #181817;
-  color: var(--font-color);
-  align-items: center;
-}
-
-.screen h1 {
-  margin: 0px 0px 20px 0px;
-}
-
-.interface {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: stretch;
-}
-
-.interface sc-slider {
-  width: 100%;
-  height: 100%;
-  margin-right: var(--interface-margin);
-}
-
-.interface-right {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.interface-right sc-button {
-  width: 100%;
-  height: 100%;
-  font-size: 20px;
-}
-
-.interface-right sc-button + sc-button {
-  margin-top: var(--interface-margin);
-}
-
-.footer {
-  width: 100%;
-  height: 35px;
-  margin-top: 20px;
-  display: flex;
-  align-items: center;
-}
-
-.footer p {
-  width: 100%;
-  margin: 0px var(--interface-margin) 0px 0px;
-  text-align: center;
-  font-size: 15px;
-} 
-
-.footer a {
-  color: var(--font-color);
-}
-
-.footer sc-button {
-  width: 100%;
-  height: 100%;
-  font-size: 15px;
-}

package/max/CoMote/examples/simple-webview/src/client.js

@@ -1,35 +0,0 @@
-import { html, render } from 'lit';
-import '@ircam/sc-components';
-
-render(html`
-  <div class="screen">
-
-    <h1> Basic CoMote Webview </h1>
-
-    <div class="interface">
-      <sc-slider
-        min="0"
-        max="1"
-        step="0.01"
-        value="0.5"
-        orientation="vertical"
-        @input=${e => sendEvent(`slider`, e.detail.value)}
-      ></sc-slider>
-      <div class=interface-right>
-        <sc-button
-          @press=${e => sendEvent(`button1`, 1)}
-          @release=${e => sendEvent(`button1`, 0)}
-        >1</sc-button>
-        <sc-button
-          @press=${e => sendEvent(`button2`, 1)}
-          @release=${e => sendEvent(`button2`, 0)}
-        >2</sc-button>
-      </div>
-    </div>
-
-    <div class="footer">
-      <p>Built with <br><a target="_blank" href="https://ircam-ismm.github.io/sc-components/">sc-components</a></p>
-      <sc-button @press=${e => toggleModal()}>fullscreen</sc-button>
-    </div>
-  </div>
-`, document.body);

package/max/CoMote/examples/simple-webview/src/server.js

@@ -1,20 +0,0 @@
-const handler = require('serve-handler');
-const http = require('node:http');
-const path = require('node:path');
-
-const port = 8001;
-const publicPath = '../public'; // relative to this file
-
-const server = http.createServer((request, response) => {
-  const localPath = __dirname;
-
-  // You pass two more arguments for config and middleware
-  // More details here: https://github.com/vercel/serve-handler#options
-  return handler(request, response, {
-    public: path.resolve(localPath, publicPath),
-  });
-});
-
-server.listen(port, () => {
-  console.log(`Running at http://localhost:${port}`);
-});

package/max/CoMote/examples/soundworks/.editorconfig

@@ -1,12 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = LF
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

package/max/CoMote/examples/soundworks/.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": "@ircam",
-}

package/max/CoMote/examples/soundworks/.soundworks

@@ -1,7 +0,0 @@
-{
-  "createVersion": "1.0.0-alpha.23",
-  "name": "example-new",
-  "eslint": true,
-  "language": "js",
-  "configFormat": "yaml"
-}

package/max/CoMote/examples/soundworks/LICENSE

@@ -1,28 +0,0 @@
-Copyright (c) 2014-present IRCAM – Centre Pompidou (France, Paris)
-
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this
-  list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this
-  list of conditions and the following disclaimer in the documentation and/or
-  other materials provided with the distribution.
-
-* Neither the name of the IRCAM nor the names of its
-  contributors may be used to endorse or promote products derived from
-  this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
-ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
-ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/max/CoMote/examples/soundworks/README.md

@@ -1,26 +0,0 @@
-# CoMote example app
-
-This application showcases the usage of the `comote-helpers` SDK for the CoMote application.
-
-## Usage
-
-1. Install Node.js LTS
-2. Install and launch the Web application
-
-```
-cd path/to/comote-helpers/example
-npm install 
-npm run dev
-```
-
-A web page will be accessible at `http://127.0.0.1:8000` on the computer running the server.
-
-3. Connect your mobile phone on the same WiFi as the computer running the server
-4. Launch the CoMote application on your mobile phone
-5. Scan the QRCode on the web page from the CoMote application
-
-...and enjoy the sensors and controls streamed to the Web page through WebSockets
-
-## License
-
-[BSF-3-Clause](../LICENSE)

package/max/CoMote/examples/soundworks/config/application.yaml

@@ -1,8 +0,0 @@
-name: "CoMote Example"
-author: ""
-clients:
-  player:
-    target: browser
-    default: true
-  webview:
-    target: browser

package/max/CoMote/examples/soundworks/config/env-default.yaml

@@ -1,12 +0,0 @@
-type: development
-port: 8000
-subpath: ""
-serverAddress: ""
-useHttps: false
-httpsInfos:
-  cert: null
-  key: null
-auth:
-  clients: []
-  login: ""
-  password: ""

package/max/CoMote/examples/soundworks/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "@ircam/comote-example-soundworks",
-  "description": "comote soundworks example application",
-  "authors": [],
-  "license": "BSD-3-Clause",
-  "version": "0.0.0",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "build": "npm run clean && sass src/clients/styles:.build/public/css && soundworks-build -b",
-    "clean": "soundworks-build -D",
-    "dev": "npm run build && (concurrently -i -p \"none\" \"npm run watch:inspect server\" \"soundworks-build -b -w\" \"npm run watch:sass\")",
-    "start": "node .build/server/index.js",
-    "watch": "soundworks-build -p",
-    "watch:inspect": "soundworks-build -i -p",
-    "watch:sass": "sass --watch src/clients/styles:.build/public/css",
-    "lint": "eslint ."
-  },
-  "dependencies": {
-    "@ircam/comote-helpers": "^1.0.0",
-    "@ircam/sc-components": "^3.0.0-alpha.60",
-    "@soundworks/core": "^4.0.0-alpha.21",
-    "@soundworks/helpers": "^1.0.0-alpha.12",
-    "json5": "^2.2.3",
-    "lit": "^3.1.3"
-  },
-  "devDependencies": {
-    "@ircam/eslint-config": "^1.2.1",
-    "@soundworks/build": "^1.0.0-alpha.6",
-    "@soundworks/create": "^1.0.0-alpha.23",
-    "concurrently": "^8.2.2",
-    "eslint": "^9.6.0",
-    "sass": "^1.77.1"
-  }
-}

package/max/CoMote/examples/soundworks/src/clients/components/sw-audit.js

@@ -1,78 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-
-function padLeft(value, size) {
-  let str = value + ''; // cast to string
-
-  while (str.length <= size) {
-    str = `&nbsp;${str}`;
-  }
-
-  return str;
-}
-
-/**
- * Component for the soundworks internal audit state
- */
-class SwAudit extends LitElement {
-  static styles = css`
-    :host > div {
-      background-color: var(--sw-light-background-color);
-      height: 100%;
-      padding: 0 20px;
-      overflow: hidden;
-    }
-  `;
-
-  constructor() {
-    super();
-
-    this.client = null;
-    this._auditState = null;
-    this._numClientsString = '';
-  }
-
-  async connectedCallback() {
-    super.connectedCallback();
-
-    this._auditState = await this.client.getAuditState();
-    this._auditState.onUpdate(updates => {
-      if ('numClients' in updates) {
-        const numClientsStrings = [];
-        const numClients = this._auditState.get('numClients');
-
-        for (let role in numClients) {
-          const str = `${role}: ${padLeft(numClients[role], 2)}`;
-          numClientsStrings.push(str);
-        }
-
-        this._numClientsString = numClientsStrings.join(' - ');
-      }
-
-      this.requestUpdate();
-    }, true);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this._auditState.detach();
-  }
-
-  render() {
-    if (this._auditState === null) {
-      return nothing;
-    }
-
-    const avgLatency = this._auditState.get('averageNetworkLatency');
-    const avgLatencyString = padLeft((avgLatency * 1e3).toFixed(2), 6);
-
-    return html`
-      <div>
-        ${unsafeHTML(this._numClientsString)} | avg latency: ${unsafeHTML(avgLatencyString)} ms
-      </div>
-    `;
-  }
-}
-
-customElements.define('sw-audit', SwAudit);

package/max/CoMote/examples/soundworks/src/clients/components/sw-credits.js

@@ -1,80 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-
-import '@ircam/sc-components/sc-icon.js';
-
-class SwCredits extends LitElement {
-  static properties = {
-    _show: {
-      type: Boolean,
-      state: true,
-    },
-  };
-
-  static styles = css`
-    :host {
-      width: 100%;
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      z-index: 1000;
-    }
-
-    :host > footer {
-      display: block;
-      line-height: 1.6rem;
-      padding: 20px;
-      background-color: var(--sw-light-background-color);
-      box-sizing: border-box;
-    }
-
-    footer span {
-      font-style: italic;
-      color: var(--sw-light-font-color);
-      font-weight: bold;
-    }
-
-    footer a {
-      color: var(--sw-light-font-color);
-    }
-
-    sc-icon {
-      position: absolute;
-      bottom: 20px;
-      right: 20px;
-      z-index: 1001;
-      border: none;
-      background-color: transparent;
-      opacity: 0.6;
-    }
-  `;
-
-  constructor() {
-    super();
-
-    this._show = false;
-    this.infos = {};
-  }
-
-  render() {
-    const $footer = html`
-      <footer>
-        <p>
-           <span>${this.infos.name}</span>
-          ${this.infos.author ? html`by <span>${this.infos.author}</span>` : ``}
-          has been developped using the <a href="https://soundworks.dev" target="_blank">soundworks</a>
-          framework developped by the ISMM team at Ircam.
-        </p>
-        <p>
-          Copyright (c) 2014-present IRCAM – Centre Pompidou (France, Paris)
-        </p>
-      </footer>
-    `;
-
-    return html`
-      ${this._show ? $footer : nothing}
-      <sc-icon type="question" @release=${e => this._show = !this._show}></sc-icon>
-    `
-  }
-}
-
-customElements.define('sw-credits', SwCredits);

package/max/CoMote/examples/soundworks/src/clients/player/.editorbackup/PlayerExperience.js~

@@ -1,131 +0,0 @@
-import { AbstractExperience } from '@soundworks/core/client';
-import { render, html, nothing } from 'lit/html.js';
-import renderInitializationScreens from '@soundworks/template-helpers/client/render-initialization-screens.js';
-import * as CoMoteQRCode from '@ircam/comote-helpers/qrcode.js';
-
-import '@ircam/simple-components/sc-editor.js';
-import '@ircam/simple-components/sc-text.js';
-import '@ircam/simple-components/sc-toggle.js';
-
-const SOCKET_PORT = 8901;
-
-class PlayerExperience extends AbstractExperience {
-  constructor(client, config, $container) {
-    super(client);
-
-    this.config = config;
-    this.$container = $container;
-    this.rafId = null;
-
-    renderInitializationScreens(client, config, $container);
-  }
-
-  async start() {
-    super.start();
-
-    window.addEventListener('resize', () => this.render());
-
-    this.infos = await this.client.stateManager.attach('infos');
-    this.infos.subscribe(() => this.render());
-
-    this.infos.subscribe(async updates => {
-      if (updates.comoteConfig) {
-        this.qrCode = await CoMoteQRCode.dataURL(this.infos.get('comoteConfig'));
-      }
-
-      if (updates.buttonA) {
-        console.log(updates.buttonA);
-      }
-
-      this.render();
-    }, true);
-
-    this.render();
-  }
-
-  render() {
-    // debounce with requestAnimationFrame
-    window.cancelAnimationFrame(this.rafId);
-
-    this.rafId = window.requestAnimationFrame(() => {
-      const values =
-
-      render(html`
-        <div style="padding: 20px">
-          <h1 style="margin: 20px 0">CoMo.te dashboard</h1>
-
-          <div style="margin-bottom: 10px;">
-            <sc-text
-              value="WiFi infos"
-              width="310"
-              readonly
-            ></sc-text>
-            <sc-text
-              value="${JSON.stringify(this.infos.get('wifiInfos'), null, 2)}"
-              readonly
-              height="80"
-              width="300"
-            ></sc-text>
-          </div>
-          <div style="margin-bottom: 10px;">
-            <sc-text
-              value="Settings"
-              width="310"
-              readonly
-            ></sc-text>
-            <sc-editor
-              value="${JSON.stringify(this.infos.get('comoteConfig'), null, 2)}"
-              @change="${e => this.infos.set({ comoteConfig: JSON.parse(e.detail.value) })}"
-            ></sc-editor>
-          </div>
-
-          ${this.qrCode ?
-            html`
-              <div style="display: inline-block; vertical-align: top; margin-right: 12px">
-                <sc-text
-                  style="display: block; margin-bottom: 4px;"
-                  width="300"
-                  value="Flash QR to retrieve settings in CoMo.te"
-                  readonly
-                ></sc-text>
-                <img src="${this.qrCode}" width="300" height="300" />
-              </div>
-            `
-          : nothing}
-
-          <div style="display: inline-block; vertical-align: top; margin-right: 12px">
-            <sc-text
-              value="${JSON.stringify(this.infos.get('data'), null, 2)}"
-              readonly
-              height="334"
-              width="300"
-            ></sc-text>
-          </div>
-
-          <div style="display: inline-block; vertical-align: top; margin-right: 12px">
-            <div style="margin-bottom: 6px">
-              <sc-text
-                value="buttonA"
-                readonly
-              ></sc-text>
-              <sc-toggle
-                .active=${this.infos.get('buttonA')}
-              ></sc-toggle>
-            </div>
-            <div style="margin-bottom: 6px">
-              <sc-text
-                value="buttonB"
-                readonly
-              ></sc-text>
-              <sc-toggle
-                .active=${this.infos.get('buttonB')}
-              ></sc-toggle>
-            </div>
-          </div>
-        </div>
-      `, this.$container);
-    });
-  }
-}
-
-export default PlayerExperience;