Moveable GUI objects HTML/CSS - html

I am attempting to create a "local only" status board with moveable "GUI" objects. Something to show physical location of items over a map. I have very strict security requirements. It would be best to have the items contained in a local file written in HTML or CSS. I cannot use a lamp, wamp or any stack that requires a server and I cannot install additional software.
Impossible?

To make Javascript work in a file viewed from the file system (as I see the challenge) you could write all your scripts in a script tag in the HTML file, and all your data as an object in that script block.

Related

Load json manually in chrome://tracing

I have a trace events JSON data and I want to view it using chrome://tracing. However, I don’t want to load the JSON every time.
Is there a way I can pass the JSON data to chrome://tracing so that without manually clicking load data all my data gets loaded?
The Trace-viewer tool currently loads the JSON file in 3 ways:
When recording a new trace
When loading the file via the load button after the file has been picked
When dropping the file into the tab (drag & drop)
All of these do a one-time update to the active trace.
Technical details
Look at the profiling_view and notice
tr.ui.b.readFile(file).then(
...
this.setActiveTrace(file.name, data);
and a few variations on calls to setActiveTrace from beginRecording , onLoadClicked_ and dropHandler_ .
Solution suggestions
Yes, there are a few ways in which you can pass the json data to chrome://tracing (i.e. trace viewer) without manually clicking load data .
Depending on how much effort you want to put into it:
Don't manually click load but drag and drop the file
Automate the drag & drop (example with selenium) based on a script which watches for file changes to the JSON
Automate the load based on file changes
Contribute to Trace Viewer yourself and add this feature. See the tracing ecosystem explainer and contributing. Note it is now part of the Catapult project in GitHub.
See fswatch - a cross-platform file change monitor.
Here is a solution, if you can relax the requirement that you have to open it with Chrome-Tracing. Speedscope is a nice replacement and can be easily started from the command line.
For offline use, or convenience in the terminal, you can also install speedscope via npm:
npm install -g speedscope
Invoking speedscope /path/to/profile will load speedscope in your default browser. Source
speedscope <my-chrome-tracing.json> opens the file.
Speedscopes offers different views but not sometimes not the same view as Chrome-Tracing. So it might not be the right choice for all use cases.
this GopherCon video shows another solution I guess, which is to load into the browser an HTML page, probably with embedded Javascript in it, that “loads” the trace file. Although I suspect not from a disk file but by “serving” it directly via a custom http server.

threepenny-gui - opening files

Dear Haskell community I have written my first gui application and decided to use
threepenny-gui to do so.
The task is the following search the files in a given folder for matches and provide links to open those files. In addition I made nice parse and render function as the files (mostly) have a special formatting.
But now I have stumbled upon a problem - most browsers prohibit links to local files by href="file://localhost/home/user/folder/file.pdf" being opened, for security reasons, which I do understand and find completely sensible.
I tried to use href="./file.pdf" when the program and the file are in the same folder, which also doesn't seem to work.
The code of the whole application is available at github/epsilonhalbe, I run it in a folder and access it via a browser at localhost:100000
The HTTP server provided by threepenny-gui will serve up static content from the directory you specify in tpStatic. Put your files in that directory, and make your links' paths be relative to it, and you'll be good to go!
As of threepenny-gui-0.4.*, there are also two functions loadFile and loadDirectory that can be used to serve a local file or directory at an automatically generated URL. This can be useful if the tpStatic field is not enough.

How can I find my working directory?

You'll have to bear with my slightly on this, but please ask if I have left out any pertinent information. I have just taken over a project to create a dashboard for my team. This dashboard has been made using a niche third-party tool that nobody here will have used before. The third party tool auto-generates some code to display "markers" on a webpage. "Markers" being some proprietary code to query a database/apply custom styling etc.
I am trying to display a webpage within the page that has been generated, and I’d like to point this to a local webpage (ie on my C drive). If I pass it an absolute path, then this results in a warning in IE9 as I am mixing data sources - a https website pointing to a http web page. It will display after ignoring the warning, but my userbase is not comfortable enough with computers to ask them to do this.
I believe if I pass it a relative path then it should work, but I can’t find out what directory to base this path off and it doesn’t appear to be anywhere obvious. So, in my current page I have an image with the web address of : https://website:8443/websitereport/images/buttons/locked.gif. What I need to know is where the “websitereport/images” folder is stored so that I can put my webpage in there to give the webpage a relative path. The HTML for this image is :
<img id="dvp_locationbar_lock" class="dvp_imagebutton" style="" dvp_title="ui.tip.lock-page" dvp_image="locationBarPageUnlockedImage" src="/websitereport/images/buttons/unlocked.gif" title="Lock this page">
What are my options for discovering where this folder is stored locally? I am running Apache Tomcat 7.0. It is not displaying if I use the path based off
C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\work\Catalina\websitereport
of
\websitereport\page.html
And I cannot find it anywhere obvious in the Apache folder. I have tried :
Searching - no results.
Using PHP to print the current working directory - cannot find out
where to edit the webpage.
Looking at images/information on the existing webpage. They all point
to folders I cannot find.
Inspecting with firebug.
In short, you can't rely on the files being on disk at all - they might be just contained in a *.war file, containing the whole application. Or they might be generated on-the-fly, despite the name sounding like an actual file.
Also, you should not arbitrarily write within a directory even if you find it (my closest guess would be tomcat's webapps/websitereport/ directory if it exists) because nobody will know that something changed during the time since last deployment. So, on the next update of the application, you'll end up overwriting all of your changes again. You typically change the underlying application and redeploy.
You might also find a few references in tomcat's conf/localhost/ directory or even in conf/server.xml, but it all depends on how your server was administered

What is the best way to add a Dart hello world into my existing Node.js website?

I have been reading tutorials and guides concerning this but have not found a straight forward answer to this.
I currently have an existing website running on a node.js platform, locally on my computer.
Goal: Now I want to try and write a simple hello world in Dart, export it to plain JavaScript and see it work in my existing website.
Reading the documents, I read that I should create a new "Web Application" and to create some sample code up and running, I check the "Generate sample content" box.
And my project is now created in Dart Editor:
I can run the sample in Dartium, see it work, etc.
But the problem is that I have now a .html file in the Dart-project, while I have a real .html file for my existing node website in a totally different path. I don't want that. I want to try and use the existing .html instead, since.. thats my real website.
But when trying to create a new Dartium launcher, I can only refer to .html files within my Dart-project:
So my big question is; How do actually start using Dart with my existing developed website?
How do I create that bridge?
On the second image above in your original question, there is an option just below the HTML file, called URL - is this what you're looking for? You can set that to any arbitrary URL.
You'd also need to copy the helloworld.dart file into your node.js server path, and copy the bits inside the <body> tag into your existing HTML page. You'll also need to copy the packages\browser\dart.js file somewhere to your node.js server, too.
If you wanted to run the JS version, you'd also need to use the editor menu option to Generate JavaScript and copy the .js files into your node.js server path.
The script tag that refers to dart.js automatically detects if the browser supports Dart natively, and will either load the .dart version of your app, or the .dart.js version of your app (from the same folder location).
So what you're likely after is something like:
c:/nodejs_server_root
/existingIndex.html // containing the two script tags from helloworld.html
// and other tags referred to in helloworld.dart
/helloworld.dart
/dart.js
/helloworld.dart.js
And in the "URL" path in the launch configuration, you'd put something like http://localhost:<port>/existingIndex.html
https://pub.dartlang.org/packages/dev_compiler can compile Dart to Node.js modules with the --modules=node option.
See also https://github.com/dart-lang/dev_compiler/issues/291#issuecomment-176687849

html directory listing formatting

So, I've been trying to get a web page to display links to videos (over a symbolic link) dynamically (i.e., without hardcoding an <a></a> tag for each one) I have, and I think I may have found a solution, albeit a hacky one:
Video
Ignoring that this is a horrible way to do this, does anyone know how to format the following?:
I'm guessing there is an apache config file somewhere, but it is extremely hard to search for it as I do not know what it is called when files are just listed in this manner.
i'm basically looking to resize the widths of columns, and maybe even do some pretty-fication.
this is all running on my web/file server and is being accessed form my local machine.
This is what you're looking for:
http://perishablepress.com/better-default-directory-views-with-htaccess/
This tutorial details how directory listing by Apache can be modified to suit your taste using HTAccess file.
Using Apache HeaderName and ReadmeName directives and the module "mod_autoindex.c" you can add custom markup to your directory listing pages.
For displaying links to A/V and other files, look at my website: https://wrcraig.com/ApacheDirectoryDescriptions.
It goes beyond the default directory description, providing a spreadsheet to assist in creating detailed descriptions and exporting them in FancyIndex/AddDescription format for inclusion in .htaccess.
It also provides a menu driven BASH scripted alternative, using the FancyIndex descriptive data above (automatically adding A/V durations) to recursively populate a custom index.html while retaining the security features of .htaccess.
The site has examples of the input spreadsheet and both the FancyIndex output and the optional BASH scripted output.