Merge pull request #33 from tubededentifrice/codex/add-customization-options-for-price-display

Add ticker display formatting and chart customization options

Author: tubededentifrice

.gitignore

@@ -1,3 +1,4 @@
 #DistributionToolWindows/
 node_modules/
 .DS_Store
+com.courcelle.cryptoticker.sdPlugin/

.gitmodules

@@ -1,4 +1,4 @@
 
-[submodule "com.courcelle.cryptoticker.sdPlugin/libs"]
-	path = com.courcelle.cryptoticker.sdPlugin/libs
+[submodule "com.courcelle.cryptoticker-dev.sdPlugin/libs"]
+	path = com.courcelle.cryptoticker-dev.sdPlugin/libs
 	url = https://github.com/elgatosf/streamdeck-javascript-sdk

AGENTS.md

@@ -1,7 +1,8 @@
 # Repository Guidelines
+This project is a Stream Deck plugin; The docs for the SDK are located at https://docs.elgato.com/streamdeck/sdk/introduction/getting-started/ (and it's sub pages).
 
 ## Project Structure & Module Organization
-- Source: `com.courcelle.cryptoticker.sdPlugin/` (plugin bundle).
+- Source: `com.courcelle.cryptoticker-dev.sdPlugin/` (plugin bundle).
 - Core files: `manifest.json`, `index.html`, `js/ticker.js` (plugin logic), `js/pi.js` (property inspector), `css/`, `images/`.
 - Dev preview: `dev/preview.html` and `dev/preview.js` served by the local preview server.
 - Tests: `__tests__/` (e.g., `__tests__/ticker.test.js`).

CODEBASE_ANALYSIS.md

@@ -21,14 +21,14 @@ Communication between the plugin and the Stream Deck software happens via a WebS
 
 ## Key Files
 
--   `com.courcelle.cryptoticker.sdPlugin/manifest.json`: The plugin's manifest file. It defines the plugin's properties, actions, and entry points (`index.html` for the ticker, `index_pi.html` for the PI).
+-   `com.courcelle.cryptoticker-dev.sdPlugin/manifest.json`: The plugin's manifest file. It defines the plugin's properties, actions, and entry points (`index.html` for the ticker, `index_pi.html` for the PI).
 
--   `com.courcelle.cryptoticker.sdPlugin/js/ticker.js`: The core logic for the ticker display.
+-   `com.courcelle.cryptoticker-dev.sdPlugin/js/ticker.js`: The core logic for the ticker display.
     -   It connects to the data proxy using SignalR for real-time updates.
     -   It uses an HTML5 `<canvas>` to draw the ticker/chart, which is then sent as an image to the Stream Deck hardware.
     -   It handles user interactions (key presses) to switch between ticker and candle chart modes.
 
--   `com.courcelle.cryptoticker.sdPlugin/js/pi.js`: The logic for the Property Inspector.
+-   `com.courcelle.cryptoticker-dev.sdPlugin/js/pi.js`: The logic for the Property Inspector.
     -   It dynamically fetches the list of available exchanges and trading pairs from the backend proxy.
     -   It provides a form for users to configure settings like the pair, colors, fonts, and alert rules.
     -   It sends the updated settings to the core plugin logic (`ticker.js`).

README.md

@@ -18,19 +18,37 @@
 <img src="https://github.com/tubededentifrice/streamdeck-crypto/raw/master/screenshot2.png" width="354" />
 
 ## Installation
-- Run `cp -f ./com.courcelle.cryptoticker.sdPlugin/manifest.dev.json ./com.courcelle.cryptoticker.sdPlugin/manifest.json` to use the dev version
-- Run `mv com.courcelle.cryptoticker.sdPlugin com.courcelle.cryptoticker-dev.sdPlugin` to use the dev version
-- Run `streamdeck link ./com.courcelle.cryptoticker.sdPlugin` after having installed the [Elgato's CLI](https://docs.elgato.com/streamdeck/sdk/introduction/getting-started)
-- Run `mv com.courcelle.cryptoticker-dev.sdPlugin com.courcelle.cryptoticker.sdPlugin` to use the dev version
-- Once finished with testing, run `cp -f ./com.courcelle.cryptoticker.sdPlugin/manifest.pub.json ./com.courcelle.cryptoticker.sdPlugin/manifest.json` to go back to public manifest
+- Run the following to be able to use the `dev` version in the Stream Deck (you need to have the [Elgato's CLI](https://docs.elgato.com/streamdeck/sdk/introduction/getting-started) installed):
+```
+streamdeck dev
+streamdeck link ./com.courcelle.cryptoticker-dev.sdPlugin
+open "http://localhost:23654/"
+npm run watch
+# You should have the "dev" plugin listed in your Stream Deck UI, if not quit it entirely and restart it
+```
+
+- Once finished testing, revert back to normal (optional):
+```
+streamdeck unlink com.courcelle.cryptoticker-dev
+```
 
 ## Packaging
-- Bump the version in `src/com.courcelle.cryptoticker.sdPlugin/manifest.json`.
-- Run `streamdeck pack com.courcelle.cryptoticker.sdPlugin`
+- Bump the version in `src/com.courcelle.cryptoticker-dev.sdPlugin/manifest.pub.json`.
+
+Run the following to create the "published" version of the plugin:
+```
+mkdir -p com.courcelle.cryptoticker.sdPlugin  # Make sure to never edit this, and only make changes to the -dev directory
+rsync -avh --delete ./com.courcelle.cryptoticker-dev.sdPlugin/ ./com.courcelle.cryptoticker.sdPlugin/
+cp -f ./com.courcelle.cryptoticker.sdPlugin/manifest.pub.json ./com.courcelle.cryptoticker.sdPlugin/manifest.json
+rm -f com.courcelle.cryptoticker.streamDeckPlugin
+streamdeck pack com.courcelle.cryptoticker.sdPlugin
+```
+
 
 ## Development
 
 Use the following npm scripts during development:
 
 - `npm test` – run the Jest unit tests
+- `npm run watch` – watch for changes in the code and notify the Stream Deck UI to reload it whenever needed
 - `npm run preview` – start a lightweight server on port 34115 and open the preview page in the default browser

__tests__/ticker.test.js

@@ -1,4 +1,4 @@
-const ticker = require("../com.courcelle.cryptoticker.sdPlugin/js/ticker.js");
+const ticker = require("../com.courcelle.cryptoticker-dev.sdPlugin/js/ticker.js");
 
 test("subscription key builds with conversion", () => {
     const key = ticker.getSubscriptionContextKey("BITFINEX", "BTCUSD", "USD", "EUR");
@@ -28,3 +28,29 @@ test("rounded value adjusts for large numbers", () => {
 test("normalize value", () => {
     expect(ticker.normalizeValue(5, 0, 10)).toBeCloseTo(0.5);
 });
+
+test("prepareCandlesForDisplay keeps latest entries ordered", () => {
+    const candles = [
+        { ts: 100, open: 1, close: 1, high: 2, low: 0, volumeQuote: 10 },
+        { ts: 300, open: 3, close: 4, high: 5, low: 3, volumeQuote: 30 },
+        { ts: 200, open: 2, close: 2, high: 3, low: 1, volumeQuote: 20 }
+    ];
+
+    const prepared = ticker.prepareCandlesForDisplay(candles, 2);
+
+    expect(prepared).toHaveLength(2);
+    expect(prepared[0].ts).toBe(200);
+    expect(prepared[1].ts).toBe(300);
+});
+
+test("getCandlesNormalized spans full width for prepared candles", () => {
+    const candles = ticker.prepareCandlesForDisplay([
+        { ts: 100, open: 1, close: 1.5, high: 2, low: 1, volumeQuote: 10 },
+        { ts: 200, open: 1.5, close: 2, high: 2.5, low: 1.5, volumeQuote: 15 }
+    ], 2);
+
+    const normalized = ticker.getCandlesNormalized(candles);
+
+    expect(normalized[0].timePercent).toBeCloseTo(0);
+    expect(normalized[normalized.length - 1].timePercent).toBeCloseTo(1);
+});