Merge pull request #80 from Atrejoe/feature/config_as_json
Updated settings-UI (Image panel, JSON export)
This commit is contained in:
		| @@ -35,7 +35,7 @@ body{ | ||||
|         <input id="ical_urls" type="text" placeholder="'https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics'"> | ||||
|       </div> | ||||
|  | ||||
|             <div class="field"> | ||||
|       <div class="field"> | ||||
|         <label>RSS-Feed URL/s in the following format: 'URL 1', 'URL 2', 'URL 3'</label> | ||||
|         <input id="rss_urls" type="text" placeholder="'http://feeds.bbci.co.uk/news/world/rss.xml#'"> | ||||
|       </div> | ||||
| @@ -78,7 +78,6 @@ body{ | ||||
|         <input id="api_key" type="text" placeholder=""> | ||||
|       </div> | ||||
|  | ||||
|  | ||||
|       <div class="field"> | ||||
|         <label>Location (for weather data)</label> | ||||
|         <details class="ts accordion"> | ||||
| @@ -273,7 +272,7 @@ body{ | ||||
|  | ||||
|       <div class="field"> | ||||
|         <label>What should be displayed in the middle (main) section?</label> | ||||
|         <div class="ts checkboxes"> | ||||
|         <div class="ts checkboxes" id="cb_middle_section"> | ||||
|           <div class="ts radio checkbox"> | ||||
|             <input id="Calendar" type="radio" name="ms" checked> | ||||
|             <label for="Calendar">A monthly Calendar</label> | ||||
| @@ -282,11 +281,52 @@ body{ | ||||
|             <input id="Agenda" type="radio" name="ms"> | ||||
|             <label for="Agenda">Agenda of upcoming events</label> | ||||
|           </div> | ||||
|           <div class="ts radio checkbox"> | ||||
|             <input id="Image" type="radio" name="ms"> | ||||
|             <label for="Image">An image</label> | ||||
|           </div> | ||||
|           <div class="ts radio checkbox"> | ||||
|             <input id="middle_blank" type="radio" name="ms"> | ||||
|             <label for="middle_blank">Nothing</label> | ||||
|           </div> | ||||
|         </div> | ||||
|          | ||||
|       </div> | ||||
|       <div class="field" id="Image_Config" style="display:none;"> | ||||
|           <div class="field"> | ||||
|             <label>What is the URl or path of the image?</label> | ||||
|             <details class="ts accordion"> | ||||
|               <summary> | ||||
|                 <i class="dropdown icon"></i> Info | ||||
|               </summary> | ||||
|               <div class="content"> | ||||
|                 The following parameters will be substituted: | ||||
|                 <ul> | ||||
|                   <li><code>{model}</code> - substituted by the E-Paper model name.</li> | ||||
|                   <li><code>{width}</code> - substituted by the panel width.</li> | ||||
|                   <li><code>{height}</code> - substituted by the panel width.</li> | ||||
|                 </ul> | ||||
|               </div> | ||||
|             </details> | ||||
|             <input id="image_path" type="text" placeholder="https://github.com/aceisace/Inky-Calendar/blob/master/Gallery/Inky-Calendar-logo.png?raw=true"/> | ||||
|           </div> | ||||
|  | ||||
|           <div class="field"> | ||||
|             <label>Do you want to send extra data while obtaining the image?</label> | ||||
|             <details class="ts accordion"> | ||||
|               <summary> | ||||
|                 <i class="dropdown icon"></i> Info | ||||
|               </summary> | ||||
|               <div class="content"> | ||||
|                 <p>Optional data. When specified, this data is sent as Json to the image url using POST. | ||||
|                   <br/>This is useful for some dynamically generated images. | ||||
|                 </p> | ||||
|               </div> | ||||
|             </details> | ||||
|             <textarea  id="image_path_body" type="text" rows="4" placeholder='[ | ||||
|   "https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics" | ||||
| ]'></textarea> | ||||
|           </div> | ||||
|       </div> | ||||
|  | ||||
|       <div class="field"> | ||||
| @@ -305,13 +345,14 @@ body{ | ||||
|  | ||||
|       <div class="content"> | ||||
|       <p>Instructions<br> | ||||
| Insert your peesonal details and preferences and click on 'Generate'. Copy the downloaded file to the Raspberry Pi and place it in: '/home/pi/Inky-Calendar/settings/' (inside the settings folder within the Inky-Calendar folder. Lastly, reboot the Raspberry Pi to apply the changes. You can also manually run the software with: | ||||
| Insert your personal details and preferences and click on 'Generate'. Copy the downloaded file to the Raspberry Pi and place it in: '/home/pi/Inky-Calendar/settings/' (inside the settings folder within the Inky-Calendar folder. Lastly, reboot the Raspberry Pi to apply the changes. You can also manually run the software with: | ||||
| python3 /home/pi/Inky-Calendar/modules/inkycal.py.</p> | ||||
|     </div> | ||||
|  | ||||
|     </form> | ||||
|     <br> | ||||
|     <button class="ts primary button" onClick="generate();">Generate</button> | ||||
|     <button class="ts primary button" onClick="generate(false);">Generate</button> | ||||
|     <button class="ts secondary button" onClick="generate(true);">Generate (as JSON, experimental)</button> | ||||
|   <br><br> | ||||
|   <kbd>Developed by Toby Chui for Inky-Calendar Project, modified by aceisace. Licensed under MIT</kbd> | ||||
|   <details class="ts accordion"> | ||||
| @@ -333,9 +374,32 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI | ||||
|   <br> | ||||
|    | ||||
|   <script> | ||||
|   var template = 'ical_urls = [{ical_urls}]\nrss_feeds = [{rss_urls}]\nupdate_interval = "{update_interval}"\napi_key = "{api_key}"\nlocation = "{location}"\nweek_starts_on = "{week_starts_on}"\ncalibration_hours = [{calibration_hours}]\nmodel = "{model}"\nlanguage = "{language}"\nunits = "{units}"\nhours = "{hours}"\ntop_section = "{top_section}"\nmiddle_section = "{middle_section}"\nbottom_section = "{bottom_section}"'; | ||||
|   var template = `ical_urls = [{ical_urls}] | ||||
| rss_feeds = [{rss_urls}] | ||||
| update_interval = "{update_interval}" | ||||
| api_key = "{api_key}" | ||||
| location = "{location}" | ||||
| week_starts_on = "{week_starts_on}" | ||||
| calibration_hours = [{calibration_hours}] | ||||
| model = "{model}" | ||||
| language = "{language}" | ||||
| units = "{units}" | ||||
| hours = "{hours}" | ||||
| top_section = "{top_section}" | ||||
| middle_section = "{middle_section}" | ||||
| bottom_section = "{bottom_section}" | ||||
| inkycal_image_path = "{image_path}" | ||||
| inkycal_image_path_body = "{image_path_body}"`; | ||||
|    | ||||
|   function generate(){ | ||||
|   $('#cb_middle_section').change(function(){ | ||||
|     if($('#Image').prop("checked")) { | ||||
|       $('#Image_Config').show(); | ||||
|     } else { | ||||
|       $('#Image_Config').hide(); | ||||
|     } | ||||
|   }); | ||||
|  | ||||
|   function generate(json){ | ||||
|     var ical_urls = $("#ical_urls").val().trim(); | ||||
|     if (ical_urls == ""){ | ||||
|       ical_urls = $("#ical_urls").attr("placeholder"); | ||||
| @@ -475,6 +539,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI | ||||
|     if ($('#Agenda').is(':checked')){ | ||||
|       middle_section = "inkycal_agenda"; | ||||
|     } | ||||
|     if ($('#Image').is(':checked')){ | ||||
|       middle_section = "inkycal_image"; | ||||
|     } | ||||
|     if ($('#middle_blank').is(':checked')){ | ||||
|       middle_section = ""; | ||||
|     } | ||||
| @@ -484,9 +551,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI | ||||
|       bottom_section = ""; | ||||
|     } | ||||
|  | ||||
|     var image_path = $("#image_path").val().trim(); | ||||
|     if (image_path == ""){ | ||||
|       image_path = $("#image_path").attr("placeholder"); | ||||
|     } | ||||
|  | ||||
|     var image_path_body = $("#image_path").val().trim(); | ||||
|  | ||||
|     //console.log(ical_urls, rss_urls, update_interval, api_key, location, week_starts_on, calibration_hours, model, language, units, hours, top_section, middle_section, bottom_section); | ||||
|     createPythonSetting(ical_urls, rss_urls, update_interval, api_key, location, week_starts_on, calibration_hours, model, language, units, hours, top_section, middle_section, bottom_section); | ||||
|     if(json) | ||||
|       downloadSettingsAsJson(ical_urls, rss_urls, update_interval, api_key, location, week_starts_on, calibration_hours, model, language, units, hours, top_section, middle_section, bottom_section, image_path, image_path_body) | ||||
|     else | ||||
|       createPythonSetting(ical_urls, rss_urls, update_interval, api_key, location, week_starts_on, calibration_hours, model, language, units, hours, top_section, middle_section, bottom_section, image_path, image_path_body); | ||||
|   } | ||||
|    | ||||
|   function rk(content,key,value){ | ||||
| @@ -494,7 +570,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI | ||||
|     return content.split("{" + key + "}").join(value); | ||||
|   } | ||||
|    | ||||
|   function createPythonSetting(a,b,c,d,e,f,g,h,i,j,k,l,m,n){ | ||||
|   function createPythonSetting(a,b,c,d,e,f,g,h,i,j,k,l,m,n, image_path, image_path_body){ | ||||
|     var box = template; | ||||
|     box = rk(box,"ical_urls",a); | ||||
|     box = rk(box,"rss_urls",b); | ||||
| @@ -510,7 +586,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI | ||||
|     box = rk(box,"top_section",l); | ||||
|     box = rk(box,"middle_section",m); | ||||
|     box = rk(box,"bottom_section",n); | ||||
|  | ||||
|     box = rk(box,"image_path",image_path); | ||||
|     box = rk(box,"image_path_body",image_path_body); | ||||
|  | ||||
|     var config = new Blob([box], {type : "text/plain"}); | ||||
|     var link = document.createElement('link'); | ||||
| @@ -523,6 +600,112 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI | ||||
|     a.click(); | ||||
|     document.body.removeChild(a); | ||||
|   } | ||||
|  | ||||
|   function TrimSingleQuotes(text){ | ||||
|       return text.replace(/^'+/g,"").replace(/'+$/g,"") | ||||
|   } | ||||
|  | ||||
|   function downloadSettingsAsJson( | ||||
|     ical_urls, | ||||
|     rss_urls, | ||||
|     update_interval, | ||||
|     api_key, | ||||
|     location, | ||||
|     week_starts_on, | ||||
|     calibration_hours, | ||||
|     model, | ||||
|     language, | ||||
|     units, | ||||
|     hours, | ||||
|     top_section, | ||||
|     middle_section, | ||||
|     bottom_section, | ||||
|     image_path, | ||||
|     image_path_body | ||||
|   ) { | ||||
|     var result = { | ||||
|       "language"          : language,               // "en", "de", "fr", "jp" etc. | ||||
|       "units"             : units,               // "metric", "imperial" | ||||
|       "hours"             : Number(hours),       // 24, 12 | ||||
|       "model"             : model, | ||||
|       "update_interval"   : Number(update_interval),       // 10, 15, 20, 30, 60 | ||||
|       "calibration_hours" : calibration_hours.split(",").map(function(x){ return Number(x);}),              // Do not change unless you know what you are doing | ||||
|       "panels" : [] | ||||
|     }; | ||||
|  | ||||
|     switch(top_section){ | ||||
|       case "inkycal_weather": | ||||
|         result.panels.push( | ||||
|           { | ||||
|             "location"  : "top", | ||||
|             "type"      : "inkycal_weather", | ||||
|             "config"    : { | ||||
|                 "api_key"  : api_key,     //Your openweathermap API-KEY -> "api-key" | ||||
|                 "location" : location      //"City name, Country code" | ||||
|             } | ||||
|           } | ||||
|         ) | ||||
|         break; | ||||
|       default: | ||||
|         break; | ||||
|     } | ||||
|  | ||||
|     switch(middle_section){ | ||||
|       case "inkycal_agenda": | ||||
|       case "inkycal_calendar": | ||||
|         result.panels.push( | ||||
|           { | ||||
|             "location"  : "middle", | ||||
|             "type"      : middle_section, | ||||
|             "config"    : { | ||||
|                 "week_starts_on" : week_starts_on,    //"Sunday", "Monday"... | ||||
|                 "ical_urls"  : ical_urls.split().map(function(x){ return TrimSingleQuotes(x);}) | ||||
|             } | ||||
|           } | ||||
|         ) | ||||
|         break; | ||||
|       case "inkycal_image": | ||||
|         result.panels.push( | ||||
|           { | ||||
|             "location"  : "middle", | ||||
|             "type"      : middle_section, | ||||
|             "config"    : { | ||||
|                 "image_path"  : TrimSingleQuotes(image_path), | ||||
|                 "image_path_body" : image_path_body | ||||
|             } | ||||
|           } | ||||
|         ) | ||||
|         break; | ||||
|       default: | ||||
|         break; | ||||
|     } | ||||
|  | ||||
|     switch(bottom_section){ | ||||
|       case "inkycal_rss": | ||||
|         result.panels.push( | ||||
|           { | ||||
|             "location"  : "bottom", | ||||
|             "type"      : bottom_section, | ||||
|             "config"    : { | ||||
|                 "rss_urls"  : rss_urls.split().map(function(x){ return TrimSingleQuotes(x);}) | ||||
|             } | ||||
|           } | ||||
|         ) | ||||
|         break; | ||||
|       default: | ||||
|         break; | ||||
|     } | ||||
|     var config = new Blob([JSON.stringify(result, null, "\t")], {type : "text/json"}); | ||||
|     var link = document.createElement('link'); | ||||
|     link.href = window.URL.createObjectURL(config); | ||||
|     var a = document.createElement('A'); | ||||
|     a.href = link.href; | ||||
|     a.download = link.href.substr(link.href.lastIndexOf('/') + 1); | ||||
|     document.body.appendChild(a); | ||||
|     $(a).attr('download','settings.jsonc'); | ||||
|     a.click(); | ||||
|     document.body.removeChild(a); | ||||
|   } | ||||
|    | ||||
|   </script> | ||||
| </body> | ||||
|   | ||||
							
								
								
									
										91
									
								
								settings/settings.jsonc
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										91
									
								
								settings/settings.jsonc
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,91 @@ | ||||
| { | ||||
|     "language"          : "en",                   // "en", "de", "fr", "jp" etc. | ||||
|     "units"             : "metric",               // "metric", "imperial" | ||||
|     "hours"             : 24,                     // 24, 12 | ||||
|     "model"             : "epd_7_in_5_v2_colour", // For supported E-paper models, see below | ||||
|     "update_interval"   : 60,                     // 10, 15, 20, 30, 60 | ||||
|     "calibration_hours" : [0,12,18],              // Do not change unlesss you know what you are doing | ||||
|  | ||||
|     //For now three panels can be defined for three unique locations: 'top', 'middle' and 'bottom' | ||||
|     "panels" : [ | ||||
|         { | ||||
|             "location"  : "top", | ||||
|             "type"      : "inkycal_weather", | ||||
|             "config"    : { | ||||
|                 "api_key"  : "",                  //Your openweathermap API-KEY -> "api-key" | ||||
|                 "location" : "Stuttgart, DE"      //"City name, Country code" | ||||
|             } | ||||
|         }, | ||||
|         { | ||||
|             "location"  : "middle", | ||||
|             "type"      : "inkycal_calendar",     // "inkycal_calendar" and "inkycal_agenda" have the same parameters, but are displayed differently | ||||
|             "config"    : { | ||||
|                 "week_starts_on" : "Monday",      //"Sunday", "Monday"... | ||||
|                 "ical_urls" : [ | ||||
|                     "https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics", | ||||
|                     "https://www.calendarlabs.com/ical-calendar/ics/101/Netherlands_Holidays.ics" | ||||
|                 ] | ||||
|             } | ||||
|         }, | ||||
|         { | ||||
|             "location" : "bottom", | ||||
|             "type"     : "inkycal_rss", | ||||
|             "config"   : { | ||||
|                 "rss_feeds" : [ | ||||
|                     "http://feeds.bbci.co.uk/news/world/rss.xml#", | ||||
|                     "https://github.com/aceisace/Inky-Calendar/releases.atom" | ||||
|                 ] | ||||
|             } | ||||
|         }, | ||||
|         { | ||||
|             "location" : "middle", | ||||
|             "type"     : "inkycal_image", | ||||
|             "config"   : { | ||||
|                 /* | ||||
|                 The url or file path to obtain the image from. | ||||
|                 The following parameters within accolades ({}) will be substituted: | ||||
|                 - model | ||||
|                 - width | ||||
|                 - height | ||||
|  | ||||
|                 Samples | ||||
|                 The inkycal logo: | ||||
|                 inkycal_image_path = 'https://github.com/aceisace/Inky-Calendar/raw/master/Gallery/Inky-Calendar-logo.png' | ||||
|                  | ||||
|                 A dynamic image with a demo-calendar | ||||
|                 inkycal_image_path = 'https://inkycal.robertsirre.nl/panel/test/{model}/image?width={width}&height={height}' | ||||
|                  | ||||
|                 Dynamic image with configurable calendars (see https://inkycal.robertsirre.nl/ and parameter inkycal_image_path_body) | ||||
|                 inkycal_image_path = 'https://inkycal.robertsirre.nl/panel/calendar/{model}?width={width}&height={height}' | ||||
|  | ||||
|                 inkycal_image_path  ='/home/pi/Inky-Calendar/images/canvas.png' | ||||
|                 */ | ||||
|                 "image_path" : "https://github.com/aceisace/Inky-Calendar/raw/master/Gallery/Inky-Calendar-logo.png", | ||||
|  | ||||
|                 /* | ||||
|                 Optional: inkycal_image_path_body | ||||
|                 Allows obtaining complexer configure images. | ||||
|                 When `inkycal_image_path` starts with `http` and `inkycal_image_path_body` is specified, the image is obtained using POST instead of GET. | ||||
|                 NOTE: structure of the body depends on the web-based image service | ||||
|                 */ | ||||
|  | ||||
|                 // inkycal_image_path_body = [ | ||||
|                 //   'https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics', | ||||
|                 //   'https://www.calendarlabs.com/ical-calendar/ics/101/Netherlands_Holidays.ics' | ||||
|                 // ] | ||||
|             } | ||||
|         } | ||||
|     ] | ||||
| } | ||||
|  | ||||
| /* | ||||
| Supported E-Paper models""" | ||||
| epd_7_in_5_v2_colour # 7.5" high-res black-white-red/yellow | ||||
| epd_7_in_5_v2        # 7.5" high-res black-white | ||||
| epd_7_in_5_colour    # 7.5" black-white-red/yellow | ||||
| epd_7_in_5           # 7.5" black-white | ||||
| epd_5_in_83_colour   # 5.83" black-white-red/yellow | ||||
| epd_5_in_83          # 5.83" black-white | ||||
| epd_4_in_2_colour    # 4.2" black-white-red/yellow | ||||
| epd_4_in_2           # 4.2" black-white | ||||
| */ | ||||
		Reference in New Issue
	
	Block a user