Notes

I needed a way to display the current Position Size for my Auto Take Profit hotkeys for cTrader

First I had a script which pulled the $positionsize value from a config.ini file every 5 seconds, then generates an image. This image can then be set as the Button Icon. The issue with this was the Stream Deck software did not reflect the new image

For my second attempt, I setup a local webserver which read the $positionsize value from the config.ini file every 5 seconds and displayed this on a webpage. The issue with this was the Stream Deck software does not have a way of streaming data

The solution was to create a custom Stream Deck Plugin for this specific purpose

Prerequisites

Stream Deck

Latest version of Stream Deck

1. Select your Stream Deck Product
2. Select your OS
3. Download & install Stream Deck

Custom Plugin Download

Add to Stream Deck

Double click and run the plugin

If there are no errors, it will show up in Stream Deck

Configure Options

1. Config Path: C:/Trading/config.ini - Path to the file containing position size data

2. Update Interval: 1000 - How often to check for updates (milliseconds)

3. Position Size Regex: \$positionsize=({0-9}+) - Regular expression with capture group for the position size

4. Display Format: 2 decimal - Display 2 decimal places

5. Debug Mode: Disabled - When enabled, shows detailed logs in the console to help troubleshoot issues

6. Percentage Display: Disabled - When enabled, shows value as a percentage

Appearance & Testing

1. Title: Set what is displayed on the button

2. Title Alignment: Middle - Aligns the title to the center, bottom or top of the container

3. Font Size: 15 - Sets the text size for the displayed elements

4. Font Family: Arial - Specifies the typeface used for text

5. Text Color: #FFFFFF - Sets the default text color to white

6. Success Color: #00FF00 - Bright green color used to indicate successful actions or states

7. Error Color: #FF0000 - Bright red color used to highlight errors or critical notifications

8. Background Image: Disabled - Custom background image option is turned off

9. Image URL/Path: Empty - No background image selected (recommended size 144x144px)

10. Preview: Preview area for potential background image

11. Actions: Section containing interaction buttons

12. Test Connection: Button to verify current connection settings

13. Status Indicator: Position size: 0.70 - Current status or key metric displayed at the bottom

Background

Using a public image

example image

Using a local image

example image

Colours

Recommended Color Picker: HTML Color Codes

Color Name	Hex Code	RGB Values
White ⬜	#FFFFFF	rgb(255, 255, 255)
Black ⬛	#000000	rgb(0, 0, 0)
Red 🔴	#FF0000	rgb(255, 0, 0)
Green 🟢	#00FF00	rgb(0, 255, 0)
Blue 🔵	#0000FF	rgb(0, 0, 255)
Forest Green 🟢	#228B22	rgb(34, 139, 34)
Coral Red 🔴	#FF6347	rgb(255, 99, 71)
Soft Gray ⚪	#808080	rgb(128, 128, 128)
Pastel Blue 🔷	#A7C7E7	rgb(167, 199, 231)

Under the hood

Code

index.html

config.js

manifest.json

pi.html

sdpi.css

streamdeck-sdk.js

Folder Structure

/live-hotkey-data
├── com.gurch.positionsize.sdPlugin
│   ├── config.js
│   ├── images
│   │   ├── actionIcon.png
│   ├── index.html
│   ├── manifest.json
│   ├── pi.html
│   ├── README.md
│   ├── sdpi.css
│   └── streamdeck-sdk.js

Compiling

1. Right click the folder containing the plugin files com.gurch.positionsize.sdPlugin
2. Hover over Send to, then click on Compressed (zipped) folder

1. Rename the newly created com.gurch.positionsize.sdPlugin.zip to com.gurch.positionsize.streamDeckPlugin

Security

A 70% of this code was written by an AI Here is Claude 3.5 Haiku's security review of the code