837 lines
31 KiB
HTML
837 lines
31 KiB
HTML
|
<!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>
|