text: (window.webpackJsonp=window.webpackJsonp||[]).push([[121],{176:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return p})),t.d(r,"metadata",(function(){return c})),t.d(r,"rightToc",(function(){return A})),t.d(r,"default",(function(){return s}));var n=t(2),a=t(6),i=(t(0),t(302)),o=t(304),p={title:"Graphics / Path",keywords:["graphics"]},c={unversionedId:"examples/graphics-path",id:"examples/graphics-path",isDocsHomePage:!1,title:"Graphics / Path",description:"Use the graphics API to draw a red square.",source:"@site/docs/examples/graphics-path.md",slug:"/examples/graphics-path",permalink:"/wave/docs/examples/graphics-path",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-path.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Clock",permalink:"/wave/docs/examples/graphics-clock"},next:{title:"Graphics / Turtle",permalink:"/wave/docs/examples/graphics-turtle"}},A=[],l={rightToc:A};function s(e){var r=e.components,p=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},l,p,{components:r,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use the graphics API to draw a red square."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+t(403).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui, graphics as g\n\n# Use relative coords to draw a square, sort of like Python's turtle package.\nred_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n    box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',\n    scene=g.scene(foo=red_square),\n)\n\npage.save()\n")),Object(i.b)("p",null,Object(i.b)("strong",{parentName:"p"},"Tags"),": \u2002",Object(i.b)("a",{href:Object(o.a)("docs/examples/tags#graphics")},"graphics")))}s.isMDXComponent=!0},302:function(e,r,t){"use strict";t.d(r,"a",(function(){return s})),t.d(r,"b",(function(){return S}));var n=t(0),a=t.n(n);function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){i(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var A=a.a.createContext({}),l=function(e){var r=a.a.useContext(A),t=r;return e&&(t="function"==typeof e?e(r):p(p({},r),e)),t},s=function(e){var r=l(e.components);return a.a.createElement(A.Provider,{value:r},e.children)},u={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},g=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,A=c(e,["components","mdxType","originalType","parentName"]),s=l(t),g=n,S=s["".concat(o,".").concat(g)]||s[g]||u[g]||i;return t?a.a.createElement(S,p(p({ref:r},A),{},{components:t})):a.a.createElement(S,p({ref:r},A))}));function S(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var i=t.length,o=new Array(i);o[0]=g;var p={};for(var c in r)hasOwnProperty.call(r,c)&&(p[c]=r[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,o[1]=p;for(var A=2;A<i;A++)o[A]=t[A];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,t)}g.displayName="MDXCreateElement"},303:function(e,r,t){"use strict";var n=t(0),a=t(19);r.a=function(){var e=Object(n.useContext)(a.a);if(null===e)throw new Error("Docusaurus context not provided");return e}},304:function(e,r,t){"use strict";t.d(r,"b",(function(){return i})),t.d(r,"a",(function(){return o}));var n=t(303),a=t(305);function i(){var e=Object(n.a)().siteConfig,r=(e=void 0===e?{}:e).baseUrl,t=void 0===r?"/":r,i=e.url;return{withBaseUrl:function(e,r){return function(e,r,t,n){var i=void 0===n?{}:n,o=i.forcePrependBaseUrl,p=void 0!==o&&o,c=i.absolute,A=void 0!==c&&c;if(!t)return t;if(t.startsWith("#"))return t;if(Object(a.b)(t))return t;if(p)return r+t;var l=t.startsWith(r)?t:r+t.replace(/^\//,"");return A?e+l:l}(i,t,e,r)}}}function o(e,r){return void 0===r&&(r={}),(0,i().withBaseUrl)(e,r)}},305:function(e,r,t){"use strict";function n(e){return!0===/^(\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!n(e)}t.d(r,"b",(function(){return n})),t.d(r,"a",(function(){return a}))},403:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARUAAAD8CAYAAABZ0jAcAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA3OjQ5IFBNIFBEVCumBS8AAANUSURBVHic7daxDcJQFARBY1GxY4ggpmQ/imClL6yZCi5a3W1mZgOI7KsHANciKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAKn76gFXcL4/2/n6rJ7Bj/bnse2PY/WMv+epAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAqdvMzOoRwHV4KkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVJfkOkP8d6gjyUAAAAASUVORK5CYII="}}]);