@hotnipi/node-red-dashboard-2-ui-edgewise-meter/resources/ui-edgewise-meter.umd.js

An edgewise meter gauge node for @flowfuse/node-red-dashboard

(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.hotnipi-ewm-light[data-v-c7f8a13c]{--hotnipi-ewm-mix:20%;--hotnipi-ewm-shadow:rgba(var(--v-theme-on-group-background),var(--hotnipi-ewm-mix));--hotnipi-ewm-background:rgb(var(--v-theme-group-background));--hotnipi-ewm-outline:rgba(var(--v-theme-on-group-background),40%)}.hotnipi-ewm-dark[data-v-c7f8a13c]{--hotnipi-ewm-mix: 75%;--hotnipi-ewm-shadow: rgba(var(--v-theme-group-background), var(--hotnipi-ewm-mix));--hotnipi-ewm-background: rgb(var(--v-theme-on-group-background));--hotnipi-ewm-outline: rgba(var(--v-theme-group-background), 100%)}.hotnipi-ewm-wrapper[data-v-c7f8a13c]{display:grid;gap:1rem;align-items:center;height:100%}.hotnipi-ewm-wrapper.hover:hover .hotnipi-ewm-exact[data-v-c7f8a13c],.hotnipi-ewm-wrapper.permanent .hotnipi-ewm-exact[data-v-c7f8a13c]{display:flex}.hotnipi-ewm-exact[data-v-c7f8a13c]{position:absolute;display:none;margin:1.5px;min-width:calc(var(--hotnipi-ewm-mini-display-size, 6) *1ch);padding-inline:.5rem;padding-top:2px;border:1px solid var(--hotnipi-ewm-shadow);background-color:var(--hotnipi-ewm-background);outline:1px solid var(--hotnipi-ewm-outline);outline-offset:-2px;text-align:center;border-radius:5px;font-size:small;color:#000;align-items:center;justify-content:center;box-shadow:0 0 6px #00000012,inset 0 0 12px #0000002b}.hotnipi-ewm-exact.top[data-v-c7f8a13c]{top:0}.hotnipi-ewm-exact.bottom[data-v-c7f8a13c]{bottom:0}.hotnipi-ewm-exact.left[data-v-c7f8a13c]{left:0}.hotnipi-ewm-exact.right[data-v-c7f8a13c]{right:0}.hotnipi-ewm-exact.big[data-v-c7f8a13c]{font-size:1.25rem;top:0;bottom:0}.hotnipi-ewm-dark .hotnipi-ewm-exact[data-v-c7f8a13c]{color:rgba(var(--v-theme-on-group-background),80%);border:1px solid var(--hotnipi-ewm-outline);background-color:rgba(var(--v-theme-group-background),60%);outline:1px solid rgba(var(--v-theme-on-group-background),30%)}.hotnipi-ewm-label[data-v-c7f8a13c]{min-width:1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hotnipi-ewm-body[data-v-c7f8a13c]{position:relative;min-width:3rem;width:100%;height:100%;display:flex;align-content:center}.hotnipi-ewm-body.hotnipi-ewm-light[data-v-c7f8a13c]{filter:drop-shadow(0px 2px 4px var(--hotnipi-ewm-shadow))}.hotnipi-ewm-display[data-v-c7f8a13c]{width:100%;height:100%;display:flex;justify-content:center;position:relative;box-sizing:border-box;overflow:hidden;border:3px solid var(--hotnipi-ewm-shadow);background-color:var(--hotnipi-ewm-background);outline:1px solid var(--hotnipi-ewm-outline);outline-offset:-2px;border-radius:6px;box-shadow:inset 0 0 9px 1px var(--hotnipi-ewm-shadow)}.hotnipi-ewm-display[data-v-c7f8a13c]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,var(--hotnipi-ewm-shadow),transparent 30%,transparent 70%,var(--hotnipi-ewm-shadow))}.hotnipi-ewm-backplate[data-v-c7f8a13c]{width:calc(var(--hotnipi-ewm-size) * 1px);flex-shrink:0;position:relative}.hotnipi-ewm-numbers[data-v-c7f8a13c]{position:relative;display:flex;flex-direction:row;justify-content:space-between;height:100%;font-size:1.25rem;word-wrap:normal;align-content:center;transform:translate(-50%);transition:var(--hotnipi-ewm-easing)}.hotnipi-ewm-numbers[data-v-c7f8a13c] :nth-child(2n){font-size:var(--hotnipi-ewm-small-digits)}.hotnipi-ewm-numbers[data-v-c7f8a13c]:after{content:"";position:absolute;right:0%;width:100%;top:0;height:25%;background:var(--hotnipi-ewm-gradient,repeating-linear-gradient(to right, #00000040, #00000040 40%, transparent 40%, transparent));background-size:4px,100%}.hotnipi-ewm-numbers[data-v-c7f8a13c]:before{content:var(--hotnipi-ewm-logo,"Made in Estonia hotNipi ® Gauges");position:absolute;font-size:xx-small;text-align:end;top:0;right:0;bottom:0;left:0;width:20ch;translate:-120%;color:var(--hotnipi-ewm-outline)}.hotnipi-ewm-num[data-v-c7f8a13c]{position:relative;text-align:center;width:100%;color:#000;align-self:flex-end;border-bottom:3px solid transparent}.hotnipi-ewm-needle[data-v-c7f8a13c]{position:absolute;left:calc(50% - .5px);top:0;width:1px;height:100%;background-color:#eb1e1e;box-shadow:0 0 7px 2px var(--hotnipi-ewm-shadow)}.hotnipi-ewm-dark .hotnipi-ewm-needle[data-v-c7f8a13c]{box-shadow:0 0 12px 1px var(--hotnipi-ewm-shadow)}.hotnipi-ewm-size-error[data-v-c7f8a13c]{position:absolute;top:0;right:0;bottom:0;left:0;font-size:x-small;color:red;text-align:center;display:flex;justify-content:center}.hotnipi-ewm-size-error>p[data-v-c7f8a13c]{max-width:140px}@keyframes blink-c7f8a13c{50%{opacity:0}}.hotnipi-ewm-blink[data-v-c7f8a13c]{animation:blink-c7f8a13c 4s step-start 0s infinite}.hotnipi-ewm-blonk[data-v-c7f8a13c]{animation:blink-c7f8a13c 4s step-start 2s infinite}')),document.head.appendChild(t)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a["ui-edgewise-meter"]={},a.vuex,a.Vue))})(this,function(a,l,o){"use strict";const g=(t,i)=>{const n=t.__vccOpts||t;for(const[e,s]of i)n[e]=s;return n},_={name:"UIEdgewiseMeter",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},setup(t){},data(){return{min:0,max:10,count:20,size:800,dark:!1,sectors:[{start:0,color:"lightblue"},{start:3,color:"transparent"},{start:7,color:"#ffc55c"},{start:9,color:"#fc5b5b"}],label:"T-out °C",smallDigits:!0,precision:1,animation:"ease",logo:"",unit:"",value:0,sizeError:!1,timeout:null,styles:{},numbers:[0],rounder:100,class:"",property:"payload"}},computed:{...l.mapState("data",["messages"]),formatted:function(){return(Math.round(this.value*this.rounder)/this.rounder).toString().concat(this.unit)}},methods:{applyProperties:function(){this.min=Number(this.props.min),this.max=Number(this.props.max),this.count=Number(this.props.count),this.size=Number(this.props.displaysize),this.sectors=this.props.sectors,this.precision=Number(this.props.precision),this.dark=this.props.dark,this.smallDigits=this.props.smallDigits,this.logo=this.props.logo,this.unit=this.props.unit??"",this.label=this.props.label,this.animation=this.props.animation,this.class=this.props.myclass+" "+this.props.miniDisplay,this.miniDisplay=this.props.miniDisplay,this.miniDisplayProps=this.props.miniDisplayProps.split("-").join(" "),this.value=this.min,this.rounder=Math.max(this.precision,100),this.property=this.props.property||"payload"},generateNumbers:function(){const t=(this.max*this.precision-this.min*this.precision)/this.count;let i=this.min*this.precision,n=[];for(let e=0;e<this.count+1;++e)n.push(i),i+=t;n=n.map(e=>e/this.precision),this.numbers=n},generateStyles:function(){this.styles={"--hotnipi-ewm-logo":this.logo?JSON.stringify(this.logo):void 0,"--hotnipi-ewm-size":this.size,"--hotnipi-ewm-small-digits":this.smallDigits?"small":"inherit","--hotnipi-ewm-gradient":this.sectorGradient(),"--hotnipi-ewm-mini-display-size":this.miniDisplaySize(),"--hotnipi-ewm-easing":this.animation=="none"?"unset":this.animation=="ease"?"left 1s ease-in-out":"left 1s cubic-bezier( 0.6, 0.06, 0.132, 1.15 )","grid-template-columns":this.label?"auto 1fr":"1fr"}},miniDisplaySize:function(){var r;const t=Math.abs(this.min),i=Math.abs(this.max),n=Math.max(t,i).toString().length,e=((r=this.unit)==null?void 0:r.length)??0;return Number(n+e+this.rounder.toString().length)},sectorGradient:function(){let t="repeating-linear-gradient(to right, #00000040, #00000040 40%, transparent 40%, transparent)";if(this.sectors.length==0)return t;t=t.concat(", linear-gradient(to right,");let i,n=this.sectors.length-1;return this.sectors.forEach((e,s)=>{s==0?e.start==this.min?(t=t.concat(e.color,", "),s==n?t=t.concat(e.color):s+1<=n&&(i=this.position(this.sectors[s+1].start).toString(),t=t.concat(e.color," ",i,"%, "))):(t=t.concat("transparent, transparent "),i=this.position(e.start).toString(),t=t.concat(i,"%, "),s==n?(i=this.position(e.start).toString(),t=t.concat(e.color," ",i,"%, "),t=t.concat(e.color)):s+1<=n&&(i=this.position(e.start).toString(),t=t.concat(e.color," ",i,"%, "),i=this.position(this.sectors[s+1].start).toString(),t=t.concat(e.color," ",i,"%, "))):s==n?(i=this.position(e.start).toString(),t=t.concat(e.color," ",i,"%, "),t=t.concat(e.color)):(i=this.position(e.start).toString(),t=t.concat(e.color," ",i,"%, "),s+1<=n&&(i=this.position(this.sectors[s+1].start).toString(),t=t.concat(e.color," ",i,"%, ")))}),t=t.concat(")"),t},range:function(t,i,n,e){if(n=="clamp"&&(t<i.minin&&(t=i.minin),t>i.maxin&&(t=i.maxin)),n=="roll"){let r=i.maxin-i.minin;t=((t-i.minin)%r+r)%r+i.minin}let s=(t-i.minin)/(i.maxin-i.minin)*(i.maxout-i.minout)+i.minout;return e&&(s=Math.round(s)),s},position:function(t){const i=t??this.value,e=this.size/(this.count+1)/2*100/this.size;let s=(i-this.min)/(this.max-this.min)*100;s=t?s:100-s;const r={minin:0,maxin:100,minout:e,maxout:100-e};return this.range(s,r)},validate:function(t){let i;if(typeof t!="number"){if(i=parseFloat(t),isNaN(i))return null}else i=t;return i},move:function(){const t=this.$refs.plate;!this.$refs.display||!t||(t.style.left=this.position()+"%")},onPayload:function(t){var n,e,s,r,c,p,h,u,d,m,f,y;if((t==null?void 0:t.payload)!=null){const b=this.validate(t.payload);b!==null&&(this.value=b,this.move())}let i=!1;(n=t.ui_update)!=null&&n.label&&typeof t.ui_update.label=="string"&&(this.label=t.ui_update.label),(e=t.ui_update)!=null&&e.min&&typeof((s=t.ui_update)==null?void 0:s.min)=="number"&&(this.min=t.ui_update.min,i=!0),(r=t.ui_update)!=null&&r.max&&typeof((c=t.ui_update)==null?void 0:c.max)=="number"&&(this.max=t.ui_update.max,i=!0),(p=t.ui_update)!=null&&p.precision&&typeof((h=t.ui_update)==null?void 0:h.precision)=="number"&&(this.precision=t.ui_update.precision,i=!0),(u=t.ui_update)!=null&&u.count&&typeof((d=t.ui_update)==null?void 0:d.count)=="number"&&(this.count=t.ui_update.count,i=!0),(m=t.ui_update)!=null&&m.displaysize&&typeof((f=t.ui_update)==null?void 0:f.displaysize)=="number"&&(this.size=t.ui_update.displaysize,i=!0),i&&this.generateNumbers(),Array.isArray((y=t.ui_update)==null?void 0:y.sectors)&&(this.sectors=t.ui_update.sectors,this.generateStyles())},checkSize:function(){this.timeout=setTimeout(()=>{const t=this.$refs.plate,i=this.$refs.needle;if(!t||!i){this.timeout=null;return}let n=0;Array.from(t.children).forEach(e=>{n+=parseFloat(getComputedStyle(e).getPropertyValue("width"))}),n-this.size>.2&&(this.sizeError=!0,t.classList.add("hotnipi-ewm-blink"),i.classList.add("hotnipi-ewm-blink")),this.timeout=null},100)}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.onPayload(t)}),this.$socket.on("msg-input:"+this.id,t=>{this.onPayload(t),this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.applyProperties(),this.generateNumbers(),this.generateStyles(),this.move(),this.$socket.emit("widget-load",this.id),this.checkSize()},unmounted(){var t,i;this.timeout&&(clearTimeout(this.timeout),this.timeout=null),(t=this.$socket)==null||t.off("widget-load:"+this.id),(i=this.$socket)==null||i.off("msg-input:"+this.id)}},k={key:0,class:"hotnipi-ewm-label"},w={ref:"display",class:"hotnipi-ewm-display"},S={class:"hotnipi-ewm-backplate"},x={ref:"plate",class:"hotnipi-ewm-numbers"},z={key:0,class:"hotnipi-ewm-size-error hotnipi-ewm-blonk"},E={ref:"needle",class:"hotnipi-ewm-needle"};function N(t,i,n,e,s,r){return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["hotnipi-ewm-wrapper",s.class]),style:o.normalizeStyle(s.styles)},[s.label?(o.openBlock(),o.createElementBlock("div",k,o.toDisplayString(s.label),1)):o.createCommentVNode("",!0),o.createElementVNode("div",{class:o.normalizeClass(["hotnipi-ewm-body",{"hotnipi-ewm-dark":s.dark,"hotnipi-ewm-light":!s.dark}])},[o.createElementVNode("div",w,[o.createElementVNode("div",S,[o.createElementVNode("div",x,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(s.numbers,(c,p)=>(o.openBlock(),o.createElementBlock("div",{key:p,class:"hotnipi-ewm-num"},o.toDisplayString(c),1))),128))],512),s.sizeError?(o.openBlock(),o.createElementBlock("div",z,i[0]||(i[0]=[o.createElementVNode("p",null,"The configured size is too small. The digits cannot be placed in exact locations.",-1)]))):o.createCommentVNode("",!0)]),o.createElementVNode("div",E,null,512)],512),(o.openBlock(),o.createElementBlock("div",{key:0,class:o.normalizeClass(["hotnipi-ewm-exact",t.miniDisplayProps])},[o.createElementVNode("p",null,o.toDisplayString(r.formatted),1)],2))],2)],6)}const D=g(_,[["render",N],["__scopeId","data-v-c7f8a13c"]]);a.UIEdgewiseMeter=D,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});