Close

[Session 6] Box and HTML

A project log for Connected Trash Can

Device allowing people to see the filling of a trash can thanks to an LED, and sending the data to a website updating live

antoineAntoine • 05/28/2022 at 10:39•0 Comments

Today, we went to the Lab to make the box of our device. We decided to lasercut two boxes, a big for the main part (battery, raspberry, breadboard and LED) and a small one only for the sensor.

We used the lasercut schems we did at the beginning of the project (here are the SVG codes)

Big box :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="424mm"
   height="215mm"
   viewBox="0 0 424 215"
   version="1.1"
   preserveAspectRatio="xMidYMid meet"
   id="svg199"
   sodipodi:docname="box.svg"
   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs203" />
  <sodipodi:namedview
     id="namedview201"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     inkscape:zoom="0.39905906"
     inkscape:cx="800.63337"
     inkscape:cy="197.96568"
     inkscape:window-width="1920"
     inkscape:window-height="991"
     inkscape:window-x="-9"
     inkscape:window-y="-9"
     inkscape:window-maximized="1"
     inkscape:current-layer="svgGroup" />
  <g
     id="svgGroup"
     stroke-linecap="round"
     fill-rule="evenodd"
     font-size="9pt"
     stroke="#000"
     stroke-width="0.25mm"
     fill="none"
     style="stroke:#000;stroke-width:0.25mm;fill:none">
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M -0.05078125,163.94922 V 164 173.80078 H 2.9492188 v 10.39844 h -3.00000005 v 10.60156 H 2.9492188 v 10.39844 h -3.00000005 v 9.85156 H 9.8007813 v -3 H 20.199219 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398439 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 9.85156 v -9.85156 h -3 v -10.39844 h 3 v -10.60156 h -3 v -10.39844 h 3 v -9.85156 h -9.85156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 H 93.800781 v -3 H 83.199219 v 3 H 72.800781 v -3 H 62.199219 v 3 H 51.800781 v -3 H 41.199219 v 3 H 30.800781 v -3 H 20.199219 v 3 H 9.8007813 v -3 z m 0.1015625,0.10156 H 9.6992188 v 3 H 20.300781 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601561 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 9.64844 v 9.64844 h -3 v 10.60156 h 3 v 10.39844 h -3 v 10.60156 h 3 v 9.64844 h -9.64844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 H 93.699219 v 3 H 83.300781 v -3 H 72.699219 v 3 H 62.300781 v -3 H 51.699219 v 3 H 41.300781 v -3 H 30.699219 v 3 H 20.300781 v -3 H 9.6992188 v 3 H 0.05078125 v -9.64844 H 3.0507813 V 194.69922 H 0.05078125 V 184.30078 H 3.0507813 V 173.69922 H 0.05078125 Z"
       id="front_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M 161.94922,163.94922 V 164 v 9.69922 h -3 v 10.60156 h 3 v 10.39844 h -3 v 10.60156 h 3 v 9.75 h 13.35156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.55078 2.80078 v -9.75 h 3 v -10.60156 h -3 v -10.39844 h 3 v -10.60156 h -3 v -9.75 h -13.35156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 H 164.75 Z m 0.10156,0.10156 h 2.69922 10.44922 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 13.14844 v 9.75 h 3 v 10.39844 h -3 v 10.60156 h 3 v 10.39844 h -3 v 9.75 H 259.25 248.80078 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -13.14844 v -9.75 h -3 v -10.39844 h 3 v -10.60156 h -3 v -10.39844 h 3 z"
       id="left_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="m 277.69922,108.94922 v 3 h -6.75 V 112 125.19922 h -3 v 10.60156 h 3 v 10.39844 h -3 v 10.60156 h 3 v 10.39844 h -3 v 10.60156 h 3 v 10.39844 h -3 v 10.60156 h 3 v 10.44922 2.80078 h 6.75 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 6.75 v -13.25 h 3 v -10.60156 h -3 v -10.39844 h 3 v -10.60156 h -3 v -10.39844 h 3 v -10.60156 h -3 v -10.39844 h 3 v -10.60156 h -3 V 114.75 111.94922 h -6.75 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 z m 0.10156,0.10156 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 6.75 v 2.69922 10.55078 h 3 v 10.39844 h -3 v 10.60156 h 3 v 10.39844 h -3 v 10.60156 h 3 v 10.39844 h -3 v 10.60156 h 3 v 10.39844 h -3 v 13.25 h -6.75 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -6.75 V 209.25 198.69922 h -3 v -10.39844 h 3 v -10.60156 h -3 v -10.39844 h 3 v -10.60156 h -3 v -10.39844 h 3 v -10.60156 h -3 v -10.39844 h 3 v -13.25 h 6.75 z"
       id="top_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M -0.05078125,109.94922 V 110 119.80078 H 2.9492188 v 10.39844 h -3.00000005 v 10.60156 H 2.9492188 v 10.39844 h -3.00000005 v 9.85156 H 9.8007813 v -3 H 20.199219 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398439 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 9.85156 v -9.85156 h -3 v -10.39844 h 3 v -10.60156 h -3 v -10.39844 h 3 v -9.85156 h -9.85156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 H 93.800781 v -3 H 83.199219 v 3 H 72.800781 v -3 H 62.199219 v 3 H 51.800781 v -3 H 41.199219 v 3 H 30.800781 v -3 H 20.199219 v 3 H 9.8007813 v -3 z m 0.1015625,0.10156 H 9.6992188 v 3 H 20.300781 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601562 v -3 h 10.398438 v 3 h 10.601561 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 9.64844 v 9.64844 h -3 v 10.60156 h 3 v 10.39844 h -3 v 10.60156 h 3 v 9.64844 h -9.64844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 H 93.699219 v 3 H 83.300781 v -3 H 72.699219 v 3 H 62.300781 v -3 H 51.699219 v 3 H 41.300781 v -3 H 30.699219 v 3 H 20.300781 v -3 H 9.6992188 v 3 H 0.05078125 v -9.64844 H 3.0507813 V 140.69922 H 0.05078125 V 130.30078 H 3.0507813 V 119.69922 H 0.05078125 Z"
       id="back_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M 161.94922,109.94922 V 110 v 9.69922 h -3 v 10.60156 h 3 v 10.39844 h -3 v 10.60156 h 3 v 9.75 h 13.35156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.55078 2.80078 v -9.75 h 3 v -10.60156 h -3 v -10.39844 h 3 v -10.60156 h -3 v -9.75 h -13.35156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 H 164.75 Z m 0.10156,0.10156 h 2.69922 10.44922 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 13.14844 v 9.75 h 3 v 10.39844 h -3 v 10.60156 h 3 v 10.39844 h -3 v 9.75 H 259.25 248.80078 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -13.14844 v -9.75 h -3 v -10.39844 h 3 v -10.60156 h -3 v -10.39844 h 3 z"
       id="right_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M 277.69922,-0.05078125 V 2.9492188 h -6.75 V 3 16.199219 h -3 v 10.601562 h 3 v 10.398438 h -3 v 10.601562 h 3 v 10.398438 h -3 v 10.601562 h 3 v 10.398438 h -3 v 10.601562 h 3 V 100.25 v 2.80078 h 6.75 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 10.39844 v 3 h 10.60156 v -3 h 6.75 V 89.800781 h 3 V 79.199219 h -3 V 68.800781 h 3 V 58.199219 h -3 V 47.800781 h 3 V 37.199219 h -3 V 26.800781 h 3 V 16.199219 h -3 V 5.75 2.9492188 h -6.75 V -0.05078125 H 403.69922 V 2.9492188 H 393.30078 V -0.05078125 H 382.69922 V 2.9492188 H 372.30078 V -0.05078125 H 361.69922 V 2.9492188 H 351.30078 V -0.05078125 H 340.69922 V 2.9492188 H 330.30078 V -0.05078125 H 319.69922 V 2.9492188 H 309.30078 V -0.05078125 H 298.69922 V 2.9492188 h -10.39844 v -3.00000005 z m 0.10156,0.1015625 h 10.39844 V 3.0507813 h 10.60156 V 0.05078125 h 10.39844 V 3.0507813 h 10.60156 V 0.05078125 h 10.39844 V 3.0507813 h 10.60156 V 0.05078125 h 10.39844 V 3.0507813 h 10.60156 V 0.05078125 h 10.39844 V 3.0507813 h 10.60156 V 0.05078125 h 10.39844 V 3.0507813 h 10.60156 V 0.05078125 h 10.39844 V 3.0507813 h 6.75 V 5.75 16.300781 h 3 v 10.398438 h -3 v 10.601562 h 3 v 10.398438 h -3 v 10.601562 h 3 v 10.398438 h -3 v 10.601562 h 3 v 10.398438 h -3 v 13.250001 h -6.75 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -10.60156 v 3 h -10.39844 v -3 h -6.75 V 100.25 89.699219 h -3 V 79.300781 h 3 V 68.699219 h -3 V 58.300781 h 3 V 47.699219 h -3 V 37.300781 h 3 V 26.699219 h -3 V 16.300781 h 3 V 3.0507813 h 6.75 z"
       id="bottom_outsideCutPath" />
    <ellipse
       style="fill:none;fill-opacity:1;stroke:#ff0000;stroke-width:0.0661458mm;stroke-opacity:1"
       id="path3302"
       cx="177.10867"
       cy="192.85536"
       rx="10.193902"
       ry="9.3651285" />
  </g>
</svg>

Small box :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="115mm"
   height="109mm"
   viewBox="0 0 115 109"
   version="1.1"
   preserveAspectRatio="xMidYMid meet"
   id="svg3335"
   sodipodi:docname="small box.svg"
   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs3339" />
  <sodipodi:namedview
     id="namedview3337"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     inkscape:zoom="1.9370413"
     inkscape:cx="217.08365"
     inkscape:cy="287.0357"
     inkscape:window-width="1920"
     inkscape:window-height="991"
     inkscape:window-x="-9"
     inkscape:window-y="-9"
     inkscape:window-maximized="1"
     inkscape:current-layer="svgGroup" />
  <g
     id="svgGroup"
     stroke-linecap="round"
     fill-rule="evenodd"
     font-size="9pt"
     stroke="#000"
     stroke-width="0.25mm"
     fill="none"
     style="stroke:#000;stroke-width:0.25mm;fill:none">
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M -0.05078125,84.949219 V 85 94.050781 H 2.9492188 v 5.898438 H -0.05078125 V 106 109.05078 H 5.0507812 v -3 h 5.8984378 v 3 h 6.101562 v -3 h 5.898438 v 3 h 5.101562 v -9.101561 h -3 v -5.898438 h 3 V 88 84.949219 h -5.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 H 5.0507812 v -3 z m 0.1015625,0.101562 H 4.9492187 v 3 h 6.1015623 v -3 h 5.898438 v 3 h 6.101562 v -3 h 4.898438 V 88 93.949219 h -3 v 6.101561 h 3 v 8.89844 h -4.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 H 4.9492187 v 3 H 0.05078125 V 106 100.05078 H 3.0507813 V 93.949219 H 0.05078125 Z"
       id="front_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M 33.949219,84.949219 V 85 93.949219 h -3 v 6.101561 h 3 V 106 v 3.05078 h 2.601562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 2.601562 v -9 h 3 v -6.101561 h -3 V 88 84.949219 h -2.601562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 z m 0.101562,0.101562 h 2.398438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 2.398438 V 88 94.050781 h 3 v 5.898438 h -3 v 9.000001 h -2.398438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 H 34.050781 V 106 99.949219 h -3 v -5.898438 h 3 z"
       id="left_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="m 91.949219,55.949219 v 3 h -2 V 59 61.449219 h -3 v 6.101562 h 3 v 5.898438 h -3 v 6.101562 h 3 v 5.898438 h -3 v 6.101562 h 3 v 5.898438 h -3 v 6.101561 h 3 v 2.5 h 2 v 3 h 6.101562 v -3 h 5.898439 v 3 h 6.10156 v -3 h 2 v -2.5 h 3 v -6.101561 h -3 v -5.898438 h 3 v -6.101562 h -3 v -5.898438 h 3 v -6.101562 h -3 v -5.898438 h 3 v -6.101562 h -3 v -2.5 h -2 v -3 h -6.10156 v 3 h -5.898439 v -3 z m 0.101562,0.101562 h 5.898438 v 3 h 6.101561 v -3 h 5.89844 v 3 h 2 v 2.5 h 3 v 5.898438 h -3 v 6.101562 h 3 v 5.898438 h -3 v 6.101562 h 3 v 5.898438 h -3 v 6.101562 h 3 v 5.898439 h -3 v 2.5 h -2 v 3 h -5.89844 v -3 h -6.101561 v 3 h -5.898438 v -3 h -2 v -2.5 h -3 v -5.898439 h 3 v -6.101562 h -3 v -5.898438 h 3 v -6.101562 h -3 v -5.898438 h 3 v -6.101562 h -3 v -5.898438 h 3 v -2.5 h 2 z"
       id="top_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M -0.05078125,57.949219 V 58 67.050781 H 2.9492188 v 5.898438 H -0.05078125 V 79 82.050781 H 5.0507812 v -3 h 5.8984378 v 3 h 6.101562 v -3 h 5.898438 v 3 h 5.101562 v -9.101562 h -3 v -5.898438 h 3 V 61 57.949219 h -5.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 H 5.0507812 v -3 z m 0.1015625,0.101562 H 4.9492187 v 3 h 6.1015623 v -3 h 5.898438 v 3 h 6.101562 v -3 h 4.898438 V 61 66.949219 h -3 v 6.101562 h 3 v 8.898438 h -4.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 H 4.9492187 v 3 H 0.05078125 V 79 73.050781 H 3.0507813 V 66.949219 H 0.05078125 Z"
       id="back_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M 33.949219,57.949219 V 58 66.949219 h -3 v 6.101562 h 3 V 79 82.050781 h 2.601562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 2.601562 v -9 h 3 v -6.101562 h -3 V 61 57.949219 h -2.601562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 z m 0.101562,0.101562 h 2.398438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 5.898438 v 3 h 6.101562 v -3 h 2.398438 V 61 67.050781 h 3 v 5.898438 h -3 v 9 h -2.398438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 h -5.898438 v -3 h -6.101562 v 3 H 34.050781 V 79 72.949219 h -3 v -5.898438 h 3 z"
       id="right_outsideCutPath" />
    <path
       style="color:#000000;vector-effect:non-scaling-stroke;fill:#ff0000;stroke:none;-inkscape-stroke:none"
       d="M 91.949219,-0.05078125 V 2.9492188 h -2 V 3 5.4492187 h -3 v 6.1015623 h 3 v 5.898438 h -3 v 6.101562 h 3 v 5.898438 h -3 v 6.101562 h 3 v 5.898438 h -3 v 6.101562 h 3 v 2.5 h 2 v 3 h 6.101562 v -3 h 5.898439 v 3 h 6.10156 v -3 h 2 v -2.5 h 3 v -6.101562 h -3 v -5.898438 h 3 v -6.101562 h -3 v -5.898438 h 3 v -6.101562 h -3 v -5.898438 h 3 V 5.4492187 h -3 V 2.9492188 h -2 v -3.00000005 h -6.10156 V 2.9492188 h -5.898439 v -3.00000005 z m 0.101562,0.1015625 h 5.898438 V 3.0507813 h 6.101561 V 0.05078125 h 5.89844 V 3.0507813 h 2 v 2.4999999 h 3 v 5.8984378 h -3 v 6.101562 h 3 v 5.898438 h -3 v 6.101562 h 3 v 5.898438 h -3 v 6.101562 h 3 v 5.898438 h -3 v 2.5 h -2 v 3 h -5.89844 v -3 h -6.101561 v 3 h -5.898438 v -3 h -2 v -2.5 h -3 v -5.898438 h 3 v -6.101562 h -3 v -5.898438 h 3 v -6.101562 h -3 v -5.898438 h 3 v -6.101562 h -3 V 5.5507812 h 3 V 3.0507813 h 2 z"
       id="bottom_outsideCutPath" />
    <ellipse
       style="fill:none;stroke:#ff0000;stroke-width:0.0661458mm"
       id="path3810"
       cx="101.35088"
       cy="72.052002"
       rx="8.6052637"
       ry="9.4931078" />
    <ellipse
       style="fill:none;stroke:#ff0000;stroke-width:0.0661458mm"
       id="path3810-9"
       cx="101.35088"
       cy="94.384712"
       rx="8.6052637"
       ry="9.4931078" />
  </g>
</svg>

But we added some holes in the boxes to adapt them to our device : 

- On the big box, we made a 5 mm circular hole to put the RGB LED and a 90x25mm hole on the side to allow the access to the battery and let the wires of the sensor go out.

- On the small box, we made a 10x4 mm hole to let the wires go out and two 15mm circular holes in front of the sensor.

For the HTML part, we built a website using those codes :

Primary page :

<HTML>
<HEAD>

<STYLE>
img.bright {
	filter: brightness(80%);
}
</STYLE>

<TITLE> Trash can system </TITLE>

<META name="description" content="ejemplos de editores">

</HEAD>

<BODY BACKGROUND="prueba 2.jpg" >


<br>

<H1> 
<CENTER>
<FONT FACE="Century Gothic" COLOR="#FFFFFF">
Welcome to the smart city trash can system! 
</FONT>
</CENTER>
</H1>

<br>

<CENTER>
<FONT FACE= "Century Gothic" COLOR="#FFFFFF">
<p>We have the trash cans of the city of Paris connected to this web page </p>  
<p> in order to see when they are about to be full so they can pick them 
<p> up to empty them and prevent litter from being in the ground. </p> 	
</FONT>
</CENTER>
	
<br>

<H2>
<CENTER> 
<FONT FACE="Century Gothic" COLOR="#FFFFFF">
In order to see the map <a target="_blank" href="./SECONDARY.html"> 
<FONT COLOR="#FFFFFF"> click here </FONT> </a>
to know the status of the city trash cans 
</CENTER>
</FONT>
</H2>

</BODY>

</HTML>

Secondary page :

<HTML>
<HEAD>

<TITLE> Trash can map </TITLE>

<META name="description" content="ejemplos de editores">

</HEAD>

<br>

<H1> 
	<CENTER>
	<U>
	<FONT FACE="Century Gothic" COLOR="#FFOOOO">
	This is the map of the city of Paris
	</FONT>
	</U>
	</CENTER>
</H1>


<BODY>
	
<CENTER>
<FONT FACE="Century Gothic">
<p> As you can see the trash cans are displayed all over the city and depending on their color is their actual status </p>
</FONT>
</CENTER>
	
<CENTER>
<FONT FACE="Century Gothic">
<h4> These shows the meaning of each color: </h4>
<P> </P>
<P> 1. Green: The trash can is fully empty </P>
<P> 2. Yellow: The trash can is at 70% of its capacity </P>
<P> 3. Red: The trash can is at 70% of its capacity </P>


<img src= "./map vert.png"
	 width="600"
       height="400">
<img src= "./map jaune.png"
	 width="600"
       height="400">
<img src= "./map rouge.png"
	 width="600"
       height="400">

</FONT>
</CENTER>

</BODY>

</HTML>

/!\  There is an image on the background of the Primary page so if you don't have it, change the color of the text to black

And here is how it looks like :

Now we only need to make the cover of the trashcan to install the device, and link the python script to the website !
Previous log

[Session 5] Coding and Sensor issues

05/19/2022 at 10:52 • 0 comments
Next log

[Session 7] Website and data

05/28/2022 at 13:53 • 0 comments

Discussions

Yes, delete it Cancel

Going up?

About Us Contact Hackaday.io Give Feedback Terms of Use Privacy Policy Hackaday API

© 2024 Hackaday