[{"data":1,"prerenderedAt":502},["ShallowReactive",2],{"{\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/inventory-management-demo":3},{"data":4,"headers":479},{"story":5,"cv":461,"rels":462,"links":478},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":453,"full_slug":454,"sort_by_date":30,"position":455,"tag_list":456,"is_startpage":297,"parent_id":457,"meta_data":30,"group_id":458,"first_published_at":459,"release_id":30,"lang":408,"path":30,"alternates":460,"default_full_slug":30,"translated_slugs":30},"Inventory Management Demo","2026-03-27T14:56:46.412Z","2026-04-23T12:28:54.871Z","2026-04-23T12:28:54.950Z",159472871113299,"b0f7e637-33e5-42ef-8891-202db83f4370",{"_uid":13,"body":14,"date":353,"fold":354,"intro":411,"title":6,"gallery":424,"category":437,"metadata":439,"component":443,"demo_link":444,"thumbnail":446,"github_link":448,"last_updated":450,"open_graph_image":451,"include_open_graph":74,"block_search_engines":297},"f50d366a-d67c-4a10-86a7-4b5fc5c9f54e",[15,344],{"gap":16,"_uid":17,"align":16,"count":18,"width":19,"columns":20,"component":343,"remove_padding":74},"","f6f97b29-f4c1-4242-863b-a4543a5a2bbc","column-one","width-full",[21,75,86,90,171,253,286,327],{"_uid":22,"body":23,"alignment":72,"component":73,"is_full_width":74},"8de28e62-2cac-49b9-8930-9b99335e2e43",{"type":24,"content":25},"doc",[26,38,44,51,56],{"type":27,"attrs":28,"content":31},"heading",{"level":29,"textAlign":30},2,null,[32],{"text":33,"type":34,"marks":35},"Overview","text",[36],{"type":37},"bold",{"type":39,"attrs":40,"content":41},"paragraph",{"textAlign":30},[42],{"text":43,"type":34},"Within this demo, users can filter based on stock, manufacturers, and cost of parts, allowing you to visually and intuitivly represent additional part information coming from a database.",{"type":27,"attrs":45,"content":46},{"level":29,"textAlign":30},[47],{"text":48,"type":34,"marks":49},"How to Operate",[50],{"type":37},{"type":39,"attrs":52,"content":53},{"textAlign":30},[54],{"text":55,"type":34},"To operate this demo, simply click on one of the models available in the model browser. From there, you can filter out the parts that are displayed on the screen using the available stock and cost sliders, as well as through the manufacturer filters. You can change the filter render mode, and also change how the color gradient is applied to the model. Lastly, you can select an individual part within the assembly to display its additional information.",{"type":39,"attrs":57,"content":58},{"textAlign":30},[59,61,70],{"text":60,"type":34},"This demo comes with a full ",{"text":62,"type":34,"marks":63},"step-by-step tutorial",[64],{"type":65,"attrs":66},"link",{"href":67,"uuid":30,"anchor":30,"target":68,"linktype":69},"https://docs.techsoft3d.com/hoops/visualize-web/tutorials/inventory-management/intro.html","_blank","url",{"text":71,"type":34}," that will show you how to implement this project yourself.","align-left","copy",true,{"_uid":76,"body":77,"alignment":72,"component":73,"is_full_width":74},"f543c157-d41b-4cc3-bfb5-8a8e65bf10d5",{"type":24,"content":78},[79],{"type":27,"attrs":80,"content":81},{"level":29,"textAlign":30},[82],{"text":83,"type":34,"marks":84},"Demo Walkthrough Video",[85],{"type":37},{"_uid":87,"code":88,"component":89},"75d2d6cc-fb66-4a6b-9f27-2a11781e7ec8","\u003Ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/DyXOj6rZv-s?si=S9jqgi7y_doc56i1\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen>\u003C/iframe>","code",{"_uid":91,"body":92,"alignment":72,"component":73,"is_full_width":74},"de567d9f-5e33-4bf8-a22f-7197ecac474f",{"type":24,"content":93},[94,101],{"type":27,"attrs":95,"content":96},{"level":29,"textAlign":30},[97],{"text":98,"type":34,"marks":99},"How It Was Implemented",[100],{"type":37},{"type":102,"content":103},"bullet_list",[104,116,127,138,149,160],{"type":105,"content":106},"list_item",[107],{"type":39,"attrs":108,"content":109},{"textAlign":30},[110],{"text":111,"type":34,"marks":112},"Setting up the WebViewer",[113],{"type":65,"attrs":114},{"href":115,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://docs.techsoft3d.com/communicator/latest/tutorials/inventory-management/setting-up-the-main-viewer.html",{"type":105,"content":117},[118],{"type":39,"attrs":119,"content":120},{"textAlign":30},[121],{"text":122,"type":34,"marks":123},"Load the model into the assembly tree",[124],{"type":65,"attrs":125},{"href":126,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://docs.techsoft3d.com/communicator/latest/tutorials/inventory-management/loading-models.html#loading-the-model-into-the-assembly-tree",{"type":105,"content":128},[129],{"type":39,"attrs":130,"content":131},{"textAlign":30},[132],{"text":133,"type":34,"marks":134},"Linking to application data",[135],{"type":65,"attrs":136},{"href":137,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://docs.techsoft3d.com/communicator/latest/tutorials/inventory-management/linking-to-application-data.html",{"type":105,"content":139},[140],{"type":39,"attrs":141,"content":142},{"textAlign":30},[143],{"text":144,"type":34,"marks":145},"Creating the display filter",[146],{"type":65,"attrs":147},{"href":148,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://docs.techsoft3d.com/communicator/latest/tutorials/inventory-management/creating-the-display-filter.html",{"type":105,"content":150},[151],{"type":39,"attrs":152,"content":153},{"textAlign":30},[154],{"text":155,"type":34,"marks":156},"Adding color gradients",[157],{"type":65,"attrs":158},{"href":159,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://docs.techsoft3d.com/communicator/latest/tutorials/inventory-management/adding-color-gradients.html",{"type":105,"content":161},[162],{"type":39,"attrs":163,"content":164},{"textAlign":30},[165],{"text":166,"type":34,"marks":167},"Adding UI event listeners",[168],{"type":65,"attrs":169},{"href":170,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://docs.techsoft3d.com/communicator/latest/tutorials/inventory-management/adding-the-UI-event-listeners.html",{"_uid":172,"body":173,"alignment":72,"component":73,"is_full_width":74},"3db68134-7b3a-4873-98b3-16972e7ab12a",{"type":24,"content":174},[175,196],{"type":39,"attrs":176,"content":177},{"textAlign":30},[178,182,192],{"text":179,"type":34,"marks":180},"This demo was created using ",[181],{"type":37},{"text":183,"type":34,"marks":184},"HOOPS Visualize for Web",[185,191],{"type":65,"attrs":186},{"href":187,"uuid":188,"anchor":30,"target":189,"linktype":190},"/developers/products/hoops-visualize","b5115ad7-8d04-4a41-ae62-0680605c897d","_self","story",{"type":37},{"text":193,"type":34,"marks":194}," (formerly HOOPS Communicator).",[195],{"type":37},{"type":102,"content":197},[198,213,227,240],{"type":105,"content":199},[200],{"type":39,"attrs":201,"content":202},{"textAlign":30},[203,205,211],{"text":204,"type":34},"Reference the HOOPS Visualize for Web (formerly HOOPS Communicator) ",{"text":206,"type":34,"marks":207},"Documentation",[208],{"type":65,"attrs":209},{"href":210,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://docs.techsoft3d.com/communicator/latest/",{"text":212,"type":34},".",{"type":105,"content":214},[215],{"type":39,"attrs":216,"content":217},{"textAlign":30},[218,220,226],{"text":219,"type":34},"Sign up for a free ",{"text":221,"type":34,"marks":222},"evaluation",[223],{"type":65,"attrs":224},{"href":225,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://manage.techsoft3d.com/signup?product=communicator",{"text":212,"type":34},{"type":105,"content":228},[229],{"type":39,"attrs":230,"content":231},{"textAlign":30},[232,234],{"text":233,"type":34},"Jump straight into coding with the ",{"text":235,"type":34,"marks":236},"3D Sandbox",[237],{"type":65,"attrs":238},{"href":239,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://3dsandbox.techsoft3d.com/",{"type":105,"content":241},[242],{"type":39,"attrs":243,"content":244},{"textAlign":30},[245,247],{"text":246,"type":34},"Join our ",{"text":248,"type":34,"marks":249},"Community Forum",[250],{"type":65,"attrs":251},{"href":252,"uuid":30,"anchor":30,"target":30,"linktype":69},"https://forum.techsoft3d.com/",{"_uid":254,"body":255,"alignment":72,"component":73,"is_full_width":74},"49bfa3fe-caaf-40b4-8123-f5361a510401",{"type":24,"content":256},[257,264,275],{"type":27,"attrs":258,"content":259},{"level":29,"textAlign":30},[260],{"text":261,"type":34,"marks":262},"Questions or Feedback?",[263],{"type":37},{"type":39,"attrs":265,"content":266},{"textAlign":30},[267,269,274],{"text":268,"type":34},"We are looking for feedback and how this toolkit can be improved to meet your needs! Please connect in our ",{"text":270,"type":34,"marks":271},"forum",[272],{"type":65,"attrs":273},{"href":252,"uuid":30,"anchor":30,"target":68,"linktype":69},{"text":212,"type":34},{"type":39,"attrs":276,"content":277},{"textAlign":30},[278,280],{"text":279,"type":34},"You can also sign up for a 60-day trial of ",{"text":281,"type":34,"marks":282},"HOOPS Visualize. ",[283],{"type":65,"attrs":284},{"href":285,"uuid":30,"anchor":30,"target":189,"linktype":69},"https://developer.techsoft3d.com/hoops/visualize",{"_uid":287,"messages":288,"component":321,"background":322,"remove_padding":74,"is_verticalized":297},"2517b691-8590-46b2-b1a0-c989536a3b36",[289],{"_uid":290,"icon":16,"buttons":291,"content":302,"headline":309,"link_url":16,"metadata":316,"component":319,"icon_size":16,"link_label":16,"headline_heading":320},"1f7a4845-55d4-4520-b973-efe814118e45",[292],{"_uid":293,"href":16,"color":294,"label":295,"action":296,"new_tab":297,"outline":74,"alignment":16,"component":298,"text_link":297,"destination":299},"e25f6918-ec5e-43c9-9ad6-5e4bcf39b279","light","Subscribe","action-modal",false,"element-button",{"id":16,"url":300,"linktype":69,"fieldtype":301,"cached_url":300},"subscribe","multilink",{"type":24,"content":303},[304],{"type":39,"attrs":305,"content":306},{"textAlign":30},[307],{"text":308,"type":34},"We’ll notify you as soon as new projects are available.",{"type":24,"content":310},[311],{"type":39,"attrs":312,"content":313},{"textAlign":30},[314],{"text":315,"type":34},"Be the first to know about new projects",{"_uid":317,"title":16,"plugin":318,"description":16},"0fa59fa4-a396-48fd-8878-1ce90fb5c07c","meta-fields","element-callout-child","heading-h3","element-callout",{"id":323,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":324,"copyright":16,"fieldtype":325,"meta_data":326,"is_external_url":297},72383172008371,"https://a-us.storyblok.com/f/1023536/1350x901/98f768d3c7/mosiac.jpg","asset",{},{"_uid":328,"body":329,"alignment":72,"component":73,"is_full_width":74},"ed21b4a6-d00f-4e0d-a54d-08aa82d4d29d",{"type":24,"content":330},[331],{"type":39,"attrs":332,"content":333},{"textAlign":30},[334,336,342],{"text":335,"type":34},"Need to contact us? Email us at ",{"text":337,"type":34,"marks":338},"labs@techsoft3d.com",[339],{"type":65,"attrs":340},{"href":337,"uuid":30,"anchor":30,"target":189,"linktype":341},"email",{"text":212,"type":34},"columns",{"id":300,"_uid":345,"items":346,"component":352},"ca556064-0fa5-4110-8395-86e3f005ea32",[347],{"id":348,"_uid":349,"component":350,"business_unit":351},"dbdcd35d-8954-4b0d-9902-999e4cd25928","f78173e1-09c9-45b4-92d3-445b190c5ada","hubspot-form","toolkits","modal","2023-06-27 00:00",[355],{"_uid":356,"source":357,"component":410},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":358,"created_at":359,"published_at":360,"updated_at":361,"id":362,"uuid":363,"content":364,"slug":401,"full_slug":402,"sort_by_date":30,"position":403,"tag_list":404,"is_startpage":297,"parent_id":405,"meta_data":30,"group_id":406,"first_published_at":407,"release_id":30,"lang":408,"path":30,"alternates":409,"default_full_slug":30,"translated_slugs":30,"_stopResolving":74},"Main Navigation","2025-04-09T14:04:01.876Z","2026-03-10T15:15:52.184Z","2026-04-14T21:06:12.239Z",27565407,"c5f4a23f-ca2c-41d7-946b-6822d34565a0",{"_uid":365,"items":366,"component":400},"8915070e-32eb-476d-b215-1c92ebdad15c",[367,382],{"_uid":368,"left_nav":16,"messages":369,"component":381,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[370,376],{"_uid":371,"icon":372,"link":373,"target":16,"message":374,"component":375},"87585227-383a-48e2-a5e5-1541d3b4b65a","tdesign:user-talk-1","/contact","Have questions about our SDKs or enterprise applications? Talk to a Tech Soft 3D expert","element-notice-child",{"_uid":377,"icon":378,"link":379,"target":16,"message":380,"component":375},"45ffc4c7-d6cf-4d3c-9606-ec4154852aef","hugeicons:artificial-intelligence-04","/developers/products/hoops-ai","Check out our newest SDK, HOOPS AI, a framework for preparing CAD data for ML workflows","element-notice",{"_uid":383,"menu":384,"component":399,"has_notice":74},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[385,390,393,396],{"url":386,"_uid":387,"label":388,"new_tab":297,"component":389},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","SDKs for Developers","top-menu-child",{"url":386,"_uid":391,"label":392,"new_tab":297,"component":389,"style_as_button":297},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","Apps for Businesses",{"url":386,"_uid":394,"label":395,"new_tab":297,"component":389,"style_as_button":297},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","Company",{"url":386,"_uid":397,"label":398,"new_tab":297,"component":389,"style_as_button":74},"f2040cd1-8c5b-4dcf-8ee1-5b56049d0fe2","Support","top","global","main-navigation","global/main-navigation",-30,[],27501948,"998e76b0-7b0e-4635-8abf-c9db0f0bf29c","2025-04-09T15:16:40.189Z","default",[],"reference",{"type":24,"content":412},[413],{"type":39,"attrs":414,"content":415},{"textAlign":30},[416,418,422],{"text":417,"type":34},"This demo showcases how ",{"text":183,"type":34,"marks":419},[420],{"type":65,"attrs":421},{"href":187,"uuid":188,"anchor":30,"target":189,"linktype":190},{"text":423,"type":34}," (formerly HOOPS Communicator) can be used to visualize information from an external database in the browser.",[425,431],{"id":426,"alt":427,"name":16,"focus":16,"title":428,"source":16,"filename":429,"copyright":16,"fieldtype":325,"meta_data":430},159475726753543,"3D CAD model of motorbike in inventory management demo","3D Motorbike in Inventory Management","https://a-us.storyblok.com/f/1023536/1800x1012/897472fbbd/inventory-management-demo-2.jpg",{"alt":427,"title":428,"source":16,"copyright":16},{"id":432,"alt":433,"name":16,"focus":16,"title":434,"source":16,"filename":435,"copyright":16,"fieldtype":325,"meta_data":436},159475726765832,"Drill CAD model in inventory management 3D demo","Inventory Management 3D Model","https://a-us.storyblok.com/f/1023536/1654x1103/68a2e25b5d/inventory-management-demo-1.jpg",{"alt":433,"title":434,"source":16,"copyright":16},[438],"hoopsVisualize",{"_uid":440,"title":441,"plugin":318,"description":442},"54a2ef1e-aa5c-4f3b-9b9d-f866451ee8e6","Inventory Management | Tech Soft 3D Labs","This demo showcases how HOOPS Visualize for Web (formerly HOOPS Communicator) can be used to visualize information from an external database in the browser","lab",{"id":16,"url":445,"linktype":69,"fieldtype":301,"cached_url":445},"https://techsoft3d.github.io/inventory-management/",{"id":432,"alt":433,"name":16,"focus":16,"title":434,"source":16,"filename":435,"copyright":16,"fieldtype":325,"meta_data":447,"is_external_url":297},{"alt":433,"title":434,"source":16,"copyright":16},{"id":16,"url":449,"linktype":69,"fieldtype":301,"cached_url":449},"https://github.com/techsoft3d/inventory-management","Tuesday, June 27, 2023",{"id":432,"alt":433,"name":16,"focus":16,"title":434,"source":16,"filename":435,"copyright":16,"fieldtype":325,"meta_data":452,"is_external_url":297},{"alt":433,"title":434,"source":16,"copyright":16},"inventory-management-demo","developers/labs/inventory-management-demo",-220,[],99359039112762,"a53444eb-25e6-4975-a83b-ff9023bff472","2026-04-03T18:44:11.695Z",[],1776956007,[463],{"name":358,"created_at":359,"published_at":360,"updated_at":361,"id":362,"uuid":363,"content":464,"slug":401,"full_slug":402,"sort_by_date":30,"position":403,"tag_list":476,"is_startpage":297,"parent_id":405,"meta_data":30,"group_id":406,"first_published_at":407,"release_id":30,"lang":408,"path":30,"alternates":477,"default_full_slug":30,"translated_slugs":30},{"_uid":365,"items":465,"component":400},[466,470],{"_uid":368,"left_nav":16,"messages":467,"component":381,"right_nav":16},[468,469],{"_uid":371,"icon":372,"link":373,"target":16,"message":374,"component":375},{"_uid":377,"icon":378,"link":379,"target":16,"message":380,"component":375},{"_uid":383,"menu":471,"component":399,"has_notice":74},[472,473,474,475],{"url":386,"_uid":387,"label":388,"new_tab":297,"component":389},{"url":386,"_uid":391,"label":392,"new_tab":297,"component":389,"style_as_button":297},{"url":386,"_uid":394,"label":395,"new_tab":297,"component":389,"style_as_button":297},{"url":386,"_uid":397,"label":398,"new_tab":297,"component":389,"style_as_button":74},[],[],[],{"cache-control":480,"connection":481,"content-encoding":482,"content-type":483,"date":484,"etag":485,"referrer-policy":486,"sb-be-version":487,"server":488,"strict-transport-security":489,"transfer-encoding":490,"vary":491,"via":492,"x-amz-cf-id":493,"x-amz-cf-pop":494,"x-cache":495,"x-content-type-options":496,"x-frame-options":497,"x-permitted-cross-domain-policies":498,"x-request-id":499,"x-runtime":500,"x-xss-protection":501},"max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","gzip","application/json; charset=utf-8","Thu, 23 Apr 2026 14:54:01 GMT","W/\"fec056977095b52a6b97a5b398abd202\"","strict-origin-when-cross-origin","5.764.0","nginx/1.29.1","max-age=31536000","chunked","Origin,Accept-Encoding, Origin","1.1 57cb281e5423af1daf1086071d6858a4.cloudfront.net (CloudFront)","BfwJCB-uIsch-Qv72AiGGK3zQhsE6pqY7KZlSTRsc5CGr_jEkSIB6w==","CMH68-P3","Miss from cloudfront","nosniff","SAMEORIGIN","none","aba10466-9294-4a6d-a1de-7842ae250c9b","0.038916","0",1776956041397]