First cut at new styling

interface/resources/images/Audio-Loudness-Icons/vol-0.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 318.9 318.9" style="enable-background:new 0 0 318.9 318.9;" xml:space="preserve">
+<path d="M144.6,79.6c0-11.8-5.4-20.1-16-24.1c-7.7-2.9-18.9-2.5-27.5,7C90.3,74.3,79,86.6,67.2,99c-1,1.1-3,1.9-4.7,2
+	c-3.7,0.2-7.4,0.2-11,0.1c-2.8,0-5.5,0-8.3,0c-14.5,0.3-25.9,10.8-26,23.8c-0.2,27.9-0.2,41.1,0,70.6c0.1,11.1,9.8,21.8,20.8,22.8
+	c4.8,0.4,9.7,0.5,14.4,0.6c3.4,0.1,6.9,0.1,10.3,0.3c1.6,0.1,3.4,0.9,4.4,1.9c10.4,11,22.3,23.6,33.5,36.2c5.3,6,12.2,9.1,19.4,9.1
+	c2.9,0,5.6-0.5,8.6-1.6c10.4-3.7,15.8-12.5,15.8-24.7c0-21.7,0-39.1,0-58.5v-42.9c0-19.6,0-59.2,0-59.2 M118.4,82.6v155.1l-1.5-1.6
+	c-2.4-2.5-4.5-4.9-6.7-7.2l-8.3-9c-7.6-8.3-15.3-16.6-23-24.8c-1.4-1.5-3.8-2.2-5.5-2.2c-4.3-0.1-8.7-0.1-13.1-0.1
+	c-2.3,0-4.3,0-6.5,0l-9.5,0v-65.2h2.4c2.4,0,4.8-0.1,7.2-0.1c6,0,12.2,0.1,18.2,0.1c0.1,0,0.3,0,0.4,0c3,0,5.3-1,7.6-3.6
+	c9.9-10.9,19.9-21.6,30.2-32.7L118.4,82.6z"/>
+</svg>

interface/resources/images/Audio-Loudness-Icons/vol-1.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 318.9 318.9" style="enable-background:new 0 0 318.9 318.9;" xml:space="preserve">
+<path d="M144.6,79.6c0-11.8-5.4-20.1-16-24.1c-7.7-2.9-18.9-2.5-27.5,7C90.3,74.3,79,86.6,67.2,99c-1,1.1-3,1.9-4.7,2
+	c-3.7,0.2-7.4,0.2-11,0.1c-2.8,0-5.5,0-8.3,0c-14.5,0.3-25.9,10.8-26,23.8c-0.2,27.9-0.2,41.1,0,70.6c0.1,11.1,9.8,21.8,20.8,22.8
+	c4.8,0.4,9.7,0.5,14.4,0.6c3.4,0.1,6.9,0.1,10.3,0.3c1.6,0.1,3.4,0.9,4.4,1.9c10.4,11,22.3,23.6,33.5,36.2c5.3,6,12.2,9.1,19.4,9.1
+	c2.9,0,5.6-0.5,8.6-1.6c10.4-3.7,15.8-12.5,15.8-24.7c0-21.7,0-39.1,0-58.5v-42.9c0-19.6,0-59.2,0-59.2 M118.4,82.6v155.1l-1.5-1.6
+	c-2.4-2.5-4.5-4.9-6.7-7.2l-8.3-9c-7.6-8.3-15.3-16.6-23-24.8c-1.4-1.5-3.8-2.2-5.5-2.2c-4.3-0.1-8.7-0.1-13.1-0.1
+	c-2.3,0-4.3,0-6.5,0l-9.5,0v-65.2h2.4c2.4,0,4.8-0.1,7.2-0.1c6,0,12.2,0.1,18.2,0.1c0.1,0,0.3,0,0.4,0c3,0,5.3-1,7.6-3.6
+	c9.9-10.9,19.9-21.6,30.2-32.7L118.4,82.6z"/>
+<ellipse cx="140.3" cy="159.4" rx="21.4" ry="36"/>
+</svg>

interface/resources/images/Audio-Loudness-Icons/vol-2.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 318.9 318.9" style="enable-background:new 0 0 318.9 318.9;" xml:space="preserve">
+<path d="M184.3,160.7c-1,8.1-1.6,16.4-3.1,24.4c-1.5,7.6-3.9,15.1-6.1,22.5c-1.7,5.8-0.7,10.7,3.2,13.8c7,5.5,16,2.8,19.2-5.9
+	c8.4-23.1,11.7-46.9,9.1-71.5c-1.5-13.5-4.6-26.7-9.6-39.3c-3-7.5-11.2-10-17.9-5.5c-4.8,3.2-6.2,8.2-3.9,14.5
+	C180.6,128.9,183.7,144.5,184.3,160.7"/>
+<path d="M144.6,79.6c0-11.8-5.4-20.1-16-24.1c-7.7-2.9-18.9-2.5-27.5,7C90.3,74.3,79,86.6,67.2,99c-1,1.1-3,1.9-4.7,2
+	c-3.7,0.2-7.4,0.2-11,0.1c-2.8,0-5.5,0-8.3,0c-14.5,0.3-25.9,10.8-26,23.8c-0.2,27.9-0.2,41.1,0,70.6c0.1,11.1,9.8,21.8,20.8,22.8
+	c4.8,0.4,9.7,0.5,14.4,0.6c3.4,0.1,6.9,0.1,10.3,0.3c1.6,0.1,3.4,0.9,4.4,1.9c10.4,11,22.3,23.6,33.5,36.2c5.3,6,12.2,9.1,19.4,9.1
+	c2.9,0,5.6-0.5,8.6-1.6c10.4-3.7,15.8-12.5,15.8-24.7c0-21.7,0-39.1,0-58.5v-42.9c0-19.6,0-59.2,0-59.2 M118.4,82.6v155.1l-1.5-1.6
+	c-2.4-2.5-4.5-4.9-6.7-7.2l-8.3-9c-7.6-8.3-15.3-16.6-23-24.8c-1.4-1.5-3.8-2.2-5.5-2.2c-4.3-0.1-8.7-0.1-13.1-0.1
+	c-2.3,0-4.3,0-6.5,0l-9.5,0v-65.2h2.4c2.4,0,4.8-0.1,7.2-0.1c6,0,12.2,0.1,18.2,0.1c0.1,0,0.3,0,0.4,0c3,0,5.3-1,7.6-3.6
+	c9.9-10.9,19.9-21.6,30.2-32.7L118.4,82.6z"/>
+<ellipse cx="140.3" cy="159.4" rx="21.4" ry="36"/>
+</svg>

interface/resources/images/Audio-Loudness-Icons/vol-3.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 318.9 318.9" style="enable-background:new 0 0 318.9 318.9;" xml:space="preserve">
+<path d="M184.3,160.7c-1,8.1-1.6,16.4-3.1,24.4c-1.5,7.6-3.9,15.1-6.1,22.5c-1.7,5.8-0.7,10.7,3.2,13.8c7,5.5,16,2.8,19.2-5.9
+	c8.4-23.1,11.7-46.9,9.1-71.5c-1.5-13.5-4.6-26.7-9.6-39.3c-3-7.5-11.2-10-17.9-5.5c-4.8,3.2-6.2,8.2-3.9,14.5
+	C180.6,128.9,183.7,144.5,184.3,160.7"/>
+<path d="M144.6,79.6c0-11.8-5.4-20.1-16-24.1c-7.7-2.9-18.9-2.5-27.5,7C90.3,74.3,79,86.6,67.2,99c-1,1.1-3,1.9-4.7,2
+	c-3.7,0.2-7.4,0.2-11,0.1c-2.8,0-5.5,0-8.3,0c-14.5,0.3-25.9,10.8-26,23.8c-0.2,27.9-0.2,41.1,0,70.6c0.1,11.1,9.8,21.8,20.8,22.8
+	c4.8,0.4,9.7,0.5,14.4,0.6c3.4,0.1,6.9,0.1,10.3,0.3c1.6,0.1,3.4,0.9,4.4,1.9c10.4,11,22.3,23.6,33.5,36.2c5.3,6,12.2,9.1,19.4,9.1
+	c2.9,0,5.6-0.5,8.6-1.6c10.4-3.7,15.8-12.5,15.8-24.7c0-21.7,0-39.1,0-58.5v-42.9c0-19.6,0-59.2,0-59.2 M118.4,82.6v155.1l-1.5-1.6
+	c-2.4-2.5-4.5-4.9-6.7-7.2l-8.3-9c-7.6-8.3-15.3-16.6-23-24.8c-1.4-1.5-3.8-2.2-5.5-2.2c-4.3-0.1-8.7-0.1-13.1-0.1
+	c-2.3,0-4.3,0-6.5,0l-9.5,0v-65.2h2.4c2.4,0,4.8-0.1,7.2-0.1c6,0,12.2,0.1,18.2,0.1c0.1,0,0.3,0,0.4,0c3,0,5.3-1,7.6-3.6
+	c9.9-10.9,19.9-21.6,30.2-32.7L118.4,82.6z"/>
+<path d="M256.4,160.4c-0.3-3.2-0.6-6.4-0.9-9.6c-0.6-7.2-1.3-14.6-2.3-21.9c-2.3-15.7-6.9-31.6-13.7-47.5c-1.6-3.8-4.8-6.5-8.6-7.5
+	c-4-1-8.2-0.1-11.6,2.6c-5,4-6.2,9.5-3.4,16.3c8.6,21.3,13,42,13.5,63.4c0.6,24.5-4,48.9-13.7,72.4c-1.6,4-1.8,7.9-0.4,11.2
+	c1.3,3.1,3.8,5.4,7.4,6.8c1.7,0.7,3.4,1,5,1c5.3,0,9.9-3.4,12.4-9.4c10.2-24.7,15.6-50.8,16.2-77.7L256.4,160.4z"/>
+<ellipse cx="140.3" cy="159.4" rx="21.4" ry="36"/>
+</svg>

interface/resources/images/Audio-Loudness-Icons/vol-4.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 318.9 318.9" style="enable-background:new 0 0 318.9 318.9;" xml:space="preserve">
+<path d="M184.3,160.7c-1,8.1-1.6,16.4-3.1,24.4c-1.5,7.6-3.9,15.1-6.1,22.5c-1.7,5.8-0.7,10.7,3.2,13.8c7,5.5,16,2.8,19.2-5.9
+	c8.4-23.1,11.7-46.9,9.1-71.5c-1.5-13.5-4.6-26.7-9.6-39.3c-3-7.5-11.2-10-17.9-5.5c-4.8,3.2-6.2,8.2-3.9,14.5
+	C180.6,128.9,183.7,144.5,184.3,160.7"/>
+<path d="M144.6,79.6c0-11.8-5.4-20.1-16-24.1c-7.7-2.9-18.9-2.5-27.5,7C90.3,74.3,79,86.6,67.2,99c-1,1.1-3,1.9-4.7,2
+	c-3.7,0.2-7.4,0.2-11,0.1c-2.8,0-5.5,0-8.3,0c-14.5,0.3-25.9,10.8-26,23.8c-0.2,27.9-0.2,41.1,0,70.6c0.1,11.1,9.8,21.8,20.8,22.8
+	c4.8,0.4,9.7,0.5,14.4,0.6c3.4,0.1,6.9,0.1,10.3,0.3c1.6,0.1,3.4,0.9,4.4,1.9c10.4,11,22.3,23.6,33.5,36.2c5.3,6,12.2,9.1,19.4,9.1
+	c2.9,0,5.6-0.5,8.6-1.6c10.4-3.7,15.8-12.5,15.8-24.7c0-21.7,0-39.1,0-58.5v-42.9c0-19.6,0-59.2,0-59.2 M118.4,82.6v155.1l-1.5-1.6
+	c-2.4-2.5-4.5-4.9-6.7-7.2l-8.3-9c-7.6-8.3-15.3-16.6-23-24.8c-1.4-1.5-3.8-2.2-5.5-2.2c-4.3-0.1-8.7-0.1-13.1-0.1
+	c-2.3,0-4.3,0-6.5,0l-9.5,0v-65.2h2.4c2.4,0,4.8-0.1,7.2-0.1c6,0,12.2,0.1,18.2,0.1c0.1,0,0.3,0,0.4,0c3,0,5.3-1,7.6-3.6
+	c9.9-10.9,19.9-21.6,30.2-32.7L118.4,82.6z"/>
+<path d="M256.4,160.4c-0.3-3.2-0.6-6.4-0.9-9.6c-0.6-7.2-1.3-14.6-2.3-21.9c-2.3-15.7-6.9-31.6-13.7-47.5c-1.6-3.8-4.8-6.5-8.6-7.5
+	c-4-1-8.2-0.1-11.6,2.6c-5,4-6.2,9.5-3.4,16.3c8.6,21.3,13,42,13.5,63.4c0.6,24.5-4,48.9-13.7,72.4c-1.6,4-1.8,7.9-0.4,11.2
+	c1.3,3.1,3.8,5.4,7.4,6.8c1.7,0.7,3.4,1,5,1c5.3,0,9.9-3.4,12.4-9.4c10.2-24.7,15.6-50.8,16.2-77.7L256.4,160.4z"/>
+<ellipse cx="140.3" cy="159.4" rx="21.4" ry="36"/>
+<path d="M267,275.2c-2.1,0-4.2-0.5-6.2-1.6c-6-3.4-8.1-11.1-4.7-17.1c27.9-48.8,37.8-129.7-2.9-200.3c-3.4-6-1.4-13.6,4.6-17.1
+	c6-3.4,13.6-1.4,17.1,4.6c45.6,79.2,34.3,170.2,2.9,225.2C275.5,272.9,271.3,275.2,267,275.2z"/>
+</svg>

interface/resources/qml/hifi/Pal.qml

@@ -13,6 +13,7 @@
 
 import QtQuick 2.5
 import QtQuick.Controls 1.4
+import QtGraphicalEffects 1.0
 import "../styles-uit"
 import "../controls-uit" as HifiControls
 
@@ -163,6 +164,14 @@ Rectangle {
         onSortIndicatorColumnChanged: sortModel()
         onSortIndicatorOrderChanged: sortModel()
 
+        TableViewColumn {
+            role: "avgAudioLevel"
+            title: "VOL"
+            width: actionButtonWidth
+            movable: false
+            resizable: false
+        }
+
         TableViewColumn {
             id: displayNameHeader
             role: "displayName"
@@ -185,13 +194,6 @@ Rectangle {
             movable: false
             resizable: false
         }
-        TableViewColumn {
-            role: "avgAudioLevel"
-            title: "VOL"
-            width: actionButtonWidth
-            movable: false
-            resizable: false
-        }
         TableViewColumn {
             visible: iAmAdmin
             role: "mute"
@@ -226,7 +228,8 @@ Rectangle {
             id: itemCell
             property bool isCheckBox: styleData.role === "personalMute" || styleData.role === "ignore"
             property bool isButton: styleData.role === "mute" || styleData.role === "kick"
-            property bool isText: styleData.role == "avgAudioLevel"
+            property bool isAvgAudio: styleData.role === "avgAudioLevel"
+
             // This NameCard refers to the cell that contains an avatar's
             // DisplayName and UserName
             NameCard {
@@ -236,7 +239,7 @@ Rectangle {
                 userName: model ? model.userName : ""
                 audioLevel: model ? model.audioLevel : 0.0
                 avgAudioLevel: model ? model.avgAudioLevel : 0.0
-                visible: !isCheckBox && !isButton && !isText
+                visible: !isCheckBox && !isButton && !isAvgAudio
                 uuid: model ? model.sessionId : ""
                 selected: styleData.selected
                 isAdmin: model && model.admin
@@ -246,14 +249,19 @@ Rectangle {
                 // Anchors
                 anchors.left: parent.left
             }
-            Text {
+            Image {
+                visible: isAvgAudio
+                function getImage() {
+                    var fileName = "../../../images/Audio-Loudness-Icons/vol-";
+                    fileName += (4.0*(model ? model.avgAudioLevel : 0.0)).toFixed(0);
+                    fileName += ".svg";
+                    return fileName;
+                }
                 id: avgAudioVolume
-                text: model ? (10 * model.avgAudioLevel).toFixed(0) : 0.0
+                width: hifi.dimensions.tableHeaderHeight
-                visible: isText
+                fillMode: Image.PreserveAspectFit
-                horizontalAlignment: Text.AlignHCenter
+                source: getImage()
-                verticalAlignment: Text.AlignVCenter
+                anchors.verticalCenter: parent.verticalCenter
-                width: parent.width
-                height: parent.height
             }
 
             // This CheckBox belongs in the columns that contain the stateful action buttons ("Mute" & "Ignore" for now)

scripts/system/pal.js

@@ -197,6 +197,17 @@ HighlightedEntity.updateOverlays = function updateHighlightedEntities() {
     });
 };
 
+/* this contains current gain for a given node (by session id).  More efficient than 
+ * querying it, plus there isn't a getGain function so why write one */
+var sessionGains = {};
+function convertDbToLinear(decibels) {
+    // +20db = 10x, 0dB = 1x, -10dB = 0.1x, etc...
+    // but, your perception is that something 2x as loud is +10db
+    // so we go from -60 to +20 or 1/64x to 4x.  For now, we can
+    // maybe scale the signal this way??
+    return Math.pow(2, decibels/10.0);   
+}
+
 function fromQml(message) { // messages are {method, params}, like json-rpc. See also sendToQml.
     var data;
     switch (message.method) {
@@ -242,6 +253,8 @@ function fromQml(message) { // messages are {method, params}, like json-rpc. See
             UserActivityLogger.palAction("avatar_gain_changed", data['sessionId']);
         } else {
             Users.setAvatarGain(data['sessionId'], data['gain']);
+            sessionGains[data['sessionId']] = convertDbToLinear(data['gain']);
+            print("set " + data['sessionId'] + " to " + sessionGains[data['sessionId']]);
         }
         break;
     case 'displayNameUpdate':
@@ -576,6 +589,7 @@ function scaleAudio(val) {
     }
     return audioLevel;
 }
+
 function getAudioLevel(id) {
     // the VU meter should work similarly to the one in AvatarInputs: log scale, exponentially averaged
     // But of course it gets the data at a different rate, so we tweak the averaging ratio and frequency
@@ -594,9 +608,10 @@ function getAudioLevel(id) {
         // natural log, so to get log base 2, just divide by ln(2).
         audioLevel = scaleAudio(Math.log(data.accumulatedLevel + 1) / LOG2);
         avgAudioLevel = scaleAudio(Math.log(data.longAccumulatedLevel + 1) / LOG2);
-
+        // scale avgAudioLevel given that there can be a gain (4x to 1/64x)
+        avgAudioLevel = Math.min(1.0, avgAudioLevel *(sessionGains[id] || 0.75));
+        data.avgAudioLevel = avgAudioLevel;
         data.audioLevel = audioLevel;
-        data.averageAudioLevel = avgAudioLevel;
     }
     return [audioLevel, avgAudioLevel];
 }