Skip to content

Instantly share code, notes, and snippets.

@bendi

bendi/pjsx-checkerboard.html

Last active June 23, 2016 20:45
Show Gist options
  • Save bendi/f4d19f2d20bae523fdd2bf397c40144a to your computer and use it in GitHub Desktop.
Save bendi/f4d19f2d20bae523fdd2bf397c40144a to your computer and use it in GitHub Desktop.
Download ZIP
Checkerboard watchface definition.
Raw
pjsx-checkerboard.html
<!doctype html>
<html>
<head>
<title>Watchface designer (css/jsx) - export to C</title>
<link href='//fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="//pjsx.pl/css/pjsx.css" rel="stylesheet" />
</head>
<body>
<div class="editors">
<div>
<button type="button">CSS</button>
<textarea name="css" id="css">
:root {
background-color: lightgray;
}
#hoursLayer, #minutesLayer {
font-family: "Bitham";
font-size: 42px;
text-align: center;
font-weight: bold;
width: 100%;
height: 50px;
color: black;
}
#top1, #left1, #right2, #bottom2,
#mid2, #mid3,
#dd2, #dd4 {
fill: white;
stroke: white;
}
#top2, #left2, #right1, #bottom1,
#mid1, #mid4,
#dd1, #dd3 {
fill: red;
stroke: red;
}
#dd1, #dd2, #dd3, #dd4 {
width: 180px;
height: 180px;
stroke-width: 15px;
left: 0px;
top: 0px;
}
#top1, #top2, #bottom1, #bottom2 {
width: 72px;
height: 12px;
}
#left1, #left2, #right1, #right2 {
width: 12px;
height: 72px;
}
@media (width: 144px) { /* PBL_IF_RECT_ELSE */
#dd1, #dd2, #dd3, #dd4 {
display: none;
}
#mid1, #mid2, #mid3, #mid4 {
width: 60px;
height: 60px;
}
#top1 {
top: 12px;
left: 0;
}
#top2 {
left: 72px;
top: 12px;
}
#left1 {
left: 0px;
top: 12px;
}
#left2 {
left: 0px;
top: 84px;
}
#bottom1 {
left: 0;
top: 144px;
}
#bottom2 {
left: 72px;
top: 144px;
}
#right1 {
top: 12px;
left: 132px;
}
#right2 {
top: 84px;
left: 132px;
}
#mid1 {
top: 24px;
left: 12px;
}
#mid2 {
top: 24px;
left: 72px;
}
#mid3 {
top: 84px;
left: 12px;
}
#mid4 {
top: 84px;
left: 72px;
}
#hoursLayer {
top: 34px;
}
#minutesLayer {
top: 88px;
}
}
@media (width: 180px) { /* PBL_IF_ROUND_ELSE */
#top1, #top2, #bottom1, #bottom2,
#left1, #left2, #right1, #right2 {
display: none;
}
#mid1, #mid2, #mid3, #mid4 {
width: 90px;
height: 90px;
}
#mid1 {
top: 0px;
left: 0px;
}
#mid2 {
top: 0px;
left: 90px;
}
#mid3 {
top: 90px;
left: 0px;
}
#mid4 {
top: 90px;
left: 90px;
}
#hoursLayer {
top: 38px;
}
#minutesLayer {
top: 95px;
}
}
@media (width: 200px) { /* Emery :) */
#dd1, #dd2, #dd3, #dd4 {
display: none;
}
#top1, #top2, #bottom1, #bottom2 {
width: 100px;
height: 20px;
}
#left1, #left2, #right1, #right2 {
width: 20px;
height: 100px;
}
#mid1, #mid2, #mid3, #mid4 {
width: 80px;
height: 80px;
}
#top1 {
top: 14px;
left: 0px;
}
#top2 {
left: 100px;
top: 14px;
}
#left1 {
left: 0px;
top: 14px;
}
#left2 {
left: 0px;
top: 114px;
}
#bottom1 {
left: 0px;
top: 194px;
}
#bottom2 {
left: 100px;
top: 194px;
}
#right1 {
top: 14px;
left: 180px;
}
#right2 {
top: 114px;
left: 180px;
}
#mid1 {
top: 34px;
left: 20px;
}
#mid2 {
top: 34px;
left: 100px;
}
#mid3 {
top: 114px;
left: 20px;
}
#mid4 {
top: 114px;
left: 100px;
}
#hoursLayer {
top: 68px;
}
#minutesLayer {
top: 125px;
}
}
@media (color-index: 64) { /* PBL_IF_COLOR_ELSE */
}
@media (color-index < 64) { /* PBL_IF_BW_ELSE */
}</textarea>
</div>
<hr />
<div>
<button type="button">JSX</button>
<textarea name="jsx" id="jsx">
import React from 'react';
import Pjsx from 'pjsx.js';
import { Arc, Rect, DateTime } from 'pjsx/modules.js';
export default () => (
<Pjsx>
<Rect id="top1" />
<Rect id="top2" />
<Rect id="left1" />
<Rect id="left2" />
<Rect id="bottom1" />
<Rect id="bottom2" />
<Rect id="right1" />
<Rect id="right2" />
<Rect id="mid1" />
<Rect id="mid2" />
<Rect id="mid3" />
<Rect id="mid4" />
<Arc id="dd1" startAngle="0" endAngle="90" />
<Arc id="dd2" startAngle="90" endAngle="180" />
<Arc id="dd3" startAngle="180" endAngle="270" />
<Arc id="dd4" startAngle="270" endAngle="360" />
<DateTime
hours
id="hoursLayer"
format_12="hh"
format_24="HH"
/>
<DateTime
minutes
id="minutesLayer"
format_12="mm"
format_24="mm"
/>
</Pjsx>
);
</textarea>
</div>
</div>
<a href="https://apps.getpebble.com/applications/575f252ee1d0457e82000005" title="Go to pebble store">Watchface</a>
<span class="copy">&copy; 2016 - Marek Będkowski</span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment