Add button tester UI

This commit is contained in:
Mathias Malmqvist
2025-07-17 01:43:46 +02:00
committed by dualshock-tools
parent 0aac1509aa
commit b85f12eccd
2 changed files with 385 additions and 9 deletions

263
core.js
View File

@@ -22,6 +22,10 @@ var last_written_finetune_data = []
var finetune_visible = false
var on_finetune_updating = false
// Global object to keep track of button states
const ds_button_states = {
// e.g. 'square': false, 'cross': false, ...
};
// Alphabetical order
var available_langs = {
@@ -1138,11 +1142,29 @@ function welcome_accepted() {
$("#welcomeModal").modal("hide");
}
function init_svg_colors() {
const lightBlue = '#7ecbff';
const midBlue = '#3399cc';
const controller = document.getElementById('Controller');
set_svg_group_color(controller, lightBlue);
['Button_outlines', 'L3_outline', 'R3_outline', 'Trackpad_outline'].forEach(id => {
const group = document.getElementById(id);
set_svg_group_color(group, midBlue);
});
['Button_infills', 'L3_infill', 'R3_infill', 'Trackpad_infill'].forEach(id => {
const group = document.getElementById(id);
set_svg_group_color(group, 'white');
});
}
function gboot() {
gu = crypto.randomUUID();
$("#infoshowall").hide();
window.addEventListener('DOMContentLoaded', function() {
lang_init();
init_svg_colors();
welcome_modal();
$("#checkCircularity").on('change', on_circ_check_change);
on_circ_check_change();
@@ -1559,6 +1581,28 @@ function refresh_stick_pos() {
$("#el-lbl").text(el);
$("#er-lbl").text(er);
}
// Move L3 and R3 SVG elements according to stick position
try {
// These values are tuned for the SVG's coordinate system and visual effect
const max_stick_offset = 25;
// L3 center in SVG coordinates (from path: cx=295.63, cy=461.03)
const l3_cx = 295.63, l3_cy = 461.03;
// R3 center in SVG coordinates (from path: cx=662.06, cy=419.78)
const r3_cx = 662.06, r3_cy = 419.78;
const l3_x = l3_cx + plx * max_stick_offset;
const l3_y = l3_cy + ply * max_stick_offset;
const l3_group = document.querySelector('g#L3');
l3_group?.setAttribute('transform', `translate(${l3_x - l3_cx},${l3_y - l3_cy}) scale(0.70)`);
const r3_x = r3_cx + prx * max_stick_offset;
const r3_y = r3_cy + pry * max_stick_offset;
const r3_group = document.querySelector('g#R3');
r3_group?.setAttribute('transform', `translate(${r3_x - r3_cx},${r3_y - r3_cy}) scale(0.70)`);
} catch (e) {
// Fail silently if SVG not present
}
}
function circ_checked() { return $("#checkCircularity").is(':checked') }
@@ -1653,6 +1697,177 @@ function update_battery_status(bat_capacity, cable_connected, is_charging, is_er
}
}
const DS4_BUTTON_MAP = [
{ name: 'up', byte: 4, mask: 0x0 }, // Dpad handled separately
{ name: 'right', byte: 4, mask: 0x1 },
{ name: 'down', byte: 4, mask: 0x2 },
{ name: 'left', byte: 4, mask: 0x3 },
{ name: 'square', byte: 4, mask: 0x10, svg: 'Square' },
{ name: 'cross', byte: 4, mask: 0x20, svg: 'Cross' },
{ name: 'circle', byte: 4, mask: 0x40, svg: 'Circle' },
{ name: 'triangle', byte: 4, mask: 0x80, svg: 'Triangle' },
{ name: 'l1', byte: 5, mask: 0x01, svg: 'L1' },
{ name: 'l2', byte: 5, mask: 0x04, svg: 'L2' }, // analog handled separately
{ name: 'r1', byte: 5, mask: 0x02, svg: 'R1' },
{ name: 'r2', byte: 5, mask: 0x08, svg: 'R2' }, // analog handled separately
{ name: 'share', byte: 5, mask: 0x10, svg: 'Create' },
{ name: 'options', byte: 5, mask: 0x20, svg: 'Options' },
{ name: 'l3', byte: 5, mask: 0x40, svg: 'L3' },
{ name: 'r3', byte: 5, mask: 0x80, svg: 'R3' },
{ name: 'ps', byte: 6, mask: 0x01, svg: 'PS' },
{ name: 'touchpad', byte: 6, mask: 0x02, svg: 'Trackpad' },
// No mute button on DS4
];
const DS5_BUTTON_MAP = [
{ name: 'up', byte: 7, mask: 0x0 }, // Dpad handled separately
{ name: 'right', byte: 7, mask: 0x1 },
{ name: 'down', byte: 7, mask: 0x2 },
{ name: 'left', byte: 7, mask: 0x3 },
{ name: 'square', byte: 7, mask: 0x10, svg: 'Square' },
{ name: 'cross', byte: 7, mask: 0x20, svg: 'Cross' },
{ name: 'circle', byte: 7, mask: 0x40, svg: 'Circle' },
{ name: 'triangle', byte: 7, mask: 0x80, svg: 'Triangle' },
{ name: 'l1', byte: 8, mask: 0x01, svg: 'L1' },
{ name: 'l2', byte: 4, mask: 0xff }, // analog handled separately
{ name: 'r1', byte: 8, mask: 0x02, svg: 'R1' },
{ name: 'r2', byte: 5, mask: 0xff }, // analog handled separately
{ name: 'create', byte: 8, mask: 0x10, svg: 'Create' },
{ name: 'options', byte: 8, mask: 0x20, svg: 'Options' },
{ name: 'l3', byte: 8, mask: 0x40, svg: 'L3' },
{ name: 'r3', byte: 8, mask: 0x80, svg: 'R3' },
{ name: 'ps', byte: 9, mask: 0x01, svg: 'PS' },
{ name: 'touchpad', byte: 9, mask: 0x02, svg: 'Trackpad' },
{ name: 'mute', byte: 9, mask: 0x04, svg: 'Mute' },
];
// Generic button processing for DS4/DS5
function process_ds_buttons(data, BUTTON_MAP, dpad_byte, l2_analog_byte, r2_analog_byte) {
if (!data || !data.data) return;
const pressedColor = '#1a237e'; // pleasing dark blue
// L2/R2 analog infill
[
['l2', 'L2_infill', data.data.getUint8(l2_analog_byte)],
['r2', 'R2_infill', data.data.getUint8(r2_analog_byte)]
].forEach(([name, svg, val]) => {
// Fade between white and pressedColor based on analog value
const t = val / 255;
const color = lerp_color('#ffffff', pressedColor, t);
if(val != ds_button_states[name + '_analog']) {
ds_button_states[name + '_analog'] = val;
const infill = document.getElementById(svg);
set_svg_group_color(infill, color);
}
});
// Dpad is a 4-bit hat value
const hat = data.data.getUint8(dpad_byte) & 0x0F;
const dpad_map = {
up: (hat === 0 || hat === 1 || hat === 7),
right: (hat === 1 || hat === 2 || hat === 3),
down: (hat === 3 || hat === 4 || hat === 5),
left: (hat === 5 || hat === 6 || hat === 7)
};
for (let dir of ['up', 'right', 'down', 'left']) {
const pressed = dpad_map[dir];
if (ds_button_states[dir] !== pressed) {
ds_button_states[dir] = pressed;
// Update SVG if present
const group = document.getElementById(dir.charAt(0).toUpperCase() + dir.slice(1) + '_infill');
set_svg_group_color(group, pressed ? pressedColor : 'white');
}
}
// Other buttons
for (let btn of BUTTON_MAP) {
if (['up', 'right', 'down', 'left'].includes(btn.name)) continue; // Dpad handled above
const pressed = (data.data.getUint8(btn.byte) & btn.mask) !== 0;
if (ds_button_states[btn.name] !== pressed) {
ds_button_states[btn.name] = pressed;
if (btn.svg) {
const group = document.getElementById(btn.svg + '_infill');
set_svg_group_color(group, pressed ? pressedColor : 'white');
}
}
}
}
function set_svg_group_color(group, color) {
if (group) {
let elements = group.querySelectorAll('path,rect,circle,ellipse,line,polyline,polygon');
elements.forEach(el => {
// Set up a smooth transition for fill and stroke if not already set
if (!el.style.transition) {
el.style.transition = 'fill 0.10s, stroke 0.10s';
}
el.setAttribute('fill', color);
el.setAttribute('stroke', color);
});
}
}
// --- Touchpad overlay helpers ---
function parse_touch_points(data, offset) {
// Returns array of up to 2 points: {active, id, x, y}
const points = [];
for (let i = 0; i < 2; i++) {
const base = offset + i * 4;
const arr = [];
for (let j = 0; j < 4; j++) arr.push(data.getUint8(base + j));
const b0 = data.getUint8(base);
const active = (b0 & 0x80) === 0; // 0 = finger down, 1 = up
const id = b0 & 0x7F;
const b1 = data.getUint8(base + 1);
const b2 = data.getUint8(base + 2);
const b3 = data.getUint8(base + 3);
// x: 12 bits, y: 12 bits
const x = ((b2 & 0x0F) << 8) | b1;
const y = (b3 << 4) | (b2 >> 4);
points.push({ active, id, x, y });
}
return points;
}
let hasActiveTouchPoints = false;
let trackpadBbox = undefined;
function update_touchpad_circles(points) {
const hasActivePointsNow = points.some(pt => pt.active);
if(!hasActivePointsNow && !hasActiveTouchPoints) return;
// Find the Trackpad_infill group in the SVG
const svg = document.getElementById('controller-svg');
const trackpad = svg?.querySelector('g#Trackpad_infill');
if (!trackpad) return;
// Remove the previous touch points, if any
trackpad.querySelectorAll('circle.ds-touch').forEach(c => c.remove());
hasActiveTouchPoints = hasActivePointsNow;
trackpadBbox = trackpadBbox ?? trackpad.querySelector('path')?.getBBox();
// Draw up to 2 circles
points.forEach((pt, idx) => {
if (!pt.active) return;
// Map raw x/y to SVG
// DS4/DS5 touchpad is 1920x943 units (raw values)
const RAW_W = 1920, RAW_H = 943;
const pointRadius = trackpadBbox.width * 0.05;
const cx = trackpadBbox.x + pointRadius + (pt.x / RAW_W) * (trackpadBbox.width - pointRadius*2);
const cy = trackpadBbox.y + pointRadius + (pt.y / RAW_H) * (trackpadBbox.height - pointRadius*2);
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('class', 'ds-touch');
circle.setAttribute('cx', cx);
circle.setAttribute('cy', cy);
circle.setAttribute('r', pointRadius);
circle.setAttribute('fill', idx === 0 ? '#2196f3' : '#e91e63');
circle.setAttribute('fill-opacity', '0.5');
circle.setAttribute('stroke', '#3399cc');
circle.setAttribute('stroke-width', '4');
trackpad.appendChild(circle);
});
}
function process_ds4_input(data) {
var lx = data.data.getUint8(0);
var ly = data.data.getUint8(1);
@@ -1673,6 +1888,12 @@ function process_ds4_input(data) {
refresh_sticks();
}
// Use DS4 map: dpad byte 4, L2 analog 7, R2 analog 8
process_ds_buttons(data, DS4_BUTTON_MAP, 4, 7, 8);
const points = parse_touch_points(data.data, 34);
update_touchpad_circles(points);
// Read battery
var bat = data.data.getUint8(29);
var bat_data = bat & 0x0f;
@@ -1732,6 +1953,12 @@ function process_ds_input(data) {
refresh_finetune();
}
// Use DS5 map: dpad byte 7, L2 analog 4, R2 analog 5
process_ds_buttons(data, DS5_BUTTON_MAP, 7, 4, 5);
const points = parse_touch_points(data.data, 32);
update_touchpad_circles(points);
var bat = data.data.getUint8(52);
var bat_charge = bat & 0x0f;
var bat_status = bat >> 4;
@@ -1757,6 +1984,13 @@ function process_ds_input(data) {
update_battery_status(bat_capacity, cable_connected, is_charging, is_error);
}
function set_mute_visibility(show) {
const muteOutline = document.getElementById('Mute_outline');
const muteInfill = document.getElementById('Mute_infill');
if (muteOutline) muteOutline.style.display = show ? '' : 'none';
if (muteInfill) muteInfill.style.display = show ? '' : 'none';
}
async function continue_connection(report) {
try {
device.oninputreport = null;
@@ -1776,6 +2010,8 @@ async function continue_connection(report) {
if(device.productId == 0x05c4) {
$("#infoshowall").hide()
$("#ds5finetune").hide()
// Hide mute button for DS4
set_mute_visibility(false);
if(await ds4_info()) {
connected = true;
mode = 1;
@@ -1785,6 +2021,8 @@ async function continue_connection(report) {
} else if(device.productId == 0x09cc) {
$("#infoshowall").hide()
$("#ds5finetune").hide()
// Hide mute button for DS4
set_mute_visibility(false);
if(await ds4_info()) {
connected = true;
mode = 1;
@@ -1794,6 +2032,8 @@ async function continue_connection(report) {
} else if(device.productId == 0x0ce6) {
$("#infoshowall").show()
$("#ds5finetune").show()
// Show mute button for DS5
set_mute_visibility(true);
if(await ds5_info(false)) {
connected = true;
mode = 2;
@@ -1803,6 +2043,8 @@ async function continue_connection(report) {
} else if(device.productId == 0x0df2) {
$("#infoshowall").show()
$("#ds5finetune").show()
// Show mute button for DS5 Edge
set_mute_visibility(true);
if(await ds5_info(true)) {
connected = true;
mode = 3;
@@ -2366,3 +2608,24 @@ function lang_translate(target_file, target_lang, target_direction) {
});
}
function lerp_color(a, b, t) {
// a, b: hex color strings, t: 0.0-1.0
function hex2rgb(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) hex = hex.split('').map(x => x + x).join('');
const num = parseInt(hex, 16);
return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
}
function rgb2hex(r, g, b) {
return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
}
const c1 = hex2rgb(a);
const c2 = hex2rgb(b);
const c = [
Math.round(c1[0] + (c2[0] - c1[0]) * t),
Math.round(c1[1] + (c2[1] - c1[1]) * t),
Math.round(c1[2] + (c2[2] - c1[2]) * t)
];
return rgb2hex(c[0], c[1], c[2]);
}

View File

@@ -131,16 +131,129 @@ dl.row dd { font-family: monospace; }
</div>
<div id="mainmenu" class="container" style="display: none;">
<div class="row">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="card text-bg-light" >
<div class="card-header"><i class="fas fa-gamepad"></i>&nbsp;&nbsp;<span class="ds-i18n">Controller Info</span></div>
<dl class="row px-3 py-2" id="fwinfo"></dl>
<span id="infoshowall" class="pb-4 px-4 row">
<button class="btn btn-outline-secondary" onclick="show_info_modal()"><i class="fas fa-plus me-1"></i> <span class="ds-i18n">Show all</span></button>
</span>
</div>
<br>
<div class="card text-bg-light" >
<div class="card-header"><i class="fas fa-gamepad"></i>&nbsp;&nbsp;<span class="ds-i18n">Controller Info</span></div>
<dl class="row px-3 py-2" id="fwinfo"></dl>
<span id="infoshowall" class="pb-4 px-4 row">
<button class="btn btn-outline-secondary" onclick="show_info_modal()"><i class="fas fa-plus me-1"></i> <span class="ds-i18n">Show all</span></button>
</span>
</div>
<!-- DS5 Controller SVG below Controller Info box -->
<div class="my-3 text-center mx-3">
<!-- DualSense 5 Controller SVG inlined for button highlighting -->
<svg id="controller-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 518" style="width: 80%; height: auto; max-width: 80%;" stroke-width="1">
<g id="Button_infills">
<g id="Mute_infill" transform="translate(0,0.65) scale(0.70)">
<path id="Mute_infill" d="M454.47,468.7c-6.47,0-12.69.04-18.75.14-.92.01-2.18.28-2.96,1.48-.56.85-.83,2.14-.8,3.81.03,2.24.41,3.3,3.67,3.32,4.47.03,8.94.02,13.41.02l5.53-.03c1.83,0,3.67,0,5.5-.01,4.41-.01,8.97-.03,13.46.04,3.68.09,4.03-1.61,4.06-3.62.02-1.47-.23-2.58-.76-3.39-.67-1.03-1.83-1.6-3.26-1.62-6.64-.08-12.98-.12-19.1-.12Z"/>
</g>
<g id="Down_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M177.4,357.17c-1.88,2.05-4.45,3.18-7.24,3.18h-22.91c-2.79,0-5.36-1.13-7.25-3.18-1.88-2.05-2.79-4.71-2.55-7.49l1.25-14.78c.43-5.04,2.71-9.71,6.42-13.16l9.04-8.39c1.21-1.12,2.74-1.68,4.27-1.68s2.98.54,4.18,1.61l9.44,8.45c3.87,3.47,6.24,8.23,6.68,13.4l1.23,14.55c.24,2.78-.67,5.44-2.56,7.49Z"/>
</g>
<g id="PS_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M455.41,437.59c11.37.03,20.87-9.06,21-20.1.14-11.24-9.39-20.97-20.61-21.05-11.23-.08-21,9.57-20.99,20.72,0,11.16,9.32,20.4,20.6,20.43Z"/>
</g>
<g id="Right_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M223.51,284.09v22.91c0,2.79-1.13,5.36-3.18,7.24-2.05,1.89-4.71,2.8-7.49,2.56l-14.55-1.23c-5.17-.44-9.93-2.81-13.39-6.68l-8.46-9.44c-2.17-2.43-2.14-6.06.07-8.45l8.4-9.04c3.44-3.71,8.11-5.99,13.15-6.42l14.78-1.25c2.78-.24,5.44.67,7.49,2.56,2.05,1.88,3.18,4.45,3.18,7.24Z"/>
</g>
<g id="Left_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M140.97,299.45l-8.46,9.44c-3.46,3.87-8.22,6.24-13.39,6.68l-14.55,1.23c-2.78.24-5.44-.67-7.49-2.56-2.05-1.88-3.18-4.45-3.18-7.24v-22.91c0-2.79,1.13-5.36,3.18-7.24,1.84-1.69,4.17-2.6,6.63-2.6.28,0,.57.01.86.04l14.78,1.25c5.04.43,9.71,2.71,13.15,6.42l8.4,9.04c2.21,2.39,2.24,6.02.07,8.45Z"/>
</g>
<g id="Up_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M179.96,241.41l-1.23,14.55c-.44,5.17-2.81,9.93-6.68,13.39l-9.44,8.46c-2.43,2.17-6.06,2.14-8.45-.07l-9.04-8.4c-3.71-3.44-5.99-8.11-6.42-13.15l-1.25-14.78c-.24-2.78.67-5.44,2.55-7.49,1.89-2.05,4.46-3.18,7.25-3.18h22.91c2.79,0,5.36,1.13,7.24,3.18,1.89,2.05,2.8,4.71,2.56,7.49Z"/>
</g>
<g id="Triangle_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M751.45,261.08c15.08-.01,26.75-11.5,26.73-26.31-.02-14.47-12.19-26.62-26.73-26.69-14.57-.07-26.65,11.99-26.66,26.63-.01,14.84,11.65,26.37,26.66,26.36Z"/>
</g>
<g id="Cross_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M750.93,379.05c15.44-.06,27.38-11.64,27.24-26.43-.13-14.28-12.84-26.83-26.99-26.3-14.58.55-26.43,12.2-26.39,26.91.04,14.23,11.83,25.88,26.14,25.82Z"/>
</g>
<g id="Circle_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M787.29,293.47c-.03,14.49,11.88,26.68,26.15,26.75,14.74.08,26.99-11.95,26.95-26.46-.04-14.51-12.12-26.34-27.04-26.48-14.04-.14-26.03,11.91-26.06,26.18Z"/>
</g>
<g id="Square_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M689.1,320.22c14.61.11,27.23-12.13,27.17-26.35-.06-14.09-12.36-26.44-26.54-26.66-14.42-.22-26.52,11.67-26.66,26.18-.13,14.49,11.74,26.73,26.03,26.83Z"/>
</g>
<g id="Options_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M691.58,199.27l-4.27,17.92c-.91,3.82-4.76,6.19-8.58,5.28-3.82-.91-6.19-4.76-5.28-8.58l4.27-17.92c.78-3.27,3.71-5.48,6.93-5.48.54,0,1.1.06,1.65.19,1.85.44,3.42,1.58,4.42,3.2s1.3,3.53.86,5.38Z"/>
</g>
<g id="Create_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M224.03,191.39c.55-.13,1.11-.19,1.65-.19,3.22,0,6.15,2.21,6.93,5.47l4.27,17.93c.44,1.85.13,3.76-.86,5.38-1,1.62-2.57,2.76-4.42,3.2-3.82.91-7.67-1.46-8.58-5.28l-4.27-17.92c-.91-3.82,1.46-7.67,5.28-8.58Z"/>
</g>
<g id="R2_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M800.14,115.88c-1.06,1.16-2.71,1.73-5.05,1.73-.01,0-.03,0-.04-.01-24.46-6.24-52.88-10.2-84.5-11.76h-.12c-4.19.08-7.09-.8-8.55-2.62-1.41-1.74-1.67-4.53-.77-8.29l.03-.15,9.87-67.57c3.29-14.17,13.23-21.12,30.28-21.12,2.57,0,5.31.16,8.22.47,13.16,1.54,22.93,6.87,29.86,16.29,2.6,3.53,4.67,7.72,6.16,12.44,7.81,24.72,11.55,46.61,15.88,71.95l.15.88c.41,3.61-.06,6.25-1.42,7.76Z"/>
</g>
<g id="L2_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M208.41,103.22c-1.47,1.82-4.36,2.7-8.55,2.62h-.12c-31.62,1.56-60.04,5.52-84.5,11.76-.01.01-.03.01-.04.01-2.34,0-4-.57-5.05-1.73-1.36-1.51-1.84-4.15-1.42-7.76l.15-.88c4.33-25.34,8.07-47.23,15.87-71.95,1.49-4.72,3.57-8.91,6.17-12.44,6.93-9.42,16.7-14.75,29.86-16.29,2.9-.31,5.64-.47,8.22-.47,17.05,0,26.98,6.95,30.28,21.12l9.87,67.57.03.15c.89,3.76.63,6.55-.77,8.29Z"/>
</g>
<g id="R1_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M805.8,173.73c-45.97-8.48-86.34-15.03-123.26-19.99,2.9-8.22,9.5-13.32,20.48-15.9,26.02-3.4,53.76,2.2,87.27,17.61.98.44,1.96.95,2.94,1.51,9.2,5.27,12.41,9.42,12.57,16.77Z"/>
</g>
<g id="L1_infill" transform="translate(0,0.65) scale(0.70)">
<path d="M226.89,153.84c-42.76,6.62-84.3,13.1-123.56,19.27.76-6.19,2.09-12.15,27.86-22.29,28.7-10.58,37.26-12.24,70.44-13.64,2.49-.11,4.68,0,6.67.32,9.71,1.57,15.81,6.94,18.59,16.34Z"/>
</g>
</g>
<g id="Outline" transform="translate(0,0.65) scale(0.70)">
<g id="Controller">
<path id="Controller_outline" d="M804.61,172.5s.09.02.13.02c-45.03-8.29-84.58-14.71-120.82-19.6.06,0,.12.02.17.02-.09.21-.14.44-.23.66-1.95.4-4.06.27-6,.85-.01-.01-.04-.03-.06-.05-.04-.13-.09-.26-.14-.39.02,0,.04,0,.07,0-4.87-.52-9.74-1.01-14.62-1.5-4.79-.46-9.6-.91-14.4-1.34h-.01s-.37-.05-.37-.05c-9.11-.83-18.27-1.58-27.45-2.28,0,.04,0,.08,0,.11,6.85.92,13.16,2.58,18.67,6.93,0,0-.01-.01-.02-.02,1.13.1,2.24.2,3.36.3,5.18,1.42,9.39,5.36,10.93,10.49,1.6,5.35,1.3,12.24-.9,20.47l-21.05,109.2c-4.19,26.12-19.01,37.08-42.82,41.56l-143.01.03-128.89-.03c-23.72-4.39-39.07-18.19-42.83-41.64l-2.11-10.93c-.29-2.09-.65-4.23-1.12-6.43l-12.19-62.64-5.57-28.92-.04-.19c-.09-.35-.16-.68-.25-1.03l-1.25-6.42s0-.03-.01-.04c-.67-4.99-.48-9.34.61-12.98,1.44-4.81,5.22-8.56,9.95-10.19,1.68-.14,3.36-.28,5.03-.42-.01,0-.02.02-.04.03.13-.02.26-.04.39-.06,1.51-.96,3.05-1.79,4.52-2.46,4.51-2.11,9.69-3.99,14.78-4.58-8.71.66-17.56,1.37-26.29,2.11l-1.11.09c-9.48.82-18.77,1.68-27.61,2.55l-.46.05s0-.01,0-.02c-.02.03-.03.06-.04.09-1.99.06-3.94-.42-5.98-.72,0-.03,0-.06-.01-.09.03,0,.06,0,.08-.01-41.23,6.38-81.95,12.73-121.09,18.88,0-.03.01-.07.02-.1l-5.76,1.61c-1.39.76-2.77,1.68-4.11,2.75-6.4,5.15-12.04,13.69-17.24,26.11-27.39,64.19-47.54,129.24-59.9,193.34C4.64,462.34-.21,530.22,3.08,597.4c2.41,40.48,7.54,66.82,16.62,85.41,9.85,20.12,24.59,31.39,46.4,35.45l39.76,12.39.33.07h.1c.97.12,1.93.18,2.86.18,13.63,0,18.84-11.41,21.55-19.96,27.65-75.71,49.02-130.11,67.27-171.19,8.52-19.59,24.3-29.11,48.23-29.11,3.5,0,7.23.21,11.11.63h.17c60.68,2.54,123.31,3.82,186.16,3.82,70.29,0,142.26-1.6,213.94-4.76,2.31-.2,4.59-.3,6.77-.3,23.28,0,39.64,11.03,50,33.68,26.25,62.96,48.44,119.86,67.83,173.94,3.28,8.94,9.45,13.47,18.32,13.47,1.52,0,3.14-.14,4.82-.4h.06s45.5-13.11,45.5-13.11c2-.48,4.05-1.09,6.27-1.86l.13-.04.72-.25v-.02c15.47-5.75,26.84-17.21,34.75-35,7.77-17.48,12.58-41.33,15.58-77.35,4.35-57.49-1.58-134.16-16.29-210.35-15.8-81.82-40.06-154.86-68.3-205.65-2.37-4.62-4.05-7.26-5.79-9.11-2.01-2.17-4.26-3.46-7.64-4.35,0-.05-.03.03-.04-.02M654.75,157.28c1.32.12,2.27.2,2.26.19,4.84.46,9.76.95,14.92,1.48-3.75,2.27-6.89,5.18-9.51,8.8-.01-.02-.01-.04-.02-.06-.81,1.03-1.56,2.12-2.23,3.26-.18-2.07-.53-4.04-1.07-5.86-.89-2.98-2.4-5.62-4.35-7.82ZM251.1,157.47l.22-.17.34-.03c-2.05,2.16-3.62,4.8-4.53,7.83-.29.95-.5,1.95-.69,2.98-.3-.5-.5-.83-.51-.82-2.55-3.31-5.76-6.16-9.46-8.41,4.54-.44,9.37-.89,14.63-1.37ZM63.74,711.34c-1.7,0-3.53-.26-5.45-.77l-.46-.09c-15.03-4.97-25.58-14.54-33.18-30.09-8.75-17.89-13.71-43.59-16.08-83.29C2.18,466.43,27.04,334.31,82.48,204.42c5.96-14.26,12.4-22.95,19.68-26.57,36.97-5.81,77.23-12.09,119.66-18.67,12.6,2.24,22,10.48,24.57,21.52.29,2.12.73,4.32,1.3,6.61l5.63,28.91,13.52,70.16c3.04,22.28-4.43,36.44-19.51,54.89-33.86,35.52-63.96,83.16-92.02,145.65-22.57,50.27-43.21,108.54-64.97,183.45-3.79,15.91-8.97,32.96-18.74,38.81-2.41,1.45-4.98,2.16-7.85,2.16ZM804.28,725.31c-1.3.21-2.54.31-3.7.31-6.47,0-10.8-3.22-13.23-9.84-19.36-54.03-41.59-111.02-67.97-174.28-11.21-24.52-29.78-36.96-55.17-36.96-2.28,0-4.64.1-6.97.3-71.45,3.15-143.25,4.75-213.42,4.75-62.79,0-125.39-1.28-185.99-3.8-3.91-.42-7.72-.63-11.32-.63-26.2,0-44.22,10.9-53.58,32.37-18.31,41.24-39.73,95.76-67.43,171.64-3.62,11.38-8.49,16.23-16.28,16.23-.66,0-1.36-.03-2.07-.1l-34.11-10.63c.47-.24.93-.49,1.38-.76,11.51-6.9,17.19-25.2,21.22-42.14,31.82-109.48,78.28-245.56,155.72-326.77l.12-.14c10.32-12.6,15.94-21.99,18.94-31.77.01.02.02.03.03.05l.04-.29c.47-1.24.83-2.6,1.14-4.03,5.82,18.4,22.43,32.57,45.18,34.56l129.25.04,143.13-.03h.24c23.32-2.05,38.12-13.14,44.92-33.72.1.51.2,1.01.32,1.53,3.02,14.37,11.49,26.24,20.3,37l.17.19c81.44,78.96,128.1,212.33,162.99,332.38,5.91,20.1,10.54,31.1,19.1,35.05l-32.95,9.49ZM902.84,602.66c-4.81,57.88-14.43,96.11-47.36,107.83-4.19,1.09-7.37,1.59-9.99,1.59-9.87,0-14.41-6.75-22.08-32.85-22.39-77.03-43.38-136.08-66.05-185.82-29.41-64.53-61.55-113.22-98.27-148.86-16.5-20.18-23.88-35.21-18.4-61.3l20.03-98.96c4.49-15.34,12.4-22.67,27.28-25.27,35.69,4.91,74.62,11.29,119,19.5h.07c5.65,1.12,7.18,2.15,11.82,11.17,60.68,109.11,92.4,301.63,83.95,412.97Z"/>
<g id="Speaker_grill">
<circle cx="420.29" cy="357.71" r="4.82"/>
<circle cx="437.84" cy="357.71" r="4.82"/>
<circle cx="455.38" cy="357.71" r="4.82"/>
<circle cx="472.93" cy="357.71" r="4.82"/>
<circle cx="490.47" cy="358.68" r="4.82"/>
</g>
<path id="L3_surround" d="M340.92,373.72c-12.1-11.94-28.56-18.52-46.36-18.52-1.03,0-2.06.02-3.11.06-16.56.69-32.12,7.92-43.82,20.35-11.43,12.15-17.66,28.1-17.11,43.7-.63,16.4,5.79,32.86,17.63,45.16,12.39,12.87,29.14,19.96,47.17,19.96h.13c17.75-.03,34.16-6.86,46.21-19.24,12.14-12.46,18.58-29.31,18.14-47.45-.41-16.77-7.12-32.41-18.9-44.04ZM296.63,478.55c-.35,0-.7,0-1.06,0-16.24,0-31.34-6.14-42.53-17.29-11.18-11.15-17.33-26.19-17.32-42.36.02-27.96,22.56-58.15,58.94-58.15h.29c16.72.07,32,6.28,43.02,17.47,10.8,10.97,16.65,25.88,16.48,41.98-.4,36.53-29.71,58.36-57.82,58.36Z"/>
<path id="R3_surround" d="M617.17,355.14c-1.39,0-2.81.05-4.21.13-16.38,1.04-31.68,7.93-43.07,19.39-11.63,11.71-18.09,27.2-18.18,43.63-.1,18.38,6.27,34.57,18.42,46.8,12.21,12.3,29.46,19.38,47.3,19.41h.1c16.61,0,32.4-6.7,44.48-18.88,12.21-12.3,19.13-29.12,19-46.1.29-16.6-6.42-33.11-18.41-45.31-12.1-12.31-28.23-19.09-45.43-19.09ZM675.5,419.52c-.02,32.9-25.99,58.85-59.12,59.08h-.4c-15.55,0-30.85-6.54-41.96-17.95-11.2-11.5-17.15-26.51-16.74-42.27.84-32.25,26.93-57.61,59.4-57.74h.24c16.08,0,31.03,6.27,42.11,17.65,10.89,11.19,16.89,26.21,16.48,41.23Z"/>
</g>
<g id="Button_outlines">
<path id="L1" d="M131.54,151.76c28.58-10.54,37.1-12.19,70.13-13.58.62-.03,1.21-.04,1.78-.04,1.7,0,3.23.11,4.69.35,8.92,1.44,14.64,6.2,17.45,14.54-.03,0-.06,0-.08.01,0,.03,0,.06.01.09,2.04.3,3.99.78,5.98.72.02-.03.03-.06.04-.09-3.07-11.83-10.65-18.79-22.53-20.72-1.76-.27-3.6-.41-5.61-.41-.63,0-1.28,0-1.95.04-5.25.22-9.69.44-13.55.68-23.59,1.48-33.63,4.15-58.32,13.26-1.9.75-3.55,1.43-5.01,2.05l-.16.07c-23.9,10.2-24.72,17.05-25.6,24.3-.02.13-.04.25-.05.38l5.76-1.61c.79-5.14,3.38-10.75,27.02-20.05Z"/>
<path id="R1" d="M804.81,159.88c-2.27-2.33-5.34-4.53-9.35-6.83-1.04-.6-2.15-1.17-3.28-1.69-27.77-12.77-52.08-18.98-74.31-18.98-5.21,0-10.43.34-15.56,1.02l-.23.04c-13.31,3.1-21.29,9.84-24.35,20.58-.02,0-.04,0-.07,0,.05.13.1.26.14.39.02.02.05.03.06.05.49-.18,1-.3,1.52-.33,1.52-.11,3.01-.3,4.48-.51.01-.04.03-.08.05-.12.05-.18.11-.36.18-.54-.06,0-.12-.02-.17-.02,2.98-7.21,9.14-11.7,19.28-14.1,4.8-.62,9.73-.94,14.65-.94,21.43,0,44.99,6.05,72.03,18.48.91.41,1.84.89,2.85,1.47,8.44,4.83,11.54,8.54,12.01,14.69-.05,0-.09-.02-.13-.02.06.13.12.25.16.39.02.06.05.12.07.18,1.01.07,1.98.26,2.89.58.87-.31,1.74-.34,2.57-.15-.14-5.55-1.73-9.75-5.49-13.61Z"/>
<path id="L2_outline" d="M115.16,122.1h.4l.52-.07.06-.02c24.15-6.19,52.33-10.12,83.69-11.68h.47c5.39,0,9.3-1.44,11.61-4.29,2.31-2.88,2.86-6.94,1.67-11.99l-9.91-67.79c-3.78-16.37-15.49-24.66-34.81-24.66-2.7,0-5.6.17-8.61.49-14.28,1.66-25.37,7.75-32.97,18.08-2.9,3.94-5.2,8.57-6.83,13.75-7.91,25.05-11.67,47.06-16.02,72.55l-.18,1.03c-.57,5.06.28,8.9,2.55,11.39,1.92,2.12,4.73,3.2,8.34,3.2ZM109.72,108.29l.15-.89c4.32-25.3,8.06-47.16,15.84-71.81,1.46-4.61,3.48-8.7,6.02-12.15,6.76-9.19,16.3-14.38,29.16-15.89,2.88-.31,5.61-.46,8.11-.46,16.53,0,26.12,6.66,29.29,20.26l9.88,67.62.04.18c.81,3.44.62,5.94-.57,7.43-1.21,1.5-3.65,2.25-7.25,2.25h-.69c-31.62,1.56-60.09,5.52-84.61,11.76-1.98-.02-3.35-.48-4.19-1.4-1.15-1.27-1.55-3.69-1.18-6.92Z"/>
<path id="R2_outline" d="M709.98,110.34h.41c31.43,1.56,59.6,5.48,83.74,11.68l.06.02.53.07h.4c3.61,0,6.42-1.08,8.34-3.2,2.27-2.5,3.13-6.33,2.54-11.45l-.17-.97c-4.35-25.49-8.11-47.5-16.02-72.55-1.63-5.18-3.93-9.81-6.83-13.75-7.61-10.33-18.71-16.42-32.99-18.08-3-.33-5.89-.49-8.6-.49-19.32,0-31.03,8.3-34.82,24.74l-9.87,67.63c-1.21,5.13-.66,9.2,1.66,12.08,2.31,2.85,6.22,4.29,11.61,4.29ZM702.09,95.12l.04-.2,9.85-67.49c3.18-13.69,12.77-20.35,29.31-20.35,2.49,0,5.22.16,8.1.46,12.87,1.51,22.41,6.7,29.17,15.89,2.53,3.43,4.55,7.52,6.01,12.15,7.79,24.65,11.52,46.51,15.85,71.82l.14.83c.37,3.3-.03,5.71-1.17,6.97-.85.93-2.22,1.39-4.19,1.4-24.52-6.25-52.99-10.21-84.66-11.77h-.64c-3.56,0-6.07-.77-7.26-2.25-1.2-1.49-1.4-3.99-.56-7.47Z"/>
<path id="Create_outline" d="M218.64,218.94c1.25,5.26,5.9,8.93,11.31,8.93.92,0,1.83-.11,2.69-.32,3.02-.72,5.57-2.57,7.2-5.22,1.63-2.65,2.13-5.76,1.41-8.77l-4.26-17.93c-1.25-5.26-5.9-8.93-11.31-8.93-.9,0-1.81.11-2.7.32-3.02.71-5.57,2.57-7.2,5.21-1.63,2.65-2.13,5.76-1.42,8.78l4.27,17.93ZM220.47,195.11c.86-1.4,2.21-2.37,3.79-2.75.46-.11.93-.16,1.42-.16,2.85,0,5.3,1.93,5.96,4.7l4.27,17.93c.38,1.59.11,3.23-.74,4.62-.86,1.4-2.21,2.38-3.8,2.75-.47.11-.94.17-1.42.17-2.85,0-5.3-1.94-5.96-4.71l-4.27-17.93c-.38-1.59-.11-3.23.75-4.62Z"/>
<path id="Options_outline" d="M677.7,226.85c.91.21,1.82.32,2.69.32,5.4,0,10.05-3.68,11.3-8.94l4.27-17.92c.72-3.02.22-6.15-1.41-8.79-1.63-2.64-4.18-4.5-7.2-5.22-.88-.21-1.79-.31-2.69-.31-5.41,0-10.06,3.67-11.32,8.93l-4.27,17.93c-1.49,6.23,2.38,12.51,8.62,14.01ZM674.43,214.12l4.26-17.92c.66-2.77,3.11-4.71,5.96-4.71.5,0,.96.06,1.42.17,1.59.38,2.94,1.35,3.8,2.74.85,1.38,1.12,3.03.74,4.63l-4.26,17.92c-.66,2.77-3.11,4.71-5.96,4.71-.47,0-.95-.06-1.42-.17-1.59-.38-2.94-1.35-3.8-2.75-.86-1.39-1.12-3.04-.74-4.63Z"/>
<path id="Left_outline" d="M99.81,321.31c1.27.35,2.6.53,3.93.53.42,0,.83-.02,1.25-.06l14.55-1.23c5.53-.47,10.68-2.71,14.76-6.39.68-.6,1.32-1.25,1.94-1.94l8.45-9.44c3.91-4.36,3.85-10.88-.13-15.18l-8.39-9.04c-4.29-4.63-10.11-7.47-16.4-8l-14.78-1.25c-4.13-.36-8.24,1.05-11.29,3.85s-4.8,6.79-4.8,10.93v22.91c0,4.14,1.75,8.12,4.8,10.93,1.75,1.61,3.85,2.76,6.11,3.38ZM93.9,284.09c0-2.79,1.13-5.36,3.18-7.24,1.84-1.69,4.17-2.6,6.63-2.6.28,0,.57.01.86.04l14.78,1.25c5.04.43,9.71,2.71,13.15,6.42l8.4,9.04c2.21,2.39,2.24,6.02.07,8.45l-8.46,9.44c-3.46,3.87-8.22,6.24-13.39,6.68l-14.55,1.23c-2.78.24-5.44-.67-7.49-2.56-2.05-1.88-3.18-4.45-3.18-7.24v-22.91Z"/>
<path id="Right_outline" d="M172.85,287.6c-3.98,4.3-4.04,10.82-.14,15.18l8.27,9.23.19.21c4.32,4.83,10.25,7.78,16.7,8.33l14.55,1.23c.42.04.83.06,1.25.06,1.4,0,2.79-.2,4.12-.58,2.18-.64,4.22-1.76,5.92-3.33,3.05-2.81,4.8-6.79,4.8-10.93v-22.91c0-4.14-1.75-8.13-4.8-10.93-3.05-2.8-7.16-4.2-11.29-3.85l-14.78,1.25c-.74.06-1.48.16-2.2.28-2.7.47-5.27,1.36-7.65,2.64-2.43,1.31-4.64,3.01-6.55,5.08l-8.39,9.04ZM198.06,275.54l14.78-1.25c2.78-.24,5.44.67,7.49,2.56,2.05,1.88,3.18,4.45,3.18,7.24v22.91c0,2.79-1.13,5.36-3.18,7.24-2.05,1.89-4.71,2.8-7.49,2.56l-14.55-1.23c-5.17-.44-9.93-2.81-13.39-6.68l-8.46-9.44c-2.17-2.43-2.14-6.06.07-8.45l8.4-9.04c3.44-3.71,8.11-5.99,13.15-6.42Z"/>
<path id="Down_outline" d="M183.71,334.71c-.13-1.61-.42-3.18-.84-4.71-.05-.16-.1-.32-.15-.47-.22-.68-.45-1.34-.69-2-1.43-3.61-3.69-6.87-6.65-9.52l-9.44-8.46c-4.36-3.9-10.88-3.85-15.18.14l-9.04,8.39c-1.05.97-2,2.01-2.85,3.12-2.94,3.82-4.74,8.41-5.15,13.28l-1.25,14.78c-.15,1.83.03,3.65.54,5.38.62,2.18,1.75,4.21,3.31,5.91,2.8,3.05,6.79,4.8,10.93,4.8h22.91c4.14,0,8.12-1.75,10.93-4.8,2.8-3.05,4.2-7.16,3.85-11.29l-1.23-14.55ZM177.4,357.17c-1.88,2.05-4.45,3.18-7.24,3.18h-22.91c-2.79,0-5.36-1.13-7.25-3.18-1.88-2.05-2.79-4.71-2.55-7.49l1.25-14.78c.43-5.04,2.71-9.71,6.42-13.16l9.04-8.39c1.21-1.12,2.74-1.68,4.27-1.68s2.98.54,4.18,1.61l9.44,8.45c3.87,3.47,6.24,8.23,6.68,13.4l1.23,14.55c.24,2.78-.67,5.44-2.56,7.49Z"/>
<path id="Up_outline" d="M133.72,256.61c.48,5.73,2.88,11.07,6.81,15.22.38.41.78.8,1.19,1.18l9.04,8.39c2.18,2.02,4.92,3.03,7.67,3.03s5.36-.97,7.51-2.9l9.44-8.45c1.35-1.2,2.55-2.53,3.58-3.96,2.51-3.43,4.1-7.44,4.64-11.72.05-.34.08-.68.11-1.02l1.23-14.55c.35-4.13-1.05-8.24-3.85-11.29-2.81-3.05-6.79-4.8-10.93-4.8h-22.91c-4.14,0-8.13,1.75-10.93,4.8-1.53,1.66-2.64,3.64-3.27,5.76-.54,1.77-.74,3.65-.58,5.53l1.25,14.78ZM140,233.92c1.89-2.05,4.46-3.18,7.25-3.18h22.91c2.79,0,5.36,1.13,7.24,3.18,1.89,2.05,2.8,4.71,2.56,7.49l-1.23,14.55c-.44,5.17-2.81,9.93-6.68,13.39l-9.44,8.46c-2.43,2.17-6.06,2.14-8.45-.07l-9.04-8.4c-3.71-3.44-5.99-8.11-6.42-13.15l-1.25-14.78c-.24-2.78.67-5.44,2.55-7.49Z"/>
<path id="Cross_outline" d="M751.82,321.39h-.11c-8.53,0-16.94,3.65-23.08,10.01-5.91,6.13-9.01,13.94-8.72,21.98.63,17.53,13.54,30.1,31.38,30.57h.03c17.47,0,31.35-13.6,31.6-30.96.12-8.05-3.19-16.1-9.08-22.09-5.9-6.01-13.93-9.48-22.02-9.51ZM770.09,370.25c-4.93,5-11.74,7.77-19.16,7.8h-.1c-13.76,0-24.99-11.14-25.03-24.82-.04-13.99,11.13-25.37,25.43-25.91.28-.01.56-.02.84-.02,13.25,0,24.99,11.83,25.12,25.32.06,6.67-2.46,12.93-7.09,17.63Z"/>
<path id="Triangle_outline" d="M751.06,266c.21,0,.41,0,.62,0,8.36,0,16.79-3.45,22.54-9.22,5.71-5.73,8.72-13.49,8.69-22.44-.05-17.11-14.19-31.03-31.52-31.03h-.19c-17.15.1-31.24,14.15-31.4,31.3-.08,8.08,3.16,15.85,9.1,21.87,5.94,6.02,14.02,9.48,22.16,9.51ZM751.32,209.08h.12c13.93.07,25.71,11.83,25.73,25.69.01,6.89-2.62,13.27-7.4,17.98-4.79,4.71-11.3,7.31-18.35,7.32-6.99,0-13.47-2.6-18.25-7.33-4.77-4.72-7.4-11.13-7.39-18.03.01-14.13,11.47-25.63,25.53-25.63Z"/>
<path id="Circle_outline" d="M791.23,272.06c-5.72,5.82-8.79,13.5-8.65,21.62.31,17.85,13.17,30.72,31.27,31.3.3,0,.6.01.9.01,16.35,0,30.24-14.13,30.33-30.86.05-8.44-3.12-16.31-8.92-22.14-5.91-5.94-13.96-9.21-22.68-9.21-8.47,0-16.37,3.3-22.25,9.28ZM839.39,293.77c.02,6.64-2.62,12.96-7.44,17.78-4.93,4.95-11.46,7.67-18.37,7.67,0,0-.14,0-.14,0-13.66-.07-25.18-11.87-25.15-25.75.03-13.65,11.4-25.19,24.83-25.19h.23c14.33.14,26.01,11.57,26.05,25.49Z"/>
<path id="Square_outline" d="M691.99,262.62c-.79-.06-1.6-.09-2.38-.09-8.46,0-16.39,3.35-22.34,9.45-5.74,5.88-8.93,13.76-8.74,21.58-.29,17.51,12.78,31.02,30.42,31.42.26,0,.52,0,.78,0,17.09,0,30.37-12.98,30.9-30.18.51-16.54-12.34-30.97-28.64-32.18ZM707.82,311.38c-4.97,4.99-11.72,7.85-18.53,7.85,0,0-.18,0-.18,0-6.58-.05-12.82-2.74-17.59-7.59-4.87-4.95-7.51-11.43-7.45-18.24.13-13.89,11.46-25.19,25.26-25.19h.38c13.56.21,25.5,12.2,25.56,25.67.03,6.44-2.62,12.65-7.44,17.5Z"/>
<path id="PS_outline" d="M455.4,442.49h.21c14.28-.12,25.41-11.31,25.35-25.47-.06-14.05-11.44-25.51-25.42-25.54-13.74,0-25.39,11.7-25.44,25.55-.03,6.72,2.63,13.09,7.46,17.95,4.82,4.84,11.16,7.51,17.84,7.51ZM441.75,403.34c3.78-3.75,8.85-5.9,13.92-5.9h.13c5.08.04,10.12,2.23,13.84,6.02,3.73,3.8,5.84,8.91,5.78,14.02-.13,10.54-9.08,19.11-20,19.11h0c-10.81-.02-19.6-8.74-19.6-19.43,0-5.03,2.17-10.07,5.94-13.82Z"/>
<path id="Mute_outline" d="M474.24,464.3c-6.6-.06-13.03-.1-19.11-.1-6.51,0-12.67.04-18.82.11-2.55.03-4.67.99-6.15,2.77-1.4,1.7-2.12,4.04-2.07,6.78.07,3.52,1.54,7.73,8.15,7.76,2.64.01,5.27.02,7.91.02h11.06s1.74-.03,1.74-.03c0,0,7.44-.02,9.31-.02,2.62,0,5.25,0,7.86.04h.17c7.21,0,8.38-5.01,8.43-8,.05-2.57-.65-4.8-2.03-6.45-1.54-1.85-3.77-2.85-6.45-2.88ZM473.79,476.4h-2.19c-2.66-.05-2.76-.04-5.42-.04-1.84,0-10.97.03-10.97.03l-5.52.04h-5.9c-2.5,0-5,0-7.5-.02-.93,0-2.31-.66-2.33-2.29-.02-1.53-.18-2.63.18-3.31.57-1.06,1.65-1.24,2.25-1.25,6.08-.11,12.21-.17,18.74-.17,6.06,0,12.48.05,19.09.15,1.14.02,2.07.53,2.55,1.42.21.4.5,1.12.47,2.82-.02,1.47-.69,2.61-3.43,2.61Z"/>
</g>
</g>
<g transform="translate(0,0.65) scale(0.70)">
<g id="Trackpad_infill" >
<path d="M452.27,328.53v-.02c40.22,0,80.43.07,120.65-.07,6.47-.02,13.17.01,19.36-1.58,19.32-4.99,29.59-18.18,33.51-36.6,7.44-34.93,15.37-69.99,21.95-105.09,1.8-9.6-.91-20.7-9.35-26.91-6.53-4.8-15.07-5.38-22.94-6-15.84-1.24-31.65-1.69-47.52-2.33-25.29-1.01-52.32-3.71-77.62-4-59.86-.67-117.65,1.12-177.41,5.09-10.18.68-20.91.48-30.97,2.12-12.6,2.05-25.72,12.82-22.5,31.32,2.97,17.08,7.65,34.26,11,51.28,3.72,18.85,7.61,37.68,11.08,56.58,2.33,12.67,8.64,23.23,19.04,30.56,9.97,7.03,21.64,5.61,33.14,5.62,39.53.06,79.06.02,118.6.02Z"/>
</g>
<g id="Trackpad_outline" >
<path d="M272.25,153.56c-4.52,2.07-9.76,5.6-12.42,9.85-4.66,6.89-3.71,15.95-1.11,26.9l19.74,98.37c4.52,27.51,18.61,41.63,45.84,43.95h.12l235.94.06c-4.66-.08,4.33,0,9.56,0,35.3,0,49.5-11.1,56.07-37.73l20.44-101.35c4.26-16.93,3.93-29.59-6.87-37.71-6.24-4.92-13.49-6.41-21.4-7.26-52.97-4-107.12-6.03-161.4-6.03-.3,0-.6,0-.9,0-2.3-.01-4.58-.02-6.81-.02-.36,0-.72,0-1.08,0-.33,0-.66,0-1,0-3.06.02-6.18.05-9.34.09-48.92.43-98.66,2.47-148.15,6.11-5.85.15-12,2.31-17.24,4.76ZM641.07,192.4l-20.45,101.35c-6.01,24.35-18.98,33.44-50.41,33.44-3.02,0-6.24.2-9.64,0l-235.88-.06c-24.7-2.11-36.7-14.33-40.82-39.44l-19.79-98.56c-2.23-9.46-3.46-17.08.31-22.64,4.07-6.04,11.93-10.09,23.26-12.03,13.9-1.04,27.83-1.95,41.74-2.73,35.06-1.79,70.63-3.02,101.96-3.47.19,0,.38,0,.58,0,1.55-.02,3.08-.04,4.6-.06,6.53-.06,13.04-.09,19.54-.09,46.61.2,104.83,2.34,158.55,5.8,3.45.26,7.4.89,10.36,1.77,18.01,5.87,21.08,16.85,16.09,36.73Z"/>
</g>
</g>
<g id="L3" transform="translate(0,0.65) scale(0.70)">
<g id="L3_infill">
<path d="M295.63,461.03c23.36,0,41.53-17.87,41.57-40.86.03-23.53-18.65-42.27-42.16-42.27-23.09,0-41.82,18.55-41.83,41.45-.01,23.9,18.09,41.69,42.42,41.69Z"/>
</g>
<g id="L3_outline">
<path d="M295.14,466.67c-26.36-.18-47.62-21.47-47.16-47.19.51-28.21,21.76-46.51,47.28-47.04,25.52-.53,47.65,22.07,47.37,47.25-.29,26.05-21.63,47.15-47.5,46.98ZM295.63,461.03c23.36,0,41.53-17.87,41.57-40.86.03-23.53-18.65-42.27-42.16-42.27-23.09,0-41.82,18.55-41.83,41.45-.01,23.9,18.09,41.69,42.42,41.69Z"/>
</g>
</g>
<g id="R3" transform="translate(0,0.65) scale(0.70)">
<g id="R3_infill">
<path d="M658.23,419.7c.55-22.76-17.76-41.19-40.35-41.72-23.43-.55-42.68,18.19-43.29,40.74-.65,23.92,18.7,41.15,39.11,42.46,25.96,1.66,44.96-18.72,44.52-41.48Z"/>
</g>
<g id="R3_outline">
<path d="M664.07,419.78c-.01,26.37-21.16,47.39-47.6,47.32-26.19-.06-48.19-21.58-47.62-47.5.59-26.82,21.12-47.52,48.44-47.45,26.83.08,46.79,21.47,46.78,47.62ZM658.23,419.7c.55-22.76-17.76-41.19-40.35-41.72-23.43-.55-42.68,18.19-43.29,40.74-.65,23.92,18.7,41.15,39.11,42.46,25.96,1.66,44.96-18.72,44.52-41.48Z"/>
</g>
</g>
</svg>
<!-- alt="DualShock 5 Controller" -->
</div>
<br>
</div>
<div class="col-md-6 col-sm-12" style="min-width: 330px;">