Skip to content
Snippets Groups Projects
Commit 81a971e4 authored by Tilman Vatteroth's avatar Tilman Vatteroth :robot:
Browse files

javascript clock entfernt

parent 426a6b48
Branches
No related tags found
No related merge requests found
<svg data-clock="analog" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 200 200">
<!-- hour stroke (DIN 41091.4) -->
<symbol id="hourStrokeDIN41091.4">
<rect x="97" y="0" width="6" height="7"></rect>
</symbol>
<!-- minute stroke (DIN 41091.4) -->
<symbol id="minuteStrokeDIN41091.4">
<rect x="98.75" y="0" width="2.5" height="7"></rect>
</symbol>
<!-- five minutes strokes (DIN 41091.4) -->
<symbol id="fiveMinutesStrokesDIN41091.4">
<use xlink:href="#hourStrokeDIN41091.4"></use>
<use xlink:href="#minuteStrokeDIN41091.4" transform="rotate( 6, 100, 100)"></use>
<use xlink:href="#minuteStrokeDIN41091.4" transform="rotate(12, 100, 100)"></use>
<use xlink:href="#minuteStrokeDIN41091.4" transform="rotate(18, 100, 100)"></use>
<use xlink:href="#minuteStrokeDIN41091.4" transform="rotate(24, 100, 100)"></use>
</symbol>
<!-- quarter strokes (DIN 41091.4) -->
<symbol id="quarterStrokesDIN41091.4">
<use xlink:href="#fiveMinutesStrokesDIN41091.4"></use>
<use xlink:href="#fiveMinutesStrokesDIN41091.4" transform="rotate(30, 100, 100)"></use>
<use xlink:href="#fiveMinutesStrokesDIN41091.4" transform="rotate(60, 100, 100)"></use>
</symbol>
<!-- visible dial circle -->
<clippath id="dialCircle">
<circle cx="100" cy="100" r="100"></circle>
</clippath>
<!-- clock -->
<g id="clock" clip-path="url(#dialCircle)" visibility="visible">
<!-- dial -->
<g id="dial">
<use xlink:href="#quarterStrokesDIN41091.4" style="stroke:none"></use>
<use xlink:href="#quarterStrokesDIN41091.4" style="stroke:none" transform="rotate( 90, 100, 100)"></use>
<use xlink:href="#quarterStrokesDIN41091.4" style="stroke:none" transform="rotate(180, 100, 100)"></use>
<use xlink:href="#quarterStrokesDIN41091.4" style="stroke:none" transform="rotate(270, 100, 100)"></use>
<g text-anchor="middle" letter-spacing="-2" font-family="sans-serif" font-size="24px" style="stroke:none">
<text x="100" y="30">12</text>
<text x="143" y="41">1</text>
<text x="171" y="70">2</text>
<text x="182" y="109">3</text>
<text x="171" y="147">4</text>
<text x="142" y="176">5</text>
<text x="100" y="188">6</text>
<text x="60" y="176">7</text>
<text x="30" y="147">8</text>
<text x="18" y="109">9</text>
<text x="34" y="70">10</text>
<text x="61" y="41">11</text>
</g>
</g>
</g>
</svg>
Source diff could not be displayed: it is too large. Options to address this: view the blob.
<svg data-clock="analog" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="200px" height="200px" viewBox="0 0 200 200">
<rect x="95" y="40" width="10" height="65" style="stroke:none"></rect>
</svg>
<svg data-clock="analog" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="200px" height="200px" viewBox="0 0 200 200">
<!-- minute hand -->
<rect x="95" y="6" width="8" height="99" style="stroke:none"></rect>
</svg>
<svg data-clock="analog" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="200px" height="200px" viewBox="0 0 200 200">
<polygon points="99.4,8 100.6,8 102.8,123 97.2,123" style="stroke:none"></polygon>
</svg>
this.loaded = function(panel, config) {
this.clock = {
hour: panel.find("[data-clock-hand=hour]"),
minute: panel.find("[data-clock-hand=minute]"),
second: panel.find("[data-clock-hand=second]"),
digitalContainer : panel.find("[data-clock=digital]"),
digital : panel.find("[data-clock=digital] span"),
datum: panel.find("[data-clock=datum]"),
"config": config,
lasttext: "",
lastdate: ""
};
var self = { 'me': this };
var r = function() {
var svg = panel.find('[data-clock=analog]');
var imgs = panel.find('[data-clock=analog] img');
var w = panel.width();
var h = panel.height();
var q = (w<h?w:h);
svg.css({"height":q + "px","width":q + "px"});
imgs.css({"height":q + "px","width":q + "px"});
var fsh = h/53;
var fsw = (w-q)/(220);
var fs = (fsh<fsw?fsh:fsw);
var lh = q;
this.clock.digitalContainer.textfill(
{
maxFontPixels:-1
});
};
self.c = function() {updateTime.call(self.me)};
self.r = function() {r.call(self.me)};
self.c();
setTimeout ( self.r , 100);
setInterval( self.c , 500);
$(window).resize( self.r );
}
var rotateElement = function (id, angle) {
id.css('transform', 'rotate('+angle+'deg)');
}
var updateTime = function() { // rotate clock element
var months = ["Januar","Februar","März","April","Mai","Juni","Juli",
"August","September","Oktober","November","Dezember"];
var days = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];
var date = new Date();
// date
var t = date.getDay();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// time
var h = date.getHours();
if (h.toString().length < 2)
h = "0" + h;
var i = date.getMinutes();
if (i.toString().length < 2)
i = "0" + i;
var s = date.getSeconds();
if (s.toString().length < 2)
s = "0" + s;
var newtext=h+":"+i+":"+s;
if (newtext != this.clock.lasttext) {
this.clock.lasttext = newtext;
this.clock.digital.text(newtext);
rotateElement(this.clock.hour, 30 * h + 0.5 * i);
rotateElement(this.clock.minute, 6 * i);
rotateElement(this.clock.second, 6 * s);
var newdate = days[t] + ", " + d + "." + months[m] + ", " + y;
if (newdate != this.clock.lastdate) {
this.clock.lastdate = newdate;
this.clock.datum.text(newdate);
}
}
/* $("[panel=time] [clock] [number=h0]").html(h.toString()[0]);
$("[panel=time] [clock] [number=h1]").html(h.toString()[1]);
$("[panel=time] [clock] [number=m0]").html(i.toString()[0]);
$("[panel=time] [clock] [number=m1]").html(i.toString()[1]);
$("[panel=time] [clock] [number=s0]").html(s.toString()[0]);
$("[panel=time] [clock] [number=s1]").html(s.toString()[1]);
$("[panel=time] [date]").html(days[t] + ", " + d + "." + months[m] + ", " + y);*/
}
[data-clock=right],[data-clock=analog] {
float:left;
height:100%;
}
[data-clock=analog] {
display: block;
}
[data-clock=analog] img {
width: 200px;
height: 200px;
position: absolute;
}
[data-biber] {
opacity: 0.3;
}
[data-clock=right]{
}
[data-clock=digital] {
display: -webkit-box;
-webkit-box-pack: justify;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: justify;
-moz-box-align: center;
display: -ms-flexbox;
-ms-flex-pack: justify;
-ms-flex-align: center;
display: box;
box-pack: justify;
box-align: center;
height:100%;
}
[data-clock]{
font-family: lcd;
}
[data-clock=digital] {
@keyframes clock24 {
from {top: 0%;}
to {top: -2400%;}
}
@keyframes clock60 {
from {top: 0%;}
to {top: -6000%;}
}
@keyframes clockPulse {
0% {color: #AA0000;}
50% {color: #550000;}
100% {color: #AA0000;}
}
[data-clock] {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
padding: 0px;
text-align: center;
background-color: #000000;
color: #550000;
box-sizing: border-box;
}
[data-clock] [data-clock-seperator] {
position: relative;
display: inline-table;
top: -20px;
height: 120px;
font-size: 150px;
line-height: 150px;
margin-top: -20px;
width: 5px;
text-align: center;
margin-left: -20px;
margin-right: -20px;
}
[data-clock] [data-clock-number] {
margin-top: -10px;
}
[data-clock] [data-clock-number=hour], [data-clock] [data-clock-number=minute] {
position: relative;
display: inline-table;
font-size: 150px;
line-height: 150px;
text-align: center;
overflow: hidden;
}
[data-clock] [data-clock-number=second] {
position: relative;
display: inline-table;
margin-left: 5px;
font-size: 75px;
line-height: 150px;
text-align: center;
overflow: hidden;
}
[data-clock] [data-clock-number] [data-clock-indicator] {
position: absolute;
color: #AA0000;
text-align: center;
top: 0px;
}
[data-clock=css] [data-clock-number=hour] [data-clock-indicator] {
animation: clock24 86400s steps(24) infinite;
}
[data-clock=css] [data-clock-number=minute] [data-clock-indicator] {
animation: clock60 3600s steps(60) infinite;
}
[data-clock=css] [data-clock-number=second] [data-clock-indicator] {
animation: clock60 60s steps(60) infinite;
}
[data-clock=css] [data-clock-seperator] {
animation: clockPulse 1s steps(1) infinite;
}
[data-clock-date] {
position: relative;
display: inline-table;
display: inline-table;
height: 75px;
font-size: 75px;
line-height: 75px;
text-align: center;
margin-top: -60px;
margin-left: -20px;
margin-right: -20px;
}
[data-clock-date] [data-clock-date-background] {
position: absolute;
display: inline-table;
text-align: center;
top: 0px;
left: 0px;
}
[data-clock-date] [data-clock-date-indicator] {
position: absolute;
display: inline-table;
text-align: center;
top: 0px;
left: 0px;
color: #AA0000;
}
}
<div data-clock=analog>
<img src="panels/clock/biber/background.svg"/>
<img data-biber src="panels/clock/biber/biber.svg"/>
<img data-clock-hand="hour" src="panels/clock/biber/hour.svg"/>
<img data-clock-hand="minute" src="panels/clock/biber/minute.svg"/>
<img data-clock-hand="second" src="panels/clock/biber/second.svg"/>
</div>
<div data-clock="digital">
<span></span>
</div><!--
<div data-clock="right">
<div data-clock="datum">
</div>
</div>-->
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment