diff --git a/card.py b/card.py index 7d20626..8a62078 100644 --- a/card.py +++ b/card.py @@ -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): diff --git a/figure.py b/figure.py new file mode 100644 index 0000000..32fcfab --- /dev/null +++ b/figure.py @@ -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 diff --git a/resources/cards/card.css b/resources/cards/card.css index 70314f4..18d831f 100644 --- a/resources/cards/card.css +++ b/resources/cards/card.css @@ -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*/ diff --git a/resources/cards/card.vm b/resources/cards/card.vm index 7248f4b..906e122 100644 --- a/resources/cards/card.vm +++ b/resources/cards/card.vm @@ -5,29 +5,47 @@ #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") - - $escape_html($label) - #elseif($source == "mdi") - - - #elseif($source == "fa") - - - #elseif($source == "svg") - - - +#macro(figure_embed $fig) + #if($fig.source == "material-icons") + + $escape_html($label) + #elseif($fig.source == "mdi") + + + #elseif($fig.source == "fa") + + + #elseif($fig.source == "svg") + + + #set($color = "") + #if($fig.color) + #set($color = "?color=${fig.color}") + #end + #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")) diff --git a/resources/cards/creator.css b/resources/cards/creator.css index 0e61cdd..6d4914a 100644 --- a/resources/cards/creator.css +++ b/resources/cards/creator.css @@ -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; +} + diff --git a/resources/cards/creator.vm b/resources/cards/creator.vm index d57066f..f803740 100644 --- a/resources/cards/creator.vm +++ b/resources/cards/creator.vm @@ -1,6 +1,7 @@ + #macro(update_preview)onkeyup="submit_preview(this.form)" onchange="submit_preview(this.form)"#end @@ -19,37 +20,52 @@
  • - Figure:
    -
    - - Source: - #if($card.figure_source=="material-icons") - - #else - - #end - material-icons - - #if($card.figure_source=="mdi") - - #else - - #end - mdi - - #if($card.figure_source=="fa") - - #else - - #end - fa - - #if($card.figure_source=="svg") - - #else - - #end - svg + Figures: + +
    + figure, attribute:value, ... +

    Possible attributes: +
    Top, left, bottom, right: x px +
    Colour: xxxxxxxx +
    Rotation: x deg +
    Scale: x % (Leave blank for auto) +
    Source: svg, mdi... +

    NOTE: svg source required for attributes other than rotation! + +
    +     + + + + Default Source: + #if($card.figure_source=="material-icons") + + #else + + #end + material-icons + + #if($card.figure_source=="mdi") + + #else + + #end + mdi + + #if($card.figure_source=="fa") + + #else + + #end + fa + + #if($card.figure_source=="svg") + + #else + + #end + svg +
  • Description: