We Keep Coding

How can I get the console output in Angular webpage?

I have a Django project which is using Angular as frontend. I have a button which on clicking is scanning the tables in the database. I have some print statements views.py file which is printing the scanned results constantly in the IDE console. I want that output in the webpage. I want that live printing of the console output in the frontend. Can any one know how i can achieve this?

You can achieve this by using server sent events. python can push these console logs to the frontend. Not a expert of python so giving a link below to how to send server side events from python to frontend
https://medium.com/code-zen/python-generator-and-html-server-sent-events-3cdf14140e56
In frontend you can listen to url exposed and as soon as server will push any message on this stream frontend can receive it and push it into component's array and can display over ui.
for frontend code, i am giving a minimal example below :-
import { Injectable, NgZone } from "#angular/core";
import { Observable } from "rxjs";
#Injectable({
providedIn: "root"
})
export class SseService {
constructor(private _zone: NgZone) {}
getServerSentEvent(url: string): Observable<any> {
return Observable.create(observer => {
const eventSource = this.getEventSource(url);
eventSource.onmessage = event => {
this._zone.run(() => {
observer.next(event);
});
};
eventSource.onerror = error => {
this._zone.run(() => {
observer.error(error);
});
};
});
}
private getEventSource(url: string): EventSource {
return new EventSource(url);
}
}
you can susbcribe to getServerSentEvent in above method and can continuously receive new messages, which is in your case your console logs.

You can try calling the following function with the information needed to be displayed.
addItem(val:any) {
let node = document.createElement("li")
let textnode = document.createTextNode(val)
node.appendChild(textnode)
document.getElementById("output").appendChild(node)
}
Make sure to have an element with the id="output".

React displaying Flask image as byte code instead of image

I have been prototyping a web server using flask and recently switched to ReactJS for my front end. I am trying to display an image that is stored on my server to my web page as follows:
#app.route("/graph" methods=['POST'])
def displayGraph():
return send_from_directory("graphDir", "graph.png")
Before switching to React, if I went to /graph, the image would display no problem. Now, however, the webpage never redirects to /graph and displays the byte code for the image instead of the image itself. What do I need to change to properly display my image on my React web page? For reference, my React code is below:
export default class App extends React.Component {
constructor (props) {
super(props);
//Initialize your state here
this.state = {
results: "",
};
//bind functions here
this.handleChange = this.handleChange.bind(this);
}
//this is called after everything is created
componentDidMount() {
}
//add functions here
//changes state of checkbox
handleChange(event) {
const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
this.setState({
[event.target.name]: value
});
}
submit() {
$.ajax({
type: "POST",
contentType: "application/json",
url: "/graph",
});
}
render() {
return (
<div>
<div className="big title">Title</div>
<input type="button" onClick={() => this.submit()} value="Submit" className="button"/>
</div>
);
}
}

If you are able to get the byte code of the image using the ajax call, you can add an <img> to your render and set the src to the image's byte code.
<image src = 'data:image/jpeg;base64,' + 'your-image-data'/>

Django call function from button, while staying on the same page

I have a dynamically created table with data from a django model. This table is displaying additional information about each data_element.
In the last column there should either
be a button displayed for each row, which will run the script with additional keywords from that specific data_element, without reloading or freezing the page.
If the script is still running (can take hours) there should be progress icon displayed and
if the script has already finished, there should be a button displayed, redirecting to an results.html
How can I program that with django?
Currently I am executing a script manually, but for that I am redirecting to another template with the args to parse and when the script is executed (with call_command('my_script', *args) the page freezes until the script ends.
<form action="{% url 'calculate' element_id %}">
<input class="btn btn-primary-custom" id="submit" type="submit" value="run script">
</form>
I tried to insert the code from this post:
Django button ajax click
But when I click on that button, nothing happens. What do I have to do, to create that table?
EDIT
the function for my button currently looks like this:
$(document).ready(function(){
$('.calculate-btn').bind('click', function(){
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var btn-data= $(this).attr('btn-data');
var csrftoken = getCookie('csrftoken');
$.ajax({
type: 'POST',
url : "/run/",
dataType: "html",
data : {'csrfmiddlewaretoken': csrftoken, 'btn-data':btn-data},
success: function(data, status, xhr){
console.log("SUCCESS")
},
error: function(data, status, xhr){
console.log("ERROR")
}
});
return false;
});
});
and my view gets called from a button click:
<input id="{{item.id}}" class='calculate-btn' name="update_log" type="button" value="Run Script" btn-data={{ item.id }}>
How can I now dynamically change the button, while the script is still running?

You will need a way to launch async tasks, and a way to get the task status, and then add quite some js/ajax code to launch the task and update your table accordingly.
For the first two parts, the canonical solution is celery.

Another, less recommended way to do that (less recommended, but probably easier to setup than celery) is to simply spawn a child, detached process which will complete the job in the background and store the status and results somewhere (e.g. in your database or in a memory storage like redis).
The main disadventage is that you lose control of what is happening in the child process. Depending on your project - if you don't care about the process control - it may turn out to be better solution.

Raspberry Pi - Node.js run Python script to continuously sample ADC

I am trying to host a local server (using Node.js) on a Raspberry Pi. The Pi has an ADC (MCP3008) connected to it, and I have a Python script that continuously samples the ADC and prints the current value. I want to have the Node server run the Python script, and whenever it sees a print statement, to just do a console.log(current value) for the time being. I am new to Node and web development in general, so it may be something simple that I'm missing so that Node will continuously receive data from the Python script. I'm trying to use Socket.io at the moment, as that seems to make sense as the method for Node to see changes from the Python script, but maybe this isn't the best way to do it. The basic webpage is from a tutorial I found (http://www.jaredwolff.com/blog/raspberry-pi-getting-interactive-with-your-server-using-websockets/). The code I am currently using is here:
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, url= require('url')
, fs = require('fs')
, gpio = require('onoff').Gpio
, PythonShell = require('python-shell');
app.listen(5000);
function handler (req, res) {
var path = url.parse(req.url).pathname;
if (path == '/') {
index = fs.readFile(__dirname+'/public/index.html',
function(error,data) {
if (error) {
res.writeHead(500);
return res.end("Error: unable to load index.html");
}
res.writeHead(200,{'Content-Type': 'text/html'});
res.end(data);
});
} else if( /\.(js)$/.test(path) ) {
index = fs.readFile(__dirname+'/public'+path,
function(error,data) {
if (error) {
res.writeHead(500);
return res.end("Error: unable to load " + path);
}
res.writeHead(200,{'Content-Type': 'text/plain'});
res.end(data);
});
} else {
res.writeHead(404);
res.end("Error: 404 - File not found.");
}
}
// Python
var pyshell = new PythonShell('mcp3008.py');
pyshell.run('mcp3008.py', function (err, results) {
if (err) throw err;
console.log('Results: %j', results);
});
io.sockets.on('connection', function (socket) {
pyshell.on('message', function (message) {
console.log(message);
});
});
Thank you for any hints or help that you can provide!

As jfriend00 recommended, I looked into node.js solutions. I had previously tried this, using several mcp3008 packages available on npm, but none of them successfully installed on my Raspberry Pi (model B). However, I ended up rewriting the one located here (https://github.com/fiskeben/mcp3008.js) as a separate .js file, included it with my code (along with some work from the npm spi library), and put it into a loop to read the ADC pin. That's working for now, and should be good enough for my current needs, but it still seems like a more processor-intensive solution than it should be. Thanks for your feedback!

Calling a python function using dojo/request

Firstly, I'm very new to the world of web development, so sorry if this question is overly simple. I'm trying to use python to handle AJAX requests. From reading the documentation it seems as though Dojo/request should be able to do this form me, however I've not found any examples to help get this working.
Assuming I've got a Python file (myFuncs.py) with some functions that return JSON data that I want to get from the server. For this call I'm interested in a particular function inside this file:
def sayhello():
return simplejson.dumps({'message':'Hello from python world'})
What is not clear to me is how to call this function using Dojo/request. The documentation suggests something like this:
require(["dojo/dom", "dojo/request", "dojo/json", "dojo/domReady!"],
function(dom, request, JSON){
// Results will be displayed in resultDiv
var resultDiv = dom.byId("resultDiv");
// Request the JSON data from the server
request.get("../myFuncs.py", {
// Parse data from JSON to a JavaScript object
handleAs: "json"
}).then(function(data){
// Display the data sent from the server
resultDiv.innerHTML = data.message
},
function(error){
// Display the error returned
resultDiv.innerHTML = error;
});
}
);
Is this even close to what I'm trying to achieve? I don't understand how to specify which function to call inside myFuncs.py?

What you could also do is to create a small jsonrpc server and use dojo to do a ajax call to that server and get the json data....
for python side you can follow this
jsonrpclib
for dojo you could try something like this..
<script>
require(['dojox/rpc/Service','dojox/rpc/JsonRPC'],
function(Service,JsonRpc)
{
function refreshContent(){
var methodParams = {
envelope: "JSON-RPC-2.0",
transport: "POST",
target: "/jsonrpc",
contentType: "application/json-rpc",
services:{}
};
methodParams.services['myfunction'] = { parameters: [] };
service = new Service(methodParams);
function getjson(){
dojo.xhrGet({
url: "/jsonrpc",
load : function(){
var data_list = [];
service.myfunction().then(
function(data){
dojo.forEach(data, function(dat){
data_list.push(dat);
});
console.log(data_list)
},
function(error) {
console.log(error);
}
);
}
});
}
getjson();
}
refreshContent();
});
});
</script>
I've used this approach with django where i am not creating a different server for the rpc calls but using django's url link to forward the call to my function.. But you can always create a small rpc server to do the same..