Template:RidgeRun Linux Camera Drivers/Flow diagram: Difference between revisions

From RidgeRun Developer Wiki
No edit summary
No edit summary
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:#ffffff;
     }
    background-color:#232E3C;
}
#start {
    width:90px;
    height:30px;
    border:1px solid #000;
    margin:auto;
    background-color:#98CEFF;
    border-radius:30px;
    line-height:60px;
    display:inline-block;
    text-align:center;
    overflow: hidden;
    padding: 10px 5px 0;
}
#end {
    width:90px;
    height:25px;
    border:1px solid #000;
    margin:14px;
    background-color:#98CEFF;
     border-radius:30px;
    line-height:60px;
    display:inline-block;
    text-align:center;
    overflow: hidden;
    padding: 10px 5px 0;
}
#start a, #end a {
     display:block;
    height:100%;
    line-height:60px;
    padding:0;
    line-height: 1.2;
    background-color: transparent;
}
#start a:hover, #end a:hover {
    background-color: transparent;
     color: #000;
}
#no2 {
     display:inline;
    border:1px solid #000;
    margin:6px 248px;
    float:left;
}
#no2 a,#no5 a,#no6 a {
    width:84px;
    height:42px;
    padding-top:16px; 
}
#no3 {
    display:inline; 
    border:1px solid #000;
    margin:-60px 248px;
    float:left;
} 
#no3 a {
    width:84px;
    height:50px;
     padding-top:8px;
}
#no4 {
     display: inline-block;
    width: 84px;
    height: 84px;
    background-color: #00000;
    position: relative;
    transform: rotate(45deg);
    border: 1px solid #000;
    box-sizing: border-box;
    margin: 17px 200px;
}
#no4 a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #000;
    background-color: transparent;
    transform: rotate(-45deg);
}
#no4 a:hover {
    background-color: transparent;
    color: #000;
}
#no5 {
    display:inline; 
    border:1px solid #000;
    margin:-102px 380px;
    float:left;
} 
#no6 {
    display:inline; 
    border:1px solid #000;
    margin:13px 248px;
     float:left;
}
#no7 {
    display:inline;
    border:1px solid #000;
    margin:15px 248px;
    float:left;
  }
#no7 a {
     width:84px;
    height:30px;
    padding-top:16px; 
}
#line1 {
    font-size:0;
     width:1px;
    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;
    top: 100%;
    left: -400%;
    transform: translateY(-50%);
}
#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;
}


#line3::after {
     .node {
     content: '';
      background-color: #f0f0f0;
    position: absolute;
      font-weight:bold;
    width: 0;
      border: 1px solid #ccc;
    height: 0;
      border-radius: 15px;
    border-left: 5px solid transparent;
      text-align: center;
    border-right: 5px solid transparent;
      width: 100%;
    border-top: 7px solid #000;
      height: 100%;
    top: 85%;
      min-height: 50px;
    left: -400%;
      display: flex;
    transform: translateY(-50%);
      align-items: center; /* Vertically centers the content */
}
      justify-content: center; /* Horizontally centers the content */
#line4 {
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    font-size:10px;
     }
    display:inline;
    width:1px;
    height:25px;
    color:#fff;
    background-color:#000;
    margin:-16px 289px;
    float:left;
    position: relative;
}
#line4-link {
    font-size: 10px;
    vertical-align: middle;
    margin-left:30px;
    color: #000;
    text-decoration: none;
}
#line4-link:hover {
    background-color: transparent;
    color: #000;
}
#line5 {
    font-size:0;
    display:inline;
    width:25px;
    height:1px;
    color:#fff;
    background-color:#000;
    margin:-75px 348px;
    float:left;
    position: relative;
}
#line5 a:hover {
    background-color: transparent;
    color: #000;
}
#line5::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #000;
    top: 100%;
    left: 100%;
    transform: translateY(-50%) translateX(-10%) rotate(-90deg);
}
#line5-link {
    font-size: 10px;
    vertical-align: middle;
    margin-top: -20px;
    color: #000;
    text-decoration: none;
}
#line6 {
    font-size:0;
    display:inline;
    width:1px;
    height:85px;
    color:#fff;
    background-color:#000;
    margin:-43px 422px;
    float:left;
    position: relative;
}
#line7 {
    font-size:0;
    display:inline;
    width:90px;
    height:1px;
    color:#fff;
    background-color:#000;
    margin:-44px 333px;
    float:left;
    position: relative;
}
#line7::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #000;
    top: 50%;
    left: -1%;
    transform: translateY(-50%) translateX(-10%) rotate(90deg);
}
#line8 {
    font-size:0;
    display:inline;
    width:1px;
    height:25px;
    color:#fff;
    background-color:#000;
    margin:-13px 289px;
    float:left;
    position: relative;
} 
#line9 {
    font-size:0;
     display:inline;
    width:1px;
    height:25px;
    color:#fff;
    background-color:#000;   
    margin:-15px 289px;
    float:left;
    position: relative;
}
.clear {
    clear:both;
}
</style>
<h1>How to navigate the wiki.</h1>


<div id="container">
    .node a {
        color: black;
        text-decoration:none;
    }


  <div id="start"><a>Need a custom driver</a></div>
     .clickable {
  <div id="line1"></div>
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
  <div id="no2">
        cursor: pointer;
     <a href="Expert_Camera_Driver_Services/Services_Provided#Linux_Drivers_Services">
     }
      Check our Linux Driver Services
    </a>
  </div>
  <div id="line2"></div>
  <div id="no3">
    <a href="Available_Camera_Drivers/List_of_Tested_Camera_Sensors">
      Check our Tested Drivers List
    </a>
  </div>
  <div id="line3"></div>
  <div id="no4"><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="Expert_Camera_Driver_Services/Client_Requirements">
      Check the client requirements
    </a>
  </div>
  <div id="no6">
    <a href="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>


    .clickable:hover {
        filter: saturate(80%);
        box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
    }
    .desition-container {
      width:100%;
      height:100%;
      filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
    }
    .desition-container:hover {
        filter: saturate(80%);
        filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.3));
    }
    .desition {
        min-height: 100px;
        /*https://bennettfeely.com/clippy/*/
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    .connector {
      position: relative;
      height: 100%;
      min-height: 30px;
      width: 2px;
      background-color: #000;
    }
    .connector::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #000;
      padding-bottom: 10px;
    }
    .left-connector {
      position: relative;
      height: 2px;  /* Change height to 2px for horizontal line */
      width: 100%;  /* Change width for a horizontal connector */
      background-color: #000;
    }
    .left-connector::after {
      content: "";
      position: absolute;
      top: 50%;  /* Center the arrow vertically */
      left: 0;  /* Position the arrow at the left end */
      transform: translate(-50%, -50%);
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 10px solid #000; /* This creates the left-pointing arrow */
      padding-left: 10px;
    }
    .right-down-arrow {
        background-color: black;
        border: 1px solid;
        width: 100%;
        height: 100%;
        display: flex;
        min-height: 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));
    }
    .right-down-line {
        background-color: black;
        width: 100%;
        height: 100%;
        display: flex;
        min-height: 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));
    }
    .down-arrow {
        background-color: black;
        border: 1px solid;
        width: 100%;
        height: 100%;
        display: flex;
        min-height: 30px;
        /*https://bennettfeely.com/clippy/*/
        clip-path: polygon(
            calc(50% + 2px) 0,
            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) 0);
    }
    .left-arrow {
        background-color: black;
        border: 1px solid;
        width: 100%;
        height: 100%;
        display: flex;
        min-height: 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));
    }
    .horizontal-line {
        background-color: black;
        width: 100%;
        height: 100%;
        display: flex;
        /*https://bennettfeely.com/clippy/*/
        clip-path: polygon(
            0% calc(50% - 2px),
            100% calc(50% - 2px),
            100% calc(50% + 2px),
            0% calc(50% + 2px));
    }
  </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>
}}
}}

Revision as of 16:58, 12 September 2024

Do you need a custom driver?
Check our Linux Driver Services!
Check tested drivers list!
Driver in the list?
YES
NO
Check our hiring process!
Check the client requirements!
Contact Us!
Driver Delivery!

Retrieved from "https://developer.ridgerun.com/wiki/index.php?title=Template:RidgeRun_Linux_Camera_Drivers/Flow_diagram&oldid=58980"