Difference between revisions of "OpenGL Accelerated HTML Overlay/Getting Started/Getting the Code"

From RidgeRun Developer Connection
Jump to: navigation, search
Line 4: Line 4:
  
 
== Getting the Code ==
 
== Getting the Code ==
−
HTML Overlay is RidgeRun's professional product. You can purchase it, with full source code, from the '''ADD LINK HERE''' or using the Shopping Cart:
+
HTML Overlay is RidgeRun's professional product. You can purchase it, with full source code, from the '''[https://shop.ridgerun.com/products/htmloverlay here]''' or using the Shopping Cart:
−
 
 
−
 
 
−
 
 
  
  
 +
<div id='product-component-1689105566002'></div>
 +
<script type="text/javascript">
 +
/*<![CDATA[*/
 +
(function () {
 +
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
 +
  if (window.ShopifyBuy) {
 +
    if (window.ShopifyBuy.UI) {
 +
      ShopifyBuyInit();
 +
    } else {
 +
      loadScript();
 +
    }
 +
  } else {
 +
    loadScript();
 +
  }
 +
  function loadScript() {
 +
    var script = document.createElement('script');
 +
    script.async = true;
 +
    script.src = scriptURL;
 +
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
 +
    script.onload = ShopifyBuyInit;
 +
  }
 +
  function ShopifyBuyInit() {
 +
    var client = ShopifyBuy.buildClient({
 +
      domain: 'ridgerun1.myshopify.com',
 +
      storefrontAccessToken: 'b0ca98633a82de5d2f63cd51f5af30ac',
 +
    });
 +
    ShopifyBuy.UI.onReady(client).then(function (ui) {
 +
      ui.createComponent('product', {
 +
        id: '7858827919547',
 +
        node: document.getElementById('product-component-1689105566002'),
 +
        moneyFormat: '%24%7B%7Bamount%7D%7D',
 +
        options: {
 +
  "product": {
 +
    "styles": {
 +
      "product": {
 +
        "@media (min-width: 601px)": {
 +
          "max-width": "calc(25% - 20px)",
 +
          "margin-left": "20px",
 +
          "margin-bottom": "50px"
 +
        }
 +
      },
 +
      "button": {
 +
        "font-family": "Open Sans, sans-serif",
 +
        "font-weight": "bold",
 +
        "font-size": "18px",
 +
        "padding-top": "17px",
 +
        "padding-bottom": "17px",
 +
        ":hover": {
 +
          "background-color": "#0187a7"
 +
        },
 +
        "background-color": "#0196ba",
 +
        ":focus": {
 +
          "background-color": "#0187a7"
 +
        },
 +
        "border-radius": "5px",
 +
        "padding-left": "50px",
 +
        "padding-right": "50px"
 +
      },
 +
      "quantityInput": {
 +
        "font-size": "18px",
 +
        "padding-top": "17px",
 +
        "padding-bottom": "17px"
 +
      }
 +
    },
 +
    "text": {
 +
      "button": "Add to cart"
 +
    },
 +
    "googleFonts": [
 +
      "Open Sans"
 +
    ]
 +
  },
 +
  "productSet": {
 +
    "styles": {
 +
      "products": {
 +
        "@media (min-width: 601px)": {
 +
          "margin-left": "-20px"
 +
        }
 +
      }
 +
    }
 +
  },
 +
  "modalProduct": {
 +
    "contents": {
 +
      "img": false,
 +
      "imgWithCarousel": true,
 +
      "button": false,
 +
      "buttonWithQuantity": true
 +
    },
 +
    "styles": {
 +
      "product": {
 +
        "@media (min-width: 601px)": {
 +
          "max-width": "100%",
 +
          "margin-left": "0px",
 +
          "margin-bottom": "0px"
 +
        }
 +
      },
 +
      "button": {
 +
        "font-family": "Open Sans, sans-serif",
 +
        "font-weight": "bold",
 +
        "font-size": "18px",
 +
        "padding-top": "17px",
 +
        "padding-bottom": "17px",
 +
        ":hover": {
 +
          "background-color": "#0187a7"
 +
        },
 +
        "background-color": "#0196ba",
 +
        ":focus": {
 +
          "background-color": "#0187a7"
 +
        },
 +
        "border-radius": "5px",
 +
        "padding-left": "50px",
 +
        "padding-right": "50px"
 +
      },
 +
      "quantityInput": {
 +
        "font-size": "18px",
 +
        "padding-top": "17px",
 +
        "padding-bottom": "17px"
 +
      }
 +
    },
 +
    "googleFonts": [
 +
      "Open Sans"
 +
    ]
 +
  },
 +
  "option": {},
 +
  "cart": {
 +
    "styles": {
 +
      "button": {
 +
        "font-family": "Open Sans, sans-serif",
 +
        "font-weight": "bold",
 +
        "font-size": "18px",
 +
        "padding-top": "17px",
 +
        "padding-bottom": "17px",
 +
        ":hover": {
 +
          "background-color": "#0187a7"
 +
        },
 +
        "background-color": "#0196ba",
 +
        ":focus": {
 +
          "background-color": "#0187a7"
 +
        },
 +
        "border-radius": "5px"
 +
      },
 +
      "title": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "header": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "lineItems": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "subtotalText": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "subtotal": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "notice": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "currency": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "close": {
 +
        "color": "#4c4c4c",
 +
        ":hover": {
 +
          "color": "#4c4c4c"
 +
        }
 +
      },
 +
      "empty": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "noteDescription": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "discountText": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "discountIcon": {
 +
        "fill": "#4c4c4c"
 +
      },
 +
      "discountAmount": {
 +
        "color": "#4c4c4c"
 +
      }
 +
    },
 +
    "googleFonts": [
 +
      "Open Sans"
 +
    ]
 +
  },
 +
  "toggle": {
 +
    "styles": {
 +
      "toggle": {
 +
        "font-family": "Open Sans, sans-serif",
 +
        "font-weight": "bold",
 +
        "background-color": "#0196ba",
 +
        ":hover": {
 +
          "background-color": "#0187a7"
 +
        },
 +
        ":focus": {
 +
          "background-color": "#0187a7"
 +
        }
 +
      },
 +
      "count": {
 +
        "font-size": "18px"
 +
      }
 +
    },
 +
    "googleFonts": [
 +
      "Open Sans"
 +
    ]
 +
  },
 +
  "lineItem": {
 +
    "styles": {
 +
      "variantTitle": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "title": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "price": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "fullPrice": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "discount": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "discountIcon": {
 +
        "fill": "#4c4c4c"
 +
      },
 +
      "quantity": {
 +
        "color": "#4c4c4c"
 +
      },
 +
      "quantityIncrement": {
 +
        "color": "#4c4c4c",
 +
        "border-color": "#4c4c4c"
 +
      },
 +
      "quantityDecrement": {
 +
        "color": "#4c4c4c",
 +
        "border-color": "#4c4c4c"
 +
      },
 +
      "quantityInput": {
 +
        "color": "#4c4c4c",
 +
        "border-color": "#4c4c4c"
 +
      }
 +
    }
 +
  }
 +
},
 +
      });
 +
    });
 +
  }
 +
})();
 +
/*]]>*/
 +
</script>
  
 
<noinclude>
 
<noinclude>
 
{{OpenGL Accelerated HTML Overlay/Foot|Getting_Started/Evaluating_HTML_Overlay|Getting_Started/Building_HTML_Overlay}}
 
{{OpenGL Accelerated HTML Overlay/Foot|Getting_Started/Evaluating_HTML_Overlay|Getting_Started/Building_HTML_Overlay}}
 
</noinclude>
 
</noinclude>

Revision as of 15:04, 11 July 2023



Previous: Getting_Started/Evaluating_HTML_Overlay Index Next: Getting_Started/Building_HTML_Overlay
Nvidia-preferred-partner-badge-rgb-for-screen.png
NXP Partner Program Registered Vertical.jpg
OpenGL Accelerated HTML Overlay
Logo-exported.png
Basics
Getting Started
Library User Manual
GStreamer
Examples
Performance
Contact Us




Getting the Code

HTML Overlay is RidgeRun's professional product. You can purchase it, with full source code, from the here or using the Shopping Cart:


<script type="text/javascript"> /*<![CDATA[*/ (function () { 

 var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
 if (window.ShopifyBuy) {
   if (window.ShopifyBuy.UI) {
     ShopifyBuyInit();
   } else {
     loadScript();
   }
 } else {
   loadScript();
 }
 function loadScript() {
   var script = document.createElement('script');
   script.async = true;
   script.src = scriptURL;
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
   script.onload = ShopifyBuyInit;
 }
 function ShopifyBuyInit() {
   var client = ShopifyBuy.buildClient({
     domain: 'ridgerun1.myshopify.com',
     storefrontAccessToken: 'b0ca98633a82de5d2f63cd51f5af30ac',
   });
   ShopifyBuy.UI.onReady(client).then(function (ui) {
     ui.createComponent('product', {
       id: '7858827919547',
       node: document.getElementById('product-component-1689105566002'),
       moneyFormat: '%24%7B%7Bamount%7D%7D',
       options: {
 "product": {
   "styles": {
     "product": {
       "@media (min-width: 601px)": {
         "max-width": "calc(25% - 20px)",
         "margin-left": "20px",
         "margin-bottom": "50px"
       }
     },
     "button": {
       "font-family": "Open Sans, sans-serif",
       "font-weight": "bold",
       "font-size": "18px",
       "padding-top": "17px",
       "padding-bottom": "17px",
       ":hover": {
         "background-color": "#0187a7"
       },
       "background-color": "#0196ba",
       ":focus": {
         "background-color": "#0187a7"
       },
       "border-radius": "5px",
       "padding-left": "50px",
       "padding-right": "50px"
     },
     "quantityInput": {
       "font-size": "18px",
       "padding-top": "17px",
       "padding-bottom": "17px"
     }
   },
   "text": {
     "button": "Add to cart"
   },
   "googleFonts": [
     "Open Sans"
   ]
 },
 "productSet": {
   "styles": {
     "products": {
       "@media (min-width: 601px)": {
         "margin-left": "-20px"
       }
     }
   }
 },
 "modalProduct": {
   "contents": {
     "img": false,
     "imgWithCarousel": true,
     "button": false,
     "buttonWithQuantity": true
   },
   "styles": {
     "product": {
       "@media (min-width: 601px)": {
         "max-width": "100%",
         "margin-left": "0px",
         "margin-bottom": "0px"
       }
     },
     "button": {
       "font-family": "Open Sans, sans-serif",
       "font-weight": "bold",
       "font-size": "18px",
       "padding-top": "17px",
       "padding-bottom": "17px",
       ":hover": {
         "background-color": "#0187a7"
       },
       "background-color": "#0196ba",
       ":focus": {
         "background-color": "#0187a7"
       },
       "border-radius": "5px",
       "padding-left": "50px",
       "padding-right": "50px"
     },
     "quantityInput": {
       "font-size": "18px",
       "padding-top": "17px",
       "padding-bottom": "17px"
     }
   },
   "googleFonts": [
     "Open Sans"
   ]
 },
 "option": {},
 "cart": {
   "styles": {
     "button": {
       "font-family": "Open Sans, sans-serif",
       "font-weight": "bold",
       "font-size": "18px",
       "padding-top": "17px",
       "padding-bottom": "17px",
       ":hover": {
         "background-color": "#0187a7"
       },
       "background-color": "#0196ba",
       ":focus": {
         "background-color": "#0187a7"
       },
       "border-radius": "5px"
     },
     "title": {
       "color": "#4c4c4c"
     },
     "header": {
       "color": "#4c4c4c"
     },
     "lineItems": {
       "color": "#4c4c4c"
     },
     "subtotalText": {
       "color": "#4c4c4c"
     },
     "subtotal": {
       "color": "#4c4c4c"
     },
     "notice": {
       "color": "#4c4c4c"
     },
     "currency": {
       "color": "#4c4c4c"
     },
     "close": {
       "color": "#4c4c4c",
       ":hover": {
         "color": "#4c4c4c"
       }
     },
     "empty": {
       "color": "#4c4c4c"
     },
     "noteDescription": {
       "color": "#4c4c4c"
     },
     "discountText": {
       "color": "#4c4c4c"
     },
     "discountIcon": {
       "fill": "#4c4c4c"
     },
     "discountAmount": {
       "color": "#4c4c4c"
     }
   },
   "googleFonts": [
     "Open Sans"
   ]
 },
 "toggle": {
   "styles": {
     "toggle": {
       "font-family": "Open Sans, sans-serif",
       "font-weight": "bold",
       "background-color": "#0196ba",
       ":hover": {
         "background-color": "#0187a7"
       },
       ":focus": {
         "background-color": "#0187a7"
       }
     },
     "count": {
       "font-size": "18px"
     }
   },
   "googleFonts": [
     "Open Sans"
   ]
 },
 "lineItem": {
   "styles": {
     "variantTitle": {
       "color": "#4c4c4c"
     },
     "title": {
       "color": "#4c4c4c"
     },
     "price": {
       "color": "#4c4c4c"
     },
     "fullPrice": {
       "color": "#4c4c4c"
     },
     "discount": {
       "color": "#4c4c4c"
     },
     "discountIcon": {
       "fill": "#4c4c4c"
     },
     "quantity": {
       "color": "#4c4c4c"
     },
     "quantityIncrement": {
       "color": "#4c4c4c",
       "border-color": "#4c4c4c"
     },
     "quantityDecrement": {
       "color": "#4c4c4c",
       "border-color": "#4c4c4c"
     },
     "quantityInput": {
       "color": "#4c4c4c",
       "border-color": "#4c4c4c"
     }
   }
 }

}, 

     });
   });
 }

})(); /*]]>*/ </script>



Previous: Getting_Started/Evaluating_HTML_Overlay Index Next: Getting_Started/Building_HTML_Overlay



Retrieved from "http://developer.ridgerun.com/wiki/index.php?title=OpenGL_Accelerated_HTML_Overlay/Getting_Started/Getting_the_Code&oldid=49753"