Merge pull request #80 from Atrejoe/feature/config_as_json

Updated settings-UI (Image panel, JSON export)

settings/settings-UI.html

@@ -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');
@@ -524,6 +601,112 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
     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>
 </html>

settings/settings.jsonc

@@ -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
+*/