{"id":638,"date":"2018-01-28T14:17:59","date_gmt":"2018-01-28T13:17:59","guid":{"rendered":"https:\/\/www.allpccloud.com\/?page_id=638"},"modified":"2022-09-28T17:20:00","modified_gmt":"2022-09-28T15:20:00","slug":"illustration","status":"publish","type":"page","link":"https:\/\/www.allpccloud.com\/?page_id=638","title":{"rendered":"Examples"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;||0px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1 style=\"text-align: justify;\">Examples<\/h1>\n<p style=\"text-align: justify;\">Feel free to try our examples! Click on one of the start buttons to start a sample configuration.<\/p>\n<p style=\"text-align: justify;\">Like here it is possible to embed the configurator frontend to your website with <a href=\"https:\/\/www.allpccloud.com\/?page_id=765\">a few lines of JavaScript<\/a> &#8211; a piece of cake for your webdesigner &#8211; to make it available for your customers.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_4,1_2,1_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_image src=&#8221;https:\/\/www.allpccloud.com\/wp-content\/uploads\/2018\/12\/bungalow_3d_model.png&#8221; align_tablet=&#8221;center&#8221; align_phone=&#8221;&#8221; align_last_edited=&#8221;on|desktop&#8221; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; custom_margin=&#8221;||-30px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2 style=\"text-align: justify;\">Prefabricated house<\/h2>\n<p style=\"text-align: justify;\">Demo to configure a house. You can select house types and subtypes, choose equipments (heater, garage&#8230;) and in one case (bungalow &#8211;&gt; bungalow L-form, custom) also freely choose dimensions. For this a downloadable 3D CAD model is generated. Price calculation and generation of offer document is included.<\/p>\n<p style=\"text-align: justify;\">[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_button button_text=&#8221;Start&#8221; module_id=&#8221;btn_start_demo2_en&#8221; _builder_version=&#8221;4.16&#8243; background_layout=&#8221;dark&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_4,1_2,1_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_image src=&#8221;https:\/\/www.allpccloud.com\/wp-content\/uploads\/2021\/01\/title.png&#8221; title_text=&#8221;title&#8221; align_tablet=&#8221;center&#8221; align_phone=&#8221;&#8221; align_last_edited=&#8221;on|desktop&#8221; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; custom_margin=&#8221;||-30px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2 style=\"text-align: justify;\">Facade part<\/h2>\n<p style=\"text-align: justify;\">Configure a facade grid. Select a form and specify dimensions. A CAD part is generated ready for download including a mass and cost estimation. A sample offer document is created for sales purposes.<\/p>\n<p style=\"text-align: justify;\">[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_button button_text=&#8221;Start&#8221; module_id=&#8221;btn_start_demo3_en&#8221; _builder_version=&#8221;4.16&#8243; background_layout=&#8221;dark&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_4,1_2,1_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_image src=&#8221;https:\/\/www.allpccloud.com\/wp-content\/uploads\/2018\/11\/gallery_i02_201811.png&#8221; align_tablet=&#8221;center&#8221; align_phone=&#8221;&#8221; align_last_edited=&#8221;on|desktop&#8221; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2 style=\"text-align: justify;\">Awning<\/h2>\n<p style=\"text-align: justify;\">This demo illustrates the configuration of a tailored awning e.g. for a terrace as an example for building components. A customer can choose between two forms (triangular vs. rectangular), determine the size and choose a\u00a0 color &#8211; the configuration service tracks and verifies the input data, computes the price and triggers the order, all step by step (plugin by plugin), guided by a wizard.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_button button_text=&#8221;Start&#8221; module_id=&#8221;btn_start_demo1_en&#8221; _builder_version=&#8221;4.16&#8243; background_layout=&#8221;dark&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_code _builder_version=&#8221;4.18.0&#8243; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/* The Modal (background overlay) *\/<!-- [et_pb_line_break_holder] -->    .modal-background {<!-- [et_pb_line_break_holder] -->    \tdisplay: none;<!-- [et_pb_line_break_holder] -->      position: fixed;<!-- [et_pb_line_break_holder] -->      z-index: 1;<!-- [et_pb_line_break_holder] -->      padding-top: 10px;<!-- [et_pb_line_break_holder] -->      left: 0;<!-- [et_pb_line_break_holder] -->      top: 0;<!-- [et_pb_line_break_holder] -->      width: 100%;<!-- [et_pb_line_break_holder] -->      height: 100%;<!-- [et_pb_line_break_holder] -->      overflow: auto;<!-- [et_pb_line_break_holder] -->      background-color: rgb(0,0,0);<!-- [et_pb_line_break_holder] -->      background-color: rgba(0,0,0,0.4); \/* black transparent *\/<!-- [et_pb_line_break_holder] -->      animation: mymove 0.4s;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/* Modal dialog box *\/<!-- [et_pb_line_break_holder] -->    .modal-content-dlg {<!-- [et_pb_line_break_holder] -->      display: block;<!-- [et_pb_line_break_holder] -->    \tposition: relative;<!-- [et_pb_line_break_holder] -->      background-color: #fefefe;<!-- [et_pb_line_break_holder] -->      margin: auto;<!-- [et_pb_line_break_holder] -->      margin-top: 80px;<!-- [et_pb_line_break_holder] -->      padding-left: 20px;<!-- [et_pb_line_break_holder] -->      padding-right: 20px;<!-- [et_pb_line_break_holder] -->      border: 1px solid #888;<!-- [et_pb_line_break_holder] -->      width: 840px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/* The Close Button *\/<!-- [et_pb_line_break_holder] -->    .modal-close-dlg {<!-- [et_pb_line_break_holder] -->        color: #aaaaaa;<!-- [et_pb_line_break_holder] -->        float: right;<!-- [et_pb_line_break_holder] -->        font-size: 28px;<!-- [et_pb_line_break_holder] -->        font-weight: bold;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .modal-close-dlg:hover,<!-- [et_pb_line_break_holder] -->    .modal-close-dlg:focus {<!-- [et_pb_line_break_holder] -->        color: #000;<!-- [et_pb_line_break_holder] -->        text-decoration: none;<!-- [et_pb_line_break_holder] -->        cursor: pointer;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->    .modal-content-canvas {<!-- [et_pb_line_break_holder] -->    \tbackground:url(https:\/\/www.allpccloud.com\/wp-content\/uploads\/2019\/07\/allpccloud_splash_anim.gif) center center no-repeat;<!-- [et_pb_line_break_holder] -->  \t}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/* Safari 4.0 - 8.0 *\/<!-- [et_pb_line_break_holder] -->    @-webkit-keyframes mymove {<!-- [et_pb_line_break_holder] -->        from {top: -700px;}<!-- [et_pb_line_break_holder] -->        to {top: 0px;}<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/* Standard syntax *\/<!-- [et_pb_line_break_holder] -->    @keyframes mymove {<!-- [et_pb_line_break_holder] -->        from {top: -700px;}<!-- [et_pb_line_break_holder] -->        to {top: 0px;}<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><!-- Modal window - HTML elements --><!-- [et_pb_line_break_holder] --><\/p>\n<div id=\"modalBox\" class=\"modal-background\"><!-- [et_pb_line_break_holder] -->  <\/p>\n<div id=\"modalCont\" class=\"modal-content-dlg\"><!-- [et_pb_line_break_holder] -->\t  <span id=\"btn_modal_close\" class=\"modal-close-dlg\">\u00d7<\/span><!-- [et_pb_line_break_holder] -->\t\t<\/p>\n<div id=\"canvas_configurator\"  class=\"modal-content-canvas\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p>            <!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- A div that is 1x1 cm --><!-- [et_pb_line_break_holder] --><\/p>\n<div id=\"meas1cm\" style=\"position: absolute; width: 1cm; height: 1cm; left: -100%; top: -100%\"><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- JS part --><!-- [et_pb_line_break_holder] --><script src=\"https:\/\/www.allpccloud.com\/api\/allpccloud_api_1.4.js\"><\/script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  \/\/ Handle button clicks<!-- [et_pb_line_break_holder] -->  jQuery(document).ready(function() {<!-- [et_pb_line_break_holder] -->  \t  jQuery('#btn_start_demo1_en').click(function(e) {<!-- [et_pb_line_break_holder] -->      e.preventDefault();<!-- [et_pb_line_break_holder] -->      startDemo(\"markus\",\"en\");<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t    jQuery('#btn_start_demo1_de').click(function(e) {<!-- [et_pb_line_break_holder] -->      e.preventDefault();<!-- [et_pb_line_break_holder] -->      startDemo(\"markus\",\"de\");<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      jQuery('#btn_start_demo2_en').click(function(e) {<!-- [et_pb_line_break_holder] -->      e.preventDefault();<!-- [et_pb_line_break_holder] -->      startDemo(\"fertighaus\",\"en\");<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      jQuery('#btn_start_demo2_de').click(function(e) {<!-- [et_pb_line_break_holder] -->      e.preventDefault();<!-- [et_pb_line_break_holder] -->      startDemo(\"fertighaus\",\"de\");<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    jQuery('#btn_start_demo3_en').click(function(e) {<!-- [et_pb_line_break_holder] -->      e.preventDefault();<!-- [et_pb_line_break_holder] -->      startDemo(\"fassadenteile\",\"en\");<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      jQuery('#btn_start_demo3_de').click(function(e) {<!-- [et_pb_line_break_holder] -->      e.preventDefault();<!-- [et_pb_line_break_holder] -->      startDemo(\"fassadenteile\",\"de\");<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    \/\/ Close button on modal<!-- [et_pb_line_break_holder] -->    jQuery('#btn_modal_close').click(function(e) {<!-- [et_pb_line_break_holder] -->      var modal = document.getElementById('modalBox');<!-- [et_pb_line_break_holder] -->      modal.style.display = \"none\";<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->\t});<!-- [et_pb_line_break_holder] -->\t<!-- [et_pb_line_break_holder] -->\/\/ Show overlay and start demo<!-- [et_pb_line_break_holder] -->function startDemo(user_name,lang_str)<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->\t\/\/ Compute window width in cm<!-- [et_pb_line_break_holder] -->  var pixwidth = jQuery(document).width();<!-- [et_pb_line_break_holder] -->  var pixpercm = jQuery('#meas1cm').width();<!-- [et_pb_line_break_holder] -->  var cmwidth  = pixwidth\/pixpercm;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  if(cmwidth < 15)<!-- [et_pb_line_break_holder] -->    {<!-- [et_pb_line_break_holder] -->      \/\/ Show configurator in own tab<!-- [et_pb_line_break_holder] -->      allpccloud.OpenBrowserTab(user_name,<!-- [et_pb_line_break_holder] -->  \t\t{<!-- [et_pb_line_break_holder] -->    \t\tforcelang: lang_str<!-- [et_pb_line_break_holder] -->  \t\t});<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  else<!-- [et_pb_line_break_holder] -->    {<!-- [et_pb_line_break_holder] -->      \/\/ Show configurator as overlay modal dialog<!-- [et_pb_line_break_holder] -->  \t\tvar modal = document.getElementById('modalBox');<!-- [et_pb_line_break_holder] -->  \t\tvar canvas_cnf = document.getElementById('canvas_configurator');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \t\t\/\/ Embed configurator<!-- [et_pb_line_break_holder] -->  \t\tjQuery(canvas_cnf).empty();<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  \t\tallpccloud.Create(canvas_cnf,user_name,<!-- [et_pb_line_break_holder] -->  \t\t{<!-- [et_pb_line_break_holder] -->    \t\twidth: 800,<!-- [et_pb_line_break_holder] -->    \t\theight: 600,<!-- [et_pb_line_break_holder] -->    \t\tforcelang: lang_str<!-- [et_pb_line_break_holder] -->  \t\t});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \t\t\/\/ Show modal<!-- [et_pb_line_break_holder] -->\t\t\tmodal.style.display = \"block\";<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Examples Feel free to try our examples! Click on one of the start buttons to start a sample configuration. Like here it is possible to embed the configurator frontend to your website with a few lines of JavaScript &#8211; a piece of cake for your webdesigner &#8211; to make it available for your customers.Prefabricated house [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-638","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.allpccloud.com\/index.php?rest_route=\/wp\/v2\/pages\/638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.allpccloud.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.allpccloud.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.allpccloud.com\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.allpccloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=638"}],"version-history":[{"count":10,"href":"https:\/\/www.allpccloud.com\/index.php?rest_route=\/wp\/v2\/pages\/638\/revisions"}],"predecessor-version":[{"id":1971,"href":"https:\/\/www.allpccloud.com\/index.php?rest_route=\/wp\/v2\/pages\/638\/revisions\/1971"}],"wp:attachment":[{"href":"https:\/\/www.allpccloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}