ZeroDay/plugin.html at main · BartleyR/ZeroDay · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Day Countdown Plugin</title>
</head>
<body>
  <script>
// Global WebSocket connection
let websocket = null;
let pluginUUID = null;

// Cache for contexts and their settings
const contextSettings = {};

// Connect to Stream Deck
function connectElgatoStreamDeckSocket(inPort, inPluginUUID, inRegisterEvent, inInfo) {
  pluginUUID = inPluginUUID;

  // Create WebSocket
  websocket = new WebSocket(`ws://127.0.0.1:${inPort}`);

  // WebSocket is connected
  websocket.onopen = function() {
    // Register plugin
    const json = {
      event: inRegisterEvent,
      uuid: inPluginUUID
    };
    websocket.send(JSON.stringify(json));
  };

  // Handle messages from Stream Deck
  websocket.onmessage = function(evt) {
    try {
      const jsonObj = JSON.parse(evt.data);
      const event = jsonObj.event;
      const context = jsonObj.context;

      if (event === 'willAppear') {
        // Store settings when action appears
        contextSettings[context] = jsonObj.payload.settings || {};
        updateCountdown(context);
      } else if (event === 'didReceiveSettings') {
        // Update settings when changed
        contextSettings[context] = jsonObj.payload.settings || {};
        updateCountdown(context);
      } else if (event === 'keyDown') {
        // Optional: handle key press
      }
    } catch (error) {
      console.error('Error processing message:', error);
    }
  };

  websocket.onerror = function(evt) {
    console.error('WebSocket error:', evt);
  };
}

// Update countdown display
function updateCountdown(context) {
  const settings = contextSettings[context] || {};
  const targetDate = settings.targetDate;
  const eventName = settings.eventName || 'Event';

  if (!targetDate) {
    // No date set - show placeholder
    drawCountdown(context, '?', 'Set Date', settings);
    return;
  }

  // Calculate days remaining
  // Parse the date string as local time, not UTC
  const [year, month, day] = targetDate.split('-').map(Number);
  const target = new Date(year, month - 1, day); // month is 0-indexed

  const today = new Date();
  today.setHours(0, 0, 0, 0);
  target.setHours(0, 0, 0, 0);

  const diffTime = target - today;
  const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));

  // Draw the countdown
  drawCountdown(context, diffDays, eventName, settings);
}

// Draw countdown on canvas and send to Stream Deck
function drawCountdown(context, days, eventName, settings) {
  const canvas = document.createElement('canvas');
  canvas.width = 144;
  canvas.height = 144;
  const ctx = canvas.getContext('2d');

  // Get settings with defaults
  const backgroundColor = settings.backgroundColor || '#000000';
  const textColor = settings.textColor || '#FFFFFF';
  const bannerColor = settings.bannerColor || '#4CAF50';
  const bannerTextColor = settings.bannerTextColor || '#FFFFFF';
  const bannerFontFamily = settings.bannerFontFamily || 'Arial';
  const bannerFontSize = settings.bannerFontSize || 24;
  const numberFontFamily = settings.numberFontFamily || 'Arial';
  const numberFontSize = settings.numberFontSize || 48;
  const labelFontSize = settings.labelFontSize || 20;

  // Background
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, 144, 144);

  // Banner at top
  ctx.fillStyle = bannerColor;
  ctx.fillRect(0, 0, 144, 40);

  // Event name on banner
  ctx.fillStyle = bannerTextColor;
  ctx.font = `bold ${bannerFontSize}px ${bannerFontFamily}`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // Truncate event name if too long
  let displayName = eventName;
  if (ctx.measureText(displayName).width > 130) {
    while (ctx.measureText(displayName + '...').width > 130 && displayName.length > 0) {
      displayName = displayName.slice(0, -1);
    }
    displayName += '...';
  }

  ctx.fillText(displayName, 72, 20);

  // Check if today is the event day
  if (days === 0) {
    // Draw a yellow star
    ctx.fillStyle = '#FFD700'; // Gold/yellow color
    ctx.beginPath();
    const centerX = 72;
    const centerY = 75;
    const outerRadius = 28;
    const innerRadius = 12;
    const points = 5;

    for (let i = 0; i < points * 2; i++) {
      const radius = i % 2 === 0 ? outerRadius : innerRadius;
      const angle = (i * Math.PI) / points - Math.PI / 2;
      const x = centerX + radius * Math.cos(angle);
      const y = centerY + radius * Math.sin(angle);

      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    }
    ctx.closePath();
    ctx.fill();

    // Display "Today" label
    ctx.fillStyle = textColor;
    ctx.font = `bold ${labelFontSize}px ${numberFontFamily}`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Today', 72, 115);
  } else {
    // Days number (large)
    ctx.fillStyle = textColor;
    ctx.font = `bold ${numberFontSize}px ${numberFontFamily}`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(String(days), 72, 80);

    // "days" label
    ctx.font = `bold ${labelFontSize}px ${numberFontFamily}`;
    const label = Math.abs(days) === 1 ? 'day' : 'days';
    const prefix = days < 0 ? 'ago' : '';
    ctx.fillText(`${label} ${prefix}`.trim(), 72, 115);
  }

  // Convert canvas to base64 and send to Stream Deck
  const imageData = canvas.toDataURL('image/png').split(',')[1];

  if (websocket && websocket.readyState === 1) {
    const json = {
      event: 'setImage',
      context: context,
      payload: {
        image: `data:image/png;base64,${imageData}`,
        target: 0
      }
    };
    websocket.send(JSON.stringify(json));
  }
}

// Update all countdowns every hour
setInterval(() => {
  for (const context in contextSettings) {
    updateCountdown(context);
  }
}, 3600000); // 1 hour

// Also update at midnight
function scheduleNextMidnightUpdate() {
  const now = new Date();
  const tomorrow = new Date(now);
  tomorrow.setDate(tomorrow.getDate() + 1);
  tomorrow.setHours(0, 0, 0, 0);

  const timeUntilMidnight = tomorrow - now;

  setTimeout(() => {
    for (const context in contextSettings) {
      updateCountdown(context);
    }
    scheduleNextMidnightUpdate();
  }, timeUntilMidnight);
}

scheduleNextMidnightUpdate();
  </script>
</body>
</html>