HGKeeper

beremiz

- New widget customHtml which allows to insert block of html code
svghmi
2020-10-19, usveticic

4b44d09c48a7

Parents 9ec338a99a18
Children c369a742443d

- New widget customHtml which allows to insert block of html code
- widget animate transfered to animaterotation
- widget animate, left to be more customizable
- changes to svghmi_v2/svghmi.svg

4 files changed, 200 insertions(+), 161 deletions(-)

+9 -7

svghmi/widget_animate.ysl2

+51 -0

svghmi/widget_animaterotation.ysl2

+33 -0

svghmi/widget_customhtml.ysl2

+107 -154

tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg

~~--- a/svghmi/widget_animate.ysl2 Thu Oct 01 14:23:27 2020 +0200~~

+++ b/svghmi/widget_animate.ysl2 Mon Oct 19 09:29:11 2020 +0200

@@ -5,6 +5,7 @@

class AnimateWidget extends Widget{

frequency = 5;

speed = 0;

+ start = false;

widget_center = undefined;

dispatch(value) {

@@ -17,20 +18,21 @@

animate(){

// change animation properties

for(let child of this.element.children){

~~- if(child.nodeName == "animateTransform"){~~

+ if(child.nodeName.startsWith("animate")){

+ if(this.speed != 0 && !this.start){

+ this.start = true;

+ this.element.beginElement();

+ }

if(this.speed > 0){

child.setAttribute("dur", this.speed+"s");

~~- child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);~~

~~- child.setAttribute("to", "360 "+this.widget_center[0]+" "+this.widget_center[1]);~~

}

else if(this.speed < 0){

child.setAttribute("dur", (-1)*this.speed+"s");

~~- child.setAttribute("from", "360 "+this.widget_center[0]+" "+this.widget_center[1]);~~

~~- child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);~~

}

else{

~~- child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);~~

~~- child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);~~

+ this.start = false;

+ this.element.endElement();

}

~~--- /dev/null Thu Jan 01 00:00:00 1970 +0000~~

+++ b/svghmi/widget_animaterotation.ysl2 Mon Oct 19 09:29:11 2020 +0200

@@ -0,0 +1,51 @@

+// widget_animaterotation.ysl2

+template "widget[@type='AnimateRotation']", mode="widget_class"{

+ ||

+ class AnimateRotationWidget extends Widget{

+ frequency = 5;

+ speed = 0;

+ widget_center = undefined;

+ dispatch(value) {

+ this.speed = value / 5;

+ //reconfigure animation

+ this.request_animate();

+ }

+ animate(){

+ // change animation properties

+ for(let child of this.element.children){

+ if(child.nodeName == "animateTransform"){

+ if(this.speed > 0){

+ child.setAttribute("dur", this.speed+"s");

+ child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);

+ child.setAttribute("to", "360 "+this.widget_center[0]+" "+this.widget_center[1]);

+ }

+ else if(this.speed < 0){

+ child.setAttribute("dur", (-1)*this.speed+"s");

+ child.setAttribute("from", "360 "+this.widget_center[0]+" "+this.widget_center[1]);

+ child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);

+ }

+ else{

+ child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);

+ child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);

+ }

+ init() {

+ let widget_pos = this.element.getBBox();

+ this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)];

+ }

+ ||

+template "widget[@type='AnimateRotation']", mode="widget_defs" {

+ param "hmi_element";

+ |,

~~--- /dev/null Thu Jan 01 00:00:00 1970 +0000~~

+++ b/svghmi/widget_customhtml.ysl2 Mon Oct 19 09:29:11 2020 +0200

@@ -0,0 +1,33 @@

+// widget_customhtml.ysl2

+template "widget[@type='CustomHtml']", mode="widget_class"{

+ ||

+ class CustomHtmlWidget extends Widget{

+ frequency = 5;

+ widget_size = undefined;

+ dispatch(value) {

+ this.request_animate();

+ }

+ animate(){

+ }

+ init() {

+ this.widget_size = this.container_elt.getBBox();

+ this.element.innerHTML ='<foreignObject x="'+

+ this.widget_size.x+'" y="'+this.widget_size.y+

+ '" width="'+this.widget_size.width+'" height="'+this.widget_size.height+'"> '+

+ this.code_elt.textContent+

+ ' </foreignObject>';

+ }

+ ||

+template "widget[@type='CustomHtml']", mode="widget_defs" {

+ param "hmi_element";

+ labels("container code");

+ |,

~~--- a/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Thu Oct 01 14:23:27 2020 +0200~~

+++ b/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Mon Oct 19 09:29:11 2020 +0200

@@ -16,7 +16,7 @@

version="1.1"

id="hmi0"

sodipodi:docname="svghmi.svg"

~~- inkscape:version="0.92.4 (5da689c313, 2019-01-14)"~~

+ inkscape:version="0.92.5 (0.92.5+68)"

inkscape:label="Layer">

<metadata

id="metadata4542">

@@ -92,10 +92,10 @@

y2="4.0725975" />

<inkscape:perspective

sodipodi:type="inkscape:persp3d"

~~- inkscape:vp_x="-173.06414 : 591.30354 : 1"~~

+ inkscape:vp_x="-470.06413 : 851.30353 : 1"

inkscape:vp_y="0 : 1319.7648 : 0"

~~- inkscape:vp_z="1192.2994 : 402.34211 : 1"~~

~~- inkscape:persp3d-origin="671.58536 : 432.93175 : 1"~~

+ inkscape:vp_z="895.29941 : 662.3421 : 1"

+ inkscape:persp3d-origin="374.58537 : 692.93174 : 1"

id="perspective503-6" />

</defs>

<sodipodi:namedview

@@ -109,13 +109,13 @@

inkscape:current-layer="hmi0"

showgrid="false"

units="px"

~~- inkscape:zoom="0.7071068"~~

~~- inkscape:cx="-76.932824"~~

~~- inkscape:cy="317.38961"~~

~~- inkscape:window-width="1920"~~

~~- inkscape:window-height="1137"~~

~~- inkscape:window-x="-8"~~

~~- inkscape:window-y="-8"~~

+ inkscape:zoom="1"

+ inkscape:cx="379.07861"

+ inkscape:cy="265.09897"

+ inkscape:window-width="2503"

+ inkscape:window-height="1416"

+ inkscape:window-x="57"

+ inkscape:window-y="24"

inkscape:window-maximized="1"

showguides="true"

inkscape:guide-bbox="true" />

@@ -130,7 +130,7 @@

sodipodi:insensitive="true" />

inkscape:label="HMI:Slider@/SPEED"

~~- transform="matrix(7.5590552,0,0,7.5590552,-710.78539,551.61779)"~~

+ transform="matrix(7.5590552,0,0,7.5590552,-780.78539,561.61779)"

id="g110-0">

<path

style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:0.52916664;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"

@@ -183,67 +183,21 @@

y="-121.97556"

style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"

id="tspan102-1">000</tspan></text>

~~- <g~~

~~- id="g1093"~~

~~- inkscape:label="up"~~

~~- transform="translate(-1.4499385)">~~

~~- <rect~~

~~- y="-70.520416"~~

~~- x="97.492126"~~

~~- height="8.8867111"~~

~~- width="12.254309"~~

~~- id="rect1075"~~

~~- style="opacity:0.29800002;fill:#de2cc9;fill-opacity:1;stroke:none;stroke-width:0.13229167" />~~

~~- <text~~

~~- id="text1079"~~

~~- y="-64.627113"~~

~~- x="99.550095"~~

- style="font-style:normal;font-weight:normal;font-size:5.29166698px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.13229167px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"

~~- xml:space="preserve"><tspan~~

~~- style="stroke-width:0.13229167px"~~

~~- y="-64.627113"~~

~~- x="99.550095"~~

~~- id="tspan1077"~~

~~- sodipodi:role="line">UP</tspan></text>~~

~~- </g>~~

~~- <g~~

~~- id="g1088"~~

~~- inkscape:label="down"~~

~~- transform="translate(0.28063515)">~~

~~- <rect~~

~~- y="1.415176"~~

~~- x="96.088959"~~

~~- height="8.8867111"~~

~~- width="11.599497"~~

~~- id="rect1073"~~

~~- style="opacity:0.29800002;fill:#de2cc9;fill-opacity:1;stroke:none;stroke-width:0.12294135" />~~

~~- <text~~

~~- id="text1083"~~

~~- y="7.4020147"~~

~~- x="97.772751"~~

~~- xml:space="preserve"><tspan~~

~~- style="stroke-width:0.13229167px"~~

~~- y="7.4020147"~~

~~- x="97.772751"~~

~~- id="tspan1081"~~

~~- sodipodi:role="line">DN</tspan></text>~~

~~- </g>~~

</g>

id="g4557"

inkscape:label="HMI:Input@/SOMEPLCGLOBAL">

<text

inkscape:label="value"

~~- transform="scale(1.1201068,0.89277203)"~~

+ transform="scale(1.1201068,0.89277202)"

id="text2398"

~~- y="446.98395"~~

~~- x="347.5253"~~

+ y="479.46704"

+ x="247.53484"

style="font-style:normal;font-weight:normal;font-size:124.08008575px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.10200214px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"

xml:space="preserve"><tspan

style="stroke-width:3.10200214px"

~~- y="446.98395"~~

~~- x="347.5253"~~

+ y="479.46704"

+ x="247.53484"

id="tspan2396"

sodipodi:role="line">Test</tspan></text>

<rect

@@ -251,8 +205,8 @@

id="rect4559"

width="323.85489"

height="132.93608"

~~- x="369.10974"~~

~~- y="299.97858"~~

+ x="257.10974"

+ y="328.97858"

inkscape:label="edit" />

<rect

style="opacity:0;fill:#de2cc9;fill-opacity:1;stroke:none;stroke-width:3.45667744"

@@ -1412,7 +1366,7 @@

id="g1047"

inkscape:label="HMI:CircularBar@/PUMP0/SLOTH"

~~- transform="matrix(0.39840034,0,0,0.35920948,224.04409,96.134885)">~~

+ transform="matrix(0.39840034,0,0,0.35920948,-97.955902,106.13488)">

<path

inkscape:label="range"

sodipodi:open="true"

@@ -1456,7 +1410,7 @@

id="g1047-6"

inkscape:label="HMI:CircularSlider@/PUMP0/SLOTH"

~~- transform="matrix(0.45707797,0,0,0.45707797,330.74411,340.99474)">~~

+ transform="matrix(0.45707797,0,0,0.45707797,33.744118,80.994747)">

<path

inkscape:label="range"

d="M 970.29569,399.76446 A 184.25998,167.44942 0 0 1 866.26395,284.77467 184.25998,167.44942 0 0 1 904.10823,139.93753"

@@ -1484,43 +1438,43 @@

sodipodi:type="inkscape:box3dside"

id="path932-9"

inkscape:box3dsidetype="6"

~~- d="m 919.8592,371.09874 v 61.75093 l 51.05152,-25.59855 V 348.7668 Z"~~

~~- points="919.8592,432.84967 970.91072,407.25112 970.91072,348.7668 919.8592,371.09874 "~~

+ d="m 919.8592,371.09875 v 61.75093 l 51.05152,-25.59855 v -58.48432 z"

+ points="919.8592,432.84968 970.91072,407.25113 970.91072,348.76681 919.8592,371.09875 "

style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />

<path

sodipodi:type="inkscape:box3dside"

id="path940-1"

inkscape:box3dsidetype="13"

~~- d="m 919.8592,432.84967 49.77111,22.08625 49.54589,-27.39008 -48.26548,-20.29472 z"~~

~~- points="969.63031,454.93592 1019.1762,427.54584 970.91072,407.25112 919.8592,432.84967 "~~

+ d="m 919.8592,432.84968 49.77112,22.08624 49.54588,-27.39007 -48.26548,-20.29472 z"

+ points="969.63032,454.93592 1019.1762,427.54585 970.91072,407.25113 919.8592,432.84968 "

style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />

<path

sodipodi:type="inkscape:box3dside"

id="path942-2"

inkscape:box3dsidetype="11"

~~- d="m 970.91072,348.7668 48.26548,18.93314 v 59.8459 l -48.26548,-20.29472 z"~~

~~- points="1019.1762,367.69994 1019.1762,427.54584 970.91072,407.25112 970.91072,348.7668 "~~

+ d="m 970.91072,348.76681 48.26548,18.93313 v 59.84591 l -48.26548,-20.29472 z"

+ points="1019.1762,367.69994 1019.1762,427.54585 970.91072,407.25113 970.91072,348.76681 "

style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />

<path

sodipodi:type="inkscape:box3dside"

id="path934-7"

inkscape:box3dsidetype="5"

~~- d="m 919.8592,371.09874 49.77111,20.56633 49.54589,-23.96513 -48.26548,-18.93314 z"~~

~~- points="969.63031,391.66507 1019.1762,367.69994 970.91072,348.7668 919.8592,371.09874 "~~

+ d="m 919.8592,371.09875 49.77112,20.56633 49.54588,-23.96514 -48.26548,-18.93313 z"

+ points="969.63032,391.66508 1019.1762,367.69994 970.91072,348.76681 919.8592,371.09875 "

style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />

<path

sodipodi:type="inkscape:box3dside"

id="path938-0"

inkscape:box3dsidetype="14"

~~- d="m 969.63031,391.66507 v 63.27085 l 49.54589,-27.39008 v -59.8459 z"~~

~~- points="969.63031,454.93592 1019.1762,427.54584 1019.1762,367.69994 969.63031,391.66507 "~~

+ d="m 969.63032,391.66508 v 63.27084 l 49.54588,-27.39007 v -59.84591 z"

+ points="969.63032,454.93592 1019.1762,427.54585 1019.1762,367.69994 969.63032,391.66508 "

style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />

<path

sodipodi:type="inkscape:box3dside"

id="path936-9"

inkscape:box3dsidetype="3"

~~- d="m 919.8592,371.09874 49.77111,20.56633 v 63.27085 L 919.8592,432.84967 Z"~~

~~- points="969.63031,391.66507 969.63031,454.93592 919.8592,432.84967 919.8592,371.09874 "~~

+ d="m 919.8592,371.09875 49.77112,20.56633 v 63.27084 L 919.8592,432.84968 Z"

+ points="969.63032,391.66508 969.63032,454.93592 919.8592,432.84968 919.8592,371.09875 "

style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />

</g>

<text

@@ -1538,27 +1492,7 @@

style="fill:#ff00ca;fill-opacity:1;stroke:none;stroke-width:2.25346255px;stroke-opacity:1">000</tspan></text>

</g>

~~- id="g4791"~~

~~- inkscape:label="HMI:ToggleButton@/TOGGLE2">~~

~~- <rect~~

~~- inkscape:label="inactive"~~

~~- y="46.127251"~~

~~- x="906.51086"~~

~~- height="44.547726"~~

~~- width="45.254833"~~

~~- id="rect4772"~~

~~- style="opacity:1;fill:#ff0015;fill-opacity:1;stroke:none" />~~

~~- <rect~~

~~- inkscape:label="active"~~

~~- y="46.127251"~~

~~- x="906.51086"~~

~~- height="44.547726"~~

~~- width="45.254833"~~

~~- id="rect4772-3"~~

~~- style="opacity:1;fill:#00ff03;fill-opacity:1;stroke:none" />~~

~~- </g>~~

~~- <g~~

~~- transform="translate(-67.175138,-1.0606552)"~~

+ transform="translate(-289.17513,-33.060654)"

id="g4791-6"

inkscape:label="HMI:ToggleButton@/TOGGLE1">

<rect

@@ -1579,28 +1513,7 @@

style="opacity:1;fill:#00ff03;fill-opacity:1;stroke:none" />

</g>

~~- transform="translate(63.639613)"~~

~~- id="g4791-3"~~

~~- inkscape:label="HMI:Button@/TOGGLE">~~

~~- <rect~~

~~- inkscape:label="active"~~

~~- y="46.127251"~~

~~- x="906.51086"~~

~~- height="44.547726"~~

~~- width="45.254833"~~

~~- id="rect4772-3-5"~~

~~- style="opacity:1;fill:#00ff03;fill-opacity:1;stroke:none" />~~

~~- <rect~~

~~- inkscape:label="inactive"~~

~~- y="46.127251"~~

~~- x="906.51086"~~

~~- height="44.547726"~~

~~- width="45.254833"~~

~~- id="rect4772-6"~~

~~- style="opacity:1;fill:#ff0015;fill-opacity:1;stroke:none" />~~

~~- </g>~~

~~- <g~~

~~- transform="translate(153.9447,-0.96668484)"~~

+ transform="translate(-287.05529,41.033314)"

id="g479hgjk"

inkscape:label="HMI:Button@/TOGGLE">

<rect

@@ -1621,8 +1534,39 @@

style="opacity:1;fill:#ff0015;fill-opacity:1;stroke:none" />

</g>

~~- id="g1439"~~

~~- inkscape:label="HMI:Animate@/SPEED">~~

+ id="g1112"

+ inkscape:label="HMI:AnimateRotation@/SPEED">

+ <circle

+ r="32.057827"

+ cy="436.18585"

+ cx="747.05347"

+ id="path1380"

+ style="fill:#ececec;fill-opacity:1;stroke:#ff0000;stroke-width:2.95733476;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+ <rect

+ y="286.18585"

+ x="597.05353"

+ height="300"

+ width="300"

+ id="rect1382"

+ style="opacity:0;fill:#ececec;fill-opacity:1;stroke:none;stroke-width:3.69000006;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+ <path

+ sodipodi:nodetypes="sssssss"

+ inkscape:connector-curvature="0"

+ id="path1388"

+ d="m 719.75481,403.83452 c 1.9692,9.54564 9.417,-4.37059 26.6751,-4.06174 27.2477,0.48762 30.0401,21.24497 35.5749,12.81174 6.6594,-10.14673 12.6699,-22.7446 14.75,-33.25 13.5509,-68.43783 -46.4736,-97.18589 -72,-91.49999 -40.88858,9.10778 -49.54078,47.21136 -31.99998,71.75 13.16428,18.41615 23.37448,26.67508 26.99998,44.24999 z"

+ style="fill:#fd0000;fill-opacity:1;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />

+ <path

+ sodipodi:nodetypes="sssssss"

+ inkscape:connector-curvature="0"

+ id="path1388-9"

+ d="m 789.45321,432.25975 c -8.9783,-3.79302 -1.7422,10.23457 -11.7862,24.27224 -15.8577,22.16324 -34.5364,12.68834 -30.7308,22.03024 4.5788,11.24 11.5443,23.3361 19.0162,31.0083 48.6752,49.9808 106.3992,16.8549 116.1963,-7.3926 15.6932,-38.84015 -10.7791,-67.57972 -40.9378,-67.05341 -22.634,0.39495 -35.2273,4.11873 -51.7577,-2.86477 z"

+ style="fill:#fd0000;fill-opacity:1;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />

+ <path

+ sodipodi:nodetypes="sssssss"

+ inkscape:connector-curvature="0"

+ id="path1388-9-8"

+ d="m 730.85671,475.85643 c 7.5732,-6.1355 -8.2092,-6.3552 -15.8654,-21.82523 -12.0882,-24.42445 5.0646,-36.44319 -4.9688,-37.48364 -12.07218,-1.25186 -26.02318,-0.80116 -36.30958,2.17903 -67.0109,19.41388 -64.9607,85.93594 -48.1806,105.99474 26.8787,32.1304 64.6969,22.3051 78.43058,-4.5502 10.3071,-20.1549 12.9505,-33.0184 26.8938,-44.3147 z"

+ style="fill:#fd0000;fill-opacity:1;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />

<animateTransform

attributeName="transform"

attributeType="XML"

@@ -1631,36 +1575,45 @@

to="360 1049 278"

dur="1s"

repeatCount="indefinite" />

~~- <circle~~

~~- r="32.057827"~~

~~- cy="278.18585"~~

~~- cx="1049.0535"~~

~~- id="path1380"~~

~~- style="fill:#ececec;fill-opacity:1;stroke:#ff0000;stroke-width:2.95733476;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />~~

+ </g>

+ <g

+ id="g1093"

+ inkscape:label="HMI:CustomHtml">

<rect

~~- y="128.18585"~~

~~- x="899.05353"~~

~~- height="300"~~

~~- width="300"~~

~~- id="rect1382"~~

~~- style="opacity:0;fill:#ececec;fill-opacity:1;stroke:none;stroke-width:3.69000006;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />~~

~~- <path~~

~~- sodipodi:nodetypes="sssssss"~~

~~- inkscape:connector-curvature="0"~~

~~- id="path1388"~~

- d="m 1021.7548,245.83452 c 1.9692,9.54564 9.417,-4.37059 26.6751,-4.06174 27.2477,0.48762 30.0401,21.24497 35.5749,12.81174 6.6594,-10.14673 12.6699,-22.7446 14.75,-33.25 13.5509,-68.43783 -46.4736,-97.18589 -72,-91.49999 -40.88858,9.10778 -49.54078,47.21136 -31.99998,71.75 13.16428,18.41615 23.37448,26.67508 26.99998,44.24999 z"

~~- style="fill:#fd0000;fill-opacity:1;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />~~

~~- <path~~

~~- sodipodi:nodetypes="sssssss"~~

~~- inkscape:connector-curvature="0"~~

~~- id="path1388-9"~~

- d="m 1091.4532,274.25975 c -8.9783,-3.79302 -1.7422,10.23457 -11.7862,24.27224 -15.8577,22.16324 -34.5364,12.68834 -30.7308,22.03024 4.5788,11.24 11.5443,23.3361 19.0162,31.0083 48.6752,49.9808 106.3992,16.8549 116.1963,-7.3926 15.6932,-38.84015 -10.7791,-67.57972 -40.9378,-67.05341 -22.634,0.39495 -35.2273,4.11873 -51.7577,-2.86477 z"

~~- style="fill:#fd0000;fill-opacity:1;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />~~

~~- <path~~

~~- sodipodi:nodetypes="sssssss"~~

~~- inkscape:connector-curvature="0"~~

~~- id="path1388-9-8"~~

- d="m 1032.8567,317.85643 c 7.5732,-6.1355 -8.2092,-6.3552 -15.8654,-21.82523 -12.0882,-24.42445 5.0646,-36.44319 -4.9688,-37.48364 -12.07218,-1.25186 -26.02318,-0.80116 -36.30958,2.17903 -67.0109,19.41388 -64.9607,85.93594 -48.1806,105.99474 26.8787,32.1304 64.6969,22.3051 78.43058,-4.5502 10.3071,-20.1549 12.9505,-33.0184 26.8938,-44.3147 z"

~~- style="fill:#fd0000;fill-opacity:1;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />~~

+ inkscape:label="container"

+ y="12"

+ x="818"

+ height="323"

+ width="452"

+ id="rect1072"

+ style="opacity:0.29800002;fill:#0000ff;fill-opacity:1;stroke:none;stroke-width:1.11057007" />

+ <text

+ inkscape:label="code"

+ transform="scale(0.57360572,1.7433578)"

+ id="text1076"

+ y="23.059681"

+ x="1433.04"

+ style="font-style:normal;font-weight:normal;font-size:9.29032898px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.87096828px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"

+ xml:space="preserve"><tspan

+ style="stroke-width:0.87096828px"

+ id="tspan1078"

+ y="23.059681"

+ x="1433.04"

+ sodipodi:role="line"> <img xmlns="http://www.w3.org/1999/xhtml" id="img" src="https://thumbs.gfycat.com/ImpoliteSoupyKakapo-size_restricted.gif" width="100%" height="80%" /></tspan><tspan

+ style="stroke-width:0.87096828px"

+ id="tspan1080"

+ y="34.672592"

+ x="1433.04"

+ sodipodi:role="line"> <a xmlns="http://www.w3.org/1999/xhtml" href='www.gmail.com'>Gmail</a></tspan><tspan

+ style="stroke-width:0.87096828px"

+ id="tspan1082"

+ y="46.285503"

+ x="1433.04"

+ sodipodi:role="line"> <p xmlns="http://www.w3.org/1999/xhtml">Koj kurac to ne dela</p></tspan><tspan

+ style="stroke-width:0.87096828px"

+ id="tspan1084"

+ y="57.898415"

+ x="1433.04"

+ sodipodi:role="line" /></text>

</g>

</svg>