Hey,
Is there a way to modify the Printing page to replace the camera div? I am using an old android phone with Ip Webcam to monitor my prints. Ip Webcam creates it’s own webserver that you can access the streams from a webpage, or open a stream in an app like VLC. I’d like to replace the div in the printer page to point to the local url of the stream so that it will show that stream, and not try to use the local camera that I do not have. Thanks
After a lot of digging around I was able to get it working fairly well. I still have the original camera div at the top, and I just added mine to the bottom of the printer file, here’s a screenshot of what I put together…
Nice Job! Thanks for sharing 
If you can share the actual modifications, it might be helpful for someone else too 
Yep, it’s still a work in progress, but here’s what I came up with quickly yesterday. (I had to upload the file to google drive since there is no code block and I cannot upload files other than pictures here). I also added buttons to enable/disable the flash on the phone so I can see without keeping a light on, but I had to kind of hack that together, since the server doesn’t support CORS, I just ended up using a hidden iFrame. If anyone has suggestions on how to make this better, or a better way to do this in general let me know. I’ll probably work on it some more sometime this week.
Also, you will need to set the server variable to point to the ip of your IP Webcam server. And I set my video feed to 640x480, so if you want a larger camera view, you’ll just need to adjust the showVideo function width/height in the iframe style.
File location that I changed /AstroBox/src/astroprint/templates/printing.jinja2.
Also, just a note, this is on v8(3) since I cannot get it to update beyond that. You probably want to just copy my changes at the bottom, since I don’t know if there were any updates to this file since then.
Thanks!
For future reference, /AstroBox/src/astroprint/templates/printing.jinja2 looks like this:
<div class="row print-info">
<h2 class="bold" align="center">Printing</h2>
<div class="small-12 large-4 columns camera-view" align="center">
<div class="camera-container">
<i class="icon-3d-object"></i>
<img class="camera-image" width="100%"/>
</div>
<div class="camera-controls">
<div class="row collapse">
<div class="small-4 columns" align="center">
<div class="timelapse">
<i class="icon-picture"></i>
<select class="bold" align="center">
<option value="0">Off</option>
<option value="layer">Ea. layer</option>
<option value="60">1 min</option>
<option value="120">2 mins</option>
<option value="300">5 mins</option>
<option value="900">15 mins</option>
<option value="1800">30 mins</option>
</select>
<span class="dot"></span>
<div class="overlay" style="display:none"></div>
</div>
</div>
<div class="small-4 columns">
<div class="loading-button">
<button class="success round take-pic"><i class="icon-camera"></i></button>
<span class="button success round loading disabled"><i class="icon-rocket-spinner animate-spin"></i></span>
</div>
</div>
<div class="small-4 columns"></div>
</div>
</div>
</div>
<div class="info">
<div class="small-12 large-8 columns">
<div class="progress success radius">
<span class="meter" style="width: 0%"></span>
<span class="filename"></span>
<span class="progress-label"></span>
</div>
</div>
<div class="small-12 medium-6 large-4 columns" align="center">
<h2 class="bold">Time Remaining</h2>
<div class="bold">
<span class="highlighted estimated-hours">--</span>:<span class="highlighted estimated-minutes">--</span>:<span class="highlighted estimated-seconds">--</span>
</div>
</div>
<div class="small-12 medium-6 large-4 columns" align="center">
<h2 class="bold">Printing Layer</h2>
<div class="bold">
<span class="current-layer highlighted">-</span> of <span class="highlighted layer-count">-</span>
</div>
</div>
</div>
<div class="heating">
<div class="small-12 large-8 columns" align="center">
<i class="icon-temperatire blink-animation"></i>
<b>Heating up...</b>
</div>
</div>
</div>
{%- macro temp_control(class, label) %}
<div class="temp-bar {{class}}">
<h3 class="bold">Current Temp (°C)</h3>
<label class="bold">{{label}}</label>
<div class="temp-curret-line">
<div class="triangle_left"></div>
<div class="triangle_right"></div>
</div>
<div class="temp-target bold">
<a class="temp-edit"><i class="icon-pencil"></i></a>
<span class="label">- -</span>
<input type="number" class="hide"/>
</div>
<div class="temp-current bold">--</div>
</div>
{%- endmacro %}
<div class="row temperatures">
<div class="small-12 columns">
<h2 class="bold">Printer Temperature</h2>
{{ temp_control('nozzle', 'Nozzle')}}
{{ temp_control('bed', 'Bed')}}
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns" align="center">
<div class="loading-button expand">
<button class="success radius pause-print"><i class="icon-pause"></i> Pause Print</button>
<span class="button loading success radius disabled"><i class="icon-rocket-spinner animate-spin"></i> Pausing...</span>
</div>
</div>
<div class="small-12 medium-4 columns" align="center">
<button class="radius controls expand" style="display:none"><i class="icon-move"></i> Printer Controls</button>
</div>
<div class="small-12 medium-4 columns" align="center">
<button class="alert radius stop-print expand"><i class="icon-cancel-circled"></i> Cancel Print</button>
</div>
</div>
<div id="cancel-print-modal" class="reveal-modal medium radius" data-reveal align="center">
<h2 class="bold">Cancel current print job.</h2>
<div class="modal-body">
<p>This will stop the current print job. This action can't be recovered.</p>
<p>Are you sure?</p>
</div>
<div class="row">
<div class="small-12 medium-6 columns">
<button class="secondary radius no expand">No</button>
</div>
<div class="small-12 medium-6 columns">
<div class="loading-button expand">
<button class="alert radius yes">Yes, cancel it</button>
<span class="button loading radius alert"><i class="icon-rocket-spinner animate-spin"></i> Canceling...</span>
</div>
</div>
</div>
<a class="close-reveal-modal">×</a>
</div>
<script type="text/javascript">
var server = "http://192.168.250.123:8080";
function hideVideo() {
var element = document.getElementById("videoIframe");
element.parentNode.removeChild(element);
}
function showVideo() {
var element = document.getElementById("video");
element.innerHTML = '<iframe id="videoIframe" src="' + server + '/video" style="width:645px;height: 485px;"></iframe>';
}
function disableTorch() {
var element = document.getElementById("flash");
element.innerHTML = '<iframe id="flashFrame" src="' + server + '/disabletorch"></iframe>';
}
function enableTorch() {
var element = document.getElementById("flash");
element.innerHTML = '<iframe id="flashFrame" src="' + server + '/enabletorch"></iframe>';
}
</script>
<div class="row">
<div class="small-12 medium-4 columns" align="center">
<button class="success radius" onclick="showVideo();">Show Video</button>
</div>
<div class="small-12 medium-4 columns" align="center">
<button class="alert radius" onclick="hideVideo();">Hide Video</button>
</div>
</div>
<div id='video' align="center"></div>
<div class="row">
<div class="small-12 medium-4 columns" align="center">
<button class="success radius" onclick="enableTorch();">Enable Torch</button>
</div>
<div class="small-12 medium-4 columns" align="center">
<button class="alert radius" onclick="disableTorch();">Disable Torch</button>
</div>
</div>is there any hope of getting this intergrated into a very near future update. I have a few phones laying around and I would love to upcycle them
Yes IP cam is in the plans, when the time is right and other essential features are done and stable
How and where did you change the file on the AstroBox?
Hello… Any update on when ip cameras will be an option for astroprint touch. would really like to see the update in the next update.