DashboardV2 Numeric node

[ryanprel]

I'm working on transitioning from DashboardV1 to Dashboard V2 and one of the things I'm missing is the ability to create a Numeric node from V1. Attached is an example. I use this for setting the range for chilling a fermentation tank. I'm open to other options for setting this up but the numeric node worked well enough for me. Am I missing something or is it not available?

[hotNipi]

Vuetify doesn't have numeric but it's coming as far I know. So probably takes a bit to wait.

[arturv2000]

One option is to set the text input node as "number", will show like this

But only when if "focus", and it is not possible to configure range (min/max) and step increment.

The other solution is to use a ui-template node, to use Number inputs — Vuetify (vuetifyjs.com). It is not part of the official vuetify3 release, but it is in the labs and is currently included in DB2.

One example:

[{"id":"b876e60d043c0a3b","type":"ui-template","z":"24612f704ee219f9","group":"583272b857af8e59","name":"","order":2,"width":0,"height":0,"head":"","format":"<template>\n  <div>\n      <v-slider\n        style=\"margin-top: 30px; margin-bottom: 10px\"\n        v-model=\"valueTargetPressure\"\n        show-ticks=\"always\"\n        density=\"compact\"\n        :hide-details=\"true\"\n        step=\"0.1\"\n        :max=\"5.00001\"\n        :min=\"1.0\"\n        tick-size=\"4\"\n        thumb-label=\"always\"\n        :ticks=\"tickLabelsTargetPressure\"\n        label=\"Target Pressure\"\n        @update:model-value=\"sendDataTargetPressure\"\n      ></v-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tickLabelsTargetPressure: {\n          1: '1Bar',\n          2: '2Bar',\n          3: '3Bar',\n          4: '4Bar',\n          5: '5Bar',\n        },\n        valueTargetPressure: 1,\n      }\n    },\n    methods: {\n      sendDataTargetPressure: function (item) {\n        console.log({ topic: 'TargetPressure', payload: item })\n      },\n    },\n  }\n</script>\n<style>\n  .v-card {\n    outline: 5px solid red;\n  }\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1060,"y":1360,"wires":[[]]},{"id":"583272b857af8e59","type":"ui-group","name":"Test Slider","page":"2b8d0e81e32f8641","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"2b8d0e81e32f8641","type":"ui-page","name":"Test Gauge","ui":"f10950b00cebceb1","path":"/page14","icon":"home","layout":"flex","theme":"16d3200ded0b8b52","order":2,"className":"","visible":"true","disabled":"false"},{"id":"f10950b00cebceb1","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"16d3200ded0b8b52","type":"ui-theme","name":"Default Theme","colors":{"surface":"#097479","primary":"#097479","bgPage":"#111111","groupBg":"#333333","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

When it leaves the labs and pass to normal module of vue, there are plans to create a core widget node

Widget: Number Input

[joepavitt]

As @arturv2000 has shared (thanks!) its on our todo list as "Up Next", so should be released within Dashboard within the next couple of weeks

[ryanprel]

Thanks guys - I'm not in a hurry for this element, just need it in time for grape harvest in September and I can hold off a few weeks on finishing the conversion. I'll also be using it for my microgreens watering system to set the dosing time.