Home Explore Help
Sign In
TC
/
arozos
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Added personalization utils for desktop

TC pushbot 5 4 years ago
parent
aee583f6ad
commit
3dfc48ddd3
9 changed files with 335 additions and 2 deletions
Unified View Show Diff Stats
  1. 1 0
      .gitignore
  2. BIN
      documents/Derivatives/fox.1.1.psd
  3. BIN
      web/SystemAO/desktop/img/baseline_brush_black_48dp.png
  4. BIN
      web/SystemAO/desktop/img/personalization.png
  5. BIN
      web/SystemAO/desktop/img/personalization.psd
  6. 319 0
      web/SystemAO/desktop/personalization.html
  7. 15 2
      web/desktop.system
  8. BIN
      web/img/desktop/bg/nobg.jpg
  9. BIN
      web/img/desktop/bg/nobg.psd

+ 1 - 0
.gitignore
View File 

@@ -50,3 +50,4 @@ aroz_online
 
 arozos.exe
 
 arozos.exe
 
 */arozos.exe
 
 */arozos.exe
 
 arozos
 
 arozos
 
+upx.exe

BIN
documents/Derivatives/fox.1.1.psd
View File


BIN
web/SystemAO/desktop/img/baseline_brush_black_48dp.png
View File


BIN
web/SystemAO/desktop/img/personalization.png
View File


BIN
web/SystemAO/desktop/img/personalization.psd
View File


+ 319 - 0
web/SystemAO/desktop/personalization.html
View File 

@@ -0,0 +1,319 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <meta name="mobile-web-app-capable" content="yes">
 
+        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
 
+        <meta charset="UTF-8">
 
+        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
 
+        <script src="../../script/jquery.min.js"></script>
 
+        <script src="../../script/semantic/semantic.min.js"></script>
 
+        <script src="../../script/ao_module.js"></script>
 
+        <style>
 
+            .hidden{
 
+                display:none;
 
+            }
 
+
 
+            .backgroundpreview{
 
+                border: 1px solid #898989;
 
+            }
 
+        </style>
 
+    </head>
 
+    <body>
 
+        <div class="ui tabular menu" style="position:fixed; top:0px; left:0px; width: 100%;">
 
+            <div class="active item" data-tab="wallpaper">Wallpaper</div>
 
+            <div class="item" data-tab="theme">Theme</div>
 
+            <div class="item" data-tab="advance">Advance</div>
 
+        </div>
 
+        <div style="position:fixed; top: 42px; left:0px; width: 100%; height: calc(100% - 42px); overflow-y:auto;">
 
+            <div class="ui active tab" data-tab="wallpaper">
 
+                <!-- Wallpaper Functions -->
 
+                <br>
 
+                <div class="ui container">
 
+                    <h3 class="ui header">
 
+                        <i class="image outline icon"></i>
 
+                        <div class="content">
 
+                            Wallpapers
 
+                            <div class="sub header">Manage your desktop preferences</div>
 
+                        </div>
 
+                    </h3>
 
+                    <div class="ui divider"></div>
 
+
 
+                    <div class="ui grid">
 
+                        <div class="ten wide column">
 
+                            <img id="mainBackground" class="ui fluid image backgroundpreview" src="">
 
+                        </div>
 
+                        <div class="six wide column">
 
+                            
+                        </div>
 
+                    </div>
 
+                
+                    <div class="ui divider"></div>
 
+                    <div id="backgroundPreviewList" class="ui grid">
 
+                        <div class="four wide column">
 
+                            <img class="ui fluid image backgroundpreview" src="">
 
+                        </div>
 
+                        <div class="four wide column">
 
+                            <img class="ui fluid image backgroundpreview" src="">
 
+                        </div>
 
+                        <div class="four wide column">
 
+                            <img class="ui fluid image backgroundpreview" src="">
 
+                        </div>
 
+                        <div class="four wide column">
 
+                            <img class="ui fluid image backgroundpreview" src="">
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="ui divider"></div>
 
+                    <h4 class="ui header">
 
+                        Background Wallpaper
 
+                        <div class="sub header">Set your desktop background wallpaper theme.</div>
 
+                    </h4>
 
+                    <select id="wallpaperlist" class="ui fluid dropdown" onchange="handleBackgroundSelectionChange(this.value);">
 
+                        <option value="">Wallpaper Packs</option>
 
+                    </select>
 
+                    <br>
 
+                    <button class="ui small green right floated button" onclick="applyWallpaper();"><i class="checkmark icon"></i> Apply Wallpaper</button>
 
+                    <br><br><br>
 
+                    <div class="ui green segment" style="display:none" id="wallpaperChangeConfirm">
 
+                        <h4 class="ui header">
 
+                            <i class="checkmark green icon"></i>
 
+                            <div class="content">
 
+                            Wallpaper Updated
 
+                            <div class="sub header">You should be seeing your desktop wallpaper change in a moment.</div>
 
+                            </div>
 
+                        </h4>
 
+                    </div>
 
+
 
+                    <!-- Wallpaper change interval-->
 
+                    <div class="ui divider"></div>
 
+                    <h4 class="ui header">
 
+                        Wallpaper Interval
 
+                        <div class="sub header">Set the interval between the wallpaper image cycles.</div>
 
+                    </h4>
 
+                    <select id="changeInterval" class="ui fluid dropdown" onchange="handleIntervalChange(this.value);">
 
+                        <option value="10">10 seconds</option>
 
+                        <option value="30">30 seconds</option>
 
+                        <option value="60">60 seconds</option>
 
+                        <option value="180">3 minutes</option>
 
+                        <option value="300">5 minutes</option>
 
+                        <option value="600">10 minutes</option>
 
+                        <option value="1800">30 minutes</option>
 
+                        <option value="3600">1 hour</option>
 
+                    </select>
 
+
 
+                    <div class="ui green segment" style="display:none" id="interfaceChangeConfirm">
 
+                        <h4 class="ui header">
 
+                            <i class="checkmark green icon"></i>
 
+                            <div class="content">
 
+                            Wallpaper Interval Updated
 
+                            <div class="sub header">This setting will only apply to this browser</div>
 
+                            </div>
 
+                        </h4>
 
+                    </div>
 
+                </div>
 
+                <br><br><br>
 
+            </div>
 
+            <div class="ui tab" data-tab="theme">
 
+                <!-- Theme Color Related !-->
 
+                <br>
 
+                <div class="ui container">
 
+                    <h3 class="ui header">
 
+                        <i class="paint brush icon"></i>
 
+                        <div class="content">
 
+                            Theme Color
 
+                            <div class="sub header">Change the system theme color settings</div>
 
+                        </div>
 
+                    </h3>
 
+
 
+                    <div class="ui divider"></div>
 
+                    <p>Work In Progress</p>
 
+                </div>
 
+            </div>
 
+            <div class="ui tab" data-tab="advance">
 
+                <!-- Advance User Customization !-->
 
+                <br>
 
+                <div class="ui container">
 
+                    <h3 class="ui header">
 
+                        <i class="setting icon"></i>
 
+                        <div class="content">
 
+                            Advance Customization
 
+                            <div class="sub header">Manage your desktop preferences</div>
 
+                        </div>
 
+                    </h3>
 
+                    <div class="ui divider"></div>
 
+                    <h4 class="ui header">
 
+                        User Defined Wallpaper
 
+                        <div class="sub header">Advanced user customization function for desktop interface</div>
 
+                    </h4>
 
+                    <h3 id="userSelectedFolderPath">Disabled</h3>
 
+                    <p>If you have set a folder for loading desktop wallpapers, the image files from that folder will be used instead of the system build in wallpapers.</p>
 
+                    <button class="ui small right floated button" onclick="clearUserSelectedFolder();"><i class="remove icon"></i> Clear Selection</button>
 
+                    <button class="ui small black right floated button" onclick="selectUserFolder();"><i class="folder open icon"></i> Select Folder</button>
 
+        
+                    <br><br>
 
+                </div>
 
+                
+            </div>
 
+        </div>
 
+        <br><br>
 
+        <script>
 
+            var desktopThemeList = [];
 
+            var isStartingUp = true;
 
+
 
+            $(".dropdown").dropdown();
 
+            $('.tabular.menu .item').tab();
 
+
 
+
 
+            //Startup process
 
+            initCurrentBackgroundPreview();
 
+            initDefaultBackgroundChangeValue();
 
+            initUserDefinedWallpaperFolder();
 
+
 
+            function initUserDefinedWallpaperFolder(){
 
+                var userDefinedFolder = localStorage.getItem("ao/desktop/backgroundoverwrite");
 
+                if (userDefinedFolder == null){
 
+                    $("#userSelectedFolderPath").text("Disabled");
 
+                }else{
 
+                    $("#userSelectedFolderPath").text(userDefinedFolder);
 
+                }
 
+            }
 
+            
+
 
+            function initDefaultBackgroundChangeValue(){
 
+                if (localStorage.getItem("ao/desktop/backgroundInterval") == null){
 
+                    //No background interval set.
 
+                    $("#changeInterval").dropdown("set selected", "30");
 
+                }else{
 
+                    //There is already a setting for background interval change. Use that instead
 
+                    var changeInterval = localStorage.getItem("ao/desktop/backgroundInterval");
 
+                    $("#changeInterval").dropdown("set selected", changeInterval);
 
+                }
 
+            }
 
+
 
+            //Change the interval to the given 
+            function handleIntervalChange(newInterval){
 
+                //Show change finsihed
 
+                if (isStartingUp){
 
+                    //Ignore startup change
 
+                    return;
 
+                }
 
+
 
+                //Save interval to localStorage
 
+                localStorage.setItem("ao/desktop/backgroundInterval", newInterval)
 
+                $("#interfaceChangeConfirm").slideDown('fast').delay(3000).slideUp('fast');
 
+
 
+                //Restart desktop background changer interval
 
+                if (ao_module_virtualDesktop){
 
+                    console.log("Restarting desktop background changer interval")
 
+                    parent.clearInterval(parent.backgroundIntervalCounter);
 
+                    parent.initBackgroundSwitchingAnimation();
 
+                }
 
+                
+            }
 
+
 
+            function selectUserFolder(){
 
+                ao_module_openFileSelector(folderSelected, undefined,"folder",false);
 
+            }
 
+
 
+            function folderSelected(filedata){
 
+                for (var i=0; i < filedata.length; i++){
 
+                    var filename = filedata[i].filename;
 
+                    var filepath = filedata[i].filepath;
 
+
 
+                    //Save the overwrite folder path
 
+                    localStorage.setItem("ao/desktop/backgroundoverwrite",filepath);
 
+                    $("#userSelectedFolderPath").text(filepath);
 
+                }
 
+            }
 
+
 
+            function clearUserSelectedFolder(){
 
+                //Clear user selected folder
 
+                localStorage.removeItem("ao/desktop/backgroundoverwrite");
 
+                initUserDefinedWallpaperFolder();
 
+            }
 
+
 
+            function initCurrentBackgroundPreview(){
 
+                //Get the list of theme in the system
 
+                $.get("../../system/desktop/theme", function(data) {
 
+                    desktopThemeList = data;
 
+                    //Generate the wallpaper list
 
+                    $("#wallpaperlist").html("");
 
+                    var deftaultData = "";
 
+                    desktopThemeList.forEach(themepack => {
 
+                        var encodedData = encodeURIComponent(JSON.stringify(themepack));
 
+                        var themeName = themepack.Theme.charAt(0).toUpperCase() + themepack.Theme.slice(1);
 
+                        $("#wallpaperlist").append(`<option value="${encodedData}">${themeName}</option>`);
 
+                        if (themepack.Theme == "default"){
 
+                            deftaultData = encodedData;
 
+                        }
 
+                    });
 
+
 
+                    //Get the one the user is currently using
 
+                    $.get("../../system/desktop/theme?get=true", function(data) {
 
+                        //Get the user theme settings
 
+                        $(".backgroundpreview").attr('src','../../img/desktop/bg/nobg.jpg');
 
+                        
+                        //Check if the theme exists
 
+                        var themeExists = false;
 
+                        var targetThemeObject;
 
+                        desktopThemeList.forEach(theme => {
 
+                            if (theme.Theme == data){
 
+                                //Theme exists
 
+                                themeExists = true;
 
+                                targetThemeObject = theme;
 
+                            }
 
+                        });
 
+
 
+                        if (themeExists == false){
 
+                            //This theme not exists. Do not load preview
 
+                            $("#wallpaperlist").dropdown("set selected","Default");
 
+                        }else{
 
+                            loadBackgroundPreview(targetThemeObject);
 
+                            var themeName = data.charAt(0).toUpperCase() + data.slice(1)
 
+                            $("#wallpaperlist").dropdown("set selected",themeName);
 
+                        }
 
+                        
+                        //End of startup process
 
+                        isStartingUp = false;
 
+                    });
 
+                });
 
+            }
 
+
 
+            function loadBackgroundPreview(targetThemeObject){
 
+                $("#backgroundPreviewList").html("");
 
+                var imageList = targetThemeObject.Bglist;
 
+                $("#mainBackground").attr("src","../../img/desktop/bg/" + targetThemeObject.Theme + "/" + imageList[0]);
 
+                
+                for (var i = 1; i < imageList.length; i++){
 
+                    $("#backgroundPreviewList").append(`<div class="four wide column">
 
+                        <img class="ui fluid image backgroundpreview" src="${"../../img/desktop/bg/" + targetThemeObject.Theme + "/" + imageList[i]}">
 
+                    </div>`);
 
+                }
 
+            }
 
+
 
+            function handleBackgroundSelectionChange(value){
 
+                var targetThemeObject = JSON.parse(decodeURIComponent(value));
 
+                loadBackgroundPreview(targetThemeObject);
 
+            }
 
+
 
+            function applyWallpaper(){
 
+                var targetWallpaper =JSON.parse(decodeURIComponent($("#wallpaperlist").val()));
 
+                $.get("../../system/desktop/theme?set=" + targetWallpaper.Theme, function(data) {
 
+                    if (ao_module_virtualDesktop == true){
 
+                        parent.changeDesktopTheme(targetWallpaper.Theme);
 
+                    }
 
+                    if (data.includes("Error")) {
 
+                        console.log(data);
 
+                        return;
 
+                    }
 
+
 
+                    //Reload the preview
 
+                    initCurrentBackgroundPreview();
 
+
 
+                    //Show change finsihed
 
+                    $("#wallpaperChangeConfirm").slideDown('fast').delay(3000).slideUp('fast');
 
+                });
 
+            }
 
+        </script>
 
+    </body>
 
+</html>

+ 15 - 2
web/desktop.system
View File 

@@ -854,6 +854,7 @@
 
         var currentUserTheme = ""; //The theme for current user. 
         var currentUserTheme = ""; //The theme for current user. 
         var backgroundCrossfadeInterval = 30000; //Time between the crossfade of each background image
 
         var backgroundCrossfadeInterval = 30000; //Time between the crossfade of each background image
 
         var nextSlideshowIndex = 0; //The next background image index to be shown
 
         var nextSlideshowIndex = 0; //The next background image index to be shown
 
+        var backgroundIntervalCounter; //The interval object for background changer
 
 
 
         //Desktop icon realted
 
         //Desktop icon realted
 
         var desktopIconSize = "medium"; //Size of desktop icons. Allow {small / medium / big}
 
         var desktopIconSize = "medium"; //Size of desktop icons. Allow {small / medium / big}
 
@@ -2217,7 +2218,12 @@
 
 
 
         //Actiave background cross fade changing animation
 
         //Actiave background cross fade changing animation
 
         function initBackgroundSwitchingAnimation() {
 
         function initBackgroundSwitchingAnimation() {
 
-            setInterval(function() {
 
+            if (localStorage.getItem("ao/desktop/backgroundInterval") !== null && !isNaN(parseInt(localStorage.getItem("ao/desktop/backgroundInterval")))){
 
+                //Localstorage has interval setting that is not NaN
 
+                backgroundCrossfadeInterval = parseInt(localStorage.getItem("ao/desktop/backgroundInterval")) * 1000;
 
+            }
 
+
 
+            backgroundIntervalCounter = setInterval(function() {
 
                 $("body").css("background-image", "none").css({
 
                 $("body").css("background-image", "none").css({
 
                     'background-color': '#000000'
 
                     'background-color': '#000000'
 
                 });
 
                 });
 
@@ -4075,7 +4081,14 @@
 
         }
 
         }
 
 
 
         function personalization() {
 
         function personalization() {
 
-            alert("WIP");
 
+            //Show the personalization window
 
+            newFloatWindow({
 
+                url: "SystemAO/desktop/personalization.html",
 
+                appicon: "SystemAO/desktop/img/personalization.png",
 
+                width:640,
 
+                height:480,
 
+                title: "Personalization"
 
+            });
 
             hideAllContextMenus();
 
             hideAllContextMenus();
 
         }
 
         }

BIN
web/img/desktop/bg/nobg.jpg
View File


BIN
web/img/desktop/bg/nobg.psd
View File