Turn widget to version 2 and add more customization options

src/config.xml

@@ -1,5 +1,7 @@
 <?xml version='1.0' encoding='UTF-8'?>
-<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="panel" version="1.1.0">
+<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="panel" version="2.0.0">
+    <macversion>2</macversion>
+
     <details>
         <title>Panel</title>
         <email>[email protected]</email>
@@ -20,17 +22,29 @@
     </requirements>
 
     <preferences>
+        <preference name="title" type="text" label="Title" default="Panel" />
         <preference name="default-value" type="text" label="Default Value" default="--" />
         <preference name="default-unit" type="text" label="Default Unit" default="" />
         <preference name="max-height" type="text" label="Max height (Percentage)" default="60" />
         <preference name="min-height" type="text" label="Min height (Percentage)" default="10" />
         <preference name="decimals" type="text" label="Decimals" description="Number of decimals to use for number values. Empty for using all the available decimals" default="1" />
+        <preference name="background-color" type="text" label="Background color" default="#FFFFFFFF" />
+        <preference name="text-color" type="text" label="Text color" default="#333333FF" />
+        <preference name="bar-color" type="text" label="Bar color" default="#DDDDDDFF" />
+        <preference name="min-value" type="text" label="Minimum possible value" default="" />
+        <preference name="max-value" type="text" label="Maximum possible value" default="" />
+        <preference name="left-tag-text" type="text" label="Left tag text" default="" />
+        <preference name="right-tag-text" type="text" label="Right tag text" default="" />
     </preferences>
 
     <wiring>
         <inputendpoint name="textinput" type="text" label="Contents" description="Contents" friendcode="panel-content"/>
     </wiring>
 
     <contents src="index.html" useplatformstyle="true"/>
+    <scripts>
+        <script src="js/main.js" />
+    </scripts>
+    <entrypoint name="CoNWeT_Panel" />
     <rendering height="200px" width="400px"/>
 </widget>

src/css/styles.css

@@ -11,3 +11,62 @@ h1 {
 h1 > span {
     font-size: 60%;
 }
+
+h4 {
+    margin-top: 10px;
+    margin-bottom: 0;
+    width: 100%;
+}
+
+.minmax-container {
+    width: 100%;
+    position: relative;
+    margin: 10px auto 10px auto;
+    display: flex;
+    justify-content: space-between;
+    line-height: 0;
+    position: absolute;
+    bottom: 0;
+    padding: 0 10px;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+
+.minmax-bar-container {
+    flex-grow: 1;
+    transform: translateY(-50%);
+}
+
+.minmax-bar {
+    width: 100%;
+    height: 6px;
+    /* background-color: #ddd; */
+    border-radius: 5px;
+}
+
+.minmax-indicator {
+    width: 12px;
+    height: 12px;
+    /* background-color: #4caf50; */
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: left 0.5s ease;
+    left: 0;
+}
+
+.bar-tag {
+    /* color: #000; */
+    font-weight: bold;
+    font-size: 12px;
+}
+
+.bar-tag-left {
+    margin-right: 5px;
+}
+
+.bar-tag-right {
+    margin-left: 5px;
+}

src/doc/changelog.md

@@ -1,3 +1,11 @@
+## 2.0.0
+
+- Updates the widget to `macversion` 2.
+- Adds the ability to customize colors.
+- Adds the ability to add a title to the panel.
+- Adds the ability to add a bar that shows the current value in relation to a
+  minimum and maximum value.
+
 ## 1.1.0
 
 - Add a preference for controlling how many decimals to use when displaying

src/doc/userguide.md

@@ -5,9 +5,17 @@ The panel widget is a WireCloud widget that provides an easy way to display simp
 
 ## Settings
 
+- `Title`: Title to show in the panel (empty for not showing any title).
 - `Min height (Percentage)`: Minimal font-size to use. This value is a percentage relative to the available height.
 - `Max height (Percentage)`: Maximal font-size to use. This value is a percentage relative to the available height.
 - `Decimals`: Number of decimals to use for number values. Empty for using all the available decimals.
+- `Background color`: Background color to use for the panel.
+- `Text color`: Text color to use for the panel.
+- `Bar color`: Color to use for the bar that shows the current value in relation to a minimum and maximum value.
+- `Min value`: Minimum value to use for the bar.
+- `Max value`: Maximum value to use for the bar.
+- `Left tag text`: Text to show on the left side of the bar.
+- `Right tag text`: Text to show on the right side of the bar.
 
 ## Wiring
 

src/index.html

@@ -1,10 +1,15 @@
-<html>
-    <head>
-        <meta content="charset=utf-8" />
-        <link rel="stylesheet" type="text/css" href="css/styles.css">
-    </head>
-    <body>
-        <h1 id="message"><span id="unit"></span></h1>
-        <script src="js/main.js"></script>
-    </body>
-</html>
+<link rel="stylesheet" type="text/css" href="css/styles.css">
+
+<body>
+    <h4 id="title"></h4>
+    <h1 id="message"><span id="unit"></span></h1>
+    <div class="minmax-container" id="minmax-container" style="display: none;">
+        <div class="bar-tag bar-tag-left" id="bar-tag-left"></div>
+        <div class="minmax-bar-container">
+            <div class="minmax-bar" id="bar">
+                <div class="minmax-indicator" id="bar-indicator"></div>
+            </div>
+        </div>
+        <div class="bar-tag bar-tag-right" id="bar-tag-right"></div>
+    </div>
+</body>