Browse Source

Added ability to set/unset pattern for a theme

Dmitriy Slipak 4 years ago
parent
commit
9836b7c326

+ 5 - 0
client/preview.js View File

99
     frame: 0
99
     frame: 0
100
   });
100
   });
101
 
101
 
102
+  if (location.pathname === "/theme") {
103
+    const tf = (theme.noPattern === undefined) ? false : theme.noPattern;
104
+    d3.select("#chkNoPattern").property("checked", tf);
105
+  }
106
+
102
 }
107
 }
103
 
108
 
104
 function loadAudio(f, cb) {
109
 function loadAudio(f, cb) {

+ 38 - 0
client/theme-editor.js View File

7
   	d3.select("#input-new-theme").on("change", updateNewThemeFile).each(updateNewThemeFile);
7
   	d3.select("#input-new-theme").on("change", updateNewThemeFile).each(updateNewThemeFile);
8
   	d3.select("#input-new-caption").on("change keyup", updateNewCaption).each(updateNewCaption);
8
   	d3.select("#input-new-caption").on("change keyup", updateNewCaption).each(updateNewCaption);
9
   	d3.select("#btn-delete-theme").on("click", deleteTheme);
9
   	d3.select("#btn-delete-theme").on("click", deleteTheme);
10
+    d3.select("#btn-save-theme").on("click", saveTheme);
11
+    d3.select("#chkNoPattern").on("change", setNoPattern);
10
 }
12
 }
11
 
13
 
12
 function setClass(cl, msg) {
14
 function setClass(cl, msg) {
114
 
116
 
115
 }
117
 }
116
 
118
 
119
+function saveTheme() {
120
+  if(!confirm($("#btn-save-theme").data("confirm"))){
121
+      d3.event.stopImmediatePropagation();
122
+      d3.event.preventDefault();
123
+      return;
124
+  }
125
+
126
+  $.ajax({
127
+    url: "/theme/save",
128
+    type: "POST",
129
+    data: JSON.stringify({theme: theme}),
130
+    dataType: "json",
131
+    contentType: "application/json",
132
+    cache: false,
133
+    success: function () {
134
+      preview.theme(theme);
135
+    },
136
+    error: function (error) {
137
+      console.log('error', error);
138
+    }
139
+  });
140
+
141
+}
142
+
143
+function setNoPattern() {
144
+  if (!theme) {
145
+    return;
146
+  }
147
+  const checked = d3.select("#chkNoPattern").property("checked");
148
+  if (!theme.noPattern) {
149
+    theme['noPattern'] = checked;
150
+  } else {
151
+    theme.noPattern = checked;
152
+  }
153
+}
154
+
117
 module.exports = {
155
 module.exports = {
118
 	initialize: _initialize
156
 	initialize: _initialize
119
 };
157
 };

+ 8 - 0
editor/theme.html View File

36
 
36
 
37
         <div class="row form-row" style="padding-bottom: 40px">
37
         <div class="row form-row" style="padding-bottom: 40px">
38
           <button type="button" id="btn-delete-theme" class="left" data-confirm="Are you sure you want to delete this theme?"><i class="fa fa-trash"></i>Delete</button>
38
           <button type="button" id="btn-delete-theme" class="left" data-confirm="Are you sure you want to delete this theme?"><i class="fa fa-trash"></i>Delete</button>
39
+          <button type="button" id="btn-save-theme" class="left" data-confirm="Are you sure you want to save changes?"><i class="fa fa-save"></i>Save</button>
39
         </div>
40
         </div>
40
 
41
 
41
         <div id="preview">
42
         <div id="preview">
85
           </label>
86
           </label>
86
           <input id="input-new-caption" name="new-caption" type="text" autocomplete="off" placeholder="Add a new theme name" />
87
           <input id="input-new-caption" name="new-caption" type="text" autocomplete="off" placeholder="Add a new theme name" />
87
         </div>
88
         </div>
89
+
90
+        <div class="row form-row">
91
+          <input type="checkbox" class="form-check-input" id="chkNoPattern">
92
+          <label class="form-check-label" for="chkNoPattern">No pattern</label>
93
+        </div>
94
+
88
         <div class="row form-row">
95
         <div class="row form-row">
89
           <button type="button" id="btn-new-theme" class="left"><i class="fa fa-arrow-circle-up"></i>Add</button>
96
           <button type="button" id="btn-new-theme" class="left"><i class="fa fa-arrow-circle-up"></i>Add</button>
90
         </div>
97
         </div>
91
         
98
         
99
+        
92
 
100
 
93
       </div>
101
       </div>
94
 
102
 

+ 10 - 3
renderer/index.js View File

1
-var d3 = require("d3"),
2
-    patterns = require("./patterns.js"),
1
+// var d3 = require("d3"),
2
+var patterns = require("./patterns.js"),
3
     textWrapper = require("./text-wrapper.js");
3
     textWrapper = require("./text-wrapper.js");
4
 
4
 
5
 module.exports = function(t) {
5
 module.exports = function(t) {
31
     if (typeof theme.waveLeft !== "number") theme.waveLeft = 0;
31
     if (typeof theme.waveLeft !== "number") theme.waveLeft = 0;
32
     if (typeof theme.waveRight !== "number") theme.waveRight = theme.width;
32
     if (typeof theme.waveRight !== "number") theme.waveRight = theme.width;
33
 
33
 
34
+    /*if (location.pathname === "/theme") {
35
+      const tf = (theme.noPattern === undefined) ? false : theme.noPattern;
36
+      d3.select("#chkNoPattern").property("checked", tf);
37
+    }*/
38
+
34
     wrapText = textWrapper(theme);
39
     wrapText = textWrapper(theme);
35
 
40
 
36
     return this;
41
     return this;
51
       context.drawImage(backgroundImage, 0, 0, theme.width, theme.height);
56
       context.drawImage(backgroundImage, 0, 0, theme.width, theme.height);
52
     }
57
     }
53
 
58
 
54
-    patterns[theme.pattern || "wave"](context, options.waveform, theme);
59
+    if (!theme.noPattern) {
60
+      patterns[theme.pattern || "wave"](context, options.waveform, theme);
61
+    }
55
 
62
 
56
     // Write the caption
63
     // Write the caption
57
     if (options.caption) {
64
     if (options.caption) {

+ 24 - 0
server/index.js View File

141
   });
141
   });
142
 });
142
 });
143
 
143
 
144
+// Save theme
145
+app.post("/theme/save/", jsonParser, function (req, res) {
146
+  var themesFile = path.join(serverSettings.settingsPath, "themes.json");
147
+  fs.readFile(themesFile, "utf8", function readFileCallback(err, data) {
148
+    if (err) {
149
+      console.log('err', err);
150
+      res.send(JSON.stringify({status: 500, error: err}));
151
+    } else {
152
+      var theme = req.body.theme;
153
+      var themes = JSON.parse(data);
154
+      themes[theme.name] = theme;
155
+      var jt = JSON.stringify(themes);
156
+      fs.writeFile(themesFile, jt, "utf8", function (err) {
157
+        if (err) {
158
+          console.log(err);
159
+          res.send(JSON.stringify({status: 500, error: err}));
160
+        }
161
+        res.send(JSON.stringify({status: 200, success: "success"}));
162
+      });
163
+    }
164
+  });
165
+  
166
+});
167
+
144
 // Theme editor
168
 // Theme editor
145
 app.use("/theme/", express.static(path.join(__dirname, "..", "editor/theme.html")));
169
 app.use("/theme/", express.static(path.join(__dirname, "..", "editor/theme.html")));
146
 
170
 

BIN
settings/backgrounds/GettyImages-334308.jpg View File


BIN
settings/backgrounds/GettyImages-51127540.jpg View File


BIN
settings/fonts/NHaasGroteskTXPro-65Md.ttf View File


File diff suppressed because it is too large
+ 1 - 1
settings/themes.json