[{"data":1,"prerenderedAt":355},["ShallowReactive",2],{"doc-content/docs/developer/widget-class":3,"doc-surroundings/docs/developer/widget-class":261,"docs-navigation":270},{"path":4,"draft":5,"date":6,"dateUpdated":7,"title":8,"body":9,"description":260,"image":6,"imageAlt":6},"/docs/developer/widget-class",false,null,"2025-05-15","Hologram Widget Class",{"type":10,"value":11,"toc":257},"minimark",[12,16,25,36,43,106,109,114,117,138,141,246,253],[13,14,8],"h1",{"id":15},"hologram-widget-class",[17,18,19,20,24],"p",{},"The widget class is in your ",[21,22,23],"code",{},"index.js"," file. It will contain the programming logic for your widget.",[17,26,27,28,35],{},"Widgets are built using the ",[29,30,34],"a",{"href":31,"rel":32},"https://vuejs.org",[33],"nofollow","Vue.js"," Javascript framework. If you've worked with Vue before you'll feel right at home developing a Hologram widget. If you are new to Vue we recommend you spend some time on the Vue.js website reading their docs. Because Hologram widgets are non-interactable, even knowing some Vue basics will get you pretty far.",[17,37,38,39,42],{},"When creating a new widget you must extend the ",[21,40,41],{},"HologramWidget"," Vue component, and have a template.",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-js shiki shiki-themes github-dark github-dark","export default {\n    extends: HologramWidget,\n    template: /* html */ `\n        \u003Cdiv>Hello World!\u003Cdiv>\n    `\n}\n","js","",[21,51,52,68,74,88,94,100],{"__ignoreMap":49},[53,54,57,61,64],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"sOPea","export",[53,62,63],{"class":59}," default",[53,65,67],{"class":66},"suv1-"," {\n",[53,69,71],{"class":55,"line":70},2,[53,72,73],{"class":66},"    extends: HologramWidget,\n",[53,75,77,80,84],{"class":55,"line":76},3,[53,78,79],{"class":66},"    template: ",[53,81,83],{"class":82},"sJ8bj","/* html */",[53,85,87],{"class":86},"s4wv1"," `\n",[53,89,91],{"class":55,"line":90},4,[53,92,93],{"class":86},"        \u003Cdiv>Hello World!\u003Cdiv>\n",[53,95,97],{"class":55,"line":96},5,[53,98,99],{"class":86},"    `\n",[53,101,103],{"class":55,"line":102},6,[53,104,105],{"class":66},"}\n",[107,108],"hr",{},[110,111,113],"h2",{"id":112},"accessing-widget-assets","Accessing Widget Assets",[17,115,116],{},"Widgets will often contain images or other assets. You can store those within your widget folder, organized however you want. In order to access your assets you will use the following method:",[44,118,120],{"className":46,"code":119,"language":48,"meta":49,"style":49},"this.asset(path)\n",[21,121,122],{"__ignoreMap":49},[53,123,124,128,131,135],{"class":55,"line":56},[53,125,127],{"class":126},"s8ozJ","this",[53,129,130],{"class":66},".",[53,132,134],{"class":133},"sFR8T","asset",[53,136,137],{"class":66},"(path)\n",[17,139,140],{},"The path will always be relative to your widget folder. For example, if you want to access an image contained in a folder called \"images\" you would use the following code:",[44,142,144],{"className":46,"code":143,"language":48,"meta":49,"style":49},"export default {\n    extends: HologramWidget,\n    methods: {\n        example() {\n            // You can also use the asset function in code:\n            const iconPath = this.asset('images/icon.svg')\n        }\n    },\n    template: /* html */ `\n        \u003C!-- Use the asset function directly in a tag -->\n        \u003Cimg :src=\"asset('images/icon.svg')\" />\n    `\n}\n",[21,145,146,154,158,163,171,176,203,209,215,224,230,236,241],{"__ignoreMap":49},[53,147,148,150,152],{"class":55,"line":56},[53,149,60],{"class":59},[53,151,63],{"class":59},[53,153,67],{"class":66},[53,155,156],{"class":55,"line":70},[53,157,73],{"class":66},[53,159,160],{"class":55,"line":76},[53,161,162],{"class":66},"    methods: {\n",[53,164,165,168],{"class":55,"line":90},[53,166,167],{"class":133},"        example",[53,169,170],{"class":66},"() {\n",[53,172,173],{"class":55,"line":96},[53,174,175],{"class":82},"            // You can also use the asset function in code:\n",[53,177,178,181,184,187,190,192,194,197,200],{"class":55,"line":102},[53,179,180],{"class":59},"            const",[53,182,183],{"class":126}," iconPath",[53,185,186],{"class":59}," =",[53,188,189],{"class":126}," this",[53,191,130],{"class":66},[53,193,134],{"class":133},[53,195,196],{"class":66},"(",[53,198,199],{"class":86},"'images/icon.svg'",[53,201,202],{"class":66},")\n",[53,204,206],{"class":55,"line":205},7,[53,207,208],{"class":66},"        }\n",[53,210,212],{"class":55,"line":211},8,[53,213,214],{"class":66},"    },\n",[53,216,218,220,222],{"class":55,"line":217},9,[53,219,79],{"class":66},[53,221,83],{"class":82},[53,223,87],{"class":86},[53,225,227],{"class":55,"line":226},10,[53,228,229],{"class":86},"        \u003C!-- Use the asset function directly in a tag -->\n",[53,231,233],{"class":55,"line":232},11,[53,234,235],{"class":86},"        \u003Cimg :src=\"asset('images/icon.svg')\" />\n",[53,237,239],{"class":55,"line":238},12,[53,240,99],{"class":86},[53,242,244],{"class":55,"line":243},13,[53,245,105],{"class":66},[247,248,250],"alert",{"type":249},"info",[17,251,252],{},"The asset function sets the file path relative to your widget folder. Do not place any files or assets outside of your widget folder or they will be inaccessible.",[254,255,256],"style",{},"html pre.shiki code .sOPea, html code.shiki .sOPea{--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .suv1-, html code.shiki .suv1-{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4wv1, html code.shiki .s4wv1{--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s8ozJ, html code.shiki .s8ozJ{--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .sFR8T, html code.shiki .sFR8T{--shiki-default:#B392F0;--shiki-dark:#B392F0}",{"title":49,"searchDepth":70,"depth":70,"links":258},[259],{"id":112,"depth":70,"text":113},"How to use the HologramWidget class in your widget's index.js file.",[262,266],{"title":263,"path":264,"stem":265,"children":-1},"Widget Developer Guide","/docs/developer/guide","docs/developer/01.guide",{"title":267,"path":268,"stem":269,"children":-1},"Widget Config","/docs/developer/widget-config","docs/developer/03.widget-config",[271],{"title":272,"path":273,"stem":274,"children":275,"navigation":277},"Welcome to Hologram","/docs","docs/0.index",[276,278,282,286,290,349],{"title":272,"path":273,"stem":274,"navigation":277},true,{"title":279,"path":280,"stem":281,"navigation":277},"Themes & Wallpapers","/docs/themes","docs/1.themes",{"title":283,"path":284,"stem":285,"navigation":277},"Widgets","/docs/widgets","docs/2.widgets",{"title":287,"path":288,"stem":289,"navigation":277},"Settings","/docs/settings","docs/4.settings",{"title":291,"navigation":292,"sectionTitle":293,"collapsible":277,"path":294,"stem":295,"children":296,"page":5},"Developer",{"sectionTitle":293,"collapsible":277},"Developing Widgets","/docs/developer","docs/developer",[297,298,302,303,307,311,315,319,323,327,333,337,341,345],{"title":263,"path":264,"stem":265,"navigation":277},{"title":8,"path":4,"stem":299,"navigation":300,"sectionTitle":301},"docs/developer/02.widget-class",{"sectionTitle":301},"Building Widgets",{"title":267,"path":268,"stem":269,"navigation":277},{"title":304,"path":305,"stem":306,"navigation":277},"Widget Settings","/docs/developer/widget-settings","docs/developer/04.widget-settings",{"title":308,"path":309,"stem":310,"navigation":277},"Widget Color Settings","/docs/developer/widget-color-settings","docs/developer/05.widget-color-settings",{"title":312,"path":313,"stem":314,"navigation":277},"Creating Widget Presets","/docs/developer/widget-presets","docs/developer/06.widget-presets",{"title":316,"path":317,"stem":318,"navigation":277},"Making Widgets Scale","/docs/developer/making-widgets-scale","docs/developer/07.making-widgets-scale",{"title":320,"path":321,"stem":322,"navigation":277},"Simple Widget Example","/docs/developer/simple-example","docs/developer/07.simple-example",{"title":324,"path":325,"stem":326,"navigation":277},"Apple Script","/docs/developer/apple-script","docs/developer/08.apple-script",{"title":328,"path":329,"stem":330,"navigation":331,"sectionTitle":332},"Hologram API","/docs/developer/api","docs/developer/10.api",{"sectionTitle":332},"API Reference",{"title":334,"path":335,"stem":336,"navigation":277},"Weather","/docs/developer/weather","docs/developer/11.weather",{"title":338,"path":339,"stem":340,"navigation":277},"Timer","/docs/developer/timer","docs/developer/12.timer",{"title":342,"path":343,"stem":344,"navigation":277},"Utility Class","/docs/developer/util","docs/developer/13.util",{"title":346,"path":347,"stem":348,"navigation":277},"Third Party Libraries","/docs/developer/third-party","docs/developer/14.third-party",{"title":350,"path":351,"stem":352,"navigation":353,"sectionTitle":354},"Frequently Asked Questions","/docs/faq","docs/faq",{"sectionTitle":354},"Help",1755585913038]