Node-Red configuration
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ui-led.umd.js 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. (function() {
  2. "use strict";
  3. try {
  4. if (typeof document != "undefined") {
  5. var elementStyle = document.createElement("style");
  6. elementStyle.appendChild(document.createTextNode(".nrdb-ui-led[data-v-1c9d686c] {\n --ui-led-border-width: 12px;\n --ui-led-shadow-width: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n.nrdb-ui-led-label[data-v-1c9d686c] {\n flex-grow: 1;\n}\n.nrdb-ui-led-bulb[data-v-1c9d686c] {\n display: block;\n height: 65%;\n aspect-ratio: 1 / 1;\n background-color: var(--ui-led-color);\n box-shadow: inset #4413138a 0 -1px var(--ui-led-shadow-width) var(--ui-led-shadow-width);\n}\n.nrdb-ui-led-bulb-on[data-v-1c9d686c] {\n background: radial-gradient(#ffffff96, #ffffff00 70%), var(--ui-led-color);\n}\n.nrdb-ui-led-bulb--square[data-v-1c9d686c] {\n border-radius: 25%;\n}\n.nrdb-ui-led-bulb--circle[data-v-1c9d686c] {\n border-radius: 50%;\n}\n.nrdb-ui-led-bulb--border[data-v-1c9d686c] {\n border-width: var(--ui-led-border-width);\n border-color: #222;\n border-style: solid;\n}\n.nrdb-ui-led-bulb--glow[data-v-1c9d686c] {\n box-shadow: 0 0 calc(1.25 * var(--ui-led-border-width)) var(--ui-led-color), inset #44131340 0 -1px var(--ui-led-shadow-width) var(--ui-led-shadow-width);\n}"));
  7. document.head.appendChild(elementStyle);
  8. }
  9. } catch (e) {
  10. console.error("vite-plugin-css-injected-by-js", e);
  11. }
  12. })();
  13. (function(global, factory) {
  14. typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vuex"), require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vuex", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["ui-led"] = {}, global.vuex, global.Vue));
  15. })(this, function(exports2, vuex, vue) {
  16. "use strict";
  17. const _export_sfc = (sfc, props) => {
  18. const target = sfc.__vccOpts || sfc;
  19. for (const [key, val] of props) {
  20. target[key] = val;
  21. }
  22. return target;
  23. };
  24. const _sfc_main = {
  25. name: "UILed",
  26. inject: ["$socket"],
  27. props: {
  28. id: { type: String, required: true },
  29. props: { type: Object, default: () => ({}) },
  30. state: { type: Object, default: () => ({ enabled: false, visible: false }) }
  31. },
  32. data() {
  33. return {
  34. size: 24
  35. };
  36. },
  37. computed: {
  38. ...vuex.mapState("data", ["messages"]),
  39. hasValue: function() {
  40. return this.messages[this.id] !== void 0;
  41. },
  42. flexDirection: function() {
  43. return this.props.labelPlacement === "left" ? "row" : "row-reverse";
  44. },
  45. labelAlignment: function() {
  46. return this.props.labelAlignment;
  47. },
  48. color: function() {
  49. if (this.hasValue && this.props.evaluated) {
  50. const msg = this.messages[this.id];
  51. for (const i in this.props.evaluated) {
  52. const state = this.props.evaluated[i];
  53. if (typeof state.value === "object") {
  54. if (JSON.stringify(state.value) === JSON.stringify(msg.payload)) {
  55. return state.color;
  56. }
  57. } else if (state.value === msg.payload) {
  58. return state.color;
  59. }
  60. }
  61. }
  62. return "gray";
  63. }
  64. },
  65. mounted() {
  66. this.$socket.on("widget-load:" + this.id, (msg) => {
  67. this.$store.commit("data/bind", {
  68. widgetId: this.id,
  69. msg
  70. });
  71. });
  72. this.$socket.on("msg-input:" + this.id, (msg) => {
  73. this.$store.commit("data/bind", {
  74. widgetId: this.id,
  75. msg
  76. });
  77. });
  78. this.$socket.emit("widget-load", this.id);
  79. this.$nextTick(() => {
  80. this.size = this.$refs.led.clientWidth;
  81. });
  82. },
  83. unmounted() {
  84. var _a, _b;
  85. (_a = this.$socket) == null ? void 0 : _a.off("widget-load" + this.id);
  86. (_b = this.$socket) == null ? void 0 : _b.off("msg-input:" + this.id);
  87. }
  88. };
  89. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  90. return vue.openBlock(), vue.createElementBlock(
  91. "div",
  92. {
  93. class: "nrdb-ui-led",
  94. style: vue.normalizeStyle(`--ui-led-shadow-width: ${$data.size * 0.1}px; --ui-led-border-width: ${$data.size * 0.15}px; --ui-led-color: ${$options.color}; flex-direction: ${$options.flexDirection}`)
  95. },
  96. [
  97. $props.props.label ? (vue.openBlock(), vue.createElementBlock(
  98. "label",
  99. {
  100. key: 0,
  101. class: "nrdb-ui-led-label v-label",
  102. style: vue.normalizeStyle(`justify-content: ${$options.labelAlignment}`)
  103. },
  104. vue.toDisplayString($props.props.label),
  105. 5
  106. /* TEXT, STYLE */
  107. )) : vue.createCommentVNode("v-if", true),
  108. vue.createElementVNode(
  109. "span",
  110. {
  111. ref: "led",
  112. class: vue.normalizeClass(["nrdb-ui-led-bulb", `${$options.hasValue ? "nrdb-ui-led-bulb-on" : ""} nrdb-ui-led-bulb--${$props.props.shape} ${$props.props.showGlow && $options.hasValue ? "nrdb-ui-led-bulb--glow" : ""} ${$props.props.showBorder ? "nrdb-ui-led-bulb--border" : ""}`])
  113. },
  114. vue.toDisplayString(_ctx.value !== null ? _ctx.value : "No Message Received"),
  115. 3
  116. /* TEXT, CLASS */
  117. )
  118. ],
  119. 4
  120. /* STYLE */
  121. );
  122. }
  123. const UILed = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1c9d686c"], ["__file", "/Users/joepavitt/Documents/flowforge/development/nodes/node-red-dashboard-2-ui-led/ui/components/UILed.vue"]]);
  124. exports2.UILed = UILed;
  125. Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
  126. });