Inititial commit for release v2.0.0
A lot of work-in-progress and far from complete. Lots of improvements related to user-friendliness, fully new web-UI. Better infrastructure.... more coming soon
This commit is contained in:
Ace
837
settings-UI.html
837
settings-UI.html
@@ -1,837 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Settings-File Generator v2.0.0 BETA</title>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<br><br>
|
||||
<div class="ts container">
|
||||
<div class="ts segment">
|
||||
<div class="ts header">
|
||||
Setting Generator, v.2.0.0 BETA
|
||||
<div class="sub header"><a href="https://github.com/aceisace/Inky-Calendar">For Inky-Calendar Project of
|
||||
Ace-Innovation Laboratory (by aceisace)</a><br>
|
||||
<img src="https://github.com/aceisace/Inky-Calendar/blob/dev_ver2_0/Gallery/logo.png?raw=true"
|
||||
width="1000" alt="logo">
|
||||
<div>
|
||||
</div>
|
||||
<ins>If no value is filled in for any of the row, the default value will be used.</ins>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="ts form">
|
||||
<blockquote>
|
||||
<div class="content">
|
||||
<p>Instructions<br>
|
||||
Insert your personal details and preferences and click on 'Generate'. Copy the downloaded file to the
|
||||
Raspberry Pi. The location does not matter, however, you need to know the path to this file.
|
||||
</p>
|
||||
</div>
|
||||
</blockquote>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
General settings
|
||||
</legend>
|
||||
<div class="field">
|
||||
<label>On which day does the week start on in your country?</label>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="week_monday" type="radio" name="hr" checked>
|
||||
<label for="week_monday">Monday</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="week_sunday" type="radio" name="hr">
|
||||
<label for="week_sunday">Sunday</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>At which hours (in 24 hour-format) should the display be calibrated? Leave blank if you're not
|
||||
sure.</label>
|
||||
<details class="ts accordion">
|
||||
<summary>
|
||||
<i class="dropdown icon"></i> Info
|
||||
</summary>
|
||||
<div class="content">
|
||||
<p>Calibration refers to the process of flushing the display with a single colour to prevent 'ghosting'
|
||||
(an
|
||||
effect specific to E-Paper displays where the remnants of the previous image can be seen on the current
|
||||
one). It takes several minutes to finish the calibration(around 10 mins for the 2-colour displays and
|
||||
around 20 mins for the 3-colour displays) so please choose hours where you are less likely to need the
|
||||
display. It is recommended to calibrate at least thrice a day.</p>
|
||||
</div>
|
||||
</details>
|
||||
<input id="calibration_hours" type="text" placeholder="0,12,18">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Which E-Paper model are you using?</label>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="9_in_7" type="radio" name="dp" checked>
|
||||
<label for="9_in_7">9.7" ePaper</label>
|
||||
</div>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_7_in_5_v3_colour" type="radio" name="dp" checked>
|
||||
<label for="epd_7_in_5_v3_colour">7.5" v3 (880x528px) colour (latest)</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_7_in_5_v3" type="radio" name="dp">
|
||||
<label for="epd_7_in_5_v3">7.5" v3 (880x528px) black-white (latest)</label>
|
||||
</div>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_7_in_5_v2_colour" type="radio" name="dp" checked>
|
||||
<label for="epd_7_in_5_v2_colour">7.5" v2 (800x400px) colour</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_7_in_5_v2" type="radio" name="dp">
|
||||
<label for="epd_7_in_5_v2">7.5" v2 (800x400px) black-white</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_7_in_5_colour" type="radio" name="dp">
|
||||
<label for="epd_7_in_5_colour">7.5" v1 (600x384px) colour</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_7_in_5" type="radio" name="dp">
|
||||
<label for="epd_7_in_5">7.5" v1 (600x384px) black-white</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_5_in_83_colour" type="radio" name="dp">
|
||||
<label for="epd_5_in_83_colour">5.83" colour</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_5_in_83" type="radio" name="dp">
|
||||
<label for="epd_5_in_83">5.83" black-white</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_4_in_2_colour" type="radio" name="dp">
|
||||
<label for="epd_4_in_2_colour">4.2" colour</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="epd_4_in_2" type="radio" name="dp">
|
||||
<label for="epd_4_in_2">4.2" black-white</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>How often should the display be refreshed?</label>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="update_10_mins" type="radio" name="aa">
|
||||
<label for="update_10_mins">every 10 minutes. Not recommended for 3-colour E-Papers!</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="update_15_mins" type="radio" name="aa">
|
||||
<label for="update_15_mins">every 15 minutes</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="update_20_mins" type="radio" name="aa">
|
||||
<label for="update_20_mins">every 20 minutes</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="update_30_mins" type="radio" name="aa">
|
||||
<label for="update_30_mins">every 30 minutes</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="update_60_mins" type="radio" name="aa" checked>
|
||||
<label for="update_60_mins">every 60 minutes (recommended)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Which language should be used in the software?</label>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_en" type="radio" name="la" checked>
|
||||
<label for="language_en">English</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_de" type="radio" name="la">
|
||||
<label for="language_de">German</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_ru" type="radio" name="la">
|
||||
<label for="language_ru">Russian</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_it" type="radio" name="la">
|
||||
<label for="language_it">Italian</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_es" type="radio" name="la">
|
||||
<label for="language_es">Spanish</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_fr" type="radio" name="la">
|
||||
<label for="language_fr">French</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_el" type="radio" name="la">
|
||||
<label for="language_el">Greek</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_sv" type="radio" name="la">
|
||||
<label for="language_sv">Swedish</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_nl" type="radio" name="la">
|
||||
<label for="language_nl">Dutch</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_pl" type="radio" name="la">
|
||||
<label for="language_pl">Polish</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_ua" type="radio" name="la">
|
||||
<label for="language_ua">Ukrainian</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_nb" type="radio" name="la">
|
||||
<label for="language_nb">Norwegian</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_vi" type="radio" name="la">
|
||||
<label for="language_vi">Vietnamese</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_zh_tw" type="radio" name="la">
|
||||
<label for="language_zh_tw">Chinese-Taiwanese</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_zh" type="radio" name="la">
|
||||
<label for="language_zh">Chinese</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_ja" type="radio" name="la">
|
||||
<label for="language_ja">Japanese</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="language_ko" type="radio" name="la">
|
||||
<label for="language_ko">Korean</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Which units are used in your country?</label>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="metric" type="radio" name="un" checked>
|
||||
<label for="metric">Metric</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="imperial" type="radio" name="un">
|
||||
<label for="imperial">Imperial</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Which hour-format do you prefer?</label>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="24_hours" type="radio" name="tf" checked>
|
||||
<label for="24_hours">24-hour format</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="12_hours" type="radio" name="tf">
|
||||
<label for="12_hours">12-hour format</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Show an info section? The info section will be shown at the very bottom of the display and shows the time of last update.</label>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="info_yes" type="radio" name="info_section" checked>
|
||||
<label for="info_yes">Yes, show an info section</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="info_no" type="radio" name="info_section">
|
||||
<label for="info_no">Do not show the info section</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>What should be displayed in the top section?</label>
|
||||
<div class="ts checkboxes" id="cb_top_section">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="Weather" type="radio" name="ts" checked>
|
||||
<label for="Weather">Weather</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="top_blank" type="radio" name="ts">
|
||||
<label for="top_blank">Nothing</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field" id="pnl_top_height">
|
||||
<label>Height of the top section</label>
|
||||
<details class="ts accordion">
|
||||
<summary>
|
||||
<i class="dropdown icon"></i> Info
|
||||
</summary>
|
||||
<div class="content">
|
||||
<p>Section height is calculated relative to other sections. With this approach you can choose pixel-perfect, relative or percentage panel heights.</p></div>
|
||||
</details>
|
||||
<input id="top_height" type="number" min="1" max="100" placeholder="10">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>What should be displayed in the middle (main) section?</label>
|
||||
<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>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<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="pnl_middle_height">
|
||||
<label>Height of the middle section</label>
|
||||
<details class="ts accordion">
|
||||
<summary>
|
||||
<i class="dropdown icon"></i> Info
|
||||
</summary>
|
||||
<div class="content">
|
||||
<p>Section height is calculated relative to other sections. With this approach you can choose pixel-perfect, relative or percentage panel heights.</p></div>
|
||||
</details>
|
||||
<input id="middle_height" type="number" min="1" max="100" placeholder="65">
|
||||
</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">
|
||||
<label>What should be displayed in the bottom section?</label>
|
||||
<div class="ts checkboxes" id="cb_bottom_section">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="RSS" type="radio" name="bs" checked>
|
||||
<label for="RSS">RSS-feeds</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="bottom_blank" type="radio" name="bs">
|
||||
<label for="bottom_blank">Nothing</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field" id="pnl_bottom_height">
|
||||
<label>Height of the bottom section</label>
|
||||
<details class="ts accordion">
|
||||
<summary>
|
||||
<i class="dropdown icon"></i> Info
|
||||
</summary>
|
||||
<div class="content">
|
||||
<p>Section height is calculated relative to other sections. With this approach you can choose pixel-perfect, relative or percentage panel heights.</p></div>
|
||||
</details>
|
||||
<input id="bottom_height" type="number" min="1" max="100" placeholder="25">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Display orientation</label>
|
||||
<div class="ts checkboxes">
|
||||
<div class="ts radio checkbox">
|
||||
<input id="DisplayNotRotated" type="radio" name="bbs" checked>
|
||||
<label for="DisplayNotRotated">Normal</label>
|
||||
</div>
|
||||
<div class="ts radio checkbox">
|
||||
<input id="DisplayRotated" type="radio" name="bbs">
|
||||
<label for="DisplayRotated">Upside-down</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
Panel-specific settings
|
||||
</legend>
|
||||
<div class="field">
|
||||
<label>iCalendar URL/s, separated by comma: url1, url2, url3</label>
|
||||
<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">
|
||||
<label>RSS-Feed URL/s, separated by comma: url1, url2, url3</label>
|
||||
<input id="rss_urls" type="text" placeholder="http://feeds.bbci.co.uk/news/world/rss.xml#">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Openweathermap API Key</label>
|
||||
<details class="ts accordion">
|
||||
<summary>
|
||||
<i class="dropdown icon"></i> Info
|
||||
</summary>
|
||||
<div class="content">
|
||||
<p> Please insert your own Openweathermap API-key to fetch the latest weather info. To find out how to
|
||||
create your own key, please click here: <a
|
||||
href="https://github.com/aceisace/Inky-Calendar/wiki/Openweathermap-API">Creating an openweathermap
|
||||
api-key</a>. If you don't add an api-key, the top section will not show any weather info</p>
|
||||
</div>
|
||||
</details>
|
||||
<input id="api_key" type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Location (for weather data)</label>
|
||||
<details class="ts accordion">
|
||||
<summary>
|
||||
<i class="dropdown icon"></i> Info
|
||||
</summary>
|
||||
<div class="content">
|
||||
<p>Location refers to the closest weather station from your place. It isn't necessarily the place you live
|
||||
in. To find this location, type your city name in the search box on <a
|
||||
href="https://openweathermap.org/">openweathermap</a>. The output should be in the following format:
|
||||
City Name, Country ISO-Code. Not sure what your ISO code is? Check here: <a
|
||||
href="https://countrycode.org/">(find iso-code)</a></p>
|
||||
</div>
|
||||
</details>
|
||||
<input id="location" type="text" placeholder="Stuttgart, DE">
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
||||
</form>
|
||||
<br>
|
||||
<button class="ts primary button" onClick="generate()">Generate</button>
|
||||
<br><br>
|
||||
<kbd>Developed by Toby Chui for Inkycal Project, modified by aceisace. Licensed under MIT</kbd>
|
||||
<details class="ts accordion">
|
||||
<summary>
|
||||
<i class="dropdown icon"></i> MIT License
|
||||
</summary>
|
||||
<div class="content">
|
||||
<p>Copyright 2019-2020 Toby Chui <br>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
|
||||
documentation files (the "Software"), to deal in the Software without restriction, including without
|
||||
limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
|
||||
Software, and to permit persons to whom the Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions
|
||||
of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
||||
TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
||||
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
|
||||
CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
||||
DEALINGS IN THE SOFTWARE.</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<script>
|
||||
$('#cb_middle_section').change(function () {
|
||||
if ($('#Image').prop("checked")) {
|
||||
$('#Image_Config').show();
|
||||
} else {
|
||||
$('#Image_Config').hide();
|
||||
}
|
||||
});
|
||||
|
||||
function generate() {
|
||||
var ical_urls = $("#ical_urls").val().trim().split(' ').join('').split(',');
|
||||
if (ical_urls == "") {
|
||||
ical_urls = $("#ical_urls").attr("placeholder").split(' ').join('').split(',');
|
||||
}
|
||||
|
||||
var rss_urls = $("#rss_urls").val().trim().split(' ').join('').split(',');
|
||||
if (rss_urls == "") {
|
||||
rss_urls = $("#rss_urls").attr("placeholder").split(' ').join('').split(',');
|
||||
}
|
||||
|
||||
var update_interval = "60";
|
||||
if ($('#update_10_mins').is(':checked')) {
|
||||
update_interval = "10";
|
||||
}
|
||||
if ($('#update_15_mins').is(':checked')) {
|
||||
update_interval = "15";
|
||||
}
|
||||
if ($('#update_20_mins').is(':checked')) {
|
||||
update_interval = "20";
|
||||
}
|
||||
if ($('#update_30_mins').is(':checked')) {
|
||||
update_interval = "30";
|
||||
}
|
||||
if ($('#update_60_mins').is(':checked')) {
|
||||
update_interval = "60";
|
||||
}
|
||||
|
||||
var api_key = $("#api_key").val().trim();
|
||||
if (api_key == "") {
|
||||
api_key = "";
|
||||
}
|
||||
|
||||
var location = $("#location").val().trim();
|
||||
if (location == "") {
|
||||
location = $("#location").attr("placeholder");
|
||||
}
|
||||
|
||||
var week_starts_on = "Monday";
|
||||
if ($('#week_sunday').is(':checked')) {
|
||||
week_starts_on = "Sunday";
|
||||
}
|
||||
|
||||
var calibration_hours = $("#calibration_hours").val().trim();
|
||||
if (calibration_hours == "") {
|
||||
calibration_hours = $("#calibration_hours").attr("placeholder");
|
||||
}
|
||||
|
||||
var model = "epd_7_in_5_v2";
|
||||
if ($('#9_in_7').is(':checked')) {
|
||||
model = "9_in_7";
|
||||
}
|
||||
if ($('#epd_7_in_5_v3_colour').is(':checked')) {
|
||||
model = "epd_7_in_5_v3_colour";
|
||||
}
|
||||
if ($('#epd_7_in_5_v3').is(':checked')) {
|
||||
model = "epd_7_in_5_v3";
|
||||
}
|
||||
if ($('#epd_7_in_5_v2_colour').is(':checked')) {
|
||||
model = "epd_7_in_5_v2_colour";
|
||||
}
|
||||
if ($('#epd_7_in_5_colour').is(':checked')) {
|
||||
model = "epd_7_in_5_colour";
|
||||
}
|
||||
if ($('#epd_7_in_5').is(':checked')) {
|
||||
model = "epd_7_in_5";
|
||||
}
|
||||
if ($('#epd_5_in_83_colour').is(':checked')) {
|
||||
model = "epd_5_in_83_colour";
|
||||
}
|
||||
if ($('#epd_5_in_83').is(':checked')) {
|
||||
model = "epd_5_in_83";
|
||||
}
|
||||
if ($('#epd_4_in_2_colour').is(':checked')) {
|
||||
model = "epd_4_in_2_colour";
|
||||
}
|
||||
if ($('#epd_4_in_2').is(':checked')) {
|
||||
model = "epd_4_in_2";
|
||||
}
|
||||
|
||||
var language = "en";
|
||||
if ($('#language_de').is(':checked')) {
|
||||
language = "de";
|
||||
}
|
||||
if ($('#language_ru').is(':checked')) {
|
||||
language = "ru";
|
||||
}
|
||||
if ($('#language_it').is(':checked')) {
|
||||
language = "it";
|
||||
}
|
||||
if ($('#language_es').is(':checked')) {
|
||||
language = "es";
|
||||
}
|
||||
if ($('#language_fr').is(':checked')) {
|
||||
language = "fr";
|
||||
}
|
||||
if ($('#language_el').is(':checked')) {
|
||||
language = "el";
|
||||
}
|
||||
if ($('#language_sv').is(':checked')) {
|
||||
language = "sv";
|
||||
}
|
||||
if ($('#language_nl').is(':checked')) {
|
||||
language = "nl";
|
||||
}
|
||||
if ($('#language_pl').is(':checked')) {
|
||||
language = "pl";
|
||||
}
|
||||
if ($('#language_ua').is(':checked')) {
|
||||
language = "ua";
|
||||
}
|
||||
if ($('#language_nb').is(':checked')) {
|
||||
language = "nb";
|
||||
}
|
||||
if ($('#language_vi').is(':checked')) {
|
||||
language = "vi";
|
||||
}
|
||||
if ($('#language_zh_tw').is(':checked')) {
|
||||
language = "zh_tw";
|
||||
}
|
||||
if ($('#language_zh').is(':checked')) {
|
||||
language = "zh";
|
||||
}
|
||||
if ($('#language_ja').is(':checked')) {
|
||||
language = "ja";
|
||||
}
|
||||
if ($('#language_ko').is(':checked')) {
|
||||
language = "ko";
|
||||
}
|
||||
|
||||
var units = "metric";
|
||||
if ($('#imperial').is(':checked')) {
|
||||
units = "imperial";
|
||||
}
|
||||
|
||||
|
||||
var info_section = true;
|
||||
if ($('#info_no').is(':checked')) {
|
||||
info_section = false;
|
||||
}
|
||||
|
||||
var hours = 24;
|
||||
if ($('#12_hours').is(':checked')) {
|
||||
hours = 12;
|
||||
}
|
||||
|
||||
var top_section = "Weather";
|
||||
if ($('#top_blank').is(':checked')) {
|
||||
top_section = "";
|
||||
}
|
||||
|
||||
var middle_section = "Calendar";
|
||||
if ($('#Agenda').is(':checked')) {
|
||||
middle_section = "Agenda";
|
||||
}
|
||||
if ($('#Image').is(':checked')) {
|
||||
middle_section = "Image";
|
||||
}
|
||||
if ($('#middle_blank').is(':checked')) {
|
||||
middle_section = "";
|
||||
}
|
||||
|
||||
var bottom_section = "RSS";
|
||||
if ($('#bottom_blank').is(':checked')) {
|
||||
bottom_section = "";
|
||||
}
|
||||
|
||||
top_section_height = $("#top_height").val().trim()
|
||||
top_section_height = top_section_height=="" ? null : Number(top_section_height)
|
||||
|
||||
middle_section_height = $("#middle_height").val().trim()
|
||||
middle_section_height = middle_section_height=="" ? null : Number(middle_section_height)
|
||||
|
||||
bottom_section_height = $("#bottom_height").val().trim()
|
||||
bottom_section_height = bottom_section_height=="" ? null : Number(bottom_section_height)
|
||||
|
||||
var display_orientation = "normal";
|
||||
if ($('#DisplayRotated').is(':checked')) {
|
||||
display_orientation = "upside_down";
|
||||
}
|
||||
|
||||
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);
|
||||
downloadSettingsAsJson(
|
||||
ical_urls,
|
||||
rss_urls,
|
||||
update_interval,
|
||||
api_key, location,
|
||||
week_starts_on,
|
||||
calibration_hours,
|
||||
model, language,
|
||||
units, hours,
|
||||
info_section,
|
||||
top_section,
|
||||
top_section_height,
|
||||
middle_section,
|
||||
middle_section_height,
|
||||
bottom_section,
|
||||
bottom_section_height,
|
||||
display_orientation,
|
||||
image_path,
|
||||
image_path_body)
|
||||
}
|
||||
|
||||
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,
|
||||
info_section,
|
||||
top_section,
|
||||
top_section_height,
|
||||
middle_section,
|
||||
middle_section_height,
|
||||
bottom_section,
|
||||
bottom_section_height,
|
||||
display_orientation,
|
||||
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
|
||||
"display_orientation": display_orientation,
|
||||
"info_section":info_section,
|
||||
"panels": []
|
||||
};
|
||||
|
||||
switch (top_section) {
|
||||
case "Weather":
|
||||
result.panels.push(
|
||||
{
|
||||
"location": "top",
|
||||
"type": "Weather",
|
||||
"height" : top_section_height,
|
||||
"config": {
|
||||
"api_key": api_key, //Your openweathermap API-KEY -> "api-key"
|
||||
"location": location //"City name, Country code"
|
||||
}
|
||||
}
|
||||
)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
switch (middle_section) {
|
||||
case "Agenda":
|
||||
case "Calendar":
|
||||
result.panels.push(
|
||||
{
|
||||
"location": "middle",
|
||||
"type": middle_section,
|
||||
"height" : middle_section_height,
|
||||
"config": {
|
||||
"week_starts_on": week_starts_on, //"Sunday", "Monday"...
|
||||
"ical_urls": ical_urls
|
||||
}
|
||||
}
|
||||
)
|
||||
break;
|
||||
case "Image":
|
||||
result.panels.push(
|
||||
{
|
||||
"location": "middle",
|
||||
"type": middle_section,
|
||||
"height" : middle_section_height,
|
||||
"config": {
|
||||
"image_path": TrimSingleQuotes(image_path),
|
||||
"image_path_body": image_path_body
|
||||
}
|
||||
}
|
||||
)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
switch (bottom_section) {
|
||||
case "RSS":
|
||||
result.panels.push(
|
||||
{
|
||||
"location": "bottom",
|
||||
"type": bottom_section,
|
||||
"height" : bottom_section_height,
|
||||
"config": {
|
||||
"rss_urls": rss_urls
|
||||
}
|
||||
}
|
||||
)
|
||||
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.json');
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user