|
|
(10 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
| {{#tag:html| | | {{#tag:html| |
| <style> | | <style> |
| h1 {
| | /* Styles for flowchart elements */ |
| width:580px; | | .container { |
| font-family:verdana,arial,helvetica,sans-serif; | | width:50%; |
| font-size:18px;
| | display: grid; |
| text-align:center;
| | grid-template-columns: 1fr 1fr 1fr; |
| margin:40px auto;
| | place-items: center; |
| }
| | margin-left: auto; |
| #container {
| | margin-right: auto; |
| width:580px;
| | } |
| font-family:verdana,arial,helvetica,sans-serif;
| | .col-1 { |
| font-size:11px;
| | grid-column: 1; |
| text-align:center;
| | } |
| margin:auto;
| | .col-2 { |
| }
| | grid-column: 2; |
| #container a {
| | } |
| display:block;
| | .col-3 { |
| color:#000;
| | grid-column: 3; |
| text-decoration:none;
| | } |
| background-color:#00000; | | |
| }
| | .span-3 { |
| #container a:hover {
| | grid-column: span 3; |
| color:#000; | | } |
| background-color:#f4f4f4;
| |
| }
| |
| #no1 {
| |
| width:190px;
| |
| line-height:60px;
| |
| border:1px solid #000;
| |
| margin:auto; | |
| }
| |
| #no1 a {
| |
| height:60px; | |
| }
| |
| #start {
| |
| width:90px;
| |
| height:30px;
| |
| border:1px solid #000;
| |
| margin:auto;
| |
| background-color:#98CEFF; /* Light green for terminator blocks */
| |
| border-radius:30px; /* Very round corners */ | |
| line-height:60px; /* Center text vertically */ | |
| display:inline-block; /* Ensure width and height are respected */
| |
| text-align:center; /* Center text horizontally */
| |
| overflow: hidden; /* Ensure background color fits rounded corners */
| |
| padding: 10px 5px 0; | |
| }
| |
| #end {
| |
| width:90px;
| |
| height:25px;
| |
| border:1px solid #000;
| |
| margin:14px;
| |
| background-color:#98CEFF; /* Light green for terminator blocks */
| |
| border-radius:30px; /* Very round corners */
| |
| line-height:60px; /* Center text vertically */
| |
| display:inline-block; /* Ensure width and height are respected */
| |
| text-align:center; /* Center text horizontally */
| |
| overflow: hidden; /* Ensure background color fits rounded corners */
| |
| padding: 10px 5px 0;
| |
| } | |
| #start a, #end a {
| |
| display:block; /* Ensure link fills the block */
| |
| height:100%; /* Ensure link height matches block */ | |
| line-height:60px; /* Center text vertically within link */
| |
| padding:0; /* Remove padding */
| |
| line-height: 1.2;
| |
| background-color: transparent;
| |
| }
| |
| #start a:hover {
| |
| background-color: transparent;
| |
| color: #000; | |
| }
| |
|
| |
|
| #end a:hover {
| | .node { |
| background-color: #94D8F0;
| | background-color: #f0f0f0; |
| color: #000;
| | font-weight:bold; |
| }
| | border: 1px solid #ccc; |
| | border-radius: 15px; |
| | text-align: center; |
| | width: 100%; |
| | height: 100%; |
| | min-height: 50px; |
| | display: flex; |
| | align-items: center; /* Vertically centers the content */ |
| | justify-content: center; /* Horizontally centers the content */ |
| | box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); |
| | } |
|
| |
|
| #line1 {
| | .node a { |
| font-size:0;
| | color: black; |
| width:1px;
| | text-decoration:none; |
| height:25px;
| | } |
| color:#fff;
| |
| background-color:#000;
| |
| margin:-3px auto;
| |
| position: relative;
| |
| }
| |
| #line1::after, #line2::after, #line4::after, #line8::after, #line9::after{
| |
| content: '';
| |
| position: absolute;
| |
| width: 0;
| |
| height: 0;
| |
| border-left: 5px solid transparent; | |
| border-right: 5px solid transparent;
| |
| border-top: 7px solid #000; /* Color of the arrowhead */
| |
| top: 100%;
| |
| left: -400%;
| |
| transform: translateY(-50%); /* Center the arrowhead vertically */
| |
| }
| |
| #line7::after{
| |
| content: '';
| |
| position: absolute;
| |
| width: 0;
| |
| height: 0;
| |
| border-left: 5px solid transparent;
| |
| border-right: 5px solid transparent;
| |
| border-top: 7px solid #000; /* Color of the arrowhead */
| |
| top: 50%;
| |
| left: -1%;
| |
| transform: translateY(-50%) translateX(-10%) rotate(90deg); /* Center the arrowhead vertically */
| |
| }
| |
| #line2 {
| |
| font-size:0;
| |
| width:1px;
| |
| height:25px;
| |
| color:#fff;
| |
| background-color:#000;
| |
| margin:65px auto;
| |
| position: relative;
| |
| }
| |
| #line3 {
| |
| font-size:0;
| |
| display:inline;
| |
| width:1px;
| |
| height:25px;
| |
| color:#fff;
| |
| background-color:#000;
| |
| margin:auto 290px; | |
| float:left;
| |
| position: relative; /* Position relative to contain the pseudo-element */
| |
| } | |
|
| |
|
| #line3::after {
| | .clickable { |
| content: '';
| | transition: background-color 0.3s ease, box-shadow 0.3s ease; |
| position: absolute; | | cursor: pointer; |
| width: 0;
| | } |
| height: 0;
| |
| border-left: 5px solid transparent;
| |
| border-right: 5px solid transparent;
| |
| border-top: 7px solid #000; /* Color of the arrowhead */
| |
| top: 85%;
| |
| left: -400%;
| |
| transform: translateY(-50%); /* Center the arrowhead vertically */
| |
| }
| |
| #line4 {
| |
| font-size:10px;
| |
| display:inline;
| |
| width:1px;
| |
| height:25px;
| |
| color:#fff;
| |
| background-color:#000;
| |
| margin:-16px 289px;
| |
| float:left;
| |
| position: relative;
| |
| }
| |
| #line6 {
| |
| font-size:0;
| |
| display:inline;
| |
| width:1px;
| |
| height:85px;
| |
| color:#fff;
| |
| background-color:#000;
| |
| margin:-43px 422px; | |
| float:left;
| |
| position: relative;
| |
| }
| |
| #line4-link {
| |
| font-size: 10px; /* Adjust font size as needed */
| |
| vertical-align: middle; /* Align text with the line */
| |
| margin-left:30px; /* Space between line and text */
| |
| color: #000; /* Text color */
| |
| text-decoration: none; /* Remove underline from the link */
| |
| }
| |
| #line4-link:hover {
| |
| background-color: transparent; /* Make background transparent on hover to maintain diamond's background color */
| |
| color: #000; /* Change text color on hover if needed */
| |
| }
| |
| #line5-link {
| |
| font-size: 10px; /* Adjust font size as needed */
| |
| vertical-align: middle; /* Align text with the line */
| |
| margin-top: -20px; /* Space between line and text */
| |
| color: #000; /* Text color */
| |
| text-decoration: none; /* Remove underline from the link */
| |
| } | |
|
| |
|
| #line5 {
| | .clickable:hover { |
| font-size:0; | | filter: saturate(80%); |
| display:inline;
| | box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3); |
| width:25px;
| | } |
| height:1px;
| |
| color:#fff;
| |
| background-color:#000;
| |
| margin:-75px 348px;
| |
| float:left;
| |
| position: relative;
| |
| }
| |
| #line5::after{
| |
| content: '';
| |
| position: absolute;
| |
| width: 0;
| |
| height: 0;
| |
| border-left: 5px solid transparent;
| |
| border-right: 5px solid transparent;
| |
| border-top: 7px solid #000; /* Color of the arrowhead */
| |
| top: 100%;
| |
| left: 100%;
| |
| transform: translateY(-50%) translateX(-10%) rotate(-90deg); /* Center the arrowhead vertically */
| |
| }
| |
| #line5 a:hover {
| |
| background-color: transparent; /* Make background transparent on hover to maintain diamond's background color */
| |
| color: #000; /* Change text color on hover if needed */
| |
| }
| |
| #line4 a:hover {
| |
| background-color: transparent; /* Make background transparent on hover to maintain diamond's background color */
| |
| color: #000; /* Change text color on hover if needed */ | |
| } | |
|
| |
|
| #no2 {
| | .desition-container { |
| display: inline-block; | | width:100%; |
| width: 84px; /* Width of the diamond */
| | height:100%; |
| height: 84px; /* Height of the diamond */
| | filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2)); |
| background-color: #00000; /* Background color of the diamond */
| | } |
| position: relative; /* Allows positioning of inner elements */
| |
| transform: rotate(45deg); /* Rotate the diamond shape */
| |
| border: 1px solid #000; /* Border color and thickness */
| |
| box-sizing: border-box; /* Ensures border is included in the dimensions */
| |
| margin: 17px 200px; | |
| } | |
|
| |
|
| #no2 a {
| | .desition-container:hover { |
| display: flex; /* Use flexbox for alignment */
| | filter: saturate(80%); |
| align-items: center; /* Center content vertically */ | | filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.3)); |
| justify-content: center; /* Center content horizontally */
| | } |
| width: 100%; /* Full width of the diamond */
| |
| height: 100%; /* Full height of the diamond */
| |
| text-decoration: none; /* Remove underline from links */
| |
| color: #000; /* Text color */
| |
| background-color: transparent; /* Make background transparent to show the diamond's background color */
| |
| transform: rotate(-45deg); /* Counteract the rotation of the diamond */
| |
| } | |
|
| |
|
| #no2 a:hover {
| | .desition { |
| background-color: transparent; /* Make background transparent on hover to maintain diamond's background color */
| | min-height: 100px; |
| color: #000; /* Change text color on hover if needed */
| | /*https://bennettfeely.com/clippy/*/ |
| } | | clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); |
| | } |
|
| |
|
| | .right-down-arrow { |
| | background-color: black; |
| | border: 1px solid; |
| | width: 100%; |
| | height: 100%; |
| | display: flex; |
| | min-height: 50px; |
| | min-width: 50px; |
| | /*https://bennettfeely.com/clippy/*/ |
| | clip-path: polygon( |
| | 0 calc(50% - 2px), |
| | calc(50% + 2px) calc(50% - 2px), |
| | calc(50% + 2px) calc(100% - 15px), |
| | calc(50% + 7px) calc(100% - 15px), |
| | 50% 100%, |
| | calc(50% - 7px) calc(100% - 15px), |
| | calc(50% - 2px) calc(100% - 15px), |
| | calc(50% - 2px) calc(50% + 2px), |
| | 0 calc(50% + 2px)); |
| | } |
|
| |
|
| #no4 a {
| | .right-down-line { |
| width:84px;
| | background-color: black; |
| height:50px;
| | width: 100%; |
| padding-top:8px;
| | height: 100%; |
| }
| | display: flex; |
| | min-height: 50px; |
| | min-width: 50px; |
| | /*https://bennettfeely.com/clippy/*/ |
| | clip-path: polygon( |
| | 0% calc(50% - 2px), |
| | calc(50% + 2px) calc(50% - 2px), |
| | calc(50% + 2px) 100%, |
| | calc(50% - 2px) 100%, |
| | calc(50% - 2px) calc(50% + 2px), |
| | 0 calc(50% + 2px)); |
| | } |
|
| |
|
| #no8 a {
| | .down-arrow { |
| width:84px; | | background-color: black; |
| height:50px;
| | border: 1px solid; |
| padding-top:8px;
| | width: 100%; |
| }
| | height: 100%; |
| #no3 {
| | display: flex; |
| display:inline;
| | min-height: 30px; |
| border:1px solid #000;
| | /*https://bennettfeely.com/clippy/*/ |
| margin:6px 248px;
| | clip-path: polygon( |
| float:left;
| | calc(50% + 2px) 0, |
| }
| | calc(50% + 2px) calc(100% - 15px), |
| #no3 a,#no5 a,#no6 a {
| | calc(50% + 7px) calc(100% - 15px), |
| width:84px;
| | 50% 100%, |
| height:42px;
| | calc(50% - 7px) calc(100% - 15px), |
| padding-top:16px;
| | calc(50% - 2px) calc(100% - 15px), |
| }
| | calc(50% - 2px) 0); |
| #no7 a {
| | } |
| width:84px;
| |
| height:30px;
| |
| padding-top:16px;
| |
| }
| |
| #no4 {
| |
| display:inline;
| |
| border:1px solid #000;
| |
| margin:-60px 248px;
| |
| float:left;
| |
| }
| |
| #no5 {
| |
| display:inline;
| |
| border:1px solid #000;
| |
| margin:-102px 380px;
| |
| float:left;
| |
| }
| |
| #line7 {
| |
| font-size:0;
| |
| display:inline;
| |
| width:90px;
| |
| height:1px;
| |
| color:#fff;
| |
| background-color:#000;
| |
| margin:-44px 333px;
| |
| float:left;
| |
| position: relative;
| |
| }
| |
| #line8 {
| |
| font-size:0;
| |
| display:inline;
| |
| width:1px;
| |
| height:25px;
| |
| color:#fff;
| |
| background-color:#000;
| |
| margin:-13px 289px;
| |
| float:left;
| |
| position: relative;
| |
| }
| |
| #no6 {
| |
| display:inline;
| |
| border:1px solid #000;
| |
| margin:13px 248px;
| |
| float:left;
| |
| }
| |
| #line9 {
| |
| font-size:0;
| |
| display:inline; | |
| width:1px;
| |
| height:25px;
| |
| color:#fff;
| |
| background-color:#000;
| |
| margin:-15px 289px;
| |
| float:left;
| |
| position: relative;
| |
| }
| |
| #no7 {
| |
| display:inline;
| |
| border:1px solid #000;
| |
| margin:15px 248px;
| |
| float:left;
| |
| }
| |
| .clear {
| |
| clear:both;
| |
| }
| |
| </style>
| |
| <h1>How to navigate the wiki.</h1>
| |
|
| |
|
| <div id="container">
| | .left-arrow { |
| | background-color: black; |
| | border: 1px solid; |
| | width: 100%; |
| | height: 100%; |
| | display: flex; |
| | min-height: 50px; |
| | min-width: 50px; |
| | /*https://bennettfeely.com/clippy/*/ |
| | clip-path: polygon( |
| | 0% 50%, |
| | 15px calc(50% - 7px), |
| | 15px calc(50% - 2px), |
| | 100% calc(50% - 2px), |
| | 100% calc(50% + 2px), |
| | 15px calc(50% + 2px), |
| | 15px calc(50% + 7px)); |
| | } |
|
| |
|
| <div id="start"><a>Need a custom driver</a></div>
| | .horizontal-line { |
| <div id="line1"></div>
| | background-color: black; |
| <div id="no3">
| | width: 100%; |
| <a href="index.php/RidgeRun_Linux_Camera_Drivers/Expert_Camera_Driver_Services/Services_Provided#Linux_Drivers_Services"> | | height: 100%; |
| Check our Linux Driver Services
| | min-height: 50px; |
| </a>
| | min-width: 50px; |
| </div>
| | display: flex; |
| <div id="line2"></div>
| | /*https://bennettfeely.com/clippy/*/ |
| <div id="no4">
| | clip-path: polygon( |
| <a href="index.php/RidgeRun_Linux_Camera_Drivers/Available_Camera_Drivers/List_of_Tested_Camera_Sensors">
| | 0% calc(50% - 2px), |
| Check our Tested Drivers List
| | 100% calc(50% - 2px), |
| </a>
| | 100% calc(50% + 2px), |
| </div>
| | 0% calc(50% + 2px)); |
| <div id="line3"></div>
| | } |
| <div id="no2"><a>Driver in the list?</a></div>
| |
| <div id="line4-link">Yes</div><div id="line4"></div>
| |
| <div id="line5"><div id="line5-link">No</div></div>
| |
| <div id="line6"></div>
| |
| <div id="no5">
| |
| <a href="index.php/RidgeRun_Linux_Camera_Drivers/Expert_Camera_Driver_Services/Client_Requirements">
| |
| Check the client requirements
| |
| </a>
| |
| </div>
| |
| <div id="no6">
| |
| <a href="index.php/RidgeRun_Linux_Camera_Drivers/Available_Camera_Drivers/Custom_Driver_Development#Hiring_Process">
| |
| Check our hiring process
| |
| </a>
| |
| </div>
| |
| <div id="line7"></div>
| |
| <div id="line8"></div>
| |
| <div id="no7">
| |
| <a href="https://www.ridgerun.com/contact?_gl=1*do9ur0*_gcl_au*OTE2NDYzNDc4LjE3MjUzODExODc.">
| |
| Contact Us
| |
| </a>
| |
| </div>
| |
| <div id="line9"></div>
| |
| <div id="end"><a>Driver Delivery</a></div>
| |
| <div class="clear"></div>
| |
|
| |
|
| | </style> |
| | <div class="container"> |
| | <div class="node col-1" style="background-color:#021FE2; color:white;">Do you need a custom driver?</div> |
| | <div class="down-arrow col-1"></div> |
| | <div class="node clickable col-1"><a href="https://developer.ridgerun.com/wiki/index.php/RidgeRun_Linux_Camera_Drivers/Expert_Camera_Driver_Services/Services_Provided#Linux_Drivers_Services">Check our Linux Driver Services!</a></div> |
| | <div class="down-arrow col-1"></div> |
| | <div class="node clickable col-1"><a href="https://developer.ridgerun.com/wiki/index.php/RidgeRun_Linux_Camera_Drivers/Available_Camera_Drivers/List_of_Tested_Camera_Sensors">Check tested drivers list!</a></div> |
| | <div class="down-arrow col-1"></div> |
| | <div class="desition-container col-1"><div class="node desition">Driver in the list?</div></div> |
| | <div class="horizontal-line col-2"></div> |
| | <div class="right-down-line col-3"></div> |
| | <div class="down-arrow col-1"></div> |
| | <div class="down-arrow col-3"></div> |
| | <div class="node col-1" style="background-color:#1ABA3F; color:white;">YES</div> |
| | <div class="node col-3" style="background-color:#EB1E07; color:white;">NO</div> |
| | <div class="down-arrow col-1"></div> |
| | <div class="down-arrow col-3"></div> |
| | <div class="node clickable col-1"><a href="https://developer.ridgerun.com/wiki/index.php/RidgeRun_Linux_Camera_Drivers/Available_Camera_Drivers/Custom_Driver_Development#Hiring_Process">Check our hiring process!</a></div> |
| | <div class="left-arrow col-2"></div> |
| | <div class="node clickable col-3"><a href="https://developer.ridgerun.com/wiki/index.php/RidgeRun_Linux_Camera_Drivers/Expert_Camera_Driver_Services/Client_Requirements">Check the client requirements!</a></div> |
| | <div class="down-arrow col-1"></div> |
| | <div class="node clickable col-1"><a href="https://www.ridgerun.com/contact" target="_blank">Contact Us!</a></div> |
| | <div class="down-arrow col-1"></div> |
| | <div class="node col-1" style="background-color:#021FE2; color:white;">Driver Delivery!</div> |
| </div> | | </div> |
| }} | | }} |