Projects/cardmaker
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Support any amount of figures, with arbitrary positioning/size/colours/sources

Browse Source
This commit is contained in:
Robert Eric Maikher
2018-01-01 13:15:15 +01:00
parent c61f845741
commit 458652bcae
6 changed files with 226 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
card.py
+6 -2
View File
@@ -2,13 +2,15 @@
import glob, os
from yaml import load, dump
from common import Model
from figure import Figure
import config
class Card(Model):
filename = ""#filename without extentions
title = "title"
figure = "code"
figure = ["code"]
figure_source = "material-icons"
figure_parsed = []
#material-icons = https://material.io/icons/
#mdi = https://materialdesignicons.com/
#fa = http://fontawesome.io/icons/
@@ -54,12 +56,13 @@ def from_yaml(data, filename="from_yaml"):
card.filename = filename
for key, val in load(data).items():
setattr(card, key, val)
setattr(card, "figure_parsed", [Figure(line, getattr(card, "figure_source")) for line in getattr(card, "figure")])
return card
def to_yaml(card):
out = {}
for key in dir(card):
if "_" not in key[0] and key not in ("filename","has_flag"):
if "_" not in key[0] and key not in ("filename","has_flag","figure_parsed"):
val = getattr(card, key)
if (val or val==0) and val != getattr(Card, key):
out[key] = val
@@ -80,6 +83,7 @@ def from_form(form):#sanic's request.form
setattr(card, key, val)
else:
setattr(card, key, val[0].strip().replace("\r\n", "\n"))
setattr(card, "figure_parsed", [Figure(line, getattr(card, "figure_source")) for line in getattr(card, "figure")])
return card
def is_filename_vacant(filename, in_carddir=True):
figure.py
+101
View File
@@ -0,0 +1,101 @@
from common import Model
class Figure(Model):
filename = ""
source = ""
# material-icons = https://material.io/icons/
# mdi = https://materialdesignicons.com/
# fa = http://fontawesome.io/icons/
# svg = the svgs/ folder
color = ""
top = 0
bottom = 0
left = 0
right = 0
size = 0
autoscale = True
scale = 100.
width = 0
height = 0
rotate = 0
def __init__(self, line, source = ""):
data = line.split(",")
self.filename = data[0].strip()
if len(data) > 1:
for key, val in [[y.strip() for y in x.split(":")] for x in data[1:]]:
if key in ("width", "height", "size", "autoscale"):
continue
elif key in ("top", "bottom", "left", "right", "scale"):
if key == "scale" and val != "auto":
self.autoscale = False
val = float(val)
elif key in ("rotate"):
val = int(val)
if key:
setattr(self, key, val)
if not self.source:
self.source = source
if self.autoscale and self.top + self.bottom + self.left + self.right > 0:
l = 0
r = 0
t = 0
b = 0
s = 0
if self.top + self.bottom > self.left + self.right:
s = self.top + self.bottom
l += (self.top + self.bottom) / 2
r += (self.top + self.bottom) / 2
ratio_t = self.top / s
ratio_b = self.bottom / s
if self.left <= r:
r -= self.left
else:
temp = self.left - r
r = 0
s += temp
t += temp * ratio_t
b += temp * ratio_b
if self.right <= l:
l -= self.right
else:
temp = self.right - l
l = 0
s += temp
t += temp / 2
b += temp / 2
else:
s = self.left + self.right
t += (self.left + self.right) / 2
b += (self.left + self.right) / 2
ratio_l = self.left / s
ratio_r = self.right / s
if self.top <= b:
b -= self.top
else:
temp = self.top - b
b = 0
s += temp
l += temp * ratio_l
r += temp * ratio_r
if self.bottom <= t:
t -= self.bottom
else:
temp = self.bottom - t
t = 0
s += temp
l += temp * ratio_l
r += temp * ratio_r
self.top += t
self.bottom += b
self.left += l
self.right += r
self.size = s
resources/cards/card.css
+1 -5
View File
@@ -111,12 +111,8 @@ article figure >* {
color: var(--color-figure);
position: absolute;
top:0;right:0;left:0;bottom:0;
}
article figure img {
padding: 1mm 0;
display: block;
height: calc(100% - 2mm);
margin: auto auto;
height:100%;
}
article figure img.svg_filter{
/*causes DPI issues when printing*/
resources/cards/card.vm
+37 -19
View File
@@ -5,29 +5,47 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
#macro(figure $card)
#if($card.figure.__contains__(","))
#figure_embed($card.figure.split(",").get(1).strip(), $card.figure_source, "111")
#figure_embed($card.figure.split(",").get(0).strip(), $card.figure_source, "aaa")
#else
#figure_embed($card.figure, $card.figure_source, "aaa")
#foreach($figure in $card.figure_parsed)
#figure_embed($figure)
#end
#end
#macro(figure_embed $figure $source $color)
#if($source == "material-icons")
<!--https://material.io/icons/-->
<i class="material-icons figure">$escape_html($label)</i>
#elseif($source == "mdi")
<!--https://materialdesignicons.com/-->
<i class="mdi mdi-$escape_html($figure)"></i>
#elseif($source == "fa")
<!--http://fontawesome.io/icons/-->
<i class="fa fa-$escape_html($figure)"></i>
#elseif($source == "svg")
<!--/cards/svg-->
<!--<img class="svg_filter" src="/svg/${escape_html($figure)}.svg">-->
<img src="/svg/${escape_html($figure)}.svg?color=$color">
#macro(figure_embed $fig)
#if($fig.source == "material-icons")
<!--https://material.io/icons/-->
<i class="material-icons figure" #figure_style($fig)>$escape_html($label)</i>
#elseif($fig.source == "mdi")
<!--https://materialdesignicons.com/-->
<i class="mdi mdi-$escape_html($fig.filename)" #figure_style($fig)></i>
#elseif($fig.source == "fa")
<!--http://fontawesome.io/icons/-->
<i class="fa fa-$escape_html($fig.filename)" #figure_style($fig)></i>
#elseif($fig.source == "svg")
<!--/cards/svg-->
<!--<img class="svg_filter" src="/svg/${escape_html($figure)}.svg">-->
#set($color = "")
#if($fig.color)
#set($color = "?color=${fig.color}")
#end
<img src="/svg/${escape_html($fig.filename)}.svg$color" #figure_style($fig)>
#end
#end
#macro(figure_style $fig)
style="
#if($fig.source == "svg") ## Unsupported with other sources due to being fonts, not images **
#if($fig.autoscale)
top:${fig.top}px;
right:${fig.right}px;
bottom:${fig.bottom}px;
left:${fig.left}px;
height:calc(100% - ${fig.size}px);
#else
top:calc(${fig.top}px - ${fig.bottom}px);
left:calc(${fig.left}px - ${fig.right}px);
height:${fig.scale}%;
#end
#end
transform:rotate(${fig.rotate}deg)"
#end
#macro(specialFlags $card)
#if($card.has_flag("mastery"))
<big>
resources/cards/creator.css
+34
View File
@@ -41,3 +41,37 @@ ul li input[type=text][name=tag],
ul li input[type=text][name=filename] {
width: 3.8cm;
}
.tooltip {
position: relative;
display: inline-block;
font-size: inherit;
line-height: inherit;
float:right;
}
.tooltiptext {
visibility: hidden;
width: 160px;
background-color: #292A30;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
font-size: 0.6em;
font-family:sans-serif;
font-style:normal;
position: absolute;
z-index: 1;
}
.tooltip .tooltiptext {
top: -5px;
left: 150%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
resources/cards/creator.vm
+47 -31
View File
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<link rel="stylesheet" href="creator.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<script src="creator.js"></script>
#macro(update_preview)onkeyup="submit_preview(this.form)" onchange="submit_preview(this.form)"#end
@@ -19,37 +20,52 @@
<input type="text" name="title" value="$escape_html($card.title)" #update_preview()>
</li>
<li>
Figure:<br>
<input type="text" name="figure" value="$escape_html($card.figure)" #update_preview()><br>
Source:
#if($card.figure_source=="material-icons")
<input checked type="radio" name="figure_source" value="material-icons" #update_preview()>
#else
<input type="radio" name="figure_source" value="material-icons" #update_preview()>
#end
<a href="https://material.io/icons/">material-icons</a>
#if($card.figure_source=="mdi")
<input checked type="radio" name="figure_source" value="mdi" #update_preview()>
#else
<input type="radio" name="figure_source" value="mdi" #update_preview()>
#end
<a href="https://materialdesignicons.com/">mdi</a>
#if($card.figure_source=="fa")
<input checked type="radio" name="figure_source" value="fa" #update_preview()>
#else
<input type="radio" name="figure_source" value="fa" #update_preview()>
#end
<a href="http://fontawesome.io/icons/">fa</a>
#if($card.figure_source=="svg")
<input checked type="radio" name="figure_source" value="svg" #update_preview()>
#else
<input type="radio" name="figure_source" value="svg" #update_preview()>
#end
<a href="svg">svg</a>
Figures:
<i class="tooltip mdi mdi-help-circle">
<div class="tooltiptext">
figure, attribute:value, ...
<br><br><big>Possible attributes:</big>
<br>Top, left, bottom, right: x px
<br>Colour: xxxxxxxx
<br>Rotation: x deg
<br>Scale: x % <small>(Leave blank for auto)</small>
<br>Source: svg, mdi...
<br><br><small>NOTE: svg source required for attributes other than rotation!</small>
</div>
</i>
<textarea name="figure" rows="5" #update_preview()>$escape_html($card.figure, False)</textarea>
<small>
Default Source:
#if($card.figure_source=="material-icons")
<input checked type="radio" name="figure_source" value="material-icons" #update_preview()>
#else
<input type="radio" name="figure_source" value="material-icons" #update_preview()>
#end
<a href="https://material.io/icons/">material-icons</a>
#if($card.figure_source=="mdi")
<input checked type="radio" name="figure_source" value="mdi" #update_preview()>
#else
<input type="radio" name="figure_source" value="mdi" #update_preview()>
#end
<a href="https://materialdesignicons.com/">mdi</a>
#if($card.figure_source=="fa")
<input checked type="radio" name="figure_source" value="fa" #update_preview()>
#else
<input type="radio" name="figure_source" value="fa" #update_preview()>
#end
<a href="http://fontawesome.io/icons/">fa</a>
#if($card.figure_source=="svg")
<input checked type="radio" name="figure_source" value="svg" #update_preview()>
#else
<input type="radio" name="figure_source" value="svg" #update_preview()>
#end
<a href="svg">svg</a>
</small>
</li>
<li>
Description:<br>