Better sliders!

Add marks and value indication. (Fixes #146)

config/uwap-home/index.js

@@ -493,6 +493,11 @@ const config: Config = {
           min: 0,
           max: 255,
           text: "Helligkeit",
+          marks: [
+            { value: 1, label: "Dunkel" },
+            { value: 120, label: "Medium" },
+            { value: 254, label: "Hell" }
+          ],
           icon: svg(icons.mdiBrightness7),
           topic: "livingroombrightness"
         },

src/components/App.js

@@ -125,7 +125,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
         const topic = topics[i];
         const stateTopic = this.topics[topic].state;
         const typeConversion = stateTopic?.type?.from ?? stateTopic?.type;
-        const val = (typeConversion ?? ((x) => x.toString()))(message);
+        const val = (typeConversion ?? ((x: Buffer) => x.toString()))(message);
         this.setMqttStateDebounced(
           {mqttState: Object.assign({},
             merge(this.state.mqttState, { [topic]: val}))});
@@ -152,7 +152,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
         return;
       }
       const rawTopic = commandTopic.name;
-      const typeConversion = commandTopic.type?.to ?? commandTopic.type;
+      const typeConversion = commandTopic?.type?.to ?? commandTopic.type;
       const value = (typeConversion ?? Buffer.from)(val);
       this.state.mqttSend(rawTopic, value);
     } catch (err) {

src/components/UiItems/Slider.js

@@ -16,10 +16,12 @@ const BaseComponent = ({Icon, Label}, item, state, changeState) => (
     <Label />
     <SliderComponent
       value={parseFloat(getValue(item, state))}
-      min={item.min || 0} max={item.max || 100}
+      min={item.min ?? 0} max={item.max ?? 100}
-      step={item.step || 1}
+      step={item.step}
+      marks={item.marks ?? false}
       onChange={changeSliderValue(item, changeState)}
       disabled={isDisabled(item, state)}
+      valueLabelDisplay="auto"
       style={{marginLeft: 40}} />
   </React.Fragment>
 );

src/config/flowtypes.js

@@ -58,9 +58,10 @@ export type UISlider = $ReadOnly<{|
   topic: string,
   icon?: Icon,
   enableCondition?: (s: State) => boolean,
+  marks?: boolean | Array<{ value: number, label: string}>,
   min?: number,
   max?: number,
-  step?: number
+  step?: ?number
 |}>;
 
 export type UISection = $ReadOnly<{|

src/config/types.js

@@ -15,7 +15,7 @@ export const json = (path: string, innerType?: TopicType): TopicType => {
     from: (msg) => parseAgain(Buffer.from(
       at(JSON.parse(msg.toString()), path)[0].toString())),
     to: (msg) => Buffer.from(
-      JSON.serialize(set({}, path, parseFirst(msg).toString())))
+      JSON.stringify(set({}, path, parseFirst(msg).toString())))
   };
 };