[{"data":1,"prerenderedAt":1509},["ShallowReactive",2],{"doc-content/docs/developer/simple-example":3,"doc-surroundings/docs/developer/simple-example":1419,"docs-navigation":1428},{"path":4,"draft":5,"date":6,"dateUpdated":7,"title":8,"body":9,"description":1418,"image":6,"imageAlt":6},"/docs/developer/simple-example",false,null,"2025-05-15","Simple Widget Example",{"type":10,"value":11,"toc":1408},"minimark",[12,16,21,25,34,46,49,54,78,80,88,94,761,765,768,778,798,800,806,812,1124,1127,1130,1132,1136,1143,1146,1392,1395,1401,1404],[13,14,8],"h1",{"id":15},"simple-widget-example",[17,18],"img",{"alt":19,"src":20},"Computer Usage Today","/images/computer-usage.png",[22,23,24],"p",{},"In this example we will create a simple widget that displays the amount of time you've spent on your computer today.",[22,26,27,28,33],{},"We will use a function in the ",[29,30,32],"a",{"href":31},"/docs/developer/util","Utility"," API to format the time. And we will make the color of the title and time editable in the settings.",[35,36,38],"alert",{"type":37},"info",[22,39,40,41,45],{},"Before proceeding, make sure you have read the ",[29,42,44],{"href":43},"/docs/developer/guide","Getting Started"," page.",[47,48],"hr",{},[50,51,53],"h2",{"id":52},"create-a-new-widget","Create a new widget",[22,55,56,57,61,62,65,66,69,70,73,74,77],{},"From within the Hologram application, navigate to the ",[58,59,60],"code",{},"developer"," page and click the ",[58,63,64],{},"\"New Widget\""," button. Name your widget ",[58,67,68],{},"\"Computer Time Today\"",", give it an ID of ",[58,71,72],{},"\"time-today\"",", and enter your name. Choose the hello world widget template, then click ",[58,75,76],{},"\"create\"",". Now open your widget files in a text editor.",[47,79],{},[81,82,84,85],"h3",{"id":83},"update-widgetjson","Update ",[58,86,87],{},"widget.json",[22,89,90,91,93],{},"Open ",[58,92,87],{}," and replace the contents with the following:",[95,96,101],"pre",{"className":97,"code":98,"language":99,"meta":100,"style":100},"language-json shiki shiki-themes github-dark github-dark","{\n    \"name\": \"Computer Time Today\",\n    \"id\": \"time-today\",\n    \"author\": \"-\",\n    \"version\": \"1.0.0\",\n    \"description\": \"How much time you've spent on your computer.\",\n    \"aspectRatio\": \"auto-height\",\n\n    \"defaultSize\": {\n        \"placementY\": \"top\",\n        \"placementX\": \"left\",\n        \"x\": 20,\n        \"y\": 15,\n        \"width\": 0,\n        \"height\": 0\n    },\n\n    \"settings\": [\n        {\n            \"name\": \"font\",\n            \"label\": \"Font\",\n            \"type\": \"font\",\n            \"defaultValue\": \"Normal\"\n        },\n\n        { \"type\": \"divider\" },\n\n        { \"name\": \"backgroundColor\", \"type\": \"color\", \"defaultValue\": \"darkmuted\", \"defaultAutoColor\": \"darkmuted\" },\n        { \"name\": \"titleColor\", \"type\": \"color\", \"defaultValue\": \"lightmuted\", \"defaultAutoColor\": \"lightmuted\" },\n        { \"name\": \"timeColor\", \"type\": \"color\", \"defaultValue\": \"lightvibrant\", \"defaultAutoColor\": \"lightvibrant\" },\n        { \"name\": \"shadowColor\", \"type\": \"color\", \"defaultValue\": \"darkmuted\", \"defaultAutoColor\": \"darkmuted\" },\n\n        { \"type\": \"divider\" },\n\n        {\n            \"name\": \"borderRadius\",\n            \"label\": \"Corner Radius\",\n            \"type\": \"slider\",\n            \"defaultValue\": \"40\",\n            \"min\": 0,\n            \"max\": 100\n        },\n        {\n            \"name\": \"shadow\",\n            \"label\": \"Shadow\",\n            \"type\": \"shadow\",\n            \"defaultValue\": true,\n            \"defaultBlur\": 10,\n            \"defaultOffset\": 0,\n            \"defaultPosition\": 0\n        }\n    ]\n}\n","json","",[58,102,103,112,128,140,153,166,179,192,199,208,221,234,247,260,273,284,290,295,304,310,323,336,348,359,365,370,387,392,436,475,514,552,557,570,575,580,592,604,616,628,640,651,656,661,673,685,696,708,721,733,743,749,755],{"__ignoreMap":100},[104,105,108],"span",{"class":106,"line":107},"line",1,[104,109,111],{"class":110},"suv1-","{\n",[104,113,115,119,122,125],{"class":106,"line":114},2,[104,116,118],{"class":117},"s8ozJ","    \"name\"",[104,120,121],{"class":110},": ",[104,123,68],{"class":124},"s4wv1",[104,126,127],{"class":110},",\n",[104,129,131,134,136,138],{"class":106,"line":130},3,[104,132,133],{"class":117},"    \"id\"",[104,135,121],{"class":110},[104,137,72],{"class":124},[104,139,127],{"class":110},[104,141,143,146,148,151],{"class":106,"line":142},4,[104,144,145],{"class":117},"    \"author\"",[104,147,121],{"class":110},[104,149,150],{"class":124},"\"-\"",[104,152,127],{"class":110},[104,154,156,159,161,164],{"class":106,"line":155},5,[104,157,158],{"class":117},"    \"version\"",[104,160,121],{"class":110},[104,162,163],{"class":124},"\"1.0.0\"",[104,165,127],{"class":110},[104,167,169,172,174,177],{"class":106,"line":168},6,[104,170,171],{"class":117},"    \"description\"",[104,173,121],{"class":110},[104,175,176],{"class":124},"\"How much time you've spent on your computer.\"",[104,178,127],{"class":110},[104,180,182,185,187,190],{"class":106,"line":181},7,[104,183,184],{"class":117},"    \"aspectRatio\"",[104,186,121],{"class":110},[104,188,189],{"class":124},"\"auto-height\"",[104,191,127],{"class":110},[104,193,195],{"class":106,"line":194},8,[104,196,198],{"emptyLinePlaceholder":197},true,"\n",[104,200,202,205],{"class":106,"line":201},9,[104,203,204],{"class":117},"    \"defaultSize\"",[104,206,207],{"class":110},": {\n",[104,209,211,214,216,219],{"class":106,"line":210},10,[104,212,213],{"class":117},"        \"placementY\"",[104,215,121],{"class":110},[104,217,218],{"class":124},"\"top\"",[104,220,127],{"class":110},[104,222,224,227,229,232],{"class":106,"line":223},11,[104,225,226],{"class":117},"        \"placementX\"",[104,228,121],{"class":110},[104,230,231],{"class":124},"\"left\"",[104,233,127],{"class":110},[104,235,237,240,242,245],{"class":106,"line":236},12,[104,238,239],{"class":117},"        \"x\"",[104,241,121],{"class":110},[104,243,244],{"class":117},"20",[104,246,127],{"class":110},[104,248,250,253,255,258],{"class":106,"line":249},13,[104,251,252],{"class":117},"        \"y\"",[104,254,121],{"class":110},[104,256,257],{"class":117},"15",[104,259,127],{"class":110},[104,261,263,266,268,271],{"class":106,"line":262},14,[104,264,265],{"class":117},"        \"width\"",[104,267,121],{"class":110},[104,269,270],{"class":117},"0",[104,272,127],{"class":110},[104,274,276,279,281],{"class":106,"line":275},15,[104,277,278],{"class":117},"        \"height\"",[104,280,121],{"class":110},[104,282,283],{"class":117},"0\n",[104,285,287],{"class":106,"line":286},16,[104,288,289],{"class":110},"    },\n",[104,291,293],{"class":106,"line":292},17,[104,294,198],{"emptyLinePlaceholder":197},[104,296,298,301],{"class":106,"line":297},18,[104,299,300],{"class":117},"    \"settings\"",[104,302,303],{"class":110},": [\n",[104,305,307],{"class":106,"line":306},19,[104,308,309],{"class":110},"        {\n",[104,311,313,316,318,321],{"class":106,"line":312},20,[104,314,315],{"class":117},"            \"name\"",[104,317,121],{"class":110},[104,319,320],{"class":124},"\"font\"",[104,322,127],{"class":110},[104,324,326,329,331,334],{"class":106,"line":325},21,[104,327,328],{"class":117},"            \"label\"",[104,330,121],{"class":110},[104,332,333],{"class":124},"\"Font\"",[104,335,127],{"class":110},[104,337,339,342,344,346],{"class":106,"line":338},22,[104,340,341],{"class":117},"            \"type\"",[104,343,121],{"class":110},[104,345,320],{"class":124},[104,347,127],{"class":110},[104,349,351,354,356],{"class":106,"line":350},23,[104,352,353],{"class":117},"            \"defaultValue\"",[104,355,121],{"class":110},[104,357,358],{"class":124},"\"Normal\"\n",[104,360,362],{"class":106,"line":361},24,[104,363,364],{"class":110},"        },\n",[104,366,368],{"class":106,"line":367},25,[104,369,198],{"emptyLinePlaceholder":197},[104,371,373,376,379,381,384],{"class":106,"line":372},26,[104,374,375],{"class":110},"        { ",[104,377,378],{"class":117},"\"type\"",[104,380,121],{"class":110},[104,382,383],{"class":124},"\"divider\"",[104,385,386],{"class":110}," },\n",[104,388,390],{"class":106,"line":389},27,[104,391,198],{"emptyLinePlaceholder":197},[104,393,395,397,400,402,405,408,410,412,415,417,420,422,425,427,430,432,434],{"class":106,"line":394},28,[104,396,375],{"class":110},[104,398,399],{"class":117},"\"name\"",[104,401,121],{"class":110},[104,403,404],{"class":124},"\"backgroundColor\"",[104,406,407],{"class":110},", ",[104,409,378],{"class":117},[104,411,121],{"class":110},[104,413,414],{"class":124},"\"color\"",[104,416,407],{"class":110},[104,418,419],{"class":117},"\"defaultValue\"",[104,421,121],{"class":110},[104,423,424],{"class":124},"\"darkmuted\"",[104,426,407],{"class":110},[104,428,429],{"class":117},"\"defaultAutoColor\"",[104,431,121],{"class":110},[104,433,424],{"class":124},[104,435,386],{"class":110},[104,437,439,441,443,445,448,450,452,454,456,458,460,462,465,467,469,471,473],{"class":106,"line":438},29,[104,440,375],{"class":110},[104,442,399],{"class":117},[104,444,121],{"class":110},[104,446,447],{"class":124},"\"titleColor\"",[104,449,407],{"class":110},[104,451,378],{"class":117},[104,453,121],{"class":110},[104,455,414],{"class":124},[104,457,407],{"class":110},[104,459,419],{"class":117},[104,461,121],{"class":110},[104,463,464],{"class":124},"\"lightmuted\"",[104,466,407],{"class":110},[104,468,429],{"class":117},[104,470,121],{"class":110},[104,472,464],{"class":124},[104,474,386],{"class":110},[104,476,478,480,482,484,487,489,491,493,495,497,499,501,504,506,508,510,512],{"class":106,"line":477},30,[104,479,375],{"class":110},[104,481,399],{"class":117},[104,483,121],{"class":110},[104,485,486],{"class":124},"\"timeColor\"",[104,488,407],{"class":110},[104,490,378],{"class":117},[104,492,121],{"class":110},[104,494,414],{"class":124},[104,496,407],{"class":110},[104,498,419],{"class":117},[104,500,121],{"class":110},[104,502,503],{"class":124},"\"lightvibrant\"",[104,505,407],{"class":110},[104,507,429],{"class":117},[104,509,121],{"class":110},[104,511,503],{"class":124},[104,513,386],{"class":110},[104,515,517,519,521,523,526,528,530,532,534,536,538,540,542,544,546,548,550],{"class":106,"line":516},31,[104,518,375],{"class":110},[104,520,399],{"class":117},[104,522,121],{"class":110},[104,524,525],{"class":124},"\"shadowColor\"",[104,527,407],{"class":110},[104,529,378],{"class":117},[104,531,121],{"class":110},[104,533,414],{"class":124},[104,535,407],{"class":110},[104,537,419],{"class":117},[104,539,121],{"class":110},[104,541,424],{"class":124},[104,543,407],{"class":110},[104,545,429],{"class":117},[104,547,121],{"class":110},[104,549,424],{"class":124},[104,551,386],{"class":110},[104,553,555],{"class":106,"line":554},32,[104,556,198],{"emptyLinePlaceholder":197},[104,558,560,562,564,566,568],{"class":106,"line":559},33,[104,561,375],{"class":110},[104,563,378],{"class":117},[104,565,121],{"class":110},[104,567,383],{"class":124},[104,569,386],{"class":110},[104,571,573],{"class":106,"line":572},34,[104,574,198],{"emptyLinePlaceholder":197},[104,576,578],{"class":106,"line":577},35,[104,579,309],{"class":110},[104,581,583,585,587,590],{"class":106,"line":582},36,[104,584,315],{"class":117},[104,586,121],{"class":110},[104,588,589],{"class":124},"\"borderRadius\"",[104,591,127],{"class":110},[104,593,595,597,599,602],{"class":106,"line":594},37,[104,596,328],{"class":117},[104,598,121],{"class":110},[104,600,601],{"class":124},"\"Corner Radius\"",[104,603,127],{"class":110},[104,605,607,609,611,614],{"class":106,"line":606},38,[104,608,341],{"class":117},[104,610,121],{"class":110},[104,612,613],{"class":124},"\"slider\"",[104,615,127],{"class":110},[104,617,619,621,623,626],{"class":106,"line":618},39,[104,620,353],{"class":117},[104,622,121],{"class":110},[104,624,625],{"class":124},"\"40\"",[104,627,127],{"class":110},[104,629,631,634,636,638],{"class":106,"line":630},40,[104,632,633],{"class":117},"            \"min\"",[104,635,121],{"class":110},[104,637,270],{"class":117},[104,639,127],{"class":110},[104,641,643,646,648],{"class":106,"line":642},41,[104,644,645],{"class":117},"            \"max\"",[104,647,121],{"class":110},[104,649,650],{"class":117},"100\n",[104,652,654],{"class":106,"line":653},42,[104,655,364],{"class":110},[104,657,659],{"class":106,"line":658},43,[104,660,309],{"class":110},[104,662,664,666,668,671],{"class":106,"line":663},44,[104,665,315],{"class":117},[104,667,121],{"class":110},[104,669,670],{"class":124},"\"shadow\"",[104,672,127],{"class":110},[104,674,676,678,680,683],{"class":106,"line":675},45,[104,677,328],{"class":117},[104,679,121],{"class":110},[104,681,682],{"class":124},"\"Shadow\"",[104,684,127],{"class":110},[104,686,688,690,692,694],{"class":106,"line":687},46,[104,689,341],{"class":117},[104,691,121],{"class":110},[104,693,670],{"class":124},[104,695,127],{"class":110},[104,697,699,701,703,706],{"class":106,"line":698},47,[104,700,353],{"class":117},[104,702,121],{"class":110},[104,704,705],{"class":117},"true",[104,707,127],{"class":110},[104,709,711,714,716,719],{"class":106,"line":710},48,[104,712,713],{"class":117},"            \"defaultBlur\"",[104,715,121],{"class":110},[104,717,718],{"class":117},"10",[104,720,127],{"class":110},[104,722,724,727,729,731],{"class":106,"line":723},49,[104,725,726],{"class":117},"            \"defaultOffset\"",[104,728,121],{"class":110},[104,730,270],{"class":117},[104,732,127],{"class":110},[104,734,736,739,741],{"class":106,"line":735},50,[104,737,738],{"class":117},"            \"defaultPosition\"",[104,740,121],{"class":110},[104,742,283],{"class":117},[104,744,746],{"class":106,"line":745},51,[104,747,748],{"class":110},"        }\n",[104,750,752],{"class":106,"line":751},52,[104,753,754],{"class":110},"    ]\n",[104,756,758],{"class":106,"line":757},53,[104,759,760],{"class":110},"}\n",[81,762,764],{"id":763},"notes","Notes:",[22,766,767],{},"The widget config is what defines a widgets, name, default size, settings, and other properties.",[22,769,770,771,774,775,777],{},"In the above code you'll notice it contains an aspect ratio. We are using ",[58,772,773],{},"auto-height"," which automatically sets the height of the container based on its contents. For this widget we could set a fixed ratio since it only contains one piece of data, but ",[58,776,773],{}," is the simplest way to ensure your widget fits within the container.",[22,779,780,781,784,785,788,789,792,793,797],{},"The ",[58,782,783],{},"settings"," array defines the settings that will be available to the user in the settings page. Here, we added a setting for the font, shadow, and a few more options. You'll notice we added two color settings, ",[58,786,787],{},"titleColor"," and ",[58,790,791],{},"timeColor",". When we style the widget, we can use these colors so they can be edited by the user dynamically. You can learn more about ",[29,794,796],{"href":795},"/docs/developer/widget-settings","widget settings here",".",[47,799],{},[81,801,84,803],{"id":802},"update-stylescss",[58,804,805],{},"styles.css",[22,807,808,809,811],{},"Now you can add some css to make your widget look pretty! Open your ",[58,810,805],{}," file and replace the CSS with this:",[95,813,817],{"className":814,"code":815,"language":816,"meta":100,"style":100},"language-css shiki shiki-themes github-dark github-dark",".widget-container {\n    border-radius: 0.4em;\n    box-shadow: var(--shadow) var(--shadowColor);\n    background-color: var(--backgroundColor);\n    border: var(--borderWidth) solid var(--borderColor);\n    font-size: 0.8em;\n    height: 100%;\n}\n.widget-container-inner {\n    padding: 1em;\n}\n.title {\n    color: var(--titleColor);\n    opacity: 0.5;\n    font-size: 0.7em;\n    text-transform: uppercase;\n    margin-bottom: 0.4em;\n    margin-top: 1.6em;\n}\n.time {\n    color: var(--timeColor);\n    font-size: 0.6em;\n    margin: 0.6em 0;\n}\n","css",[58,818,819,828,845,875,891,920,934,949,953,960,974,978,985,1001,1013,1026,1038,1051,1065,1069,1076,1091,1104,1120],{"__ignoreMap":100},[104,820,821,825],{"class":106,"line":107},[104,822,824],{"class":823},"sFR8T",".widget-container",[104,826,827],{"class":110}," {\n",[104,829,830,833,835,838,842],{"class":106,"line":114},[104,831,832],{"class":117},"    border-radius",[104,834,121],{"class":110},[104,836,837],{"class":117},"0.4",[104,839,841],{"class":840},"sOPea","em",[104,843,844],{"class":110},";\n",[104,846,847,850,852,855,858,862,865,867,869,872],{"class":106,"line":130},[104,848,849],{"class":117},"    box-shadow",[104,851,121],{"class":110},[104,853,854],{"class":117},"var",[104,856,857],{"class":110},"(",[104,859,861],{"class":860},"s-3mD","--shadow",[104,863,864],{"class":110},") ",[104,866,854],{"class":117},[104,868,857],{"class":110},[104,870,871],{"class":860},"--shadowColor",[104,873,874],{"class":110},");\n",[104,876,877,880,882,884,886,889],{"class":106,"line":142},[104,878,879],{"class":117},"    background-color",[104,881,121],{"class":110},[104,883,854],{"class":117},[104,885,857],{"class":110},[104,887,888],{"class":860},"--backgroundColor",[104,890,874],{"class":110},[104,892,893,896,898,900,902,905,907,910,913,915,918],{"class":106,"line":155},[104,894,895],{"class":117},"    border",[104,897,121],{"class":110},[104,899,854],{"class":117},[104,901,857],{"class":110},[104,903,904],{"class":860},"--borderWidth",[104,906,864],{"class":110},[104,908,909],{"class":117},"solid",[104,911,912],{"class":117}," var",[104,914,857],{"class":110},[104,916,917],{"class":860},"--borderColor",[104,919,874],{"class":110},[104,921,922,925,927,930,932],{"class":106,"line":168},[104,923,924],{"class":117},"    font-size",[104,926,121],{"class":110},[104,928,929],{"class":117},"0.8",[104,931,841],{"class":840},[104,933,844],{"class":110},[104,935,936,939,941,944,947],{"class":106,"line":181},[104,937,938],{"class":117},"    height",[104,940,121],{"class":110},[104,942,943],{"class":117},"100",[104,945,946],{"class":840},"%",[104,948,844],{"class":110},[104,950,951],{"class":106,"line":194},[104,952,760],{"class":110},[104,954,955,958],{"class":106,"line":201},[104,956,957],{"class":823},".widget-container-inner",[104,959,827],{"class":110},[104,961,962,965,967,970,972],{"class":106,"line":210},[104,963,964],{"class":117},"    padding",[104,966,121],{"class":110},[104,968,969],{"class":117},"1",[104,971,841],{"class":840},[104,973,844],{"class":110},[104,975,976],{"class":106,"line":223},[104,977,760],{"class":110},[104,979,980,983],{"class":106,"line":236},[104,981,982],{"class":823},".title",[104,984,827],{"class":110},[104,986,987,990,992,994,996,999],{"class":106,"line":249},[104,988,989],{"class":117},"    color",[104,991,121],{"class":110},[104,993,854],{"class":117},[104,995,857],{"class":110},[104,997,998],{"class":860},"--titleColor",[104,1000,874],{"class":110},[104,1002,1003,1006,1008,1011],{"class":106,"line":262},[104,1004,1005],{"class":117},"    opacity",[104,1007,121],{"class":110},[104,1009,1010],{"class":117},"0.5",[104,1012,844],{"class":110},[104,1014,1015,1017,1019,1022,1024],{"class":106,"line":275},[104,1016,924],{"class":117},[104,1018,121],{"class":110},[104,1020,1021],{"class":117},"0.7",[104,1023,841],{"class":840},[104,1025,844],{"class":110},[104,1027,1028,1031,1033,1036],{"class":106,"line":286},[104,1029,1030],{"class":117},"    text-transform",[104,1032,121],{"class":110},[104,1034,1035],{"class":117},"uppercase",[104,1037,844],{"class":110},[104,1039,1040,1043,1045,1047,1049],{"class":106,"line":292},[104,1041,1042],{"class":117},"    margin-bottom",[104,1044,121],{"class":110},[104,1046,837],{"class":117},[104,1048,841],{"class":840},[104,1050,844],{"class":110},[104,1052,1053,1056,1058,1061,1063],{"class":106,"line":297},[104,1054,1055],{"class":117},"    margin-top",[104,1057,121],{"class":110},[104,1059,1060],{"class":117},"1.6",[104,1062,841],{"class":840},[104,1064,844],{"class":110},[104,1066,1067],{"class":106,"line":306},[104,1068,760],{"class":110},[104,1070,1071,1074],{"class":106,"line":312},[104,1072,1073],{"class":823},".time",[104,1075,827],{"class":110},[104,1077,1078,1080,1082,1084,1086,1089],{"class":106,"line":325},[104,1079,989],{"class":117},[104,1081,121],{"class":110},[104,1083,854],{"class":117},[104,1085,857],{"class":110},[104,1087,1088],{"class":860},"--timeColor",[104,1090,874],{"class":110},[104,1092,1093,1095,1097,1100,1102],{"class":106,"line":338},[104,1094,924],{"class":117},[104,1096,121],{"class":110},[104,1098,1099],{"class":117},"0.6",[104,1101,841],{"class":840},[104,1103,844],{"class":110},[104,1105,1106,1109,1111,1113,1115,1118],{"class":106,"line":350},[104,1107,1108],{"class":117},"    margin",[104,1110,121],{"class":110},[104,1112,1099],{"class":117},[104,1114,841],{"class":840},[104,1116,1117],{"class":117}," 0",[104,1119,844],{"class":110},[104,1121,1122],{"class":106,"line":361},[104,1123,760],{"class":110},[22,1125,1126],{},"We use ems for our font sizes and padding. This ensures that the widget will scale when it is resized.",[22,1128,1129],{},"Css variables are used so that way the widget can update how it looks dynamically. We'll set these variables in our widget Javascript below.",[47,1131],{},[81,1133,1135],{"id":1134},"update-the-components-javascript","Update the components Javascript",[22,1137,1138,1139,1142],{},"Lastly, update your ",[58,1140,1141],{},"index.js"," file. Replace everything previously in it with the following code.",[22,1144,1145],{},"The code contains comments that explain it. We will further explain the key points below.",[95,1147,1151],{"className":1148,"code":1149,"language":1150,"meta":100,"style":100},"language-js shiki shiki-themes github-dark github-dark","export default {\n    extends: HologramWidget,\n    data() {\n        return {\n            timeSpentToday: 0\n        }\n    },\n    mounted() {\n        // Get the amount of time spent on the computer today\n        Hologram.get(this, 'computerUsageTimeToday', (timeToday) => {\n            this.timeSpentToday = Hologram.util.humanizeSeconds(timeToday)\n        })\n\n        // Load the widget colors and assign them to css variables\n        this.fetchAllColors((colors) => {\n            this.addCssVariables(colors)\n        })\n    },\n    template: /* html */ `\n        \u003Cdiv class=\"widget-container\"\n            :style=\"{'--shadow': this.settings.shadow.boxShadow,\n                    '--borderWidth': settings.borderWidth / 100 + 'em',\n                    borderRadius: (settings.borderRadius / 100) * 2 + 'em',\n                    'font-family': settings.font}\">\n\n            \u003Cdiv class=\"widget-container-inner\">\n                \u003Cdiv class=\"title\">My computer usage today\u003C/div>\n                \u003Cdiv class=\"time\">@{{timeSpentToday}}\u003C/div>\n            \u003C/div>\n        \u003C/div>\n    `\n}\n","js",[58,1152,1153,1163,1168,1176,1183,1190,1194,1198,1205,1211,1242,1262,1267,1271,1276,1298,1310,1314,1318,1329,1334,1339,1344,1349,1354,1358,1363,1368,1373,1378,1383,1388],{"__ignoreMap":100},[104,1154,1155,1158,1161],{"class":106,"line":107},[104,1156,1157],{"class":840},"export",[104,1159,1160],{"class":840}," default",[104,1162,827],{"class":110},[104,1164,1165],{"class":106,"line":114},[104,1166,1167],{"class":110},"    extends: HologramWidget,\n",[104,1169,1170,1173],{"class":106,"line":130},[104,1171,1172],{"class":823},"    data",[104,1174,1175],{"class":110},"() {\n",[104,1177,1178,1181],{"class":106,"line":142},[104,1179,1180],{"class":840},"        return",[104,1182,827],{"class":110},[104,1184,1185,1188],{"class":106,"line":155},[104,1186,1187],{"class":110},"            timeSpentToday: ",[104,1189,283],{"class":117},[104,1191,1192],{"class":106,"line":168},[104,1193,748],{"class":110},[104,1195,1196],{"class":106,"line":181},[104,1197,289],{"class":110},[104,1199,1200,1203],{"class":106,"line":194},[104,1201,1202],{"class":823},"    mounted",[104,1204,1175],{"class":110},[104,1206,1207],{"class":106,"line":201},[104,1208,1210],{"class":1209},"sJ8bj","        // Get the amount of time spent on the computer today\n",[104,1212,1213,1216,1219,1221,1224,1226,1229,1232,1235,1237,1240],{"class":106,"line":210},[104,1214,1215],{"class":110},"        Hologram.",[104,1217,1218],{"class":823},"get",[104,1220,857],{"class":110},[104,1222,1223],{"class":117},"this",[104,1225,407],{"class":110},[104,1227,1228],{"class":124},"'computerUsageTimeToday'",[104,1230,1231],{"class":110},", (",[104,1233,1234],{"class":860},"timeToday",[104,1236,864],{"class":110},[104,1238,1239],{"class":840},"=>",[104,1241,827],{"class":110},[104,1243,1244,1247,1250,1253,1256,1259],{"class":106,"line":223},[104,1245,1246],{"class":117},"            this",[104,1248,1249],{"class":110},".timeSpentToday ",[104,1251,1252],{"class":840},"=",[104,1254,1255],{"class":110}," Hologram.util.",[104,1257,1258],{"class":823},"humanizeSeconds",[104,1260,1261],{"class":110},"(timeToday)\n",[104,1263,1264],{"class":106,"line":236},[104,1265,1266],{"class":110},"        })\n",[104,1268,1269],{"class":106,"line":249},[104,1270,198],{"emptyLinePlaceholder":197},[104,1272,1273],{"class":106,"line":262},[104,1274,1275],{"class":1209},"        // Load the widget colors and assign them to css variables\n",[104,1277,1278,1281,1283,1286,1289,1292,1294,1296],{"class":106,"line":275},[104,1279,1280],{"class":117},"        this",[104,1282,797],{"class":110},[104,1284,1285],{"class":823},"fetchAllColors",[104,1287,1288],{"class":110},"((",[104,1290,1291],{"class":860},"colors",[104,1293,864],{"class":110},[104,1295,1239],{"class":840},[104,1297,827],{"class":110},[104,1299,1300,1302,1304,1307],{"class":106,"line":286},[104,1301,1246],{"class":117},[104,1303,797],{"class":110},[104,1305,1306],{"class":823},"addCssVariables",[104,1308,1309],{"class":110},"(colors)\n",[104,1311,1312],{"class":106,"line":292},[104,1313,1266],{"class":110},[104,1315,1316],{"class":106,"line":297},[104,1317,289],{"class":110},[104,1319,1320,1323,1326],{"class":106,"line":306},[104,1321,1322],{"class":110},"    template: ",[104,1324,1325],{"class":1209},"/* html */",[104,1327,1328],{"class":124}," `\n",[104,1330,1331],{"class":106,"line":312},[104,1332,1333],{"class":124},"        \u003Cdiv class=\"widget-container\"\n",[104,1335,1336],{"class":106,"line":325},[104,1337,1338],{"class":124},"            :style=\"{'--shadow': this.settings.shadow.boxShadow,\n",[104,1340,1341],{"class":106,"line":338},[104,1342,1343],{"class":124},"                    '--borderWidth': settings.borderWidth / 100 + 'em',\n",[104,1345,1346],{"class":106,"line":350},[104,1347,1348],{"class":124},"                    borderRadius: (settings.borderRadius / 100) * 2 + 'em',\n",[104,1350,1351],{"class":106,"line":361},[104,1352,1353],{"class":124},"                    'font-family': settings.font}\">\n",[104,1355,1356],{"class":106,"line":367},[104,1357,198],{"emptyLinePlaceholder":197},[104,1359,1360],{"class":106,"line":372},[104,1361,1362],{"class":124},"            \u003Cdiv class=\"widget-container-inner\">\n",[104,1364,1365],{"class":106,"line":389},[104,1366,1367],{"class":124},"                \u003Cdiv class=\"title\">My computer usage today\u003C/div>\n",[104,1369,1370],{"class":106,"line":394},[104,1371,1372],{"class":124},"                \u003Cdiv class=\"time\">@{{timeSpentToday}}\u003C/div>\n",[104,1374,1375],{"class":106,"line":438},[104,1376,1377],{"class":124},"            \u003C/div>\n",[104,1379,1380],{"class":106,"line":477},[104,1381,1382],{"class":124},"        \u003C/div>\n",[104,1384,1385],{"class":106,"line":516},[104,1386,1387],{"class":124},"    `\n",[104,1389,1390],{"class":106,"line":554},[104,1391,760],{"class":110},[22,1393,1394],{},"Because we are fetching the time as a callback, Hologram automatically updates the time when it needs to change. This makes it easy to not worry about updating the time ourselves. And since we extended the HologramWidget component, the Hologram api will automatically stop getting the time if the widget is removed.",[22,1396,1397,1398,1400],{},"Since we extended the HologramWidget component, we have access to the ",[58,1399,783],{}," object. This object contains all the settings the user has set for the widget. We can use this to set the font, shadow, and border radius and any other custom setting your create.",[22,1402,1403],{},"We hope you are impressed by just how easy it is to create a widget in Hologram!",[1405,1406,1407],"style",{},"html pre.shiki code .suv1-, html code.shiki .suv1-{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .s8ozJ, html code.shiki .s8ozJ{--shiki-default:#79B8FF;--shiki-dark:#79B8FF}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 .sFR8T, html code.shiki .sFR8T{--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sOPea, html code.shiki .sOPea{--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .s-3mD, html code.shiki .s-3mD{--shiki-default:#FFAB70;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":100,"searchDepth":114,"depth":114,"links":1409},[1410],{"id":52,"depth":114,"text":53,"children":1411},[1412,1414,1415,1417],{"id":83,"depth":130,"text":1413},"Update widget.json",{"id":763,"depth":130,"text":764},{"id":802,"depth":130,"text":1416},"Update styles.css",{"id":1134,"depth":130,"text":1135},"Step-by-step example of building a simple widget in Hologram.",[1420,1424],{"title":1421,"path":1422,"stem":1423,"children":-1},"Making Widgets Scale","/docs/developer/making-widgets-scale","docs/developer/07.making-widgets-scale",{"title":1425,"path":1426,"stem":1427,"children":-1},"Apple Script","/docs/developer/apple-script","docs/developer/08.apple-script",[1429],{"title":1430,"path":1431,"stem":1432,"children":1433,"navigation":197},"Welcome to Hologram","/docs","docs/0.index",[1434,1435,1439,1443,1447,1503],{"title":1430,"path":1431,"stem":1432,"navigation":197},{"title":1436,"path":1437,"stem":1438,"navigation":197},"Themes & Wallpapers","/docs/themes","docs/1.themes",{"title":1440,"path":1441,"stem":1442,"navigation":197},"Widgets","/docs/widgets","docs/2.widgets",{"title":1444,"path":1445,"stem":1446,"navigation":197},"Settings","/docs/settings","docs/4.settings",{"title":1448,"navigation":1449,"sectionTitle":1450,"collapsible":197,"path":1451,"stem":1452,"children":1453,"page":5},"Developer",{"sectionTitle":1450,"collapsible":197},"Developing Widgets","/docs/developer","docs/developer",[1454,1457,1463,1467,1470,1474,1478,1479,1481,1482,1488,1492,1496,1499],{"title":1455,"path":43,"stem":1456,"navigation":197},"Widget Developer Guide","docs/developer/01.guide",{"title":1458,"path":1459,"stem":1460,"navigation":1461,"sectionTitle":1462},"Hologram Widget Class","/docs/developer/widget-class","docs/developer/02.widget-class",{"sectionTitle":1462},"Building Widgets",{"title":1464,"path":1465,"stem":1466,"navigation":197},"Widget Config","/docs/developer/widget-config","docs/developer/03.widget-config",{"title":1468,"path":795,"stem":1469,"navigation":197},"Widget Settings","docs/developer/04.widget-settings",{"title":1471,"path":1472,"stem":1473,"navigation":197},"Widget Color Settings","/docs/developer/widget-color-settings","docs/developer/05.widget-color-settings",{"title":1475,"path":1476,"stem":1477,"navigation":197},"Creating Widget Presets","/docs/developer/widget-presets","docs/developer/06.widget-presets",{"title":1421,"path":1422,"stem":1423,"navigation":197},{"title":8,"path":4,"stem":1480,"navigation":197},"docs/developer/07.simple-example",{"title":1425,"path":1426,"stem":1427,"navigation":197},{"title":1483,"path":1484,"stem":1485,"navigation":1486,"sectionTitle":1487},"Hologram API","/docs/developer/api","docs/developer/10.api",{"sectionTitle":1487},"API Reference",{"title":1489,"path":1490,"stem":1491,"navigation":197},"Weather","/docs/developer/weather","docs/developer/11.weather",{"title":1493,"path":1494,"stem":1495,"navigation":197},"Timer","/docs/developer/timer","docs/developer/12.timer",{"title":1497,"path":31,"stem":1498,"navigation":197},"Utility Class","docs/developer/13.util",{"title":1500,"path":1501,"stem":1502,"navigation":197},"Third Party Libraries","/docs/developer/third-party","docs/developer/14.third-party",{"title":1504,"path":1505,"stem":1506,"navigation":1507,"sectionTitle":1508},"Frequently Asked Questions","/docs/faq","docs/faq",{"sectionTitle":1508},"Help",1755585913038]