Link to static css in Yesod 0.9.3.2 - yesod

I'm following along with the yesod tutorial on the yesod wiki, and hitting a wall linking to an external css framework (blueprint).
I created the site using the scaffolding tool, and everything has been working correctly so far using 'yesod devel'.
I've downloaded the blueprint files into static/css/blueprint and added the following to default-layout-wrapper.hamlet:
!!!
<html>
<head
<title>#{pageTitle pc}
<link rel=stylesheet type=text/css media=screen href=#{StaticR css_blueprint_screen_css}>
<link rel=stylesheet type=text/css media=print href=#{StaticR css_blueprint_print_css}>
^{pageHead pc}
<body
^{pageBody pc}
The error I'm getting is:
Foundation.hs:98:27:
Not in scope: `css_blueprint_screen_css'
In the result of the splice:
$(hamletFile "hamlet/default-layout-wrapper.hamlet")
To see what the splice expanded to, use -ddump-splices
In the first argument of `hamletToRepHtml', namely
`$(hamletFile "hamlet/default-layout-wrapper.hamlet")'
In the expression:
hamletToRepHtml
($(hamletFile "hamlet/default-layout-wrapper.hamlet"))
Foundation.hs:98:27:
Not in scope: `css_blueprint_print_css'
In the result of the splice:
$(hamletFile "hamlet/default-layout-wrapper.hamlet")
To see what the splice expanded to, use -ddump-splices
In the first argument of `hamletToRepHtml', namely
`$(hamletFile "hamlet/default-layout-wrapper.hamlet")'
In the expression:
hamletToRepHtml
($(hamletFile "hamlet/default-layout-wrapper.hamlet"))
Starting development server...
I'm on a Mac, running ghc-7.0.3... I thought I understand how StaticR works, but I'm obviously missing something. Any ideas?
Thanks in advance,
Neil

Do you need to touch Settings/StaticFiles.hs? In general, yesod devel or yesod build will handle that for you automatically, but it's the first thing that comes to mind.

Related

(ROS) Failed to create global planner

My setup is: ROS melodic, Ubuntu: 18.04
I want simulate turtlebot3 moving with my own global planner and have been following this tutorial to get started: http://wiki.ros.org/navigation/Tutorials/Writing%20A%20Global%20Path%20Planner%20As%20Plugin%20in%20ROS#Running_the_Plugin_on_the_Turtlebot. The tutorial seem to be made for ROS hydro, but as it was the best source of guidance I could find I hoped it would work.
The error I'm having is:
Failed to create the global_planner/GlobalPlanner planner, are you sure it is properly registered and that the containing library is built? Exception: MultiLibraryClassLoader: Could not create object of class type global_planner::GlobalPlanner as no factory exists for it. Make sure that the library exists and was explicitly loaded through MultiLibraryClassLoader::loadLibrary()
To my knowledge I've followed the tutorial as much as possible with a only a few things done differently because I wanted to test it, couldn't do as the tutorial asked, or because I thought it wouldn't impact the results. What I have done differently is:
I use the carrot_planner.h and carrot_planner.cpp files in the tutorial section 1 to test that it works before trying with my own code to avoid confusion about where possible errors come from. It's not 'different' from the tutorial to my knowledge, but figured I'd mention it. They are placed in catkin_ws/src/carrot_planner/src/global_planner/
The ros package I'm working from is in catkin_ws/src and is called the carrot_planner. In the tutorial step 1.3 I use add_library(global_planner_lib src/global_planner/carrot_planner.cpp). Would not imagine it affects the results either.
In section 3 of the tutorial it mentions that 'First, you need to copy the package that contains your global planner (in our case global_planner) into the catkin workspace of your Turtlebot (e.g. catkin_ws).' Since my package was already in catkin_ws/src/ I haven't moved it since I guess I didn't need to.
I've altered the 'move_base.launch' file in '/opt/ros/melodic/share/turtlebot3_navigation/launch/' instead of the 'move_base.launch.xml' in '/opt/ros/hydro/share/turtlebot_navigation/launch/includes/' as there doesn't seem to be a destination '...turtlebot3_navigation/launch/includes/'. There are files in launch, but no includes folder. Maybe that a difference from Hydro to Melodic, I don't know. There may be a whole lot of things that need to be done differently from the tutorial when using Melodic, or with turtlebot3, but I don't know.
I haven't made my own launch file for bringup of the turtlebot, but have instead followed this tutorial (https://emanual.robotis.com/docs/en/platform/turtlebot3/nav_simulation/) to guide me with turtlebot3. After finishing this step in the global planner tutorial 'Save and close the move_base.launch.xml. Note that the name of the planner is global_planner/GlobalPlanner the same specified in global_planner_plugin.xml. Now, you are ready to use your new planner' I tested whether it worked by running: 'roslaunch turtlebot3_gazebo turtlebot3_world.launch' and then I tried running: 'roslaunch turtlebot3_navigation turtlebot3_navigation.launch map_file:=$HOME/map.yaml' which led to the error I showed above. I have created the map-yaml, so there's no misunderstanding whether that's missing.
I would be very glad for any help, thank you ^^
Edit: My system only had 'navfn' on it, not 'global_planner' or 'carrot_planner', if that makes a difference.
After looking over the code I found a solution. It doesn't make everything work perfectly yet, but seems to solve the immediate problem.
The problem was that in my 'global_planner_plugin.xml' I just used the code provided in the tutorial:
<library path="lib/libglobal_planner_lib">
<class name="global_planner/GlobalPlanner" type="global_planner::GlobalPlanner" base_class_type="nav_core::BaseGlobalPlanner">
<description>This is a global planner plugin by iroboapp project.</description>
</class>
</library>
But in the carrot_planner.cpp file it says:
PLUGINLIB_EXPORT_CLASS(carrot_planner::CarrotPlanner, nav_core::BaseGlobalPlanner)
Changing type="global_planner::GlobalPlanner to type="carrot_planner::CarrotPlanner and then launching turtlebot3 doesn't give the same error anymore.

Use d3.queue() to load .tsvs when working within Django

I am trying to convert my old website to use Django. However, I don't know how to successfully load my data in d3 when working inside of Django frameworks.
I know the D3 visualization works because it renders it on the old website frameworks. It appears to just be an issue of how do I properly call the pathing for the data files.
I have tried various call methods to the files by making duplicate copies and placing them in different directories. But so far I can't figure out how to call the paths correct!
Here is the original set of code:
queue()
.defer(d3.json, "../core/world_countries.json")
.defer(d3.tsv, "worldData.tsv")
.await(ready);
Here are two different method calls I have tried
queue()
.defer(d3.json, "world_countries.json")
.defer(d3.tsv, "{% static 'data/worldData.tsv' %}")
.await(ready)
2 different errors occur:
GET http://127.0.0.1:8000/web_app/world_countries.json 404 (Not Found)
GET http://127.0.0.1:8000/web_app/%7B%%20static%20'data/worldData.tsv'%20%%7D 404 (Not Found)
Solved it!
Change the pathing call to be: "/static/data/world_countries.json"
Code looks like this:
queue()
.defer(d3.json, "/static/data/world_countries.json")
.defer(d3.tsv, "/static/data/worldData.tsv")
.await(ready);

How to use Polymer 2 Build Process?

I know this might be a duplicate of this question but there was no clear answer ever.
Polymer 2 Framework has a quite good documentation so far but when it comes to the build process there`s not enough explanation.
I've successfully created my own element, also with external scripts referenced and everything runs fine with
polymer serve --open
But I've spent so much time to get this built and to include the output into a minimal HTML template without success. Is it really that tricky?
I`ve even tried again with the empty element template, no chance. This template has a nearly blank polymer.json:
{
"lint": {
"rules": [
"polymer-2"
]
}
}
If I build that right away with
polymer build
(should use default build behaviour) then I get a default build folder with an index.html and bower_components folder. There`s no reference to my created custom element ("Hello ...").
What do I have to do to get a final build of this "Hello Something" template and include it into a minimum html page?
There are a lot of different ways to go from single component to app with that single component, and I'm not going to say 100% that this is the best, but it should work. "What do I have to do to get a final build of this "Hello Something" template and include it into a minimum html page?", is a pretty flexible request, so even in the below there could be lots of alternatives for you, but the following would be my suggestion. We'll start in the command line, from the Desktop or a folder where you keep you projects.
mkdir minimal-html-page
cd minimal-html-page
polymer init
// here make sure you choose `polymer-2-application` other questions re of little consequence in this specific use case
bower install {yourComponent} --save
// in that case that you haven't published to github, copy and paste also works. Paste into the `src` directory if that's the case.
atom .
// or whatever editor you prefer
Now you're in your project, and there is just one change needed to get you going.
index.html
Change the current HTML import
<link rel="import" href="/src/build-test-app/build-test-app.html">
to link to your component.
At this point you should be free to use polymer build to have the project built, then it'll structure your code to be deployed in other applications via something that will look like
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/build-test-app/build-test-app.html">
<build-test-app></build-test-app>
This is the most basic of builds and won't account for any x-browser or performance goals you might have in your project. You'll also see in the build/default directory all the files you'd need to copy/paste to use the component elsewhere.
If you do have x-browser expectations, you can solve them fairly easily by using the polymer build --compile command. This will create slightly more complex embed code to manage either side of the ES5/6 capability boundary and will look something like:
<script>!function(e){var r=e.babelHelpers={};r.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},r.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),r.defineEnumerableProperties=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},r.defaults=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var o=t[n],i=Object.getOwnPropertyDescriptor(r,o);i&&i.configurable&&void 0===e[o]&&Object.defineProperty(e,o,i)}return e},r.defineProperty=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},r.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.get=function e(r,t,n){null===r&&(r=Function.prototype);var o=Object.getOwnPropertyDescriptor(r,t);if(void 0===o){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(n)},r.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},r.instanceof=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},r.newArrowCheck=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},r.objectDestructuringEmpty=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},r.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},r.set=function e(r,t,n,o){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var a=Object.getPrototypeOf(r);null!==a&&e(a,t,n,o)}else if("value"in i&&i.writable)i.value=n;else{var u=i.set;void 0!==u&&u.call(o,n)}return n},r.slicedToArray=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(t.push(a.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r.taggedTemplateLiteral=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},r.temporalRef=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},r.temporalUndefined={},r.toArray=function(e){return Array.isArray(e)?e:Array.from(e)},r.toConsumableArray=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}}("undefined"==typeof global?self:global);</script>
<script>if (!window.customElements) { document.write('<!--'); }</script>
<script type="text/javascript" src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!--! do not remove -->
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/build-test-app/build-test-app.html">
<build-test-app></build-test-app>
The <!--! do not remove --> part is super not kidding and it integral to making sure the compiled code works in ES6 environments.
Beyond that, there is a whole world of things that you can do to tune this up for production deployment. I'd research https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#build and https://www.polymer-project.org/2.0/docs/tools/polymer-json to get a better handle on that.
Re polymer build "This command is for app projects only." (https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#build)
Also, shell is required. See https://www.polymer-project.org/2.0/docs/tools/polymer-json#shell.

Foundation (ZURB) and Foundation.Utils

I'm new to Foundation and trying to figure out why I can't call any of the Foundation.utils functions within my document. If I type Foundation.utils.random_str(6) into the javascript console I get the desired result, I have this code before body closes any suggestions?
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
$(document).ready(function(e) {
alert(Foundation.utils.random_str(6));
//alert('ready');
});
</script>
I read the Javascript Utilities documentation for Foundation 5.0.3 and it specifically states:
As long as foundation.js has been loaded into the page, you can
access any of the Foundation utilities by calling
Foundation.utils.{function_name}.
I also couldn't get it work so I dug into foundation.min.js and found the random_str function, but there is not a reference to utils anywhere in the file.
I then tried just alert(Foundation.random_str(6)); after my $(document).foundation(); and got it to work. Here is the smallest codepen I have ever made http://cdpn.io/yfpmb to demonstrate it.
I hope that helps.

Infuser is not defined

I am trying to use Knockout external template plugin. Firefox stops in my util.js on this line: infuser.defaults.templateUrl = "/CAS/templates";
It complains that infuser is undefined. If I simply press continue in Firebug, the view loads and loads the template just fine. If I comment that line out, the template does not load and I get a file not found error. So that setting is working despite infuser is not defined. Here is the order stuff gets loaded.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/external/jquery-{version}.js",
"~/Scripts/external/jquery-ui-1-10.2.js",
"~/Scripts/external/jquery.unobtrusive*",
"~/Scripts/external/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
"~/Scripts/external/knockout-{version}.js",
"~/Scripts/external/koExternalTemplateEngine_all.js",
"~/Scripts/local/utils.js",
"~/Scripts/external/knockout.mapping-latest.js"));
bundles.Add(new ScriptBundle("~/bundles/local").Include(
"~/Scripts/local/ajaxservice.js",
"~/Scripts/local/DMS.CAS.Dataservice.js",
"~/Scripts/local/DMS.CAS.ViewModel.js",
"~/Scripts/local/DMS.Models.js"));
Here is binding in the view:
<div data-bind="template: {name: 'HelloWorld'}"></div>
My jQuery version is 2.0.3, KO version is 2.3.0, and the KO External Template plugin was installed via nuGet 1 day ago. I have pursued this as problem with the order script files being loaded in the wrong order. But, that does not seem to be the case. Any help is appreciated.
You need to put infuser.js into Knockout bundle before koExternalTemplateEngine_all.js:
bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
"~/Scripts/external/knockout-{version}.js",
"~/Scripts/external/infuser.js",
"~/Scripts/external/koExternalTemplateEngine_all.js",
"~/Scripts/local/utils.js",
"~/Scripts/external/knockout.mapping-latest.js"));