Merge pull request #8554 from elisa-lj11/marketplaces_html

Include a marketplace status bar and access to "marketplace" of marketplaces

interface/resources/qml/MarketplaceComboBox.qml

@@ -1,103 +0,0 @@
-//
-//  MarketplaceComboBox.qml
-//
-//  Created by Elisa Lupin-Jimenez on 3 Aug 2016
-//  Copyright 2016 High Fidelity, Inc.
-//
-//  Distributed under the Apache License, Version 2.0.
-//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
-//
-
-import QtQuick 2.5
-import QtQuick.Controls 1.4
-import QtWebChannel 1.0
-import QtWebEngine 1.1
-import QtWebSockets 1.0
-import "qrc:///qtwebchannel/qwebchannel.js" as WebChannel
-
-import "controls"
-import "controls-uit" as Controls
-import "styles"
-import "styles-uit"
-
-
-Rectangle {
-    HifiConstants { id: hifi }
-    id: marketplaceComboBox
-    anchors.fill: parent
-    color: hifi.colors.baseGrayShadow
-    property var currentUrl: "https://metaverse.highfidelity.com/marketplace"
-
-    Controls.BaseWebView {
-        id: webview
-        url: currentUrl
-        anchors.top: switchMarketView.bottom
-        width: parent.width
-        height: parent.height - 40
-        focus: true
-
-        Timer {
-            id: zipTimer
-            running: false
-            repeat: false
-            interval: 1500
-            property var handler;
-            onTriggered: handler();
-        }
-
-        property var autoCancel: 'var element = $("a.btn.cancel");
-                                  element.click();'
-
-        onNewViewRequested: {
-            var component = Qt.createComponent("Browser.qml");
-            var newWindow = component.createObject(desktop);
-            request.openIn(newWindow.webView);
-            if (File.isZippedFbx(desktop.currentUrl)) {
-                zipTimer.handler = function() {
-                    newWindow.destroy();
-                    runJavaScript(autoCancel);
-                }
-                zipTimer.start();
-            }
-        }
-
-        property var simpleDownload: 'var element = $("a.download-file");
-                                      element.removeClass("download-file");
-                                      element.removeAttr("download");'
-
-        onLinkHovered: {
-            desktop.currentUrl = hoveredUrl;
-            // add an error message for non-fbx files
-            if (File.isZippedFbx(desktop.currentUrl)) {
-                runJavaScript(simpleDownload, function(){console.log("ran the JS");});
-            }
-
-        }
-
-    }
-
-    Controls.ComboBox {
-        id: switchMarketView
-        anchors.top: parent.top
-        anchors.right: parent.right
-        colorScheme: hifi.colorSchemes.dark
-        width: 200
-        height: 40
-        visible: true
-        model: ["Marketplace", "Clara.io"]
-        onCurrentIndexChanged: {
-            if (currentIndex === 0) { webview.url = "https://metaverse.highfidelity.com/marketplace"; }
-            if (currentIndex === 1) { webview.url = "https://clara.io/library"; }
-        }
-        
-    }
-
-    Controls.Label {
-        id: switchMarketLabel
-        anchors.verticalCenter: switchMarketView.verticalCenter
-        anchors.right: switchMarketView.left
-        color: hifi.colors.white
-        text: "Explore interesting content from: "
-    }
-
-}

interface/resources/qml/Marketplaces.qml

@@ -0,0 +1,167 @@
+//
+//  Marketplaces.qml
+//
+//  Created by Elisa Lupin-Jimenez on 3 Aug 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import QtWebChannel 1.0
+import QtWebEngine 1.1
+import QtWebSockets 1.0
+import "qrc:///qtwebchannel/qwebchannel.js" as WebChannel
+
+import "controls"
+import "controls-uit" as Controls
+import "styles"
+import "styles-uit"
+
+
+Rectangle {
+    HifiConstants { id: hifi }
+    id: marketplace
+    anchors.fill: parent
+    property var marketplacesUrl: "../../scripts/system/html/marketplaces.html"
+    property int statusBarHeight: 50
+    property int statusMargin: 50
+    property string standardMessage: "Check out other marketplaces."
+    property string claraMessage: "Choose a model and click Download -> Autodesk FBX."
+    property string claraError: "High Fidelity only supports Autodesk FBX models."
+
+    Controls.BaseWebView {
+        id: webview
+        url: marketplacesUrl
+        anchors.top: marketplace.top
+        width: parent.width
+        height: parent.height - statusBarHeight
+        focus: true
+
+        Timer {
+            id: zipTimer
+            running: false
+            repeat: false
+            interval: 1500
+            property var handler;
+            onTriggered: handler();
+        }
+
+        Timer {
+            id: alertTimer
+            running: false
+            repeat: false
+            interval: 9000
+            property var handler;
+            onTriggered: handler();
+        }
+
+        property var autoCancel: 'var element = $("a.btn.cancel");
+                                  element.click();'
+
+        property var simpleDownload: 'var element = $("a.download-file");
+                                      element.removeClass("download-file");
+                                      element.removeAttr("download");'
+        
+        function displayErrorStatus() {
+            alertTimer.handler = function() {
+                statusLabel.text = claraMessage;
+                statusBar.color = hifi.colors.blueHighlight;
+                statusIcon.text = hifi.glyphs.info;
+            }
+            alertTimer.start();
+        }
+
+        property var notFbxHandler:     'var element = $("a.btn.btn-primary.viewer-button.download-file")
+                                         element.click();'
+
+        // this code is for removing other file types from Clara.io's download options
+        //property var checkFileType: "$('[data-extension]:not([data-extension=\"fbx\"])').parent().remove()"
+
+        onLinkHovered: {
+            desktop.currentUrl = hoveredUrl;
+            //runJavaScript(checkFileType, function(){console.log("Remove filetypes JS injection");});
+            if (File.isZippedFbx(desktop.currentUrl)) {
+                runJavaScript(simpleDownload, function(){console.log("Download JS injection");});
+                return;
+            }
+
+            if (File.isZipped(desktop.currentUrl)) {
+                statusLabel.text = claraError;
+                statusBar.color = hifi.colors.redHighlight;
+                statusIcon.text = hifi.glyphs.alert;
+                runJavaScript(notFbxHandler, displayErrorStatus());
+            }
+            
+        }
+
+        onLoadingChanged: {
+            if (File.isClaraLink(webview.url)) {
+                statusLabel.text = claraMessage;
+            } else {
+                statusLabel.text = standardMessage;
+            }
+            statusBar.color = hifi.colors.blueHighlight;
+            statusIcon.text = hifi.glyphs.info;
+        }
+
+        onNewViewRequested: {
+            var component = Qt.createComponent("Browser.qml");
+            var newWindow = component.createObject(desktop);
+            request.openIn(newWindow.webView);
+            if (File.isZippedFbx(desktop.currentUrl)) {
+                runJavaScript(autoCancel);
+                zipTimer.handler = function() {
+                    newWindow.destroy();
+                }
+                zipTimer.start();
+            }
+        }
+
+    }
+
+    Rectangle {
+        id: statusBar
+        anchors.top: webview.bottom
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        color: hifi.colors.blueHighlight
+
+        Controls.Button {
+            id: switchMarketView
+            anchors.right: parent.right
+            anchors.rightMargin: statusMargin
+            anchors.verticalCenter: parent.verticalCenter
+            width: 150
+            text: "See all markets"
+            onClicked: {
+                webview.url = "../../scripts/system/html/marketplaces.html";
+                statusLabel.text = standardMessage;
+            }
+        }
+
+        Controls.Label {
+            id: statusLabel
+            anchors.verticalCenter: switchMarketView.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: statusMargin
+            color: hifi.colors.white
+            text: standardMessage
+            size: 18
+        }
+
+        HiFiGlyphs {
+            id: statusIcon
+            anchors.right: statusLabel.left
+            anchors.verticalCenter: statusLabel.verticalCenter
+            text: hifi.glyphs.info
+            color: hifi.colors.white
+            size: hifi.fontSizes.tableHeadingIcon
+        }
+
+    }
+
+}

libraries/script-engine/src/FileScriptingInterface.cpp

@@ -65,13 +65,21 @@ bool FileScriptingInterface::isTempDir(QString tempDir) {
     folderName = "/" + testDir.section("/", -1);
     QString testContainer = testDir;
     testContainer.remove(folderName);
-    if (testContainer == tempContainer) return true;
+    return (testContainer == tempContainer);
-    return false;
+}
+
+// checks whether the webview is displaying a Clara.io page for Marketplaces.qml
+bool FileScriptingInterface::isClaraLink(QUrl url) {
+    return (url.toString().contains("clara.io") && !url.toString().contains("clara.io/signup"));
 }
 
 bool FileScriptingInterface::isZippedFbx(QUrl url) {
-    if (url.toString().contains(".zip") && url.toString().contains("fbx")) return true;
+    return (url.toString().endsWith("fbx.zip"));
-    return false;
+}
+
+// checks whether a user tries to download a file that is not in .fbx format
+bool FileScriptingInterface::isZipped(QUrl url) {
+    return (url.toString().endsWith(".zip"));
 }
 
 // this function is not in use

libraries/script-engine/src/FileScriptingInterface.h

@@ -25,6 +25,8 @@ public:
 
 public slots:
     bool isZippedFbx(QUrl url);
+    bool isZipped(QUrl url);
+    bool isClaraLink(QUrl url);
     QString convertUrlToPath(QUrl url);
     void runUnzip(QString path, QUrl url);
     QString getTempDir();

scripts/system/html/css/marketplaces.css

@@ -0,0 +1,98 @@
+/*
+//
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+*/
+body {
+    background: white;
+    padding: 0 0 0 0;
+    font-family:Raleway-SemiBold;
+}
+.marketplaces-container {
+    display: inline-block;
+    color: black;
+    width: 94%;
+    margin-left: 3%;
+    height: 100%;
+}
+.marketplaces-title {
+    margin-top: 45px;
+    margin-bottom: 20px;
+}
+.marketplaces-intro-text {
+    margin-bottom: 60px;
+}
+.marketplace-tile {
+    float:left;
+    width: 100%;
+}
+.marketplace-tile-first-column {
+    text-align: center;
+    float: left;
+    width: 33%;
+}
+.marketplace-tile-second-column {
+    float: left;
+    margin-left:4%;
+    width: 62%;
+}
+.exploreButton {
+    font-size: 16px !important;
+    width: 200px !important;
+    height: 45px !important;
+    margin-top: 20px;
+    margin-bottom: 30px;
+}
+.tile-divider {
+    width: 100%;
+    margin-left: 0%;
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid lightgrey;
+    margin: 1em 0;
+    padding: 0;
+    margin-bottom: 30px;
+}
+.marketplace-tile-description {
+    margin-top: 15px;
+    margin-bottom: 30px;
+}
+.marketplace-tile-image {
+    margin-top:15px;
+    max-width: 256px;
+    height: 128px;
+    margin-bottom:60px;
+    -webkit-box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.48);
+    -moz-box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.48);
+    box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.48);
+}
+.marketplace-clara-steps {
+    padding-left: 15px;
+}
+.marketplace-clara-steps > li {
+    margin-top: 5px;
+}
+@media (max-width:768px) {
+    .marketplace-tile-first-column {
+        float: left;
+        width: 100%;
+    }
+    .marketplace-tile-second-column {
+        float: left;
+        width: 100%;
+    }
+    .exploreButton-holder {
+        width:100%;
+        text-align:center;
+    }
+    .tile-divider {
+    width: 100%;
+    margin-left: 0%;
+}
+.marketplace-tile-image{
+    margin-bottom:15px;
+}
+}

scripts/system/html/js/marketplaces.js

@@ -0,0 +1,12 @@
+function loaded() {
+bindExploreButtons();
+}
+
+function bindExploreButtons() {
+    $('#exploreClaraMarketplace').on('click', function() {
+        window.location = "https://clara.io/library?public=true"
+    })
+    $('#exploreHifiMarketplace').on('click', function() {
+        window.location = "http://www.highfidelity.com/marketplace"
+    })
+}

scripts/system/html/marketplaces.html

@@ -0,0 +1,65 @@
+<!--
+//  marketplaces.html
+//
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+-->
+<html>
+    <head>
+        <title>Marketplaces</title>
+        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+        <link rel="stylesheet" type="text/css" href="css/edit-style.css">
+        <link rel="stylesheet" type="text/css" href="css/marketplaces.css">
+        <script src="js/jquery-2.1.4.min.js"></script>
+        <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
+        <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
+        <script src="js/marketplaces.js"></script>
+    </head>
+    <body onload='loaded();'>
+        <div class="marketplaces-container">
+            <h2 class="marketplaces-title">
+            Marketplaces
+            </h2>
+            <div class="marketplaces-intro-text">
+                <p>
+                    You can bring content into High Fidelity forom anywhere you want.  Here are a few places that support direct import of content right now.  If you'd like to suggest a Market to include here, <a href="mailto:contact@highfidelity.io">let us know.</a>
+                </p>
+            </div>
+            <div class="marketplace-tile">
+                <div class="marketplace-tile-first-column">
+                    <img class="marketplace-tile-image" src="img/hifi-marketplace-tile.png">
+                </div>
+                <div class="marketplace-tile-second-column">
+                    <p class="marketplace-tile-description">This is the default High Fidelity marketplace.  Viewing and downloading content from here is fully supported in Interface.</p>
+                    <div class="exploreButton-holder">
+                        <input class="blue exploreButton" type="button" value="Explore" id="exploreHifiMarketplace"></input></div>
+                    </div>
+                    <hr class="tile-divider">
+                </div>
+                <div class="marketplace-tile">
+                    <div class="marketplace-tile-first-column">
+                        <img class="marketplace-tile-image" src="img/clara-tile.png">
+                    </div>
+                    <div class="marketplace-tile-second-column">
+                        <p class="marketplace-tile-description">Clara.io has thousands of models available for importing into High Fidelity.  Follow these steps for the best experience:</p>
+                        <ol class="marketplace-clara-steps">
+                            <li><a href="http://www.clara.io/signup">Create an account here </a>or log in as an existing user.</li>
+                            <li>Choose a model from the list and click Download -> Autodesk FBX.</li>
+                            <li>After the file processes, click Download.</li>
+                            <li>Add the model to your asset server, then find it from the list and choose Add To World.</li>
+                        </ol>
+                        <div class="exploreButton-holder">
+                            <input class="blue exploreButton" type="button" value="Explore" id="exploreClaraMarketplace"></input>
+                        </div>
+                    </div>
+                    <hr class="tile-divider">
+                </div>
+            </div>
+            
+            
+            
+        </div>
+    </body>
+</html>

scripts/system/marketplaces/clara.js

@@ -14,15 +14,15 @@
 (function() { // BEGIN LOCAL_SCOPE
 
 var toolIconUrl = Script.resolvePath("../assets/images/tools/");
-var qml = Script.resolvePath("../../../resources/qml/MarketplaceComboBox.qml")
+var qml = Script.resolvePath("../../../resources/qml/Marketplaces.qml")
 
 var MARKETPLACE_URL = "https://metaverse.highfidelity.com/marketplace";
 
 var marketplaceWindow = new OverlayWindow({
     title: "Marketplace",
     source: qml,
-    width: 900,
+    width: 1000,
-    height: 700,
+    height: 900,
     toolWindow: false,
     visible: false,
 });