companion-module-utils - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/graphics.d.ts

@@ -28,2 +28,7 @@ export interface BarColor {
 }
+export interface OptionsCircle {
+    radius: number;
+    color: number;
+    opacity?: number;
+}
 export interface OptionsCorner {
@@ -33,3 +38,3 @@ width: number;
     color: number;
-    size: number;
+    size?: number;
     location: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
@@ -79,2 +84,9 @@ opacity?: number;
 /**
+ * Generates an image buffer of a circle at a specified radius. Width and Height are 2 x radius
+ *
+ * @param options - Required and optional params for the indicator
+ * @returns Image buffer containing a circle as per options
+ */
+export declare const circle: (options: OptionsCircle) => Uint8Array;
+/**
  * Generates an image buffer of a corner indicator
@@ -81,0 +93,0 @@ *

dist/graphics.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseBase64 = exports.stackImage = exports.rect = exports.icon = exports.corner = exports.border = exports.bar = void 0;
+exports.parseBase64 = exports.stackImage = exports.rect = exports.icon = exports.corner = exports.circle = exports.border = exports.bar = void 0;
 const pngjs_1 = require("pngjs");
@@ -127,2 +127,31 @@ const icons_json_1 = __importDefault(require("./icons.json"));
 /**
+ * Generates an image buffer of a circle at a specified radius. Width and Height are 2 x radius
+ *
+ * @param options - Required and optional params for the indicator
+ * @returns Image buffer containing a circle as per options
+ */
+const circle = (options) => {
+    var _a;
+    // Create a key for the image buffer given the options provided, and return a cached buffer if it exists
+    const cacheKey = `circle-${JSON.stringify(options)}`;
+    if (cache.get(cacheKey))
+        return cache.get(cacheKey);
+    const diameter = options.radius * 2;
+    const buffer = Buffer.alloc(diameter * diameter * 4);
+    const opacity = (_a = options.opacity) !== null && _a !== void 0 ? _a : 255;
+    const color = opacity * Math.pow(2, 24) + options.color;
+    for (let y = 0; y < diameter; y++) {
+        for (let x = 0; x < diameter; x++) {
+            const withinRadius = Math.sqrt(Math.pow(x - diameter / 2, 2) + Math.pow(y - diameter / 2, 2)) <= options.radius;
+            if (withinRadius) {
+                const index = y * diameter + x;
+                buffer.writeUint32BE(color, index * 4);
+            }
+        }
+    }
+    cache.set(cacheKey, buffer);
+    return buffer;
+};
+exports.circle = circle;
+/**
  * Generates an image buffer of a corner indicator
@@ -144,5 +173,7 @@ *
     const vAlign = options.location.includes('top') ? 'top' : 'bottom';
-    for (let y = 0; y < options.height * 0.33; y++) {
+    const sizeHeight = options.size || options.height * 0.33;
+    const sizeWidth = options.size || options.width * 0.33;
+    for (let y = 0; y < sizeHeight; y++) {
         const trueY = vAlign === 'bottom' ? options.height - 1 - y : y;
-        for (let x = 0; x < options.width * 0.33 - y; x++) {
+        for (let x = 0; x < sizeWidth - y; x++) {
             const trueX = hAlign === 'right' ? options.width - 1 - x : x;
@@ -149,0 +180,0 @@ const index = trueY * options.width + trueX;

docs/graphics.md

@@ -130,2 +130,62 @@ # Graphics
 ---
+## Circle
+### Description
+Generates an image buffer of a circle at a specified radius. Width and Height are 2 x radius
+
+![](./images/circlesExample.png)
+
+### Required Options
+| Param | Value |
+| ----- | ----- |
+| `radius` | number |
+| `color` | number |
+
+### Optional options
+| Param | Value |
+| ----- | ----- |
+| `opacity` | 0 - 255 |
+
+### Exmaple
+```javascript
+const { graphics } = require('companion-module-utilz')
+
+...
+
+exampleBorderFeedback: {
+  type: 'advanced',
+  name: 'Border example',
+  description: 'Checks a value, and if true returns a border around the edge of the button',
+  options: [
+    ...
+  ],
+  callback: (feedback) => {
+    if (booleanVariable) {
+      const options = {
+        radius: 8,
+        color: combineRgb(255, 0, 0),
+        opacity: 255
+      }
+
+      const circle = graphics.circle(options)
+
+      const circleIcon = graphics.icon({
+          width: feedback.image.width,
+          height: feedback.image.height,
+          custom: circle1
+          type: 'custom',
+          customHeight: 16,
+          customWidth: 16,
+          offsetX: 28,
+          offsetY: 28
+        })
+
+      return {
+        imageBuffer: circleIcon
+      }
+    }
+  }
+}
+```
+
+---
 ## Corner
@@ -132,0 +192,0 @@ ### Description

package.json

 {
   "name": "companion-module-utils",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Utility tools for use in Bitfocus Companion modules",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/graphics.ts

@@ -46,2 +46,8 @@ import { PNG } from 'pngjs'
 
+export interface OptionsCircle {
+  radius: number
+  color: number
+  opacity?: number
+}
+
 export interface OptionsCorner {
@@ -51,3 +57,3 @@ width: number
   color: number
-  size: number
+  size?: number
   location: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
@@ -207,2 +213,32 @@ opacity?: number
 /**
+ * Generates an image buffer of a circle at a specified radius. Width and Height are 2 x radius
+ * 
+ * @param options - Required and optional params for the indicator
+ * @returns Image buffer containing a circle as per options
+ */
+export const circle = (options: OptionsCircle): Uint8Array => {
+  // Create a key for the image buffer given the options provided, and return a cached buffer if it exists
+  const cacheKey = `circle-${JSON.stringify(options)}`
+  if (cache.get(cacheKey)) return cache.get(cacheKey) as Uint8Array
+  
+  const diameter = options.radius * 2
+  const buffer = Buffer.alloc(diameter * diameter * 4)
+  const opacity = options.opacity ?? 255
+  const color = opacity * Math.pow(2, 24) + options.color
+
+  for (let y = 0; y < diameter; y++) {
+    for (let x = 0; x < diameter; x++) {
+      const withinRadius = Math.sqrt(Math.pow(x - diameter / 2, 2) + Math.pow(y - diameter / 2, 2)) <= options.radius
+      if(withinRadius) {
+        const index = y * diameter + x
+        buffer.writeUint32BE(color, index * 4)
+      }
+    }
+  }
+
+  cache.set(cacheKey, buffer)
+  return buffer
+}
+
+/**
  * Generates an image buffer of a corner indicator
@@ -227,8 +263,10 @@ *
 
-  for (let y = 0; y < options.height * 0.33; y++) {
+  const sizeHeight = options.size || options.height * 0.33
+  const sizeWidth = options.size || options.width * 0.33
+
+  for (let y = 0; y < sizeHeight; y++) {
     const trueY = vAlign === 'bottom' ? options.height - 1 - y : y
 
-    for (let x = 0; x < options.width * 0.33 - y; x++) {
+    for (let x = 0; x < sizeWidth - y; x++) {
       const trueX = hAlign === 'right' ? options.width - 1 - x : x
-
       const index = trueY * options.width + trueX
@@ -235,0 +273,0 @@ buffer.writeUint32BE(color, index * 4)

test/graphics.test.ts

@@ -49,3 +49,3 @@ import * as graphics from '../src/graphics'
       location: 'topRight',
-      size: 8
+      size: 24
     }
@@ -52,0 +52,0 @@

tsconfig.json

@@ -34,5 +34,5 @@ {
   },
-  "include": ["src/*.ts"],
+  "include": ["src/*.ts", "src/*.json"],
   "compileOnSave": false,
   "exclude": ["node_modules/**"]
 }

No alert changes

Improved metrics

Total package byte prevSize

619388

increased by3.32%

Number of package files

39

increased by2.63%

Lines of code

3031

increased by2.57%

No dependency changes