Saturday, February 20, 2010

System Activity - Detailed Process View Part 2

I finally came to a design that I'm mostly happy with for how the scripting is done in System Activity. I ended up simplifying the design, removing the QUILoader and the QScriptEngine and just using the QWebView only for the scripting.

The scripting system now looks for an index.html, which would be an html file like:


<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="main.js" language="javascript" type="text/javascript">
</head>
<body>
<div id="innertoc" class="innertoc"></div>
<h1 id="heading"></h1>
<h2 id="SummaryHeading"></h2>
<div id="processsummary">
<!-- The process X is using approximately Y amount of memory etc !-->
</div>

...

Then javascript inserts the html. This way we can translate the strings, and refresh the data without reloading the screen.

So we can now refresh the data continually. This works, but unfortunately it uses up a lot of CPU :-/ It's disabled for now, but I might add a button to refresh or something.

2 comments:

Mysterious Stranges said...

This might be irrelevant, but for a more semantic document, I'd suggest the following:

- change the outer div id to a more semantic name such as 'process' or '{name/id}'. You can style and isolate based on the class anyway.
- change all of the div components (h1,h2,summary) to use classes instead of ids. You may in the future use the same document to display more than one process, which will give you problems with id conflicts. You can still isolate each item semantically by referencing the outer 'process' div.
- change the inner summary to a span if it's just going to be a phrase.
- isolate the actual embedded values inside the summary such as:
< span class="summary">The process < span class="name/id">{name/id}< /span> us using approximately < span class="memory">{memory}< /span> amount of memory< /span>

This will let you get the javascript to embed just values, and all of them as necessary, while letting you write the summary as a template, and style using css. Basically, use the javascript to embed information, use the html as a template, and use css to style it. this will make your js more simple, your template more complete, and will make the html more semantic (notice that I can parse the document for specific values for specific processes using ids, and classes.)

Any idea why the CPU usage is so high? Is it the javascript engine? What script are you using to isolate the elements that you are modifying? How often does the script run?

JohnFlux said...

I don't really get what you mean :-/

If I had:
< span class="summary">The process < span class="name/id">{name/id}< /span>

Then how would I replace "{name/id}" programmatically in javascript?

Also, how would such a thing be translated?


How are you measuring the CPU usage for it? It collects the information once, taking about 0.5 second, and that's it. It doesn't update unless you press F5.