pc-switch/docs/_print/index.html

327 lines
33 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html itemscope itemtype=http://schema.org/WebPage lang=en class=no-js>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name=generator content="Hugo 0.91.2">
<link rel=canonical type=text/html href=https://ajfriesen.github.io/pc-switch/docs/>
<link rel=alternate type=application/rss+xml href=https://ajfriesen.github.io/pc-switch/docs/index.xml>
<meta name=robots content="noindex, nofollow">
<link rel="shortcut icon" href=/pc-switch/favicons/favicon.ico>
<link rel=apple-touch-icon href=/pc-switch/favicons/apple-touch-icon-180x180.png sizes=180x180>
<link rel=icon type=image/png href=/pc-switch/favicons/favicon-16x16.png sizes=16x16>
<link rel=icon type=image/png href=/pc-switch/favicons/favicon-32x32.png sizes=32x32>
<link rel=icon type=image/png href=/pc-switch/favicons/android-36x36.png sizes=36x36>
<link rel=icon type=image/png href=/pc-switch/favicons/android-48x48.png sizes=48x48>
<link rel=icon type=image/png href=/pc-switch/favicons/android-72x72.png sizes=72x72>
<link rel=icon type=image/png href=/pc-switch/favicons/android-96x96.png sizes=96x96>
<link rel=icon type=image/png href=/pc-switch/favicons/android-144x144.png sizes=144x144>
<link rel=icon type=image/png href=/pc-switch/favicons/android-192x192.png sizes=192x192>
<title>Documentation | pc-switch</title>
<meta name=description content="Documentation about the pc-switch">
<meta property="og:title" content="Documentation">
<meta property="og:description" content="Documentation about the pc-switch">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ajfriesen.github.io/pc-switch/docs/"><meta property="og:site_name" content="pc-switch">
<meta itemprop=name content="Documentation">
<meta itemprop=description content="Documentation about the pc-switch"><meta name=twitter:card content="summary">
<meta name=twitter:title content="Documentation">
<meta name=twitter:description content="Documentation about the pc-switch">
<link rel=preload href=/pc-switch/scss/main.min.4c2002e5b3f801bee59e62a9193d8722e5028645e8e4e2121259982511175939.css as=style>
<link href=/pc-switch/scss/main.min.4c2002e5b3f801bee59e62a9193d8722e5028645e8e4e2121259982511175939.css rel=stylesheet integrity>
<script src=https://code.jquery.com/jquery-3.6.0.min.js integrity=sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK crossorigin=anonymous></script>
<link rel=stylesheet href=/pc-switch/css/prism.css>
</head>
<body class=td-section>
<header>
<nav class="js-navbar-scroll navbar navbar-expand navbar-dark flex-column flex-md-row td-navbar">
<a class=navbar-brand href=/pc-switch/><span class="navbar-brand__logo navbar-logo"><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500"><g><path style="fill:#fff" d="M116.8525 421.9722c-5.7041.0-10.3442-4.3127-10.3442-9.6129V88.183c0-5.3002 4.6401-9.6117 10.3442-9.6117H320.858c3.0347.0 9.3959.5498 11.7506 2.6302l.3545.3442 58.905 63.2912c2.3101 2.491 2.9202 8.4928 2.9202 11.3184v256.2039c0 5.3002-4.6407 9.6129-10.3436 9.6129H116.8525z"/><g><g><g><path style="fill:#767676" d="M384.4445 423.2066H116.852c-6.3839.0-11.5786-4.8658-11.5786-10.8474V88.1831c0-5.9804 5.1947-10.8461 11.5786-10.8461h204.0062c.377.0 9.2786.0329 12.568 2.9389l.3947.3833 58.9508 63.337c3.2135 3.4652 3.2514 11.7924 3.2514 12.1593v256.2036C396.0231 418.3408 390.8284 423.2066 384.4445 423.2066zM116.5079 411.9189c.0848.0278.1999.0531.3441.0531h267.5925c.1442.0.2581-.0253.3441-.0531V156.1556c-.0076-.9033-.3593-3.7347-.7034-5.0037l-57.6527-61.9416c-1.4651-.3176-4.4533-.6389-5.5742-.6389H116.852c-.143.0-.2594.024-.3441.0531V411.9189zm267.4533-261.149zM327.0321 89.371v.0013V89.371z"/></g></g></g><g><g><path style="fill:#5b7fc0" d="M189.0874 210.1754l.0012-.0012c7.7751.0012 15.0295 4.1862 18.932 10.9234 1.9177 3.3159 2.9305 7.1011 2.9293 10.9378.0 5.8394-2.2733 11.3304-6.4032 15.4604-4.1288 4.1288-9.6186 6.4032-15.458 6.4032s-11.328-2.2733-15.458-6.4032-6.4032-9.6186-6.4056-15.4628c.0012-6.025 2.454-11.4897 6.4116-15.4473C177.5953 212.627 183.0601 210.1742 189.0874 210.1754zm7.993 21.8576c.0012-1.4042-.3687-2.7868-1.063-3.9887-1.4293-2.4684-4.0833-3.9995-6.9299-4.0019-4.4077.0024-7.993 3.5877-7.993 7.993.0 2.1356.832 4.1431 2.3427 5.6539 1.5083 1.5083 3.5159 2.3403 5.6503 2.3415 2.1356.0 4.1443-.8308 5.6539-2.3403S197.0816 234.1722 197.0804 232.033z"/><path style="opacity:.3;fill:#fff" d="M189.0898 210.176c7.7763.0 15.0283 4.1826 18.926 10.9151 1.9201 3.3136 2.9377 7.0988 2.9353 10.9462.0024 12.0643-9.8065 21.8636-21.8613 21.8613-12.0547.0024-21.8636-9.8066-21.8612-21.8613.0-6.0285 2.4516-11.4921 6.4116-15.452C177.5977 212.6276 183.0612 210.176 189.0898 210.176zm7.9941 21.8612c0-1.4078-.3711-2.7892-1.0702-3.9959-1.4269-2.466-4.0797-3.9983-6.924-3.9983-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0024 4.4077 3.5865 7.9918 7.9942 7.9942 2.2027.0 4.2018-.8978 5.6479-2.3439C196.1861 236.239 197.0839 234.2399 197.0839 232.0372z"/><g><defs><path id="SVGID_1_" d="M194.7376 237.6875c-1.4461 1.4461-3.4452 2.3439-5.6479 2.3439-4.4077-.0024-7.9918-3.5865-7.9942-7.9942.0024-4.4125 3.5937-7.999 7.9942-7.9942 2.8443.0 5.497 1.5323 6.924 3.9983.6991 1.2067 1.0702 2.5881 1.0702 3.9959C197.0839 234.2399 196.1861 236.239 194.7376 237.6875z"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" style="overflow:visible"/></clipPath><path style="clip-path:url(#SVGID_2_);fill:#fff" d="M190.0704 225.0237c-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0011 1.9546.7088 3.7452 1.8782 5.1354-1.7447-1.4674-2.8575-3.663-2.8588-6.116.0024-4.4125 3.5936-7.999 7.9942-7.9942 2.3802-1e-4 4.616 1.0833 6.1218 2.8788C193.7885 225.7247 191.9774 225.0237 190.0704 225.0237z"/><path style="opacity:.13;clip-path:url(#SVGID_2_);fill:#020202" d="M190.0704 225.0237c-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0011 1.9546.7088 3.7452 1.8782 5.1354-1.7447-1.4674-2.8575-3.663-2.8588-6.116.0024-4.4125 3.5936-7.999 7.9942-7.9942 2.3802-1e-4 4.616 1.0833 6.1218 2.8788C193.7885 225.7247 191.9774 225.0237 190.0704 225.0237z"/></g><g><defs><path id="SVGID_3_" d="M189.0898 210.176c7.7763.0 15.0283 4.1826 18.926 10.9151 1.9201 3.3136 2.9377 7.0988 2.9353 10.9462.0024 12.0643-9.8065 21.8636-21.8613 21.8613-12.0547.0024-21.8636-9.8066-21.8612-21.8613.0-6.0285 2.4516-11.4921 6.4116-15.452C177.5977 212.6276 183.0612 210.176 189.0898 210.176zm7.9941 21.8612c0-1.4078-.3711-2.7892-1.0702-3.9959-1.4269-2.466-4.0797-3.9983-6.924-3.9983-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0024 4.4077 3.5865 7.9918 7.9942 7.9942 2.2027.0 4.2018-.8978 5.6479-2.3439C196.1861 236.239 197.0839 234.2399 197.0839 232.0372z"/></defs><clipPath id="SVGID_4_"><use xlink:href="#SVGID_3_" style="overflow:visible"/></clipPath><path style="clip-path:url(#SVGID_4_);fill:#5b7fc0" d="M172.6595 215.6045c-3.96 3.96-6.4116 9.4235-6.4116 15.452-.0024 12.0547 9.8066 21.8636 21.8613 21.8612 12.0547.0024 21.8636-9.797 21.8613-21.8612.0024-3.8475-1.0151-7.6326-2.9353-10.9462-3.8977-6.7324-11.1497-10.9151-18.926-10.9151C182.0806 209.1953 176.6171 211.647 172.6595 215.6045z"/></g></g><rect x="198.8952" y="225.1043" style="fill:#5b7fc0" width="122.6266" height="13.8671"/></g><g><path style="fill:#d95140" d="M189.0874 155.7611l.0012-.0012c7.7751.0012 15.0295 4.1862 18.932 10.9234 1.9177 3.3159 2.9305 7.1011 2.9293 10.9378.0 5.8394-2.2733 11.3304-6.4032 15.4604-4.1288 4.1288-9.6186 6.4032-15.458 6.4032s-11.328-2.2733-15.458-6.4032-6.4032-9.6186-6.4056-15.4628c.0012-6.0249 2.454-11.4897 6.4116-15.4473C177.5953 158.2128 183.0601 155.7599 189.0874 155.7611zm7.993 21.8577c.0012-1.4042-.3687-2.7868-1.063-3.9887-1.4293-2.4684-4.0833-3.9995-6.9299-4.0019-4.4077.0024-7.993 3.5877-7.993 7.993.0 2.1356.832 4.1431 2.3427 5.6539 1.5083 1.5083 3.5159 2.3403 5.6503 2.3415 2.1356.0 4.1443-.8308 5.6539-2.3403C196.2508 181.7667 197.0816 179.758 197.0804 177.6188z"/><path style="opacity:.3;fill:#fff" d="M189.0898 155.7617c7.7763.0 15.0283 4.1826 18.926 10.9151 1.9201 3.3135 2.9377 7.0987 2.9353 10.9462.0024 12.0643-9.8065 21.8636-21.8613 21.8613-12.0547.0024-21.8636-9.8066-21.8612-21.8613.0-6.0285 2.4516-11.4921 6.4116-15.452C177.5977 158.2134 183.0612 155.7617 189.0898 155.7617zm7.9941 21.8613c0-1.4078-.3711-2.7892-1.0702-3.9959-1.4269-2.466-4.0797-3.9983-6.924-3.9983-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0024 4.4077 3.5865 7.9918 7.9942 7.9942 2.2027.0 4.2018-.8978 5.6479-2.3439C196.1861 181.8248 197.0839 179.8256 197.0839 177.623z"/><g><defs><path id="SVGID_5_" d="M194.7376 183.2733c-1.4461 1.4461-3.4452 2.3439-5.6479 2.3439-4.4077-.0024-7.9918-3.5865-7.9942-7.9942.0024-4.4125 3.5937-7.9989 7.9942-7.9942 2.8443.0 5.497 1.5323 6.924 3.9983.6991 1.2067 1.0702 2.5881 1.0702 3.9959C197.0839 179.8256 196.1861 181.8248 194.7376 183.2733z"/></defs><clipPath id="SVGID_6_"><use xlink:href="#SVGID_5_" style="overflow:visible"/></clipPath><path style="clip-path:url(#SVGID_6_);fill:#fff" d="M190.0704 170.6095c-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0011 1.9546.7088 3.7452 1.8782 5.1354-1.7447-1.4674-2.8575-3.663-2.8588-6.116.0024-4.4125 3.5936-7.999 7.9942-7.9942 2.3802-1e-4 4.616 1.0833 6.1218 2.8788C193.7885 171.3104 191.9774 170.6095 190.0704 170.6095z"/><path style="opacity:.13;clip-path:url(#SVGID_6_);fill:#020202" d="M190.0704 170.6095c-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0011 1.9546.7088 3.7452 1.8782 5.1354-1.7447-1.4674-2.8575-3.663-2.8588-6.116.0024-4.4125 3.5936-7.999 7.9942-7.9942 2.3802-1e-4 4.616 1.0833 6.1218 2.8788C193.7885 171.3104 191.9774 170.6095 190.0704 170.6095z"/></g><g><defs><path id="SVGID_7_" d="M189.0898 155.7617c7.7763.0 15.0283 4.1826 18.926 10.9151 1.9201 3.3135 2.9377 7.0987 2.9353 10.9462.0024 12.0643-9.8065 21.8636-21.8613 21.8613-12.0547.0024-21.8636-9.8066-21.8612-21.8613.0-6.0285 2.4516-11.4921 6.4116-15.452C177.5977 158.2134 183.0612 155.7617 189.0898 155.7617zm7.9941 21.8613c0-1.4078-.3711-2.7892-1.0702-3.9959-1.4269-2.466-4.0797-3.9983-6.924-3.9983-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0024 4.4077 3.5865 7.9918 7.9942 7.9942 2.2027.0 4.2018-.8978 5.6479-2.3439C196.1861 181.8248 197.0839 179.8256 197.0839 177.623z"/></defs><clipPath id="SVGID_8_"><use xlink:href="#SVGID_7_" style="overflow:visible"/></clipPath><path style="clip-path:url(#SVGID_8_);fill:#d95140" d="M172.6595 161.1903c-3.96 3.96-6.4116 9.4235-6.4116 15.452-.0024 12.0547 9.8066 21.8636 21.8613 21.8613 12.0547.0024 21.8636-9.797 21.8613-21.8613.0024-3.8474-1.0151-7.6326-2.9353-10.9462-3.8977-6.7324-11.1497-10.9151-18.926-10.9151C182.0806 154.7811 176.6171 157.2327 172.6595 161.1903z"/></g><rect x="198.8952" y="170.69" style="fill:#d95140" width="122.6266" height="13.8671"/></g><g><g><path style="fill:#56a55c" d="M189.5379 264.6147l.0012-.0012c7.7751.0012 15.0294 4.1862 18.932 10.9235 1.9177 3.3159 2.9305 7.1011 2.9293 10.9378.0 5.8394-2.2733 11.3304-6.4032 15.4604-4.1288 4.1288-9.6186 6.4032-15.458 6.4032-5.8394.0-11.3281-2.2733-15.458-6.4032-4.13-4.13-6.4032-9.6186-6.4056-15.4628.0012-6.0249 2.454-11.4897 6.4116-15.4472C178.0458 267.0663 183.5105 264.6135 189.5379 264.6147zm7.993 21.8576c.0012-1.4042-.3687-2.7868-1.063-3.9887-1.4293-2.4684-4.0833-3.9995-6.9299-4.0019-4.4077.0024-7.993 3.5877-7.993 7.993.0 2.1356.832 4.1431 2.3427 5.6538 1.5083 1.5083 3.5159 2.3403 5.6503 2.3415 2.1356.0 4.1443-.8308 5.6539-2.3403C196.7013 290.6202 197.5321 288.6115 197.5309 286.4723z"/><path style="opacity:.3;fill:#fff" d="M189.5403 264.6153c7.7763.0 15.0283 4.1826 18.926 10.9151 1.9201 3.3135 2.9377 7.0987 2.9353 10.9462.0024 12.0643-9.8065 21.8636-21.8613 21.8613-12.0547.0024-21.8636-9.8065-21.8612-21.8613.0-6.0285 2.4516-11.492 6.4116-15.452C178.0482 267.0669 183.5117 264.6153 189.5403 264.6153zm7.9941 21.8612c0-1.4078-.3711-2.7892-1.0702-3.9959-1.4269-2.466-4.0797-3.9983-6.924-3.9983-4.4005-.0048-7.9918 3.5817-7.9942 7.9941.0024 4.4077 3.5865 7.9918 7.9942 7.9942 2.2027.0 4.2018-.8978 5.6479-2.3439C196.6366 290.6783 197.5344 288.6792 197.5344 286.4765z"/><g><defs><path id="SVGID_9_" d="M195.1881 292.1268c-1.4461 1.4461-3.4452 2.3439-5.6479 2.3439-4.4077-.0024-7.9918-3.5865-7.9942-7.9942.0024-4.4125 3.5937-7.9989 7.9942-7.9941 2.8443.0 5.497 1.5323 6.924 3.9983.6991 1.2067 1.0702 2.5881 1.0702 3.9959C197.5344 288.6792 196.6366 290.6783 195.1881 292.1268z"/></defs><clipPath id="SVGID_10_"><use xlink:href="#SVGID_9_" style="overflow:visible"/></clipPath><path style="clip-path:url(#SVGID_10_);fill:#fff" d="M190.5209 279.463c-4.4005-.0048-7.9918 3.5817-7.9942 7.9941.0011 1.9547.7088 3.7452 1.8782 5.1354-1.7446-1.4674-2.8575-3.6631-2.8588-6.1161.0024-4.4125 3.5936-7.999 7.9942-7.9941 2.3802-1e-4 4.616 1.0833 6.1218 2.8788C194.239 280.164 192.4279 279.463 190.5209 279.463z"/><path style="opacity:.13;clip-path:url(#SVGID_10_);fill:#020202" d="M190.5209 279.463c-4.4005-.0048-7.9918 3.5817-7.9942 7.9941.0011 1.9547.7088 3.7452 1.8782 5.1354-1.7446-1.4674-2.8575-3.6631-2.8588-6.1161.0024-4.4125 3.5936-7.999 7.9942-7.9941 2.3802-1e-4 4.616 1.0833 6.1218 2.8788C194.239 280.164 192.4279 279.463 190.5209 279.463z"/></g><g><defs><path id="SVGID_11_" d="M189.5403 264.6153c7.7763.0 15.0283 4.1826 18.926 10.9151 1.9201 3.3135 2.9377 7.0987 2.9353 10.9462.0024 12.0643-9.8065 21.8636-21.8613 21.8613-12.0547.0024-21.8636-9.8065-21.8612-21.8613.0-6.0285 2.4516-11.492 6.4116-15.452C178.0482 267.0669 183.5117 264.6153 189.5403 264.6153zm7.9941 21.8612c0-1.4078-.3711-2.7892-1.0702-3.9959-1.4269-2.466-4.0797-3.9983-6.924-3.9983-4.4005-.0048-7.9918 3.5817-7.9942 7.9941.0024 4.4077 3.5865 7.9918 7.9942 7.9942 2.2027.0 4.2018-.8978 5.6479-2.3439C196.6366 290.6783 197.5344 288.6792 197.5344 286.4765z"/></defs><clipPath id="SVGID_12_"><use xlink:href="#SVGID_11_" style="overflow:visible"/></clipPath><path style="clip-path:url(#SVGID_12_);fill:#56a55c" d="M173.11 270.0439c-3.96 3.96-6.4116 9.4235-6.4116 15.452-.0024 12.0547 9.8066 21.8636 21.8613 21.8613 12.0547.0024 21.8636-9.797 21.8613-21.8613.0024-3.8474-1.0151-7.6326-2.9353-10.9462-3.8977-6.7325-11.1497-10.9151-18.926-10.9151C182.5311 263.6346 177.0676 266.0863 173.11 270.0439z"/></g></g><rect x="199.3456" y="279.5436" style="fill:#56a55c" width="122.6266" height="13.8671"/></g><g><g><path style="fill:#f1bc42" d="M189.0874 318.7208l.0012-.0012c7.7751.0012 15.0295 4.1862 18.932 10.9234 1.9177 3.3159 2.9305 7.1011 2.9293 10.9378.0 5.8394-2.2733 11.3305-6.4032 15.4604-4.1288 4.1288-9.6186 6.4032-15.458 6.4032s-11.328-2.2733-15.458-6.4032-6.4032-9.6186-6.4056-15.4628c.0012-6.025 2.454-11.4897 6.4116-15.4472C177.5953 321.1724 183.0601 318.7196 189.0874 318.7208zm7.993 21.8576c.0012-1.4042-.3687-2.7868-1.063-3.9887-1.4293-2.4684-4.0833-3.9995-6.9299-4.0019-4.4077.0024-7.993 3.5877-7.993 7.993.0 2.1356.832 4.1431 2.3427 5.6539 1.5083 1.5083 3.5159 2.3403 5.6503 2.3415 2.1356.0 4.1443-.8308 5.6539-2.3403S197.0816 342.7176 197.0804 340.5784z"/><path style="opacity:.3;fill:#fff" d="M189.0898 318.7214c7.7763.0 15.0283 4.1826 18.926 10.915 1.9201 3.3136 2.9377 7.0988 2.9353 10.9462.0024 12.0643-9.8065 21.8636-21.8613 21.8612-12.0547.0024-21.8636-9.8065-21.8612-21.8612.0-6.0285 2.4516-11.4921 6.4116-15.452C177.5977 321.173 183.0612 318.7214 189.0898 318.7214zm7.9941 21.8612c0-1.4078-.3711-2.7892-1.0702-3.9959-1.4269-2.466-4.0797-3.9983-6.924-3.9983-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0024 4.4077 3.5865 7.9918 7.9942 7.9942 2.2027.0 4.2018-.8978 5.6479-2.3439C196.1861 344.7844 197.0839 342.7853 197.0839 340.5826z"/><g><defs><path id="SVGID_13_" d="M194.7376 346.2329c-1.4461 1.4461-3.4452 2.3439-5.6479 2.3439-4.4077-.0024-7.9918-3.5865-7.9942-7.9942.0024-4.4125 3.5937-7.999 7.9942-7.9942 2.8443.0 5.497 1.5323 6.924 3.9983.6991 1.2067 1.0702 2.5881 1.0702 3.9959C197.0839 342.7853 196.1861 344.7844 194.7376 346.2329z"/></defs><clipPath id="SVGID_14_"><use xlink:href="#SVGID_13_" style="overflow:visible"/></clipPath><path style="clip-path:url(#SVGID_14_);fill:#fff" d="M190.0704 333.5691c-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0011 1.9547.7088 3.7452 1.8782 5.1354-1.7447-1.4674-2.8575-3.6631-2.8588-6.1161.0024-4.4125 3.5936-7.999 7.9942-7.9942 2.3802-1e-4 4.616 1.0834 6.1218 2.8788C193.7885 334.2701 191.9774 333.5691 190.0704 333.5691z"/><path style="opacity:.13;clip-path:url(#SVGID_14_);fill:#020202" d="M190.0704 333.5691c-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0011 1.9547.7088 3.7452 1.8782 5.1354-1.7447-1.4674-2.8575-3.6631-2.8588-6.1161.0024-4.4125 3.5936-7.999 7.9942-7.9942 2.3802-1e-4 4.616 1.0834 6.1218 2.8788C193.7885 334.2701 191.9774 333.5691 190.0704 333.5691z"/></g><g><defs><path id="SVGID_15_" d="M189.0898 318.7214c7.7763.0 15.0283 4.1826 18.926 10.915 1.9201 3.3136 2.9377 7.0988 2.9353 10.9462.0024 12.0643-9.8065 21.8636-21.8613 21.8612-12.0547.0024-21.8636-9.8065-21.8612-21.8612.0-6.0285 2.4516-11.4921 6.4116-15.452C177.5977 321.173 183.0612 318.7214 189.0898 318.7214zm7.9941 21.8612c0-1.4078-.3711-2.7892-1.0702-3.9959-1.4269-2.466-4.0797-3.9983-6.924-3.9983-4.4005-.0048-7.9918 3.5817-7.9942 7.9942.0024 4.4077 3.5865 7.9918 7.9942 7.9942 2.2027.0 4.2018-.8978 5.6479-2.3439C196.1861 344.7844 197.0839 342.7853 197.0839 340.5826z"/></defs><clipPath id="SVGID_16_"><use xlink:href="#SVGID_15_" style="overflow:visible"/></clipPath><path style="clip-path:url(#SVGID_16_);fill:#f1bc42" d="M172.6595 324.15c-3.96 3.96-6.4116 9.4235-6.4116 15.452-.0024 12.0547 9.8066 21.8636 21.8613 21.8612 12.0547.0024 21.8636-9.797 21.8613-21.8612.0024-3.8474-1.0151-7.6327-2.9353-10.9462-3.8977-6.7324-11.1497-10.9151-18.926-10.9151C182.0806 317.7407 176.6171 320.1924 172.6595 324.15z"/></g></g><rect x="198.8952" y="333.6497" style="fill:#f1bc42" width="122.6266" height="13.8671"/></g></g></svg></span><span class=navbar-brand__name>pc-switch</span></a>
<div class="td-navbar-nav-scroll ml-md-auto" id=main_navbar>
<ul class="navbar-nav mt-2 mt-lg-0">
<li class="nav-item mr-4 mb-2 mb-lg-0">
<a class="nav-link active" href=/pc-switch/docs/><span class=active>Documentation</span></a>
</li>
<li class="nav-item mr-4 mb-2 mb-lg-0">
<a class=nav-link href=/pc-switch/web-flasher/><span>Web Flasher</span></a>
</li>
<li class="nav-item mr-4 mb-2 mb-lg-0">
<a class=nav-link href=/pc-switch/community/><span>Community</span></a>
</li>
</ul>
</div>
<div class="navbar-nav d-none d-lg-block">
<div class=td-search>
<div class=td-search__icon></div>
<input type=search class="td-search__input form-control td-search-input" placeholder="Search this site…" aria-label="Search this site…" autocomplete=off>
</div>
</div>
</nav>
</header>
<div class="container-fluid td-outer">
<div class=td-main>
<div class="row flex-xl-nowrap">
<main class="col-12 col-md-9 col-xl-8 pl-md-5" role=main>
<div class=td-content>
<div class="pageinfo pageinfo-primary d-print-none">
<p>
This is the multi-page printable view of this section.
<a href=# onclick="return print(),!1">Click here to print</a>.
</p><p>
<a href=/pc-switch/docs/>Return to the regular view of this page</a>.
</p>
</div>
<h1 class=title>Documentation</h1>
<ul>
<li>1: <a href=#pg-6e17e09fffc1050f46600282def85180>Overview</a></li>
<ul>
</ul>
<li>2: <a href=#pg-8caec5a5c7c46d048924ca3cf120b9bd>How to build the pc-switch</a></li>
<ul>
</ul>
<li>3: <a href=#pg-8efbf7499fe9c7bde8d2c1bb7ff6ee3c>Contribution Guidelines</a></li>
<ul>
</ul>
<li>4: <a href=#pg-aaf060f62c1adf272ecc423f233cf97b>Similar Products</a></li>
<ul>
</ul>
</ul>
<div class=content>
</div>
</div>
<div class=td-content>
<h1 id=pg-6e17e09fffc1050f46600282def85180>1 - Overview</h1>
<div class=lead>What is the pc-switch.</div>
<h2 id=what-is-it>What is it?</h2>
<p>A small PCB that can be connected between your PC front IO and motherboard/mainboard.</p>
<h2 id=what-can-it-do>What can it do?</h2>
<ul>
<li>Power on/off (Shutdown)</li>
<li>Hard shutdown (5-second hold)</li>
<li>Reset</li>
<li>Monitor PC state (on/off)</li>
<li>Still be able to use the front panel connectors buttons for power, reset, and the power led.</li>
<li>Power with 2 header pins. Grab power from your motherboard USB or other connectors.</li>
</ul>
<h2 id=why-do-i-want-it>Why do I want it?</h2>
<p>Help your user know if your project will help them. Useful information can include:</p>
<ul>
<li>
<p><strong>What is it good for?</strong>: What types of problems does your project solve? What are the benefits of using it?</p>
</li>
<li>
<p><strong>What is it not good for?</strong>: For example, point out situations that might intuitively seem suited for your project, but aren&rsquo;t for some reason. Also mention known limitations, scaling issues, or anything else that might let your users know if the project is not for them.</p>
</li>
<li>
<p><strong>What is it <em>not yet</em> good for?</strong>: Highlight any useful features that are coming soon.</p>
</li>
</ul>
</div>
<div class=td-content style=page-break-before:always>
<h1 id=pg-8caec5a5c7c46d048924ca3cf120b9bd>2 - How to build the pc-switch</h1>
<div class=lead>What sol?</div>
<h2 id=prerequisites>Prerequisites</h2>
<p>For DIY you need a basic soldering setup:</p>
<ul>
<li>Soldering iron</li>
<li>solder</li>
<li>optional but highly recommended: A soldering helper/hand</li>
</ul>
<h2 id=parts-needed-for-the-pcb>Parts needed for the PCB</h2>
<ul>
<li>WEMOS D1 mini (The ESP8266-12F from AZDelivery is a popular clone here in Germany)</li>
<li>2 x Optocoupler EL817</li>
<li>2 x Resistor 220 Ohm</li>
<li>Pin header for power pins: 2x1, you can use straight or angled versions</li>
<li>Pin headers for front panel connectors: 3x2 pin headers, you can use straight or angled versions</li>
<li>Pin headers for motherboard:
<ul>
<li>3x2 pin headers, you can use straight or angled versions</li>
</ul>
</li>
</ul>
<h2 id=additional-parts-for-connecting-the-pc-switch>Additional parts for connecting the pc-switch</h2>
<ul>
<li>6 x female-to-female jumper cables to connect to the motherboard</li>
<li>6 x female-to-male jumper cables to connect to the front panel connectors</li>
<li>2 x female-to-female jumper cables to connect to power (use USB or other pins from your motherboard which are always on)</li>
</ul>
<h2 id=ordering-the-pcb>Ordering the PCB</h2>
<p>Download the Gerber file
Got to <a href=https://cart.jlcpcb.com/quote>https://cart.jlcpcb.com/quote</a>
Upload the file and adjust your order</p>
<p><img src=jlcpcb-pc-switch-order.png alt></p>
<h2 id=soldering>Soldering</h2>
<p>Resistors can be soldered either way, you can not do anything wrong here.
Optocouplers need a specific orientation. You need to align the small circles on the board with the circles on the optocoupler.</p>
<p><img src=optocoupler.jpg alt></p>
<h2 id=flashing-the-software>Flashing the software</h2>
<ol>
<li>
<p>I think it goes without saying but you need Home Assistant running somewhere.</p>
</li>
<li>
<p>Install the ESPHome Add-On:</p>
</li>
</ol>
<p><a href="https://my.home-assistant.io/redirect/supervisor_addon/?addon=5c53de3b_esphome"><img src=https://my.home-assistant.io/badges/supervisor_addon.svg alt="Open your Home Assistant instance and show the dashboard of a Supervisor add-on."></a></p>
<ol start=3>
<li>
<p>Plug in the device via USB to your PC or the PC which is running Home Assistant</p>
</li>
<li>
<p>Copy and paste the YAML from GitHub: <a href=https://github.com/ajfriesen/pc-switch>https://github.com/ajfriesen/pc-switch</a></p>
</li>
<li>
<p>Now your pc-switch should pop up automatically in the device section</p>
</li>
</ol>
<p><a href=https://my.home-assistant.io/redirect/devices/><img src=https://my.home-assistant.io/badges/devices.svg alt="Open your Home Assistant instance and show your devices."></a></p>
<h2 id=connecting-to-a-pc-or-server>Connecting to a PC or Server</h2>
<ol>
<li>Check if your motherboard supports always-on USB and enable it if possible(sometimes this setting is in a really weird spot)</li>
<li>Connect your pc-switch to some USB header for power. Check the pins on your motherboard manual. You just need to use 5V and GND. (If you don&rsquo;t have always-on power you can run a USB micro cable into your case as well)</li>
<li>Connect Reset, Power and Power LED with your board.</li>
<li>If you want to use the power button and power led on your PC case then connect those as well.</li>
</ol>
<p>Now enjoy automating your PC.</p>
<ul>
<li>Turn it off or on at a specific time</li>
<li>Add another button (like the Aqara ones) to Home Assistant and use that for power on/off</li>
<li>Connect your voice assistant like Google Home to that switch with Home Assistant (That is what I did🙂)</li>
</ul>
</div>
<div class=td-content style=page-break-before:always>
<h1 id=pg-8efbf7499fe9c7bde8d2c1bb7ff6ee3c>3 - Contribution Guidelines</h1>
<div class=lead>How to contribute to the docs</div>
<div class="pageinfo pageinfo-primary">
<p>These basic sample guidelines assume that your Docsy site is deployed using Netlify and your files are stored in GitHub. You can use the guidelines &ldquo;as is&rdquo; or adapt them with your own instructions: for example, other deployment options, information about your doc project&rsquo;s file structure, project-specific review guidelines, versioning guidelines, or any other information your users might find useful when updating your site. <a href=https://github.com/kubeflow/website/blob/master/README.md>Kubeflow</a> has a great example.</p>
<p>Don&rsquo;t forget to link to your own doc repo rather than our example site! Also make sure users can find these guidelines from your doc repo README: either add them there and link to them from this page, add them here and link to them from the README, or include them in both locations.</p>
</div>
<p>We use <a href=https://gohugo.io/>Hugo</a> to format and generate our website, the
<a href=https://github.com/google/docsy>Docsy</a> theme for styling and site structure,
and <a href=https://www.netlify.com/>Netlify</a> to manage the deployment of the site.
Hugo is an open-source static site generator that provides us with templates,
content organisation in a standard directory structure, and a website generation
engine. You write the pages in Markdown (or HTML if you want), and Hugo wraps them up into a website.</p>
<p>All submissions, including submissions by project members, require review. We
use GitHub pull requests for this purpose. Consult
<a href=https://help.github.com/articles/about-pull-requests/>GitHub Help</a> for more
information on using pull requests.</p>
<h2 id=quick-start-with-netlify>Quick start with Netlify</h2>
<p>Here&rsquo;s a quick guide to updating the docs. It assumes you&rsquo;re familiar with the
GitHub workflow and you&rsquo;re happy to use the automated preview of your doc
updates:</p>
<ol>
<li>Fork the <a href=https://github.com/google/docsy-example>Goldydocs repo</a> on GitHub.</li>
<li>Make your changes and send a pull request (PR).</li>
<li>If you&rsquo;re not yet ready for a review, add &ldquo;WIP&rdquo; to the PR name to indicate
it&rsquo;s a work in progress. (<strong>Don&rsquo;t</strong> add the Hugo property
&ldquo;draft = true&rdquo; to the page front matter, because that prevents the
auto-deployment of the content preview described in the next point.)</li>
<li>Wait for the automated PR workflow to do some checks. When it&rsquo;s ready,
you should see a comment like this: <strong>deploy/netlify — Deploy preview ready!</strong></li>
<li>Click <strong>Details</strong> to the right of &ldquo;Deploy preview ready&rdquo; to see a preview
of your updates.</li>
<li>Continue updating your doc and pushing your changes until you&rsquo;re happy with
the content.</li>
<li>When you&rsquo;re ready for a review, add a comment to the PR, and remove any
&ldquo;WIP&rdquo; markers.</li>
</ol>
<h2 id=updating-a-single-page>Updating a single page</h2>
<p>If you&rsquo;ve just spotted something you&rsquo;d like to change while using the docs, Docsy has a shortcut for you:</p>
<ol>
<li>Click <strong>Edit this page</strong> in the top right hand corner of the page.</li>
<li>If you don&rsquo;t already have an up to date fork of the project repo, you are prompted to get one - click <strong>Fork this repository and propose changes</strong> or <strong>Update your Fork</strong> to get an up to date version of the project to edit. The appropriate page in your fork is displayed in edit mode.</li>
<li>Follow the rest of the <a href=#quick-start-with-netlify>Quick start with Netlify</a> process above to make, preview, and propose your changes.</li>
</ol>
<h2 id=previewing-your-changes-locally>Previewing your changes locally</h2>
<p>If you want to run your own local Hugo server to preview your changes as you work:</p>
<ol>
<li>
<p>Follow the instructions in <a href=/docs/getting-started>Getting started</a> to install Hugo and any other tools you need. You&rsquo;ll need at least <strong>Hugo version 0.45</strong> (we recommend using the most recent available version), and it must be the <strong>extended</strong> version, which supports SCSS.</p>
</li>
<li>
<p>Fork the <a href=https://github.com/google/docsy-example>Goldydocs repo</a> repo into your own project, then create a local copy using <code>git clone</code>. Dont forget to use <code>--recurse-submodules</code> or you wont pull down some of the code you need to generate a working site.</p>
<pre tabindex=0><code>git clone --recurse-submodules --depth 1 https://github.com/google/docsy-example.git
</code></pre></li>
<li>
<p>Run <code>hugo server</code> in the site root directory. By default your site will be available at http://localhost:1313/. Now that you&rsquo;re serving your site locally, Hugo will watch for changes to the content and automatically refresh your site.</p>
</li>
<li>
<p>Continue with the usual GitHub workflow to edit files, commit them, push the
changes up to your fork, and create a pull request.</p>
</li>
</ol>
<h2 id=creating-an-issue>Creating an issue</h2>
<p>If you&rsquo;ve found a problem in the docs, but you&rsquo;re not sure how to fix it yourself, please create an issue in the <a href=https://github.com/google/docsy-example/issues>Goldydocs repo</a>. You can also create an issue about a specific page by clicking the <strong>Create Issue</strong> button in the top right hand corner of the page.</p>
<h2 id=useful-resources>Useful resources</h2>
<ul>
<li><a href=https://www.docsy.dev/docs/>Docsy user guide</a>: All about Docsy, including how it manages navigation, look and feel, and multi-language support.</li>
<li><a href=https://gohugo.io/documentation/>Hugo documentation</a>: Comprehensive reference for Hugo.</li>
<li><a href=https://guides.github.com/activities/hello-world/>Github Hello World!</a>: A basic introduction to GitHub concepts and workflow.</li>
</ul>
</div>
<div class=td-content style=page-break-before:always>
<h1 id=pg-aaf060f62c1adf272ecc423f233cf97b>4 - Similar Products</h1>
<div class=lead>What can your user do with your project?</div>
<p>Silverstone has a couple of products that go in the same direction.</p>
<ul>
<li>Silverstone ES02-USB</li>
<li>Silverstone ES02-PCIE</li>
<li>Silverstone ES03-WiFi</li>
</ul>
<p>The first 2 products work with a remote only.
No easy integration is possible with Home Assistant other than adding an RF transmitter to your setup.</p>
<p>The third one needs a third-party app.
So another app on your phone and an internet connection if I am not mistaken. Another cloud service probably will die in a few years and turn this device into e-waste afterward.</p>
</div>
</main>
</div>
</div>
<footer class="bg-dark py-5 row d-print-none">
<div class="container-fluid mx-sm-5">
<div class=row>
<div class="col-6 col-sm-4 text-xs-center order-sm-2">
<ul class="list-inline mb-0">
<li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=Newsletter aria-label=Newsletter>
<a class=text-white target=_blank rel=noopener href=https://www.ajfriesen.com/#/portal/signup/ aria-label=Newsletter>
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=Twitter aria-label=Twitter>
<a class=text-white target=_blank rel=noopener href=https://twitter.com/mr_ajfriesen aria-label=Twitter>
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=Mastodon aria-label=Mastodon>
<a class=text-white target=_blank rel=noopener href=https://home.social/@ajfriesen aria-label=Mastodon>
<i class="fab fa-mastodon"></i>
</a>
</li>
</ul>
</div>
<div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
<ul class="list-inline mb-0">
<li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=GitHub aria-label=GitHub>
<a class=text-white target=_blank rel=noopener href=https://github.com/ajfriesen/pc-switch aria-label=GitHub>
<i class="fab fa-github"></i>
</a>
</li>
<li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title="Open Source Hardware Lab" aria-label="Open Source Hardware Lab">
<a class=text-white target=_blank rel=noopener href=https://oshwlab.com/ajfriesen/pc-swtich aria-label="Open Source Hardware Lab">
<i class="fa fa-microchip"></i>
</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 text-center py-2 order-sm-2">
<small class=text-white>&copy; 2023 Andrej Friesen All Rights Reserved</small>
</div>
</div>
</div>
</footer>
</div>
<script src=/pc-switch/js/main.min.39b46e2e3986796969a783a80862d428c2c23920326ad70eb64773bfef0b1142.js integrity="sha256-ObRuLjmGeWlpp4OoCGLUKMLCOSAyatcOtkdzv+8LEUI=" crossorigin=anonymous></script>
<script src=/pc-switch/js/prism.js></script>
<script src=/pc-switch/js/tabpane-persist.js></script>
</body>
</html>