SIMOR Technology: Januari 2022

Jumat, 28 Januari 2022

SIM #1 "Modbus RTU Arduino"

Rabu, 12 Januari 2022

Tampilan Dashboard Node Red Mode Dark

import :

[{"id":"85965edc.72971","type":"ui_template","z":"e05f44e3.142218","group":"2a745e6b.07df92","name":"Dashboard Theme : Modern Dark","order":2,"width":0,"height":0,"format":"<div>\n <link href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n --background: #212529;\n --on-background: white;\n --surface: #2d3136;\n --on-surface: white;\n --primary: var(--nr-dashboard-widgetColor);\n --on-primary: white;\n --secondary: var(--nr-dashboard-groupTextColor);\n --accent: red;\n --radius-s: 8px;\n --font-weight-m: 300;\n --font-weight-m: 500;\n --font-weight-l: 700;\n --space-s: 8px;\n --space-m: 16px;\n --space-l: 32px;\n }\n\n body.nr-dashboard-theme {\n background-color: var(--background);\n font-family: 'Montserrat', sans-serif;\n }\n .nr-dashboard-theme ui-card-panel {\n background-color: var(--background);\n border: 0;\n }\n .nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: var(--primary);\n border-radius: var(--radius-s);\n padding: 8px !important;\n line-height: inherit;\n font-weight: var(--font-weight-l);\n color: var(--on-primary);\n }\n .nr-dashboard-theme [ui-card-size=\"2x2\"].nr-dashboard-button .md-button {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n white-space: pre-line;\n }\n \n .nr-dashboard-theme .nr-dashboard-button .md-button ui-icon {\n margin-bottom: 8px;\n }\n .nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: var(--secondary);\n }\n body.nr-dashboard-theme md-content md-card {\n background-color: var(--surface);\n }\n md-card.md-default-theme, md-card {\n border-radius: var(--radius-s);\n }\n .nr-dashboard-theme .nr-dashboard-gauge-titlel {\n font-weight: var(--font-weight-l) !important; \n }\n .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n font-weight: var(--font-weight-l); \n text-transform: capitalize;\n color: var(--on-background);\n }\n .nr-dashboard-cardpanel > p {\n margin-left: 0;\n padding-left: 16px;\n }\n body.nr-dashboard-theme md-toolbar {\n background-color: var(--surface);\n }\n .md-default-theme .md-datepicker-calendar, .md-datepicker-calendar,\n .md-default-theme .md-calendar, .md-calendar{\n background-color: var(--surface);\n color: var(--on-surface);\n }\n .md-default-theme .md-datepicker-calendar-pane, .md-datepicker-calendar-pane{\n border: 0;\n }\n .md-default-theme .md-calendar-month-label md-icon, .md-calendar-month-label md-icon, .md-default-theme .md-datepicker-input, .md-datepicker-input {\n color: var(--on-surface);\n }\n body.nr-dashboard-theme md-content md-card {\n color: var(--on-surface);\n }\n .nr-dashboard-theme .nr-dashboard-numeric .value {\n background-color: var(--surface);\n color: var(--on-surface);\n }\n .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n color: var(--on-surface);\n border-color: var(--on-surface);\n }\n .nr-dashboard-theme .nr-dashboard-dropdown .md-select-icon {\n color: var(--on-surface);\n }\n .nr-dashboard-theme .nr-dashboard-date-picker md-input-container .md-input {\n color: var(--on-surface);\n border-color: var(--on-surface);\n }\n .nr-dashboard-theme .nr-dashboard-date-picker .md-datepicker-triangle-button .md-datepicker-expand-triangle {\n border-top-color: var(--on-surface);\n }\n body.nr-dashboard-theme md-sidenav {\n background-color: var(--surface);\n }\n md-list-item._md-button-wrap > div.md-button:first-child, md-list-item .md-list-item-inner {\n background-color: var(--surface);\n }\n </style>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":520,"y":160,"wires":[[]],"icon":"node-red-dashboard/ui_colour_picker.png","info":"# Modern Dark Theme for node-red-dashboard\n\nInspired by Victor Lucachi with his [Node Red Dashboard Concept](https://dribbble.com/shots/10356530-Node-Red-Dashboard-Concept) on Dribbble. Thank you for your work.\n\n## Customize\n\n1. Go on dashboard customisation tab (At the right of Debug Console).\n2. Select the style `Dark`.\n3. Pick the color you want. Example `#66B5F8`\n\n## Buttons\n\nUse `2x2` size for buttons with icon and text on the screenshot"},{"id":"2a745e6b.07df92","type":"ui_group","z":"","name":"Default","tab":"e63bce2d.68925","order":5,"disp":true,"width":"6","collapse":true},{"id":"e63bce2d.68925","type":"ui_tab","z":"","name":"Denon","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

Customize

Go on dashboard customisation tab (At the right of Debug Console).
Select the style Dark.
Pick the color you want. Example #66B5F8

Senin, 10 Januari 2022

Cara Menambahkan jam tanggal tahun di toolbar Node Red

import text dibawah ini

[{"id":"b97bc1c0.cb899","type":"ui_template","z":"7583a640.3bbbd8","group":"c982fbb8.1deb38","name":"Clock Toolbar","order":2,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n\n$(function() {\n if($('.md-toolbar-tools').length != 0){\n loadClock();\n }else setTimeout(loadClock, 500)\n});\n\nfunction loadClock(){\n $('#clock').remove();\n var toolbar = $('.md-toolbar-tools');\n \n var div = $('<div/>');\n var p = $('<p/ id=\"clock\">');\n \n div.append(p);\n div[0].style.margin = '5px 5px 5px auto';\n toolbar.append(div);\n\n function displayTitle(lh) {\n p.text(lh); \n }\n \n function upTime() {\n var d = new Date();\n p.text(d.toLocaleString());\n }\n\n if(document.clockInterval){ \n clearInterval(document.clockInterval);\n document.clockInterval = null;\n }\n \n document.clockInterval = setInterval(upTime,1000);\n}\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"global","x":420,"y":80,"wires":[[]]},{"id":"c982fbb8.1deb38","type":"ui_group","z":"","name":"hidden_group","tab":"7c447e96.4b96a","disp":false,"width":"6","collapse":false},{"id":"7c447e96.4b96a","type":"ui_tab","z":"","name":"Zooland Sys","icon":"home","order":1,"disabled":false,"hidden":false}]

Cara Menambahkan Fitur Login Di Dashboard Node Red

Berikut langkah-langkahnya :

1. Generate Password dulu (caranya di artikel sebelumnya)

2. Copy Text hasil generate password

3. Buka file Settings.js di folder .node-red dengan Notepad (saya pakai notepad++)

4. uncomment text di bawah ini:

//httpNodeAuth: {user:"admin",pass:"$2b$08$"},

//httpStaticAuth: {user:"admin",pass:"$2b$08$"},

5. paste generate password di sebelah pass:".

6. save

7. run node red

8. buka browser dan msuk ke dashboard node red

Generate Password di Node Red

run CMD / SSH:

ketik: node-red admin hash-pw

ketik password yang di inginkan.

kemudian ENTER

text di bawah password itu yang akan di copy di file settings.js

Minggu, 09 Januari 2022

Cara Mengambil Data dari Blynk IoT ke Node Red

Rabu, 05 Januari 2022

Cara merubah background Node Red

1. cari gambar yang bagus

2. copy gambar ke folder C:\Users\TOSHIBA\.node-red

3. import node dibawah ini ke node red:

[{"id":"aef760ca.6f201","type":"ui_template","z":"7e5c236f.8633ec","group":"72303c1.198bdc4","name":"","order":1,"width":0,"height":0,"format":"<style>\n body {\n background-image: url(\"/pic.jpg\");\n background-repeat: no-repeat;\n background-position: right top;\n background-size: 100%;\n background-attachment: fixed;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":240,"y":400,"wires":[[]]},{"id":"72303c1.198bdc4","type":"ui_group","z":"","name":"Default","tab":"d50f4120.5bc2d","order":1,"disp":true,"width":"6","collapse":false},{"id":"d50f4120.5bc2d","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

4. buka file settings.js di folder node red

uncomment dan edit bagian di bawah ini

httpStatic: 'C:/Users/TOSHIBA/.node-red',

5. save

6. stop node red

7. start

sumber :

https://discourse.nodered.org/t/gui-background-image/30588/13

SIMOR Technology