Hi everyone!
I tried to make the following "Game Timer and Clue Display" in node-red, following this tutorial: Game Timer and Clue Display · playfultechnology/node-redscape Wiki · GitHub
I am able to change the background picture and to set a sound notification, but the main issue is that the time and hints are only displayed by the variable name, i.e. {{msg.timerText}} and {{msg.clueText}} instead of their actual value. How can I fix this?
Any help will be MUCH appreciated as I have tried to fix this for countless hours by now...
Link to my flow (didn't change much from the original):
[
{
"id": "614ddf191ae89a8a",
"type": "tab",
"label": "Escape Room",
"disabled": false,
"info": "",
"env": []
},
{
"id": "3b61bfa4b5a01bad",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "Convert ms into hh:mm:ss",
"info": "",
"x": 710,
"y": 220,
"wires": []
},
{
"id": "7ba28fe8e8bd9765",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "Calculate time elapsed (or time remaining)",
"info": "",
"x": 400,
"y": 220,
"wires": [],
"icon": "node-red/parser-html.svg"
},
{
"id": "2ba4e18b445d4dd2",
"type": "uibuilder",
"z": "614ddf191ae89a8a",
"name": "Game Timer and Clue Display",
"topic": "",
"url": "timer_clue_display",
"fwdInMessages": false,
"allowScripts": true,
"allowStyles": true,
"copyIndex": true,
"templateFolder": "blank",
"extTemplate": "",
"showfolder": false,
"useSecurity": false,
"sessionLength": "",
"tokenAutoExtend": false,
"reload": false,
"sourceFolder": "src",
"credentials": {},
"x": 1290,
"y": 360,
"wires": [
[],
[]
]
},
{
"id": "19898d0278385d21",
"type": "inject",
"z": "614ddf191ae89a8a",
"name": "Every 1 sec",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "1",
"crontab": "",
"once": true,
"onceDelay": "",
"topic": "",
"payload": "",
"payloadType": "date",
"x": 130,
"y": 260,
"wires": [
[
"78cff886443ac0d2"
]
]
},
{
"id": "c719d55547411130",
"type": "inject",
"z": "614ddf191ae89a8a",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Here's a clue!",
"payloadType": "str",
"x": 110,
"y": 460,
"wires": [
[
"51914f8e439c2bd6",
"67d85c7cac21499b"
]
]
},
{
"id": "8d72eb1c2a04f761",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "Trigger",
"info": "",
"x": 150,
"y": 220,
"wires": [],
"icon": "node-red/parser-html.svg"
},
{
"id": "b731fdf7dbfb025f",
"type": "ui_audio",
"z": "614ddf191ae89a8a",
"name": "",
"group": "afbc44fd.ff57c8",
"voice": "",
"always": true,
"x": 780,
"y": 580,
"wires": []
},
{
"id": "67d85c7cac21499b",
"type": "file in",
"z": "614ddf191ae89a8a",
"name": "",
"filename": "C:\\Users\\Magnus Bessing\\.node-red/lydeffekt.mp3",
"format": "",
"chunk": false,
"sendError": false,
"encoding": "none",
"allProps": false,
"x": 478,
"y": 560,
"wires": [
[
"b731fdf7dbfb025f"
]
]
},
{
"id": "78cff886443ac0d2",
"type": "function",
"z": "614ddf191ae89a8a",
"name": "Update Game Timer",
"func": "// The current timestamp is injected at the start of the flow\nvar currentTime = msg.payload;\n\n// If this is the first time the flow has run, set the start time\nif(flow.get(\"startTime\") === undefined) {\n flow.set(\"startTime\", currentTime);\n}\nvar startTime = flow.get(\"startTime\");\n\n// Calculate the time elapsed since the flow started\nvar elapsedTime = (currentTime - startTime);\n\n// Update the msg to carry time elapsed \nmsg.time = elapsedTime;\n// Or, time remaining\nmsg.time = 3600000 - elapsedTime;\n\n// Display value in the editor\nnode.status({fill:\"green\",shape:\"dot\",text:elapsedTime});\n\n// Pass value along the flow\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 400,
"y": 260,
"wires": [
[
"0f4dd8a9cd384296"
]
]
},
{
"id": "0f4dd8a9cd384296",
"type": "function",
"z": "614ddf191ae89a8a",
"name": "Format Time As HH:MM:SS",
"func": "// msg.time is in milliseconds\nvar t = msg.time / 1000;\nvar h = Math.floor(t / 3600);\nvar m = Math.floor(t % 3600 / 60);\nvar s = Math.floor(t % 3600 % 60);\n\n// Format into hh:mm:ss\nmsg.timerText = (\"0\" + h).slice(-2) + \":\" + (\"0\" + m).slice(-2) + \":\" + (\"0\" + s).slice(-2);\n\n// Update the editor node\nnode.status({fill:\"green\", shape:\"dot\", text:msg.timerText});\n\n// Forward the message along the flow\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 700,
"y": 260,
"wires": [
[
"757b1e4b735f5898"
]
]
},
{
"id": "bfa2a7bb18315c8f",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "Display on ui builder page",
"info": "",
"x": 1250,
"y": 320,
"wires": []
},
{
"id": "51914f8e439c2bd6",
"type": "trigger",
"z": "614ddf191ae89a8a",
"name": "",
"op1": "",
"op2": " ",
"op1type": "pay",
"op2type": "str",
"duration": "10",
"extend": false,
"overrideDelay": false,
"units": "s",
"reset": "",
"bytopic": "all",
"topic": "topic",
"outputs": 1,
"x": 410,
"y": 460,
"wires": [
[
"3ce749af4de669b7"
]
]
},
{
"id": "3ce749af4de669b7",
"type": "change",
"z": "614ddf191ae89a8a",
"name": "",
"rules": [
{
"t": "set",
"p": "clueText",
"pt": "msg",
"to": "payload",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 730,
"y": 460,
"wires": [
[
"757b1e4b735f5898"
]
]
},
{
"id": "757b1e4b735f5898",
"type": "join",
"z": "614ddf191ae89a8a",
"name": "",
"mode": "custom",
"build": "merged",
"property": "",
"propertyType": "full",
"key": "topic",
"joiner": "\\n",
"joinerType": "str",
"accumulate": true,
"timeout": "",
"count": "1",
"reduceRight": false,
"reduceExp": "",
"reduceInit": "",
"reduceInitType": "num",
"reduceFixup": "",
"x": 1010,
"y": 360,
"wires": [
[
"2ba4e18b445d4dd2"
]
]
},
{
"id": "9267f0b913b59480",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "How long to display clue before clearing",
"info": "",
"x": 430,
"y": 420,
"wires": []
},
{
"id": "889e1d50da175f74",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "Combine time + clue",
"info": "",
"x": 1010,
"y": 320,
"wires": []
},
{
"id": "922270e4cf4d52c1",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "Set clue text",
"info": "",
"x": 130,
"y": 420,
"wires": [],
"icon": "node-red/parser-html.svg"
},
{
"id": "f62b7b0e96068337",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "Set msg variable",
"info": "",
"x": 720,
"y": 420,
"wires": []
},
{
"id": "9098bee38e6b9abd",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "Select SFX to play when clue displayed",
"info": "",
"x": 450,
"y": 520,
"wires": []
},
{
"id": "0aaff4405e858ac8",
"type": "comment",
"z": "614ddf191ae89a8a",
"name": "Send to audio output",
"info": "",
"x": 740,
"y": 520,
"wires": []
},
{
"id": "c47ac5a73dc0dcdc",
"type": "ui_button",
"z": "614ddf191ae89a8a",
"name": "",
"group": "afbc44fd.ff57c8",
"order": 1,
"width": 0,
"height": 0,
"passthru": false,
"label": "button",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 130,
"y": 560,
"wires": [
[]
]
},
{
"id": "afbc44fd.ff57c8",
"type": "ui_group",
"name": "Hints",
"tab": "1c294719.eeb109",
"order": 2,
"disp": false,
"width": "10",
"collapse": false
},
{
"id": "1c294719.eeb109",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
