Add a progress bar

config/rzl.js

@@ -146,6 +146,13 @@ const config : Config = {
               return msg.toString()
           }
         }
+      },
+      printer_3d_progress: {
+        state: "/service/ultimaker/job",
+        command: "",
+        defaultValue: "",
+        values: {},
+        parseState: msg => JSON.parse(msg.toString()).progress || 0
       }
     },
     utils.esper_topics("afba40", "flyfry"),
@@ -451,6 +458,18 @@ const config : Config = {
           type: "link",
           link: "http://ultimaker.rzl/",
           text: "Open Webinterface"
+        },
+        {
+          type: "section",
+          text: "Current Job"
+        },
+        {
+          type: "progress",
+          icon: "rotate-right",
+          min: 0,
+          max: 1,
+          text: "Printing Progress",
+          topic: "printer_3d_progress"
         }
       ]
     },

src/components/UiItemList/UiItem.js

@@ -12,6 +12,7 @@ import { FormControl } from "material-ui/Form";
 import Select from "material-ui/Select";
 import { MenuItem } from "material-ui/Menu";
 import Button from "material-ui/Button";
+import { LinearProgress } from "material-ui/Progress";
 
 import keyOf from "utils/keyOf";
 import { getInternals, getActuals } from "utils/state";
@@ -214,3 +215,18 @@ export class Text extends UiControl<UIText> {
     ];
   }
 }
+
+export class Progress extends UiControl<UIProgress> {
+  render() {
+    const min = this.props.item.min || 0;
+    const max = this.props.item.max || 100;
+    const val = parseFloat(this.getValue().internal || this.getValue().actual);
+    const value = val * 100 / max - min;
+    return [
+      <ListItemText key="label" secondary={this.props.item.text} />,
+      <div style={{ flex: "10 1 auto" }} key="progressbar">
+        <LinearProgress mode="determinate" value={value} />
+      </div>
+    ];
+  }
+}

src/components/UiItemList/index.js

@@ -13,7 +13,7 @@ import { renderIcon } from "utils/parseIconName";
 import Slider from "material-ui-old/Slider";
 import MuiThemeProvider from "material-ui-old/styles/MuiThemeProvider";
 
-import { Toggle, DropDown, Link, Section, Text } from "./UiItem";
+import { Toggle, DropDown, Link, Section, Text, Progress } from "./UiItem";
 
 export type UiItemListProps = {
   controls: Array<ControlUI>,
@@ -76,6 +76,11 @@ export default class UiItemList extends React.Component<UiItemListProps> {
         state={this.props.state}
         onChangeState={this.props.onChangeState} />;
     }
+    case "progress": {
+      return <Progress item={control}
+        state={this.props.state}
+        onChangeState={this.props.onChangeState} />;
+    }
     default: {
       throw new Error(
         `Unknown UI type "${control.type}" for "${control.text}" component`

types/types.js

@@ -84,6 +84,15 @@ declare type UIText = $ReadOnly<{|
   icon?: string
 |}>;
 
+declare type UIProgress = $ReadOnly<{|
+  type: "progress",
+  text: string,
+  topic: string,
+  icon?: string,
+  min?: number,
+  max?: number
+|}>;
+
 declare type ControlUI =
     UIToggle
   | UIDropDown
@@ -91,6 +100,7 @@ declare type ControlUI =
   | UISection
   | UILink
   | UIText
+  | UIProgress
 
 declare type Control = {
   name: string,