TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
							<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta charset="UTF-8">
        <meta name="theme-color" content="#4b75ff">
        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
        <link rel="stylesheet" href="../script/ao.css">
        <script src="../script/jquery.min.js"></script>
        <script src="../script/ao_module.js"></script>
        <script src="../script/semantic/semantic.min.js"></script>
        <script src="qr/qrious.min.js"></script>
        <title>IMUS Label Maker</title>
        <style>
            body{
                background-color:white;
            }
            @font-face {
                font-family: 'TaipeiSansTCBeta';
                src: url("font/TaipeiSansTCBeta-Regular.ttf");
            }
        </style>
    </head>
    <body>
        <br><br>
        <div class="ui container">
            <div class="ui basic segment">
                <h2 class="ui header">
                    IMUS Label Maker
                    <div class="sub header">Generate a new label for the latest project</div>
                </h2>
            </div>
            <div class="ui segment">
                <h3>Settings and Properties</h3>
                <p>Width & Height</p>
                <div class="ui right labeled input">
                    <input type="text" placeholder="Width" onchange="updateCanvasWidth(this.value);">
                    <div class="ui basic label">
                        mm
                    </div>
                </div>
                <div class="ui right labeled input">
                    <input type="text" placeholder="Height" onchange="updateCanvasHeight(this.value);">
                    <div class="ui basic label">
                        mm
                    </div>
                </div>
                <br><br>
                <p>Product Title</p>
                <div class="ui fluid input">
                    <input type="text" placeholder="Title" onchange="updateTitle(this.value);">
                   
                </div>
                <br><br>
                <p>Product Subtitle</p>
                <div class="ui fluid input">
                    <input type="text" placeholder="Subtitle" onchange="updateSubtitle(this.value);">
                   
                </div>
                <br><br>
                <p>Techical Specification (Seperate by comma)</p>
                <div class="ui fluid input">
                    <input type="text" placeholder="Specification" onchange="updateTechSpec(this.value);">
                   
                </div>
                <br><br>
                <p>Project Codename</p>
                <div class="ui fluid input">
                    <input type="text" placeholder="Codename" onchange="updateProjcetCodename(this.value);">
                   
                </div>
                <div class="ui divider"></div>
                <p>Warning Labels</p>
                <div class="ui segment" id="warninglabels">
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="disposable.png">
                            <label>Disposable</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="do-not-touch.png">
                            <label>Do not Touch</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="do-not-stack.png">
                            <label>Do not Stack</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="fragile.png">
                            <label>Fragile</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="handle-with-care.png">
                            <label>Handle with care</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="hot-surface.png">
                            <label>Hot Surface</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="kepp-dry.png">
                            <label>Keep Dry</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="li-ion.png">
                            <label>Contain Li-ion Battery</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="no-fire.png">
                            <label>Do not dispose in Fire</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="protect-from-heat.png">
                            <label>Do not expose to Sunlight</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="raspberry-pi.png">
                            <label>Contain Raspberry Pi</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="require-recycle.jpg">
                            <label>Require Recycle</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="solar-power.png">
                            <label>Solar Powered</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="this-side-up.png">
                            <label>This Side Up</label>
                        </div>
                    </div>
                    <div style="padding:8px;">
                        <div class="ui checkbox">
                            <input type="checkbox" name="wifi.png">
                            <label>WiFi Included</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui divider"></div>
            <p>Label Preview</p>
            <canvas id="labelcanvas" style="border: 1px solid black;"></canvas>
            <p>CopyRight imuslab 2020 - 2021, All Right Reserved</p>
            <p>This is a label generator for imuslab standard product description label. All label generated can be used free of charge and be modified as you like. However, it is critical to keep track of each products with a uniquid codename (and QR code which will be generated automatically) for future warehouse management purposes.</p>
            <br><br>
        </div>
        <script>
            var dpcm = 118.11;      //Convert pixel to mm, mm * dpcm = pixel on screen
            var canvas = document.getElementById("labelcanvas");
            var ctx = canvas.getContext("2d");

            //Default Values
            var itemTitle = "樣本機 A100";
            var itemSubtitle = "研究用樣本機，只供內部測試用途";
            var specText = "Specification";
            var techSpec = ["迷你核融合反應堆", "128Qbit 量子計算模組", "1.2TB DDR8 記憶體", "1kAH 聚合物鋰離子電池", "CocaCola Plus 1.2L （冷卻用）"]
            var projectCodename = "PROTO-A100_1/1/2021";
            var warningLabels = [];

            function renderBasicElements(){
                //Fill background
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                //Render title bar
                ctx.fillStyle = "#242424";
                var defaultOffset = [canvas.width * 0.04, canvas.height * 0.06];
                ctx.fillRect(0, defaultOffset[1], 20, 140);
                
                //Render main title
                ctx.font ="40px TaipeiSansTCBeta";
                ctx.textBaseline = 'top';
                ctx.fillText(itemTitle, defaultOffset[0] + 10, defaultOffset[1] + 22); 

                //Render subtitle
                ctx.font ="25px TaipeiSansTCBeta";
                ctx.fillText(itemSubtitle, defaultOffset[0] + 10, defaultOffset[1] + 72); 
                
                //Update offset for specification
                if (canvas.height * 0.33 - canvas.height * 0.06 < 220){
                    defaultOffset = [canvas.width * 0.08, canvas.height * 0.43];
                }else{
                    defaultOffset = [canvas.width * 0.08, canvas.height * 0.33];
                }
               
                
                
                //Render spec horizontal bar
                ctx.fillText(specText, defaultOffset[0], defaultOffset[1] - 30); 
                ctx.fillRect(defaultOffset[0], defaultOffset[1], canvas.width * 0.3, 3);
               
                //Render the specification list
                for (var i =0; i < techSpec.length; i++){
                    ctx.fillText(techSpec[i], defaultOffset[0] + 10, defaultOffset[1] + 20 + 35 * i); 
                }

                //Render the QR Code
                var qrcodeSize = 250;
                qrcodeContent = generateQRCode(projectCodename, qrcodeSize);
                var img = new Image;
                img.onload = function(){
                    ctx.drawImage(img,canvas.width - qrcodeSize, canvas.height  - qrcodeSize - 40);
                    ctx.font ="18px TaipeiSansTCBeta";
                    ctx.fillText(projectCodename, canvas.width - qrcodeSize + 25, canvas.height - 60);
                };
                img.src = qrcodeContent;
                
                //Render warning labels
                for (var i =0; i < warningLabels.length; i++){
                    let base_image = new Image();
                    let thisOffsetCounter = i;
                    base_image.src = './labels/' + warningLabels[thisOffsetCounter];
                    base_image.onload = function(){
                        ctx.drawImage(base_image, 10 + thisOffsetCounter * 85, canvas.height - 120, 80, 80);
                    }
                }
            }

            function generateQRCode(qrcontent, size=500){
                var qr = new QRious();
                qr.set({
                    padding: 25,
                    size: size,
                    value: qrcontent
                 });
                return qr.toDataURL();
            }

            setTimeout(function(){
                defaultInit();
            }, 1000);

            function defaultInit(){
                clearCanvas();
                $("#labelcanvas").css("height", parseInt(70 / 10 * dpcm))
                canvas.height = $("#labelcanvas").height();
                $("#labelcanvas").css("width", parseInt(50 / 10 * dpcm))
                canvas.width = $("#labelcanvas").width();
                renderCanvas();
            }

            function renderCanvas(){
                renderBasicElements();
            }
            
            function clearCanvas(){
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
            //Functions related to updating
            function updateCanvasWidth(value){
                clearCanvas();
                $("#labelcanvas").css("width", parseInt(value / 10 * dpcm))
                canvas.width = $("#labelcanvas").width();
                renderCanvas();
            }

            function updateCanvasHeight(value){
                clearCanvas();
                $("#labelcanvas").css("height", parseInt(value / 10 * dpcm))
                canvas.height = $("#labelcanvas").height();
                renderCanvas();
            }

            function updateTechSpec(value){
                clearCanvas();
                techSpec = value.split(",");
                renderCanvas();
            }

            function updateProjcetCodename(value){
                clearCanvas();
                projectCodename = value;
                renderCanvas();
            }

            function updateTitle(value){
                clearCanvas();
                itemTitle = value;
                renderCanvas();
            }

            function updateSubtitle(value){
                clearCanvas();
                itemSubtitle = value;
                renderCanvas();
            }

            $("input").each(function(){
                if ($(this).attr("type") == "checkbox"){
                    $(this).on("change", function(data){
                        if ($(this)[0].checked == true){
                            warningLabels.push($(this).attr("name"));
                        }else{
                            const index = warningLabels.indexOf($(this).attr("name"));
                            if (index > -1) {
                                warningLabels.splice(index, 1);
                            }
                        }
                        clearCanvas();
                        renderCanvas();
                    })
                }
            });

        </script>
    </body>
</html>