yyc12345/coconut-leaf
1
0
Fork 0
Code Activity

add dial plate svg

Browse Source
This commit is contained in:
yyc12345
2021-03-11 16:39:34 +08:00
parent 6468365f42
commit 1980f61242
4 changed files with 231 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/static/css/datetimepicker.css
View File

@@ -37,14 +37,71 @@ div.perfectTable > div {
}
div.pickerContainer {
display: flex;
align-items: center;
flex-flow: row;
justify-content: center;
}
div.pickerContainer > div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
div.pickerContainer > svg {
width: 100%;
height: 100%;
}
div.pickerContainer > svg > text {
dominant-baseline: middle;
text-anchor: middle;
}
div.pickerContainer > svg > circle[type=background] {
stroke-width: 0;
fill: #d0d0d0;
}
div.pickerContainer > svg > circle[type=symbol] {
stroke-width: 0;
fill: hsl(171, 100%, 41%); /* $primary */
}
div.pickerContainer > svg > line {
stroke-width: 0.125em;
stroke: hsl(171, 100%, 41%); /* $primary */
}
header.pickerHeader {
display: flex;
flex-flow: row;
flex-grow: 1;
flex-basis: 0;
flex-shrink: 0;
justify-content: space-between;
}
header.pickerHeader > div {
display: flex;
flex-flow: column;
flex-grow: 1;
flex-basis: 0;
flex-shrink: 0;
}

98
src/static/js/datetimepicker.js
View File

@@ -1,7 +1,76 @@
var ccn_datetimepicker_tabType = {
year: 0,
month: 1,
day: 2,
hour: 3,
minute: 4
};
var ccn_datetimepicker_currentTab = undefined;
var ccn_datetimepicker_mode = undefined;
var ccn_datetimepicker_pickerIndex = undefined;
var ccn_datetimepicker_isUTC = undefined;
var ccn_datetimepicker_callbackFunc = undefined;
var internalDateTime = new Date();
// ========================================= export func
function ccn_datetimepicker_Insert() {
$('body').append(ccn_template_datetimepicker.render());
// bind event and trigge once
$(window).resize(function (){
$('div.pickerContainer > svg').each(function (){
ccn_datetimepicker_OnSvgResize($(this));
});
}).resize();
}
function ccn_datetimepicker_Modal(mode, pickerIndex, isUTC, callbackFunc) {
ccn_datetimepicker_mode = mode;
ccn_datetimepicker_pickerIndex = pickerIndex;
ccn_datetimepicker_isUTC = isUTC;
ccn_datetimepicker_callbackFunc = callbackFunc;
ccn_datetimepicker_SwitchTab(mode);
$('#ccn-datetimepicker-modal').show();
}
// ========================================= internal func
function ccn_datetimepicker_OnSvgResize(ele) {
var scale = 200 / Math.min(ele.width(), ele.height());
ele.css('font-size', scale + 'em');
}
function ccn_datetimepicker_SwitchTab(newTab) {
$('div.pickerContainer > svg').hide();
switch(newTab) {
case ccn_datetimepicker_tabType.year:
$('#ccn-datetimepicker-panel-year').show();
break;
case ccn_datetimepicker_tabType.month:
$('#ccn-datetimepicker-panel-month').show();
break;
case ccn_datetimepicker_tabType.day:
$('#ccn-datetimepicker-panel-day').show();
break;
case ccn_datetimepicker_tabType.hour:
ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-hour').show());
break;
case ccn_datetimepicker_tabType.minute:
ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-minute').show());
break;
}
}
function ccn_datetimepicker_RefreshDisplayDateTime() {
}
function ccn_datetimepicker_Init() {
var nowtime = new Date();
@@ -54,20 +123,27 @@ function ccn_datetimepicker_SyncEx(pickerIndex) {
}
}
function ccn_datetimepicker_Set(pickerIndex, dt, isUTC) {
$('.datetimepicker-year[datetimepicker=' + pickerIndex + ']').val(isUTC ? dt.getUTCFullYear() : dt.getFullYear());
$('.datetimepicker-month[datetimepicker=' + pickerIndex + ']').val((isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1);
$('.datetimepicker-day[datetimepicker=' + pickerIndex + ']').val(isUTC ? dt.getUTCDate() : dt.getDate());
$('.datetimepicker-hour[datetimepicker=' + pickerIndex + ']').val(isUTC ? dt.getUTCHours() : dt.getHours());
$('.datetimepicker-minute[datetimepicker=' + pickerIndex + ']').val(isUTC ? dt.getUTCMinutes() : dt.getMinutes());
function ccn_datetimepicker_Set(pickerIndex, dt, isUTC, mode) {
var ele = $('[datetimepicker=' + pickerIndex + ']');
if (mode < ccn_datetimepicker_tabType.year) return;
ele.attr('datetimepicker-year', isUTC ? dt.getUTCFullYear() : dt.getFullYear());
if (mode < ccn_datetimepicker_tabType.month) return;
ele.attr('datetimepicker-month', (isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1);
if (mode < ccn_datetimepicker_tabType.day) return;
ele.attr('datetimepicker-day', isUTC ? dt.getUTCDate() : dt.getDate());
if (mode < ccn_datetimepicker_tabType.hour) return;
ele.attr('datetimepicker-hour', isUTC ? dt.getUTCHours() : dt.getHours());
if (mode < ccn_datetimepicker_tabType.minute) return;
ele.attr('datetimepicker-minute', isUTC ? dt.getUTCMinutes() : dt.getMinutes());
}
function ccn_datetimepicker_Get(pickerIndex, isUTC) {
year = $('.datetimepicker-year[datetimepicker=' + pickerIndex + ']').val();
month = $('.datetimepicker-month[datetimepicker=' + pickerIndex + ']').val();
day = $('.datetimepicker-day[datetimepicker=' + pickerIndex + ']').val();
hour = $('.datetimepicker-hour[datetimepicker=' + pickerIndex + ']').val();
minute = $('.datetimepicker-minute[datetimepicker=' + pickerIndex + ']').val();
var ele = $('[datetimepicker=' + pickerIndex + ']');
year = ele.attr('datetimepicker-year');
month = ele.attr('datetimepicker-month');
day = ele.attr('datetimepicker-day');
hour = ele.attr('datetimepicker-hour');
minute = ele.attr('datetimepicker-minute');
if (IsUndefinedOrEmpty(year)) year = ccn_datetime_MIN_YEAR;
if (IsUndefinedOrEmpty(month)) month = 1;
if (IsUndefinedOrEmpty(day)) day = 1;

64
src/static/tmpl/datetimepicker.tmpl
View File

@@ -1,12 +1,15 @@
<div id="ccn-datetimepicker-modal" class="modal is-active" style="float: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
<div class="modal-background"></div>
<div class="modal-card" style="height: 70%;">
<header class="modal-card-head">
<p id="ccn-datetimepicker-date" class="modal-card-title">2020年2月30日</p>
<p id="ccn-datetimepicker-time" class="modal-card-title">24：61</p>
<header class="modal-card-head pickerHeader">
<div><small i18n-name="ccn-i18n-universal-text-year"></small><span id="ccn-datetimepicker-datetime-year">&nbsp;</span></div>
<div><small i18n-name="ccn-i18n-universal-text-month"></small><span id="ccn-datetimepicker-datetime-month">&nbsp;</span></div>
<div><small i18n-name="ccn-i18n-universal-text-day"></small><span id="ccn-datetimepicker-datetime-day">&nbsp;</span></div>
<div><small i18n-name="ccn-i18n-universal-text-hour"></small><span id="ccn-datetimepicker-datetime-hour">&nbsp;</span></div>
<div><small i18n-name="ccn-i18n-universal-text-minute"></small><span id="ccn-datetimepicker-datetime-minute">&nbsp;</span></div>
</header>
<div class="modal-card-body pickerContainer">
<div style="display: none;">
<div id="ccn-datetimepicker-panel-year">
<nav class="level is-mobile">
<div class="level-left">
<div class="level-item control">
@@ -46,7 +49,7 @@
</div>
</div>
</div>
<div style="display: none;">
<div id="ccn-datetimepicker-panel-month">
<nav class="level is-mobile">
<div class="level-left">
<div class="level-item control">
@@ -86,7 +89,7 @@
</div>
</div>
</div>
<div>
<div id="ccn-datetimepicker-panel-day">
<nav class="level is-mobile">
<div class="level-left">
<div class="level-item control">
@@ -135,6 +138,55 @@
</div>
</div>
</div>
<svg id="ccn-datetimepicker-panel-hour" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200">
<circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle>
<line x1="100" y1="100" x2="100.000000" y2="20.000000"></line>
<circle cx="100.000000" cy="20.000000" r="1em" type="symbol"></circle>
<text x="100.000000" y="20.000000">0</text>
<text x="140.000000" y="30.717968">1</text>
<text x="169.282032" y="60.000000">2</text>
<text x="180.000000" y="100.000000">3</text>
<text x="169.282032" y="140.000000">4</text>
<text x="140.000000" y="169.282032">5</text>
<text x="100.000000" y="180.000000">6</text>
<text x="60.000000" y="169.282032">7</text>
<text x="30.717968" y="140.000000">8</text>
<text x="20.000000" y="100.000000">9</text>
<text x="30.717968" y="60.000000">10</text>
<text x="60.000000" y="30.717968">11</text>
<text x="100.000000" y="40.000000">12</text>
<text x="130.000000" y="48.038476">13</text>
<text x="151.961524" y="70.000000">14</text>
<text x="160.000000" y="100.000000">15</text>
<text x="151.961524" y="130.000000">16</text>
<text x="130.000000" y="151.961524">17</text>
<text x="100.000000" y="160.000000">18</text>
<text x="70.000000" y="151.961524">19</text>
<text x="48.038476" y="130.000000">20</text>
<text x="40.000000" y="100.000000">21</text>
<text x="48.038476" y="70.000000">22</text>
<text x="70.000000" y="48.038476">23</text>
</svg>
<svg id="ccn-datetimepicker-panel-minute" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200">
<circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle>
<line x1="100" y1="100" x2="100.000000" y2="20.000000"></line>
<circle cx="100.000000" cy="20.000000" r="1em" type="symbol"></circle>
<text x="100.000000" y="20.000000">0</text>
<text x="140.000000" y="30.717968">5</text>
<text x="169.282032" y="60.000000">10</text>
<text x="180.000000" y="100.000000">15</text>
<text x="169.282032" y="140.000000">20</text>
<text x="140.000000" y="169.282032">25</text>
<text x="100.000000" y="180.000000">30</text>
<text x="60.000000" y="169.282032">35</text>
<text x="30.717968" y="140.000000">40</text>
<text x="20.000000" y="100.000000">45</text>
<text x="30.717968" y="60.000000">50</text>
<text x="60.000000" y="30.717968">55</text>
</svg>
</div>
<footer class="modal-card-foot">
<a id="ccn-datetimepicker-btnConfirm" class="button is-success">

29
tools/dial_plate_gen.py Normal file
View File

@@ -0,0 +1,29 @@
import math
print('Dial Plate Generator')
plateSize = float(input('Plate size: '))
hourInnerRadius = float(input('Hour inner radius percent (float): '))
hourOutterRadius = float(input('Hour outter radius percent (float): '))
minuteRadius = float(input('Minute radius percent (float): '))
halfPlateSize = plateSize / 2
for i in range(24):
rad = math.radians(90 - i * 30)
x = math.cos(rad)
y = math.sin(rad)
radius = halfPlateSize * (hourOutterRadius if i < 12 else hourInnerRadius)
x = x * radius + halfPlateSize
y = (-y * radius) + halfPlateSize
print('<text x="{:.6f}" y="{:.6f}">{}</text>'.format(x, y, i))
print('')
for i in range(12):
rad = math.radians(90 - i * 30)
x = math.cos(rad)
y = math.sin(rad)
radius = minuteRadius * halfPlateSize
x = x * radius + halfPlateSize
y = (-y * radius) + halfPlateSize
print('<text x="{:.6f}" y="{:.6f}">{}</text>'.format(x, y, i * 5))