${text}
Anyone with a link can now view this file.
${v}`)} ${children} `; }; function Main({}) { const [slaveUrl, setSlaveUrl] = useState('tcp://192.168.0.100:502'); //const [slaveUrl, setSlaveUrl] = useState('tcp://127.0.0.1:10502'); const [slaveId, setSlaveId] = useState(1); const [startReg, setStartReg] = useState(0); const [values, setValues] = useState('0'); const [numRegs, setNumRegs] = useState(1); const [func, setFunc] = useState(3); const [connectTimeout, setConnectTimeout] = useState(1500); const [response, setResponse] = useState(''); const onexec = ev => (setResponse('') || 1) && fetch('api/modbus/exec' , { method: 'post', body: JSON.stringify({ url: slaveUrl, id: slaveId, reg: startReg, values: (values || '0').split(',').map(v => parseInt(v)), timeout: connectTimeout, func: func, nregs: numRegs }) }).then(r => r.json()) .then(r => setResponse(JSON.stringify(r, null, 2))); const funcs = [ [3, '3: Read Multiple Holding Registers'], [4, '4: Read Multiple Input Registers'], // [6, '6: Write Single Holding Register'], [16, '16: Write Multiple Holding Registers'], [43, '43: Read Device ID'], ]; const setnumregs = function(val) { // Number of registers changed setValues(Array(val).fill(0).join(',')); // Values: zero-filled array return setNumRegs(val); // And set the number of regs }; return html`
${response} `; }; function Settings({}) { const [settings, setSettings] = useState(null); const [saveResult, setSaveResult] = useState(null); const refresh = () => fetch('api/settings/get') .then(r => r.json()) .then(r => setSettings(r)); useEffect(refresh, []); const mksetfn = k => (v => setSettings(x => Object.assign({}, x, {[k]: v}))); const onsave = ev => fetch('api/settings/set', { method: 'post', body: JSON.stringify(settings) }).then(r => r.json()) .then(r => setSaveResult(r)) .then(refresh); if (!settings) return ''; const logOptions = [[0, 'Disable'], [1, 'Error'], [2, 'Info'], [3, 'Debug']]; return html` ${saveResult && html`<${Notification} ok=${saveResult.status} text=${saveResult.message} close=${() => setSaveResult(null)} />`} MQTT Forwarding <${Setting} title="Enable MQTT forwarding" value=${settings.mqtt_enabled} setfn=${mksetfn('mqtt_enabled')} type="switch" /> <${Setting} title="MQTT Server URL" value=${settings.mqtt_server_url} setfn=${mksetfn('mqtt_server_url')} /> <${Setting} title="MQTT Topic RX" value=${settings.mqtt_topic_rx} setfn=${mksetfn('mqtt_topic_rx')} /> <${Setting} title="MQTT Topic TX" value=${settings.mqtt_topic_tx} setfn=${mksetfn('mqtt_topic_tx')} /> <${Button} icon=${Icons.save} onclick=${onsave} title="Save Settings" /> <${DeveloperNote}> MQTT forwarding sends MQTT message to the TX topic every time a Modbus slave was successfully interrogated, in either manual or automatic mode. The RX topic can be used to send Modbus commands over MQTT. The command should be a JSON message of the following format: {"url": "tcp://IP:PORT", "reg": NUM, "id": NUM, "func": NUM} Console Log <${Setting} title="Log Level" value=${settings.log_level} setfn=${mksetfn('log_level')} type="select" addonLeft="0-3" options=${logOptions} /> <${Button} icon=${Icons.save} onclick=${onsave} title="Save Settings" /> `; }; const App = function({}) { const [url, setUrl] = useState('/'); const [showSidebar, setShowSidebar] = useState(true); return html` <${Sidebar} url=${url} show=${showSidebar} /> <${Header} showSidebar=${showSidebar} setShowSidebar=${setShowSidebar} /> <${Router} onChange=${ev => setUrl(ev.url)} history=${History.createHashHistory()} > <${Main} default=${true} /> <${Settings} path="settings" /> `; }; window.onload = () => render(h(App), document.body);
{"url": "tcp://IP:PORT", "reg": NUM, "id": NUM, "func": NUM} Console Log <${Setting} title="Log Level" value=${settings.log_level} setfn=${mksetfn('log_level')} type="select" addonLeft="0-3" options=${logOptions} /> <${Button} icon=${Icons.save} onclick=${onsave} title="Save Settings" /> `; }; const App = function({}) { const [url, setUrl] = useState('/'); const [showSidebar, setShowSidebar] = useState(true); return html` <${Sidebar} url=${url} show=${showSidebar} /> <${Header} showSidebar=${showSidebar} setShowSidebar=${setShowSidebar} /> <${Router} onChange=${ev => setUrl(ev.url)} history=${History.createHashHistory()} > <${Main} default=${true} /> <${Settings} path="settings" /> `; }; window.onload = () => render(h(App), document.body);