Svg generation + historyDefault/get_timeline + repo history/getByIdMachine + container.scss to generate machine timeline

This commit is contained in:
xdrm-brackets 2017-11-11 18:46:43 +01:00
parent 34ffdae4fe
commit b73f71c652
14 changed files with 671 additions and 15 deletions

View File

@ -150,6 +150,55 @@
];
}
/* (x) Return the machine history for an history entry
*
* @id_entry<id> UID of the history entry
*
* @return timeline<array> Machine timeline data
*
---------------------------------------------------------*/
public function get_timeline($params){
extract($params);
/* (1) Get history entry data
---------------------------------------------------------*/
/* (1) Request */
$entry = new Repo('history/getById', [$id_entry]);
/* (2) Get response */
$entry = $entry->answer();
/* (3) Manage error */
if( !is_array($entry) )
return ['error' => new Error(Err::RepoError)];
/* (2) Get history for machine
---------------------------------------------------------*/
/* (1) Request */
$timeline = new Repo('history/getByIdMachine', [
$_SESSION['WAREHOUSE']['id'],
$entry['id_machine']
]);
/* (2) Get response */
$timeline = $timeline->answer();
/* (3) Manage error */
if( $timeline === false )
return ['error' => new Error(Err::RepoError)];
/* (3) Return data
---------------------------------------------------------*/
return [ 'timeline' => $timeline ];
}
}

View File

@ -88,15 +88,37 @@
* FALSE si aucun résultat
*
*/
public static function getByIdMachine($id_machine){
public static function getByIdMachine($id_warehouse, $id_machine){
/* [1] On rédige/execute la requête
=========================================================*/
$machine = Table::get('history')
->whereIdMachine($id_machine)
->orderby('timestamp', Rows::ORDER_DESC)
->select('*');
$users = Table::get('user')
->whereIdWarehouse($id_warehouse)
->select('id_user')
->select('username', null, null, 'user_name')
->select('firstname', null, null, 'user_firstname')
->select('lastname', null, null, 'user_lastname');
return $machine->fetch();
$machines = Table::get('machine')
->whereIdWarehouse($id_warehouse)
->whereId($id_machine)
->select('id_machine')
->select('name', null, null, 'machine_name');
$actions = Table::get('action')
->select('id_action')
->select('name', null, null, 'action_name');
$history = Table::get('history')
->join('id_user', $users)
->join('id_machine', $machines)
->join('id_action', $actions)
->select('id_history')
->select('timestamp')
->orderby('timestamp', Rows::ORDER_DESC);
return $history->fetch();
}
@ -134,21 +156,23 @@
/* RETOURNE UNE ENTREE SPECIFIQUE
*
* @id_history<int> UID de l'entree
* @id_entry<int> UID de l'entrée historique
*
* @return entry<Array> Données de l'entree
* FALSE si aucun résultat
* FALSE si erreur | aucun résultat
*
*/
public static function getById($id_history){
public static function getById($id_entry){
/* [1] On rédige/execute la requête
=========================================================*/
$user = Table::get('user')
->whereId($id_history)
$entry = Table::get('history')
->whereId($id_entry)
->orderby('timestamp', Rows::ORDER_DESC)
->select('*');
->select('*')
->unique();
return $entry->fetch();
return $user->fetch();
}

View File

@ -10,11 +10,141 @@
class main extends i_view{
public $id_history;
private $timeline = [];
/* (1) Constructor
*
* @id_history<id> UID of the history entry
*
---------------------------------------------------------*/
public function __construct($id_history){
/* (1) Set attributes
---------------------------------------------------------*/
$this->id_history = $id_history;
/* (2) Get machine timeline
---------------------------------------------------------*/
/* (1) Request */
$mac_req = new Request('historyDefault/get_timeline', [ 'id_entry' => $this->id_history ]);
/* (2) Get response */
$mac_res = $mac_req->dispatch();
/* (3) On success, store timeline data */
if( $mac_res->error->get() == Err::Success )
$this->timeline = $mac_res->get('timeline');
}
/* (2) Format timeline data to svg render
*
* @timeline<array> Timeline data
*
* @return svg<String> SVG raw render
*
---------------------------------------------------------*/
public function svg(){
/* (1) Initialize variables
---------------------------------------------------------*/
/* (1) Set date() timezone */
date_default_timezone_set('Europe/Paris');
/* (2) Init. result raw svg */
$RAW = '';
/* (3) Set global range */
$c = 0;
$cl = count($this->timeline);
/* (4) Create ranges of size 15 */
$r_size = 10;
$rl = round( $cl / $r_size );
$y_range_diff = 100;
$total_height = $y_range_diff*$rl;
/* (1) Svg tag */
$RAW .= "<svg width='1000' height='$total_height' viewBox='0 0 1000 $total_height'>";
/* (2) Start CIRCLE */
$RAW .= "<circle cx='50' cy='50' r='6' fill='#edf0f5'/>";
$RAW .= "<circle cx='50' cy='50' r='4' fill='#555'/>";
for( $r = 0 ; $r < $rl ; $r++ ){
$y = $y_range_diff*$r + 50;
/* (2) Build barebone
---------------------------------------------------------*/
/* (1) Timeline LINE */
$RAW .= "<path d='m50 $y L900 $y' style='stroke-dasharray: 3px;' stroke='#444'/>";
/* (3) Build each action
---------------------------------------------------------*/
for( $c = 0 ; $c < $r_size ; $c++ ){
// exit if no more entry
if( !isset($this->timeline[$r*$r_size+$c]) )
break;
$entry = $this->timeline[$r*$r_size+$c];
$action_class = strtolower($entry['action_name']);
$icon_uri = '/src/static/timeline/'.$action_class.'@'.$this->get_action_color($action_class).'.svg';
$x_offset = 100 + $c*800/$r_size;
$x_img_offset = $x_offset - 5.5;
// circle
$RAW .= "<circle cx='$x_offset' cy='$y' r='15' class='svg_$action_class op_svg'/>";
$RAW .= "<circle cx='$x_offset' cy='$y' r='12' class='svg_$action_class'/>";
// inside icon
$y_decal = $y - 5.5;
$RAW .= "<image x='$x_img_offset' y='$y_decal' width='12' height='12' xlink:href='$icon_uri'/>";
}
// exit if no more entry
if( !isset($this->timeline[$r*$r_size]) )
break;
}
/* (4) Stop CIRCLE */
$x_offset = 100 + $c*800/$r_size;
$RAW .= "<circle cx='$x_offset' cy='$y' r='6' fill='#edf0f5'/>";
$RAW .= "<circle cx='$x_offset' cy='$y' r='4' fill='#555'/>";
/* (5) Close SVG tag */
$RAW .= "</svg>";
return $RAW;
}
private function get_action_color($action_name){
return 'ffffff';
switch($action_name){
case 'start': return '2cde8b'; break;
case 'stop': return '3a3a3a'; break;
case 'lock': return 'e04343'; break;
case 'unlock': return 'af1c1c'; break;
case 'signal': return '3258d8'; break;
case 'unsignal': return '2041ab'; break;
}
return '000000';
}
}

View File

@ -1 +1,3 @@
<span class='in-dev'>In development.. This feature will soon be available.</span>
<!-- <span class='in-dev'>In development.. This feature will soon be available.</span> -->
{{ core.svg() | raw }}

View File

@ -605,6 +605,17 @@
"options": { "download": true },
"parameters": {},
"output": {}
},
"get_timeline": {
"description": "Retourne la timeline d'une machine pour associée à une entrée historique.",
"permissions": [["admin"]],
"parameters": {
"id_entry": { "description": "UID de l'entrée historique", "type": "id" }
},
"output": {
"timeline": { "description": "Données de la timeline.", "type": "array" }
}
}
},

View File

@ -18,6 +18,7 @@
"search",
"getAll",
"getById",
"getByIdUser",
"getByIdMachine",
"getByIdAction"

View File

@ -534,3 +534,43 @@ article.check-table{
}
}
/* [4] Timeline SVG
=========================================================*/
/* (1) svg circles -> set right transform-origin */
svg > circle[class^=svg_]{
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
transition: transform .2s ease-in-out;
}
/* (2) Middle circles -> scale+ on hover */
svg > circle[class^=svg_]:not(.op_svg):hover{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
/* (3) Avoid icons inside middle circles to block :hover */
svg > circle[class^=svg_]:not(.op_svg) + image{
-webkit-pionter-events: none;
pointer-events: none;
}
/* (4) Make around circles a bit transparent */
svg > circle.op_svg{
opacity: .6;
}
/* (5) Set circle colors according to action type */
svg > circle.svg_start{ fill: #2cde8b; }
svg > circle.svg_stop{ fill: #3a3a3a; }
svg > circle.svg_lock{ fill: #e04343; }
svg > circle.svg_unlock{ fill: #af1c1c; }
svg > circle.svg_signal{ fill: #3258d8; }
svg > circle.svg_unsignal{ fill: #2041ab; }

View File

@ -696,5 +696,56 @@ article.check-table > div > span input[type='checkbox']:checked + label[for] {
background-image: url("/src/static/container/checkbox@checked@007dd8.svg");
}
/* [4] Timeline SVG
=========================================================*/
/* (1) svg circles -> set right transform-origin */
svg > circle[class^=svg_] {
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
transition: transform .2s ease-in-out;
}
/* (2) Middle circles -> scale+ on hover */
svg > circle[class^=svg_]:not(.op_svg):hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
/* (3) Avoid icons inside middle circles to block :hover */
svg > circle[class^=svg_]:not(.op_svg) + image {
-webkit-pionter-events: none;
pointer-events: none;
}
/* (4) Make around circles a bit transparent */
svg > circle.op_svg {
opacity: .6;
}
/* (5) Set circle colors according to action type */
svg > circle.svg_start {
fill: #2cde8b;
}
svg > circle.svg_stop {
fill: #3a3a3a;
}
svg > circle.svg_lock {
fill: #e04343;
}
svg > circle.svg_unlock {
fill: #af1c1c;
}
svg > circle.svg_signal {
fill: #3258d8;
}
svg > circle.svg_unsignal {
fill: #2041ab;
}
/*# sourceMappingURL= container.css.map */

View File

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
enable-background="new 0 0 141.732 141.732"
height="32"
id="Livello_1"
version="1.1"
viewBox="0 0 32.000002 32.000001"
width="32"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="lock.svg"><metadata
id="metadata11"><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 /></cc:Work></rdf:RDF></metadata><defs
id="defs9" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview7"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-page="true"
inkscape:zoom="9.41931"
inkscape:cx="5.9336621"
inkscape:cy="7.2474796"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Livello_1" /><g
id="Livello_113"
transform="translate(-17.238667,-109.21765)" /><path
inkscape:connector-curvature="0"
d="m 22.378488,16.002563 0,-4.570818 a 6.3784857,6.856227 0 1 0 -12.7569707,0 l 0,4.570818 z m -19.1354571,0 2.1261615,0 0,-4.570818 a 10.630811,11.427045 0 1 1 21.2616196,0 l 0,4.570818 2.126162,0 0,15.997863 -25.5139431,0 z"
id="stylisable" /></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="32"
viewBox="0 0 32 32"
width="32"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="signal.svg">
<metadata
id="metadata10">
<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="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview6"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-page="true"
inkscape:zoom="14.481547"
inkscape:cx="22.770708"
inkscape:cy="28.336291"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<path
d="m 20.363634,25.4545 0,5.091 q 0,0.5909 -0.43181,1.0227 Q 19.500004,32 18.909094,32 l -5.81818,0 q -0.59091,0 -1.02273,-0.4318 -0.43182,-0.4318 -0.43182,-1.0227 l 0,-5.091 q 0,-0.5909 0.43182,-1.0227 Q 12.500004,24 13.090914,24 l 5.81818,0 q 0.59091,0 1.02273,0.4318 0.43181,0.4318 0.43181,1.0227 z M 21.045454,1.4544998 20.409094,18.9091 q -0.0227,0.5909 -0.46591,1.0227 -0.44318,0.4318 -1.03409,0.4318 l -5.81818,0 q -0.59091,0 -1.03409,-0.4318 -0.44319,-0.4318 -0.46591,-1.0227 L 10.954544,1.4544998 Q 10.931844,0.86359978 11.352274,0.43179978 11.772734,-2.22046e-7 12.363634,-2.22046e-7 l 7.27273,0 q 0.59091,0 1.01137,0.431800002046 0.42045,0.4318 0.39772,1.02270002 z"
id="stylisable"
inkscape:connector-curvature="0" />
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="32"
id="Layer_1"
version="1.1"
viewBox="0 0 31.999999 32"
width="32"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="start.svg"><metadata
id="metadata9"><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 /></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview5"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-page="true"
inkscape:zoom="14.5625"
inkscape:cx="13.38136"
inkscape:cy="12.329643"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
inkscape:connector-curvature="0"
d="M 7.9999977,4.9999997e-8 7.9999977,17.6 l 4.8000003,0 0,14.4 11.2,-19.2 -6.4,0 6.4,-12.799999950000003 z"
id="stylisable" /></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="32"
id="Layer_1"
version="1.2"
viewBox="0 0 32 32"
width="32"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="stop.svg"><metadata
id="metadata11"><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 /></cc:Work></rdf:RDF></metadata><defs
id="defs9" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview7"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="9.8333333"
inkscape:cx="-11.033899"
inkscape:cy="6.0000006"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><g
id="g3"
transform="matrix(2.0564972,0,0,2.0564972,-8.6779661,-8.6779661)" /><path
inkscape:connector-curvature="0"
d="m 20.295204,16 6.442427,-6.4424263 c 1.185984,-1.1859835 1.185984,-3.1092209 0,-4.294445 -1.185984,-1.1859835 -3.10998,-1.1859835 -4.295964,0 L 16,11.704796 9.5575738,5.2631287 c -1.1859835,-1.1859835 -3.1092211,-1.1859835 -4.2952047,0 -1.1859835,1.1859835 -1.1859835,3.1099803 0,4.294445 L 11.704796,16 5.2623691,22.442427 c -1.1859835,1.185983 -1.1859835,3.10922 0,4.294445 1.1859836,1.185983 3.1092212,1.185983 4.2952047,0 L 16,20.295204 l 6.441667,6.441668 c 1.185984,1.185983 3.10998,1.185983 4.295964,0 1.185984,-1.185984 1.185984,-3.109981 0,-4.294445 L 20.295204,16 Z"
id="stylisable" /></svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,70 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="32"
viewBox="0 0 32 32"
width="32"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="unsignal.svg">
<metadata
id="metadata10">
<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="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview6"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-page="true"
inkscape:zoom="14.481547"
inkscape:cx="12.792553"
inkscape:cy="12.35049"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<g
transform="matrix(1.1851852,0,0,1.1851852,-3.5555556,-3.5555556)"
style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
id="Page-1">
<g
style="fill:#157efb"
id="icon-24-key">
<path
inkscape:connector-curvature="0"
d="M 18.532404,19.467596 14,24 l -3,0 0,3 -3,0 0,3 -5,0 0,-5 10.532404,-10.532404 C 13.188157,13.543721 13,12.543834 13,11.5 13,6.8055794 16.805579,3 21.5,3 26.194421,3 30,6.8055794 30,11.5 30,16.194421 26.194421,20 21.5,20 20.456166,20 19.456279,19.811843 18.532404,19.467596 l 0,0 0,0 z M 27,9 c 0,-1.6568543 -1.343146,-3 -3,-3 -1.656854,0 -3,1.3431457 -3,3 0,1.656854 1.343146,3 3,3 1.656854,0 3,-1.343146 3,-3 l 0,0 z"
id="stylisable"
style="fill:#000000" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,70 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="32"
viewBox="0 0 32 32"
width="32"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="unsignal.svg">
<metadata
id="metadata10">
<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="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview6"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-page="true"
inkscape:zoom="14.481547"
inkscape:cx="12.792553"
inkscape:cy="12.35049"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<g
transform="matrix(1.1851852,0,0,1.1851852,-3.5555556,-3.5555556)"
style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
id="Page-1">
<g
style="fill:#157efb"
id="icon-24-key">
<path
inkscape:connector-curvature="0"
d="M 18.532404,19.467596 14,24 l -3,0 0,3 -3,0 0,3 -5,0 0,-5 10.532404,-10.532404 C 13.188157,13.543721 13,12.543834 13,11.5 13,6.8055794 16.805579,3 21.5,3 26.194421,3 30,6.8055794 30,11.5 30,16.194421 26.194421,20 21.5,20 20.456166,20 19.456279,19.811843 18.532404,19.467596 l 0,0 0,0 z M 27,9 c 0,-1.6568543 -1.343146,-3 -3,-3 -1.656854,0 -3,1.3431457 -3,3 0,1.656854 1.343146,3 3,3 1.656854,0 3,-1.343146 3,-3 l 0,0 z"
id="stylisable"
style="fill:#000000" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB