Distance<\/title>\n\n <style type=\"text\/css\"> \n\t\t\tbody{ \n\t\t\t\tfont-size:20px;\n\t\t\t} \n\n .myButton {\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);\n transition: box-shadow 0.2s ease;\n background: #fff;\n color: #797979; \n font-size: 18px;\n text-overflow: ellipsis;\n right: 0;\n overflow: hidden;\n width: 90px;\n height: 30px;\n border: 1px solid rgba(132, 132, 132, 0.4);\n border-radius: 5px;\n text-align: center;\n cursor: pointer;\n padding: 0;\n }\n\n .myButtonDark {\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);\n transition: box-shadow 0.2s ease;\n background: #3DAEE9;\n color: #BEBEBE; \n font-size: 18px;\n text-overflow: ellipsis;\n right: 0;\n overflow: hidden;\n width: 90px;\n height: 30px;\n border: 1px solid rgba(255, 255, 255, 0.4);\n border-radius: 5px;\n text-align: center;\n cursor: pointer;\n padding: 0;\n }\n\n\t\t<\/style>\n \n <script src=\"https:\/\/forillusion-bucket.cdn.bcebos.com\/sakura\/js\/jquery.min.js\"><\/script>\n <script>\n $(function () {\n if (getCookie(\"dark\") == 1) setDark();\n $.getScript(\"https:\/\/forillusion-bucket.cdn.bcebos.com\/sakura\/js\/mqtt.min.js\" , function(data){\n mqttConnect();\n })\n })\n\n var IP='';\n const connectUrl = 'wss:\/\/xfe5efc4.ala.cn-hangzhou.emqxsl.cn:8084\/mqtt';\n var date=new Date();\n const options = {\n connectTimeout: 4000,\n reconnectPeriod: 1000,\n clientId: 'web-'+date.getTime().toString(16).substring(5),\n username: 'Forillusion',\n password: 'for5177508',\n clean: true,\n };\n \n var client;\n var defaultTopic;\n var msg;\n const qos=0;\n \n function getIPAddress() \n {\n return fetch(\"https:\/\/api.ipify.org?format=json\") \n .then(response => response.json()) \n .then(data => { \n options.clientId = options.clientIdHead+'-'+data.ip;\n options.clientId += '-' + Math.random().toString(16).substring(2, 8); \n }) \n .catch(error => { \n console.log(\"Error:\", error); \n }); \n }\n \n\n function mqttConnect() { \n client = mqtt.connect(connectUrl, options);\n \n client.on('error', (error) => {\n console.log('\u8fde\u63a5\u5931\u8d25: ', error);\n client.end();\n });\n \n client.on('reconnect', () => {\n console.log('\u91cd\u8fde\u4e2d...');\n });\n \n client.on('connect', () => {\n console.log('\u8fde\u63a5\u6210\u529f:' + options.clientId);\n });\n \n client.on(\"close\", () => {\n console.log('\u5df2\u7ecf\u65ad\u5f00\u8fde\u63a5');\n });\n \n client.on('message', (topic, Msg) => {\n msg=Msg.toString();\n console.log('\u6536\u5230\u6d88\u606f\uff1a');\n console.log(' \u4e3b\u9898\uff1a', topic);\n console.log(' \u6d88\u606f\uff1a', msg);\n $(\"#distance\").text(msg.substring(1)+\"cm\");\n });\n\n setDefaultTopic(\"lamp\");\n \/\/ subscribe(\"distance\");\n subscribe();\n }\n \n function setDefaultTopic(topic){ \/\/\u8bbe\u7f6e\u9ed8\u8ba4\u4e3b\u9898\n defaultTopic = topic;\n console.log('\u8bbe\u7f6e\u9ed8\u8ba4\u4e3b\u9898\uff1a', topic);\n }\n \n function subscribe(topic=defaultTopic){ \/\/\u8ba2\u9605\u4e3b\u9898\n client.subscribe(topic, {qos} ,(error) => {\n if (error) {\n console.log('\u8ba2\u9605\u5931\u8d25\uff1a',error);\n return;\n }\n console.log('\u8ba2\u9605\u4e3b\u9898\uff1a', topic);\n });\n }\n \n function unsubscribe(topic=defaultTopic){ \/\/\u53d6\u6d88\u8ba2\u9605\u4e3b\u9898\n client.unsubscribe(topic, {qos}, (error) => {\n if (error) {\n console.log('\u53d6\u6d88\u8ba2\u9605\u5931\u8d25\uff1a', error);\n return;\n }\n console.log('\u53d6\u6d88\u8ba2\u9605\u4e3b\u9898\uff1a', topic);\n });\n }\n \n function publish(payload, topic=defaultTopic){ \/\/\u53d1\u5e03\u6d88\u606f\n client.publish(topic, payload, { qos }, (error) => {\n if (error) {\n console.log('\u53d1\u5e03\u5931\u8d25\uff1a',error);\n return;\n }\n console.log('\u53d1\u5e03\u6210\u529f\uff1a');\n console.log(' \u4e3b\u9898\uff1a', topic);\n console.log(' \u6d88\u606f\uff1a', payload);\n });\n }\n \n function disconnect() \/\/\u65ad\u5f00\u8fde\u63a5\n {\n if (client.connected) {\n try {\n client.end(false, () => {\n console.log('\u65ad\u5f00\u8fde\u63a5')\n })\n } catch (error) {\n console.log('\u65ad\u5f00\u8fde\u63a5\u5931\u8d25:', error)\n }\n }\n }\n\n function setDark()\n {\n $(\".myButton\").removeClass(\"myButton\").addClass(\"myButtonDark\");\n }\n\n function switchLight()\n {\n var payload=\"switch\";\n publish(payload);\n }\n\n function colours()\n {\n var payload=\"colours\";\n publish(payload);\n }\n\n function light()\n {\n var payload=\"light\";\n publish(payload);\n }\n\n function dark()\n {\n var payload=\"dark\";\n publish(payload);\n }\n\n function keepTime()\n {\n var payload=\"keeptime\"+$(\"#keepTime\").val();\n publish(payload);\n }\n\n function keepDistance()\n {\n var payload=\"distance\"+$(\"#keepDistance\").val();\n publish(payload);\n }\n\n function lock() {\n var payload = \"lock\";\n publish(payload);\n }\n\n function unlock() {\n var payload = \"unlock\";\n publish(payload);\n }\n <\/script>\n <\/head>\n \n <body>\n \n <p>\u8ddd\u79bb\uff1a<span id=\"distance\">\u83b7\u53d6\u4e2d...<\/span><br\/><\/p>\n\n <p>\n <button type=\"button\" onclick=\"switchLight()\" class=\"myButton\">\u5f00\u5173<\/button> \n <button type=\"button\" onclick=\"colours()\" class=\"myButton\">\u8c03\u8272<\/button>\n <\/p>\n\n <p>\n <button type=\"button\" onclick=\"light()\" class=\"myButton\">\u8c03\u4eae<\/button> \n <button type=\"button\" onclick=\"dark()\" class=\"myButton\">\u8c03\u6697<\/button>\n <\/p>\n\n <p>\n <button type=\"button\" onclick=\"lock()\" class=\"myButton\">lock<\/button> \n <button type=\"button\" onclick=\"unlock()\" class=\"myButton\">unlock<\/button>\n <\/p>\n\n <p>\n <input type=\"input\" id=\"keepTime\" style=\"width: 90px;\"> \n <button type=\"button\" onclick=\"keepTime()\" class=\"myButton\">\u4fdd\u6301\u65f6\u95f4<\/button>\n <\/p>\n\n <p>\n <input type=\"input\" id=\"keepTime\" style=\"width: 90px;\"> \n <button type=\"button\" onclick=\"keepDistance()\" class=\"myButton\">\u611f\u5e94\u8ddd\u79bb<\/button>\n <\/p>\n <\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Distance \u8ddd\u79bb\uff1a\u83b7\u53d6\u4e2d… \u5f00\u5173 \u8c03\u8272 \u8c03\u4eae &n &#","protected":false},"author":1,"featured_media":0,"parent":254,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1428","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/pages\/1428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/comments?post=1428"}],"version-history":[{"count":0,"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/pages\/1428\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/pages\/254"}],"wp:attachment":[{"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/media?parent=1428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1428,"date":"2024-03-22T16:52:59","date_gmt":"2024-03-22T08:52:59","guid":{"rendered":"https:\/\/www.forillusion.com\/?page_id=1428"},"modified":"2024-05-15T23:47:21","modified_gmt":"2024-05-15T15:47:21","slug":"tablelamp","status":"publish","type":"page","link":"https:\/\/www.forillusion.com\/index.php\/tools\/tablelamp\/","title":{"rendered":"\u53f0\u706f"},"content":{"rendered":"\n\n\n \n \n Distance<\/title>\n\n <style type=\"text\/css\"> \n\t\t\tbody{ \n\t\t\t\tfont-size:20px;\n\t\t\t} \n\n .myButton {\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);\n transition: box-shadow 0.2s ease;\n background: #fff;\n color: #797979; \n font-size: 18px;\n text-overflow: ellipsis;\n right: 0;\n overflow: hidden;\n width: 90px;\n height: 30px;\n border: 1px solid rgba(132, 132, 132, 0.4);\n border-radius: 5px;\n text-align: center;\n cursor: pointer;\n padding: 0;\n }\n\n .myButtonDark {\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);\n transition: box-shadow 0.2s ease;\n background: #3DAEE9;\n color: #BEBEBE; \n font-size: 18px;\n text-overflow: ellipsis;\n right: 0;\n overflow: hidden;\n width: 90px;\n height: 30px;\n border: 1px solid rgba(255, 255, 255, 0.4);\n border-radius: 5px;\n text-align: center;\n cursor: pointer;\n padding: 0;\n }\n\n\t\t<\/style>\n \n <script src=\"https:\/\/forillusion-bucket.cdn.bcebos.com\/sakura\/js\/jquery.min.js\"><\/script>\n <script>\n $(function () {\n if (getCookie(\"dark\") == 1) setDark();\n $.getScript(\"https:\/\/forillusion-bucket.cdn.bcebos.com\/sakura\/js\/mqtt.min.js\" , function(data){\n mqttConnect();\n })\n })\n\n var IP='';\n const connectUrl = 'wss:\/\/xfe5efc4.ala.cn-hangzhou.emqxsl.cn:8084\/mqtt';\n var date=new Date();\n const options = {\n connectTimeout: 4000,\n reconnectPeriod: 1000,\n clientId: 'web-'+date.getTime().toString(16).substring(5),\n username: 'Forillusion',\n password: 'for5177508',\n clean: true,\n };\n \n var client;\n var defaultTopic;\n var msg;\n const qos=0;\n \n function getIPAddress() \n {\n return fetch(\"https:\/\/api.ipify.org?format=json\") \n .then(response => response.json()) \n .then(data => { \n options.clientId = options.clientIdHead+'-'+data.ip;\n options.clientId += '-' + Math.random().toString(16).substring(2, 8); \n }) \n .catch(error => { \n console.log(\"Error:\", error); \n }); \n }\n \n\n function mqttConnect() { \n client = mqtt.connect(connectUrl, options);\n \n client.on('error', (error) => {\n console.log('\u8fde\u63a5\u5931\u8d25: ', error);\n client.end();\n });\n \n client.on('reconnect', () => {\n console.log('\u91cd\u8fde\u4e2d...');\n });\n \n client.on('connect', () => {\n console.log('\u8fde\u63a5\u6210\u529f:' + options.clientId);\n });\n \n client.on(\"close\", () => {\n console.log('\u5df2\u7ecf\u65ad\u5f00\u8fde\u63a5');\n });\n \n client.on('message', (topic, Msg) => {\n msg=Msg.toString();\n console.log('\u6536\u5230\u6d88\u606f\uff1a');\n console.log(' \u4e3b\u9898\uff1a', topic);\n console.log(' \u6d88\u606f\uff1a', msg);\n $(\"#distance\").text(msg.substring(1)+\"cm\");\n });\n\n setDefaultTopic(\"lamp\");\n \/\/ subscribe(\"distance\");\n subscribe();\n }\n \n function setDefaultTopic(topic){ \/\/\u8bbe\u7f6e\u9ed8\u8ba4\u4e3b\u9898\n defaultTopic = topic;\n console.log('\u8bbe\u7f6e\u9ed8\u8ba4\u4e3b\u9898\uff1a', topic);\n }\n \n function subscribe(topic=defaultTopic){ \/\/\u8ba2\u9605\u4e3b\u9898\n client.subscribe(topic, {qos} ,(error) => {\n if (error) {\n console.log('\u8ba2\u9605\u5931\u8d25\uff1a',error);\n return;\n }\n console.log('\u8ba2\u9605\u4e3b\u9898\uff1a', topic);\n });\n }\n \n function unsubscribe(topic=defaultTopic){ \/\/\u53d6\u6d88\u8ba2\u9605\u4e3b\u9898\n client.unsubscribe(topic, {qos}, (error) => {\n if (error) {\n console.log('\u53d6\u6d88\u8ba2\u9605\u5931\u8d25\uff1a', error);\n return;\n }\n console.log('\u53d6\u6d88\u8ba2\u9605\u4e3b\u9898\uff1a', topic);\n });\n }\n \n function publish(payload, topic=defaultTopic){ \/\/\u53d1\u5e03\u6d88\u606f\n client.publish(topic, payload, { qos }, (error) => {\n if (error) {\n console.log('\u53d1\u5e03\u5931\u8d25\uff1a',error);\n return;\n }\n console.log('\u53d1\u5e03\u6210\u529f\uff1a');\n console.log(' \u4e3b\u9898\uff1a', topic);\n console.log(' \u6d88\u606f\uff1a', payload);\n });\n }\n \n function disconnect() \/\/\u65ad\u5f00\u8fde\u63a5\n {\n if (client.connected) {\n try {\n client.end(false, () => {\n console.log('\u65ad\u5f00\u8fde\u63a5')\n })\n } catch (error) {\n console.log('\u65ad\u5f00\u8fde\u63a5\u5931\u8d25:', error)\n }\n }\n }\n\n function setDark()\n {\n $(\".myButton\").removeClass(\"myButton\").addClass(\"myButtonDark\");\n }\n\n function switchLight()\n {\n var payload=\"switch\";\n publish(payload);\n }\n\n function colours()\n {\n var payload=\"colours\";\n publish(payload);\n }\n\n function light()\n {\n var payload=\"light\";\n publish(payload);\n }\n\n function dark()\n {\n var payload=\"dark\";\n publish(payload);\n }\n\n function keepTime()\n {\n var payload=\"keeptime\"+$(\"#keepTime\").val();\n publish(payload);\n }\n\n function keepDistance()\n {\n var payload=\"distance\"+$(\"#keepDistance\").val();\n publish(payload);\n }\n\n function lock() {\n var payload = \"lock\";\n publish(payload);\n }\n\n function unlock() {\n var payload = \"unlock\";\n publish(payload);\n }\n <\/script>\n <\/head>\n \n <body>\n \n <p>\u8ddd\u79bb\uff1a<span id=\"distance\">\u83b7\u53d6\u4e2d...<\/span><br\/><\/p>\n\n <p>\n <button type=\"button\" onclick=\"switchLight()\" class=\"myButton\">\u5f00\u5173<\/button> \n <button type=\"button\" onclick=\"colours()\" class=\"myButton\">\u8c03\u8272<\/button>\n <\/p>\n\n <p>\n <button type=\"button\" onclick=\"light()\" class=\"myButton\">\u8c03\u4eae<\/button> \n <button type=\"button\" onclick=\"dark()\" class=\"myButton\">\u8c03\u6697<\/button>\n <\/p>\n\n <p>\n <button type=\"button\" onclick=\"lock()\" class=\"myButton\">lock<\/button> \n <button type=\"button\" onclick=\"unlock()\" class=\"myButton\">unlock<\/button>\n <\/p>\n\n <p>\n <input type=\"input\" id=\"keepTime\" style=\"width: 90px;\"> \n <button type=\"button\" onclick=\"keepTime()\" class=\"myButton\">\u4fdd\u6301\u65f6\u95f4<\/button>\n <\/p>\n\n <p>\n <input type=\"input\" id=\"keepTime\" style=\"width: 90px;\"> \n <button type=\"button\" onclick=\"keepDistance()\" class=\"myButton\">\u611f\u5e94\u8ddd\u79bb<\/button>\n <\/p>\n <\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Distance \u8ddd\u79bb\uff1a\u83b7\u53d6\u4e2d… \u5f00\u5173 \u8c03\u8272 \u8c03\u4eae &n &#","protected":false},"author":1,"featured_media":0,"parent":254,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1428","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/pages\/1428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/comments?post=1428"}],"version-history":[{"count":0,"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/pages\/1428\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/pages\/254"}],"wp:attachment":[{"href":"https:\/\/www.forillusion.com\/index.php\/wp-json\/wp\/v2\/media?parent=1428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}