ziver/hal
1
1
Fork 0
Code Pull requests Releases Activity

Converted map icons to svg and added off for lights

Browse source
This commit is contained in:
Ziver Koc 2016-08-30 17:30:00 +02:00
parent 1a6025de6d
commit b9d684fbbc
5 changed files with 223 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

123
resource/web/img/lightbulb_off.svg Executable file
View file

@ -0,0 +1,123 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 40 40"
style="enable-background:new 0 0 40 40;"
xml:space="preserve"
width="50"
height="50"
inkscape:version="0.91 r13725"
sodipodi:docname="lightbulb_off.svg"><metadata
id="metadata4173"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs4171" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1081"
inkscape:window-height="736"
id="namedview4169"
showgrid="false"
inkscape:zoom="9.46"
inkscape:cx="25"
inkscape:cy="25"
inkscape:window-x="2416"
inkscape:window-y="372"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<g
id="g4137">
<path
style="fill:#8e8e8e;fill-opacity:1"
d="M20,2c6.065,0,11,4.935,11,11c0,3.458-1.808,6.315-3.402,8.835C26.262,23.947,25,25.941,25,28v1.333 h-5h-5V28c0-2.059-1.262-4.053-2.598-6.165C10.808,19.315,9,16.458,9,13C9,6.935,13.935,2,20,2 M20,1C13.373,1,8,6.373,8,13 c0,6.667,6,10.958,6,15v2.333h6h6V28c0-4.042,6-8.333,6-15C32,6.373,26.627,1,20,1L20,1z"
id="path4141" />
</g>
<g
id="g4143">
<path
style="fill:#848484;fill-opacity:1"
d="M22.714,11.335c0.502,0,0.974,0.195,1.329,0.55c0.733,0.733,0.733,1.925,0,2.657l-1.75,1.75 L22,16.586V17v12h-4V17v-0.414l-0.293-0.293l-1.75-1.75c-0.733-0.733-0.733-1.925,0-2.657c0.355-0.355,0.827-0.55,1.329-0.55 c0.502,0,0.974,0.195,1.329,0.55l0.679,0.679L20,13.271l0.707-0.707l0.679-0.679C21.741,11.531,22.212,11.335,22.714,11.335 M22.714,10.335c-0.737,0-1.474,0.281-2.036,0.843L20,11.857l-0.679-0.679c-0.562-0.562-1.299-0.843-2.036-0.843 c-0.737,0-1.474,0.281-2.036,0.843c-1.124,1.124-1.124,2.947,0,4.071L17,17v13h6V17l1.75-1.75c1.124-1.124,1.124-2.947,0-4.071 C24.188,10.616,23.451,10.335,22.714,10.335L22.714,10.335z"
id="path4145" />
</g>
<circle
style="fill:#8B75A1;"
cx="20"
cy="35"
r="4"
id="circle4147" />
<g
id="g4149">
<path
style="fill:#DCD5F2;"
d="M17,36.5c-1.378,0-2.5-1.122-2.5-2.5v-5.5h11V34c0,1.378-1.122,2.5-2.5,2.5H17z"
id="path4151" />
<g
id="g4153">
<path
style="fill:#8B75A1;"
d="M25,29v5c0,1.103-0.897,2-2,2h-6c-1.103,0-2-0.897-2-2v-5H25 M26,28H14v6c0,1.657,1.343,3,3,3h6 c1.657,0,3-1.343,3-3V28L26,28z"
id="path4155" />
</g>
</g>
<rect
x="19"
y="34"
style="fill:#8B75A1;"
width="6.488"
height="1"
id="rect4157" />
<rect
x="14.56"
y="34"
style="fill:#8B75A1;"
width="2.44"
height="1"
id="rect4159" />
<rect
x="19"
y="32"
style="fill:#8B75A1;"
width="7"
height="1"
id="rect4161" />
<rect
x="14"
y="32"
style="fill:#8B75A1;"
width="3"
height="1"
id="rect4163" />
<rect
x="19"
y="30"
style="fill:#8B75A1;"
width="7"
height="1"
id="rect4165" />
<rect
x="14"
y="30"
style="fill:#8B75A1;"
width="3"
height="1"
id="rect4167" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

0
resource/web/img/lightbulb.svg → resource/web/img/lightbulb_on.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

BIN
resource/web/img/temperature.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

95
resource/web/img/temperature.svg Executable file
View file

@ -0,0 +1,95 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 40 40"
style="enable-background:new 0 0 40 40;"
xml:space="preserve"
width="50"
height="50"
inkscape:version="0.91 r13725"
sodipodi:docname="temperature.svg"><metadata
id="metadata4173"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs4171" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1081"
inkscape:window-height="736"
id="namedview4169"
showgrid="false"
inkscape:zoom="9.46"
inkscape:cx="25.39307"
inkscape:cy="25"
inkscape:window-x="2520"
inkscape:window-y="555"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<g
id="g4196"><circle
r="7.8224101"
cy="30.105705"
cx="20"
id="path4182"
style="opacity:1;fill:#dbf2ff;fill-opacity:1;stroke:none;stroke-width:1.39999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1" /><rect
y="1.860465"
x="15.729387"
height="21.64905"
width="8.5412264"
id="rect4188"
style="opacity:1;fill:#dbf2ff;fill-opacity:0.94117647;stroke:none;stroke-width:1.39999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1" /></g><g
id="g4192"><circle
style="opacity:1;fill:#b5ddf5;fill-opacity:1;stroke:none;stroke-width:1.39999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1"
id="circle4186"
cx="20"
cy="30.105705"
r="5.919661" /><rect
y="3.4672306"
x="17.378435"
height="22.241014"
width="5.2431293"
id="rect4190"
style="opacity:1;fill:#b5ddf5;fill-opacity:1;stroke:none;stroke-width:1.39999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1" /></g><path
style="opacity:1;fill:none;fill-opacity:1;stroke:#7496c4;stroke-width:1.04999995;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 19.662109 2.3261719 L 19.662109 29.386719 L 19.748047 29.386719 A 9.7780126 9.7780126 0 0 0 15.222656 37.632812 A 9.7780126 9.7780126 0 0 0 25 47.410156 A 9.7780126 9.7780126 0 0 0 34.777344 37.632812 A 9.7780126 9.7780126 0 0 0 30.234375 29.386719 L 30.337891 29.386719 L 30.337891 2.3261719 L 19.662109 2.3261719 z "
transform="scale(0.8,0.8)"
id="circle4202" /><g
id="g4209"
style="fill:#ec5a5a;fill-opacity:1"><circle
r="5.919661"
cy="30.105705"
cx="20"
id="circle4211"
style="opacity:1;fill:#ec5a5a;fill-opacity:1;stroke:none;stroke-width:1.39999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1" /><path
style="opacity:1;fill:#ec5a5a;fill-opacity:1;stroke:none;stroke-width:1.39999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1"
d="M 28.277344 16.167969 L 21.722656 19.59375 L 21.722656 32.134766 L 28.277344 32.134766 L 28.277344 16.167969 z "
transform="scale(0.8,0.8)"
id="rect4213" /></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

7
resource/web/map.tmpl
View file

@ -141,7 +141,7 @@
// Sensors
$.each(json.sensors, function(i, sensor) {
var group = svg.group();
group.image("/img/temperature.png")
group.image("/img/temperature.svg")
.addClass("draggable").addClass("sensor")
.x(sensor.x).y(sensor.y)
.attr("device-id", sensor.id)
@ -150,7 +150,10 @@
// Events
$.each(json.events, function(i, event) {
var group = svg.group();
group.image("/img/lightbulb.svg")
var img = "/img/lightbulb_off.svg";
if (event.data > 0)
var img = "/img/lightbulb_on.svg";
group.image(img)
.addClass("draggable").addClass("event")
.x(event.x).y(event.y)
.attr("device-id", event.id)