https://electricui.com/component---src-templates-template-docs-pag…containers-index-md-12247c650b4435e07c39.js

1"use strict";(self.webpackChunk_electricui_blog=self.webpackChunk_electricui_blog||[]).push([[1263],{11669:function(e,n){var t="angle-right",s=[8250],l="f105",a="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z";n.DF={prefix:"fas",iconName:t,icon:[320,512,s,l,a]},n.yO=n.DF},95638:function(e,n,t){t.r(n),t.d(n,{default:function(){return h}});var s=t(45392),l=t(2784);function a(e){const n=Object.assign({p:"p",h2:"h2",ul:"ul",li:"li",strong:"strong",em:"em",code:"code",span:"span"},(0,s.ah)(),e.components),{CodeBlock:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeBlock",!0),l.createElement(l.Fragment,null,l.createElement(n.p,null,"Wrap components inside a save container to halt hardware writes until a user presses 'Save'."),"\n",l.createElement(n.h2,null,"Background"),"\n",l.createElement(n.p,null,"Sometimes you don't want your settings going straight to the embedded device. A few examples include control systems tuning, manipulating multiple settings for lighting setups, or just being more explicit about when a variable should be written."),"\n",l.createElement(n.p,null,"Electric UI's solution to this UX requirement is save containers."),"\n",l.createElement(n.p,null,'A save container is a logical block which can contain a series of components. Any variable which is modified inside the save container is cached and waits until a master "Save" button has been pressed.'),"\n",l.createElement(n.p,null,"As this design pattern is most likely used with more complex configurations, we offer additional helper functionality to:"),"\n",l.createElement(n.ul,null,"\n",l.createElement(n.li,null,"Reset the variable(s) to their current values on the embedded device."),"\n",l.createElement(n.li,null,"Provide a callback to the embedded device after transmission, to bootstrap a non-volatile write operation."),"\n",l.createElement(n.li,null,l.createElement(n.strong,null,"Coming soon"),": ",l.createElement(n.em,null,"Undo/Redo functionality")),"\n",l.createElement(n.li,null,l.createElement(n.strong,null,"Coming soon"),": ",l.createElement(n.em,null,"Save settings to file and restore them at a later date.")),"\n"),"\n",l.createElement(n.h2,null,"Usage"),"\n",l.createElement(n.p,null,"There are no changes required for use on the microcontroller, though implementing variable storage is left as to the firmware (see the Arduino ",l.createElement(n.code,null,"persistence-eeprom")," example for a very basic demo)."),"\n",l.createElement(n.p,null,"On the UI side, simply import the save container, wrap your existing UI elements with ",l.createElement(n.code,null,"<SaveContainer>")," tags and insert a ",l.createElement(n.code,null,"<SaveButton>")," as demonstrated below:"),"\n",l.createElement(t,null,l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F">SaveContainer</span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">\'</span><span style="color: #886338">@electricui/components-core</span><span style="color: #777777">\'</span></div><div class=\'line\'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #39927F">SaveButton</span><span style="color: #777777">,</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #39927F">ResetButton</span><span style="color: #777777">,</span></div><div class=\'line\'><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">\'</span><span style="color: #886338">@electricui/components-desktop-blueprint</span><span style="color: #777777">\'</span></div>'}})),"\n",l.createElement(t,null,l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #777777">&lt;</span><span style="color: #248725">SaveContainer</span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">  </span><span style="color: #777777">&lt;</span><span style="color: #248725">Button</span></div><div class=\'line\'><span style="color: #1C1C1C">    </span><span style="color: #4481B7">writer</span><span style="color: #777777">={{</span></div><div class=\'line\'><span style="color: #1C1C1C">      bright</span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">255</span><span style="color: #777777">,</span></div><div class=\'line\'><span style="color: #1C1C1C">    </span><span style="color: #777777">}}</span></div><div class=\'line\'><span style="color: #1C1C1C">  </span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">    Set brightness to 255</span></div><div class=\'line\'><span style="color: #1C1C1C">  </span><span style="color: #777777">&lt;/</span><span style="color: #248725">Button</span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">  // Slider, Checkbox, TextInput, etc</span></div><div class=\'line\'><span style="color: #1C1C1C">  </span><span style="color: #777777">&lt;</span><span style="color: #248725">SaveButton</span><span style="color: #777777">&gt;</span><span style="color: #1C1C1C">Save</span><span style="color: #777777">&lt;/</span><span style="color: #248725">SaveButton</span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">  </span><span style="color: #777777">&lt;</span><span style="color: #248725">ResetButton</span><span style="color: #777777">&gt;</span><span style="color: #1C1C1C">Revert</span><span style="color: #777777">&lt;/</span><span style="color: #248725">ResetButton</span><span style="color: #777777">&gt;</span><span style="color: #1C1C1C"> // optional</span></div><div class=\'line\'><span style="color: #777777">&lt;/</span><span style="color: #248725">SaveContainer</span><span style="color: #777777">&gt;</span></div>'}})),"\n",l.createElement(n.p,null,"Try it with any interactive components like sliders, checkboxes or text inputs."),"\n",l.createElement(n.h2,null,"With hooks"),"\n",l.createElement(n.p,null,"Returns an object c

1ontaining a ",l.createElement(n.code,null,"save")," function to write the contained state to hardware, a ",l.createElement(n.code,null,"reset")," method to reset the contained state, and a ",l.createElement(n.code,null,"dirty")," boolean indicating if the internal state differs from the current hardware state."),"\n",l.createElement(t,null,l.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<div class='line'><span style=\"color: undefined\">import { SaveContainer } from '@electricui/components-core'</span></div>"}})),"\n",l.createElement(t,null,l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #7A3E9D">function</span><span style="color: #333333"> </span><span style="color: #3161AA">SaveContainerControls</span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F">save</span><span style="color: #777777">,</span><span style="color: #333333"> </span><span style="color: #39927F">reset</span><span style="color: #777777">,</span><span style="color: #333333"> </span><span style="color: #39927F">dirty</span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA">useSaveContainer</span><span style="color: #333333">()</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #4B83CD">return</span><span style="color: #333333"> (</span></div><div class=\'line\'><span style="color: #333333">    </span><span style="color: #777777">&lt;</span><span style="color: #4B83CD">div</span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;</span><span style="color: #4B83CD">button</span><span style="color: #1C1C1C"> </span><span style="color: #4481B7">onClick</span><span style="color: #777777">={</span><span style="color: #39927F">save</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #4481B7">disabled</span><span style="color: #777777">={!</span><span style="color: #39927F">dirty</span><span style="color: #777777">}&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">        Save</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;/</span><span style="color: #4B83CD">button</span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;</span><span style="color: #4B83CD">button</span><span style="color: #1C1C1C"> </span><span style="color: #4481B7">onClick</span><span style="color: #777777">={</span><span style="color: #39927F">reset</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #4481B7">disabled</span><span style="color: #777777">={!</span><span style="color: #39927F">dirty</span><span style="color: #777777">}&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">        Reset</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;/</span><span style="color: #4B83CD">button</span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">    </span><span style="color: #777777">&lt;/</span><span style="color: #4B83CD">div</span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #333333">  )</span></div><div class=\'line\'><span style="color: #777777">}</span></div>'}})))}var o=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,s.ah)(),e.components);return n?l.createElement(n,e,l.createElement(a,e)):a(e)};t(63281);var r=t(95303),c=t(94229),p=t(10484),i=t(41170),d=(t(68270),t(9876)),u=t(59111),m=t(8711),y=t(6192),v=t(2598);function C(e){const{pageContext:n,data:t}=e;if(!t)return console.error(e,"no data"),null;const a=n,{data:{mdx:{tableOfContents:o}}}=e,C=o.items&&0!==o.items.length?l.createElement("div",null,l.createElement(u.Z,{items:o.items})):null;return l.createElement(i.Z,{location:e.location},l.createElement(p.A,{title:a.frontmatter.title+" - Electric UI",keywords:a.frontmatter.keywords,description:a.frontmatter.description,type:"guide"===a.frontmatter.category?"article":"website",image:a.image,imageHeight:a.imageHeight,imageWidth:a.imageWidth}),l.createElement(c.Z,{location:e.location,currentTitle:a.frontmatter.title,toc:C},a.breadcrumbs?l.createElement(v.O,{breadcrumbs:a.breadcrumbs}):null,l.createElement("h1",{id:(0,y.Z)(a.frontmatter.title)},a.frontmatter.title),l.createElement("main",{style:{display:"block",marginBottom:(0,r.qZ)(1),marginTop:(0,r.qZ)(1)}},l.createElement(d.Z.Provider,{value:n},l.createElement(s.Zo,{components:m.Z},e.children)))))}function h(e){return l.createElement(C,e,l.createElement(o,e))}},2598:function(e,n,t){t.d(n,{O:function(){return c}});var s=t(2784),l=t(68270),a=t(68251),o=t(11669),r=t(17370);function c(e){return s.createElement("div",{className:"breadcrumbs"},e.breadcrumbs.map(((n,t)=>t===e.breadcrumbs.length-1?s.createElement(s.Fragment,null):s.createElement(s.Fragment,null," ",s.createElement(l.rU,{to:n.slug},n.title)," ",s.createElement(r.G,{icon:o.yO,size:"xs"})))),e.breadcrumbs.length>=2?s.createElement(a.BreadcrumbJsonLd,{itemListElements:e.breadcrumbs.map(((e,n)=>({position:n+1,name:e.title,item:"https://electricui.com"+e.slug})))}):null)}},9876:function(e,n,t){const s=t(2784).createContext(null);n.Z=s},8711:function(e,n,t){t.d(n,{Z:function(){return o}});var s=t(90803),l=t(2784);function a(e){const n=(0,l.useRef)(null),t=(0,l.useRef)(null),s=(0,l.useRef)(null),a=(0,l.useCallback)((e=>{if(!n.current)return;if(!t.current)return;if(!s.current)return;const l=e.target;if("DATA-LSP"!==l.nodeName)return;const a=l.getAttribute("lsp");let o=l.getBoundingClientRect(),r=n.current.getBoundingClientRect(),c=o.left-r.left;t.current.style.display="block",t.current.style.top=o.top+20-r.top+"px",t.current.style.left=c+"px",t.current.style.maxWidth=Math.min(3*r.width/4,r.width-c-2)+"px",a&&(s.current.innerHTML=a)}),[]),o=(0,l.useCallback)((e=>{t.current&&(t.current.style.display="none")}),[]);return l.createElement("div",{className:"code-container"},l.createElement("div",{className:"eui-syntax-highlighting line-numbers"},l.createElement("pre",{className:"shiki twoslash"},l.createElement("code",{className:"code-container",onMouseOver:a,onMouseOut:o,ref:n},e.children)),l.createElement("div",{className:"shiki-twoslash-tooltip",ref:t},l.createElement("pre",{className:"shiki twoslash"},l.createElement("code",{ref:s})))))}var o={h1:e=>l.createElement(s.Z,Object.assign({is:"h1"},e)),h2:e=>l.createElement(s.Z,Object.assign({is:"h2"},e)),h3:e=>l.createElement(s.Z,Object.assign({is:"h3"},e)),h4:e=>l.createElement(s.Z,Object.assign({is:"h4"},e)),h5:e=>l.createElement(s.Z,Object.assign({is:"h5"},e)),h6:e=>l.createElement(s.Z,Object.assign({is:"h6"},e)),pre:e=>l.createElement(a,e),code:e=>l.createElement("code",e),table:e=>l.createElement("div",{className:"table-wrapper"},l.createElement("table",e)),CodeBlock:e=>l.createElement(a,e)}}

1,6192:function(e,n){n.Z=function(e){return e.toString().toLowerCase().replace(/\s+/g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"")}},45392:function(e,n,t){t.d(n,{Zo:function(){return r},ah:function(){return a}});var s=t(2784);const l=s.createContext({});function a(e){const n=s.useContext(l);return s.useMemo((()=>"function"==typeof e?e(n):{...n,...e}),[n,e])}const o={};function r({components:e,children:n,disableParentContext:t}){let r;return r=t?"function"==typeof e?e({}):e||o:a(e),s.createElement(l.Provider,{value:r},n)}}}]);
2//# sourceMappingURL=component---src-templates-template-docs-page-js-content-file-path-src-pages-docs-interface-save-containers-index-md-12247c650b4435e07c39.js.map